Using Images:Adding Images to Assets

All assets have an image property. There are two ways to specify an image to be used with an asset.

Local URLs

The first, and simpler method, is to set asset.image to a local URL, which means, an address to an image file that is somewhere in the same folder as your game file. [More info...]

MyGame.createAsset({
  class: "Candle",
  name: "occult candle",
  src: "images/candle.jpg",
});

Image Lookups

The second method is to create an image lookup, add your images to that, and then set asset.image to an image lookup reference. Image lookups use the same local file URLs, but centralize them for tidier housekeeping. [More info...]

MyGame.createImageLookup({
  images: [
    { id: "candle", src: "images/candle.jpg" },
    { id: "brasskey", src: "images/brass-key.png" },
  ],
});

MyGame.createAsset({
  class: "Candle",
  name: "occult candle",
  image: "candle",
});

This approach has several benefits.

It keeps all your image definitions organized in one place.
It lets images be reused anywhere in your code.
Multiple assets can share an image: for instance, if all keys share one key image.
If your file name or file path changes, you only need to update it in one place.
Finally, there's one additional major benefit to using image lookups. Once you have a reference to an image in a lookup, you can use that reference as a placeholder in text, which means you can present the image inline inside any block of text. [More info...]

MyGame.createImageLookup({
  images: [
    { id: "candle", src: "images/candle.jpg" },
    { id: "brasskey", src: "images/brass-key.png" },
  ],
});

MyGame.createAsset({
  class: "Candle",
  name: "occult candle",
  image: "candle",
  
  description: "{ [image] candle }<br>It's an occult looking candle. ",
});

Image URLs

Whichever method you use, there's one important thing to know about image URLs. In this example, our file path means that the game will be looking for the image file inside a folder called images that is at the same level as the game's html file.

src: "images/candle.jpg"

This means that your game folder would need to look something like this:

GameFolder
└── MyGame.html
└── MyGame.js
└── MyGame.css
└── images
    ├── candle.jpg
    ├── brasskey.jpg
    └── ...

You can also store your images on an external web server if you prefer. This generally should work, though, depending on the settings of the web servers involved, it could possibly lead to technical complications that are beyond the scope of this document. If you're loading images cross-site, we'll just assume that you know what you're doing and leave you to it.

image: "https://www.mysite.com/mygame/images/candle.jpg"