Advanced graphics for Inform 7

Posts tagged ‘animation’

Kerkerkruip version 8 released!

Kerkerkruip 8 has been released.¬†If you don’t know Kerkerkruip, it was recently cited as one of the most important representatives of the roguelike genre of video games ūüôā This latest release brings new content, including five new rooms, new items, a new monster, new combat actions, and the addition of “blood magic” to Kerkerkruip’s dungeon.

Kerkerkruip 8 also marks the release of the new graphic/animation content that I’ve been working to bring to the game using Glimmr. Here’s a quick summary of the Glimmr stuff that’s now in Kerkerkruip!

 1. Minimovies

Before the animated titles appear, a silent animated narrative plays out. There are currently three of these, each 4 to 5 seconds long, and more will likely be added over time. Composed of typographic symbols, they depict–with a touch of humor–situations that can occur in Kerkerkruip, each one prefaced by the typed command that brings it about. Here is a less than successful > ATTACK against the swarm of daggers.



 2. Main title

Following the mini-movie, the game’s main title screen appears, highlighting a typographically constructed dagger (see other examples of such daggers¬†here). The main menu options appear as well, and for players who have not yet defeated any of Kerkerkruip’s monsters, the title is followed by a blinking instruction explaining how to begin a game.

Kerkerkruip's title screen, with main menu fading in behind it.

Kerkerkruip’s title screen, with main menu fading in around it.

3. Rogues Gallery

A player who has defeated some of the denizens of Kerkerkruip, on the other hand, can wait at the main menu for the Rogues Gallery to appear. This is a succession of trading-card like depictions of each monster defeated, along with stats that summarize the player’s history with that enemy (for more on the cards, see my¬†previous¬†posts).

The Rogues Gallery title

The Rogues Gallery title

Unfortunately, not all of the planned monster cards are completed. Placeholder cards mark the missing spots for now:

The Chain Golem

The Chain Golem

The placeholder card for the Jumping Bomb

The placeholder card for the Jumping Bomb

4. Map

Kerkerkruip is a game in which your strategy depends on navigating the spatial arrangement of your enemies. Who to attack when–and in what order–to be best prepared to take on the evil wizard Malygris? Kerkerkruip 8 adds an isometric map that I find very helpful in planning my path to victory.

Kerkerkruip's new isometric map

Kerkerkruip’s new isometric map

5. Information panels

The final feature I want to highlight doesn’t involve Glimmr or graphics per se. However, it does provide a visual organization of Kerkerkruip’s copious amounts of information. From your inventory of weapons and items to your character’s vital statistics, attributes & situational combat bonuses, to the powers you have absorbed from your enemies, the new information panels put it all at your fingertips. I’ve found that having combat information at the ready, in particular, has really changed the way I play the game.

Game screen with information panels

Game screen with information panels


I hope that you’ll try the new Kerkerkruip. You can download it here.

Demo: Animated Title Page

Download the demo game here. To play the demo, you will need the latest version of your favorite Glulx interpreter, such as Gargoyle, Windows Git, or Zoom (see links at right). Users of the Spatterlight interpreter are advised to upgrade to Gargoyle.

To date, the demos that I’ve released for Glimmr Canvas Animation have been either simple¬†visualizations, or have¬†gestured¬†at nonstandard¬†interfaces¬†that have not really been seen in parser IF before. Which naturally raises the question: what can animation do for the vast majority of text games–the ones that are just text? This new demo, Animated Title Page, is one answer to that question.

In recent years, there have been some developments in the way that IF games present themselves at start-up (and before), including the increased use of cover art, largely thanks to¬†Emily Short’s¬†cover art drive¬†from a couple of years back,¬†and the growing popularity of “title pages” (see, e.g. Make It Good, or Jon Ingold’s plug-and-play I7 extension). This Animated Title Page demo continues this trend. In contrast to most IF, which opens with nothing more than a couple of paragraphs of text and the famous blinking cursor, Animated Title Page suppresses the main text window in favor of a graphical presentation, showcasing the cover art along with a¬†list of basic options, such as starting a new game or continuing a saved one.

Title page for the demo

The demo reimagines the art for Deadline, using a noir-flavored photo by Flickr user emdot

The demo, which pretends to be the classic Infocom game Deadline,¬†also prefaces the title page with a fun and overly dramatic animated rendering of the original game’s marketing tagline: “A locked room. A dead man. And twelve hours to solve the murder.” This text rushes out at the player, making a whooshing soundas it rockets by. There are also fade-ins and fade-outs, animated button depresses, and other effects.

The original box art for Infocom's Deadline

The original box art for Infocom's Deadline (1982)

It is worth noting that, despite the dynamic animations, the demo is actually quite simple from the standpoint of art creation. The art consists entirely of rasterized slugs of type (made using the font Dirty Headline by S. John Ross of Cumberland Games), and of a single photo (sitting by emdot). These elements are animated together using commands provided by the Glimmr Canvas Animation extension. Similar designs  should be well within the capabilities of most authors. The source code for the demo is available at the link below, should you want to try to modify it for your own purposes.

