Mark Knight gave a detailed breakdown of the complex animation he created in Hexels.
Mark Knight gave a detailed breakdown of the complex animation he created in Hexels.
I’m Mark Knight from Marmoset. For this Intro sequence I wanted to marry Hexels’ pixel and trixel layers together in a fun, dynamic way. The Idea was to show the potential for technical animation using layer ordering, transforms, tweening and keyframes.
For the first part of the intro, I wanted to reveal a ticking clockwork brain before moving on to the more elaborate movements. The cog animation is 6 frames in length and the cog art was duplicated and rotated multiple times to fill out the rest of the mechanism.
I drew an isometric cog face using a combination of pixel and trixel layers. Once I had drawn the cog face I duplicated and offset the image so that I had a width reference for drawing the outer edges of the cog’s teeth. I knew the cog consisted of 32 equal segments (teeth and spaces), which meant 11.25° of rotation was needed for every 6 frames. I created edge faces for roughly half of the cog as I knew the other half would be hidden by positioning of subsequent layers.
The above diagram shows all of the cog layers separated. Cog a is the original layer which from which all other cogs were based. Cog b is the original cog flipped horizontally and rescaled with a transform (t on keyboard). Cogs c were rotated 90°, duplicated and merged together into one layer. I reversed the order of the 6 animation frames for this layer as well. Cogs e have a slight pause to match up with the arm animation d. The pause was created by adding a gap in frames in the middle of the sequence. Pin d is a transformed pixel layer with a accelerate/decelerate tween applied.
Tweening allows for a variety of speed effects to be applied to keyframes.The highlighted tween (above) shows a movement that accelerates.
The layer called ‘getting to know’ bounces into view using transforms. The tweens applied to each frame, to achieve this effect, can be seen above.
Layer ordering has to be considered when having items appear inside/behind and transitioning to outside/in front. Because of the stacked nature of layers, sometimes visual tricks need to be employed. In this example (above) the pink arrow and ‘Getting to Know’ text would be visible inside the cog brain before it is lowered into view.
Hiding a layer until it needs to be visible, with the opacity slider, is often much simpler than trying to obscure untimely elements.
For the fan animation I duplicated trapezoid 1 (above) over 10 layers and positioned the transform pivot (+ symbol at centre of transform control) as shown above. The entire contents of a layer will rotate around the pivot point of that layer’s transform. This pivot point positioning was applied to each of the 10 fan layers and made animating a case of returning each trapezoid, via transforms, back to their original position 1.
Finally, the ball animation was achieved with transforms applied to a single pixel layer image. The diagram above show the movement path with transform layer keyframes represented by blue dots.
As the ball layer is above the background element layers a simple layer duplication trick was utilised to give the illusion of the ball falling into a shallow hole. The jaw layer of the monkey face was duplicated, to retain its animation properties, and all but the small trixel cube area was deleted (shown in path example). The duplicated and edited layer was now moved, via the layers tab, above the ball layer thus matching the background elements exactly and obscuring the metal balls final resting position.
Here is the final sequence.
Experimenting with transforms to create mechanical movements and physics was really fun and reminded me of the many hours spent tinkering with Little Big Planet’s Level editor. It’ll be great to see what creations (and contraptions?) users will come up after exploring the varied systems in Hexels 3.