建立一个 UI 上的图片按钮

前置作业

Canvas 设定请参照先前文章的「Canvas 设定」环节: 新建一个 UI 视窗

PNG 图片按钮制作器

请先进去制作器做好五张不同颜色的 Start 图片并下载下来

按钮 (Button)

新增一个 2D 专案

新增一个按钮 (Button)

在「阶层」视窗按下右键，选择「UI」「Button」

再来要设定 Canvas 部分，请参照: 新建一个 UI 视窗

将开头制作好的五张图片放进资源管理器

再来设定按钮的图片，在「Button」物件的「Image」属性里面的「源影像」将图片拉进去

将阶层里面「Button」底下的文字 (Text) 删除

设定「Button」物件的属性「Button」，将「过滤」设定为「Sprite 交换」

接下来设定属性「Button」的四张图片，四张图片分别为：

• Highlighted Sprite – 滑鼠移动到按钮上的图片
• Pressed Sprite – 滑鼠按下按钮当下的图片
• Selected Sprite – 按钮被按下之后的图片
• Disabled Sprite – Interactable (可互动按钮) 尚未勾选时显示的图片

那就把图片都拉进去吧!!

图片按钮完成