読者です 読者をやめる 読者になる 読者になる

tanaka's Programming Memo

プログラミングについてのメモ。

(1)概要・プロジェクトの作成・オブジェクトの作成(Unity5.0版)

次へ

Unity5.0.x向けのブロック崩しの作り方です。

開発方針

Unityの習作としてブロック崩しを作ってみよう。方針は以下の通り。

  • PCをメインターゲットにする
  • 2Dモードで作成
  • Unityに任せられる処理はUnityに任せる
  • キャラクターはUnityで作れる単純な形状を使う
  • Unity5.0.x以降、言語はC#

作業手順

  1. 画面のアスペクト比を決める
  2. プロジェクトの作成
  3. 背景の作成
  4. カメラの調整
  5. 画面レイアウトを決める
  6. シーンの作成
  7. 登場オブジェクトの検討
  8. プレイヤーバーの実装
  9. ボールの実装
    1. ボールをプレイヤーにくっつける
    2. ボールを打ち出せるようにする
  10. ブロックを壊せるようにする
    1. 全てのブロックを破戒したら、ステージを初期化する
  11. ボールが画面下に落ちたらボールを再生させる
  12. スコアの実装
  13. 3ミスでゲームオーバーにする

以上のような流れで作成していく。それでは作業を開始しよう!

画面のアスペクト比を決める

PCで遊ぶことを想定する。PCのモニタのアスペクト比(縦横比)は多様であり、旧来のブラウン管の比率である4:3のものや、16:9というハイビジョンの比率などがある。

画面サイズの違いでゲーム性やデザインが崩れるのを防ぐため、予め画面のサイズを決めておく。画面サイズが設計と異なるモニタでは、ゲーム画面を中央に表示して、余白を真っ黒にすることで対応する。今回は性能の低いPCでも問題なく動作するように、画面サイズを1024x768にする。

Unityの単位

Unityの大きさは、通常は1が1mを表す。物理挙動に影響があるので、実物大のゲームでは、この単位に合わせるとよい。

Unityでは、小さすぎたり、大きすぎたりするキャラクターでは、物理挙動が正しく処理されなくなる。目安としては、0.1未満や、1000以上は動作が怪しくなる。

ブロック崩しのように実世界の大きさが関係ない場合、基準となる画面のピクセル数に合わせて設計すると分かり易い。しかし、今回は横幅が1024なので大きすぎる。そこで、ピクセル数の1/10のサイズで設計する。

プロジェクトの作成

画面デザインなどはUnityを実際にいじりながら決めるとよい。早速プロジェクトを作成しよう。

  1. Unityを起動する
  2. ウィンドウが開いたら、[New Project]を押す
  3. Project nameに「Block」などを入力する
  4. [Location]欄の右の[…]をクリックする
  5. [Choose location for new project]ウィンドウで、プロジェクトを作りたい場所を選択する。日本語がパスに含まれるとエラーが発生する可能性があるので、[ドキュメント]>[Unity Projects]を選択して、[フォルダーの選択]ボタンを押す
  6. [2D]をクリックする
  7. [Asset packages...]を押す
  8. グリッドのテクスチャが使うために[Prototyping]と、Visual Studioを利用している場合は[Visual Studio 2013 Tools]にチェックを入れて、[Done]を押す
  9. 以上ができたら、[Create project]ボタンを押す
  10. Unityが再起動するまで、しばらく待つ
  11. Unityが起動したら、まずはシーンを保存する。メインメニューから[File]>[Save Scene]を選び、「Game」のファイル名で保存する
  12. [File]>[Save Project]で、プロジェクトを保存する

以上で、「Game」というシーンが[Project(プロジェクト)]ビューに作成されて、保存される。これ以降、[Ctrl]+[S]キーで小まめに保存しよう。

基本的なレイアウトの設定

画面のデザインをするために、画面サイズや、目安となるグリッドを設定しよう。

画面サイズを設定する

  1. 画面が1024x768になるように、[Game]ビューの下の画面比率をクリックして、[Standalone(1024x768)]を選択する

