2012年12月2日日曜日

gl.enchant.jsのTipsを2つほど

こんにちは。daishiです。

今日はenchant.js Advent Calendar 2012の1発目ってことで書いていきます。
(1日遅刻してしまいました。スミマセン)

では、私がここ数ヶ月のあいだに作ったgl.enchant.js関係のTipsについて紹介していきましょう。

DoGenchaのモデルデータをJSONPで読み込む


私の自作サービス「DoGencha」に投稿されているデータは、JSONPを使ってゲーム内に読み込むことができます。
やり方は、

  1. dogencha.enchant.jsをインポートしておく
  2. game.preload()関数でJSONPのURLをロードする
  3. game.assetsからデータを取り出して使用する
以上の3ステップだけです。簡単!

それでは具体的にやってみましょう。
まず、dogencha.enchant.jsですが、「http://static.dev7.jp/dogencha.enchant.js」に置いてあります。
これを<script>タグの中で指定してインポートします。
<script src="http://static.dev7.jp/dogencha.enchant.js"></script>
次に使いたいモデルデータを http://doga.dev7.jp/models から探して「JSONP URL」をコピーします。


コピーしたURLを、game.preloadを使ってロードします。
書き方は画像や音声素材を読み込むのと同じです。
game.preload("http://doga.dev7.jp/jsonp/daishi_hmr/robo/robo4.l3p.jsonp");
画像素材などと同じ。game.asset配列にSprite3Dオブジェクトとして格納されているので、取り出してSceneなどにaddChildします。
var robot = game.assets["http://doga.dev7.jp/jsonp/daishi_hmr/robo/robo4.l3p.jsonp"];
scene.addChild(robot);


これだけでだいたいOK。
DoGenchaに投稿されているモデルデータをゲームに登場させることができます。


タイムラインアニメーションをSprite3Dでも使えるようにする


v0.6からenchant.js本体に統合されたtl.enchant.js。
タイムラインアニメーションは非常に便利なのですが、Sprite3Dには対応していないのでそのままでは使えません。
そこでこういうものを作ってみました。

https://raw.github.com/daishihmr/enchant.js/feature/extension.gl.enchant.js/dev/plugins/extension.gl.enchant.js

これをインポートすると、Sprite3Dにもtlプロパティが追加され、Tweenが設定できるようになります。
<script src="extension.gl.enchant.js"></script>
robot.tl.moveTo(1.0, 1.5, -2.0, 60, enchant.Easing.BOUNCE_EASEOUT);
当然、3次元なので移動・拡大系(moveTo, moveBy, scaleXYZTo, scaleXYZBy)はパラメータの数が1個増え、Z軸について指定する必要があります。
また回転系(rotateTo, rotateBy)は回転量をクォータニオンで指定します。


↑赤い箱をクリックしてみて下さい。タイムラインアニメーションで動きます。

おわりに


そんなわけで、gl.enchant.jsに関する2つのTipsでした。
実際に動作するサンプルコードは http://static.dev7.jp/test/advcal2012.zip に上げておきます。
ぜひソースを読んでみてください。

次回はnaotaroさん、よろしくお願いします。m(_ _)m







0 件のコメント:

コメントを投稿