With the development of the Canvas element, I have started work on a Sprite template. The attachment includes the following files:
sprite.js - the template
StarBlast.htm - a very early version of a SHMUP I'm working on to demonstrate the features of the template
There are also some assorted image files which are used by StarBlast.htm, but these are not part of the template.
This version of sprite.js uses the following constructor:
spriteVar = new sprite("image_file_name",x,y,canvas);
image_file_name is the file name of the image which this sprite will use. GIF, JPG and PNG file types are supported.
x and y are the default position of the sprite on the canvas.
canvas is the reference of the canvas on which this sprite will appear.
Once constructed, the sprite object(s) have the following properties:
x - the horizontal position of the centre of the sprite.
y - the vertical position of the centre of the sprite.
xSpeed - the horizontal speed of the sprite in pixels. (Default = 0)
ySpeed - the vertical speed of the sprite in pixels. (Default = 0)
xScale - the horizontal scale of the sprite as a ratio. (Default = 1)
yScale - the vertical scale of the sprite as a ratio. (Default = 1)
renderX - the left edge of the sprite (Read Only)
renderY - the top edge of the sprite (Read Only)
imageW - the width of the sprite (Read Only)
imageH - the height of the sprite (Read Only)
bearing - the rotation of the sprite in radians. (Default = 0, Range -PI to PI)
alpha - the opacity of the sprite. (Default = 1, Range = 0-1)
canvas - the canvas reference on which the sprite will be drawn.
img - the Image object used to store the image file data.
img.src - the file name of the image.
imageLoaded - the state of the Image object, becomes TRUE if the image file has been loaded into memory.
imageError - the state of the Image object, becomes TRUE if the image file has failed to load into memory.
The sprite objects have the following methods:
setScale(sx,sy) - sets the horizontal (sx) and vertical (sy) scales of the sprite relative to the dimensions of the image file.
move() - updates the x and y properties by adding the xSpeed and ySpeed properties to them.
rotateD(angle) - updates the bearing property by adding the angle argument to it. **Note that the bearing property is stored as Radians, while the angle argument is specified in Degrees, and converted by this method - SLOW**
rotateR(angle) - updates the bearing property by adding the angle argument to it. **Note that this version uses Radians, which is more efficient than rotateD**
getBearing(x,y) - returns the angle of a point relative to the centre of the sprite. (0 is up, 0.5*PI is right, PI is down and -0.5*PI is left)
draw() - draws the sprite image to the canvas while applying rotation, transparency and scaling. **Note that this function will draw a small red square if the image has failed to load**
This template is under development, so please let me know if you feel changes should be made
The game itself has a graphical glitch during the explosion.
Use the arrow keys to move and the space bar to fire.
