Create Sprite Sheet Animations in Hexels
Events
Subscribe:  iCal  |  Google Calendar
Milwaukee US   17, Jun — 22, Jun
New York US   17, Jun — 20, Jun
St. Petersburg RU   19, Jun — 21, Jun
TBA BR   22, Jun — 24, Jun
Amsterdam NL   25, Jun — 28, Jun
Latest comments
by Charlotte Delannoy
3 hours ago

Thanks a lot ! Did you give some masterclass of something ?

How is the Clovers sit on top between tiles? for mine, blend modes doesnt seem to be working... they follow the height of the tiles which results in extreme distortion of clovers following the height changes of tiles

by Gary Sanchez
7 hours ago

I really liked Cris Tales, its a Colombian game, i really like it how it looks, its like a old JRPG with a unique graphic style: https://www.youtube.com/watch?v=EXAUWjhqeKg

Create Sprite Sheet Animations in Hexels
16 January, 2018
News

This simple guide by Mark Knight will show you how to create sprite sheet assets in Hexels for use in video game development.

A sprite sheet is a sequence of images combined into a single image file. When the animation is activated, it plays frame by frame like a flip-book animation. Sprite sheets are typically used for characters and effects for 2D side-scrollers.

For this example, I used the vector based Squares template for a chunky, retro pixelated look.

I used the standard Brush tool (B) on a new layer to paint my character, Lunar Joe.

To create a sprite sheet animation, switch from Layers view to Timeline mode. I’ve created a new frame for each image and drew the character differently according to the animation cycle. There’s a temporary reference layer for where my character’s foot position would be in relation to the floor.

Before exporting my spritesheet, I toggled the “line” reference layer visibility off and made sure to tick the Transparent box in the Document tab to make my background transparent.

I cropped the export area using the Frame tool (F). Game Engines require a 1:1 aspect ratio for sprite images, so make sure your frame height and width are the same.

To export, go to File>Export (Ctrl+E) and select “Spritesheet” from the Animation export window. Notice there is an option to increase rows.

This is my exported sprite sheet with the Rows option set to 1.

Multiple animations can be exported in a single sprite sheet. The example above shows 25 cels exported with Rows set to 5.

To wrap it up, I made an animated scrolling background in Hexels.

Hexels makes it very easy for artists and designers to create sprite sheets for video game development. Try making your own with the free 14 day trial and learn more about Hexels.

Source: Marmoset

Leave a Reply

avatar