【東パソ非公式Unity独断補足解説(初回)】脱出ゲームを作る(21‗23)画像書き換え

今回の内容は、初心者であるオジサンが、Unityをはじめるとどうなるか、東パソで紹介されたUnityで脱出ゲームを作れるかを検証する動画です。（4-001）

恐縮ですが、BSテレビ東京放送制作の「東京パソコンクラブ〜プログラミング女子のゼロからゲーム作り〜」のunityのパートについて考察するということをはじめました。非公式であります。

1. unityセッティングまで
2. ドアを開けるだけ（21話）の完成直前まで
3. ボタンを押して鍵を取ってドアを開ける
今回のスクリプト

1. unityセッティングまで

まず今回の目標は、東パソの23話、Unityで「ボタンを押して鍵を取ってドアを開けるまで」の脱出ゲームを作ってみる、です。簡単そうですが、ここまでにどんな苦労があったのでしょうか。

まずは設定から。UnityHUBのインストールからはじめる。

©Unity Technologies

クリエイティブプロジェクトを開始して Unity Hub をダウンロードする | Unity

3 つの簡単なステップで Unity をダウンロードし、2D/3D のマルチプラットフォームの体験やゲームを制作するための、世界で最も人気のある開発プラットフォームの使用を開始しましょう。

HUBとは？HUBをインストールしただけで本体をインストールしないと。しかも時間がかかった。（Wikiハブ(hub)とは、スター型物理トポロジを取るネットワークにおいて中心に位置する集線装置である。ハブという名前の由来は『車輪の中心』からきている。）

要するにHUBは本体ではない。HUBを通して本体であるエディッターをインストールする必要がある。

参考にしたサイトはhttps://styly.cc/ja/tips/tomo-unity-install/

（【Unity Hub】Unityをインストールする方法）

マイクロソフトのVidual Studioもインストールになった。

あれ？動かない？再起動。インストールに時間がかかる。Unity Package Manager が全体65のうち39、40、41とおそろしいほどゆっくりすすむ・・・なんか2時間くらいかかった。

Unityのバージョンは6000では番組の内容との相違が多く発生したので、Unity2022にインストールし直しました。

日本語にならないので多少困った。番組では英語だけど。言語設定はWindowsならEdit＞Preferences＞Lnaguages

2. ドアを開けるだけ（21話）の完成直前まで

#21 17分39秒（以下の示している時刻はＣＭや録画の影響等、秒数等のズレが生じるので大体の目安として下さい。）イラストを取り込む。これをマネするために、まずイラストを入手せねば。クリングAIで用意した。布と部屋は使わないので用意しない。

#21 17分36秒Assetsにイラストを取り込む。「普通に持ってくればいいんだ」

#21 18分26秒「UIからCanvas（キャンバス）を選択」これは、Hierarchy（ヒエラルキー、階層）このHierarchyからUI＞Canvasと選ぶ。　

#21 18分36秒　Canvasを選択して何やら表示がされたのは、Inspector（検察官）というウインドウの中が表示されたもの

#21 18分56秒　やんちゃんがドアのイラストをImage＞Source　Imageにドラッグした。Imageが無い。下のAdd Component でUI>imageを選択して追加。

やんちゃんのマネをしたらできた。

ここで、思わずsaveする。（Ｆile>Save）Save Projectもした。違いがよくわからん。どこに保存されているのか。何となくOpenSecneから呼びだせそうだが

あと、なんかレイアウトがちがう。そうこうしているうちにいろんなウィンドウを消してしまった！少し苦労して「Window>Layouts>2by3」であることがわかった。

最初はcloseddoor.pngが「Rect Transforｍ」が機能しなかったので、困ったが、そのうち背景っぽくなった。その中にまた小さいcloseddoor.pngを加えると、#21 19分30秒の様に変形ができる様になった。

番組の仕様に近いレイアウトの設定は「Window>Layouts>2by3」

#21 21分53秒　変数の説明

まだコマンドを打ち込む方法がわからない。まず、動画　次世代型ITスクール ITeens Lab(アイティーンズラボ)氏の　超初心者向けUnityの使い方①　〜Unity(ユニティ)とは？　インストールと準備〜　の13分34秒で、ビジュアルスタジオという、コマンドを打ち込む画面が出る方法がわかった。「プロジェクトウインドウで右クリック＞Create＞C#ScriptでNewMonoBehaviorScriptというスクリプトが作成できる。」これをクリックするとVidual Studioが起動する。

#21 23分28秒　image.spreiteのところに差し替えたいspriteを設定する。現在管理する絵を決めるということ。変更するときは同様に設定すればいい、ということだ。

#21 23分45秒　image.sprite=sprite；と入力、これはBASICでも基本だけど、ひとつの「＝」は等号でなくて代入です。

#22 20分57秒　ここに1行目から4行目が見える。

なんかusing UnityEngine.UI;が無くて、とりあえず手入力した。

#21 24分09秒　InspectorにDoor（Script）とあるが、見当たらない！。Add Component　でScript>Doorを選択して追加。うまく出現したが、ImageとSpriteの欄がでてこない。public命令などの変数宣言を確認。

Doorのスクリプトが完成したら、マウスのクリック（Button）の設定を行う。

Add　ComponentからUI＞Buttonで追加、Runtime Onlyに合わせて、CanvasのImageからドラッグ→（ＢｕｔｔｏｎのRuntime Onlyの下に）ドロップ、そうすると、No FunctionのところからDoor＞Open()が選択できます。

ここまでの状態で、クローズドアの画像をクリックしたらオープンドアの画像になることに成功。ここまでが第21話です。

CanvaではWorldSpaceにすると座標を見失うかも・・・・。

3. ボタンを押して鍵を取ってドアを開ける

そして第22話からは、上記の内容を・・・実は掛け算的にカギ、ボタン、とこの様にすべて先ほどまでおこなったソース入力を行う。ここが番組ではさらっと流されているので、実際はけっこうシンドイ。

まずはクローズドアをクリックしても鍵のフラグ判定で何も起きない。

（ドアで10行目　public bool keyFlag = false;　で、15行目 if (keyFlag == true)としているので、if以下が実行されない。）

ボタンを押すと鍵の画像を出現させて、鍵をクリックしたら

（ＫＥＹで10行目　public void Pickup()で以下を実行。door.keyFlag = true;と gameObject.SetActive(false);）

鍵のフラグをたてて、鍵の画像を消す。

（Switchで9行目　public void Pless()で以下を実行。 key.gameObject.SetActive(true);）

鍵のフラグが立った状態でクローズドアをクリックしたら

オープンドアになるようにして、「脱出成功」と文字を表示する

（ドアで15行目 if (keyFlag == true)としているので、if以下を実行。Myimage.sprite = sprite;　と　text.text = “脱出成功！”;）

さて、プログラムを保存。Projectごとの保存は容量が大きいです。おすすめの保存方法は、Save As..で「名前を付けてシーンを保存」。読込は「Open scene」で拡張子.unityのファイルを読み込む、です。

今回のはどうでしたか。実は動画ではまだ説明できなかったエラーが山ほどあったんですよね。でも僕の動画での説明の技量というか、あとUnityの知識不足もあって、これでもボツにした過程が何箇所あったんですが、なんかおじさんの慌てぶりが伝われば今回はよしとできますかね。あとね。今回のハマり箇所は初心者の私が実践した「初心者のハマりやすい箇所」だったと思うんですよね。何か皆さんの参考になればと思っています。ハイ。