アプリ紹介

 

【iOSアプリ】
I-C (3D puzzle) - PETITDIGI I-C (3Dパズル)
★[iPhone][有料][パズル]101位
I-C (3D puzzle) Free - PETITDIGI I-C (3Dパズル)無料
【Androidアプリ】
I-C (3D puzzle) Free - PETITDIGI I-C (3Dパズル)無料


Unity 3D Selfish Training

 

Unity 3D for Windows チュートリアル『3DPlatformTutorial』を一通り学習した。
トレーニングを兼ね、チュートリアルの知識でとりあえず何か作ってみる。

何を作るのか?
書籍「OpenGLで作るiPhone SDKゲームプログラミング
第2章で「ハエたたき」という簡単なアプリを紹介している。
画面に飛び交うハエをタッチして消すゲーム。
チュートリアルの知識+αで作れそうな気がするのでチャレンジしてみる。

※サンプルプロジェクトの動作確認(2012/12/11)
Unity Free for Windows 3.5.6f4 動いた
Unity Free for Windows 4.0.0f7 動いた


作るゲーム

 

タイトルは「FlyFlapper」 ハエたたきゲーム。
画面上に標的となるハエを数匹飛ばし、タッチするとハエが消滅して得点となる。
制限時間になるとゲームオーバー。
ハエは移動しながらパーティクルを発生し、消滅時に消滅パーティクルを発生する。



グラフィック、サウンドはチュートリアルの素材を利用する。
ハエは自分で描く。
スクリプトはサンプルから使える部分を抜き出し、応用する。


準備


目次


プロジェクトの作成

 

Unity を起動して、新規プロジェクトを作成する。

  • メニューから File -> New Project を選択
    任意のフォルダを選択して、プロジェクト名を"FlyFlapper"に変更する。

  • [Create]ボタンをクリックしプロジェクト作成を完了する。

▲目次


ゲームシーンの作成

 

シーンを新規作成する。
メニュー、ゲーム、ゲームオーバーなどシーンで管理すると便利。

  • Project に Scenes フォルダを作成

  • メニューから File -> New Scene を選択
    作成されたScene名を"Game"に変更する。

▲目次


ゲーム背景画像の読み込み

 

ゲームの背景となる画像を読み込む。
読み込んだ画像は Texture(テクスチャ) として登録される。

  • Project に Textures フォルダを作成

  • Textures フォルダへ背景画像をドラッグ&ドロップで読み込む
    ファイル:up.tif
    データ元:\3DPlatformTutorialStart\Assets\Textures\skyBox\

  • Textures に up があることを確認

▲目次


ゲーム背景マテリアルの作成

 

登録したゲームの背景となるTexture(テクスチャ)をMaterial(マテリアル)に登録する。
テクスチャを使用するにはマテリアルに割当ておかなければならない。
その後オブジェクトにマテリアルを割当てる。

  • Project に Materials フォルダを作成

  • Materials フォルダを選択した状態で Create -> Material を選択
    Material名を"BgGame"に変更する。

  • BgGame マテリアルの Texture2D に "up" を割当てる
    パラメータを下図のように変更する。

▲目次


ゲーム背景を表示する

 

ゲーム背景の画像読み込み、マテリアルの作成を行った。
背景用に板を作成して、背景マテリアルを割当てる。
ゲーム中、常に表示される固定背景になる。

  • メニューから GameObject -> Create Other -> Plane を選択
    Plane名を "BgGame" に変更する。

  • BgGame 板にマテリアルを割当てる
    パラメータを下図のように変更する。

  • Scene Viewで確認
    Y視点(上から見た図)で確認。

▲目次


メインカメラの設定

 

プロジェクトを作成すると "MainCamera" が自動で作成されるので、設定を変更して使用する。
ゲーム画面はこのカメラで視たイメージになる。

  • Hierarchy の MainCamera を選択し、図のように設定を行う
    Scene View画面のY視点と同じになるように設定する。

▲目次


ハエの表示

 

背景と同様に作成する。
ハエの黒い部分は透明になるよう設定する。

▼画像を読み込む

▼マテリアルを作成し、テクスチャを登録する

  • Materials フォルダを選択した状態で Create -> Material を選択
    Material名を"Enemy"に変更する。

  • Enemy マテリアルの Texture2D に "fly"テクスチャを割当てる
    Inspector -> Shader を Particles/Additive に変更すると黒い部分が透明になる。
    Tint Color は RGBA全て200に設定。
    A(アルファ) を200にすることで全体がやや半透明になる。

