Skip to content
Game Programming

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.