All posts by allegrocm

Color Palette Magic!

Although it looks deceptively like a plain old list of colors, the color palette in Hexels 2 has got a few tricks up its sleeve.

“Organize your mind, organize your life.”

While Hexels can’t tell you where you put your keys or what time dinner is, its palette can help you organize your mind.  Colors can be dragged and dropped anywhere on the palette, and even copied if you hold alt.  Or you can double-click to add the currently selected color anywhere you want.  Double-click again to edit the new color swatch.

The layout of your palette can help you keep track of what's what
The layout of your palette can help you keep track of what’s what.


Automatic Gradients

Drag and drop a color onto another to create gradients!
Drag and drop a color onto another to create gradients!

Do you find it somewhat tedious to carefully pick eight evenly spaced colors between salmon and magenta?  Then we have the solution for you!  Hexels allows you to create gradients right on the color palette by dropping one existing color onto another color in the same row or column.  Hexels will even create multi-color gradients that hit every color it finds along the way.

Space Travel

….Color spaces, that is.  Click the little gear icon at the lower right of the palette and you can select HSV gradients.  Behold!

The Hexels palette lets you create gradients in RGB or HSV color space.
The Hexels palette lets you create gradients in RGB or HSV color space.

Creating vertical gradients between the two takes just a few seconds and gives us a nice color selection.

Gradients can quickly populate an entire grid of colors.
Gradients can quickly populate an entire grid of colors.

Import and Export Photoshop Palettes

The heading says it all.  Hexels can import .aco palettes from Photoshop as well as export back to the format.  Hexels 2.55 even added support for importing Lab color (i.e. yellow, black, and chocolate), so all your bases should be covered.

So next time you fire up Hexels, take a new look at that plain-looking empty grid.  You could even draw a picture there!

(This is a flower and grass and a sun.)
(This is a flower and grass and a sun.)

Custom Shaders in Hexels 2.5

Custom Shaders in Hexels

Adding Your Own Blending and Post-Processing Effects

By Ken Kopecky, Lead Hexels Kengineer

Note:   This is a re-post of my Shaders tutorial from the Marmoset website.  I’ve posted it here because we’re currently in the middle of transitioning to a new website, and this tutorial hasn’t made its way over yet.

One of the coolest new features in Hexels 2.5 is the use of fragment shaders for layer blending and post effects (PFX). Shaders allow these effects to be calculated in real-time for Hexels’ vector graphics. This tutorial gives an overview of shaders and how they’re used in Hexels, and then shows a couple simple examples of adding custom shaders, allowing Hexels to perform new tricks. A basic knowledge of GLSL 1.2 (OpenGL Shading Language) is highly recommended, but anyone with some programming experience should be able to do something with this tutorial. If you need a refresher on GLSL, try:

Or this quick-reference guide:

Please note that as we improve Hexels, this information may change, and any shaders you make may need to be updated for future versions, but we’ll try to keep as much backwards compatibility as possible..

What is a Shader?

A fragment shader is a short program that runs on the graphics card (GPU) to determine the color of an individual pixel. Shaders run on the GPU far faster than compiled code runs on the CPU, which means that post effects can be re-calculated every time Hexels draws without causing a noticeable slowdown. Another important feature of shaders is that they can be loaded and reloaded while the application is running. For developers, this is useful because code changes can be seen immediately without having to recompile and re-run. For Hexels users, this allows people to create their own blending modes and PFX, potentially doing things with Hexels that we at Marmoset never dreamed of.

How Does Hexels Use Shaders?

  • Hexels incorporates shaders into every stage of its drawing pipeline:
  • Drawing shapes and calculating low-level effects like halftone and texturing
  • Layer masking
  • Post-processing effects applied to each layer
  • Clipping
  • Layer compositing (blending)
  • Calculation of glow
  • Final compositing of glow onto the Hexels image
  • Static (baked) color adjustment

Currently, three of these stages–PFX, layer compositing (blend), and baked color adjustment–support selection of shaders, including custom shaders supplied by the user.

Post-processing (PFX) shaders will be used for our two examples. PFX are similar to filters in Photoshop in that they modify an existing image according to a set of rules. Common PFX in Hexels include blur and color adjustment. PFX are only able to read textures from a single layer.

Blend shaders are like blending modes in Photoshop; they combine a layer with the image below it. Thus, they read the color of the incoming layer and the color of the already-blended layer stack, and output a result that is a combination of those two colors.

Both PFX and blend shaders are applied in real-time to layers, and any input values they have can be changed and even animated. Baked shaders, on the other hand, are applied once and the effect is permanent (that is, destructive, unless you hit Undo, of course). These are available in the Edit-> Adjust Colors menu in Hexels. Rather than operating on each pixel of the image, baked shaders operate just once on each Hexel, changing its stored color. Baked shaders must be flagged as Atomic. This is explained further in Technical Details.

A Simple Example

