Recreating the First Pixel Art Tutorial
BACKGROUND
I found it in a thrift store in Guelph, Ontario. The price tag says $4.99, but I received an additional discount for some reason. It was The Animator, a circa 1986 toy produced by Ohio Art and distributed in Canada by Irwin Toy, complete in the box (batteries not included). On said box is a frame-by-frame drawing of a figure running and jumping over a track-and-field hurdle with the caption “Bring Your Drawings to Life” and a bullet point on the side claiming that its “Powerful Computer Memory Puts the Magic of Animation into Your Hands”. In today’s parlance The Animator is a pixel art editor, though Ohio Art never used that term either on the packaging or in the instruction booklet.
The word “pixel” is a portmanteau of “picture” and “element”, however its exact origins are unclear, and the concept of a “picture element” predates the digital computer itself. Though pixel art has existed since the early 1970’s the term was first coined by Adele Goldberg and Robert Flegal in 1982, yet only attained common usage in videogame magazines in the early 90’s, with “sprite” and “sprite editor” used prior to then. The Animator wasn’t the first commercially available raster graphics editor — being predated by MacPaint in 1984 and Paintbrush (later MS Paint) in 1985— however its namesake animation ability sets it apart in pixel art history.
The Animator was copyrighted the same year that another grey and red piece of consumer electronics was released, the Nintendo Entertainment System. The NES — as distinct from the Japanese Famicom — forwarded the iconography of pixel art by featuring representations of in-game sprites on its games’ box art, where earlier cartridges and arcade cabinets were more likely to feature artistic reinterpretations to attract players, with Atari being particular to motion-conveying multi-coloured bands that were a staple of 1970’s graphic design. Even in retrospect videogames from the late 70’s and early 80’s are commonly associated with the glowing neon of Tron (1982) — a film which was more interested in pioneering 3D CGI than conventional videogame pixel art (though its iconic Recognizer ships do vaguely resemble Space Invaders (1978)). Yet it is the presence of the monolithic grid which binds the competing vector and raster aesthetics, systematizing the haziness of the CRT screen into a re-sharpened collective memory.
Many have compared pixel art to earlier analog artforms such as mosaic and pointillism (even The Animator commercial above makes an illusion to De Stijl of Piet Mondrian), while others claim it’s more akin to various forms of fiber art such as beadwork, cross-stitching and the dot matrix of the Jacquard loom. Most relevant to The Animator are pre-existing toys such as Lite-Brite from 1967 and the Etch A Sketch from 1960, the latter of which was Ohio Art’s flagship product. In fact, The Animator was branded as an offshoot of the Etch A Sketch in the United States.
Ohio Art was founded in 1908 as a metalworking company that made picture frames and other novelties, expanding into lithographic prints and eventually toy manufacturing in the following decade. In the late 1950’s Ohio Art partnered with French inventor André Cassagnes to develop and mass produce his “L’Écran Magique” (Magic Screen) or “Telecran” drawing mechanism, which became the Etch A Sketch. In 2016 the rights to the Etch A Sketch were sold to Spin Master — best known for Hatchimals, Bakugan and PAW Patrol — based out of Toronto, Canada, the former home of Irwin Toy (who were incidentally the Canadian distributor for Atari and Sega products in the late 20th century).
In 1988 Ohio Art released a follow-up animation device — The Etch A Sketch Animator 2000 — which featured expanded memory, a higher resolution screen, a clamshell form factor, a touchpad and the ability to play dedicated game cartridges of which there were four, making it the first portable game console with capacitive sensing predating the Nintendo DS in 2004 and Tiger Electronics Game.com in 1997. In recent years Hong Kong electronics company Divoom has gotten into the pixel art business, with a product range that includes portable speakers, backpacks and standalone pixel displays as well as homages to past toys like Tamagotchi in the Timoo and The Animator in the Pixel Factory, which innovates on the design by adding colour and touchscreen drawing capabilities.
However, the thing that’s captured my imagination is not The Animator itself, but something which was included with it: the instruction booklet which contains what I believe is the first ever mass-produced pixel art tutorial. Within the booklet are 13 example animations of increasing complexity and a short description for each. Unfortunately there are no credits within the booklet itself. By cross referencing with an eBay listing I determined that the booklet artist wasn’t associated with Irwin Toy, and so I contacted Ohio Art, but never heard back. So for the time being the artist shall remain unknown.
PROCESS
I considered multiple processes by which I might recreate The Animator’s pixel art tutorial. The first and most obvious would be to use The Animator itself and then film the result as shown in its commercials. This however seemed arduous, and I genuinely wonder how many did so even back in the mid-80’s without ease of access to more efficient pixel art programs. Next I considered simply adapting the pixel art via GraphicsGale, an editor I’m familiar with. I also thought about scanning the booklet then stitching together the images into GIFs using PhotoShop. However upon closer examination I found that the pixel art animations described in the booklet were not always linear strings of sprites, but complex sequences which went back and forth between different images. Thus I decided my final approach would be my one and only attempt at recreation, to avoid an unnecessary reproduction of my own labour.
Early on in the ideation stage of the project something about the default blue and white of The Animator tutorial reminded me of Bitsy, a simple web-based game engine by Adam LeDoux first released in 2016. From there I had the idea of creating a virtual gallery to display each animation. My first thought was to have each animation take up one screen/room, with each tile representing a pixel. I soon realized that this approach wouldn’t work within Bitsy’s constraints, and it would make more sense to have the animations contained within 8x8 sprites. The effective resolution of The Animator is 40x30 pixels, which translates to a manageable 5x4 tiles, with 1 pixel of “bleed” at the top and bottom.
I started to familiarize myself with Bitsy by laying out the structure of the gallery. Including space for the visitor to walk around, each room is able to house up to four animations which I marked out with tiles representing empty picture frames (these are not visible in the final gallery but are still present as barriers to prevent walking on the artwork). Within the instruction booklet the example animations are split into three “levels” of difficulty, which is an interesting allusion to videogame nomenclature that isn’t necessarily present otherwise, save for The Spaceship Invader animation. My initial idea was to have each level represented by a floor within the gallery, however this would have been an inefficient use of space.
Ultimately I decided upon a simple circuit of four rooms connected by doorways and staircases that are intended to be moved through counterclockwise. Animations are laid out in a serpentine pattern in the order they appear within the booklet based on the presumed point of entry, and are accompanied with the typical gallery placard. The first placard the visitor encounters gives the name of the gallery and a brief description, with the use of Bitsy’s “wavy” text effect being a reference to the similarly animated startup text of The Animator, which is stylized as such even in the booklet. My title, The Animator Is Not Present, is of course a reference to Marina Abramović’s The Artist Is Present, as well as Pippin Barr’s Flash game “remake”.
Next I began on the pixel art animations themselves by scanning each page of the booklet then assembling each sprite into PhotoShop layers and aligning them together relative to an 8x8 grid. I then created a master document which included each animation’s name, number of sprites/frames, an ASCII grid representing which tiles were blank, static (O) or animated (X), and the frame order if the animation wasn’t straight-ahead. I began with the two-frame animations since Bitsy’s sprite editor only allows for that many frames by default, however larger animations can be done by copying and pasting additional frames into the game data, and so for every other animation I used Spritesy by pansandpots. Initially I found using Spritesy difficult since it used Bitsy’s default of light-on-dark which I had reversed to match the blue-on-white of the majority of the animations, however I realized I could compensate for this by simply inverting the source images within PhotoShop.
For simpler animations dividing the picture plane up into 8x8 chunks was very conducive to animation as it allowed me to not get distracted by the gestalt of the image. However for the more complex sequences once I had the sprites for each logged in a text file, I had to do the rest of the “animating” according to the frame order via copy-pasting in Notepad, which was very tedious. One thing to note is how some animations appear to have “missing” pixels in the bottom left corner, however this is not an error but rather a limitation of The Animator’s native UI. A few animations like The Birthday Cake, The Face and Baseball do appear to have inconsistencies such as stray pixels which are preserved in my recreation. I also made no attempt to alter the default framerate of Bitsy; The Animator itself runs at three variable speeds, so in my opinion the integrity of the animations is fully intact.
The most technical animations in the collection — The Cat and The Horse — were actually created by tracing photographs, putting them in the tradition of the motion studies of Eadweard Muybridge, however the pièce de résistance of the gallery and my personal favourite animation is The Breakdancing Skeleton which is the longest sequence at 72 frames. Skeletons have a storied history within classical animation, being the subject of Disney’s 1929 Silly Symphony short film The Skeleton Dance. They also have personal resonance for me, as one of my first ever game projects was contributing a skeleton sprite to Noyb’s microgame Dot Dot Dot in 2010, which was later re-released as … (Trembling Dots) in 2014. As per TIGsource forum user request I also created animations of a skeleton surfing and “ghost riding the whip”, but these were not used by anybody and have been mostly lost to time, though they do predate skeletons becoming a Tumblr meme by about four years.
The final Animator gallery, which is also a submission to Critical Distance’s Bitsy Essay Jam, can be visited on itch.io.
