Asset Setup

There are simple to complex setups for assets. The best way to learn how to define an assets is by adapting from those that are previously defined.

Simple Assets

All the assets are in JSON format categorized by type, and contain a name and an image.

assets: {
    obstacles: {
    tube: { src: "/images/platformer/obstacles/tube.png" },
    coin: { src: "/images/platformer/obstacles/coin.png"},
    tree: { src: "/images/platformer/obstacles/tree.png"}
    },
    platforms: {
    grass: { src: "/images/platformer/platforms/grass.png" },
    alien: { src: "/images/platformer/platforms/alien.png" },
    bricks: { src: "/images/platformer/platforms/brick_wall.png" },
    },

Character Assets

Assets, that have more game actions, contain properties. The example shown is a Goomba and it has properties to scale image or set ratios. In the case of enemies and other assets, properties are placed in JSON structures to add flexibility to assets and avoid rewriting code.

enemies: {
goomba: {
    src: "/images/platformer/sprites/goomba.png",
    width: 448,
    height: 452,
    scaleSize: 60,
    speedRatio: 0.7,
    xPercentage: 0.6,
},

Player Assets

The player has animations that correspond to movements. In the Mario definitions, you will see properties that correspond to animations from the user pressing the WASD key

players: {
mario: {
    src: "/images/platformer/sprites/mario.png",
    width: 256,
    height: 256,
    scaleSize: 80,
    speedRatio: 0.7,
    w: { row: 10, frames: 15 },
    wa: { row: 11, frames: 15 },
    wd: { row: 10, frames: 15 },
    a: { row: 3, frames: 7, idleFrame: { column: 7, frames: 0 } },
    s: { row: 12, frames: 15 },
    d: { row: 2, frames: 7, idleFrame: { column: 7, frames: 0 } }
},

Game Level Setup

Each level has a tag, background, platform, player, and callback function. As the game continues to improve, the attributes will be changed and extended over time. The coders who extend the game will be spending the majority of their time making new GameLevel and customizing GameLevel objects.

  • GameLevel object definition.
    • Each asset becomes a new GameObject in a GameLevel by its definition in the “hillGameObjects” data structure.
    • Each asset is given a value for its “name”.
    • The asset “id” is used to identify the asset in game code, for instance, it will be used in collision detection. This name is generalized to a behavior, it is not unique.
    • Each asset is given a value for its “class”, the same name as its JavaScript file. This is the code used to manage the asset in the game.
    • The data key contains the name of the asset defined in the “this.assets.*” data structure.
  • GameLevel creation. Observe the “new GameLevel” at the end of this code block
    • hills is the name given to this GameLevel. This GameLevel contains some of the classic Mario game behavior.
    • callback contains code that is used to check the game status from GameControl. If this condition is met, an interrupt is sent to the game, to allow behavior injection into the game level (like stop or reset level).
    • objects contains the association of the GameObjects to the GameLevel
// Hills Game Level defintion...
const hillsGameObjects = [
// GameObject(s), the order is important to z-index...
{ name: 'mountains', id: 'background', class: BackgroundMountains,  data: this.assets.backgrounds.mountains },
{ name: 'clouds', id: 'background', class: BackgroundClouds, data: this.assets.backgrounds.clouds },
{ name: 'hills', id: 'background', class: BackgroundHills, data: this.assets.backgrounds.hills },
{ name: 'grass', id: 'platform', class: Platform, data: this.assets.platforms.grass },
{ name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.2, yPercentage: 0.85 },
{ name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.2368, yPercentage: 0.85 },
{ name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.2736, yPercentage: 0.85 },
{ name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.6, yPercentage: 1 },
{ name: 'itemBlock', id: 'jumpPlatform', class: JumpPlatform, data: this.assets.platforms.itemBlock, xPercentage: 0.4, yPercentage: 0.65 }, //item block is a platform
{ name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage: 0.3, yPercentage: 1, minPosition: 0.05},
{ name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage:  0.5, yPercentage: 1, minPosition: 0.3 },
{ name: 'mushroom', id: 'mushroom', class: Mushroom, data: this.assets.enemies.mushroom, xPercentage: 0.09},
{ name: 'mushroom', id: 'mushroom', class: Mushroom, data: this.assets.enemies.mushroom, xPercentage: 0.49},
{ name: 'goombaSpecial', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage:  0.75, yPercentage: 1, minPosition: 0.5 }, //this special name is used for random event 2 to make sure that only one of the Goombas ends the random event
{ name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.1908, yPercentage: 0.75 },
{ name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.2242, yPercentage: 0.75 },
{ name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.2575, yPercentage: 0.75 },
{ name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.5898, yPercentage: 0.900 },
{ name: 'mario', id: 'player', class: Player, data: this.assets.players.mario },
{ name: 'tube', id: 'tube', class: Tube, data: this.assets.obstacles.tube },
{ name: 'loading', id: 'background', class: BackgroundTransitions,  data: this.assets.backgrounds.loading },
];
// Hills Game Level added to the GameEnv ...
new GameLevel( {tag: "hills", callback: this.playerOffScreenCallBack, objects: hillsGameObjects } );

Callbacks

The callback is continually monitored in a game loop. If used to its full extent, the callback is likely different for each game level. This is intended inject or extract information or behaviors of the game level.

  • end the level
  • store game status or game state to local storage
  • capturing events in the game that accumulate and store points
playerOffScreenCallBack: function() {
    // console.log(GameEnv.player?.x)
    if (GameEnv.player?.x > GameEnv.innerWidth) {
        GameEnv.player = null; // reset for next level
        return true;
    } else {
        return false;
    }
},