To get started, let’s see what it takes to add a very basic PFX shader to Hexels. This shader will simply invert the color.

  1. Launch Hexels
  2. Under the Shaders menu, select “Open User Shaders Folder…”
  3. Open the “Post Effects” folder inside the folder from Step 2.
  4. Open a text editor or IDE (preferably something with syntax
  5. highlighting and line numbers, such as Notepad++ on Windows or TextWrangler on Mac)
  6. Create a file with the following code and save it as “Invert.frag” inside the Post Effects folder.
void main()
 //sample the incoming pixel color
 vec4 incoming = texture2D(_Layer, gl_TexCoord[0].xy);

//ensure the incoming color is between 0-1, so we don't get negative colors!
 incoming = clamp(incoming, 0.0, 1.0);

//basic color inversion here of the r, g, and b channels
 //the built-in _EffectStrength variable is used to adjust the “amount” of a shader
 //currently, _EffectStrength is used only with the opacity of an adjustment layer
 //use it lessen the effect of a shader in a tasteful way
 incoming.rgb = mix(incoming.rgb, vec3(1.0, 1.0, 1.0) - incoming.rgb, _EffectStrength);

//set the outgoing color
 gl_FragColor = incoming;

  1. To view your newly created shader:
    Close Hexels and launch it again. This will re-scan the add-ons directory for shaders.
  2. Draw something, then go to the Layer Properties window for the current layer, and click on Post Effects. You should see “Invert” listed when you click the + button. Go ahead and add it to the layer.

Screen Shot 2017-01-06 at 11.48.55 AM

The above picture shows the invert effect applied to a masterpiece of Trixels. The left side is the original, and the right side is after the effect is applied. Hopefully you saw a change in your image, too. If not, either you made a mistake in the above steps, or this tutorial is out of date. Fortunately, we tried to make it easy to get feedback on your custom shaders. Start by going to your Shaders menu and selecting “Reload Shaders”, or just hitting ctrl(cmd on Mac)+shift+R. This causes Hexels to re-read all of its shader files, recompile them, and then write all the compilation logs to a file in your log directory.

Note: When editing your shader, you’ll need to reload shaders every time you change your shader file.

To see the contents of the shader compile logs, select “Show Shader Log…” under the Shaders menu to open your log directory, and open ShaderCompile.txt. Shader errors should be clearly marked in this file with easy-to-spot things like “***”, “___”, and “ERROR”. Look for the filename of your shader, and then look immediately below it for any errors that popped up. Please note that the file provides line numbers, but these line numbers are off by 1000, due to the way Hexels assembles shaders internally (i.e. an error on line 1025 means line 25 in your shader). So just ignore that extra 1.

The Shader menu also has an option to show shader errors on the main Hexels canvas if you don’t feel like digging through a text file. If no errors are found, selecting this option won’t display anything.

Fixing syntax and other shader errors are beyond the scope of this this tutorial, but our Technical Details section will provide information regarding shader uniform variables provided by Hexels.

Adding Adjustment Controls

Hopefully, the simple PFX shader in the last section worked for you (If not, please contact us and let us know what we can do to improve this tutorial). While the above is a clear example of what you can do, it’s not very exciting. Most post-effects have settings with sliders, buttons and widgets that you can play with to make them do different things. Fortunately, Hexels provides hooks to let you add UI controls to your shaders. In fact, nearly every PFX in Hexels (as of this writing, the only exception is Curves) uses a UI that’s generated based on text in the shader file itself. In this example, we’ll modify the Invert shader we just made to allow control for each channel. At the top of the Invert.frag file, add these three lines:

UI_Uniform_Float(Red, 0, 1, 1); //this text will show up as a tooltip
 UI_Uniform_Float(Green, 0, 1, 1); //so will this
 UI_Uniform_Float(Blue, 0, 1, 1); //and this

These lines tell Hexels to create sliders in the shader’s user interface (UI) pane. Inside the parentheses are the parameter name, and its minimum, maximum, and default values. Comments following the declaration will be used as tooltips in the UI. Save your file and reload shaders in Hexels (ctrl/cmd + shift + R). When you go back to Layer Properties and click on the Invert post-effect, you should see something like this:

Screen Shot 2017-01-06 at 11.49.54 AM

The values for “Red”, “Green”, and “Blue” are now accessible in Hexels. If you’ve set your Invert post-effect to be animated (by clicking the key icon next to it in the Layers window), these three parameters will even animate if they are set differently at different frames. In the shader itself, Red, Green, and Blue are float uniforms and can be used in code accordingly:

UI_Uniform_Float(Red, 0, 1, 1); //this text will show up as a tooltip
 UI_Uniform_Float(Green, 0, 1, 1); //so will this
 UI_Uniform_Float(Blue, 0, 1, 1); //and this

void main()
 //sample the incoming pixel color
 vec4 incoming = texture2D(_Layer, gl_TexCoord[0].xy);