グリッドを配置する

  1. メインメニューから、[GameObject]>[3D Object]>[Quad]を選択
  2. [Hierarchy(ヒエラルキー)]ビューに[Quad]が追加されるので、名前を「Grid」に変更する
  3. 名前を変更した[Grid]をクリックすると、[Inspector(インスペクター)]ビューに[Grid]の設定が表示される
  4. [Grid]のPositionを画面中心の少し奥、Scaleを102.4x76.8になるように、以下の通り設定する
    • Position X=0,Y=0,Z=10
    • Rotation X=0,Y=0,Z=0
    • Scale X=102.4,Y=76.8,Z=1
  5. 暗いので、光をゲームの世界に加える。[GameObject]>[Light]>[Directional Light]を追加
  6. [Grid]に、グリッド線を貼り付けるために、以下の操作をする
    1. [Project]ビューの[Standard Assets]の左の三角形をクリックして開く
    2. 同様の操作で、[Prototyping]を開く
    3. [Materials]をクリックして中身を表示する
    4. [NavyGrid]をドラッグして、[Hierarchy]ビューの[Grid]にドロップする
  7. 張り付いたグリッドの場所を調整する。
    1. [Hierarchy]ビューの[Grid]をクリックして選択する
    2. [Inspector]ビューに表示されている[Mesh Renderer]コンポーネントを見つけて、[NavyGrid]欄の三角形をクリックして開く
    3. [Emission]欄の右にあるカラーボックスをクリックして、白を選択する
    4. [Emission]欄の右端にある数値を20にする。これで、グリッドの線が濃く表示される
    5. [Detail Mask]欄の下の[Tiling]の[X]を8、[Y]を6にする。この段階では中途半端な線が表示されるが、カメラの設定後に直るので、現状ではこのままでよい

f:id:am1tanaka:20150508223650p:plain

カメラを調整する

ゲーム画面のサイズがどのぐらいかは、カメラの設定によって決まる。現状では画面の範囲が狭すぎるので、当初の予定のサイズになるように調整する。

  1. [Hierarchy]ビューで[Main Camera]を選択して、[Inspector]ビューに設定を表示させる
  2. [Position]のXとYを0にして、Zを-10にする。
  3. [Camera]欄の中にある[Size]を38.4にする。[Size]は、画面の高さの半分の大きさを表す。今回は76.8にすることにしたので、その半分の38.4を設定した

以上で、グリッドが綺麗に表示されるようになる。

画面を作成する

GameObjectのプリミティブを配置しながら、【プレイヤーバー】【ボール】【ブロック】【ゲームフィールドの壁】の大きさや配置を決めていこう。

フィールド周りの壁

最初にゲームフィールドの広さを決めるために周囲の枠を作ろう。まずは左の枠を作ってみよう。

  1. メインメニューから[GameObject]>[3D Object]>[Cube]を選択
  2. [Hierarchy]ビューに[Cube]というオブジェクトが追加されるので、名前を「FrameL」などに変更
  3. [Position]や[Scale]を調整して、画面左端の枠にする。例として、以下のように設定

f:id:am1tanaka:20150204211833p:plain

f:id:am1tanaka:20150112223418p:plain

今、作成した左枠をコピーして、右枠を作成しよう。

  1. [Hierarchy]ビューの[FrameL]を右クリックして、[Duplicate]を選択
  2. 「FrameL 1」というゲームオブジェクトが新しく作成されるので、名前を「FrameR」に変更する
  3. [FrameR]の[Position]の[X]を調整して、右側の枠にする

左枠を作ったのと同じ手順で[Cube]を追加し、「FrameT」という名前で上枠を作成する。

f:id:am1tanaka:20150508224757p:plain
こんな感じに調整する。

全てのFrameの[Position]の[Z]を「0」、[Scale]の[Z]を「3」にすること。

プレイヤーバーの作成

ゲームフィールドが作成できた。引き続き、[プレイヤーバー][ボール][ブロック]のサイズや配置を決めよう。

[プレイヤーバー]を[フィールドの周りの枠]と同様に[Cube]で作成しよう。決め事は以下の通り。

  • 名前は「Player」にする
  • [Position]の[Z]は0にする
  • [Scale]の[Z]は5にする

大きさが決まったら、着色してみよう。

  1. 色を付けるには、Material(マテリアル)を利用する
  2. [Project]ビューの[Create]ボタンを押し、[Material]を選ぶ
  3. 作成したMaterialの名前を「matPlayer」にする
  4. [matPlayer]マテリアルをクリックして選び、[Inspector]ビューから[Albedo]欄を探して、右のカラーボックスをクリック。適当な色を選択して、ウィンドウを閉じる
  5. Materialができたら、[Project]ビューの[matPlayer]をドラッグして、[Hierarchy]ビューの[Player]にドロップする

