Unityに関連する記事です

以下の内容で順番に実装を進めていきます。

 4.Canvas内にパズルゲーム用のUI部品を作成する 淵僖坤覯萍魅ぅ瓠璽検8えない壁。親子関係や配置する位置も含めて設置する)
 5.プレイヤーのゲームデータを管理するGameDataスクリプトをシングルトンとして作成する(生成する干支の数と種類の登録)
 6.Canvas内に干支のゲームオブジェクトを用意してプレファブ化する



 新しい学習内容は、以下の通りです。

・Canvas内のみでゲーム画面を作成(ワールド空間は使用しない)
・シングルトンデザインパターン
・SpriteEditor機能



4.Canvas内にパズルゲーム用のUI部品を作成する 淵僖坤覯萍魅ぅ瓠璽検8えない壁。親子関係や配置する位置も含めて設置する)


 パズルゲームのゲーム画面を製作していきます。基本的にはすべてCanvasの中に子としてゲームオブジェクトを作成していきます。
そのため通常のゲーム制作で利用するUnityのワールド空間は、今回のゲームデザインでは使用しません。

ゲーム背景画像の取得


 まずはゲームの背景となるイメージを設置します。イメージには自由な素材をお使いください。
例の場合は干支にちなんで、しめ縄をモチーフにしたフリー素材を使用しています。

 画像素材のインポート(Unityで使用できるように追加)は、画像ファイルをUnityのProject内にドラッグアンドドロップすることでインポートできます。
ドラッグアンドドロップする前にSpritesフォルダを作成しておいて、そちらにドラッグアンドドロップしてください。
フォルダはProjcet内で右クリックして Create => Folder で作成できます。

インポート手順動画
https://gyazo.com/cb982a62e5e8a830c794d66f30675b38

ゲーム背景用のImageゲームオブジェクトを作成


 Canvas上で左クリックをしてメニューを表示し、UI => Image を1つ作成します。
Sceneビュー内の中央に白いゲームオブジェクトが作成されます。名前を GameGround に変更します。

 作成したGameGroundゲームオブジェクトをヒエラルキー上で選択し、インスペクターを表示します。
Imageコンポーネントがアタッチされていますので、こちらのSource Image 部分に先ほど取得した画像を指定します。

 Sceneビューの白いゲームオブジェクトに登録した画像が表示されますので、こちらの大きさを適宜調整します。
上方向と左右はCanvas内に収まるようにしてください。ただし、下方向にはあとでボタンを配置しますので350前後の空きを用意しておいてください。

 画像を設定する場合のコツは、Sceneビューと一緒にGameビューも表示しておいて、Gameビューにどのような形で映るかを
確認しながら配置や大きさを調整すると合わせやすいです。エディターのレイアウトを設定してみましょう。

上がSceneビュー、下がGameビューでレイアウトを設定しています。


見えない壁用のゲームオブジェクトを複数作成


 Canvasの左右の端と下方向に、見えない壁用のゲームオブジェクトを設置します。これは、あとで干支をゲーム画面内に生成した際に
物理演算で自然落下を行うようにしているため、壁がないとゲーム画面外に干支がはみ出していなくなってしまうのを防ぐためです。

 ヒエラルキーのCanvas上で右クリックしてメニューを表示し、Create Empty で空のゲームオブジェクトを1つ作成します。名前を InvisibleWalls に変更します。
このInvisibleWallsゲームオブジェクトは、これから作成する見えない壁用ゲームオブジェクト群のフォルダ代わりとして利用します。


 InvisibleWallsゲームオブジェクトの上で右クリックしてメニューを表示し、UI => Image でImageゲームオブジェクトを1つ作成します。
名前は Wall にしておきます(あとで複製して変更します。)

 Wall ゲームオブジェクトを選択して、インスペクターの一番下にある Add Component ボタンを押し、BoxCollider2D コンポーネントを追加してください。

 このWallゲームオブジェクトをCanvasの左端になるように設置します。縦方向は、上方向にだけ長めに伸ばしてください。(干支が生成時にはみ出てしまうためです。)


参考画像



 大きさを調整しましたら、BoxCollider2D コンポーネントの大きさも同じように調整を行います。Wall ゲームオブジェクトと同じ形になるように調整してください。


インスペクターの画像



 設定が終了したら、このWall ゲームオブジェクトを複製します。

 ヒエラルキーのWallゲームオブジェクトの上で右クリックを行いメニューを表示して、Duplicate を選択します。
ヒエラルキーにWall(1)というゲームオブジェクトが追加されます。これはWallゲームオブジェクトと同じ位置にありますので、Wall(1)をCannvasの右端に移動させます。
大きさとコライダーはすでに調整済ですので、そのままで問題ありません。


画像


インスペクターの画像



 最後にCanvasのボトム位置(下)にWallを設置します。
