今回はドット絵で簡単なボタンUIを作成してみます。
はじめに
ドット絵作成ソフトはAsepriteです。
作成する画像はunityアセットストアにある下記の「2DSimpleUIPack」にあるボタンに近いイメージです。割とシンプルなものです。
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220729001-1024x460.png)
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220729002.png)
画像のサイズ・設定
画像サイズは48×16で作成。
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220729003.png)
PLAYやCONTINUEなどのテキストはUnity側でセットする方が用意する画像の数が減りますが、今回はテキスト込みで作成してみます。
作成開始
まずはテキストを挿入。Edit→InsertText。
テキスト内容とサイズ、フォントを選択してOK。
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220729018.png)
下記の様にテキストがセットされます。
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220729005.png)
バケツを選択して背景を好きな色で塗りつぶし。
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220729006.png)
黒線で枠を描いてボタンっぽくしてみます。
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220729007.png)
少し味気が無いのでボタン感を強めるために角を丸くして、光と影を付けてみます。
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220729009.png)
更に3D感を出してみます。
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220729010.png)
insertTextでフォントの変更ができますが、文字も簡単に自分の好きなように変更できるので、白色部分を変更してドット感を強めてみます。
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220729011.png)
押した後のボタンも作成して動作をテスト。
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220729017.gif)
色や細かい調整は必要だけど、簡単なものとしてはこんな感じ。
ボタンを押した時に凹む動作は場合によっては不要かな。