Skip to main content

Sprites

A Sprite is an image.

note

The example looks a little different because it exposes more boilerplate code for loading images.

Loading the image​

The image for the sprite must be loaded before the sprite is created. The image is specified in the images property of the game options. Each image must have the following:

  • imageName - The name of the image. This is used to refer to the image in the Sprite constructor.
  • height - The height of the image in pixels. This is not the height of the image within the file, but the height as it will appear in the game.
  • width - The width of the image in pixels. This is not the width of the image within the file, but the width as it will appear in the game.

In addition, the each image must have one of the following:

  • url - The URL of the image file. This can be a location on the internet or a local file on the server hosting your assessment.
  • svgString - The SVG string for the image. This is a string that contains the SVG markup for the image, which begins with <SVG> and ends with </SVG>
info

Because this tutorial runs in the browser, you cannot alter the image assets on the server hosting the assessment. The URL of assets/docs/img/blue-marble.jpg has been set up beforehand with this image. Other local file URLs will not work. You can, of course, edit the tutorial to use another image URL on the internet, e.g., https://upload.wikimedia.org/wikipedia/commons/7/70/Black_tricolor_Australian_Shepherd.jpg, as long as the server hosting the image allows cross-origin requests (CORS).

Creating the Sprite​

To create the Sprite, you pass in the name of the image that you used in the game options. Like a Shape or Label, you can set the position of the Sprite:

const earthSprite = new Sprite({
    imageName: "earth",
    position: { x: 100, y: 200 }
});
Loading...
Explore:
  • The image url can be any location, and it can be an SVG, JPG, or PNG.
  • By setting the height and width, you can resize the image. The original resolution of the JPG is square, but we'll make it appear very skinny.
  • The same image url can be used to create multiple sprites.