The demo is substantially complete, but there are a few more refinements that could be implemented. It would be nice, for example, to be able to skip the animations entirely to fade in directly on the title screen; it’s probably a bit much to have to watch even 20 seconds or so of introductory animation every time that you open the game. More radically:¬†¬†Nearly all other modern games, from casual to triple-A, employ an automated system of save slots so that the player never has to interact directly with the filesystem to manage her saved games. Such a feature would be easy enough to build into a Glulx project, and of course save slots would be a natural fit for a graphic interface like the one presented here.

Download Animated Title Page, or the source code and assets. Comments welcome.

Glimmr Canvas Animation released

Glimmr Canvas Animation–previewed here, here, and here–has been released and is available for download at Google Code. (The extension can also be downloaded from the Inform site, though without the image assets needed to compile the examples.)

The "Scourge of the Vampyr" demo

What is Glimmr Canvas Animation? Glimmr Canvas Animation sits on top of¬†Glimmr Canvas-Based Drawing¬†and allows for graphic elements of any type to be animated. GCA is built on the concept of the¬†animation track. An animation track handles¬†one¬†kind of animation effect for one¬†graphic element, but tracks are stackable, so it’s possible build up quite complex animations. GCA allows for flipbook-style animation of sprites or background images, for dynamically scaling graphic elements, for (limited) fade-ins and fade-outs, and much more. All of these preset animation types can be invoked in just one or two lines of code, or tweaked and customized with as much additional logic as you like. GCA supports 15 different equations for the automated “easing/tweening” of animations to make them more natural or more interesting. The extension includes a robust debugging log, as well as a number example code demos (see screenshots in this post).

There have been a number of new features added to Glimmr Canvas Animation since it was first previewed. The most notable of these is the introduction of “virtual timers,” which allows multiple concurrent animations to run at different speeds. The beta version of GCA required all animations to run at the same speed, so this should allow for more flexibility.

I hope you’ll check out GCA!

Download Glimmr Canvas Animation

Screenshot of the "Eased Movements" demo. Movement simulated (poorly).

Animation Demo Series 3

Download the demo game here. To play the demo, you will need a Glulx interpreter, such as Gargoyle, Windows Git, or Zoom (see links at right). Users of the Spatterlight interpreter are advised to upgrade to Gargoyle.

For Scourge of the Vampyr, the third installment of the Glimmr Canvas Animation demo series, I’ve finally prepared an example where the connection to familiar IF game mechanics is clear. Unlike Demo 1 (a UI mockup), or Demo 2 (a visualizer for eased movement), Demo 3 shows us a graphical map of a familiar adventure terrain–the crypt of a vampire, to be precise–using animation to provide movement and effects. (more…)

Animation Demo Series 2

Note:¬†This post goes into a bit of detail about certain animation concepts. There’s even some math. I wouldn’t blame you if you just want to skip to the demo.

For this installment of the demo series, we delve deeper into the facilities that Glimmr Canvas Animation provides for dynamic tweening. Briefly, “tweening” is short for “in-betweening”. In traditional animation, animations were organized around key frames–the critical points in any sequence. These keyframes were drawn first, and then the “betweens” were filled in to connect those key moments smoothly; because they were less critical, they were often filled in by the lower ranks of the animation team. In computer animation, keyframes are defined by the user, and the tweening is done automatically by the software.

Glimmr Canvas Animation (GCA) is no different, though it doesn’t really use the concept of the keyframe. Where programs like Flash have a master timeline punctuated by user-defined keyframes, each GCA animation track can be thought of as a self-contained timeline separating two keyframes–the starting and ending points of that particular motion or effect. GCA builds sophisticated and customizable tweening into all of the preset animation types via the use of “easing” equations that interpolate movement between the starting and ending points. (more…)

Animation Demo Series 1

NOTE: The demo game file is a gblorb file. To play it, you will need a Glulx interpreter, such as Gargoyle, Windows Glulxe, or Zoom (see links at right). Gargoyle is expected to give the smoothest performance on all systems, but the most recent of any of these interpreters should do nicely.

Almost exactly four years ago, I released my first “work” in Inform 7, a pre-Glimmr extension to enable very simple and primitive animations.¬†Graphical Window Animation¬†hasn’t worked with any Inform build newer than 5Z71; with Glimmr well underway, I saw GWA–limited to just one graphics window and (effectively) one image–as a dead end and didn’t bother to continue maintaining it.

Instead, I set my eyes on eventually capping the Glimmr suite with a powerful animation library that would move well beyond the simple flip book approach taken by Graphical Window Animation. I dithered for a long while, thinking that before I put the extension together, I’d like to have a sophisticated system of virtual timers running behind it (Glulx has only a single timer, but you could theoretically track things in such a way as to imitate any number of separate timers firing events independently). I didn’t have a whole lot of interest in creating that system, though, so I just let things languish.

But¬†I’m happy to say that Glimmr animation’s moment has now arrived. (more…)