Creating sprites

Sprites are the key visual elements in the game and they are based on the Sprite class but with different renderers.

Image sprites from a sprite sheet or texture

A texture or sprite sheet is an image that can be subdivided to create individual frames for multiple sprites. The process for creating a sprite from a texture is as follows:

• Load the sprite sheet into a texture manager.
• Wait for the sheet to load.
• Set the sprite factory that the texture manager will use to create sprites.
• Create the sprites.

The following code shows how that is achieved.

const gameArea = new hcjeLib.domTools.GameArea({width: 640, height: 480});
 
hcjeLib.sprites.loadSpriteSheet(
  "assets/textures/sprite-sheet.json",
  "assets/textures/sprite-sheet.png", 
  new hcjeLib.domTools.TimeLimitedBusyIndicator()
)
  .then((textureManager) => {
    textureManager.spriteFactory = new hcjeLib.sprites.DomImageSpriteFactory(gameArea);
    const sprite = textureManager.createSprite("rocket.png", 
      [{name:"flying", interval: 100, cycleType: hcjeLib.sprites.CycleType.OSCILLATE}]);
  });

Text sprites

To create a text sprite merely call the createTextSprite function from the hcje/sprites module.

const textSprite = hcjeLib.sprites.createTextSprite(gameArea, `Hello World`, {
  dimensions: {width: 64, height: 0},
  markdown: false
});