Keeping Your Game Moving with the Sprite Object - dummies

Keeping Your Game Moving with the Sprite Object

By Andy Harris

Part of HTML5 Game Development For Dummies Cheat Sheet

As a game developer, remember that the Sprite object is the basis for moving game elements. Do not change the properties directly, but use the appropriate method to manipulate the sprite as follows:

  • spriteName = new Sprite(scene, imgFile, width, height);: Create an instance of the Sprite class called spriteName with the indicated scene, image file, and size.

  • Canvas: Refers to the canvas element created by the sprite’s scene.

  • width, height: The width and height of the Sprite object in pixels.

  • cwidth, cHeight: The width and height of the canvas containing the sprite.

  • x, y: Position of the center of the sprite.

  • Dx: Delta-X, or change in X. Describes how the sprite will move in the X axis. Positive values indicate movement to the right.

  • dy: Delta-y, or change in Y. Describes how the sprite will move in the Y axis. Positive values indicate movement downward.

  • speed: Displays the current speed of the sprite in its current direction of travel.

  • changeImage(imageFile): Changes the image file to the file indicated by imageFile. Used for a simple form of animation.

  • setImage(imageFile): Another name for changeImage().

  • update(): Draws the sprite’s image on the scene based on the current image, size, imgAngle, X, and Y properties. Normally called late in the page’s update() function.

  • hide(): Hides the sprite. Sprite position and angle are still calculated, but the sprite will not be drawn, nor will it collide with other sprites.

  • show(): Reverses the hide() method, making the visible appear and respond to collisions.

  • report(): A utility method for displaying the position, dx, dy, speed, and angle values of the sprite to the programmer’s console. Useful for debugging.

  • setPosition(X, Y): Sets the center of the sprite to the coordinate specified by X and Y.

  • setX(x), setY(y): Sets an individual coordinate to the specified value.

  • setDX(newDX), setDY(newDY): Changes the DX or DY properties to the indicated values. Setting DX to 5 causes the sprite to move 5 pixels to the right every frame until DX is changed again (directly or through other motion methods).

  • changeXby(xChange), changeYby(yChange): Moves the sprite the indicated value in X or Y, but does not make a permanent change to DX or DY. After the current frame, the sprite will move based on its current settings of DX and DY.

  • setSpeed(speed): Changes the sprite’s speed to the indicated value. The speed and moveAngle values are used together to determine the DX and DY properties of the sprite. You can set the speed to a negative value to make the sprite move backward.

  • getSpeed(): Returns the current speed based on the sprite’s current DX and DY values. Can be more accurate than using the speed property.

  • changeSpeedBy(diff): Changes the speed by the diff amount. Positive values speed up the sprite in the current moveAngle direction, and negative values slow the sprite down. It’s possible to have a negative speed. You may want to limit the minimum and maximum speeds to keep the game under control.

  • setImgAngle(degrees): Immediately changes the angle at which the sprite is drawn to the indicated value. Does not modify the motion of the sprite.

  • changeImgAngleBy(degrees): Modifies the sprite’s image angle. Use this method repeatedly to gradually change the angle at which a sprite is drawn.

  • getImgAngle(): Used to return the sprite’s current imgAngle. Returns a value in degrees.

  • setMoveAngle(degrees): Immediately changes the angle at which the sprite moves. Used in conjunction with speed to determine new DX and DY values for the sprite. Does not modify the appearance of the sprite.

  • changeMoveAngleBy(degrees): Modifies the sprite’s movement angle. Use this method repeatedly to gradually change the motion angle of a sprite.

  • getMoveAngle(): Returns the sprite’s current motion angle in degrees.

  • setAngle(degrees): Immediately sets both image and movement angles to the same value. Use when the sprite travels in the direction it is facing.

  • changeAngleBy(degrees): Modifies both the image and movement angles. Use this method repeatedly to gradually change the sprite’s direction.

  • turnBy(degrees): Another name for changeAngleBy().

  • addVector(degrees, force): Adds a force vector to the sprite at the indicated angle and force. This extremely powerful method can be used to add physics-based behaviors like gravity, orbits, and skidding. Modifies only the motion angle.

  • setBoundAction(action): Change the boundAction of the sprite to one of the following: BOUNCE, WRAP, STOP, DIE, or CONTINUE.

  • checkBounds(): If you have a boundary behavior that is not covered by one of the default actions, you can write your own checkBounds() method. You are responsible for checking all boundary conditions, and the default actions will no longer be checked for this sprite. It is never necessary to call the checkBounds() method. It is called automatically by the sprite’s update() method.

  • collidesWith(sprite): Returns true if this sprite’s bounding rectangle is overlapping the rectangle of the parameter sprite. Returns false if the sprites are not overlapping or either sprite is hidden.

  • *distanceTo(sprite): Returns the distance (in pixels) between the center of the current sprite and the center of the parameter sprite. Not affected by the sprite’s image size or angle.

  • angleTo(sprite): Returns the angle (in degrees) between the center of the current sprite and the center of the parameter sprite.

  • loadAnimation(width, height, cellWidth, cellHeight): Indicates that the image associated with a sprite is actually a sprite sheet. The width and height parameters indicate the width and height of the sprite, and the cellWidth and cellHeight determine the width of a single animation cell.

  • generateAnimationCycles(): Generates a series of animations based on the sprite sheet. Default behavior presumes that each row is a state and each column is a frame of animation within that state.

  • renameCycles(cycleNameArray): Renames each cycle. Each element of the array should be a human-readable name for the corresponding state.

  • setAnimationSpeed(speed): Sets the delay used when the library flips through the animation frames. Higher values cause slower animations.

  • setCurrentCycle(cycleName): Changes the animation cycle to the indicated value. Use one of the names defined with the renameCycles() method.

  • playAnimation(): Begins the animation, which will continue until paused.

  • pauseAnimation(): Pauses the current animation.