Sprite Class

Sprite Class

Overview

The Sprite class extends the functionality of the GameObject class to represent and manage sprite-based objects within a 2D scene. It facilitates the rendering of images, reloading images, adjusting dimensions, scaling, and changing the source image dynamically. This documentation outlines the properties and methods of the Sprite class.

Constructor

Parameters

• options (Object, required): An object containing configuration options for the sprite.
  • url (String, required): The URL of the image to be used as the sprite.
  • coordinates (Array, required): An array representing the initial coordinates of the sprite.
  • width (Number, required): The width of the sprite.
  • height (Number, required): The height of the sprite.
  • physicsEnabled (Boolean, optional): Enables physics on that polygon (works best if polygon is convex). Defualt is false
  • physicsOptions: passed to matter.js to configure how the object interacts. Set mass, friction, frictionAir, frictionStatic, restitution this way. Refer to matter.js documentation for full list

Example Usage

const spriteOptions = {
  url: "path/to/image.png",
  coordinates: [100, 100],
  width: 50,
  height: 50,
};

const mySprite = new Sprite(spriteOptions);

To add to the scene, use scene.addObject()

scene.addObject(mySprite)

Properties

• type (String): Indicates the type of object, set to "sprite".
• image (String): The URL of the image used as the sprite.
• coordinates (Array): An array representing the current coordinates of the sprite.
• width (Number): The width of the sprite.
• height (Number): The height of the sprite.
• square (Boolean): Indicates whether the sprite is a square.
• hitbox (Array): An array representing the hitbox dimensions of the sprite.
• source (HTMLImageElement): The HTML image element used as the source for the sprite.
• Inherited properties from GameObject:
  • position (Array): position of object (top-left most point of polygon... do not use to reference polygon... very unstable)
  • rotation (Number): Rotation in radians of object (only if physics enabled)
  • bounds (Array): [rightBound, bottomBound]
  • boundsActive (Boolean): Are the bounds active on the object or no
  • physicsEnabled (Boolean): Is the physics engine active on this object
  • body (Matter.js Object Reference): Reference to the physics body (if physicsEnabled is true). Only gets applied when added to a scene

Methods

getWidth()

Returns the width of the sprite

const spriteWidth = mySprite.getWidth()

getHeight()

Returns the height of the sprite

const spriteHeight = mySprite.getHeight()

reload()

Reloads Sprite.source if Sprite.image has changed. Run this whenever changing image attribute for it to take effect.

mySprite.reload()

draw({ ctx, camera, canvas })

Draws the sprite on the canvas using the provided rendering context (ctx), camera coordinates, and canvas.

• ctx (CanvasRenderingContext2D): The 2D rendering context of the canvas.
• camera (Array): An array representing the camera coordinates.
• canvas (HTMLCanvasElement): The HTML canvas element.

const canvasContext = document.getElementById("myCanvas").getContext("2d");
const cameraCoordinates = [0, 0];
mySprite.draw({ ctx: canvasContext, camera: cameraCoordinates, canvas: document.getElementById("myCanvas") });

Note: the above example is possible usage only. This function runs automatically if you have added the object to a scene

reshape(width, height)

Reshapes the sprite by updating its width, height, and hitbox dimensions.

• width (Number): The new width of the sprite.
• height (Number): The new height of the sprite.

mySprite.reshape(60, 60);

scale(factor)

Scales the sprite by a given factor.

• factor (Number): The scaling factor.

mySprite.scale(1.5);

changeSource(image)

Changes the source image of the sprite.

• image (String): The new URL of the image.

mySprite.changeSource("path/to/newImage.png");

Note: this automatically reloads the sprite... no need to call sprite.reload() after sprite.changeSource

polify()

Returns an array representing the vertices of the bounding box of the sprite.

const spriteVertices = mySprite.polify();