Glimmr Canvas-Based Drawing

version 2/101030 by Erik Temple

  • Home page
  • Beginning
  • Previous
  • Next

  • Section: Create elements and assign them to the canvas

    Finally, we need to create some elements (called g-elements in Inform to avoid namespace issues) and assign these to our canvas.

    Elements are things, in Inform's sense of the term. The player cannot see or refer to them (they are given the "privately-named" and "scenery" properties by default), and we will generally create them off-stage, but authors can declare and manipulate them just like any other thing.

    Each type of element (sprite/image, primitive, bitmap, image-map, or text) needs to be declared with its own set of properties that define its behavior. This is generally a simple process; in fact, the Glimmr Canvas Editor extension allows you to arrange elements visually using a GUI interface and will output appropriate element definitions in I7 source code for you. Here is an example of definitions for a few different types of element:

        The Player Avatar is a sprite. The image-ID is Figure of Player. The origin is {10, 10}.

        The Violet Border is a rectangle primitive. The origin is {100, 100}. The endpoint is {200, 200}. The tint is g-Lavender.

        The Title Text is a bitmap-rendered string. The origin is {120, 110}. The text-string is "My Great Game: An Interactive Pile of Awesome". The font is Glimmr C&C. The tint is g-Red. The bit-size is 2.

    (Please see the guide below for an explanation of the properties of elements.)

    By the far the best way to define a set of g-elements is with a table. This is much briefer and is legible at a glance. (The Glimmr Canvas Editor can also output its source code in a tabular format.) Here is an example of such a table (Inform unfortunately scrambles formatting in documentation, so not all formatted examples will look right):

        Table of Room Elements
      sprite  origin  image-ID  display-layer  scaling factor  
      Orthogonal_Room_Horizontal_1  {63, 89}  Figure of Orthogonal Room Horizontal  3  1.0000  
      Orthogonal_Room_Round_1  {87, 112}  Figure of Orthogonal Room Round  3  1.0000  
      Stair_Circular_1  {95, 121}  Figure of Stair Circular  4  0.7000  
      Orthogonal_Hall_Vertical_1  {68, 131}  Figure of Orthogonal Hall Vertical  3  1.0000  

    Each g-element must be assigned to a canvas. If we have only one canvas, we can simply assign all elements to that canvas at a stroke (this is what the Glimmr Simple Graphics Window extension does):

        The associated canvas of a g-element is the graphics-canvas.

    If we have more than one canvas, we can assign each element individually:

        The Player Avatar is a sprite. The image-ID is Figure of Player. The origin is {10, 10}. The associated canvas is the graphics-canvas.

    In general, however, the best way to organize elements--especially when we have a lot of them--is to organize them using sub-kinds. We can then assign any property, including the associated canvas, using the appropriate sub-kind. For example, if we are making a map where each room has its own sprite (image element), we could do something like this:

        A room-sprite is a kind of a sprite. The associated canvas of a room-sprite is the map-canvas. The display-layer of a room-sprite is 2.

        Some room-sprites are defined by the Table of Room Elements.

    ...and now we can proceed to declare all of the room elements in a single table, and they will automatically be assigned to the appropriate canvas and display-layer.