脱出ゲームを作ってみよう!7

前回はCameraControllerというゲームオブジェクトを設置しました。今回はこのゲームオブジェクトを使って、実際にゲームを動かすまでやりたいと思います。

 

CanvasとButtonを作成する

 

ヒエラルキー(画面左側)でCreate→UI→Canvasをクリック。Canvasを作成します。Canvasを右クリックして、UI→Buttonでボタンを作成してください。Buttonの名前はButtonLeftと書き換えます。

 

同じようにもう一つButtonを作ってください。名前をButtonRightとします。

 

ButtonLeftをヒエラルキーからダブルクリックしてください。ButtonLeftがズームで表示されて、ButtonLeftの場所がわかりましたね。

 

ここで、haikei1をダブルクリックしてみてください。haikei1がズームで表示されて、haikei1の場所がわかりました。

 

オブジェクトがどこにあるか知りたいときは、ヒエラルキーからオブジェクトをダブルクリックすると見つけることができます^^

 

Buttonの場所を調整する

 

ButtonLeftを再びダブルクリックし、フォーカスしてください。白枠の中央にあると思います。これをドラッグで移動させて、左下に移動させてください。

 

ドラッグの仕方は、エディタ画面左上にあるツールボックスの、手のひらツールの一つ右のアイコンをクリックするとオブジェクトを移動させることができましたね^^

 

ボタンの位置を移動させて調整する

 

同様にButtonRightも右下に配置してください。

 

Buttonに関数を割り当てる

 

ButtonLeftをクリックしてください。下図のOnClickという箇所に、先ほどのCameraControllerをドラッグアンドドロップしアタッチしてください。Functionには、CameraControllerのPushButtonCamera1を割り当ててください。

 

ButtonLeftのOnClickにCameraControllerをアタッチし、その中のFunction欄にはCameraControllerのPushButtonCamera1を割り当てる。

 

同様にButtonRightにもOnClickにCameraControllerをアタッチし、その中のFunction欄にはCameraControllerのPushButtonCamera2を割り当ててください。

 

ここで、ゲームを実行しますエディタ中央の▶ボタンを押して、ゲームを確認してください。

ButtonLeftとButtonRightを押したときにカメラが切り替われば成功です。

 

UIボタンで画像が切り替わった

 

UIボタンを装飾する

 

さて、私がお見せしましたゲーム実行画面ですが、ButtonLeftとButtonRightの画像が違います。こちらは画像を用意してSpriteに割り当てました。

 

アイコン商用可能無料ダウンロードサイトicooon

このサイトで「矢印」と検索しダウンロードしました。無料で使いやすいので是非使ってみてください。

 

画像の設定の仕方は、画像をインポートし(すでにやりましたね)、ButtonLeftをヒエラルキーから選択、右側のインスペクタにImage (script)とある欄に、source Imageという欄があります。そこに画像をドラッグアンドドロップしてください。(再掲ですが、画像が選択できない場合は画像のImage Typeが2D and UIになっているか、その画像を選択して確認してください)

 

 

以上で背景画像とカメラの設定が完了しました。

次回に続く。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ツールバーへスキップ