LogInDoctor Popular discusses the advantages of creating 2D art with the help of Marmoset’s solution.
An artist, musician and game designer from San Francisco Doc Pop talked about animated 2D art created with the help of Marmoset Hexels.
Introduction
My name is Doc Pop and I’m an artist, musician and game designer in San Francisco. I’ve been working in game design for 8 years and have shipped 3 mobile games; The Mighty Decider (with the Mighty Boosh), Knifetank: The Hauntening, and SquirrelWarz. I was the lead designer on these projects, but also worked on the soundtracks and some art for each title.
2D Content
If you look at all my previous games, you can tell that I’ve always loved working with a very hand drawn aesthetic. For The Mighty Decider and SquirrelWarz we were actually painting with cheap watercolor paints on small index cards, to get a very organic look. When done right, pixel art can be great, but I never had any interest in working in a pixel-art style until I stumbled upon Hexels.
Working with Hexels
I’m pretty sure I found some neat piece on Tumblr that said “Made In Hexels” and decided to try it out. I tried making some pixel art in Photoshop before and thought the experience sucked, so I figured this would at least be better than that. It was the trixel mode that really stood out to me though, I knew that’s what I really wanted to poke my head around in first.
General Workflow
I usually start with a very small and simple sketch, then jump into Hexels Pro and get started in their trixels mode. There’s a template I use to start most new projects that is simply called “Trixels” and has a 48×48 grid. I then shrink the grid down to a much smaller size, like 10×10 and start working out my image there using just a few distinctly different colors that I’ll end up switching later. I know I’m going to go into higher detail later, but I really like to start in a very “low-resolution” kind of mindsight. If I can make a dope image there, then I know it’s going to look good later. Once I have the basic shapes and a simple layout, I then start working on a simple color palette. I have a few palettes I know and love, so I’ll often just import one of those and start filling in the colors on my basic design.
Once I’m happy with the basic image, I’ll double my resolution by clicking Run Script>Subdivide Trixels. This basically doubles the resolution of your image, so a previous trixel is now made of up 4 trixels. From here I’ll add more details, like finer lines, shadows, or gradients, then I might do one (or sometimes two) more subdivide trixels actions before a piece is finished. The nice thing about this technique is that you can get something that feels very uniform consistent, while getting details and little touches that make it pop.
The Trixels mode in Hexels has several different options too. The basic brush is just a full trixel, but you can divide those up into shards, which make up one trixel. Shards are nice for adding details, but I really try to restrain myself to the full trixel brush as much as possible. It’s sort of like if somebody was creating a pixel art piece but had a few shapes that were off that grid basic grid (like a rounded edge or slanted line). So, shards are used sparingly in my pieces.
The final step for most of my trixel art pieces is to export at a high resolution, then open it in photoshop and add some texture on top. For some reason, I like my trixle art to have a little bit of wood or paper grain onto it, rather than just appearing to be a flat digital image.
Restrictions
To be honest, the restrictions of working within trixels are what make it so fun. They keep adding more and more features, which I appreciate, but I have to so it makes my job just a little bit harder sometimes because I have to avoid the temptation to integrate new modes (like the “blob” mode) which may not be consistent with my previous art. They have layers, animation frames, and lots of export options, that’s just about all I need.
Animation
Hexels is the first tool I’ve ever used animation, but it seemed to have just about everything I needed. Before I’d start animating, I’d usually start building the scene (as described above) until I’m happy with the image and color palette. I tend to work on layers already, so I’ll probably have each object in the scene sitting on it’s own layer. Once it’s time to animate, I’m usually only working on a few pieces and leaving the rest of the scene alone, so all I have to do is create some key frames for each of those layers, and leave everything else untouched.
Game Production
I’m a huge Hexels Pro fan now, especially for that trixel art mode. I’ve used it for 2D fliers, short animated gifs, and album art, but most recently it’s been my main tool for our upcoming Sweet Rides game for iOS. All of the art for Sweet Ride is being created with trixel art from Hexels, and it’s working out great so far. Most of the pieces in the game, like the hoverboard you ride on, are made of flat 2D art, but I’m also using trixel art as the texture map for 3D surfaces. Lately I’ve been been taking 3D assets from the Unity store and laboriously redoing the texture maps in a trixel style. The end result mixes really well with the 2D art.
More of my gif art (trixel, glitch, experimental, and more) can be found on my Giphy page.