SHOEISHA iD

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

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

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

「忍者ロワイヤル」を真似してみよう!
~サンプルで学ぶ、ngCoreを使ったゲーム開発

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

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

 ngCoreは手軽にスマートフォン向けのソーシャルゲームを開発できる、強力なゲームエンジンです。環境が整ったら次はゲームを作ってみましょう。今回は、忍者ロワイヤルから一部切り出したサンプルを使って、ngCoreを使ったゲーム開発の実際を見ていきます。

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

はじめに

 本セクションではゲーム開発に必要なモジュールを実際に使い、「忍者ロワイヤル」から一部を抜き出したコードを使って、最終的には図1のようなサンプルゲームを作ることを目指したいと思います。

図1:今回作成するサンプルゲーム
図1:今回作成するサンプルゲーム

 サンプルアプリを開発するために必要なSDKのダウンロード手順は連載第1回を参照ください。

Hello ngCore!

 まず、最小のアプリケーションであるHello worldアプリを作成しましょう。Hello worldは、画面上に文字列を出力するだけの非常に簡単なプログラムです。構造がシンプルなので、利用するシステムの動作を確認するのにはぴったりです。

最小のngCoreコード

 CやPerlで書かれたHello worldと、ngCoreを使って作るHello worldは、基本的に何も変わりません。ゴールは「“Hello world”という文字列を画面上で確認すること」です。ngCoreでは、画面に文字列を表示する方法は2つあります。

 1つは、ログ出力関数です。ngCoreにはNgLogD、NgLogEなどのログ出力関数が用意されていて、文字列を引数に呼び出すと、コンソール上に文字列を出力します。2つめは、GL2.Textというクラスを使い、OpenGLのフレームバッファに文字列を描画する方法です。今回はこの2つの方法を試してみましょう。

全てのはじまりはmainから

 それでは、LIST1のソースコードを見てみましょう。

LIST1:最小限のngCoreコード
//----- 起動時に呼ばれる
function main() {
  NgLogD("--------------");
  NgLogD("Hello ngCore !");
  NgLogD("--------------");
}

 NgLogDはログを出力する関数です。第1引数に出力させたい文字列を指定します。このコードを適当なディレクトリに配置して、ブラウザからアプリのURLを開いてみましょう。問題がなければ、JavaScriptコンソールにログが吐かれているはずです。図2のようなログが流れていればOKです。

図2:JavaScriptコンソールに表示されるログ
図2:JavaScriptコンソールに表示されるログ

 このように、NgLogD関数を設定するだけで、とても簡単にログを出力できます。

new UI.GLViewではじまるOpenGLの世界

 続いて、OpenGLを使ってテキストを表示してみましょう。LIST2のソースコードを見てください。

LIST2:OpenGLを使ってテキストを表示するコード
var UI = require('../NGCore/Client/UI').UI;
var GL2 = require('../NGCore/Client/GL2').GL2;

//----- 初期化処理
function initialize() {
  var helloText = new GL2.Text("Hello ngCore");
  helloText.setPosition(UI.Window.getWidth() / 2, UI.Window.getHeight() / 2);
  helloText.setColor(0, 0, 0);
  GL2.Root.addChild(helloTtext);
}

//----- 起動時に呼ばれる
function main() {
  NgLogD("--------------");
  NgLogD("Hello ngCore !");
  NgLogD("--------------");

  // GLView を初期化する
  new UI.GLView({
    frame: [0, 0, UI.Window.getWidth(), UI.Window.getHeight()],
    onLoad: initialize
  }).setActive(true);
}

 少し複雑になってきました。

new UI.GLView({

 という行があります。これは一体何をしているのでしょうか? UI.GLViewはOpenGLを使うために必要なクラスです。ここではUI.GLViewのインスタンスを作成することで、OpenGLの初期化を行うことが可能となります。

 コンストラクタはOpenGLの初期化に必要な情報をUI.GLViewにObject型として渡します。

frame: [0, 0, UI.Window.getWidth(),
  UI.Window.getHeight()],
  onLoad: initialize

 frameには、OpenGLで描画する大きさを指定します。ここでは、UI.WindowのgetWidth、getHeightというメソッドで、画面の全てを描画に使うように設定しています。

 onLoadには、OpenGLの初期化処理が終了したタイミングで呼び出してほしい関数を指定します。ここでは、initializeという初期化のための関数を指定しています。

 initializeの中ではGL2.Textのインスタンスを作成し、表示させる座標・文字列の色を指定した後に、そのインスタンスをGL2.RootのaddChildというメソッドに渡しています。

 ngCoreではシーングラフをベースとした描画を行います。シーングラフとは描画に必要なオブジェクトを木構造で表現するものです。GL2.Rootは名前の通り、描画の根元です。この根元にGL2.Textのインスタンスを追加すると、そのインスタンスはシーングラフの一部になり、画面に描画されることになります。

 では、実行してみましょう。図3のように、ブラウザのページ部分とJavaScriptコンソールに「Hello ngCore」という文字列が出力されたでしょうか?

図3:実行結果
図3:実行結果

次のページ
タッチを使って簡単なアプリを作る

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

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

もっと読む

この記事の著者

沖原 正剛(株式会社ディー・エヌ・エー)(オキハラ マサタカ(カブシキガイシャディー・エヌ・エー))

株式会社ディー・エヌ・エー ソーシャルゲーム統括部 所属。コミュニティーエンジン株式会社でネットワークゲームの開発・運営に携わる。2010年6月株式会社ディー・エヌ・エー入社。

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

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6324 2012/02/23 19:01

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング