Play it now!
Before I delve into the remainder of this blog, go “play” Invincible… Forever!
I was recently introduced to a neat tool called Hype by San Francisco developer Tumult. Hype is an HTML 5 Animator, a tool to help build fast, fluid animated web content without using a proprietary or expensive program like Adobe’s Flash.
The result can be exported directly to a web page, or exported as an HTML 5 widget to insert into Apple’s iBooks Author, creating an animated, interactive e-book.
The concept isn’t entirely original, and several other companies are currently developing similar solutions: Adobe Edge (preview), and Sencha Animator ($199). Tumult Hype sets itself apart by its simplicity, ease of use, and a very reasonable $49.99 price tag.
Because HTML 5 animations are very cross-platform friendly, and work on all modern browsers, as well as many mobile devices, they’re a future-proof solution for producing more dynamic content for web pages.
The Making Of “Invincible… Forever!”
To test out the capabilities of this app, I decided to put together an animated “game” with sprites from the game Super Mario Bros. Mario would be invincible, and run to the right infinitely, while enemies appear on the right, collied with him, and die.
For running Mario, I simply imported an animated .gif image. Mario would remain stationary in the center of the screen, and the ground would move underneath him to give the appearance of movement.
For the ground, I created a box, set its background to the brick image, and set the image to repeat. Now I could animate it!
I positioned the box at the start, on the left, hit “record”, moved the slider along the timeline, and dragged the box across the screen. Presto! Mario runs.
Now for the enemies, shrubs and cloud: Create .gif images, drag into scene. Position, record, position, done! Surprisingly simple and straightforward.
Despite the relative ease-of-use, I did run into a few minor issues that I feel limit the usefulness of Tumult Hype.
The animation was only half the work. Afterwards, I had to put together the simple web site, and add… sound? Hmm… yes it seems that Tumult Hype lacks any kind of support for sounds and/or music. The developer claims that HTML5 Audio is “lousy across browsers and devices” (source). To me, that seems like a lousy excuse. Within 10 minutes, and after a quick consultation to my CSS3 charts I had sound and music that works in most browsers.
Another thing I could find no mention of is a facility for creating custom, curved animation paths. When the enemies are hit by Mario, they go flying, and fall off the screen. If you hit something, it generally flies in a curved path, arcing upward before falling. This kind of effect is apparently impossible to create in Tumult Hype.
In the end result, it doesn’t seem too apparent that I had to use an angular path, but it would have been nice… you know?
Better Keyframe Positioning
It doesn’t seem like there’s an easy way to fine-tune keyframe positioning. If I highlight one or more keyframes, and use the arrow keys, it either nudges the object’s position (Arrgh!) or moves the playhead around, de-selecting the keyframes in the process. It’s tricky to get that kind of fine-grained control on such a small user-interface element using a trackpad.
If Tumult keeps working on Hype, then it’s definitely going to have a place in the toolkits of future web developers. It could be a real competitor to Flash, and many other, much more expensive, HTML5 animators.
As it stands, I’d recommend that anyone who develops on the web take a little bit of time and at least check out the demo. At the very least, you might have fun putting together some neat animations on the internet.