Glimmr Canvas-Based Drawing

version 2/101030 by Erik Temple

  • Home page
  • Beginning
  • Next



  • Documentation


    Chapter: Concepts

    Glimmr Canvas-Based Drawing (GCBD) takes an object-oriented approach to drawing in graphics windows. The central concept is the "canvas" (called the "g-canvas" to avoid namespace conflicts). A canvas is similar to the HTML5 <canvas> element: it is a defined area within which graphic elements of various sorts can be displayed. The canvas is basically nothing more than a coordinate system, a blank page which is given certain dimensions. To display a canvas, we assign it to a graphics window (created using the Flexible Windows extension). When the window is opened, the composition we have defined will be displayed, and the canvas--along with all of the graphic elements displayed in it--will automatically be scaled to fit in the window.

    The graphic elements displayed in the canvas are called "g-elements" (again, to avoid namespace clashes with your code or with other extensions). These are declared as individual objects. GCBD provides four basic types of element:

        sprite - displays an image from a file (a "figure" in Inform's terminology).
        primitive - a simple shape such as a filled rectangle, an outlined box, or an arbitrary line.
        bitmap - a complex element declared by specifying a grid of on/off or colored "bits"; similar to programming an LED sign.
        image-map - a complex element declared by specifying a grid of image tiles.
        rendered string - a complex element in which either image files or bitmaps are used to render arbitrary text strings.

    The element types are discussed in more detail below. Authors can also create their own g-element types if desired; some examples are given in this documentation.

    Elements are assigned to a canvas, and they can also be set either active or inactive; inactive elements will not be displayed. They can also be scaled relative to the canvas and given z-values (called "display-layer") to control the way in which objects overlap each other. If we include the Glimmr Graphic Hyperlinks extension, elements can also be made to respond in various ways to mouse input from the player.