//ensure the incoming color is between 0-1, so we don't get negative colors!
 incoming = clamp(incoming, 0.0, 1.0);

//use the values of our Red, Green, and Blue parameters to affect how much
 //inverting is actually happening to each channel
 vec3 neg = mix(incoming.rgb, vec3(1.0, 1.0, 1.0)-incoming.rgb, vec3(Red, Green, Blue));

incoming.rgb = mix(incoming.rgb, neg, _EffectStrength);

//set the outgoing color
 gl_FragColor = incoming;

Other UI items are available, including checkboxes, int sliders, and color pickers (color pickers coming soon…). Syntax for those can be found in the “Technical Details” section of this tutorial.

Technical Details

Now that you know the basics of custom shaders in Hexels, this section will cover some of the more nitty gritty things you need to know to actually write them. The most important thing to know is that all of the shaders covered in this document have a common shader file that is inserted above your code. This file is located inside Hexels’ shader directory. Select “Open Built-In Shaders Folder” under the Shaders menu and look for Header.frag in the Post Effects folder.

Protip: While you’re in there, be sure to take a look at the shader code we shipped with Hexels to get an idea of the syntax.

Header.frag includes all of the uniforms and textures passed to PFX, blend, and bake shaders, as well as some #defines for interfacing with the UI. This file is heavily commented and will be up-to-date for your current version of Hexels. I won’t go over everything that’s in there, but here are some highlights:


As we saw above in the second example, these statements are what connect shader variables to Hexels. They help Hexels create UI elements like sliders and checkboxes so you can edit and animate the values in your shader. There are four basic types that are currently usable:

UI_Uniform_Float(name, min, max, default); //comments here are converted to tooltips

This creates a basic floating point value slider in the UI. You’ll probably use it more than any of the other types. Underscores in the name are converted to spaces so they look nice in the shader properties window.

UI_Uniform_Angle(name, min, max, default); //...

This is the same as a float, except its value always moves the “short way” around a circle (in degrees). So if you’re animating this value from 10 to 350, it will pass through zero and sweep just 20 degrees, rather than sweeping a full 340 degrees like a UI_Uniform_Float would.

UI_Uniform_Int(name, min, max, default); //…

The int slider takes the same arguments as the float slider, but integers are passed to the shader instead of floats.

UI_Uniform_Checkbox(name, default); //…

Instead of a slider with arbitrary values, this one is a checkbox and its value are just 1 and 0.

More uniform types (such as colors) are supported internally but are not yet accessible via the UI.


This one is important, and should be used in every PFX shader. The “_EffectStrength” variable is used when adjusting the opacity of a blend shader to smoothly increase or decrease the “amount” of an effect. In our blur shader, for example, as _EffectStrength is reduced, so is the blur radius. In our color adjustment shader, it fades the output color back to the initial color. Try to use it in an elegant way in your shader, if possible. It’s usually just a simple multiply.

Multi-Pass Shaders

Several shaders in Hexels need to run several times to achieve the desired effect. Our blur shader, for example, saves time by running two (relatively) fast linear blurs in perpendicular directions. You can add this sort of thing to your own shader by using

UI_Uniform_Const_int(Render_Passes, c);

Where c is the number render passes you want your shader to use. Try to keep this number low or Hexels will grind to a halt. The number of the current render pass is stored in a uniform called (you guessed it) _RenderPass.

Atomic (Baked) Shaders

Because baked shaders aren’t aware of the spatial relationship of each Hexel, they should only be used for PFX that don’t change the “shape” of the drawing, like color adjustment, rather than blur. Any PFX shader containing #define ATOMIC somewhere (including inside comments) will be made available as a baked shader in the Color Adjustment window. A wonderful exception to this is if you’re editing an image cel, any post-effect is available for baking. You can even select a portion of the image and modify that.

Blend Shaders

Although the above examples are for PFX shaders, blend shaders are extremely simple to make. The only difference is they have two texture inputs instead of one. Check out the blend shader code supplied with Hexels 2 (“Open Built-In Shaders Folder…” under the Shaders menu) for plenty of examples.


I hope you have found this tutorial to be both helpful and inspiring. We are very excited to see what sorts of special effects people add to Hexels, and we worked hard to make it as easy as possible while still giving you, the user, a great deal of control. If you have any questions, comments or suggestions for how we can improve the custom shader system, please let us know by sending an email to

Glow Classic

Welcome back to my series of Hexels tutorials.  This time around I’m going to talk about glow in Hexels 2.5, how it changed from Hexels 2.0, and how you can go back to  something similar to the 2.0 glow if the new glow just isn’t doing it for you.  As usual, I’m going to have a background/details section for the curious and a how-to section for the men and women of action.

Jump to the How-To Section

Glow:  The Most Convoluted Thing in Hexels

Hexels’ glow effect is convoluted.  Literally.  If you’re not familiar with the term, (and I wasn’t, when I started work on Hexels) a convolution is a sort of geometrical multiplication of two things that aren’t numbers.  Here are a few examples of image-based convolutions:

