made-in-hexels

You were not my first Doctor, but I love you like you were. You made millions of people smile. Including myself. The show won’t be the same without you, but I’m confident Peter will live up to the legacy that you and all the other Doctors have left behind. THANK YOU, MATT SMITH!

4

Did another few iconic world of warcraft weapons in Hexels! Threw in Frostmourne from the last time as well because I like things in even numbers.

Went for a heavy Burning Crusade inspiration this time - BC had all the glowy space weapons and if there is one thing hexels does well, its glowy stuff! Used the new halftone mode to add a bit of sparkle!

I hope you like them.

I am Trixeling so hard right now

For a while now, I have been inspired by etall’s Processing + Hexels tutorials for animating trixel based graphics procedurally - but I wanted to take a slightly different approach in how I implement mine. I’m not using Hexels Pro’s SVG export to get my data - I’m using its CSV export to get the data in a little bit more of a raw form.

The CSV output looks like this…

#Hexels CSV Export of star.hxl
#Size
16, 9
#Hexel data: (column), (row), (R), (G), (B), (A)
0, 0, 0, 0, 0, 0 <- here, I stripped a lot of empty lines like this
3, 5, 255, 0, 123, 255
4, 3, 255, 171, 0, 255
4, 5, 255, 0, 123, 255
5, 3, 255, 171, 0, 255
7, 1, 255, 0, 123, 255
7, 3, 255, 0, 123, 255
7, 4, 255, 0, 123, 255
7, 5, 255, 171, 0, 255
8, 2, 255, 0, 123, 255
8, 4, 255, 171, 0, 255
8, 6, 255, 171, 0, 255
9, 3, 255, 171, 0, 255
9, 4, 255, 0, 123, 255
10, 3, 255, 171, 0, 255
10, 5, 255, 0, 123, 255
11, 5, 255, 0, 123, 255

…and then I manually determine the position of, and render each triangle based on some maths. This also gives me the flexability to do a few additional fun things with the trixel data using more advanced animation techniques, so hopefully, I’ll be posting some GIFs using those tricks soon.

What’s up with all of the trixel fascination lately? Well, I also happen to be working with a few friends on developing a small comedy oriented video game about the future of humanity in space, and we’ve decided that all of the game’s artwork will be trixel-based. I needed to work out a conceptual understanding of the trixel rendering workflow in the simpler Processing environment before I implement the technique in the more complex Desktop Java2D and Android Canvas environments.

The Source Code for this GIF can be found in this Gist:

https://gist.github.com/AdmiralPotato/027b8134674909b3cbd0

The complete Processing Sketch folder with the CSV and HXL files can be found here:

sketch_140124a.zip

The multi-sampling motion blur code used in this GIF is again, based on the algorithm that Bees & Bombs shared with me a while ago.

5

So I’ve been messing around with part 3 of this little toy, adding trees. I’m hoping to give you a bit of control over the type of tree that grows on your island, with a few simple selections made before placement begins.

> Tree Genus - very simple, but here you will get to choose the species of tree (very VERY loosely) that will grow on your island.

> Season - I had a more complicated colour picking mechanic in mind, but it didn’t work. Instead, I thought it would be nice to allow you to choose tree colour by season, spring/summer/autumn/winter.

And thats it!

When placing trees, the game will randomly select a variation of the genus you chose in the season you selected, and will also vary the scale of the tree slightly between a max and a minimum. Trees will obey the same depth and layering rules as terrain and structures!

If this works out, I will probably implement something similar for the structural sections, to allow you to choose the colour of your buildings.

The next step after that is to allow changing of the background and initial island shape, and I will be in a solid position to consider the next, more complicated stages.

5

So I tried my hand at Hexels in my free time to get my mind off of schoolwork.

Pretty awesome program if you ask me.

