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

HTML5 Canvas 深度操作で注意すること

More than 3 years have passed since last update.

まえがき

Flashプラットフォームによるhtml5 canvasでインスタンスの深度の入れ替えをする時に注意すること

現象

scriptで生成したインスタンスの深度の入れ替えとステージに配置したインスタンスの深度の入れ替えがうまくいかない場合がある。

サンプル

勉強のために作成している「high and low」で検証

原因

インスタンスを格納する親要素にズレが生じているために、深度のパラメタにアクセスできずに入れ替えが出来ない。displayObject.parentで検証してみると違いがわかる。

※displayObject.parentに関しては以下にてご確認下さい
http://definitelytyped.org/docs/easeljs--easeljs/classes/createjs.container.html#parent

違い

stageに配置すると以下のようにインスタンスを生成してくれる。
以下は、勝った数をカウントしてくれるチップのインスタンスの配置部分。

    this.MC_chip00 = new lib.MC_chip();
    this.MC_chip00.setTransform(113,364,1,1,0,0,0,20,20);
    this.MC_chip00.alpha = 0;

以下はフレーム内にライブラリからインスタンスを生成する場合の配置部分。
- container[iii]になってるのはfor文でインスタンスを生成しているから。
- トランプの生成部分です。

for (var iii = 0; iii < 52; iii++) {
    var objName = "";

    if (ii <= 9) {
        objName =  "container0" + iii;
        container[iii] = "container0" + iii;
    } else {
        objName =  "container" + iii;
        container[iii] = "container" + iii;
    }

container[iii] = new lib.container();
container[iii].name = objName;
stage.addChild(container[iii]);


}

現在の自分のソースは上記のようになっています。
それぞれのインスタンスをdisplayObject.parentで確認してみると、
- ステージに配置したチップのインスタンスは親要素はMovieClip
- スクリプトで配置したカードのインスタンスはstage

親要素が違うためにステージに配置したインスタンスとスクリプトで配置したインスタンスでは深度の操作ができません。なぜならば、深度操作するsetChildIndex()のメゾットには親要素をドットシンタックスで指定するからです。要するに親要素以下での操作になるので、親が同じでないと深度は操作しにくいということです。

まとめ

今回の検証を通してスクリプトで深度を操作するインスタンスがある場合は最初からステージに配置するのではなく、ライブラリからの生成にまとめるのが良いように思いました。
なぜならば、検証した通り深度の操作がやりにくくなるからです。

ライブラリからインスタンスを生成する場合のコードスニペットのソースの生成は以下のように記述されます。

var fl_MyInstance = new lib.LibrarySymbol();
this.addChild(fl_MyInstance);

もちろん、このままでも使えるのですが、displayObject.parentで確認したスクリーンショットの通り親要素が違うことや、今回作っているコンテンツでは深度を操作するのにこのまま使うではうまく操作できなかったので、親要素の指定を「stage」に変えて使いました。

また、flashがコンパイルするjavascriptソースはフレーム毎にfunctionで切り分けられているので、htmlのStageをnewしている部分の変数を確認して確実に親要素を指定するのが、確実にパラメーターにアクセスしやすくなると思います。

createJSはstageをnewする時に空間をcreateJSとして区切っているので他のライブラリの関数とは干渉しないので、安心して操作できると思います。

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