Some examples of image convolution

So for our purposes, a convolution is basically taking one image and pasting it onto every pixel of another image.  In Hexels, glow is a convolution of the glow image you select in the Glow tab, and your drawing.  At the very last step in the render process, the glow image is overlaid onto the main image with additive blending.  But this convolution is generated in different ways in Hexels 2.0 and 2.5.

Way Back in the Day (Glow in Hexels 2.0)

Hexels 2.0 (and earlier) drew glow per-hexagon.  So for every hexagon (or triangle) you drew, the glow image would be repeated a single time:

Old-school glow from Hexels 2.0
Old-school glow from Hexels 2.0

This produced a nice aura, and if you switched out the default glow and put in your own glow shape (called a “kernel”, in image processing terms), you could get some really neat effects.  The target-symbol glow is one of my favorites:

Target glow in Hexels 2.0
Target glow in Hexels 2.0

Painting with glow patterns like this would yield really neat, stylized pictures.  But this method also had some drawbacks.  The glow image could only be affected by the actual colors of the Hexels.  Things like outlines, textures, and image cels had no glow of their own.  We were able to get image layers to occlude glow, but it was becoming clear that per-Hexel glow would need to eventually be re-thought.

Things changed in 2.5

Hexels 2.5 changed a lot in terms of how the graphics pipeline in Hexels worked.  Things like post-effects, layer transforms, and blending modes meant that a hexel’s color, position, or shape could change.  It no longer made sense to draw glow per-hexel, so we decided to move to per-pixel glow.  But it wasn’t going to be easy.  Hexels 2.0 had to redraw the glow image hundreds or thousands of times every frame, and this could get fairly slow sometimes.  Doing this for every single pixel would have meant drawing the glow image millions of times every frame.  Sure, graphics cards have gotten faster since the initial release of Hexels in 2013, but not a thousand times faster.

I experimented with a number of ways of making per-pixel glow in a way that looked reasonably like the glow in Hexels 2.0.  At first I tried just overlaying a Gaussian blurred copy of the Hexels image onto itself.  I don’t have any pictures from that testing, but I can recreate the idea in Hexels.

Additively blended blur looks nice as glow, at least from a distance.
Additively blended blur looks nice as glow, but it’s a one-trick pony..

It looks great!  But not enough like the old glow.  Especially on the single Hexels along the top, where it’s barely visible.  Another problem with a blur filter is it takes a lot more time to run as the blur range increases, and zooming in on the image in Hexels requires the blur range to increase accordingly.  But the biggest problem is it doesn’t allow use of a kernel, so target glow and other custom glow shapes would no longer work.

In the end, we went with a sort of hybrid approach that has three basic steps.  The first step is to apply a very slight blur to the source image:

A few pixels of blur.

Next is the scattering step.  Here, the source image is sort of atomized randomly into the shape of the kernel image.  In other words, it’s a very, very rough convolution:

The scatter step is a very rough convolution with the kernel.

Finally, the resulted is blurred several times to smooth it out a bit:

The final glow step smooths out the result from the scattering.

The final result looks a lot like the glow from Hexels 2.0:

Glow composited with the original image.

Although some lumpiness is still visible at the top of the image, this is generally not noticeable when actually using Hexels because it generally emanates from a wider area, like on the lower portion of the image.

Although this method is unable to preserve hard edges in glow kernels, it still allows for use of softer ones, like our rainbow glow preset:

Colored glow kernels work well with the new glow system

Still though, there are those who want the old glow, particularly if using a hard-edges glow kernel.  Fortunately, there’s a way to do that!

Getting the Old Glow Back

While the old glow method isn’t explicitly supported in Hexels 2.5, it’s very straightforward to simulate it with textures.  Start by grabbing the image you want for your glow kernel.  I’ve provided the default glow pattern here, or you can grab the image from Hexels’ data folder in Resources/Glows.  (Or you can use your own!)

Default glow image used in Hexels.
Default glow image used in Hexels.

Next, go to your Texture tab and checking the Enabled checkbox.  Then make sure the first square from the left is highlighted, click the Replace button, and select the glow image you’d like to use.

Load your glow pattern as the first texture.

Now, we need to convert this texture to be drawn on top of your hexels and additively blended.  Check the “Show Details” box.  Click on Mapping and select “On Top”.  Then click on Blending and set it to “Overlay”.

At this point, it should look like highly exaggerated old-school glow:

Too much, perhaps?

From here, you can use the Opacity slider to mimic glow strength and the Scaling slider to mimic radius.  Hold shift if you don’t want the sliders to snap to a few default values.  Here’s the result if we set scaling to 5.5 and opacity to 0.25:

More reasonable fake glow values.
More reasonable fake glow values.

There we are.  Although it’s not guaranteed to be perfect, this  should give you a good reproduction of the glow from Hexels 2.0.  Feel free to ask questions in the comments section!

