Using Images:Image Lookups

An Image Lookup is a lookup table that allows you to define an image file URL in one place, assign it an ID, and then refer to the image from its ID from anywhere. While it is possible to work with images without a lookup, lookups have 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.
• You can use image lookup references as placeholders in any text, which means you can present image inlines inside any block of text.

Example Code

To set up an image lookup, you just need to call game.createImageLookup() with a list of image IDs and URLs. In this example, we're setting up three different kinds of images in one table. You can, if you prefer, organize different sets of images into multiple game.createImageLookup() calls.

MyGame.createImageLookup({
  images: [

    // we're using this first set as room images
    {
      id: "playground",
      src: "images/background_playground01.jpg",
    },
    {
      id: "sittingroom",
      src: "images/background_sittingroom03.jpg",
    },
    {
      id: "library",
      src: "images/background_library03.jpg",
    },
    {
      id: "foyer",
      src: "images/background_foyer03.jpg",
    },

    // 
    { id: "candle", src: "images/candle.jpg" },
    {
      id: "brasskey",
      src: "images/icon_brass-key.png",
    },
    { id: "hairpin", src: "images/icon_hairpin.png" },
    { id: "ann", src: "images/icon_raggedy-ann.png" },
    {
      id: "andy",
      src: "images/icon_raggedy-andy-alt.png",
    },
    {
      id: "bluekey",
      src: "images/icon_blue-steel-key.png",
    },
    {
      id: "drawing",
      src: "images/icon_drawing-alt.png",
    },
    {
      id: "silverkey",
      src: "images/icon_silver-key.png",
    },

    {
      id: "lantern",
      src: "images/icon_brass-lantern.png",
    },
    { id: "knapsack", src: "images/icon_knapsack.png" },

    // we're using these last ones as icons in a verb widget
    { id: "look", src: "images/icon_look.png" },
    { id: "listen", src: "images/icon_listen.png" },
    { id: "smell", src: "images/icon_smell.png" },
    { id: "save", src: "images/icon_save.png" },
    { id: "restore", src: "images/icon_restore.png" },
  ],
});

There are two different ways to use an image lookup ID. They can be set to appear in widget lists, or printed inline.

MyGame.createAsset({
  class: "Candle",
  name: "occult candle",

  // On this line we're assigning an image ID 
  // to this asset for use in widget lists.
  image: "candle",
  
  // In this text, we're using [image] as a placeholder,
  // which will show the image when it prints to the output window
  // When we use an ID as a placeholder, it doesn't matter 
  // whether the image is assigned to this asset. 
  description: "{ [image] candle }<br>It's an occult looking candle. ",
});

Image URLs

When setting up a project, it's assumed that your images will be somewhere inside the same folder as your game file, though they may be nested inside of another folder. The file path to your images will be relative to the HTML game file. Your game folder should look something like this:

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

External URLs

You can store your images on an external web server if you prefer. This generally should work, as images are allowed to be loaded cross-origin. It is possible, depending on the settings of the two locations, that you might run into a CORS (cross-origin resource sharing) error. If you see that kind of error, just be aware that it's beyond the scope of support that we can offer. If you're loading images cross-site, we'll just assume that you know what you're doing and leave you to it.