Making of: Getting to Know Hexels Intro
Subscribe:  iCal  |  Google Calendar
Las Vegas US   20, Feb — 23, Feb
Barcelona ES   26, Feb — 2, Mar
Barcelona ES   26, Feb — 2, Mar
Austin US   9, Mar — 19, Mar
San Francisco US   19, Mar — 24, Mar
Latest comments
by Vilaskis
3 hours ago

Thank you Richard. If I find some more ways to improvise for optimization, then I'll tell you definitely

by janelle
3 hours ago

would love to see the substance graph.

by Richard
5 hours ago

The visual shader system will be great for modular asset pack makers. You see some incredibly high quality modular asset packs on the Unreal store, whilst the ones for Unity are so-so, which I think is down to the ease of creating shaders on Unreal vs Unity. Alternatively you have to make your shaders in something like Uber Shader system which immediately splits your customer base.

Making of: Getting to Know Hexels Intro
6 December, 2017
Pixel Art

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.

Mark KnightMarmoset


Leave a Reply

Be the First to Comment!