カテゴリーアーカイブ: 脱出ゲームの作り方
前回はＵＩの設定として、画面がボタンで移り変わることを実装しました。
今回はゲームオブジェクトを画面に配置していきます。
まず大切なことから。
CameraにRaycaster2Dコンポーネントをつける
まず、二つのカメラ（MainCamera とCamera）にEvent→Physics2DRaycasterコンポーネントをつけてください。
ゲームオブジェクトのタッチ（クリック）検出はカメラにこのコンポーネントがつけてあることと、ゲームオブジェクトにコライダがついている必要があるんだよ♪
haikeiのorder in rayerを-1にする
背景画像のhaikei1をクリックしてください。インスペクタのOrder in Rayerを-1にしてください。これは、この後設置するゲームオブジェクトが背景に隠れないために、レイヤーの数字を少なくして背景を後ろにしています。
ゲームオブジェクトを設置する
Imagesフォルダからの画像をSceneにドラッグアンドドロップしてください。すると、ヒエラルキーに「connecta」などの画像の名前が設置されました。
（ドラッグアンドドロップができない場合は、その画像のインスペクタを確認して、Texture TypeがSprite「2D and UI」になっているか確認してください。
ゲームオブジェクトにコライダをつける
上の赤線で囲んであるように、各ゲームオブジェクトにBox Collider2Dをつけてください。
GameManagerを追加する
ヒエラルキー上で右クリック→Create Emptyよりゲームオブジェクトを作り、オブジェクト名を「GameManager」にしてください。このオブジェクトの名前は特に重要ではなく、hogeでもhageでも大丈夫です。
スクリプトGameManagerを作る
画面下のProjectのあたりにカーソルを合わせて、右クリック →Create→C#スクリプトを新規に作成します。スクリプトの名前は「GameManager」にしてください。
上記コードをコピペする
ヒエラルキー上のGameManagerにスクリプトGamemanagerをドラッグアンドドロップしてアタッチします。
そして、ゲームオブジェクトGameManagerをクリックすると、インスペクタにGameManager（Script）とあり、「None」となっている箇所があると思います。
そこに、各名前（Connecta には connecta）のゲームオブジェクトをアタッチしてください。
EventTriggerをゲームオブジェクトに設定する
ヒエラルキーからconnectaなどのドラッグアンドドロップしたゲームオブジェクトをクリックして、インスペクタからAddComponent→Event→EventTriggerコンポーネントを選択してください。Event Typeは「Pointer Click」にしてください。
下図のようにGameManagerを接続して、「+」ボタンより、GameManagerを選択して、「PushObjectConnecta」を選択してください。
動作確認
それでは実行してみましょう。
ゲームオブジェクトをクリックするとそのゲームオブジェクトが消えてなくなるはずです。
脱出ゲームの仕組みはこのように、ゲームオブジェクトを設置する→タッチするとゲームオブジェクトが消える関数を用いる ということを基本的なこととして行っています。
コネクタがタッチで消えた。
ほかのゲームオブジェクトも試してみましょう。
今回はここまでです。
前回は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を押したときにカメラが切り替われば成功です。
ＵＩボタンで画像が切り替わった
ＵＩボタンを装飾する
さて、私がお見せしましたゲーム実行画面ですが、ButtonLeftとButtonRightの画像が違います。こちらは画像を用意してSpriteに割り当てました。
アイコン商用可能無料ダウンロードサイトicooon
このサイトで「矢印」と検索しダウンロードしました。無料で使いやすいので是非使ってみてください。
画像の設定の仕方は、画像をインポートし（すでにやりましたね）、ButtonLeftをヒエラルキーから選択、右側のインスペクタにImage （script）とある欄に、source Imageという欄があります。そこに画像をドラッグアンドドロップしてください。（再掲ですが、画像が選択できない場合は画像のImage Typeが2D and UIになっているか、その画像を選択して確認してください）
以上で背景画像とカメラの設定が完了しました。
次回に続く。
前回（脱出ゲームを作ってみよう！５）では、カメラの位置を設定しました。
今回は、カメラをスクリプトによってスイッチする方法を紹介します。
まず、前回に引き続き今回のゴール画面です。haikei1やCameraを設置しましたね。
CameraControllerを設置する
大したものではないのですが、ゲームオブジェクトのCameraControllerを設置します。
ヒエラルキーからCreateまたは右クリックCreateでCreate Emptyをクリックして、空のゲームオブジェクトを作ってください。
そのゲームオブジェクトの名前をダブルクリックで変更します。ここでは「CameraController」とします（この名前はそれほど重要ではありません）。
Assetで右クリック、CreateでC#Scriptを選択し、スクリプトを作ります。名前を「CameraController」とします。（スクリプト名とクラス名が一致する必要があるため、この名前は間違いなく入力してください。）
できたら、下記のコードをコピー＆ペーストしてください。
それができたら、ヒエラルキーのCameraControllerに、スクリプトのCameraController.csをドラッグアンドドロップ（アタッチという）してください。
ゲームオブジェクトCameraControllerを選択してください。右側のインスペクターに、Script CameraControllerという欄があります。この中に、Camera1、Camera2とあり、それぞれNoneと書かれていると思います。
そこに、ヒエラルキーのMain CameraをCamera1にドラッグアンドドロップして取り付けてください。Camera2の欄には、ヒエラルキーの（haikei2の子オブジェクトの）Cameraをドラッグアンドドロップしてください。
Main CameraをCamera1に、CameraをCamera2に取り付ける。
次回に続く
前回はユニティを操作するための下準備をしました。今回は背景やカメラを取り付けていきたいと思います。
今回のゴールとなる画像
今回作業のゴールとなる画像
今回の作業のゴールはこのようになります。エディタの中央に背景の画像が配置されています。また、左側のスペース（以降『ヒエラルキー』）には、Main（未セーブだと*アスタリスクが付きますが無視してください）というメインシーンに、haikei1、Main Camera、haikei2、Camera、CameraController、EventSystem、Canvas、Button left、Button Rightというオブジェクトがありますね。
エディタを（前回から）初めて開いたばかりだと、メインシーン（とMain Camera）のほかにまだ何もないはずです。これからすべてのオブジェクトを作っていくので、すべて解説していくので辛抱強くついてきてください。
背景とカメラを設定する
まずは、２分割した画像の左右を、下図のようにエディタのScene画面にドラッグアンドドロップしてください。
（上部のタブがGameだとうまくいきません。Sceneタブになっているか確認。）
背景画像をドラッグアンドドロップする
そして、手動でいいので、二つの画像をぴったり合うように操作してください。
（操作の方法は、エディタの左上に手のひらのカタチのツールボタンがあるのですが、そのとなりの十字キーのようなボタンをクリックし、ヒエラルキーからhaikei1などをクリックするとできます。また、直接エディタ上のオブジェクトをクリックしてもできます。）
カメラを取り付ける
私の背景画像は、「haikei1」「haikei2」という名前を付けていたので、ヒエラルキーにそのように名前が出ています。これからはこの名前で背景を読んでいきます。
作業ができたら、カメラを背景に取り付けていきます。Main Cameraをhaikei1にドラッグアンドドロップすると、Main Cameraはhaikei1の子オブジェクトになります。今度は、haikei2の上で右クリックして、Cameraを選択してください。Cameraがhaikei2の子オブジェクトとして生成されます。
次に、カメラの詳細をインスペクタで編集していきます。Main Cameraを選択します。下図を見てください。
カメラのトランスフォームなど情報
Main Cameraを選択すると、右側（インスペクタという）にカメラの詳細情報を編集できる欄が現れます。Transformのpositionをx → 0、y → 0、z → -5に変更してください。ProjectionはPerspectiveのField of Viewが100に設定すればあとはデフォルトでＯＫです。
（が、違った場合は各々調整をお願いします。右下にカメラから見えた画像が映し出されるので、そのカメラの視点がちゃんとhaikei1をとらえているか確認してください）
（TransformのPositionのzの値を-5からいじると容易に調整ができます）
以上をhaikei2でも同じ数値で行ってみてください。カメラがうまく背景をとらえているか、右下のカメラプレビューで確認してください。
次回に続く。
アイテム画像のインポートと下準備
アイテム画像のインポートとUnityをいじっていくための下準備をしていきたいと思います。
まずは、Unityのエディタを開いて、右クリックからCreate→Folderでフォルダを作成し、「Images」という名前のフォルダを作成してください。次にImagesフォルダをクリック。
以前の再掲になりますが、アイテム画像は下記のようにエディタ上にドラッグアンドドロップしてインポートすることができます。集めた画像をインポートしてください。
そして、インポートした画像をクリックすると、右側の画面にInspectorという箇所があります。その中で、Texture Typeという欄があるので、クリックしてSprite（2D and UI）にしてください。
画像をクリックして赤丸の部分をSprite（2D and UI）にする。
各々の画像にこれを行ってください。「Apply？」という風に出たときはApplyをしてください。
下準備
Unityをいじっていくための下準備をこれからしていきたいと思います。
このゲームはAndroid用の画面の大きさで作っていきたいきます。
左上のFile→BuildSettingsから下記のようにAndroidを選択してください。Switch Platformを押してください。「No Android… module loaded.」と表示されて切り替えられないときは、Open Download Pageをクリックして、Androidのモジュールをインストールしてください。
BuildSettingsからAndroidの画面にする
作成するゲームの画面の大きさを決まます。ユニティエディタのGameタブからWxga Portrait （800×1280）を選択してください。
画面の大きさをWxga Portrait （800×1280）にする
この回は以上です。
次回に続く
ゲーム制作ランキング
良ければぽちっと押してください。
まず忘れないように、こんな脱出ゲームを作成しました。これができるまでの簡易チュートリアルを作っています。
クリックでAndroidアプリストアに飛びます↓
こんな画像が集まりました！
まず、前回（脱出ゲームを作ってみよう！２）では画像の集め方と、トリミングの仕方を紹介しました。
私はこんな画像を集めてトリミングしてみました＾＾
１．パソコンの画像。スイッチを押すと（なぜか）くるみが手に入る。
２．くるみの画像。ハンマーでたたき割ると（なぜか）玉が入っている。
３．玉の画像。くるみを割ると出てくる。プロジェクターにかざすと、鍵のありかがわかる。
４．鍵の画像。外に出られる鍵。（脱出成功！！）
５．ハンマーの画像。どこかで発見できる。
６．コネクタ。ＰＣに接続してＰＣが起動する。
この画像ですが、自宅にあったコネクタをスマホで撮影し、ワードで編集しました＾＾家にあるものを写真でとってアイテムに使ってしまうのもいいかもしれませんね。
そして、背景画像も用意する必要があります。今回はこのような背景画像にしました。
７．オフィスの背景画像。何らかの文脈でここに迷い込み、脱出を図ります。
背景画像を２分割する
脱出ゲームには１面だけでなく何面も移動してゲームを進めていきますね。
今回は簡易版ということで、背景画像を左右に２分割して２面のゲームにしたいと思います。
このサイトでトリミングしました。
背景画像を無料で（会員登録なしで）行いたかったので、このサイトを利用しました。画像を選択して、オンラインでトリミングし、ダウンロードも簡単にできました＾＾
画像トリミングの様子
ということで、下記に背景１と背景２ができ、ゲームの素材が集まりました！！
今回は、前回の画像トリミングを実践しました。そのなかで、画像サイトからダウンロードした画像だけでなく、自撮りした画像もアイテムとして使えるじゃん！ということが分かり、またずいぶん簡単さが増したなぁという感じです＾＾
では次回はUnityをいじっていきましょう！！
次回へ続く
ゲーム制作ランキング
良ければぽちっと押してください。
前回、Unityのインストールをしていただいたと思います。
ユニティを開いて、エディタを開くと、アイテム画像をドラッグしてインポートすることができます。
まずは、Unityのアプリを立ち上げて、「New」ボタンを押してください。「Project name」はなんでもいいですがここではDassyutu1とします。「Template」は2Dにしてください。あとはデフォルトでOKです。「Create Project」を押します。
何秒後かに、Unityエディタが開くと思います。
Unityエディタ
まず、Fileから、SaveSceneをして下さい。シーンの名前が「SampleScene」などと変更ができない場合は後でできます。変更の仕方は、シーンの名前の上で（優しく）クリックしてあげると、そのシーン（やファイル）名を変更できます。ここでは、「Main」という名前をつけて、これからメインシーンと呼んでいきます。
（ちなみに、私はマックでエディタをいじっていますが、なかなか名前が変えられず苦労しました。そういう時は、クリック後にメモか何かで「Main」と打ち、コピー＆ペースとして下さい。）
画像はUnityのエディタにドラッグすれば良い
それで、最初に話が戻りますが、Unityのエディタに脱出ゲームのアイテムとなる画像をインポートしていくことになります。上の画像のように、デスクトップ（やフォルダ）に画像があるとして（トマトの画像を用意しました）、それをドラッグすればユニティに画像をインポートできます。
（ちなみにこの後説明しますが、このインポートした画像を実際に使っていくには、この画像を「2D and UI」という形式にしないと使えません）
そして、画像をインポートしていくのですが、これから脱出ゲームを作る際の画像を用意していきたいと思います。
脱出ゲーム制作の画像の用意の仕方
画像は実写のものがいいと思います。商用フリーの画像が無料で手に入るACをオススメしたいです。使いやすいですよ＾＾
無料の利用だと検索1日10回の縛りがあるので、ほかのサイトと併用するか、賢く検索する必要があります。
（2018年11月25日追記：ＡＣの検索は１日５回まででした。次の記事で、これ以外にアイテム画像を集める方法を紹介しています。）
写真AC
なぜ実写の素材を使うか
実写でないイラストをアイテム素材に選ぶと、背景や必要となるアイテムのイラストを全部同じ絵柄で揃えなくてはいけません。結局欲しいものは有料であったあり、そもそも欲しいイラストがないこともあります。手軽に無料で済ませたいならば、実写の商用フリーサイトのアカウントをいくつか用意して間に合わせるのが良いと思いました。
というわけで、写真ACにとりあえず無料会員登録して（これはしょうがありません）、背景やアイテムとなる画像を無料ダウンロードして下さい。
写真AC
試しに今回、トマトの画像を無料ダウンロードしました。
写真ACでダウンロードしたトマトの画像
そして、この画像をトマトの形にトリミング（またはクリッピング）していく必要があります。
トリミングまたはクリッピングには、アドビのIllustrator（イラストレーター→イラレ）やPhotoshop（フォトショップ→フォトショ）がいいそうです。ゲーム制作や漫画のキャラクター制作にはこれらや、セルシスのクリップスタジオが定番と言われています。
ですが、これらは月額や有料ダウンロードで費用がかかり、手軽に始められるわけではありません。オンラインでトリミングが手軽にできるサイトを探してみましたが、有料であったりなかなか見つかりませんでした。
→そんな中で優良だと思われた無料のオンライン画像編集サイト
その中で、上記のサイトは結構よかったです。クリックしていくだけで、不要な背景が消えていき、完成したら右クリックで画像を保存するだけ。無料でした。
この程度のクオリティなら大丈夫
ただし、いろいろ作業が大変になってしまい、一番いい方法を考えました。
Wordを使おう
Wordです笑 いやいやかなりよかったですよ！Macのワードを使用しましたが、それでもこんな感じのクリッピングができました。
Wordで背景を透過させたアイテム用画像
うん、大丈夫！これでゲームを作っていきましょう！！
Wordを使った透過のさせ方はわかりやすいサイトがあったので掲載します。
→Wordを使った画像の背景の透過のさせ方
以上そういうわけで、1.画像ACでアイテム画像や背景画像をインストールする 2.Wordで背景を透過させていく、ということをいくつか繰り返して、脱出ゲームのアイテムを揃えましょう！！
次回に続く
ゲーム制作ランキング
先の記事にもあるように、先日スマホアプリの脱出ゲームを作成しました。（＾＾）
今アプリを作るならば脱出ゲームが強いらしいですね。私はこの本を読んで、あとはネットの知識を補足して作りました。
ゲーム制作の構想期間は何ヶ月もとすごく長かったです。実際に作り出すまでに時間がかかりました。
本業の合間、隙間時間を使って制作し、実質制作期間は1ヶ月くらいだと思います。
また、もっと短縮もできますし、主要コードを作り上げたのは4日間くらいでした。上記の本が優しくてわかりやすかったので大変助かりました。
第2弾を出す前に、こういう風にしたらもっと簡単に短期間で脱出ゲームが作れるのではないか？？と思ったことを書いていきたいと思います。ぜひお時間があれば読んでみてくださいね。（＾＾）
その方法（簡単に脱出ゲームを作る方法）は、、、
写真画像を使って、脱出ゲームの背景やらアイテムを揃えてしまう方法です！！
ヴィシェアートはイラスト専でいきますよ♪ただし、こういう方法もあるなと思いました。
試しにこれから、何回かに分けて記事を書き、写真画像を使って脱出ミニゲーム制作のチュートリアルを紹介してみようと思います。
挫折しないように頑張ります笑
ところで,
脱出ゲームを作るためのツールはというと、現在は明らかにUnity（ユニティ）一択ですよね！！
C#言語またはJavaScript（Unity独特のJavaScript)で一つのコードでゲームを制作すれば、あとはAndroid端末やiOSへのアプリのビルドを自動でやってくれます！
それらだけでなく、中国のXiaomiやHTML5対応のWebGLやPCゲーム、プレイステーションやXBoxなどあらゆるプラットフォームに対応するアプリを制作できます。
スマホアプリ「ドラゴンクエストVIII」など、大手もUnityを採用しているところが多いですよ（＾＾）
Unityは有料版もありますが、無料制作で全然事足りると思うので、以降この記事でもUnityの記事を書いていきますので、是非読み進める前にユニティをインストールしてみてください。
Unityインストール方法
次回に続きます。
人気ブログランキングへ
