First experience with Spriter

So I want to try to make my crab animation using Spriter so, first I cut out all the different parts from my Inkscape image. I did leave out all but one leg, as I should be able to scale and rotate in Spriter to make all the legs, from one set of leg sprites 🙂 So here are the cutouts.

Crab Cutouts

Crab Cutouts

I saved them all in a sub-directory in the directory I’m going to use for the Spriter project. Spriter looks to be using the same project directory structure as Unity.

I have now assembled the crab within Spriter. I know Spriter is a work in progress, but some simple features I found missing was, copy of multiple objects within the scene. I have 3 left legs, that looks a lot like the 3 right legs. Would have loved to be able to just copy them all in one go, and mirror them. Probably just me not know how. And moving objects in the Z-order windows was a drag, no pun, intended, but it wasn’t possible to select all the leg parts and drag them all at once, and as I had to drag them all all the way to the bottom, it was not optimal. It should be possible to hold ctrl+up/down to move them up and down in the list, but it didn’t work (found out, it does work, the window just isn’t updating). Well it was still easy to set up my crab.

Crab in Spriter

Crab in Spriter

Looks almost like the original. Almost.. 🙂 But again, this is just a cold run, to show how easy Spriter is to learn and use.

To add the skeleton I did have to look at a tutorial, not that it’s hard to do, I just couldn’t find out how to add a single bone.. Found out, you have to hold down the Alt key, after watching the video.. How should I know 😉

I followed this video:

Once again they have made everything SO easy. 🙂 But did had a few problems. This time it was selecting the small legs when assigning the sprites to the bones, but I did find out that I could assign sprites to bones in the Hierarchy window. 🙂 Maybe I have used too small sprites or there are some setup somewhere I don’t know of, but it worked and now I can animate… Don’t expect to much 😉

Animated Crab

Animated Crab

And that’s it 🙂 An animated crab in a bit over an hour 😀 I already know where to use it.


There where a few glitches throughout the Spriter experience, but nothing compared with the frustration of trying to work with Synfig. When exporting the animation to PNG’s some of the images had the previous frames in the background. Something that I’m sure will be fixed in future versions.

That was my first experience with Spriter, and I still like it a lot! 🙂 It’s so easy to use. There are a lot of things that could be done better and small bugs, but $25 i cheap for a tool so powerful.

Features I would like to have include curves in the animation/key frame window, being able to drag multiple objects in the z-ordering windows, spritesheet output and that’s about it.

Go buy Spriter, NOW! 😉 And then, go make games 😉

– Henning


Vector animation, or the solution: Spriter by BrashMonkey

Task: Make a small crab sprite with a walk animation.

hmm, pixel art animation and me, not so good. So what was the alternative. I searched the great big internet, and found an article telling me that Inkscape was the tool to use. I had tried it before and liked the idea of being able to tweak the image without having to repaint it, just move the vector elements. So I found an image on Google that I could use as a reference image, and started painting.

Crab in inkscape

Crab in inkscape

Ok, maybe, just maybe I should have read some more about how, Inkscape was used to animate.. Ok so you make all the frames in Inkscape, export them one by one and then use Gimp (wonderful tool) to make the spritesheet.. Eeerrr, that was kind of what I didn’t want to do. So back to searching the net.

Success, Synfig! Ok, here was a tool that was vector based and could animate like hell 🙂 Yay! So tried to import my Inkscape crab, as it was in svg format, but no success 🙁 Not a great start, but ok, I could start over. So a new crab was born.. But hell to do, compared to Inkscape. Everything was drawn with the origin at the center of the screen, not the object, and worse, you can’t move the origin! What the ….? Ok, painting the first eye and made a group, everything is to be in groups in Synfig, and wanted to copy and mirror the group. Copy, ok. Mirror…. mirror… hmmm.. No? You can only mirror individual objects, and as the origin was fubar the first place I had to do this via scaling (x=-1.0) and the try to move the new mirrored legs to the right location, and by using the scale function something was off, and the moment was weird. I’t might have been me, but I didn’t have ANY problems in Inkscape. So the thought of having to do animation and rotating (around the center of the selected points only) and moving objects around, just told me to, not go there.

Crab in Synfig

Crab in Synfig

And the crab looked worse in Synfig, as every change was a pain compared to Inkscape.

