Drawing and Manipulating a Sprite
(Note: If you are reading this, make sure you have already read part1: Creating a Sprite. Also, these tutorials assume a basic understanding of javascript and how to create an HTML5 Canvas.)
The sprite class only has one function you need to know to be able to use it. The draw() function. The draw function takes two arguments only. An x position and a y position. The syntax is:
spriteName.draw(x,y);
So if we were to instantiate a sprite and then draw it at 0,0 we would write:
testSprite = new sprite(“sprite.png”);
testSprite.draw(0,0);
But drawing an image on screen is easy! We could just use an <img> HTML tag, right? The real reason t use the sprite class is for image manipulation. There are 4 ways we can change how the sprite is drawn on the screen:
xscale: the width of the sprite (1 is the original width, a number less than 1 is smaller, and greater than 1 is wider)
yscale: the height of the sprite (1 is the original height, a number less than 1 is shorter, and greater than 1 is taller)
image_angle: the angle to draw the image at. The image rotates about its origin. (For a description of the origin, see the first tutorial)
image_alpha: A value between 0 and 1 that determines how transparent the image is. 0 is completely transparent, and 1 is solid.
In order to help you better understand these parameters I have created a quick little demo show casing them.
There are two other variables we can change that have to do with animated sprites.
image_speed: This value determines how fast the sprite will animate. It corresponds with how many times each image in the sprite strip should be drawn. A value of one would animate the fastest, and anything more would be slower.
current_frame: The current frame the animation is on. You can change this if you want to display a certain part of the animation
(Demo coming soon)
To change any of these parameters simply type something like this:
spriteName.parameter = newValue;
Putting it all together, we can create a sprite, manipulate it, and then draw it. An example of drawing a scaled and semi transparent sprite would be:
testSprite = new sprite(“sprite.png”);
testSprite.xscale = 2;
testSprite.yscale = 2;
testSprite.image_alpha = 0.5;
testSprite.draw(0,0);
I have submitted the apricot.js engine for review over at IndieDB. IndieDB is one of my favorite indie gaming sites, and I recommend it highly. It allows other developers and fans to give input during the entire design process.
Creating a new sprite
The sprite class makes drawing and manipulating images on an HTML5 Canvas easier than ever. The class can even handle animated sprites. Simply instantiate the sprite by creating a new sprite object. The syntax for this is:
testSprite = new sprite(“spriteURL”,animationFrames,Xorgin,Yorgin);
Only the first argument is required. If the others are left blank the framework will assume that the sprite is a static image (not animated) and that the orgin is at the top left corner of the image.
spriteUrl: The sprite or sprite strips’s URL or a javascript Image object containing the image. A sprite strip is every frame of the animation put in the same image horizontally. An example would be a simple walking animation like the following:
animationFrames: The number of images in the sprite strip. For the above image this argument would be 9. The framework assumes the images are all the same size and spaced evenly apart.
Xorgin, Yorgin: The X,Y position on the image that the rest of the image is drawn relative to. This is especially important when dealing with rotating sprites. I have tried to make this as clear as possible in the following picture:
This is not all the sprite class can do though. You can also manipulate the image’s transparency, scale, animation speeds, rotation, and more. I look forward to releasing the sprite class in the next couple of days!
OOP in Javascript
The most useful reference for object oriented programming in javascript I have found so far. Detailed descriptions and tips for using public/private/privileged methods and variables. A great page to have bookmarked.
Summary
- private variables are declared with the ‘var’ keyword inside the object, and can only be accessed by private functions and privileged methods.
- private functions are declared inline inside the object’s constructor (or alternatively may be defined via
var functionName=function(){...}) and may only be called by privileged methods (including the object’s constructor). - privileged methods are declared with
this.methodName=function(){...}and may invoked by code external to the object. - public properties are declared with
this.variableNameand may be read/written from outside the object. - public methods are defined by
Classname.prototype.methodName = function(){...}and may be called from outside the object. - prototype properties are defined by
Classname.prototype.propertyName = someValue - static properties are defined by
Classname.propertyName = someValue
Complete Source:http://phrogz.net/js/classes/OOPinJS.html
Favorite Line of Code Ever
varName = typeof( varName ) != ‘undefined’ ? varName:0;
Basically allows you to set a variable if it hasn’t been set before. I use it for optional arguments in javascript functions. If the variable is defined, it does nothing. If it is not defined it sets the variable to whatever value you’d like.
Hello Good People
Welcome to the apricot juice (js=juice) development blog. Apricot.js will be an opensource HTML5/javascript game making framework currently being developed by The Accord independent game development team. The apricot acronym stands for A Powerful Rendering Interface Consisting of Typing. This acronym was thought up after the name was chosen and may or may not be incorrect.
The Accord team consists of four young and handsome developers. First is hunter, our resident designer, modeler, writer, and cartographer. Next I would like to introduce myself, my name is Zach and I am the coder, mathematician and Sith lord on the side. Nathan is a slave to fashion who we put in charge of testing, balance, and level design. Jeremiah rounds out the team as the art director and leader of elvish relations.
Currently the team is developing the engine by building a couple simple games. As we complete the different classes we will upload them here. The first one is the sprite class. This javascript class will allow the user to easily manipulate and draw images on the HTML5 canvas.