板を作成してマテリアルを割当てる

  • メニューから GameObject -> Create Other -> Plane を選択
    Plane名を "Enemy" に変更し、Tag に "Enemy" を追加する。

  • Enemy 板にマテリアルを割当てる
    パラメータを下図のように変更する。

  • Scene Viewで確認
    Y視点(上から見た図)で確認。
    背景の星が透けて見える。※ライト設置前なので確認しずらい

▲目次


ライトの作成

 

全体を明るくするためにライトを設置する

  • メニューから GameObject -> Create Other -> Directional Light を選択
    Directional Light名を "Main Light" に変更する。

  • Main Light を図のように設定する

  • Scene View
    X視点(横から見た図)で確認。



    Y視点(上から見た図)で確認。

▲目次


ハエの移動

 

ハエの移動方法
画面内に見えない標的を配置して、ハエはその標的を目指して移動する。
標的は画面内を縦横無尽に移動するので、ハエはいろいろな方向に進むことになる。

  • 1.標的をめがけて移動する
    移動速度、回転速度を調節して、動きの違うハエを作る。

  • 2.標的は画面内を縦横無尽に移動する
    移動アニメーションを作成する。


見えない標的の作成
標的は編集中に見えるように、ゲーム中は見えない(オブジェクトを非表示)ようにする。

  • メニューから GameObject -> Create Empty を選択し空のオブジェクトを作成
    空のオブジェクト名を "Target" に変更し、Tag に "Target" を追加する。

  • メニューから GameObject -> Create Other -> Cube を選択し箱を作成
    Cube (箱)を Target (空のオブジェクト)にドラッグ&ドロップし、Target の子にする。
    Cube の Mesh Renderer のチェックをはずすと非表示になる。
    編集中は確認のため表示状態にする。

ハエの移動準備
Character Controller コンポーネントの追加。
Character Controller は物理エンジンから切り離し、基本的な動作のコントロールを提供する。
日本語マニュアル[P19]

  • Enemy を選択した状態で、メニューの Component -> Physics -> Character Controller を選択

ハエの移動スクリプトを作成する

  • Project に Scripts フォルダを作成

  • Scripts フォルダを選択した状態で Create -> JavaScript を選択
    JavaScript名を"EnemyFly"に変更する。
    ハエ移動スクリプトを自由に書く。

    標的を目指して移動するスクリプトサンプル:EnemyFly.js
    参考にしたチュートリアルのスクリプト:\3DPlatformTutorialStart\Assets\Scripts\Enemies\EnemyPoliceGuy.js

  • EnemyFly を Enemy に追加する

  • プレイで動作確認
    ハエが標的を目指して移動するのを確認できる。
    プレイ中に Scene View で Target をマウスで動かすことができる。
    また、移動速度、回転速度を調整して試してみる。

標的をアニメーションさせる
標的をアニメーション(移動)させて、ハエを躍動的に動かす。
参考になったチュートリアルのシーン:エンディングの宇宙船移動アニメーション

  • Project に Animations フォルダを作成

  • Animations フォルダを選択した状態で Create -> Animation を選択
    Animation名を"MoveTarget"に変更する。
    Wrap Mode を Loop にする。

  • Target に作成した MoveTarget を追加する

  • Target を選択した状態で、メニューのWindows -> Animation を選択
    Animationウィンドウが表示される。
    記録ボタンを押して、Scene View で標的を移動するとキーが作成される。
    0:00や1:00が表記された目盛は時間を表す。キーの作成は移動のみでよい。



    時間をずらしながら、いくつかキーを作成したら再生ボタンで動きを確認する。

    プレイで動作確認する。
    標的が動き、ハエがそれを追う。

ハエ同士の衝突
Enemy(ハエ)の Character Controller の Capsule Collider (カプセルコライダ)がある。
これを設定することで、ハエ同士の衝突判定が行われ重ならないようになる。

  • Enemy を選択
    Character Controller の Capsule Collider を図のように設定する。
    Setp Offset は必ず0以上にする。これが0だと、プレイでしばらくするとハエが動かなくなる。
    衝突の位置補正で地面にめりこみ、移動できなくなっている?



    プレイで動作確認する。
    衝突が起きるとお互いが押し合うようになり、少しつっかえているようにも見える。
    Radius を下げれば衝突を抑えるられるので、お好みで調整する。

▲目次


タッチしたハエの消滅

 

消滅方法
カメラからタッチした先の直線を求める。
その直線にハエが衝突していたら、対象のハエを削除してエフェクトを発生させる。
消滅するときは効果音を鳴らす。

  • 衝突のイメージ