Hexels 2.5 Transform Tools

Hello!  This is my second in a series of Hexels mini-tutorials that look at some of the finer points of that strange-but-wonderful little art program.  For this post, I’ll be discussing the three different ways you can move your hexels around on the canvas.  In particular, I’ll be discussing when you should use which tool and how they work behind the scenes.  My hope is that you’ll understand each tool better and have an idea of why it acts the way it does.

If you’re just looking for the short summary, I’ll get to that first:

Click-and-Drag Transform:  Easy, operates on your selection, doesn’t animate, rotate, or scale.

Free Transform:  More difficult to use.  Doesn’t animate, but can rotate or scale your selection to certain angles and sizes without messing up your shapes.

Layer Transform:  Can only modify the entire layer because it moves the grid itself.  Can do any translation, rotation, or scale, and can be animated.  Also, motion blur!


Now for the details.  Or as kids (and I, when trying to annoy my wife) call them, the deetz.

Click-and-Drag:  This one has been around since Hexels 1.0.  Make a selection with one of the selection tools, then mouse over the selection and click and drag it, or use the arrow keys to move your selection.  This tool simply takes each Hexel and moves it to a different spot on the grid.  Or if you hold down ctrl/cmd, it just moves the selection outline and doesn’t modify what’s on the canvas.  The exact way each Hexel moves is determined by the shape mode you’re in, but we do our best to keep the shape together and move it in a way that makes sense given the user input.  With this type of transform, you’ll always up with the same number of Hexels and outlines as you started with.  Click-and-Drag movement will also respect a tiled (wrapped) layer, so moving a selection off one edge of the canvas will cause it to appear on the other side.  This transform type affects only the selected area of an individual Cel, so its effects can be used to make an animation Cel-by-Cel, but the transform itself is not animatable.

Clicking and dragging is a reliable way to move your Hexels, even if they sometimes look a little odd along the way.
Clicking and dragging is a reliable way to move your Hexels, even if they sometimes look a little odd along the way.

Free Transform [ctrl/cmd-T]:  The Free Transform tool in Hexels was designed because a number of our users wanted a way to rotate and scale their selection.  This sort of thing is relatively easy in a pixel-based tool like Photoshop, because you generally don’t need to preserve the exact alignment of each pixel to keep the image looking nice. (Unless you’re specifically making pixel art).   But in Hexels, we needed a way to preserve the shape and alignment of each Hexel, otherwise the image quickly turns to gibberish.

The solution we can up with is what we call a “visual cast”.  The visual cast reinterprets the selection by moving, rotating, and stretching it and then checking to see what shapes in the underlying grid now match up with the transformed image.  This means that you may get a different number of Hexels than you started with.  It also means that your selection will get jumbled with transforms that don’t map fairly closely to the grid.  Don’t worry though, as Hexels will snap to valid points if you’re close to them.  Here’s a GIF showing how how visual cast works.

The Free Transform tool uses a "visual cast" to reinterpret transformed Hexel data onto the grid. In practice, the tool will snap to the grid pretty readily.
The Free Transform tool uses a “visual cast” to reinterpret transformed Hexel data onto the grid. In practice, the tool will snap to the grid pretty readily.

Notice the grey dots.  These represent the center of each Hexel on the grid.  When the original shape (overlaid in red) covers the dot, that Hexel is filled in with the corresponding color.   As you can see, only a small portion of the possible positions can properly be re-mapped to the grid.  It gets even more complex with rotation and scaling, but we handle most of that for you.

Similar to the Click-and-Drag transform, Free Transform can’t be animated.  You would need to create multiple Key Cels and individually position each one.  But it’s the only way you can rotate or scale a selected section of a layer.

Layer Transform [T]:  The final transform method in Hexels is the Layer Transform tool.  This one differs from the others in that it actually modifies the underlying grid that the selected layer is drawn on.  Because it transforms the entire grid, it doesn’t need to do any funny business to make the Hexels fit on the grid.  This means you can do any offset, angle, or scale and all your shapes will look just fine.  I made a GIF that shows the Layer Transform tool in action (although I cheated a bit in making it–you can’t actually rotate and translate in a single mouse click.)

The layer transform tool lets you translate, rotate, and scale however you'd like, but it affects the entire layer.
The layer transform tool lets you translate, rotate, and scale however you’d like, but it affects the entire layer.

Notice how the entire red grid is changing.  The blue cube is on a lower layer, which is set to draw with an exported grid as reference.

Aside from keeping the image coherent as it moves, the Layer Transform tool has the advantage of being animated.  This means you can specify keyframes for the transform in different frames, and Hexels will fill in the intermediate frames with the proper transform.  You can even apply different types of tween curves by right clicking on the different key frames, so you can have your  layer speed up and slow down smoothly.  Just make sure the Key icon next to the Transform track is highlighted, like in the image below.

