GDC Logo

Postmortem: Playdate shoot-em-up Hyper Meteor

Posted on

When the Playdate was introduced, I used to be instantly charmed by the lovable yellow handheld, intrigued by the distinctive black and white show, and excited concerning the crank opening up all kinds of inventive prospects.

However there was one thing technically thrilling about Playdate as nicely. Fashionable platforms are simpler than each to develop for, however all of them have the identical boring CPU/GPU structure. Not because the days of Nintendo’s Gameboy and DS has a console requested us to design our video games and construction our code across the particular quirks and constraints of their {hardware}. The concept of ​​writing code for the Playdate was simply as thrilling to me because the inventive facets.

Vertex Pop created Hyper Meteor for Playdate, as a part of its first season of video games. Hyper Meteor is an arcade shoot-em-up the place you assault waves of meteors and hostile forces by ramming your ship into them. Technically, we wished to have our cake and eat it too: a silky easy framerate all through was vital, however so was throwing plenty of enemies on display without delay.

This text serves as each a information to creating for Playdate, in addition to a technical postmortem detailing how we achieved our targets for Hyper Metar.

Listed here are the notable {hardware} specs for the Playdate:

  • 180 MHz ARM CPU (with FPU)
  • 16 MB RAM
  • 400×240 1-bit show

Once we began improvement, I did not have a great sense of how highly effective the machine was. On paper 180 MHz sounded fairly gradual, and when was the final time you measured RAM in megabytes? It was onerous to know what the numbers meant tangibly, particularly with out current video games to reference, so we designed and scoped conservatively.

Nonetheless, we shortly discovered that the Playdate was much more highly effective than it appeared. With a little bit of adjustment to our improvement course of, we have been in a position to obtain our inventive targets with room to spare.

Selecting a language

One of many first selections you may have to make is whether or not to jot down your sport’s code in Lua or C. The (glorious) SDK documentation strongly encourages utilizing Lua, however I opted to make use of C.

Lua is a simple language to get into. It is versatile and intuitive, and Panic supplies a beneficiant assortment of game-specific helper courses, together with performance for sprites, collision response, geometry, pathfinding, UI, and far more. Lua is certainly the quickest approach to get began on Playdate.

The draw back is that it is a gradual language on the whole, particularly because it’s rubbish collected. As your sport grows in complexity, efficiency will turn out to be a difficulty. Lua continues to be a terrific selection, simply anticipate to spend a while on optimization in case your sport grows in scope. The documentation has some nice suggestions!

I discovered Playdate’s C API to be elegant, highly effective, and gratifying to work with. But it surely’s extra “framework” than engine. The API exposes performance for enter, graphics, audio, file I/O, and so forth, however you are by yourself relating to gameplay code.

When you select to make use of C, you are actually writing “to the steel” and with nearly no system overhead from the Playdate OS, the CPU is blazingly quick. Despite the fact that Hyper Meteor is an intense sport, I by no means wanted to consider optimization.

For some individuals “writing all the pieces from scratch” is a dealbreaker, which is completely cheap. However for others it is a part of the enjoyable. I undoubtedly fall into the latter class, completely happy to code each a part of the sport, all the way in which all the way down to the vec2 struct. I additionally discovered writing C to be enjoyable and sort of liberating. When you’re acquainted with C++/C# you may modify fairly shortly.

GPU? What GPU?

Rendering on Playdate might be slightly totally different than you are used to. Playdate does not have a devoted GPU, or any {hardware} accelerated graphics in any respect. Every thing is carried out on the CPU.

Fortunately, the native drawing APIs are actually quick. Hyper Meteor attracts dozens of sprites, particles, background layers, UI, and so forth, and the Playdate does not break a sweat. Nonetheless, bitmap transformations (like scale and rotation) are simply not performant in real-time.

As luck would have it, amongst our high necessities for Hyper Meteor have been… plenty of rotated sprites. To realize this, we opted to pre-render every sprite at each required angle and easily load them in as bitmaps on launch.

Realizing this was going to be a vital a part of making the sport work in any respect, I invested time upfront into constructing a strong asset pipeline. Here is the way it works:

  • All of the artwork is vector-based, created utilizing Sketch, and exported as SVG recordsdata
  • Then, a script written in Processing hundreds every SVG file, rotates and rasterizes them (with anti-aliasing disabled), and applies post-processing results (corresponding to fill patterns and descriptions)
  • Lastly, these single-frame pictures are compiled into sprite sheets
Example sprite sheet from Hyper Meteor
Instance sprite sheet from Hyper Meteor

We find yourself loading over 3000 bitmaps on launch. Whereas that sounds fairly ridiculous, it is truly the right strategy for Playdate. The sport hundreds in only a few seconds and, since bitmaps are 2-bits-per-pixel, 16 MB of RAM is greater than a lot.

One caveat is that whereas Playdate can load pictures shortly, it is fairly gradual at querying recordsdata off the disk. To work round this, you should utilize BitmapTable s (Playdate’s time period for a sprite sheet) to pack a number of bitmaps right into a single file and cut back the variety of file lookups.

Lastly, for video games with much less demanding wants you can too render and cache the bitmaps at launch utilizing playdate->graphics->transformedBitmap on the expense of some further loading time.

Superior Graphics Results

Now that we have talked about bitmaps and pre-rendered graphics, it is price discussing Playdate’s extra superior graphics capabilities. Whereas I’d suggest doing the vast majority of your rendering utilizing bitmaps, these strategies are what actually make the Playdate aesthetic stand out.

The Geometry drawing features have unbelievable raster high quality, whereas additionally being fairly performant. They embody assist for drawing traces, triangles, rectangles, ellipses and arcs, with parameters for line width, and even finish cap types.

The geometry features additionally assist Fill Patterns, set by calling playdate- >graphics->setColorToPattern . It units the fill shade to an 8×8 bitmap sample, creating dithering results that look hanging on the Playdate’s show.

Mix modes do not actually make sense on a 1-bit show, however Playdate can carry out some enjoyable supply/vacation spot pixel manipulations. Bitmaps assist Draw Modesstarting from easy masks ( kDrawModeFillWhite ), to inverted colours
( kDrawModeInverted ) to binary operators ( kDrawModeXOR and kDrawModeNXOR ). Geometry might be drawn with the colour set to kColorXOR , which inverts the vacation spot pixel shade.

Lastly, each graphics operate features a Stencil parameter, which you should utilize to create masking results. Stencils are LCDBitmap s, similar to the display, so you should utilize all the identical drawing features to create your stencil. White pixels go, whereas black and clear pixels are discarded. As a result of all the pieces is completed on the CPU stencil utilization is fairly versatile, you need not fear about optimizing your render passes or something like that.

I spent a whole lot of time experimenting with these strategies over the course of Hyper Meteor’s improvement. Whereas I used to be tempted to go overboard, we ended up choosing a number of excessive affect moments (corresponding to smartbomb activation and participant demise) to make use of these results.

Conclusion

Creating Hyper Meteor was extremely rewarding from each a technical and artistic perspective. There’s simply one thing concerning the Playdate that invitations small scope video games and experimental design. I hope this text was useful, and evokes you to make your individual Playdate video games. I sit up for taking part in them!