SHOEISHA iD

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

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

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

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

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

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

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

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

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:サーバー起動画面
図1:サーバー起動画面

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

図2:iPhone Simulatorでの表示
図2:iPhone Simulatorでの表示

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

図3:Nexus Sでの表示(スクリーンショット)
図3:Nexus Sでの表示(スクリーンショット)
Reloadボタンで修正を反映

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

次のページ

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

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

もっと読む

この記事の著者

古田 暁(フルタ サトル)

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング