【超初心者向け】第4回: Unityで画像切り替えボタンを作ってみよう!

【超初心者向け】第4回: Unityで画像切り替えボタンを作ってみよう!
さて前回は画像を並べて配置するところまでやりましたね。今回は画像切り替えボタンを作る方法について解説します。
イエモン「勉強させていただきます!」

切り替えボタンを配置


まずはCreateからUl→Canvasをクリックし、ファイル名を「CanvasUl」に変更します。
続いてCanvasUlを選択し右クリックでUl→Buttonをクリックし、ファイル名を「ButtonLeft」に変更します。
ButtonLeftを選択して、Inspectorの[Pos X:-320、Width:100、Helght:200]に設定します。次にColorをクリックし、[R:200、G:200、B:255、A:200]と設定します。
ButtonLeftの「▼」をクリックしてTextを選択します。InspectorのTextを「<」と記入し、Font Styleを「Bold」、Font Sizeを「50」に設定します。これで左ボタンが出来ました。
続いて右ボタンを作りましょう。先ほど作成したButtonLeftをコピーしましょう。ButtonLeftを選択し右クリックでDuplicateでコピー出来ます。コピーしたらファイル名を「ButtonRight」に変更します。
右ボタンの位置を移動しましょう。ButtonRightを選択しInspectorの[Pos X:320、Width:100、Helght:200]に設定します。これで右ボタンが出来ました。
イエモン「ぼたんちゃーん!」

左右に切り替えるプログラムを作成


次は左右に切り替えるプログラムを作成しましょう。前回作成したスクリプト「GameManager.cs」を開きます。そしてコードを下記のように記述します。
イエモン「なげぇーす…」

スクリプトの紐づけ


続いて作成したスクリプトとの紐づけ作業です。HierarchyのGameManagerを選択し、Inspectorの「Panel Walls」の箇所にHierarchyの「panelWalls」をドラッグ&ドロップします。
これで右ボタンを押せば右に、左ボタンを押せば左に切り替わることが出来たと思います。さて本日はここまでにしましょう。次回はボタンを押したらセリフが出てくる制作方法を解説します。家田君ここまで分かったかな?
イエモン「人生右も左もどちらでも行けるとゆう事ですな!」
アプリ名:フリップ芸(めくり芸)
内容:芸人がよくやるフリップネタのやつです。
対象:Android
アプリダウンロードはこちら(androidのみ):
https://play.google.com/store/apps/details?id=com.hide.flip_show