Make sure the key is highlighted to enable keyframed animation of a layer property, such as Transform.
Make sure the key is highlighted to enable keyframed animation of a layer property, such as Transform.

Finally, there are a couple nice extra things with about layer transforms.   For one, you can add the Motion Blur effect to layers with animated transforms.  Here’s what that looks like on the animation above:

Motion blur is a nice perk of layer transforms.
Motion blur is a nice perk of layer transforms.

The other cool thing about layer transforms is you can apply them to groups and even to the document itself (click on Document Properties).  This equates to animating your camera!  How else would we be able to watch the Trixelmobile as it makes its epic journey down the driveway?


Hexels 2.5 Animation Looping

The Hexels 2.5 update we recently released adds animated layer properties such as transforms and post-effects.  It also adds some new animation settings you can use to export smoother animations, including looping ones.  I find the looping options in particular to be somewhat difficult to explain without the benefit of images, so I’m giving it a shot here with some GIFs to help.

Let’s get started.  We’re going to make a bouncing ball.

A pretty plain red ball. Probably needs jazzing up.
A pretty plain red ball. Probably needs jazzing up.

Boring.  Let’s throw a Blob post-effect onto it.

Blob with all the settings maxed made the ball a bit more round.

That’s better.  Now let’s animate this ball as it bounces up and down. Switch to Timeline mode, add 6 frames, and expand the little arrow next to Layer 1.  Make sure the key next to the Transform channel is enabled (blue) and use the Transform tool (T) to move the ball downward in frame 4 and back to its original position in frame 7.


The ball now has three positions over seven frames, and the exported animation looks like this:

Our first attempt at a looping animation.
Our first attempt at a looping animation.

See the problem?  Even though the ball returns to its initial position, it hangs in the air for one frame, motionless.  We could fix this by removing the last frame (7) from the animation and manually positioning the ball in the new last frame (6), but we probably wouldn’t be able to get it quite right.  (Unless we added a keyframe to the Transform track in frame 6 BEFORE we delete frame 7, but there’s a better way.)  Go ahead and delete frame 7.  Now, click on the little gear icon at the lower right part of the Timeline to open Animation Settings.  Set Property Looping to “Loop To First”.

Loop-to-First mode.
Loop-to-First mode.

You’ll notice a new frame is now shown at the end of the timeline, but you can’t edit it.  That’s because it’s essentially an alias or reference to frame 1.  It’s there to show you that animated properties (such as layer transform) will use the values from frame 1 as a keyframe that lives just past the end of the animation.  If you export now, you’ll see that your animation now has just 6 frames and loops smoothly:

No duplicate frames this time.
No duplicate frames this time.

Let’s make the animation a little more believable now by right-clicking the Transform keyframes at frame 1 and 4 and setting their tweening to ease-in and ease-out, respectively.

The tween types menu.
The tween types menu.

And here’s the result:


Much better.   But what if we want our bouncing ball to move horizontally?  Let’s start by putting this layer into a group.  This lets us animate the horizontal motion with a separate tween type than vertical motion–gravity produces a parabolic trajectory, and our horizontal motion is linear.

Where do we put the Transform keyframe?  With Loop-to-First enabled, we can’t edit our last frame without changing our first frame.  Moving Group 1 halfway across the screen at frame 4 gives us a very awkward animation:

Use a group to animate horizontal movement with a different tween type.
Use a group to animate horizontal movement with a different tween type.
That didn’t work.

So how do we smoothly animate (and loop) the ball bouncing across the screen?  Let’s start by adding a new frame (7) and setting the Transform of Layer 1 to be identical to that in frame 1.  You can even hold alt and drag the Transform keyframe to copy it to frame 7.  For Group 1, modify the transform so the ball is hanging halfway off the right edge of the canvas.   Oh yeah and double click on Layer 1 to access its properties and set it to Tiled!  Otherwise it won’t wrap around properly.

Use a group to animate horizontal motion with a linear tween.

I’ll spare you the trouble of exporting it.  If you export the animation and play it back, you’ll see the same problem we had with our very first export–it hangs for a frame as it loops because the first and last frame are identical.  This is where the other type of property looping, “Approach Last”, is handy.  Go back to Animation Settings and change Property Looping to Approach Last.

Approach Last is the solution here

Export your animation now and you’ll get a nice loop with no weird hangs.  It’s exactly like what would have happened if you hadn’t chosen any property looping options….except the very last frame isn’t included in the GIF.

No extra frames here.

It’s still a bit choppy though.  What’s that, you say?  You wish it could be smoothed out somehow, using magic or physics or geology?  You’re in luck!  Go back to Animation Settings and click the button to the right of Authored FPS to lock it, then increase Frame Tweening.  From an editing standpoint, this won’t change anything, but when you export your animation, Hexels will insert tween frames in between each frame on your timeline.  Now our animation loop looks even nicer.


