javascript - JavaScript スプライトシート

Question

各要素間に等間隔の 27 個の要素を持つスプライトシート (png ファイル) があります。

+----------------+
| 1      2      3           
| 4      5      6
|
|
|
|
|
|
|
| 24     25     26

すべての要素を配列に挿入したいこれを行う方法を見つけた正常に動作する

var ElemObjects = [];
ElemObjects.push(new Elem(0,0));
ElemObjects.push(new Elem(380,0));
ElemObjects.push(new Elem(760,0));
ElemObjects.push(new Elem(0,340));
ElemObjects.push(new Elem(380,340));
ElemObjects.push(new Elem(760,340));
ElemObjects.push(new Elem(0,680))
ElemObjects.push(new Elem(380,680))
ElemObjects.push(new Elem(760,680))

等々

forループを使用して同じことをしたい私の問題は、forループ内のx座標とy座標を変更する必要があるかどうかわからないロジックにあります

for(var i =0; i < 26; i++){
    ElemObjects[ElemObjects.length] = new Elem(Xsr,Ysr);
    Xsr=Xsr+380;
}

助言がありますか

score 2 · Accepted Answer

モジュロ演算子を見てみましょう: http://en.wikipedia.org/wiki/Modulo_operation

// x is equal to block width times current x position
Xsr = 380*(i%3)

score 2 · Accepted Answer

iループ内の値に基づいて位置計算を行います。このようなものが動作するはずです:

for (var i =0; i < 26; i++) {
    var xModifier = i%3;
    var yModifier = Math.floor(i/3);

    ElemObjects[ElemObjects.length] = new Elem(380 * xModifier, 340 * yModifier);
}

これにより、リストを循環するときに必要な正しい値が得られるはずです。は、現在の値を 3 でxModifier割った余りに基づいており、現在の値に3 が均等に入る回数に基づいています。コンソールに送信されたときの出力は次のとおりです。iyModifieri

score 1 · Accepted Answer

spriteWidth、spriteHeight、imageWidth、imageHeight がある場合、コードは次のようになります。

var columnCount = imageWidth  / spriteWidth  ; 
var lineCount   = imageHeight / spriteHeight ; 

if (columnCount != Math.floor(columnCount)) throw ('sprite and image width don't match');
if (lineCount   != Math.floor(lineCount))   throw ('sprite and image height don't match');

for (var line=0; line<lineCount; line++) 
     for (var col=0; col<columnCount; col++) {

        // coordinates of the sprite  : ( col * spriteWidth; line*spriteHeight ) 
        // linear index of the sprite : ( line * columnCount ) + col 

     }

javascript - JavaScript スプライト シート

3 に答える 3

Related

Reference

javascript - JavaScript スプライトシート