Scratchで作ったゲーム「けーちゃんの脱出」をUnityでつくってみるよ！
まずはオブジェクトの作成から！！
画面サイズを設定する
まずは、Scratchと同じ画面のアスペクトにするために、
「ゲーム」ビューに切り替えて、「アスペクト」を選択し、「+」から新しいアスペクト比を作成。
”タイプ” を「アスペクト比」に変更して、”幅＆高さ” を16：12（4：3）に設定、「OK」で保存。
すると、Scratchと同じアスペクト比率の画面になるよ。
ステージ（背景）を作る
プロジェクトウィンドウの中で右クリックし、「作成」→「フォルダ」を選択。
フォルダ名を”Stage”に変更し、その中に背景画像をインポート。
（右クリック→「パッケージをインポート」→「カスタムパッケージ」でファイルを選択）
（ファイルから直接ドラッグ＆ドロップでインポートもできる）
ヒエラルキー内で右クリックし、「UI」→「画像」を選択。
「Canvas」の中に「Image」が作成され、「EventSystem」が一緒に作成されるよ。
「Image」を選択して、インスペクター内の ”ソース画像” にインポートした画像を1つアタッチ。
画像を、Canvasのサイズ（白い枠）の大きさに合わせる。
ヒエラルキーの「Image」を複製して、それぞれの画像をアタッチ、名前を変更。
移動矢印の配置
ぼくは、アセットストアの”2D Casual UI”を使ってるよ
Canvasを選択し、右クリック、「UI」→「Image」を選択。
インスペクターの”ソース画像”と”色”を変更。
位置やサイズを調整して画面に配置。
複製して反対向きの矢印を作成。
インスペクターの ”回転” から、Z軸を180にすると反対向きになるよ！
同じように、上矢印と下矢印を作成。
スタートボタンの作成
「はじめる」のボタンはタイトル画面の中にあるから、
ヒエラルキーの「タイトル画像」を選択して右クリック、「UI」→「Button」を作成
背景画像が重なって表示されてるので、ヒエラルキーから他の背景を一括選択。
（最初の列をクリック→「Shift」を押しながら最後の列をクリック。）
インスペクターの一番上の ☑ をクリックして外と非表示になるよ。
ボタンの色やサイズ、配置を設定する。
ヒエラルキーの「Button」を選択すると、子オブジェクトの「Text(TMP)」が表示されるので、インスペクターからテキストを変更する。
デフォルトで設定されてるフォントでは、日本語が表示されないので、変更が必要。
ぼくは、Google Fonts からダウンロードしたよ。
オブジェクトの作成
キャラクター・アイテム画像
Unityでは、ヒエラルキーの親子関係を設定すると、表示/非表示が簡単にできるよ。
だから、オブジェクト（キャラとアイテム）は、ステージごとに作成していくよ！
ヒエラルキーから「南」を選択 →UI「Image」を作成し、画像をアタッチ。
Scratchのコスチュームが複数あれば、複製して画像変更。
Scratchの「ゆーちゃん」は、北から移動してくるけど、Unityでオブジェクトの移動はちょっと複雑だから（親子関係も変更も必要）、それぞれの背景に必要なオブジェクトを全部入れるよ！！
オブジェクトは、ヒエラルキーの下に行くほど手前に表示されるから、並び順を調整してね。
Scratchで使ったアイテムと、ちょっとだけ変えてみた♡
上矢印は、「北」の子オブジェクトにして、「通せんぼ」で隠れるように移動するよ！
（”上矢印”は通せんぼの場所でしか使わないため）
電話のボタンとパネル
電話の数字ボタンは、「UI」→「Button」で作ったよ。
パネルは「UI」→「Text(TMP)」で作成。
（とりあえず”0”をテキストに入れてバランスを整えたよ！）
アイテムボックス
画面右下に、アイテムボックスを作るよ！
アイテムボックスの”子オブジェクト”にそれぞれのアイテム取得時の画像を入れるよ！
クリア画面
ダイニングに必要なオブジェクトを全部入れると、こんな感じ。。
はんだ先生は、「ドア」が非表示になったら見えるようになるよ！
本の詳細や矢印は、背景の上に表示させたいから、ヒエラルキーで背景の下に作るよ。
（作成後にドラッグして順番を変えることもできる）
Scratchで表示してた（〇〇と言う/〇〇と考える）を画像とテキストで入れるよ。
次の記事からC#スクリプトでプログラミングするよ！
コメント