Easeljs Using Bitmap for filling Rectangle

Question

we are making a small Snake Browser game Using Easejs.

Now we want to use PNGs for the Snake Parts and not only a colour:

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();

Does anyone know how to do it? Shall we use beginBitmapFill or how we have to do it?

Answer 1

Bitmap fill might do what you want, but you will need to consider the coordinates of the shape.

Here is a quick sample: http://jsfiddle.net/lannymcnie/ogy1qmxn/1/

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

Note that my shape starts at [0,0]. If you start your shape at different coordinates, the bitmap will be cropped differently because it draws from [0,0] by default. Here is an example where the x/y coordinate of the bitmap is offset: http://jsfiddle.net/lannymcnie/ogy1qmxn/2/

You can fix this by either drawing at [0,0] and actually moving the shape, por using a matrix when you draw your shape.

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);

Hope that helps!