That concludes this post.  You can use these new animation settings to make all sorts of complex animations in Hexels, so have at it!  And then post them or send them to us so we can ooh and ahh at them.  Thanks for reading!



Actually, it’s “Doctor Kopecky”

2014-12-20 16.16.26

This post is probably a little late, but I thought I should let the world know that on November 20th, 2014, I finally defended my Ph.D.  My topic was software I wrote for dealing with the complexity of distributed virtual and mixed reality training simulations.  For example, one part was an application-independent program that displayed states of input devices and configuration files for VR simulations.  Another piece dealt with combining and filtering position information from multiple 3D motion tracking systems.

I’m not going to go into details on it here.  I’m so tired of writing about it and talking about it for the past couple years.  So here are abstracts of papers I’ve written on it.  I apologize that the full articles require paid subscriptions.  I’m submitting one to the open-access IEEE Access journal, where anyone will be able to read it!

SPIE Modeling and Defense Systems paper on MetaTracker

2013 I/ITSEC Conference paper on my system as a whole

2014 I/ITSEC Conference paper on using simulated data for testing MetaTracker

My future plans aren’t fully decided yet, but I’m definitely not going to be working for any big companies.  I like the indie dev life.  We’ll see what’s in store for me.  I already got a co-working space I’m renting with my buddy, crazy genius Evan Balster.  Sometime I’d like to do a VR museum project with my lovely fiancé, Laura Funk.  I also have multiple offers for contract programming work.  I’m super excited for everything!

Using a MIDI mixing board to tweak your game in real-time

So you’re writing special effects code for your game.  You just need a small explosion here and there, and it’s a small project so little things like this are hardcoded.  You type in a velocity multiplier for the particles, compile, run your game, click through the title screen, start playing and blow up an enemy, only to find that the velocity you hardcoded was a little off, and to test a new value, you need to recompile and run again.  Sure, you could set things up to load from a file, or add a slider to the UI (you have UI widgets already, right??), or lament that you’re not using Unity, but all those things are kind of a pain if the framework isn’t already there for it.  At the very least, you have to go click on a tiny slider on the screen or type in numbers on the keyboard, and neither of those are very fun .

Sometimes in this situation, I resort to using the throttle on a flightstick to let me dial in a value at runtime.  It’s pretty rad to be able to tweak something with a hardware dial.  It’s a more intimate interaction than a button or an analog stick.  So firm and precise and….well, anyway, that’s all well and good, except you only get one input, and chances are your game was designed to use a more standard gamepad and the flightstick is confusing your input.

Enter the MIDI mixer!  I learned about the KORG NanoKontrol2 while sharing a hotel room with Kozilek for Fantastic Arcade in ‘013.  He was practicing his mix on it, obviously, but I saw all the sliders and dials and thought of how many things I could control at once!

2014-09-21 23.03.02

But how to convert MIDI to something you can easily get to in your C++ app?  Some googling led me to ControllerMate, a very cool Mac-only app that basically lets you redirect and reconfubilate all your computer’s inputs.  With the free version, I set up to MIDI channels to go to a virtual gamepad’s analog channels, and intercept that in my gamepad code, along with some of the buttons.  After I forked over $25 (a steal, IMO) for the full version, I could do all 16 analog channels and all 30+ buttons.

But it was kind of a pain to keep everything working quite right, and I can’t very well write a blog entry about this awesome thing that they can do with the MIDI hardware they probably don’t have lying around if it also required them to spend $25 on the accompanying software.

So I wrote my own.

Starting with the most basic example from PortMidi,  I combined it with my gamepad-based Midi code and encapsulated it into its own sort of thing.  This is a very easy-to-follow example that shows you how to get the latest values from the mixer board with a minimal footprint in your code.   It’s tested on Mac and Windows, and should, in theory, work on Linux.  It’s C++-based, so if you can integrate that with the language you’re using, you should be good to go.  And it’s up on GitHub.

Download it here.

You’ll also need GLUT if you don’t have it.

Let me know if you find it useful!


Accessing the System Clipboard in C++

The other day I needed to do something that should be very easy, but I ran into some problems.  Lots of google searching and I eventually was able to scrounge together enough to make it work, and I’d like to save others the trouble.

One of the feature requests  we had recently for Hexels was copy and paste across multiple instances of the application.  Hexels always did have copy and paste, but it just stored the data in application memory rather than using the system clipboard, so it couldn’t go across difference instances and it vanished when you quit the app.

I suppose I could have just saved the data to a file in Hexels’ temp directory, and that would have served my purposes.  Probably better than using the clipboard, even, since then it wouldn’t overwrite what was already on there.  But I wanted to use the system clipboard.  Besides, eventually I’d like to also convert the selection to an image for pasting into other apps.

So anyway, Hexels is built on the QT framework, which is pretty awesome and does support clipboard operations.  In fact, it’s this simple:
void copyToClipboard(unsigned char* genericData, int size)
QByteArray a((char*)genericData, size);
QMimeData* qmd = new QMimeData;
qmd->setData("HEXELS", a);

