SHOEISHA iD

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

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

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

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

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

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

GL2パッケージによる描画

 ここからはGL2パッケージを使ってスプライトアニメーションの描画をしてみます。GL2パッケージのオブジェクトはGL2.RootにaddChild()することで画面に描画されます。まずはSpriteクラスの使い方を掘り下げてみましょう。

Spriteクラスの基本と基準点

 GL2.Spriteクラスの基本を説明していきます。まずは、ピコピコハンマーの画像(図4)を表示させるだけのコードを見てください(LIST2)。

図4:Content/gl/hammer001.png
図4:Content/gl/hammer001.png
LIST2:Spriteで静止画を表示
 1: var UI = require('../NGCore/Client/UI').UI;
 2: var GL2 = require('../NGCore/Client/GL2').GL2;
 3:
 4: function main() {
 5:   var glView = new UI.GLView({
 6:     frame: [0, 0, 80, 80],
 7:     onLoad: onLoad
 8:   });
 9:   glView.setActive(true);
10: }
11:
12: function onLoad() {
13:   var sprite = new GL2.Sprite();
14:   sprite.setPosition([0, 0]);
15:   sprite.setImage('Content/gl/hammer001.png', [80,80]);
16:   GL2.Root.addChild(sprite);
17: }

 まず、5ステップ目でUI.GLViewを初期化して描画領域を生成しています。GL2パッケージを使って描画するためには、このサンプルコードのようにUI.GLViewを初期化して描画領域を生成する必要があります。描画領域の読み込みが完了するとonLoadコールバックが呼ばれます。

 次にonLoad関数内の処理を説明します。LIST2の14行目と15行目で、(0, 0)座標にピコピコハンマーの画像(Content/gl/hammer001.png)を80x80ピクセルで表示しようとしています。

 実行結果は図5のようになりました。予想に反してピコピコハンマーの画像が見切れています。

図5:実行結果
図5:実行結果

 この原因は、基準点が画像の中心に設定されているためです。つまり基準点である画像の中心を(0,0)座標に描画してしまったのです。基準点はsetImageメソッドの第3引数で設定できます。LIST2の15行目を以下のように変更して、基準点を画像左上に設定します。これで画面内に画像が表示されるようになります。

sprite.setImage(
  'Content/gl/hammer001.png',
  [80,80], [0,0]);

 画像を回転させる場合など、基準点を画像の中心にしておきたいケースもあります。そのような場合は、setPositionメソッドで描画座標を調整します。

sprite.setPosition([40, 40]);

アニメーションの描画

 先ほどのピコピコハンマーをアニメーションさせるために、9枚の画像を用意しました(図6)。これを使って9フレームのアニメーションを生成してみます。

図6:全9枚の画像
図6:全9枚の画像

 用意した9枚の画像をContent/gl/に置きmanifest.jsonに以下を追記します。

"textures": [
"./Content/gl/*.png"
]

 これでngCoreはContent/gl/に置かれた.pngファイルをテクスチャーとして使用する準備を行います。

 まずはシンプルなアニメーションのコードです(LIST3)。

LIST3:Spriteでアニメーションさせる
var UI = require('../NGCore/Client/UI').UI;
var GL2 = require('../NGCore/Client/GL2').GL2;

function main() {
  var glView = new UI.GLView({
    frame: [0, 0, 80, 80],
    onLoad: onLoad
  });
  glView.setActive(true);
}

function onLoad() {
  var a = new GL2.Animation();
  a.pushFrame(new GL2.Animation.Frame('Content/gl/hammer001.png', 1000/9, [80, 80], [0, 0]));
  a.pushFrame(new GL2.Animation.Frame('Content/gl/hammer002.png', 1000/9, [80, 80], [0, 0]));
  a.pushFrame(new GL2.Animation.Frame('Content/gl/hammer003.png', 1000/9, [80, 80], [0, 0]));
  a.pushFrame(new GL2.Animation.Frame('Content/gl/hammer004.png', 1000/9, [80, 80], [0, 0]));
  a.pushFrame(new GL2.Animation.Frame('Content/gl/hammer005.png', 1000/9, [80, 80], [0, 0]));
  a.pushFrame(new GL2.Animation.Frame('Content/gl/hammer006.png', 1000/9, [80, 80], [0, 0]));
  a.pushFrame(new GL2.Animation.Frame('Content/gl/hammer007.png', 1000/9, [80, 80], [0, 0]));
  a.pushFrame(new GL2.Animation.Frame('Content/gl/hammer008.png', 1000/9, [80, 80], [0, 0]));
  a.pushFrame(new GL2.Animation.Frame('Content/gl/hammer009.png', 1000/9, [80, 80], [0, 0]));
  var sprite = new GL2.Sprite();
  sprite.setAnimation(animation);
  GL2.Root.addChild(sprite);
}

 このコードはhammer001.pngからhammer009.pngまでの9枚の画像を順番に表示することでアニメーションを実現しています。

 9個のGL2.Animation.FrameオブジェクトとそれをまとめあげるGL2.Animationオブジェクトが登場します。

 Frameクラスのコンストラクタの第2引数は指定した画像を何ミリ秒表示するかを設定します。ここでは1000/9となっていますので、1枚あたりの表示秒数は1000/9ミリ秒で、9枚全て表示されるのに1秒かかります。つまり、9fpsとなります。

 ここで生成されたFrameオブジェクトがパラパラ漫画の要領で高速に描画されることでアニメーションを実現しています。

 Sprite、Animation、Frameの各オブジェクトの関係を図示すると図7のようになります。

図7:Sprite、Animation、Frameオブジェクトの関係
図7:Sprite、Animation、Frameオブジェクトの関係
アニメーション用の画像について

 アニメーション用の画像は Abobe Flashで作ったムービーをシーケンス書き出ししています。既にFlash素材があれば簡単に準備できます。

次のページ
GL2レイヤーとUIレイヤー

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

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

もっと読む

この記事の著者

古田 暁(フルタ サトル)

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング