Start typing to search...
Developer DocsAPI Reference
Back to withkoji.com

Define game assets

In the first section of this tutorial, you will fork the game scaffold and modify it to load the images and sounds used in the falling objects game.

By the end of the section, you should feel comfortable:

  • Configuring asset data in the koji.json file.

  • Using the game scaffold to load assets and define settings.

About the starting scaffold

The Game Dev Scaffold is a great starting point for this app because it was created specifically for these types of hyper-casual games. It handles a lot of what the game needs to do, which saves quite a bit of development time. For example, the template provides:

  • Automatic sound loading.

  • Improved image loading with optimization.

  • Integrated live leaderboard without the need to modify any of the backend files.

  • Easily configurable customization menu.

  • One-line calls for spawning special effects, like particles and animated text.

For more information, check out the scaffold README.

Forking the game scaffold

Get started by cloning the game scaffold to your own project.

  1. Open the Game Dev Scaffold listing.

  2. Click Fork.

    A copy of the app is created in your Koji account, and the Project Details page for your new app is displayed.

  3. Click Open in Code Editor.

    The Koji editor opens with the game code loaded.

Note
 The Koji editor is recommended for this tutorial, but you’re free to clone the newly created app to your local environment if you prefer.

Configuring koji.json

The falling objects game needs images to represent the player (character) and collectible (falling) objects.

player cat collectible donut

The game also needs sounds to play when the player collects or misses a falling object.

To define these assets and other game-specific data, you can modify the koji.json file.

Open the koji.json file, which is located in the project root. Then, find the remixData object. Update it to add the URL paths for the images and sounds as follows.

"remixData": {
  "musicVolume": 0.25,
  ...
  "title": "My Awesome Game",
  "imgLife": "https://images.koji-cdn.com/c166301e-e9be-4a9c-8d08-aaffe23d82bb/userData/3z6gw-life.png",
  "imgPlayer": "https://images.koji-cdn.com/814f445d-4e8d-40cb-83fe-04d120cc1889/userData/x0kfr-player.png",
  "imgCollectible": "https://images.koji-cdn.com/5f618aa2-e515-49a1-adb2-42dfb88a6f59/userData/1d6jr-donut.png",
  "sndCollect": "https://objects.koji-cdn.com/814f445d-4e8d-40cb-83fe-04d120cc1889/userData/ydx3v-collect01onlineaudioconverter.com.mp3.mp3",
  "sndLoseLife": "https://objects.koji-cdn.com/814f445d-4e8d-40cb-83fe-04d120cc1889/userData/vqnq8-loseLife.mp3.mp3"
},
Tip
 The game scaffold contains code that automatically loads any sound file whose name begins with snd. You can save yourself some work by following that naming convention.

To give the game a more distinctive look, modify the title and backgroundImage entries as follows.

"remixData": {
  ...
  "music": "https://objects.koji-cdn.com/45cdb5ca-8318-4318-8271-d0e422e790e0/hjdo0-music.mp3",
  "title": "Catch The Donuts",
  "backgroundImage": "https://images.koji-cdn.com/377f7596-8edf-44b1-994d-f9926b3aa641/userData/682dt-G68b11.png",
  ...
},

The remixData object should now look something like this example.

"remixData": {
  "music": "https://objects.koji-cdn.com/45cdb5ca-8318-4318-8271-d0e422e790e0/hjdo0-music.mp3",
  "musicVolume": 0.25,
  "title": "Catch The Donuts",
  "backgroundImage": "https://images.koji-cdn.com/377f7596-8edf-44b1-994d-f9926b3aa641/userData/682dt-G68b11.png",
  "imgParticles": [
    "https://images.koji-cdn.com/d4d2aab7-1847-481d-8aa6-6866d81d5e0f/6ik7b-star1.png",
    "https://images.koji-cdn.com/d4d2aab7-1847-481d-8aa6-6866d81d5e0f/xvpr0-star3.png",
    "https://images.koji-cdn.com/d4d2aab7-1847-481d-8aa6-6866d81d5e0f/0pfca-start2.png",
    "https://images.koji-cdn.com/d4d2aab7-1847-481d-8aa6-6866d81d5e0f/mwf5o-star5.png"
  ],
  "particle": "https://images.koji-cdn.com/d4d2aab7-1847-481d-8aa6-6866d81d5e0f/zfnue-particle2.png",
  "imgLife": "https://images.koji-cdn.com/c166301e-e9be-4a9c-8d08-aaffe23d82bb/userData/3z6gw-life.png",
  "imgPlayer": "https://images.koji-cdn.com/814f445d-4e8d-40cb-83fe-04d120cc1889/userData/x0kfr-player.png",
  "imgCollectible": "https://images.koji-cdn.com/5f618aa2-e515-49a1-adb2-42dfb88a6f59/userData/1d6jr-donut.png",
  "sndCollect": "https://objects.koji-cdn.com/814f445d-4e8d-40cb-83fe-04d120cc1889/userData/ydx3v-collect01onlineaudioconverter.com.mp3.mp3",
  "sndLoseLife": "https://objects.koji-cdn.com/814f445d-4e8d-40cb-83fe-04d120cc1889/userData/vqnq8-loseLife.mp3.mp3"
},
Note
 Don’t forget to save your changes.

If you have a Live Preview running, click the refresh icon to update it. You should see a new background image, as well as a new player image in the main menu.

Loading assets

Now that you’ve added assets to remixData, you need to load them in the game. The game scaffold loads all of these assets in the frontend/src/Components/Game/preload.js file.

You don’t have to do anything to load the sounds. Because you used the snd naming convention, the scaffold will load them automatically.

To load images, you use the addImage() function from the scaffold. Update the preload method as follows. It already contains a line for loading the player image. You just need to add a line for loading the collectible.

const preload = () => {
  ...
  addImage('player', remixValues.imgPlayer, game.playerSize, 5);
  addImage('collectible', remixValues.imgCollectible, 100);
  ...
}

The values for game settings are defined in the initializeValues() function. The game.playerSize variable, which represents the size of the player image, is defined as follows.

import isMobile from '../../Utils/isMobile'
...
const initializeValues = () => {
    ...
    game.playerSize = isMobile() ? 64 : 96;
}

Because there’s a considerable difference between mobile and desktop display sizes, the code uses the isMobile() function to set game.playerSize to different values, according to the device.

You can also change the game instructions by modifying the game.instructions property. For example:

game.instructions = "Touch to move around!";

Wrapping up

In this section, you made your own copy of the game scaffold. Then, you configured the starting values for game settings and loaded the image and sound assets into the game.

In the next section, you’ll add the Player and Collectible classes and use them to represent the character and falling objects in the game.