Help us understand the problem. What is going on with this article?

【phina.js】グループ管理の基本テクニック

More than 1 year has passed since last update.

本記事はphina.js Advent Calendar 2015の9日目の記事です。

@phi_jpさん 前 ← → 後 @daishi_hmrさん

はじめに

通常ゲームを作る時には、配置物や敵キャラなどをグループとして管理する必要性がいずれ出てきます。この場合、一般的には配列を使用することになると思いますが、phina.jsでは、DisplayElementクラスがオブジェクトのグループ管理用に良く使われます。

DisplayElementクラスについて

DisplayElementクラスは、アルファ値などを持った基本クラスで、Shapeなどの継承元です。更に基底のElementクラスなどを使うこともできますが、最低限の要素しか持っていませんので避けた方が良いかと思います。

グループの作成

以下がDisplayElementを使ってグループを追加する例です。

var group = DisplayElement().addChidTo(this)

オブジェクトをグループに追加する

オブジェクトは直接Sceneに追加するのではなく、groupに追加していきます。
以下はCircleShapeを追加する例です。

CircleShape().addChildTo(group);

childrenを常に意識する

追加されたオブジェクトは、グループのchildrenという子要素配列に格納されており、上記の場合だと、group.childrenで参照することができます。
このchildrenを常に意識しておくことが、オブジェクトのグループ管理では大切になってきます。

グループからオブジェクトを削除する方法

children自体は配列です。通常の配列に行う操作は一通り可能ですが、折角なので、今回はphina.jsで拡張されているArrayクラスのメソッドを使ってみたいと思います。
API Documentation:Array

最初の要素を削除する

firstプロパティで最初の要素を参照できますので、以下のようにします。

group.children.first.remove();

最後の要素を削除する

lastプロパティで最後の要素を参照できますので、以下のようにします。

group.children.last.remove();

条件にマッチした要素を削除する(単発)

eraseIfメソッドを使います。引数には、削除される条件を書いた無名関数を与えます。trueを返した場合、その要素が削除されてループ処理から抜けます。

group.eraseIf(function(elem) {
  if (elem.fill === 'red') {
    return true;
  }  
});

条件にマッチした要素を削除する(一括)

eraseIfAllメソッドを使います。使い方はeraseIfと同じですが、1回のループで条件にマッチした要素を一括で削除することができます。

group.eraseIfAll(function(elem) {
  if (elem.fill === 'red') {
    return true;
  }  
});

要素を全て削除する

clearメソッドを使います。

group.children.clear();

要素のプロパティの一括変更

グループに追加された要素に対して、拡大、回転、アルファ値などのプロパティを一括で変更することもできます。ただし、拡大や回転については、groupの原点を変更するなどの工夫が必要です。

// 拡大
group.scaleX = 1.2;
// 回転
group.rotation = 45;
// 透明度
group.alpha = 0.5;

サンプルプログラム

これまで紹介した内容は、以下のサンプルで実際に動作確認できます。

group_mamagement.gif

まとめ

グループ管理は、ゲーム制作において不可欠な要素と言えるかと思います。
管理の方法は個々で異なると思うので、今回はその一例とお考え下さい。
phina.jsの機能を色々と試して、自分に合った効率的な管理方法を是非見つけて下さい!

alkn203
javascript製のゲームライブラリphina.jsを愛用している趣味プログラマ。ファミコン世代。 Hobbyist programmer javascript/html5/tmlib.js/phina.js/retro games
http://qiita.com/alkn203/items/bca3222f6b409382fe20
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした