- Unity 3D/2D移动开发实战教程
- 朱淑琴
- 1046字
- 2025-02-25 13:58:57
2.1 制作按钮
为了完成制作控制按钮菜单,需要制作每个按钮图片。因为准备三个按钮的素材图片是连成一体的,无法对图片进行操作,所以需要对图片进行切割,具体制作步骤如下。
2.1.1 图片切割
步骤1 创建2D项目
启动Unity,创建一个新的2D项目。
步骤2 导入素材
(1)选中Assets文件夹,单击鼠标右键,选择Create→Folder命令,创建用来存放素标图片的文件夹,并命名为Texture。
(2)接下来在Windows资源管理器中打开存放按钮素材的文件夹,将按钮素材直接拖曳至Texture文件夹中,在Project面板可以看到拖曳的素材。因为创建的是2D项目,所以导入图片后自动转换为Sprite对象,如图2-4所示。在2D项目中,图片被称为Sprite(精灵)。

图2-4 导入素材
步骤3 图片切割
(1)单击按钮图片右侧的三角形按钮,可以看到三个按钮图片是连成一个整体的,无法对图片进行操作,这时需要使用Sprite Editor工具将连成整体的图片分割成若干个Sprite使用。具体操作方法是:使用鼠标选择名字为1的图片,在Inspector面板中将图片的Sprite Mode改为Multiple形式,如图2-5所示。

图2-5 修改Sprite Mode格式
(2)接下来单击Sprite Editor按钮进行图片编辑,图2-6所示为打开的Sprite Editor编辑面板,在编辑面板的左上角单击自动切片Slice按钮,弹出如图2-7所示的面板,在面板Type的下拉列表中选择Automatic选项,单击该面板上的Slice按钮,然后再单击编辑面板偏右侧的Apply按钮。对其他图片名为2、3、4的按钮图片素材按同样的方式操作。

图2-6 Sprite Editor面板

图2-7 Slice设置面板
(3)图片切割完成之后,单击图片右边的三角形按钮,就可以看到三个独立的图片了,效果如图2-8所示。

图2-8 按钮图片切割完成
2.1.2 添加按钮
步骤1 将按钮加入场景
要将切割好的按钮图片素材添加到场景中,则首先从Project面板中将文件名为1_0的图片拖曳至Hierarchy面板,并单击鼠标右键,选择Rename命令,将图片重新命名为Button_1。按上述步骤,将文件名为“2_0”“3_0”“4_0”的按钮图片分别拖曳至Hierarchy面板,并依次重新命名为Button_2 Button_3和Button_4,最终效果如图2-9所示。

图2-9 为按钮重命名
步骤2 调整按钮的位置及大小
将按钮图片拖曳至Hierarchy面板后,如果觉得插入的按钮图片太大,可以在Inspector面板通过调整图片的Scale属性进行修改,如将X轴、Y轴方向图片的大小均调整为0.5,如图2-10所示。在Scene面板中我们发现多个图片重叠在一起了,这时可以从Hierarchy面板单击选中每个按钮对象,或直接在Scene面板单击图片进行移动操作(被单击的组件会显示X轴方向的红色箭头和Y轴方向的绿色箭头,以及两个箭头交点处的蓝色正方形。拖曳箭头可以使组件向箭头的方向移动,拖曳蓝色正方形可以随意移动组件),对按钮进行摆放,如图2-11所示。若想让按钮图片对齐并均匀分布,可以通过设置Transform面板的Position属性来实现。

图2-10 调整按钮大小

图2-11 调整按钮位置