Images

The Images class is responsible for managing and rendering images within a game or application. It stores Graphic objects and provides functionality to load, retrieve, and render these images onto a canvas.

Constructor

new Images(context);

Creates a new Images instance, binding it to a specified canvas rendering context.

• Parameters:

  • context (CanvasRenderingContext2D): The 2D drawing context of the canvas where images will be rendered.

• Returns: A new Images object.

Properties

• context (CanvasRenderingContext2D): The canvas context where images will be rendered.

• images (Object): A collection of loaded Graphic objects, where the keys are image names and the values are Graphic objects.

Methods

load(imageDefinitions)

load(imageDefinitions);

Loads multiple images as Graphic objects based on the provided array of image definitions. The images are stored in the images property for later reference.

• Parameters:

  • imageDefinitions (Array): An array of image definitions, where each object contains:
    • name (String): The name/key used to reference the image.
    • path (String): The path to the image file.
    • width (Number): The width of the image.
    • height (Number): The height of the image.

• Returns: void

• Example:

  const images = new Images(context);
  images.load([
    { name: 'player', path: './images/player.png', width: 64, height: 64 },
    { name: 'enemy', path: './images/enemy.png', width: 64, height: 64 },
  ]);

get(name)

get(name);

Retrieves a Graphic object by its name. This method allows access to any image that was loaded using the load() method.

• Parameters:

  • name (String): The name of the image to retrieve.

• Returns: A Graphic object corresponding to the specified image name. If the image has not been loaded, it returns undefined.

• Example:

  const playerImage = images.get('player');
  if (playerImage) {
    console.log('Player image loaded:', playerImage);
  }

render(name, x, y)

render(name, x, y);

Renders the specified image at the given coordinates on the canvas. This method uses the stored Graphic object and draws it at the provided x and y coordinates.

• Parameters:

  • name (String): The name of the image to render.
  • x (Number): The x-coordinate where the image should be drawn.
  • y (Number): The y-coordinate where the image should be drawn.

• Returns: void

• Example:

  // Render the player image at position (100, 200)
  images.render('player', 100, 200);

Example Usage

// Create a canvas rendering context
const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');

// Create an Images instance
const images = new Images(context);

// Load image definitions from an array
images.load([
  { name: 'player', path: './images/player.png', width: 64, height: 64 },
  { name: 'enemy', path: './images/enemy.png', width: 64, height: 64 },
]);

// Render the player image at coordinates (100, 200)
images.render('player', 100, 200);

Notes

• The load() method uses Graphic objects to manage and store images.
• You must ensure that the images are loaded and stored before trying to render or retrieve them using the get() or render() methods.
• The render() method draws the image at the specified coordinates on the canvas using the provided CanvasRenderingContext2D.