S2JS - Costumes, sounds and a 2-D scroller : Coding costumes 2

Next we make some changes to how we draw the image.

First, just to be helpful, we realise we'll have plenty of MySprites that only have a single costume, so if the sprite was created without a costume_width being specified, we'll set the costume_width equal to the width of the entire image file.

Then for convenience, we add a couple of properties called h and w to the object, as a handy place to keep the height and width of the costume.

Finally, the thing we came here for: we alter drawImage to use all those widths and heights. Note we multiply the costume number by the width to find the costume within the image. It looks pretty confusing. If you want, go back and look and the preceding pages and understand why each parameter is what it is. Or, just trust that I've done it correctly.

MySprite.prototype.Do_Frame_Things = function() { ctx.save(); // Save the drawing context state if (!this.costume_width) this.costume_width = this.MyImg.width; this.h = this.MyImg.height; // height of the image file this.w = this.costume_width; // width of a costume ctx.translate(this.x + this.w/2, this.y + this.h/2); // positioning ctx.rotate(this.angle * Math.PI / 180); // rotating if (this.flipV) ctx.scale(1,-1); // flipping if (this.flipH) ctx.scale(-1,1); if (this.visible) ctx.drawImage(this.MyImg, this.costume * this.w, 0, this.w, this.h, -this.w/2, -this.h/2, this.w, this.h); this.x = this.x + this.velocity_x; this.y = this.y + this.velocity_y; // move the thing ctx.restore(); // unwarp the context }

Let's take it for a run and see if it works !