So what to do… I was thing of using Unity and the new 2d animation support, but I used it before, with success but it felt off, and not completely thought through. So I hit the new for the third and final time. If I didn’t find anything I would just make 3-5 crappy crab frames in Gimp or PyxelEdit (another GREAT tool). But by luck I found what I was looking for, I hope. It’s called Spriter, and if it’s half as good as it looks I’m going to be a very happy guy. You can download the free version at the BrashMonkey site, and try it out for your self. I have played with the free version and the demo project last night, and it just feels right in every way. So I just spend the 25$ for the full version, and is now going to take the parts from the Inkscape crab, I know I have to export all the pieces into separate files (that might be something they will change in time, I have to investigate), and than use the skeleton system will be so easy to use, to do the animation. It might even have some inverse kinematics 🙂

I really believe the Spriter is going to be the solution to a lot of my animation challenges. I will return with my experience with Spriter soon 🙂

Now, go make games 😉

– Henning

“Left”, a new mini game and what I learned

Play "Left"

Play “Left”

So I’ve use a few weeks making this small puzzle idea into a working mini-game. It popped into my mind over the Christmas holiday. I thought that it would be a fun little game, and I was sure that I would learn a thing or two. So here is what I did, and learned 🙂

The basic idea:
A top-down game where you have to build a bridge to save some small cute creatures. But as always the idea changed over time and turned into something else.

The different planks used to build the bridge would be rotating and changing length at different speeds and amount. I figured that 5 different planks would be a fine.

Getting started:
So I started out by looking at the plank dynamics, I wanted to add planks at the end of the previous plank and in the same angle. But first, ONE, plank 🙂 Keep it simple, right?

First run of LeftFirst run of Left

Ok, that worked 🙂 So now, adding more planks.

Getting planks to align, and stay there:

Getting the planks to appear at the end of the previous plank wasn’t  a problem, except for one out of about 10 planks, so it was very hard to debug. 🙁

Misplaced Planks

Misplaced Planks

But after recording a video of the game, I could see the planks was placed at the correct position, but was then pushed in the first frame.. Ah, the physics engine! Problem identified 🙂
All the planks have a collider and a rigid body to be able to collide with the walls, the goal and to be able to be use the it for the death sequence, where all the planks fall to the ground. So I couldn’t just remove the rigid body from the planks.

The solution:

I simply chose to lock the position and rotation every frame. 🙂 Well, simple but wasn’t easy to implement because of the way I had implemented the plank control, but it worked. And then every thing was locked into the right place 🙂

What did I learn:

  • 2d and 3d physics engine doesn’t act the same. Colliding rules are different, follow link and see section “Collision action matrix” which works for 3d, but (and now I can’t remember the other link, sorry) this isn’t true for 2d.
  • Dynamic loading of levels
  • Got better at using animations instead of moving logos in code 😉
  • Deploy to OUYA and very basic OUYA input control (one button).

Things to do better:

  • If I want my POCs to be playable, make some simple object relation layout BEFORE coding a single line 🙂
  • Use more object pools, instead of creating objects on the fly.
  • Find a better way to handle the growing switch/case section in the game manager.
  • Graphics.. I started looking at blender again. Did the beautiful stars in it 🙂
  • Write posts on the way instead of having to remember what I did after the fact.

Hope you enjoy the 10 levels of this mini-game “Left” (named as such, as  you have a tendency to turn left).

Now, go make games! 😉

– Henning

Screenshot of main screen, the 10 levels and the game completed screen.

All levels of Left

All levels of Left


Comments now enabled :)

I have for a long time not allowed comments as I was being seriously spammed 🙁 But today I Updated akismet and WP-reCAPTCHA tested it all, and it seems to be working. 😀
So don’t hold back, all feedback is more than welcome.

– Henning

Pyxel Edit first impression and importer.

I bought Pyxel Edit a couple of day ago (9$ + 1$), as I found it was mention as a very good tile editor on multiple indie game dev blogs.
So, getting started with it, without reading a single letter, wasn’t working 😉 But after a few minutes reading the small getting startet tutorial and watching the video, I was ready to go.
Making new tiles, placing them and exporting was so easy.

Pyxel Editor Screenshot

Pyxel Editor Screenshot

Well, having made a small test level in Pyxel Edit, I had to see if I could write a small importer for unity to make use of this new wonderful tool. I had newer written an editor script for unity before, and did have a lot of problems with references to the sprites I generated in the script… They did not exsist after the script exitede! :/ After a day of googling, asking in the unity forum, installing IRC and asking in the channel #unity3d without anyone being able to help, I did figure it out myself.

I had to import the sprites in unity as I normaly would, so they exsisted and would be referencable from the script, this I could do by loading them via Resources.LoadAll<Sprite>(name). The other problem was that all the tiles was clones of the original created game object and not the created prefab? Well that turned out to be simple to solve. All I had to do, was to use PrefabUtility.InstantiatePrefab instead of the normal Instantiate function, and everything worked 🙂
It was wonderful to finally see a level show up in unity that was created in an external editor.

