Skip to content

Loading game assets

Jump to bottom
cursorkeys edited this page Sep 13, 2021 · 13 revisions

Asynchronously Loading assets

Javascript is highly asynchronously. What does this mean for loading assets? It means that loading is divided in two parts.

  1. Defining what needs to be loaded. Using the "load" method.
  2. Initializing your code when the loading is complete. Using the "load" method.

Example loading:

--- statedefinitions.js


myPlaybook.states = {
        'load':                 { _type: "LOADSILENT",  next: 'loadLevel'},

...



this.playbooks = {
        game: { object: myGame, enter: 'load', definition: this },
...

--- mygamedefinition.js


class myGameDefinition {

  load( action, data ) {

    if( action == 'GETURLS' ) {

      var audio = [];
      var pictures = [];
      var data = [];

      pictures['mypicture']= 'res/gfx/mypicture.png';
   
      audio['mysound'] = 'res/sfx/mysound.mp3';
   
      data['mydata'] = 'res/text/level.txt';

      return {  imgSrcArray: pictures, audioSrcArray: audio } ;
    }
    else if( action == 'LOADED' ) {


       this.picture = data.resources.imgArray['mypicture']; //Ready to use now. Object of type "Img".
       this.sound = data.resources.audioArray['mysound'];  //Ready to use now. Object of type "Audio".
       this.data = data.resources.dataArray['mydata'];  //Ready to use now. Object of type String.

}

Note that the actual loading is being taken care of by GAME1. Your code just needs to point out on what urls the assets live, and assign variables to store the assets in.

Types of assets

Pictures

Any picture format that is supported by modern web browsers can be loaded.
For example: gif, jpg and png.

PNG is often preferred for sprites and so on. JPG can be ok for background and title pictures. GIF may be useful in some other cases, where a palette is preferred over 24 bit colors.

The loaded resource is an Img object, and can be used to draw directly on a canvas. (See HTML / Javascrip Canvas documentation)

Sprites

Sprites can be initialized with a loaded picture as the source.

Sprites animations can be initialized with a loaded picture as the source.

You need to specify the transparent background color, and the resolution of the collision boxes.

    this.spriteImage = new SpriteImage( 
              myLoadedPic ,     //loaded image
              {r: 0, g:0, b:0}, //rgb values of the color to be made transparent
              { xGranularity: 8, yGranularity: 8 } //collision granularity resolution
    );

Sprite Animations

Sprites animations can be initialized with a loaded picture as the source. The loaded picture has to be organized like an image strip. This means, all frames of the animation should be laid out in a grid, or column or row pattern in a single image.

You need to specify yourself the dimensions of the "grid", when initializing an animation. Also you need to specify the transparent background color, and the resolution of the collision boxes.

    this.anim = new SpriteAnim( 
              myLoadedPic ,     //loaded image
              32, 32,           //grid size
              {r: 0, g:0, b:0}, //rgb values of the color to be made transparent
              { xGranularity: 8, yGranularity: 8 } //collision granularity resolution
            );

Sounds & Music

Sound and music files are wav or mp3 files. Both formats can contain music or sounds. MP3 is better on the internet since the file format is much more compact, this means that loading times will be quicker.

Sounds and Music does not need to be initialized. The Audio object returned from loading the resource can directly be used.

Data files

Data files are loaded into a simple string, and can be parsed by using javascript string commands. A data file can also be a JSON file. If the extention is ".json", it will be parsed and an Object is created from it. Check the "load_data" example.

Post Loading Transformations

Sometimes it can be handy to use a sprite several times.

Examples:

  • The same sprite in different sizes.
  • The same sprite in different rotation angles.
  • The same sprite in different colors. Example, a black version of the sprite can be used as the shadow of the sprite.

Post loading allows you to easily modify the sprite, with a number of predefined transformers.

Examples usage:

var postloading =

[ { f:this.magic.scale, par: 0.5 }, { f:this.magic.mkShadow1, par: bgColor7 } ];

var si = new SpriteImage( pic , postloading, this.collisBoxRes );

Each array entry contains an "f", which is the postload function, and a "par", which is a parameter passed to the function.

In this example, a class called "magic", has 2 functions.

  1. scale, scales the picture, before it is used.
  2. mkShadow1, makes a dithered shadow of the image, as was used often in old school games.

Magic is an instance of the SpriteImageMagic class defined in spriteimagemagic.js

Clone this wiki locally