Unityでゲーム、アプリ開発

Unityで初めてゲームやアプリを作る人のための支援ブログです。

Unity Buttonを好きな画像にする方法 Unity学習13

今回はよくスタートボタンなどに使われるButtonに自分が
好きな画像を使えるようにする方法です。

※動画での説明がいい方は下記動画をご覧ください。
記事での説明がいい方はそのまま読み進めてください。

youtu.be

今日もお元気でしょうか?
僕は毎日死んだような魚の目をしています。

まあ冗談なんですが笑笑
とは言え結構経済不況で正社員で働く僕は
萎える毎日を過ごしています泣

と言う事で!本題に入っていきましょう!


Buttonを好きな画像にする方法!

f:id:Phoenix9056:20200429011544p:plain

よくシーン遷移(画面の移動)であったりButtonを
クリックして何かしらのアクションをしたい時なんかに
使われるのですが、そんなButtonに好きな画像貼り付けたいですよね!

かっこいいStartボタンの画像であったり、選択肢進行形のゲームであったら
必須項目になってくると思います。

それでは、Unityのプロジェクトを3Dで開いてください。
※Unityの起動方法が分からない方は下記記事を参考にしてください。
phoenix9056.hatenablog.com



f:id:Phoenix9056:20200323235855j:plain

まず、Hierarchyの+⇨UI⇨Buttonを選択してButtonを
作成してください。



f:id:Phoenix9056:20200324000050j:plain

上の画像のようにButtonがScen画面とGame画面に表示されます。
最初はScen画面でどでかく写っていたり反対を写しているので
①のx軸の▲を押して画面を回転したり、マウスの右クリックを
押しながら画面をずらしたりなどして上手く写るようにしましょう。



次に、自分が好きな画像を用意してください。
今回僕は下記の画像を使用するので特に用途がなければ
下記の画像を保存して使ってみてください。
f:id:Phoenix9056:20200324000710p:plain


f:id:Phoenix9056:20200324002617j:plain

先程の①の画像をファイルからprojectのAsset内にドラッグ&ドロップして
画像を追加してください。

次に、Inspector内にある②のTexture TypeをDefaultから
sprite(2D and UI)に変更してください。
コレでUnity内で画像が使えるようになります。

f:id:Phoenix9056:20200324004605j:plain

最後にUnapplied Import Settingsの表示がされるので
ApplyをクリックするとUnity内で使用する事が出来ます。



f:id:Phoenix9056:20200324004908j:plain

次に、Hierarchy内にあるButtonをクリックして、
Inspector内にある②のSource Imageに、
①の画像をドラッグ&ドロップしてください。

f:id:Phoenix9056:20200324005200j:plain

①の様に画像が表示されたかと思います。
ですがButtonの文字が気になるのでそれを消していきましょう。

Hierarchy内にある②のButtonの横にある▲をクリックして、
③のTextをクリックします。

④のInspector内にあるTextボックスにあるButtonの文字を
消す事でButtonの文字の表示がされなくなります。



なんか画像ぺちゃんこ!!

なので大きさを好きな大きさに伸ばしましょう。

f:id:Phoenix9056:20200324005854j:plain

①のHierarchy内にあるButtonをクリックして、
②の四角っぽいマークをクリック。
最後に③の○マークをクリックしながら④の様に好きな
大きさにしてください。



上手くいきましたか??

ちなみにbuttonを実際使ってみたいと言う方は、
下記記事よりシーン遷移(移動)までやってみてはいかがでしょうか?
phoenix9056.hatenablog.com

ご視聴ありがとうございました。

※Unity学習を続けてされる方は下記記事を参考にしてください。
phoenix9056.hatenablog.com

※初心者編はこちらになります。
phoenix9056.hatenablog.com

※オススメアセットの紹介は下記より。
phoenix9056.hatenablog.com