Unity Pyexl Importer Screenshot

Unity PyxelImporter Screenshot

I have continued to modify the editor script to make it more useful i.e. not to overwrite existing prefabs, as I want to be able to add colliders and scripts to the different prefabs without them being overwritten every time I update the tileset.

Use and modify the Pyxel Importer script as you want (Link to script), if you make any improvements to it, please let me know, so I can add the updated version to this post.

Two minor details about Pyexl Editor though

  1. I can’t figure out how to detach a tile AND delete the drawing in one operation, for now I have to detach a tile by Ctrl+right clicking and then use the the eraser or the selection tool, mark it and delete.
  2. It’s not possible to have multiple canvases per doc, so you would be able to create multiple levels using the same tileset without manually having to synchronize the tilesets between the different canvases. The developer know this, and are open to add this feature in the future.

Conclusion, I love Pyxel Edit! So much that I bought another copy today ($20) 🙂 It has made it possible for me to start making tile based games, as I want them.

So now, go and buy Pyxel Edit and make games.

– Henning

Stress Racer, or Strazer.

Stress Racer, or Strazer.

I havn’t finished any of the games I have thought out the last half year. Some I’ve gotten far with, but didn’t enjoy playing enough to finish them. Others where just to big projects for me to finish at the time. So I set forth to make so small a project for myself that I would be sure that I could and would finish it in a short time period.

So over the last two weeks i used a few evenings to make this small game that I call Strazer, from the words stress and racer. The game is loosly based on an old game for the videopac G7000 called Speedway. I found this screenshot of the old game.


I would say that the old graphics is more simple and stylish. I’m not the big pixel artist, but I did want to try to make the game in an old arcade style. The cars are ugly, but who cares 🙂

I use a small script that takes a screenshot every time I start the project and then 5, 10, 60 and 240 seconds there after. I merged all the screenshots into this small video and added a video of a single playthrough to the end of it.

You can play the web version of Strazer, or download the android version.

I’m really glad that I did finish it even though is not good, very fun or pretty. But I learned a lot about the use of animations and the animator.

Have fun! Now go make games!

– Henning


I just added Cellvivor to my list of games. It’s was the first game I made with Unity3D. I translated all the information from my old site (danish) to make it more accessible 🙂

Take a look, and now go make games 😉

– Henning

Unity 2D RULES!!!

After only a week and not much time to look into Unity 2D I must say that I don’t think I’ll ever look at another game engine ever again 🙂 The 2D workflow, sprite importer, animator, ordering layer and so on, just makes everything SO easy. 🙂 I’m simply blown away.

I have so many options now, that I don’t know what game to start making, which i great 🙂 Now I just have to finde the time to make it all happen..

If you don’t have allready, go download Unity 4.3….  To get started take at look at 2D Game Development Walkthrough.. Unity 2D RULES!! 😀

Have fun and go make games!

– Henning


After some weeks thinking about life the universe and everything, I’m back. 🙂

I’ve spend some time making the basic stuff for a 2D game using Unity. Forcing Unity to make a 2D game have been a challenge, It works but I’ve spend a lot of time handling sprite sheet, animation and other standard stuff and not on the actual game. 🙁 Then by pure coincident I saw someone mentioning Stencyl on so I took a look, and if version 3.0 keeps it promises I guess I’ll be doing all my 2D games in Stencyl. Only thing about Stencyl I don’t like is the missing possibility to use C# and the still missing Android support 🙁 But for now it’s so easy to use, that I’ll gladly learn Scratch and objective C.
Now that Unity version 4.3 is out, I’ll have to try it out to see if it’s as easy as they say, and if it is, I might switch back. If not, I’ll save Unity for my 3D needs 🙂

Have fun! Now go make games!

– Henning

Unity Draw Call Batching

I was having problems with Unity draw call batching. I’ve started on a small 2d game (Earth Guardian) and had made a small mockup and was already having problems with the number of draw calls 🙁 It looked like I was getting an ekstra draw call for each sprite I created. So I didn’t know what I was doing..! So I had to find out what I was doing wrong.

Asking Google I found three possible things, that could be the problem.

  1. When creating my mesh I set mainTextureOffset and mainTextureScale.
  2. My sprites use the build in transparent shader, which apperently could also kill the dynamic batching.
  3. I set the material for all meshes to my spriteatlas texture. Not using shared materials.

The Code is as follows.