Easy, right?  Except it doesn’t persist when the app exits.  So what good is that?  It’s probably all most people would need, but it’s sort of like breaking a promise if your clipboard data doesn’t stick around, isn’t it?  By the way, I swear I properly indent my code, the formatting is just from WordPress.  I’m not sure good with it yet.

So I did what any good programmer does, and I googled it.  Something about clipboard ownership and flushing and whatnot.  Not many results, though, which is actually the reason I’m writing a blog post about such a mundane topic that I, as you’ll see, solved very inelegantly.

On Windows, it turns out that flushing the clipboard to the system such that it persists upon exit is easy.  Just call

OleFlushClipboard(); //needed to retain clipboard between app launches
Then later you can grab the data like this:
unsigned char* getDataFromClipboard(int& size)
size = 0;

//grab the clipboard and a pointer to all its data
const QMimeData* data = QApplication::clipboard()->mimeData();
if(!data) return NULL;

//is there HEXELS data here?
QByteArray a = data->data(“HEXELS”);

size = a.size();
if(!a.size()) return NULL;

//the pointer might not be good after we leave the function, so make a copy of the data
//you’ll have to delete it yourself later
unsigned char* newData = new unsigned char[a.size()];
memcpy(newData,, a.size());
return newData;


And that’s it!


Except on Mac.  Macs don’t have OleFlushClipboard, and Google couldn’t offer me an alternative.  For Mac I had to  go a somewhat more format route and use Objective-C.  Looking at Apple dev docs, I put together the following:

void copyToClipboard(unsigned char* genericData, int size)

//establish clipboard ownership on Mac
NSPasteboard* pb = [NSPasteboard generalPasteboard];
[pb clearContents];
NSData* cpdata = [[NSData alloc] initWithBytes:genericData       length:size];
[pb setData:cpdata forType:@”HEXELS”];


unsigned char* getDataFromClipboard(int& size)
size = 0;
NSPasteboard* pb = [NSPasteboard generalPasteboard];
NSData* cpdata = [pb dataForType:@”HEXELS”];
size = [cpdata length];
unsigned char* dater = new unsigned char[size];
memcpy(dater, [cpdata bytes], size);
return dater;
return NULL;

You might be wondering why the getDataFromClipboard function has to be different on Mac.  I’m wondering the same thing.  For some reason, Hexels data copied straight to the Mac system clipboard wasn’t accessible to Qt.

So there you go, everything you need to use the clipboard on Windows and Mac.  I suspect these functions could be modified to put data on the clipboard in multiple formats simultaneously, like pasting Hexels data into Hexels or pasting an image into Photoshop.  Is this the “correct” way to do this?  I doubt it. But it works for me, on both Mac (OSX 10.9) and Windows 7.  It also gets around some issues that Google wasn’t very helpful with, and those things are what matter.  Enjoy!



Hey folks,

I’m Ken Kopecky.  I finally managed to get this domain off of Google’s hosting, where I couldn’t figure out how to do anything with it, and transferred it to DreamHost.  It was a huge pain that, ironically, required a lot of googling.

I’ll start with some words that describe me.  Sometimes it’s nice just to look at a list of words rather than wade through prose.  So here goes

Indie Game Developer, PhD Candidate, VR Expert, Animal Lover, Black Belt, Wannabe/Future Dad, Self-Taught Awesome Coder, Outdoors Lover

See something you like in there?  Then keep reading.

I love to make things.   Usually I accomplish this by programming, but sometimes I make things out of wood, PVC, or other materials.  I’m also the co-founder of (and programmer/designer at) Hex-Ray Studios.  We made Hexels, which is a one-of-a-kind (so far…) art tool based on shapes that aren’t always square pixels.  People love the Trixel mode for drawing isometric 3D stuff, so if that sounds like fun, you should check it out.

I like to pretend I’m a game developer.  In fact, when I go to the Game Developer’s Conference or other game dev shindigs, I fit in with game developers so well, most of them are none the wiser.  I do make games, but I’ve never released one widely.  My real talents lie in what I like to call “artist enablement”.   I love making tools to help artists and other content-creators create their content!  For games.

So I’m sort of a game developer.

I also do virtual reality.  I’ve been doing it for quite a while, and I’d like to think I’m pretty good with it.  My VR facility of choice is the C6 at Iowa State University, because being surrounded by 100 million pixels of your app is rather amazing.  I’ve written a number of demos (games) for it, and I plan on talking about them more on this site.  Maybe I’ve done that between the time I’m writing this and the time you’re reading it.  You should poke around and see if they’re up.

I also have a dog named Emmy.  She’s my best friend, and she goes everywhere with me.  She’s even been to a game jam or two.

Rock Crop

I think that covers most of the “who’s Ken?” section. I’ll add other sections soon, talking about my projects and where I want to go in the future.  Thanks for reading!