Advanced graphics for Inform 7

Archive for the ‘Tutorials’ Category

How-To: Make an Analog Clock with Sweep Second Hand using Glimmr

Image of clock face created by this how-toBuried in Glimmr Drawing Commands, the bedrock Glimmr extension responsible for drawing images directly to the screen, is a set of commands for drawing lines using an angle plus a distance. This allows us to, for example, specify a line by saying “draw a line 20 pixels long from (0,0) on a heading of 30°.” I personally haven’t made much of use of this feature; I just thought that it might be useful given the emphasis of IF on compass directions–north being 0°, east 90°, and so on–and decided to throw it in. Something else this kind of thing is good for, though, is clocks. Since I’ve been thinking a little bit about timed events in IF lately, I thought I’d throw together a quick demo of an an analog clock face with sweep second hand (that’s it above). Downloads:

Demo game file
Source code (extensively commented)

Glulx games don’t yet have access to the system clock (though this is in progress), but of course an analog clock in an IF game will most often need to show game time rather than real-world time. Inform 7 tracks game time very simply by default–1 turn equals 1 minute–but this can be customized, and there are extensions to help. This analog clock demo, though, doesn’t change anything in Inform’s default handling. Instead, it overlays real-time on top of game time; in other words, each turn takes one minute, unless you spend one minute thinking about, in which case 2 minutes will pass. This probably isn’t a solution that would be appropriate for most games, but it’s convenient for demonstration purposes! (more…)

Compass Rose / Exit Lister Tutorial

Note: In contrast to the earlier tutorial on the Basic Floorplan Toolkit, this tutorial is mostly code-based. It is intended for newcomers to Glimmr who have a basic level of familiarity with Inform 7. While the tutorial touches on the creation of graphics, no real detail is provided and the user’s familiarity with graphics software is assumed. You may want to download the source code, images, and design files before beginning. The images and design files are in the public domain and may be freely used or modified for use in any project; please let me know if you use them!

One of the most common, and most enduring, symbols of interactive fiction has been the compass rose. It provides the logo for the annual IFComp, the IF Archive, and even the loading progress graphic for the javascript Quixe interpreter. As a symbol, the compass rose suggests traditional IF’s focus on maps and exploration, but of course it also literally represents the medium’s standard means of navigating by means of compass direction. Over the last 10 or 15 years, games such as Arrival and Bronze have been exploiting the form of the compass rose to provide an exit lister–an at-a-glance display of the exits available from the player’s current location. For obvious reasons, most of these compass rose/exit listers have been text-based (see the mini-screenshot below), using characters arranged in a grid. But there have been graphical implementations as well, such as the one in Emily Short’s City of Secrets.

The text-based compass rose from Emily Short's BronzeThe text-based compass rose/exit lister from Emily Short’s Bronze. Red letters indicate that the player has not yet visited the room in that direction.

In this tutorial, we’ll be creating a hybrid compass rose and exit lister using Glimmr Canvas-Based Drawing. Here’s what our exit lister will do: It will show, on a compass rose, the directions available to the player from the current location, and it will also indicate (via a yellow halo or highlight) whether the room in a given direction has yet to be visited. For completeness, there will also be a supplementary rosette to handle the non-compass directions (up, down, in, and out). Finally, and because it requires virtually no additional effort, we will also allow the player to click on any valid exit on the compass to issue the appropriate movement command.

The complete compass rose

The end result of this tutorial, running in Gargoyle.


Basic Floorplan Toolkit Tutorial

The full Glimmr download package includes a compiled file, Basic Floorplan Toolkit.gblorb, that is intended to allow authors to produce floor plans for (indoor) interactive fiction games. The Basic Floorplan Toolkit is an instance of the Glimmr Canvas Editor that is preloaded with a set of images representing rooms, hallways, stairways, and doors. The floor plans that the Toolkit produces are based on the feelie maps Emily Short produced for her game Bronze. The design is quite simple, but it also gets us a good way beyond your purely functional box-and-line IF map. Here’s an example:

Floor plan for a portion of Emily Short's Bronze

Floor plan for a portion of Emily Short's Bronze. Room names expunged to avoid spoilers.

As with other instances of the Canvas Editor, you build your floor plan visually in Basic Floorplan Toolkit, and then export Inform 7 source code which, when pasted into your game, will recreate your composition. If you tweak a few things while setting up your plan, the map will be self-revealing, with each room appearing on the map only after the player has visited it. You can also set up a little Parcheesi piece to represent the player, and its movement through the map will be automated.

Detailed instructions for the use of the Canvas Editor can be found in that extension’s documentation. This tutorial is intended to allow interested folks to get into using the Basic Floorplan Toolkit with a minimum of background reading. You can download a game file (gblorb format) of the map we will be creating here.