public static GameObject CreateSprite(float x, float y, float width, float height, float scale, Material material)
        y = materialHeight - y;
        float uvWidthUnit = 1f / materialWidth;
        float uvHeightUnit = 1f / materialHeight;

        float vertHeightScale = scale * (height / width);

        Mesh mesh = new Mesh();

        Vector3[] verts = new Vector3[4];
        Vector2[] uvs = new Vector2[4];
        int[] tris = new int[6] { 0, 1, 2, 2, 1, 3 };

        verts[0] = -Vector3.right * scale + Vector3.up * vertHeightScale;
        verts[1] = Vector3.right * scale + Vector3.up * vertHeightScale;
        verts[2] = -Vector3.right * scale - Vector3.up * vertHeightScale;
        verts[3] = Vector3.right * scale - Vector3.up * vertHeightScale;

        uvs[0] = new Vector2(0.0f, 1.0f);
        uvs[1] = new Vector2(1.0f, 1.0f);
        uvs[2] = new Vector2(0.0f, 0.0f);
        uvs[3] = new Vector2(1.0f, 0.0f);

        mesh.vertices = verts;
        mesh.triangles = tris;
        mesh.uv = uvs;


        GameObject newMeshObject = new GameObject();
        newMeshObject.AddComponent<MeshFilter>().mesh = mesh;
        newMeshObject.renderer.material = material;
        newMeshObject.renderer.material.mainTextureOffset = new Vector2(uvWidthUnit * x, uvHeightUnit * y);
        newMeshObject.renderer.material.mainTextureScale = new Vector2(uvWidthUnit * width, uvWidthUnit * height);
        Vector3 boxColliderSize = newMeshObject.GetComponent<BoxCollider>().size;
        boxColliderSize.z = 0.1f;
        newMeshObject.GetComponent<BoxCollider>().size = boxColliderSize;
        Rigidbody rigidbody = newMeshObject.GetComponent<Rigidbody>();
        rigidbody.constraints = RigidbodyConstraints.FreezeAll;
        newMeshObject.isStatic = true;
        return newMeshObject;

So first I tried setting UV for the vertices instead of changing mainTextureOffset and mainTextureScale. For the first test I just removed the two lines, to see if the number of draw calls decreased.

The number of draw calls, on my main game screen, went down from 42 to 9 (I have some GUI taking up some calls).. 🙂 And when I started shooting, a lot, the number of draw calls stayed solid at 9. So a real improvement. 🙂 Of cause now I had to test if changing the UV coordinates for each frame changes anything…. It didn’t effect the number of draw calls 🙂 This post from the Unity Forum says it all. So modifying mainTextureOffset and mainTextureScale is not the way to do it!  So no more testing, the UV way of doing things must be the way to go.

public class UVSetter : MonoBehaviour

    public float pixX;
    public float pixY;
    public float pixW;
    public float pixH;
    public float matrialSizeX;
    public float matrialSizeY;
    private Mesh theMesh;
    public bool updatable;
    // Use this for initialization
    void Start()
        theMesh = transform.GetComponent<MeshFilter>().mesh;

        float uvx = pixX / matrialSizeX;
        float uvy = 1f - (pixY / matrialSizeY);
        float uvw = pixW / matrialSizeX;
        float uvh = pixH / matrialSizeY;

        Vector2[] newUVs = new Vector2[4];
        newUVs[0] = new Vector2(uvx, uvy);
        newUVs[3] = new Vector2(uvx, uvy + uvh);
        newUVs[2] = new Vector2(uvx + uvw, uvy);
        newUVs[1] = new Vector2(uvx + uvw, uvy + uvh);
        theMesh.uv = newUVs;

    // Update is called once per frame
    void Update()
        if (!updatable)
        float uvx = pixX / matrialSizeX;
        float uvy = 1f - (pixY / matrialSizeY);
        float uvw = pixW / matrialSizeX;
        float uvh = pixH / matrialSizeY;

        Vector2[] newUVs = new Vector2[4];
        newUVs[0] = new Vector2(uvx, uvy);
        newUVs[3] = new Vector2(uvx, uvy + uvh);
        newUVs[2] = new Vector2(uvx + uvw, uvy);
        newUVs[1] = new Vector2(uvx + uvw, uvy + uvh);
        theMesh.uv = newUVs;

On a final note I just want to mention that, to get the editor to show the correct UV in the editor, I just added [ExecuteInEditMode] decoration to my UVSetter test class..

Now, go make games! 😉

– Henning

Warning: Use of undefined constant XML - assumed 'XML' (this will throw an Error in a future version of PHP) in /var/www/ on line 1048