ngCoreによるゲーム開発入門
～ステップバイステップで理解する開発の流れ

ゲームエンジン「ngCore」最速チュートリアル第3回

2012/03/06 14:00

サンプルゲーム

　最後にサンプルゲームを紹介します。このコードはページ上部のリンクまたはこちらからダウンロード可能ですので、ぜひダウンロードして動かしてみてください。

ルール説明

　このゲームはちょっと変わったモグラ叩きゲームです。ハンマーとモンスターが画面に登場しますので、ハンマーを掴んでモンスターを叩きます。ただしハンマーは掴み続けていると消滅してしまいますので、掴んだらすばやくモンスターを叩かないといけません。またモンスターも画面上を点々と移動しますのでモンスターを素早く追いかけてハンマーを打ちおろします。見事ハンマーでモンスターを叩くとモンスターは何かひとこと呟いて消滅します。10個のハンマーで何匹のモンスターを退治できるか競います。

実行画面

　ゲーム画面をキャプチャしました（図10）。ゲーム内で使われている素材は農園ホッコリーナ/牧場ホッコリーナのものを使用しています。

図10：サンプルゲームの実行画面

コード解説

　サンプルゲームの8割程の内容は、ここまでの解説で既に理解していただける内容となっていますので、ここでは残りの2割を補足していきます。

　まず、3つのクラスがあります。Game、Hammer、Monsterです。HammerとMonsterは分かりやすいと思います。Gameは“とりあえず”ここに入れとけというダメなクラスになっていますが、コードの成長に伴ってGameが分割されていくことでしょう。ではコードを見ていきましょう。

　17行目あたりのLIST7の処理ですが端末の向きを変更しています。これで画面がランドスケープモード（横向き）になります。

LIST7：端末の向きの変更

Device.OrientationEmitter.setInterfaceOrientation(
  Device.OrientationEmitter.Orientation.LandscapeLeft);

　ランドスケープモードでもUI.Window.outerWidthやUI.Window.outerHeightで取得できる数値は変わらないことに注意してください。つまり、横向き状態で画面幅を取得したい場合はUI.Window.outerHeightを、横向き状態で画面の高さを取得したい場合はUI.Window.

　outerWidthをそれぞれ呼び出す必要があります。26行目あたりで、UI.GLViewのオブジェクトに対して、setActive(true)しています。これはOpenGLの描画ループを開始するための処理です。これを忘れるとGL2レイヤーが表示されませんので注意してください。

　LIST8はHammerクラス内のハンマーが消滅する際の処理です。

LIST8：アニメーションの終了と同時に特定の処理を行う

this._sprite.setAnimation(this._anim['lost']);
this._sprite.getAnimationCompleteEmitter().removeListener(this);
this._sprite.getAnimationCompleteEmitter().addListener(this, this.warp);

　this._anim['lost']がハンマーが消える際に出るモクモクアニメーションです。モクモクアニメーションが最後まで再生されたタイミングで、次の処理を実行したいのでAnimationCompleteEmitterにlistenerとして、this.warpを登録しています。EmitterとListenerについては、連載第2回「サンプルで学ぶ、ngCoreを使ったゲーム開発」で解説されていますので、そちらを参照してください。

　また、AnimationオブジェクトにsetLoopingEnabled(true)を設定するとAnimationCompleteEmitterは永遠にemitされないので注意が必要です。

　GameクラスのdrawUIメソッド、undrawUIメソッドについて説明します（LIST9）。

LIST9：オブジェクトの管理

drawUI: function(func) {
  var views = Game[func]();
  if (views) {
    Game.uiView[func] = views;
    for (var key in views) {
      UI.Window.document.addChild(views[key]);
    }
  }
},
undrawUI: function(func) {
  var views = Game.uiView[func];
  if (views) {
    for (var key in views) {
        views[key].destroy();
    }
  }
  delete Game.uiView[func];
},

Game.glView.setActive(true);

　drawUIメソッドでは、生成済みのUIオブジェクトを内部で保持しています。これによりundrawUIメソッドが呼び出されたタイミングで、確実にdestroyを呼び出すことができるようになっています。

　ngCoreでは生成したオブジェクトはdestroyされるまでメモリ上に居座り続けます。使わなくなったタイミングで確実にdestroyメソッドを呼ぶ必要がありますので注意が必要です。

スクロールが重たくなる場合は…

　UIパッケージのUI.WebViewや、UI.ScrollViewを使って全画面描画をするような場合、スクロールが重くなるケースがあります。このような場合は、UI.GLViewのオブジェクトに対してsetActive(false)して描画ループを止め、スクロールの処理速度を稼いだりもします。

SDKバージョンについて

　ここで用いたサンプルコードは全てngCore SDK 1.0.6で作られています。最新のngCore SDKでは端末の画面取得に関するAPIなどの仕様変更が予定されていますので注意してください。

さらに詳細な情報

　ngCoreのAPIドキュメントや、DeNAの内製チームで得たノウハウやライブラリなど、さらに豊富な情報が以下のURLで公開されていますので、ご活用ください。

mobage リソースセンター

最後に

　以上で、「ngCoreによるゲーム開発入門」は終わりです。Objective-CもJavaもほとんど書けない筆者が、iPhoneとAndroidのゲームを同時に開発するなんて1年前までは想像できませんでした。実は今でも実感が湧きませんが、それはngCoreによってOSや開発言語の違いが完全に隠蔽され、開発者はそれを意識する必要がほとんどないからに他なりません。この冊子をお読みになっている皆さんにもngCoreを使って、OSや言語の違いを気にすることなく、面白いゲーム開発にエネルギーを注いでいただきたいと思います。

ngCoreの事例紹介「牧場ホッコリーナ」

　ngCoreにて開発された牧場シミュレーションゲーム。自分の牧場で野菜や果物を育てて収穫したり、時折訪れるいたずら動物を捕まえたりしながら、自分の牧場を発展させていくゲームです（※iOS/Androidの両OSに対応しています）。