S2JS - Costumes, sounds and a 2-D scroller : Getting started

To start, let's review our MySprite object.

We've built it up over a number of lessons, and it's now pretty cool. It can:

Draw at a certain position
Make visible or invisible
Move in a chosen direction
Rotate to any angle
Flip horizontally or vertically

If this is all news to you, it may be worth going back and reviewing some earlier topics where we created MySprite step-by-step.

In this sample program, we're just creating a MySprite of a hamburger bun, and placing it at a fixed location.

<html> <head> <title>Costumes test program</title> </head> <body> <canvas id="myCanvas" width=300 height=300 style="background-color:pink" > </canvas> <script> var ctx = myCanvas.getContext("2d"); // Get the drawing context for the canvas var FPS = 40; // How many frames per second function MySprite (img_url) { // This function creates a MySprite this.x = 0; this.y = 0; // Where is it? Start it at x=0, y=0 this.visible= true; this.velocity_x = 0; // How fast is it moving? this.velocity_y = 0; this.MyImg = new Image(); // Store the image in an Image object this.MyImg.src = img_url ; // Load the image from a url this.angle = 0; // How many degrees we are rotated this.flipV = false; // Are we flipped vertically this.flipH = false; // Are we flipped horizontally } MySprite.prototype.Do_Frame_Things = function() { ctx.save(); // Save the drawing context state ctx.translate(this.x + this.MyImg.width/2, this.y + this.MyImg.height/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.MyImg.width/2, -this.MyImg.height/2); this.x = this.x + this.velocity_x; this.y = this.y + this.velocity_y; // move the thing ctx.restore(); // unwarp the context } var bun= new MySprite("http://s2js.com/img/etc/bun.png"); bun.x=170; function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); bun.Do_Frame_Things(); } setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer </script> </body> </html>