Now that I have this out of my system, I guess I`ll try some sort of characters or inner rooms next, maybe with some scifi designs!

(I like how you can see where my mind drifted from “OOH CUBES EVERYWHERE” to more organised and nice architecture, in a way.)

5

Ok, as requested, here is a really quick tutorial as to how I make these things in Hexels. I tend to work in Trixels, but the principles will apply to all shape based art. Just layer things up a bit at a time. I’ll be making Slayer Of The Lifeless, an iconic WoW weapon made famous in a South Park episode.

First up: reference reference reference. I’ve used an in-game render up there for authenticity, but if you aren’t making something specific then you can’t have enough reference! http://art-of-swords.tumblr.com/ is a great place to start for weaponry reference.

1. Silhouette. Rough out the shape. Make two or three (or five or ten, or more) silhouettes until you’re really happy with it. Trixels can be quite tricky to get your head around the shapes you can make at first, so aim to EVOKE the shape you’re looking for, rather than copy it. This bit is fun! If you get the shape right, the rest will follow. Make sure glow is “off”.

2. Block in the colours. I usually use this stage to build up the silhouette and define the different parts of the thing I’m making, rather than actually working on the colour.

3. More blocking in, starting to define more details and provide a strong base.

4. Using the magic wand tool, select specific areas to work on. (In this case the handle, the skull, the inner blade, outer blade, etc). Then, with the brush tool set to a very low opacity, start to work into the solids, creating visual interest and some shading. Work loosely, the magic wand selections will stop you making a mess. Some people like very precise trixel placements, but I prefer to just go a bit mad. Use a graphics tablet if you’ve got one. You’ll notice I also changed the shape of the skull a bit - don’t feel bad about that.

5. Set the document to transparent, and then go into the menu and “flatten to canvas image”. This will give you a flat canvas with your image as a background, allowing you to start layering fresh trixels on top. This is when I turn on the Glow option, set it to low, and choose some vibrant colours with a low opacity. I work into the areas of the image I want to have a general glow about them. (inner blade, eyes of the skull, hilt crystal).

6. Set the document to Image + Transparency, and flatten it down again. I then set Hexels to “halftone mode” - this changes the size of the trixel depending on its opacity. I use this to paint in the runes on the blade and skull and the sparkle on the crystal. I then mess with its glow a bit, giving it a powerful glow but a small radius.

7. As before, Image + Transparency and flatten. In this stage I do final touch ups. I added a few glowing trixels to certain parts of the blade edge, and clean up the whole thing. I then set to Image and Transparency and export as a PNG to photoshop!

8. Once in photoshop, you can do what you like. Add lense flare (nothing to be ashamed of), backgrounds, text, whatever. I used the lasso tool to make a copy of the blade and crystal and added an extra glow to it with layer blending options. (I love glowy stuff, if you can’t tell.)

Share! Create more stuff! I’d like to see it if you made something for sure. Hexels is free, but I really recommend buying the pro version. Its like, 15 dollars (plus a couple tax) but if you’re into stuff like this its just awesome. There are a ton of tools I don’t use, and its good for all kinds of stuff. - my girlfriend uses Hexels to make cross stich patterns, for example!

If you liked this, then check out the tutorials made by etall: http://etall.tumblr.com/tagged/hexels

That’s where I learned most stuff I do!

3

Here is a gifset of me making a floating island using the current state of the tool very very quickly.

Things progressed pretty quickly once Hexels co-creator Ken explained to me the maths behind the various grids in hexels (on a  very basic level because turns out I am bad at maths), allowing me to create massively improved snapping functions. This in turn helped me to get the exact sizing of the various components right, and now I’m at a point where the terrain system is robust and fun to use, with a huge variety of possible creations!

TO DO

  • Prune and cull certain unpleasant terrain types (intricate small pieces look baaaaaad).
  • Add a third, huge dig option.
  • randomise depth of water in dig terrain
  • Add the ability to toggle the “depth” modifier. This will allow you to briefly ignore the isometric draw order. This will give players the option of stacking terrain on top of each other, to create more intricate patterns.