SHOEISHA iD

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

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

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

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

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

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

ngCoreでクラスを定義

 ぱっと見て気づくのは、今まで書いてきた関数ベースのソースコードとは違うということです。今回は“剣の軌跡を表示する”という部分をクラス化してあります。

exports.Trajectory = Core.MessageListener.subclass({

 この行でTrajectoryクラスを定義しています。ここでは、TrajectoryクラスはCore.MessageListenerクラスを継承します、ということを宣言しています。ngCoreでは独自クラスシステムを構築していて、あるクラスを継承する場合、そのクラスのsubclassメソッドを呼び出すことで継承を実現します。subclassの引数には新しいクラスの定義そのものをオブジェクト型で渡します。

 ngCoreのクラスシステムには、いくつか決まりがあります。initializeという名前のメソッドはコンストラクタとして扱われます。initializeの中身を見ていきましょう。

this._emitter.addListener( this, this.onTouch );

 これは、先ほど紹介したタッチのハンドリングです。エミッターにリスナーを登録しています。TrajectoryクラスはCore.MessageListenerを継承しているので、自身をリスナーとして登録できます。ここではonTouchメソッドをハンドラとして登録しています。これでTrajectoryクラスはアプリケーション上でタッチが発生した場合、その通知を受け取ることができます。

GL2.Primitiveで多角形を描画する

 LIST7は、描画に関する部分です。

LIST7:描画部分の実装
var p = new GL2.Primitive();
p.setType( GL2.Primitive.Type.TriangleStrip );
for (var i=0; i < this._maxLength * 2; i++) {
  var v = new GL2.Primitive.Vertex([0, 0], [0, 0], [1, 0, 0]);
  p.pushVertex(v);
}
this._prim = p;
this._node.addChild( this._prim );

 新しいクラスが2つも出てきました。GL2.PrimitiveとGL2.Primitive.Vertexです。この2つのクラスは“剣の軌跡を表示する”クラスの中で最も重要なクラスになります。

 GL2.Primitiveはポリゴンを描画するためのクラスです。OpenGLの低レベルな部分を使い、2Dの点(Vertex)のリストをもとに画面にポリゴンを描画します。GL2.Spriteでは表現できない特殊な形状や部分的な色合いの変化を実現できます。“剣の軌跡を表示する”というような、矩形ではない形をリアルタイムで、スムーズに動かしたいという時にはぴったりのクラスと言えます。

 使い方はとても簡単です。pushVertexというメソッドが用意されているので、このメソッドに点(Vertex)の情報をどんどん追加していくだけです。

var v = new GL2.Primitive.Vertex([0, 0], [0, 0], [1, 0, 0]);
p.pushVertex(v);

 この時に、点の情報を表すクラスとしてGL2.Primitive.Vertexが用意されています。LIST8はGL2.Primitive.Vertexのコンストラクタのシグネチャです。

LIST8:GL2.Primitive.Vertexのコンストラクタのシグネチャ
GL2.Primitive.Vertex(position, uv, color)
The default constructor.
Parameters:
{Core.Vector|float[2]} position
A location.
{Core.Vector|float[2]} uv
A texture coordinate.
{Core.Color|float[3]} color
An RGB color triplet.

 このVertexのリストは何をもとに変化していくのでしょうか? そう、ユーザーのタッチ操作によって変化していきます。次は先ほどタッチエミッターに登録したonTouchの中身を見てみましょう(LIST9)。

LIST9:onTouchの中身
onTouch: function( touch ) {

  var x = touch.getPosition().getX();
  var y = touch.getPosition().getY();

  this._isMoving = false;

  switch (touch.getAction()) {
  case touch.Action.Move:
    this._vertexList.unshift( {x:x, y:y} );
    this._isMoving = true;
    break;

  case touch.Action.Start:
  case touch.Action.End:
  default:
    break;
  }

  if (this._vertexList.length > this._maxLength) {
      this._vertexList.pop();
  }
  return touch.getAction() === touch.Action.Start;
}

 さて、onTouchの中では何をやっているのでしょうか? switch文の中身がメインの処理です。注目してみましょう。

 エミッターから送られてきたtouchインスタンスのgetActionメソッドの返り値でスイッチしています。このメソッドはタッチがどのような状態で行われたのかを値として返します。ここではその値がAction.Moveだった時に処理を行っています。Action.Moveは画面上で指をスワイプするような操作をした場合に使われます。

this._vertexList.unshift( {x:x, y:y} );

 処理の内容はとても単純です。this._vertexはコンストラクタで初期化している配列ですが、この配列にタッチされた位置を追加しているだけです。配列の中身を変更しているだけなので、まだ描画に影響はありません。実際に描画に影響のある処理を行っている部分は、Trajactoryクラスの中にあるonUpdateメソッドです。

次のページ
ゲームを組み立てる

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

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

もっと読む

この記事の著者

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

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

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング