enchant.jsでの描画の優先順位
enchant.jsはデフォルトでは描画の優先順位の仕組みがないようだ。(2012/05/20現在)何も意識しないとこうなる
→Twitterでつぶやくとこのような解答
・NodeをGroupに加える際にinsertBeforeを使って制御するが、上手くいかないこともある。
・下位のgroupからremoveChild して上位のgroupにappendChildして実現。
・DOMが基本なので後からAppendしたものが上、優先順位を明示的にしたい場合はGroupを使用する。
Groupとは?
URL:http://enchantjs.com/pro/doc/ja/symbols/enchant.Group.html
"グループ"ではなく、わざわざ"Group"とアルファベットだったので、enchantが用意してくれてるクラスのようだ。
複数のNodeを子に持つことができるクラス。
現状はGameクラスにbear, bear1, bear2, bear3, bear4ってキャラクターがぶら下がってる。
とりあえずGameがNodeを子に持ってくれてるので、Groupを使わずやってみた。
各スニペットはこうだ。
・Game
window.onload = function() { var game = new Game(320, 320); game.fps = 24; game.preload('chara1.png');
・キャラクター(bearだけ抜粋)
var bear = new Sprite(32, 32); bear.image = game.assets['chara1.png'];
・各キャラのぶら下がり
game.rootScene.addChild(bear); game.rootScene.addChild(bear2); game.rootScene.addChild(bear3); game.rootScene.addChild(bear4);
そして、一度removeしてaddする関数作った
・readdChild関数(addにre-をつけた)
var readdChild = function (object) { game.rootScene.removeChild(object); game.rootScene.addChild(object); }
今回のゲーム仕様は、↓方向にいるキャラクター(y軸が大きい)が、手前に表示されたい。
・各フレームで判定してbearだけ判定して手前に来るようにした。
game.addEventListener('enterframe', function() { console.log("bear.y:" + bear.y); console.log("bear2.y:" + bear2.y); console.log("bear3.y:" + bear3.y); console.log("bear4.y:" + bear4.y); if (bear.y > bear2.y) { readdChild(bear); } else { readdChild(bear2); } if (bear.y > bear3.y) { readdChild(bear); } else { readdChild(bear3); } if (bear.y > bear4.y) { readdChild(bear); } else { readdChild(bear4); }
・bearが他のクマより下にいるとき
→きちんとbearが手前に
・bearが他のクマより上にいるとき
→きちんとbearが奥行きに
ところで、今回はキャラクターbearを中心にしか判定してない。
キャラクター1匹につき3つ判定だから4匹いたら3x4=12じゃん。
別の方法を考える・・。
毎フレーム全キャラremoveChildして、優先順にaddChildでもいいかな?
計算コスト掛かりそうだけど・・。
・言及がありました
Scene(game.rootScene)はGroupの拡張クラス。addChild等はGroupの関数。
ロングポーリングの欠点
・サーバーがブラウザのリクエストのタイムアウト間隔を制御できない・特定のホストに開くことができる同時リクエストの数を制限している