Atlas.jsブログ

Webブラウザで動作する、教育用JavaScriptゲームエンジン、Atlas.jsに関する知識共有ブログです。

レイヤー機能〜Atlas.jsの機能〜


 こんにちは。 今日はAtlas.jsに新しい機能が加わりましたので、その紹介をしたいと思います。

レイヤ

 追加されたのはレイヤ機能です。レイヤとは、層、階層という意味を持っていて、Atlas.jsではSpriteクラスやShapeクラスでできるオブジェクトをグループ化して、いっしょに移動や拡大、回転などを行うことができます。グループ化させるためにはLayerクラスを使います。実際にコードを確認していきましょう。

var sprite = new Sprite("sprite",32,32);//パーツ1
sprite.setPosition(100,100);
var sprite2 = new Sprite("sprite",32,32);//パーツ2
sprite2.setPosition(200,200);
 var layer = new Layer();
 layer.addChildren(sprite,sprite2);//パーツ1,パーツ2を追加し、まとめる。
game.addChild(layer);//layerをgameに追加

使い方はgame.addChildrenと似ています。スプライトや図形などのオブジェクトを作ってから、layerを用意し、そこにaddChildrenメソッドで作ったオブジェクトを追加するだけです。これだけで追加したオブジェクトをグループ化することができます。これで、layerから移動や拡大を一緒に行うことができます。これらをgameに入れる場合はlayerをgame.addChildで追加しましょう。
今度はLayerクラス独自のメソッドを紹介します。

fitToChildrenメソッド

 layerオブジェクトを作ると、その時レイヤの縦横の大きさは下の画像のように一定の値になっています。fitToChildrenメソッドは追加したオブジェクトから、最適のレイヤの大きさにしてくれます。また、レイヤの最初の回転軸は初期のレイヤの中心に設定されていますが、fitToChildrenを使うことで、最適化したレイヤの中心を回転軸にすることができます。 例として、回転させると、レイヤに追加したオブジェクトの内、一番左上を中心として回転しますが、fitToChildren()を使うと、ちゃんとグループ化した中での中心を軸に回転させることができます。

フィット前


フィット後


leaveメソッド

 leaveメソッドを使うと、グループ化したオブジェクトを分離させることができます。ゲームなどでLayerクラスを使ってキャラを作るときに、レイヤからオブジェクトを離したいときに有効ですね。

今回はsteelydylan さんにLayerクラスのサンプルを作っていただきました。 steelydylanさんのサンプル

これを見てLayerクラスについて理解を深めてみてください。


blog comments powered by Disqus

エントリーリスト

カテゴリーリスト

Facebook

Twitter

おすすめの本