Using Images:Inline Images

Images can be printed inline in any text block, using image lookups or HTML img tags.

// InlineImages.js
/* global AdventureJS A Game */

var InlineImages = new AdventureJS.Game(
  "InlineImages",
  "InlineImagesContainer"
);

InlineImages.settings.set({
  display: "inline",
  title: "Inline Images",
  author: "Ivan Cockrum",
  description: "Here is an example of using inline images. ",
  version: "0.0.1",
});

InlineImages.createImageLookup({
  images: [
    { id: "chocolate", src: "images/chocolate-cake.png" },
    { id: "cinnamon", src: "images/cinnamon-roll.png" },
    { id: "cookie", src: "images/cookie.png" },
    { id: "croissant", src: "images/croissant.png" },
    { id: "cupcake", src: "images/cupcake.png" },
    { id: "doughnut", src: "images/doughnut.png" },
    { id: "pretzel", src: "images/pretzel.png" },
    { id: "tiramisu", src: "images/tiramisu.png" },
  ],
});

InlineImages.createAsset({
  class: "Player",
  name: "Explorer",
  place: { in: "Bakery" },
});

InlineImages.createAsset({
  class: "Room",
  name: "Bakery",
  description: `Welcome to the Bakery. Try examining the pastries. All of the pastry images have been loaded into an image lookup. By contrast, the bakery cat uses an &lt;img&gt; tag inside HTML in a text block. `,
  exits: {},
});

InlineImages.createAsset({
  class: "Edible",
  name: "chocolate cake",
  image: "chocolate",
  place: { in: "Bakery" },
  description: `{ [image] chocolate }<br/>Mmm, yummy chocolate cake. `,
});

InlineImages.createAsset({
  class: "Edible",
  name: "cinnamon roll",
  image: "cinnamon",
  place: { in: "Bakery" },
  description: `{ [image] cinnamon }<br/>You got to roll with it, baby. `,
});

InlineImages.createAsset({
  class: "Edible",
  name: "chocolate chip cookie",
  image: "cookie",
  place: { in: "Bakery" },
  description: `{ [image] cookie }<br/>That's how it crumbles. `,
});

InlineImages.createAsset({
  class: "Edible",
  name: "croissant",
  image: "croissant",
  place: { in: "Bakery" },
  description: `{ [image] croissant }<br/>Crisp and flakey. `,
});

InlineImages.createAsset({
  class: "Edible",
  name: "cupcake",
  image: "cupcake",
  place: { in: "Bakery" },
  description: `{ [image] cupcake }<br/>It's mah berfday! It's mah berfday! `,
});

InlineImages.createAsset({
  class: "Edible",
  name: "doughnut",
  image: "doughnut",
  place: { in: "Bakery" },
  description: `{ [image] doughnut }<br/>Yay, sprinkles! `,
});

InlineImages.createAsset({
  class: "Edible",
  name: "pretzel",
  image: "pretzel",
  place: { in: "Bakery" },
  description: `{ [image] pretzel }<br/>It looks soft and chewy. `,
});

InlineImages.createAsset({
  class: "Edible",
  name: "tiramisu",
  image: "tiramisu",
  place: { in: "Bakery" },
  description: `{ [image] tiramisu }<br/>It looks ultra creamy. `,
});

InlineImages.createAsset({
  class: "NPC",
  name: "bakery cat",
  pronouns: "nonhuman",
  gender: "male",
  place: { in: "Bakery" },
  description: `<img src="images/cat.png"/><br/>Kitty! `,
});

Demo Source files

Right-click and choose "Save as..." to download source files.

InlineImages.zip

index.html

Notes:

Demo games are set to a small size to fit doc pages. They can easily be enlarged via display settings.
Demo games all use the same theme. Colors and fonts can be changed via custom CSS.
Demo games don't include the core AdventureJS code. To run downloaded games locally, you'll need to also download copies of the core JS and CSS and set up this local folder structure.

AdventureJS
└── js
|   └── adventure.min.js
└── css
|   └── adventurejs.min.css
└── games
    ├── demogame01
    ├── demogame02
    └── demogame03

Example Code

To place images inline in text, you can create an image lookup and then use image IDs as placeholders anywhere. In this example we're defining an image for candle and then using that ID in a placeholder.

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

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

  // In this text, we're using [image] as a placeholder,
  // which will show the image when it prints to the output window
  description: "{ [image] candle }<br>It's an occult looking candle. ",
});

HTML markup

It is also possible to print inline images without using an image lookup, by using plain HTML markup. HTML markup is supported in most places in AdventureJS. You'll find that it's less concise than using a lookup, but there's nothing wrong with doing it this way.

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

  // In this text, we're using plain HTML with an  tag 
  // to print an image inline.
  description: "<img src="images/candle.jpg"/><br>It's an occult looking candle. ",
});