Easeljs埋め込みにビットマップを使用する

Question

Easejを使用して小さなスネークブラウザゲームを作成しています。

今、私たちは蛇の部品だけでなく、色のPNG画像を使用したい：

this.shape.graphics.beginFill("#e54d42"); 
this.shape.graphics.drawRect(this.x*this.grid.cell_width, this.y*this.grid.cell_height, this.grid.cell_width, this.grid.cell_height); 

this.shape.graphics.endFill(); 

誰もがそれを行う方法を知っていますか？ beginBitmapFillを使うか、どうやってやるのですか？

Answer 1

ビットマップ塗りつぶしは、あなたが望むことをするかもしれませんが、シェイプの座標を考慮する必要があります。私の形状は[0,0]で始まりhttp://jsfiddle.net/lannymcnie/ogy1qmxn/1/

shape.graphics.clear() 
    .beginBitmapFill(img) 
    .drawRect(0,0,800,600); 

注：ここでは

は、迅速なサンプルです。異なる座標でシェイプを開始すると、ビットマップはデフォルトで[0,0]から描画されるため、別々に切り取られます。 http://jsfiddle.net/lannymcnie/ogy1qmxn/2/

[0,0]で描画し、実際にシェイプを移動することで、形状を描画するときにマトリックスを使用してporを移動することができます。

var matrix = new createjs.Matrix2D(); 
matrix.translate(this.x*this.grid.cell_width, this.y*this.grid.cell_height); 
shape.graphics.beginBitmapFill(img, "repeat", matrix); 

希望します。