先ほどと同じようにWallを複製して、画面のボトム位置へ移動させます。このとき、ゲーム背景用に用意したイメージが水平なデザインであるならば
その水平位置に合うようにこのWallを左右に伸ばして設置します。コライダーの大きさも確認しましょう。

 例題のように丸みを帯びているデザインである場合には、この水平な壁では干支がイメージをはみ出てしまいますので
この場合にはWallゲームオブジェクトのBoxCollider2DをRemove Componentして、代わりにEdgeCollider2Dをアタッチします。
このEdgeCollider2Dを使って丸みのあるデザインに合わせたコライダーを作成します。コライダーを調整する場合には背景イメージを半透明にしておいて作業すると
コライダーと背景イメージの位置とが合わせやすいです。


画像 
BoxCollider2D


インスペクターの画像



画像 
EdgeCollider2D



 以上で3方向の壁が完成しました。各Wallゲームオブジェクトの名前をそれぞれ「Left Wall」「Right Wall」「Bottom Wall」と変更しましょう。
その後、Imageコンポーネントのスイッチをオフにして、壁を見えないようにします。あとで確認したりすることもありますので
ImageコンポーネントはRemoveせずに、スイッチを切っておくだけにしておいてください。

ヒエラルキーの画像



5.プレイヤーのゲームデータを管理するGameDataスクリプトをシングルトンとして作成する(生成する干支の数と出現する干支の種類数の登録)

GameDataスクリプトを作成する


 これからスクリプトの製作を行いますが、その前にProject内にフォルダを用意して、その中で管理を行うようにします。
新しくフォルダを1つ作成して、名前をScriptsに変更しましょう。このフォルダの中で右クリックをして、Create => C# Script を選択します。
新しいスクリプトファイルが生成されますので、名前を GameData に変更してください。

 このスクリプトはゲームにおけるユーザーのデータや、ゲーム内で使用するデータの設定を行う役割を持ちます。

GameData.cs

 <= クリックすると開きます



GameDataゲームオブジェクトを作成する


 作成が終了しましたら、このスクリプトをアタッチするゲームオブジェクトを1つ作成します。
ヒエラルキーで右クリックをして(Canvas上でない場所にしてください)、Create Empty を選択し、名前をGameDataに変更します。
もしもCanvas内に作成してしまった場合には再度消して作り直してください。

画像


 このGameDataゲームオブジェクトに作成したGameDataスクリプトをドラッグアンドドロップしてアタッチします。
GameDataゲームオブジェクトをヒエラルキーで選択してインスペクターを確認してください。GameDataスクリプトがアタッチされているはずです。

 GameDataスクリプトには2つのpublic修飾子で宣言した変数がありますので、この2つのアサイン情報がインスペクター上に表示されています。
Header属性を変数に適用していますので、変数名の上に日本語でHeaderに登録した文字列も一緒に表示されています。Header属性をつけると見やすくなりますので上手く活用してください。

 EtoTypeCount 変数は、干支を生成する際に、何種類の干支を生成するかを制限するものです。12種類すべてが生成されてしまうと
中々干支を消すことが出来ませんので、この値は5を基準に設定をしてください。4以下だと楽な難易度になり、6以上は難しくなります。

 CreateEtoCount 変数は、ゲームが開始した際に生成する干支の数です。50を基準に設定してください。

画像



<シングルトンデザインパターン>


 シングルトンとは、数多くあるデザインパターンの1つです。そのクラスのインスタンスが必ず1つであることを保証するデザインパターンのことを言います。

 GameDataクラスでは、このシングルトンを採用しています。つまり、ゲーム中を通じて、このGameDataクラスが1つしか存在できないようになります。
実装例は複数ありますが、一番読みやすい方式で記述しています。

 このシングルトンによってインスタンスが1つか生成されないことが保証されますので、このGameDataクラスへの参照は、いずれのクラスからであっても変数を介さずに参照を行えるようになります。

 例えば、Enemyというクラスがあり、そのEmenyクラスを持つゲームオブジェクトが5つあった場合、「どの」Enemyクラスであるかを確定できないと、対象となるEnemyクラスへは参照できません。
そのため、Enemy型の変数を用意して、その変数へ参照したいEnemyクラスを代入することによって、はじめてEnemyクラスの情報を扱うことができるようになります。
ですがシングルトンであるGameDataの場合には、このインスタンスは常に1つしかないことが保証されていますので、「どの」という指定の部分が不要になります。つまり変数への代入が不要になります。
GameDataという指定はすなわち、自動的にただ1つのGameDataへの参照が行われます。


6.Canvas内に干支のゲームオブジェクトを用意してプレファブ化する

干支のイメージを用意する


 干支のフリー素材をネットで見つけてきてダウンロードしましょう。例では丸い干支のイメージを使っていますので、なるべく丸いデザインのものを使用してください。
