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.

G7000-Speedway

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

CellVivor

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

Stencyl

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 spiludvikling.dk 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;

        mesh.RecalculateNormals();

        GameObject newMeshObject = new GameObject();
        newMeshObject.AddComponent<MeshFilter>().mesh = mesh;
        newMeshObject.AddComponent<MeshRenderer>();
        newMeshObject.renderer.material = material;
        newMeshObject.renderer.material.mainTextureOffset = new Vector2(uvWidthUnit * x, uvHeightUnit * y);
        newMeshObject.renderer.material.mainTextureScale = new Vector2(uvWidthUnit * width, uvWidthUnit * height);
        newMeshObject.AddComponent<BoxCollider>();
        Vector3 boxColliderSize = newMeshObject.GetComponent<BoxCollider>().size;
        boxColliderSize.z = 0.1f;
        newMeshObject.GetComponent<BoxCollider>().size = boxColliderSize;
        newMeshObject.AddComponent<Rigidbody>();
        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.

[ExecuteInEditMode]
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)
        {
            return; 
        }
        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

Unity Remote

Got Unity Remote working on my LG E975 mobile phone today, so development time has been drastically shortened. ๐Ÿ™‚ As I’m new to mobile/touch development, I started out with the old compile, copy, install and test cycle. SLOW!!! I knew there had to be a better way, and Unity Remote was the answer ๐Ÿ™‚
I did fail to make it work on my own, but this one line “On your android device ensure that in Application Settings that USB Debugging, Stay Awake and Allow Mock Locations are all enabled.” from the Unity Forum made all the difference. ๐Ÿ™‚ And starting Remote app before Unity also helped ๐Ÿ™‚

Now, go and make games! ๐Ÿ˜‰

– Henning