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

CodeZine / 2012年3月6日 14時0分

 ngCoreの世界にようこそ! このセクションではngCoreによるゲーム開発について説明していきます。簡単なボタン表示から始めて最終的には500ステップほどのサンプルゲームを作ります。実際にコードを書く前に、まずこの記事を読んでngCoreの世界を疑似体験していただければと思います。では始めてみましょう!

■2つの描画方法

 まずはngCoreの描画について見ていきましょう。

 ngCoreでは主に2つの方法で画面を描画できます。1つ目はUIパッケージを使う方法、2つ目はGL2パッケージを使う方法です。UIパッケージはボタンやスクロール画面などのUIパーツを簡単に描画できます。また、GL2パッケージはOpenGL ESを利用しているので、従来のWebベースのアプリケーションが苦手としていた高速な描画を実現できます。

●UIパッケージによる描画

 UIパッケージに用意されている各種パーツはUI.Window.documentにaddChild()することで画面に描画されます。W3CのDOMに少し似ています。

 ここでは、ボタンを描画するコード(LIST1)を解説しながら、UIパッケージについて説明していきます。

LIST1:画面にボタンを表示
1: var UI = require('../NGCore/Client/UI').UI; 2: var LocalGameList = require('../NGCore/Client/Core/LocalGameList').LocalGameList; 3: 4: function main() { 5: var y = UI.Window.outerHeight - 30; 6: var button = new UI.Button({ 7: frame: [10, y, 80, 20], 8: backgroundColor: "88000000", 9: normalText: " Reload ", 10: pressedText: "*Reload*", 11: textSize: 12, 12: textColor: "FFFFFFFF", 13: textGravity: [0.5, 0.5], 14: touchable: true, 15: onClick: function() { 16: LocalGameList.restartGame(); 17: } 18: }); 19: UI.Window.document.addChild(button); 20: }
 連載第1回の「スマートフォン向けゲームエンジンngCoreとは何か?」で説明したように、SDKに付属している開発用のサーバーを起動させ、Webブラウザでアクセスすると図1のように表示されます。画面の下の方に「Reload」と書かれた四角いボタンが表示されれば成功です。このボタンを押すとアプリが再起動します。

図1:サーバー起動画面


 もちろん、iOSやAndroidの実機やシュミレーター上で実行しても同じように表示されます。iPhone Simulatorで実行すると図2のようになります。

図2:iPhone Simulatorでの表示


 図3はAndroid実機(Nexus S)で起動して、Eclipseを用いてスクリーンショットを取ったものです。

図3:Nexus Sでの表示(スクリーンショット)


Reloadボタンで修正を反映
 ngCoreによるゲーム開発ではコンパイル作業が必要ありません。コードを修正したらアプリを再起動するだけで修正を即座に反映させて結果を確認できます。Webブラウザの場合はブラウザのリロード機能を利用することで修正を反映させることができます。




CodeZine

トピックスRSS

ランキング