ハエ消滅スクリプトの作成

  • Scripts フォルダを選択した状態で Create -> JavaScript を選択
    JavaScript名を"ShootEnemys"に変更する。
    タッチしたハエを削除するスクリプトを自由に書く。

    タッチしたハエを削除するスクリプトサンプル:ShootEnemys.js
    参考にしたチュートリアルのスクリプト:\iPhone-Match\iPhone-Match-2\cardSelection.js

  • スクリプトをオブジェクトに割当てる
    常駐している Main Camera に割当てることしする。
    Main Camera を選択し、作成したスクリプトをドラッグ&ドロップで割当てる。

ハエ消滅エフェクト(パーティクル)の追加
消滅エフェクト用のパーティクルを作成して、ハエ消滅時に生成するスクリプトを追加する。
サンプルのスクリプトは追加済み。

  • テクスチャの作成
    ファイル:fullCellGlowTexture.tif
    データ元:\3DPlatformTutorialStart\3DPlatformTutorialStart\Assets\Textures\

  • マテリアルの作成
    Materiarl名は "Glow"とする。

  • パーティクルの作成
    メニューから GameObject -> Create Other -> Particle System を選択。
    Particle System名を "Explosion" に変更する。
    設定はお好みで。Scene View で確認する。
    ※Min Energy と Max Energy は、スクリプト側でエフェクト削除するため下記の設定にする。


  • エフェクト(パーティクル)をプレハブ化する
    Project に Prefabs フォルダを作成。
    Prefabs を選択した状態で Create -> Prefab を選択。
    Prefab名を "Explosion" に変更する。
    作成したエフェクト(Explosion)を Hierarchy から Prefabs -> Explosion へドラッグ&ドロップする。

ハエ消滅効果音の追加
ハエ消滅時に効果音を再生するスクリプトを追加する。
サンプルのスクリプトは追加済み。

  • Project に Sounds フォルダを作成

  • Sounds フォルダへサウンドファイルをドラッグ&ドロップ
    ファイル:matchShimmer.wav
    データ元:\iPhone-Match\iPhone-Match-2\Assets\_Sounds\

  • Hierarchy に空の Sounds オブジェクトを作成しサウンドオブジェクトを追加
    Play On Awake のチェックをはずす。

エフェクトと効果音をリンク
スクリプトに用意したエフェクトと効果音の変数にリンクする。

  • Main Camera を選択
    Explosion Sound、Explosion Effectをそれぞれ図のように変更する。

▲目次


ハエの出現

 

出現方法
画面外に複数の出現ポイントを用意する。その複数ポイントからランダムにハエを生成する。
生成数に上限を設け、制限を越えたら生成を止める。
消滅で制限以下になったら、生成を再開する。

  • 出現ポイントのイメージ
    出現ポイントは4〜8ほど用意する。

出現ポイントの作成

  • 空のオブジェクトを上図のように4〜8ほど作成
    Position Y は全て[5] に設定する。

  • ポイントををプレハブ化する
    Project に Objects フォルダを作成。
    Objects フォルダに SpawnPoints フォルダを作成。
    SpawnPoints を選択した状態で Create -> Prefab を選択。 ポイントの数分作成する。
    Prefab名は"point番号"に変更する。
    作成したポイントを Hierarchy から各プレハブへドラッグ&ドロップする。
    全てプレハブ化したら Hierarchy のオブジェクトは削除する。

    ※同様にハエ(Enemy)もプレハブ化する。

出現スクリプトの作成

  • Scripts フォルダを選択した状態で Create -> JavaScript を選択
    JavaScript名を"EnemySpawning"に変更する。
    ランダムなポイントからハエを生成するスクリプトを自由に書く。
    ハエは出現するときに移動速度、回転速度、スケールをランダムに変えている。

    ハエをランダムなポイントから出現するスクリプトサンプル:EnemySpawning.js
    参考にしたチュートリアルのスクリプト:\\Batching\Batching\Assets\Scripts\targetSpawning.js

  • 空のオブジェクトを作成しスクリプトを追加する
    空のオブジェクト名は"EnemyLauncher"に変更する。

  • スクリプトへポイントをリンクする

  • プレイで確認
    ハエがランダムなポイントから出現する。
    ハエをタッチすると消滅し、すぐに追加される。
    ハエの制限は Enemy Max を調整する。

▲目次


GUIとゲームの遷移

 

得点と制限時間
ゲーム性を持たせるため得点(スコア)と制限時間(タイマー)を追加する。

  • タッチしたハエが消滅したら、スコアに100点を追加

  • カウントダウン式のタイマーを設け、制限時間になったらゲームを終了

  • ゲームオーバーになったら最終スコアを表示

