SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ゲームエンジン「ngCore」最速チュートリアル(AD)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

サンプルゲーム

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

ルール説明

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

実行画面

 ゲーム画面をキャプチャしました(図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で公開されていますので、ご活用ください。

最後に

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

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

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

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ゲームエンジン「ngCore」最速チュートリアル連載記事一覧

もっと読む

この記事の著者

古田 暁(フルタ サトル)

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6325 2012/03/06 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング