開発方針
Unityの習作としてブロック崩しを作ってみよう。方針は以下の通り。
- PCをメインターゲットにする。
- 2Dで作る。
- Unityに任せられる処理はUnityに任せる。
- キャラクターはUnityで作れる単純な形状を使う。
- 言語はC#。
作業手順
- 画面のアスペクト比を決める。
- プロジェクトの作成。
- BGの作成。
- カメラの調整。
- 画面レイアウトを決める。
- シーンの作成。
- 登場オブジェクトの検討。
- プレイヤーバーの実装。
- ボールの実装。
- ボールをプレイヤーにくっつける。
- ボールを打ち出せるようにする。
- ブロックを壊せるようにする。
- 全てのブロックを破戒したら、ステージを初期化する。
- ボールが画面下に落ちたらボールを再生させる。
- スコアの実装。
- 3ミスでゲームオーバーにする。
以上のような流れで作成していく。それでは作業を開始しよう!
画面のアスペクト比を決める
PCで遊ぶことを想定する。最近のPCは、旧来のブラウン管の比率である4:3のものもあれば、16:9というハイビジョンタイプなど、画面の縦横比が様々である。
今回のプロジェクトでは、画面サイズの違いでゲーム性やデザインが崩れないようにするため、基本となる画面の比率でゲームを作成する。画面サイズが設計と異なる場合は、ゲーム画面を画面中央に表示して、余白を真っ黒にすることで対応する。
基本となる画面サイズは800x600とする。ブロック崩しのように、実世界の単位で設計するよりも、ピクセルで設計した方がイメージしやすい場合は、慣れた解像度に当てはめた方がよさそうということでこうした。
プロジェクトの作成
画面デザインなどはUnityを実際にいじりながら決めればよさそうである。早速プロジェクトを作成しよう。
- Unityを起動する
- 【Unity - Project Wizard】が開いたら、【Create New Project】タブを選ぶ。
- 【Browse...】ボタンを押す。
- フォルダの参照で、プロジェクトを作りたい場所を選択。
- 【新しいフォルダの作成】ボタンを押して、プロジェクト名のフォルダ(例えば「Block」など)を作成して【OK】ボタンを押して、ウィンドウを閉じる。
- グリッドのテクスチャが使いたいので、【Import the following packages:】の欄から、【Standard Assets(Mobile).unityPackage】にチェックを入れてから【Create】ボタンを押す。
- Unityが起動したら、シーンを保存しておく。メインメニューから【File】→【Save Project】を選び、「Game」のファイル名で保存する。
以上で、「Game」というシーンが【プロジェクト(Project)】ビューに作成されて、保存される。これ以降、[Ctrl]+[S]キーで小まめに保存しよう。
BGの作成
GameObjectの【Plane】を使って、画面のレイアウトをする際の目安となるグリッド面を作成する。
- メインメニューから、【GameObject】→【Create Other】→【Plane】を選択。
- 【階層(Hierarchy)】ビューに【Plane】が追加されるので、名前を「Grid」に変更する。
- 名前を変更した「Grid」をクリックして、【Inspector】ビューに「Grid」の設定が表示させる。
- 「Grid」のPositionを画面中心の少し奥、Rotationをカメラ向き、Scaleを800x600を表すようにするために、以下のような設定にする。
- Position X=0,Y=0,Z=100
- Rotation X=270,Y=0,Z=0
- Scale X=80,Y=1,Z=60
- 「Grid」が画面に収まらなくなるので、【階層(Hierarchy)】ビューで「Main Camera」を選択して、PositionのZを操作して、「Grid」が画面内に収まるように調整する。PositionのZを-600ぐらいにすればよい。この設定は仮設定なので、適当でよい。
- 「Grid」に、グリッド線を貼り付ける。
- 【プロジェクト(Project)】ビューから、【Standard Assets[Mobile]】の左の三角形をクリックして開く。
- 同様に【Textures】を開く。
- 【プロジェクト(Project)】ビューの「grid」をドラッグして、【階層(Hierarchy)】ビューの「Grid」にドロップする。
- 張り付いたグリッドの場所を調整する。
- 【階層(Hierarchy)】ビューの「Grid」をクリックして選択する。
- 【Inspector】ビューに表示されている【Mesh Renderer】コンポーネントを見つけて、Tilingのxを8。yを6。Offsetのx,yを0.5にする。
カメラの調整
「Main Camera」や、Gameビューを4:3の画面に合わせて調整する。
- 【Game】ビューの下の選択肢を開き「4:3」を選択する。これで【Game】ビューの表示が4:3に固定される。
- 【階層(Hierarchy)】ビューで「Main Camera」を選択して、【Inspector】に設定を表示させる。
- 【Projection】という設定を探し、「Perspective」から「Orthographic」に変更する。この変更をすると遠近感がなくなり、カメラの距離に応じて見え方が大きくなったり小さくなったりしなくなる。
- 【Projection】の下にある【Size】を600に変更する。【Size】は「Orthographic」用の設定で、画面の高さを何単位にするかを設定する。「Grid」の高さが600なので、同じ600にすることで「Grid」が画面一杯に表示されるようになる。なお、「Grid」のScaleが60なのに、高さが600になるのは、【Plane】が10x10の四角が集まって作られたものなので、Scaleの10倍のサイズになるため。
以上の設定を省略して、カメラの位置で調整すると、遠近感のあるブロック崩しに出来るので、好みに合わせて調整のこと。
画面レイアウトを決める。
GameObjectのプリミティブを作って配置しながら、【プレイヤーバー】【ボール】【ブロック】【ゲームフィールドの壁】の大きさや配置を決めていこう。
フィールド周りの壁
最初にゲームフィールドの広さを決めたいので、周囲の枠を作っていく。まずは左の枠を作ってみよう。
- メインメニューから【GameObject】→【Create Other】→【Cube】を選択。
- 【階層(Hierarchy)】ビューに「Cube」というのが追加されるので、名前を「FrameL」などに変更。
- そのままだと、画面が暗くてオブジェクトが良く見えないので、並行光を追加する。メニューから【GameObject】→【Create Other】→【Directional Light】を選択。
- 【Position】や【Scale】を調整して、画面左端の枠にする。例として、以下のように設定。
今、作成した左枠をコピーして、右枠を作成しよう。
- 【階層(Hierarchy)】ビューの「FrameL」を右クリックして、【Duplicate】を選択。
- 「FrameL」が2つになるので、どちらでもいいので、片方の名前を「FrameR」に変更する。
- 「FrameR」の【Position】の【x】を調整して、右側の枠にする。
左枠を作ったのと同じ手順で【Cube】を追加し、「FrameT」という名前で上枠を作成する。
こんな感じに調整。注意点としては、【Position】の【Z】を「0」にすることと、【Scale】の【Z】に30程度を設定すること。
プレイヤーバーの作成
ゲームフィールドのサイズが分かったので、残りの【プレイヤーバー】【ボール】【ブロック】を作成して、サイズや配置を決める。
【プレイヤーバー】を【フィールドの周りの枠】と同様に【Cube】で作成しよう。決め事は以下の通り。
- 【Position】の【Z】は0にする。
- 【Scale】の【Z】は30にする。
- 名前は「Player」にする。
大きさが決まったら、着色してみよう。
- まずはマテリアル(Material)を作成する。【プロジェクト(Project)】ビューで「Game」シーンをクリックして選ぶ。
- 【プロジェクト(Project)】ビューの【Create】ボタンを押し、【Folder】を作成する。
- 作成される「New Folder」の名前を「Materials」にする。
- 作成した「Materials」フォルダを右クリックして、【Create】→【Material】を選ぶ。
- 作成したマテリアル(Material)の名前を「Player」にする。
- 「Player」マテリアルの【Inspector】を見て、【Main Color】を選び、適当な色を設定する。
- 【プロジェクト(Project)】ビューの「Player」マテリアルをドラッグして、【階層(Hierarchy)】ビューの「Player」にドロップする。
ブロックの作成
まずは【プレイヤーバー】と同様の手順で、適当なサイズで、適当な色のブロックを1つ作成する。決め事は以下の通り。
- 【Position】の【Z】は0にする。
- 【Scale】の【Z】は30にする。
- 名前は「Block」にする。
- ブロック用のマテリアル(Material)を、「Block」という名前で、「Player」用のマテリアルと同じフォルダの中に作成。
「Block」オブジェクトが出来たら、量産するためにこれをプレハブ(Prefab)にする。
- 【プロジェクト(Project)】ビューで、「Game」シーンを一度クリックして選択する。
- 【プロジェクト(Project)】ビューの【Create】ボタンを押し、【Folder】を選ぶ。
- 作成したフォルダ名を「Prefabs」にする。
- 作成したフォルダを右クリックして、【Create】→【Prefab】を選ぶ。
- 作成したプレハブ(Prefab)の名前を「Block」にする。
- 【階層()Hierarchy】ビューの「Block」をドラッグして、【プロジェクト(Project)】ビューに作成して「Block」プレハブにドロップする。
- 【階層()Hierarchy】ビューの「Block」の文字と、【プロジェクト(Project)】ビューの「Block」プレハブのアイコンが青くなれば、ブロックのプレハブ化成功。
以上で、ブロックのプレハブ(Prefab)が出来上がる。同様の手順で、別の色のマテリアル「Block2」を作成し、別の色のブロックのプレハブ(Prefab)を「Block2」という名前で作成しよう。
作成した2種類のブロックを交互に並べて、面を作ってみよう。
- メニューの【GameObject】→【Create Empty】を選択して、【階層(Hierarchy)】ビューに空の「GameObject」を作成する。
- 作成した「GameObject」の名前を「Blocks」に変更する。
- 【Position】のx,y,zを0にする。
- 「Block」オブジェクトを、作成した「Blocks」ゲームオブジェクトにドロップして、子オブジェクトにする。
- 「Block」と「Block2」プレハブを「Blocks」オブジェクトの子としてドロップして、1行分のブロックを並べる。
出来上がった1行分の「Blocks」オブジェクトを複製して面を作成する。
- 【階層(Hierarchy)】ビューの「Blocks」オブジェクトを右クリックして、「Duplicate」を選択。
- 「Blocks」が増えるので、【Position】の【Y】を修正して、縦に並べる。