フォントの読み込み

  • Project に Fonts フォルダを作成
    Fonts フォルダへフォントファイルをドラッグ&ドロップ
    ファイル:WEST____.TTF
    ファイル:WEST____ large.ttf
    データ元:\Batching\Batching\Assets\Font\

GUITextの作成
GUIText は解像度に依存しない配置にする。
配置位置スコアは左下、タイマーは右下。

  • スコア用の GUIText を追加
    メニューから GameObject -> Create Other -> GUIText を選択
    GUIText名を "Score" に変更する。
    図のように設定すると、画面の左下に配置される。

  • タイマー用の GUIText を追加
    メニューから GameObject -> Create Other -> GUIText を選択
    GUIText名を "Timer" に変更する。
    図のように設定すると、画面の右下に配置される。

カウントダウンスクリプトの作成

  • タイマーをカウントダウンして表示を更新するスクリプトを作成
    制限時間は変更できるようにする。
    作成したスクリプトを GUIText Timer に追加する。

    カウントダウンするスクリプトサンプル:Timer.js
    参考にしたチュートリアルのスクリプト:\Batching\Assets\Scripts\Timer.js

ゲームの遷移するスクリプトの作成

  • ゲームの遷移するスクリプトを作成
    管理するスクリプトサンプル:Transition.js
    参考にしたチュートリアルのスクリプト:\Batching\Assets\Scripts\Transition.js

  • メニューから GameObject -> Create Empty を選択
    空のオブジェクト名を "TransitionScreen" に変更する。
    スクリプトを追加し、図のように設定する。


    StartScreenText:
     ゲーム開始前アナウンスのテキスト。
     "Ready"⇒"Set"⇒"GO!" の順で表示する。

    EndScreenText:
     ゲーム終了アナウンスのテキスト。
     "Game Over"⇒"SCORE:" の順で表示する。
     "SCORE:" は TransitionScreen の GUIText を使用している。

    GameStarters:
     ゲーム開始時に有効、ゲーム終了時に無効になるオブジェクトを設定する。
     指定したオブジェクトは Hierarchy で無効に設定する。

▲目次


iPhone で動かす

 

Unity 3.0
Unity 3.0 でプロジェクトを実行した結果、問題なく動作した。
ただし、iPhone の画面に合うよう修正は必要。

Unity iPhone 1.7 でも動作を確認できた。
しかし 、画面のタテ/ヨコやターゲットデバイスiOSバージョンの設定など、毎回xcodeで修正する作業が発生し面倒。
また、アニメーションクリップなどはオブジェクト側でループ設定するなど個別に作業が必要となる。
さらに、Unity iPhone 1.7 で編集したプロジェクトをUnity 2.x で実行するとマテリアルなどの設定が無効になる。

Unity 3.0 から全てのプラットホームが統合され非常に便利。
上記の設定は全て Unity 上で行うことができ、アイコンやスプラッシュ画像等も編集できる。


衝突判定の最適化
背景(BgGame)、ハエ(Enemy)それぞれ Mesh Collider を使用して衝突判定を行っている。
処理に負荷がかかっているようなので、それぞれ単純なものに置き換える。
ハエ同士の衝突は、動きが鈍くなるため難易度が落ちてしまうのでやめる。
iPhone では画面が小さいため特に気になる。

  • BgGame を選択した状態で Component -> Physics -> Box Collider を選択
    [置き換え]を選択する。

  • Enemy を選択した状態で Component -> Physics -> Sphere Collider を選択
    [置き換え]を選択する。
    Character Controller の Radious を 0 にして、ハエ同士の衝突を無くす。

もっとゲームらしく

  • ハエの動き
    ハエが目標とする標的の数を増やし、出現時にランダムで選択するように変更。
    標的の数が増えるほどハエの動きも変化する。

  • 得点
    移動速度、回転速度、スケールに応じて得点を変更する。
    より速く、より小さく、より小刻みに動くハエは高得点。


▲目次



備考

 

サンプル
iPhone と同じ解像度で出力したWEBサンプル
『GO!』の合図でゲームがスタート。
時間内にどれだけハエを退治できるかを競う。
制限時間になるとゲームオーバーとなりスコアが表示される。
より速く、より小さく、より小刻みに動くハエは得点が高い。

プロジェクト
ここまでのプロジェクトサンプル
※Unity 3D 3.0 Free で動作確認済み
iPhone で動作させるには下記のビルド設定を行う(File -> Build Settings -> iOS)
 Bundle Identifier:App ID作成で入力したものを入力
 Target iOS Version:デバイスのiOSバージョンを入力

▲目次