Images - ThePix/QuestJS GitHub Wiki

There are two ways to show images, either as part of the text or in their own separate pane. You can readily do both in the same game.

In the text

This is the easy way. The images will get appended to the text, and will remain until the screen is cleared.

Just use the picture function. This takes the filename or URL, and optionally the width and height. If width is given, but not height, it will be shown proportionally. If the filename includes a slash, /, it will be used as is - and could be the URL of an image on another web site (though you may run afoul of the page security). Otherwise it will have the image folder name prepended.

picture('clock.png', 100)

In its own pane

The alternative is a specific part of the screen, a pane, dedicated to images. When you draw an image there, the previous image is removed.

The first step is to include the library. Paste this into your setting.js file:

settings.libraries.push('image-pane')

You can optionally add a settings.imageStyle to set up the pane how you want it.

settings.imageStyle = {
  right:'0',
  top:'400px',
  width:'400px',
  height:'400px',
  'background-color':'#ddd', 
  border:'3px black solid',
}

Once the pane is set up, you can draw images to it just as you would in the text, but using the image function instead.

image('clock.png', 100)

Dynamic images

You can create images dynamically using SVG and the draw command. SVG is a large and complex topic, but there is a quick guide here that will start you off. In essence you create a string that is a list of instructions describing - in a very specific way - what you want to be drawn.

The draw function expects to be passed the width and height of the image to draw, followed by an array of SVG shapes. This example creates an array with some data, and then uses that data to create the SVG strings that define the desired circles.

  const circles = [
    {x:50, y:60, size:40, colour:'yellow'},
    {x:40, y:40, size:30, colour:'blue'},
    {x:20, y:50, size:20, colour:'red'},
  ]
  const svg = []
  for (const el of circles) {
    svg.push('<circle cx="' + el.x + '" cy="' + el.y + '" r="' + (el.size) + '" fill="' + el.colour + '" stroke="none"/>')
  }
  draw(100, 100, svg)

You can add a fourth parameter to draw, a dictionary of options. this can include "x" and "y" to offset the image to these coordinates, "background" to give a background colour, and "destination".

Use destination to send the image to a specific HTML element on the page. For example, to put the SVG image in the image window, the last line above should be modified:

  draw(100, 100, svg, {destination:'quest-image'})