着色されたのが確認できただろう。

以上で、プレイヤーバーのモデルの作成は完了。引き続き、他のオブジェクトも作成していく。
f:id:am1tanaka:20150508225338p:plain

ブロックの作成

[プレイヤーバー]と同様の手順で、適当なサイズで、適当な色のブロックを1つ作成する。決め事は以下の通り。

  • 名前は「Block」にする
  • [Positionの[Z]は0にする
  • [Scale]の[Z]は5にする
  • ブロック用のマテリアル(Material)を、「matBlock」という名前で作成して、適当に着色する

f:id:am1tanaka:20150508230520p:plain

「Block」オブジェクトが1つ出来たら、量産するためにPrefab(プレハブ)というものを作成する。

  1. [Hierarchy]ビューの[Block]をドラッグして、[Project]ビューの何もない部分にドロップすると、プレハブができる
  2. [Hierarchy]ビューの[Block]の文字が青くなれば、プレハブ化成功

f:id:am1tanaka:20150508230753p:plain


以上で、ブロックのプレハブ(Prefab)ができた。1種類だとつまらないので、もう1種類色違いのブロックを作ってみる。

  1. [Project]ビューの[Block]プレハブをドラッグして、[Hierarchy]ビューにドロップする
  2. [Hierarchy]ビューに[Block 1]という名前でブロックが生成される。このようにプレハブ化しておくと同じゲームオブジェクトを簡単に量産することができる
  3. [Block 1]の名前を「Block2」に変更する
  4. [Block2]を横に動かして、[Block1]と並べる
  5. 新しい[Material]を作成して、「matBlock2」という名前にして、任意の色を設定する
  6. 作成した[matBlock2]を、[Hierarchy]ビューの[Block2]にドロップする
  7. [Block2]のひな形ができたので、[Project]ビューにドラッグ&ドロップして、[Block2]プレハブを作成する

f:id:am1tanaka:20150508231506p:plain
f:id:am1tanaka:20150508231549p:plain

作成した2種類のプレハブを[Hierarchy]ビューにドラッグ&ドロップして量産して、横に並べて1行分のブロックを作ってみよう。
f:id:am1tanaka:20150508232506p:plain

この1行をさらに量産したいが、このままでは[Hierarchy]ビューにブロックが大量に並んで編集し辛くなる。それを解決するために、ブロックを空のゲームオブジェクトの子供にして、折りたためるようにしよう。

  1. メニューから[GameObject]>[Create Empty]を選択して、空のGameObjectを作成する
  2. 作成したGameObjectの名前を「Blocks」に変更する
  3. [Blocks]を選択したら、[Inspector]ビューを見て、[Transform]項目の右にある歯車のマークをクリックして、[Reset]を選択する。これで座標がリセットされる
  4. [Hierarchy]ビューの[Block]オブジェクトを全て選択して、ドラッグして、[Blocks]にドロップする。これで、並べた[Block]が、[Blocks]の子オブジェクトになる

f:id:am1tanaka:20150508233106p:plain

出来上がった1行分の[Blocks]オブジェクトをDuplicateして、面を作成しよう。

  1. [Hierarchy]ビューの[Blocks]オブジェクトを右クリックして、[Duplicate]を選択
  2. [Blocks]が増えるので、[Position]の[Y]を調整して、縦に並べる

f:id:am1tanaka:20150508233610p:plain

[Hierarchy]ビューの並び順は、ドラッグ&ドロップして変更できる。

ボールの作成

ボールを作成する。ボールは球(Sphere)で作成する。

  1. メニューから[GameObject]>[3D Object]>[Sphere]を選択
  2. 作成した[Sphere]の名前を[Ball]に変更する
  3. [Position]の[Z]を0、[x]と[y]は適当な場所でよい
  4. [Scale]を設定して、大きさを調整する。x,y,z、同じ値にするとよい
  5. 「matBall」という名前でボール用のマテリアルを作成して、適当に色を設定する

f:id:am1tanaka:20150508234103p:plain

以上で、ゲーム画面のレイアウトが決まるとともに、プログラムで動かすためのゲームオブジェクトの準備も完了した。大きさや配置は良いように決めよう。

Unityを閉じる時は、メニューから[File]>[Save Scene]、[File]>[Save Project]することを忘れずに!


次へ