斜め上から見下ろしたときの前後関係に応じたスプライト表示

「斜め上」から見下ろしたようなマップ上では、手前側にいるキャラクタのスプライトの上半身が、 奥側のキャラクタのスプライトの下半身を隠すような感じに、前後関係に応じて重ね合わせて表示をしてやると、 ちょっとリアルでイイ感じになります。　

こうした描画の際の前後関係を判断する基準として、

• 地形の標高は均一である
• スプライトの画像上でキャラクタの足が画像の下端に接するように描かれている

という条件のもとならば、「スプライトの左上y座標+スプライトの高さ」の値の大小関係を用いることができます。

そういうわけで、スプライトの y座標の値を更新したときに、自動的に z-index の値のほうも更新されるようなSpriteのサブクラス、 ZSpriteクラス を作ってみることにしました。

ZSprite = new enchant.Class.create(enchant.Sprite,{
    initialize: function(w, h){
     enchant.util.ExSprite.call(this, w, h);
    },

    moveTo: function(x, y){
        this._element.style.zIndex = y + this._height;
     enchant.Sprite.prototype.moveTo.call(this, x, y);
    },

    moveBy: function(dx, dy){
        this._element.style.zIndex = this.y + this._height + dy ;
     enchant.Sprite.prototype.moveBy.call(this, dx, dy);
    },

    zindex: {
     get: function(){
         return this._element.style.zIndex;
     },
     set: function(zindex){
         this._element.style.zIndex = zindex;
     }
    },

    y:{
     get: function(){
         return this._y;
     },
     set: function(y){
            this._element.style.zIndex = y + this._height;
         enchant.Sprite.prototype.y.set.call(this, y);
     }
    }
});

なお、GitHub上でのIssue、「#3 z-indexのプロパティが欲しい」では、 開発者の方が「z-indexによる表示順序の管理は確かに柔軟でその場対応のようなことをやるのには便利なのですが、 様々なプラグイン等を利用した場合に整合性を保つのがやや難しく、enchant.jsでのサポートはしない考えです。」と 述べているので、今後、何か問題が生じる可能性があるのかもしれません(よくわかりません＞＜)。