Resource Manager, Animations and Gradients

Resource Manager

In friGame every resource, be it animations, gradients, sounds, and possibly levels are not created and used directly, but instead they are handled by the resource manager.

The resource manager is a single object that contains generic functions for preloading resources, and for freeing resources that are no longer used.

It can be extended to manage any kind of resource. By default it supports animations and gradients. Through a plugin it supports sounds, and extending it to support levels and any other reource used by the game is encouraged.

friGame.resourceManager.addResource(name, resource)

This function adds a resource to be preloaded and makes it available to:

friGame.resources[name]

The friGame.r object is an alias to friGame.resources, in order to have less characters to type, resulting in:

friGame.r[name]

Note

This function is not used directly. It is used only when extending the resource manager.

Arguments
  • name (string) – The name of the resource

  • resource – The resource object

Returns

The resource manager object

Example:

return friGame.resourceManager.addResource(name, animation);
friGame.resourceManager.removeResource(name[, options])

This function removes the resource from friGame.resources and frees the memory associated with it.

Arguments
  • name (string) – The name of the resource

  • options – An object literal

Changed in version 2.4.0: Added the options parameter

Returns

The resource manager object

Options may include:

  • suppressWarning

    true to suppress the warning, false to show a warning on the console if the resource was already removed

Example:

friGame.resourceManager.removeResource('playerAnimation');
friGame.resourceManager.clear()

This function removes all the resource from friGame.resources and frees all the memory associated with them.

Returns

The resource manager object

Example:

friGame.resourceManager.clear();

Animations

friGame.resourceManager.addAnimation(name[, imageURL][, options])

friGame allows you to declare animations.

Animations are made of one image with a succession of frames just like in a css sprite.

An animation in itself doesn’t exist until it’s associated with a sprite.

Arguments
  • name (string) – The name of the animation

  • imageURL (string) – The URL of the image (optional)

  • options – An object literal describing the animation

Returns

The resource manager object

Options may include:

  • numberOfFrame

    the total number of frame in the sprite-sheet (for example for a 10x10 sprite with 15 frames your image will be 10x150 or 150x10 – default: 1)

  • rate

    the number of milliseconds between two frame

  • type

    either friGame.ANIMATION_VERTICAL for vertically stacked frames or friGame.ANIMATION_HORIZONTAL for horizontally layed frames (default)

  • once

    true if you don’t want the animation to loop, else false (default)

  • pingpong

    true if after the last frame, instead of starting again with the first one the animation will reverse, else false (default)

  • backwards

    true if the animation instead of going from left/up to right/down goes from right/down to left/up, else false (default)

  • offsetx

    the offset along the x-axis for the position of the first frame in the image (for use with sprite-sheets)

  • offsety

    the offset along the y-axis for the position of the first frame in the image (for use with sprite-sheets)

  • frameWidth

    the width of one frame (required for multi index friGame.ANIMATION_VERTICAL, otherwise optional)

  • frameHeight

    the height of one frame (required for multi index friGame.ANIMATION_HORIZONTAL, otherwise optional)

  • frameset

    a list of objects describing the various sprite-sheets used (required if the imageURL parameter is omitted, otherwise optional)

Changed in version 2.2.0: The frameset option is a list of objects with one or more of the following properties:

  • imageURL

    The URL of the image (default: the one passed as the imageURL parameter if passed, or the imageURL of the first element of the list)

  • numberOfFrame

    the total number of frame in the sprite-sheet (for example for a 10x10 sprite with 15 frames your image will be 10x150 or 150x10 – default: 1)

  • type

    either friGame.ANIMATION_VERTICAL for vertically stacked frames or friGame.ANIMATION_HORIZONTAL for horizontally layed frames (default)

  • offsetx

    the offset along the x-axis for the position of the first frame in the image (for use with sprite-sheets)

  • offsety

    the offset along the y-axis for the position of the first frame in the image (for use with sprite-sheets)

Example:

friGame.resourceManager.addAnimation('myAnimation', './myAnimation.png', {
    numberOfFrame: 10,
    rate: 90,
    type: friGame.ANIMATION_VERTICAL,
    once: true
});

// The following animation will have a total of 20 frames
friGame.resourceManager.addAnimation('myAnimation', {
    rate: 90,
    once: true,
    frameset: [
        {
            imageURL: './myAnimation.png',
            numberOfFrame: 10,
            type: friGame.ANIMATION_VERTICAL
        },
        {
            imageURL: './otherSpriteSheet.png',
            numberOfFrame: 10,
            type: friGame.ANIMATION_VERTICAL
        }
    ]
});

Gradients

friGame.resourceManager.addGradient(name[[[, startColor], endColor], type])

This function is used to create a solid color or a horizontal or vertical linear gradient.

Gradients can be used as the background of a sprite group.

Arguments
  • name (string) – The name of the gradient

  • startColor – An object literal representing the gradient start color (default: black)

  • endColor – An object literal representing the gradient end color (default: the same as startColor, making it a solid color)

  • type – either friGame.GRADIENT_HORIZONTAL for a horizontal gradient or friGame.GRADIENT_VERTICAL for a vertical gradient (default)

Returns

The resource manager object

startColor and endColor may include:

  • r

    An integer from 0 to 255 representing the red component of the color (default: 0)

  • g

    An integer from 0 to 255 representing the green component of the color (default: 0)

  • b

    An integer from 0 to 255 representing the blue component of the color (default: 0)

  • a

    A floating point value from 0 to 1 representing the opacity of the color (0: fully transparent – 1: fully opaque – default: 1)

Example:

friGame.resourceManager.addGradient('gradient', {r: 128}, {b: 255, a: 0.3}, friGame.GRADIENT_HORIZONTAL);
friGame.resourceManager.addGradient('solid_green', {g: 255});