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

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

2012/03/06 14:00

ポスト

　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：サーバー起動画面