Glimmr Canvas-Based Drawing

version 2/101030 by Erik Temple

  • Home page
  • Beginning
  • Previous
  • Next



  • Example: *** Basic Floorplan - Given IF's overwhelming focus on movement through physical space, one of the most likely uses for graphics is maps. At the same time, it is not often that we want to include a static map in the game, since getting the complete map all at once will usually spoil things for the player.

    This example shows how to construct a floorplan for a multilevel space, in a dynamic way: The map only shows rooms that the player has visited. In other words, the map reveals itself as the player moves through the game.

    Glimmr includes a set of images that can be used freely for constructing maps of this sort, and this example uses that set. The image files are rather generic, by design, to be useful in the widest number of situations. The predominant colors are white and dark gray, but because each tile is essentially monochromatic, the coloring is relatively easy to change using programs like Photoshop or GIMP (the latter is free).

    The easiest way to use this set of map images is with the Glimmr Canvas Editor extension, which allows you to create a Glulx game file that contains a graphics editor. Place and scale the images as you like them, and the editor will output I7 source code for you. The source code for this example was generated using Glimmr Canvas Editor. (It's been cleaned up slightly, and the Scenario and Associated Rooms with Images sections were added, but otherwise it is fairly representative of the code produced by that resource. The canvas editor is highly recommended for most complex compositions.)

    On to the code for the example. We begin by including the extension and defining the geography for the map. We have a couple of sprite elements that are asymmetrically scaled, so we use the asymmetrical scaling option. This will require us to provide separate x and y scaling factors for any object that is not scaled at a ratio of 1.0000.

    The scenario definition is followed by the list of figures. The list of figures should be one of the first things we lay out in our story file, because Inform is very picky about them--they must be defined before they can be mentioned in any other context.


        "Basic Floorplan"

        Include Glimmr Canvas-Based Drawing by Erik Temple.
        Include Glimmr Bitmap Font by Erik Temple.

        Use asymmetrical scaling.

        Chapter - Scenario

        Entrance Chamber is a room. "A stair spirals upward, and there is a doorway in the south wall."

        The heavy door is an open door. "[if the heavy door is open]The heavy wooden door is open.[otherwise]The heavy wooden door is closed.[end if]". It is south of Entrance Chamber and north of Hall.

        Guard Room is east of Hall. "An exit leads west."

        Up from Entrance Chamber is the Shaft. The description of the Shaft is "The stairs continue up and down, and there is an opening to the south."

        Watch Room is south of the Shaft. "You can return to the north."

        Up from Shaft is the Upper Chamber. The description of the Upper Chamber is "The stair spirals downward, and a curving passage leads south."

        Flanking Chamber is south of Upper Chamber. "The passage leads back to the west."

        North of Flanking Chamber is nowhere. West of Flanking Chamber is Upper Chamber. East of Upper Chamber is nowhere.
        
        [After printing the banner text:
            say "[paragraph break]This is an example of a dynamic map built using Glimmr Canvas-Based Drawing. It provides a floorplan that reveals itself as the player moves through it. Each room is revealed as the player enters it, and each floor is pictured in a separate pane. A spare icon acts as an avatar for the player, showing the present location in the developing map.[paragraph break]This example was built using the "Basic Floorplan Toolkit" distributed with Glimmr. The Basic Floorplan Toolkit is an instance of the Glimmr Canvas Editor, a GUI graphics editor that allows you to build a composition graphically and output I7 source code describing it. Basic Floorplan Toolkit includes a set of images designed for use in creating simple floorplans in the style of those used by Emily Short in her pdf map for [i]Bronze[/i] (chosen as a model because of the manifest popularity of the style).[paragraph break]".]
            

        Chapter - Figure Definitions

        Figure of Orthogonal Room Square is the file "Orthogonal Room Square.png".
        Figure of Orthogonal Room Horizontal is the file "Orthogonal Room Horizontal.png".
        Figure of Orthogonal Room Vertical is the file "Orthogonal Room Vertical.png".
        Figure of Orthogonal Room Round is the file "Orthogonal Room Round.png".
        Figure of Orthogonal Room Hexagonal is the file "Orthogonal Room Hexagonal.png".
        Figure of Orthogonal Hall Horizontal is the file "Orthogonal Hall Horizontal.png".
        Figure of Orthogonal Hall Vertical is the file "Orthogonal Hall Vertical.png".
        Figure of Orthogonal Hall NW to SE is the file "Orthogonal Hall NW to SE.png".
        Figure of Orthogonal Hall SW to NE is the file "Orthogonal Hall SW to NE.png".
        Figure of Orthogonal Long Hall NW to SE is the file "Orthogonal Long Hall NW to SE.png".
        Figure of Orthogonal Long Hall SW to NE is the file "Orthogonal Long Hall SW to NE.png".
        Figure of Orthogonal Curve N to E is the file "Orthogonal Curve N to E.png".
        Figure of Orthogonal Curve S to E is the file "Orthogonal Curve S to E.png".
        Figure of Orthogonal Curve W to N is the file "Orthogonal Curve W to N.png".
        Figure of Orthogonal Curve W to S is the file "Orthogonal Curve W to S.png".
        Figure of Rough Room Square 01 is the file "Rough Room Square 01.png".
        Figure of Rough Room Square 02 is the file "Rough Room Square 02.png".
        Figure of Rough Room Horizontal is the file "Rough Room Horizontal.png".
        Figure of Rough Room Vertical is the file "Rough Room Vertical.png".
        Figure of Rough Room Circular is the file "Rough Room Circular.png".
        Figure of Rough Hall Horizontal is the file "Rough Hall Horizontal.png".
        Figure of Rough Hall Vertical is the file "Rough Hall Vertical.png".
        Figure of Rough Hall NW to SE is the file "Rough Hall NW to SE.png".
        Figure of Rough Hall SW to NE is the file "Rough Hall SW to NE.png".
        Figure of Rough Long Hall Horizontal is the file "Rough Long Hall Horizontal.png".
        Figure of Rough Long Hall Vertical is the file "Rough Long Hall Vertical.png".
        Figure of Rough Long Hall NW to SE is the file "Rough Long Hall NW to SE.png".
        Figure of Rough Long Hall SW to NE is the file "Rough Long Hall SW to NE.png".
        Figure of Rough Curve N to E is the file "Rough Curve N to E.png".
        Figure of Rough Curve S to E is the file "Rough Curve S to E.png".
        Figure of Rough Curve W to N is the file "Rough Curve W to N.png".
        Figure of Rough Curve W to S is the file "Rough Curve W to S.png".
        Figure of Door Horizontal is the file "Door Horizontal.png".
        Figure of Door NE to SW is the file "Door NE to SW.png".
        Figure of Door NW to SE is the file "Door NW to SE.png".
        Figure of Door Vertical is the file "Door Vertical.png".
        Figure of Stair Circular is the file "Stair Circular.png".
        Figure of Stair Horizontal is the file "Stair Horizontal.png".
        Figure of Stair Vertical is the file "Stair Vertical.png".
        Figure of Occluder Square is the file "Occluder Square.png".
        Figure of Player Icon is the file "Player Icon.png".
        Figure of Player Icon Alternate is the file "Player Icon2.png".

    Next we define our graphics window and its accompanying canvas. For other examples, we will simply use the Glimmr Simple Graphics Window extension, but here we want to illustrate each step completely.

        Chapter - Graphics window

        The graphics-window is a graphics g-window spawned by the main-window. The position of the graphics-window is g-placeabove. The measurement of the graphics-window is 50. The back-colour of the graphics-window is g-black.

        The graphics-window canvas is a g-canvas. The canvas-width is 500. The canvas-height is 300. The associated canvas of the graphics-window is graphics-window canvas.

        When play begins:
            open up the graphics-window.


    The next block of code is short but crucial--it controls the revelation of the map, and also places the PC's avatar in the proper position on screen.

    Our set of sprites is designed so that multiple elements may be needed to make up a room; for example, our Entrance Chamber includes a squarish shape for the room outline, a short hallway, a spiral staircase, and a door. Each of these is a separate sprite, but we need them all to be "turned on" at the same time when the player enters that room for the first time.

    The way we do this is by assigning a room to each sprite, its "associated room" property. Whenever we need to update the displayed map, we repeat through the inactive (undisplayed) elements and, if the location matches its associated room, we mark that element as active.

    We then update the screen position of the player's avatar by looking up the location in the Table of Avatar Coordinates and using the x,y pair we find there.

        Chapter - Associating rooms with elements

        A g-element has a room called the associated room.

        The update map sprites rule is listed in the carry out looking rules.


        This is the update map sprites rule:
            repeat with current-element running through display-inactive g-elements:
                if the associated room of current-element is the location:
                    activate current-element;
            if there is a locale of the location in the Table of Avatar Coordinates:
                choose row with a locale of the location in the Table of Avatar Coordinates;
                change the origin of the PC avatar to the coord entry;
                activate PC avatar;
            follow the window-drawing rules for graphics-window.

    Next we divide the basic elements into sub-classes, such as rooms, movable objects, etc. This makes it easier to keep track of them. For ease of use, we define the elements using tables; this is less verbose than defining them in sentences.

        Section - Room-element sprites

        A room-element is a kind of sprite. The graphlink status of a room-element is g-inactive. The associated canvas of a room-element is graphics-window canvas.

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

        Table of Room-Element Elements
      room-element  origin  image-ID  display-layer  display status  x-scaling factor  y-scaling factor  associated room  
      Orthogonal_Room_Horizontal_1  {63, 89}  Figure of Orthogonal Room Horizontal  3  g-active  1.0000  1.0000  Entrance Chamber  
      Orthogonal_Room_Round_1  {87, 112}  Figure of Orthogonal Room Round  3  g-active  1.0000  1.0000  Entrance Chamber  
      Stair_Circular_1  {95, 121}  Figure of Stair Circular  4  g-active  0.7000  0.7000  Entrance Chamber  
      Orthogonal_Hall_Vertical_1  {68, 131}  Figure of Orthogonal Hall Vertical  3  g-active  1.0000  1.0000  Entrance Chamber  
      Orthogonal_Room_Vertical_1  {65, 149}  Figure of Orthogonal Room Vertical  3  g-inactive  0.4167  0.9722  Hall  
      Orthogonal_Room_Square_1  {96, 168}  Figure of Orthogonal Room Square  3  g-inactive  0.8000  0.8000  Guard Room  
      Orthogonal_Hall_Horizontal_1  {80, 182}  Figure of Orthogonal Hall Horizontal  3  g-inactive  1.0000  1.0000  Hall  
      Orthogonal_Room_Round_2  {232, 108}  Figure of Orthogonal Room Round  3  g-inactive  1.0000  1.0000  Shaft  
      Stair_Circular_2  {239, 116}  Figure of Stair Circular  4  g-inactive  0.7000  0.7000  Shaft  
      Orthogonal_Hall_Vertical_2  {250, 152}  Figure of Orthogonal Hall Vertical  3  g-inactive  1.0000  1.0000  Shaft  
      Orthogonal_Room_Horizontal_2  {208, 167}  Figure of Orthogonal Room Horizontal  3  g-inactive  1.0000  1.0000  Watch Room  
      Orthogonal_Room_Horizontal_1_copy  {363, 89}  Figure of Orthogonal Room Horizontal  3  g-inactive  1.0000  1.0000  Upper Chamber  
      Orthogonal_Room_Round_1_copy  {387, 112}  Figure of Orthogonal Room Round  3  g-inactive  1.0000  1.0000  Upper Chamber  
      Stair_Circular_1_copy  {395, 121}  Figure of Stair Circular  4  g-inactive  0.7000  0.7000  Upper Chamber  
      Door_Horizontal_1  {68, 141}  Figure of Door Horizontal  4  g-active  1.0000  1.0000  Entrance Chamber  
      Orthogonal_Curve_N_to_E_1  {362, 135}  Figure of Orthogonal Curve N to E  3  g-inactive  1.0556  1.3056  Upper Chamber  
      Orthogonal_Room_Square_2  {394, 165}  Figure of Orthogonal Room Square  3  g-inactive  0.7917  1.1250  Flanking Chamber  
      Orthogonal_Room_Square_3  {365, 188}  Figure of Orthogonal Room Square  3  g-inactive  0.6500  0.6500  Flanking Chamber  

        Section - Movable-element sprites

        A movable-element is a kind of sprite. The graphlink status of a movable-element is g-inactive. The associated canvas of a movable-element is graphics-window canvas.

        Some movable-elements are defined by the Table of Movable-element Elements.

        Table of Movable-Element Elements
      movable-element  origin  image-ID  display-layer  display status  x-scaling factor  y-scaling factor  associated room  
      PC Avatar  {69, 95}  Figure of Player Icon  5  g-active  0.4500  0.4500  Entrance Chamber  

    We have a couple of types of objects that are not sprites. Rectangle primitives are used as backdrops to each floor of the tower, and bitmap-rendered strings are used to label each level with a text legend. Because the map is simple, we can know which room to use to turn these features on, and we use the same system used for other shapes. With a more complex map, we would have to treat these regional entities separately.

        Section - Backcloth rectangle primitives

        A backcloth is a kind of rectangle primitive. The graphlink status of a backcloth is g-inactive. The associated canvas of a backcloth is graphics-window canvas.

        Some backcloths are defined by the Table of Backcloth Elements.

        Table of Backcloth Elements
      backcloth  origin  endpoint  tint  display status  associated room  
      Ground_level  {32, 57}  {169, 245}  g-dark-grey  g-active  Entrance Chamber  
      Shaft_level  {182, 57}  {319, 245}  g-dark-grey  g-inactive  Shaft  
      Upper_level  {332, 57}  {469, 245}  g-dark-grey  g-inactive  Upper Chamber  


        Section - Title-text bitmap-rendered strings

        A title-text is a kind of bitmap-rendered string. The graphlink status of a title-text is g-inactive. The associated canvas of a title-text is graphics-window canvas.

        Ground_level_1 is a title-text. The origin is {39, 63}. The text-string is "Ground level". The associated font is Glimmr C&C. Ground_level_1 is left-aligned. The tint is g-medium-grey. The background tint is g-placenullcol. The display-layer is 2. The associated room of Ground_level_1 is Entrance Chamber.

        Shaft_2 is a title-text. The origin is {189, 63}. The text-string is "Shaft". The associated font is Glimmr C&C. Shaft_2 is left-aligned. The tint is g-medium-grey. The background tint is g-placenullcol. The display-layer is 2. The display status of Shaft_2 is g-inactive. The associated room of Shaft_2 is Shaft.

        Upper_level_3 is a title-text. The origin is {341, 63}. The text-string is "Upper level". The associated font is Glimmr C&C. Upper_level_3 is left-aligned. The tint is g-medium-grey. The background tint is g-placenullcol. The display-layer is 2. The display status of Upper_level_3 is g-inactive. The associated room of Upper_level_3 is Upper Chamber.

    Finally, the table that converts the location to the coordinates that the player's avatar should have onscreen. (These were mapped using Glimmr Canvas Editor's "instances" feature.)

        Chapter - The Avatar's destinations

        Table of Avatar Coordinates
      locale  coord  
      Hall  {66, 173}  
      Guard Room  {105, 176}  
      Shaft  {238, 122}  
      Watch Room  {233, 180}  
      Upper Chamber  {373, 99}  
      Flanking Chamber  {395, 186}  
      Entrance Chamber  {71, 96}