画像ファイルの拡張子には PNG のファイルを選択してください。画像の背景が透過処理されます。

 ダウンロードしましたら、背景と同じようにUnityにインポートします。インポート場所もSpritesフォルダにします。

SpriteEditorを使って1つ干支の画像を12分割する


 ※ 干支の画像が12個のファイルに分かれているのであればこの手順は飛ばしてください。
 
 1つの画像に12個分の干支がまとまっている場合には、この手順を使って干支の画像を1つ1つ分割しないと利用できません。




 SpriteEditorというUnity機能を利用して、1枚の干支の画像を12分割しましょう。

 インポートした干支の画像をSpritesフォルダ内で選択します。
インスペクターに画像の情報が表示されますので、画像のような設定して、右下のApplyボタンを押します。

 通常のイメージとの相違点は、Sprite Mode を Multiple にしていることで、分割を可能している部分と
Mesh Type をTight にしていることで分割した画像を正常な状態で表示できるようにしている部分です。




 その後、インスペクターにある Sprite Editor ボタンを押してください。
ウインドウでSprite Editorが開きます。このウインドウの大きさは可変可能ですので、見やすい大きさに適宜変更して使用してください。


 ウインドウ内の左上にあるSliceボタンを押すことで、画像の分割ができます。適宜な大きさやサイズで分割してみてください。
升目がわかっているのであれば、Grid By CellCount を指定することで行の画像数と列の画像数を指定して分割できます(3×4、などの場合)

 Sliceをすると画像に切れ目が入りますので、各画像が適切な大きさになっているかを確認します。その後、修正する場合にはSliceを押せば何回でも修正できます。
問題なくSliceが終了しましたら、SpriteEditorウインドウの右上にある Apply ボタンを押してください。これで画像の分割が確定されます。
確定後でもSliceは可能です。変更した場合には最後に必ず Apply して分割情報を反映してください。

 分割に成功すると、1つのファイルであった干支の画像の右横に矢印アイコンが表示されます。




このファイルをクリックすると、12個のファイルに分割された干支が表示されます。




 ファイルの通し番号が画像のように順番になっていない場合には、SpriteEditor内で分割している画像を選択することで、ファイル名の変更ができます。
分割画像を選択後、右下にある、下記の画像のような小さいインスペクターの部分で変更できます。



干支用のImageゲームオブジェクトを1つ作成する


 Canvas内に干支となるゲームオブジェクトを用意します。
 
 Canvas上で右クリックをしてメニューを表示し、UI => Image を選択して、名前を Eto に変更します。
このときCanvas内に作成されているかを確認してください(Etoゲームオブジェクトのインスペクターを確認して、RectTransformコンポーネントがアタッチされていれば大丈夫です)
 
 以下は、Etoゲームオブジェクトのインスペクターを見ながら行います。

 RectTransformコンポーネントを確認し、位置情報と大きさを画像のように設定してください。WidthとHeightが干支の大きさになります。



 Imageコンポーネントを確認し、SourceImageの部分に干支のイメージを登録できます。どれでもよいので1つの干支のイメージを設定してください。
画面上の白い状態のEtoゲームオブジェクトに、適用したイメージが反映されます。


 次にゲーム内でこのEtoゲームオブジェクトの振る舞いを決めるために、コンポーネントを2つ新しくアタッチします。

 まずはRigidbody2Dコンポーネントをアタッチします。画像のように設定をしてください。


このコンポーネントによって物理演算を追加することで、干支が生成されたり、消されたりすると、重力の影響によって下(ボトム)方向へ自然落下します。
この機能を実装するためのこのコンポーネントを追加しています。


 続いて、干支をタップ、スワイプで感知できるようにするためと、他の干支とが干渉してぶつかるようにするために
CircleCollier2Dコンポーネントをアタッチします。画像のように設定をしてください。コライダーの大きさはイメージと合うようにEditを使って適宜調整してください。



 ここまでの設定が完了すれば完成です。




Etoゲームオブジェクトをプレファブ化する


 Project内にPrefabsフォルダを作成します。このフォルダでゲーム内で使用するプレファブを管理します。
 
 ヒエラルキーにあるEtoゲームオブジェクトをドラッグして、先ほど作ったPrefabsフォルダの上で移動してドロップします。
ヒエラルキーにあるEtoゲームオブジェクトのアイコンと文字の色が青くなったらプレファブ化が完成です。

https://gyazo.com/2296a08608ae07b8793bb7bfbe009c0c


 まずPrefabsフォルダを確認します。こちらにも青いアイコンと文字列でEtoゲームオブジェクトがあるはずです。
確認が取れましたら、名前を Eto から EtoPrefab へ変更します。また、ヒエラルキーにあるEtoゲームオブジェクトは不要になりましたので破棄します。


 次はこのプレファブになっている干支を使って、大量の干支を自動生成するようにしていきます。



 以上でこの手順は終了です。

 次は 手順3 です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

3Dトップビューアクション(白猫風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます