GameDev Tutorial – Basic Circle Chain Engine Using Unity3D – part 1

As Unity3D becomes more and more the perfect tool for multi-platform development, I am going to start publishing Unity3D tutorials.

Today I got the permission from Alex Cançado to post a very detailed tutorial to create a Circle Chain prototype using Unity3D.

« Circle Chain is a simple game developed in 2007 by Emanuele Feronato as a monetization test in Flash Games. In fact it’s based on Boomshine.

Emanuele has since, ported his game tutorial for lots of platforms: AS3, Game Maker, Construct2 HTML5, Corona SDK, Gideros Studio, Stencyl, Starling, CreateJS, Cocos2D HTML5.

Now it’s my time to contribute, with my version of Circle Chain for Unity3D.

Well Unity3D is a bit more complicated.

In this moment there is a beta version of Unity supporting 2D games, but for now let’s say that there are no native support for 2D games in this amazing engine.

And anyway there are loads and loads of 2D games done with Unity3D!!!

I know that should have lots of different approaches to do a game like Circle Chain in Unity and this is just my way to do it. I know that Unity3D can be a bit annoying to 2D games. I had been intimidated before with thoughts like “it’s too complex”, “I don’t wanna do 3D games” and blah blah, but I stated for me, that it’s an amazing way to program in C# (or JS / Boo) in a complete game solution that is becoming default in the game industry. And can easily port games to other platforms like PC-MAC-LINUX, iOSes, Android, Blackberry10, WinPhone, Web and even consoles as Wii, Ps3 and Xbox. Not that my games will be in all platforms, but this possibility it’s pretty good.

Said that let’s start step by step here.

1. Open Unity3D then File>New Project. Just choose a place for your new Circle Chain project. You don’t need import any extra package. After that, go to File > Save Scene. It’s good to organise save your scene in a Scene folder under your Assets folder. But you can save anywhere.

2. Now you should have a new blank project in Unity3D. If you look at Hierarchy window you can see an default object “Main Camera”. It’s through this object that we will “see” our game in this 3D/2D world. But lets add a new Game Object first, “Directional Light”, because this world need some light! Go to GameObject > Create Other > Directional Light.

3. Now we need config our camera to fake a 2D vision in a 3D world. Click in “Main Camera” object from Hierarchy window and you will see the Main Camera attributes in window Inspector. The important thing here is set the attribute “Projection” to “Orthographic”.

4. It’s a start. Okay, so now we have to understand that for show an image here in Unity we will need a Plane object. I could say that a Plane is an 3D object that shows only one face. Then we can attach our image to this Plane and handle it to fake a 2D sprite, image, etc. Unity has it own Plane Object at GameObject > Create Other > Plane. But don’t use this Plane! Actually this Plane is a 10×10 single planes, so it can hurts our game performance.

So, instead, use a simple Plane like this: http://robotloveskitty.com/tiny.FBX . Digging at http://robotlovekitty.blogspot.co.nz/2011/11/2d-in-unity3d.html I found this useful object.

5. Just Drag and drop the FBX file in your Project window. I like to organise my file like this. Create directories as you wish organise your files. My FBX file is in the Model dir. Okay, the expand the “tiny” model and you will see the “Plane001”. That’s we gonna use! Select, drag and drop Plane001 to our Hierarchy window.

6. Okay we did a lot and still can’t see anything! But hey, we are almost there! Now you need import the Green Circle image to your project. Just drag and drop to a dir of your choose. For my project I had created a Texture folder and put the PNG file there.

7. After import the Green Circle image, if you click at, you should see the texture properties in the inspector window. The important here is the property ”Filter Mode” and select it to Point.

8. Now drag and drop this Greencircle from the project window to the Plane001 object at Hierarchy window. We are saying to Unity that this Plane now has the green circle image as texture. Rename the Plane001 to GreenCircle if you want.

9. Select the GreenCircle in the hierarchy window and look at his properties in the Inspector window. Probably you can’t see anything yet in the Scene/Game window. I had to increase the size of this object to 10 so it becomes visible. Another important thing is set the Shader to Transparent > Difuse. You can use Unlit > Transparent too, but unlit shader doesn’t interact with lights. Anyway, your choose.

Now when we select the Game window we can see:

10. But not yet! As we will instantiate the GreenCircle some times it’s better we create a Prefab from this object. Think a prefab as a object ready to be cloned. So we can instantiate a lot of GreenCircle clones by code with no need to keep then in the Scene window. Just drag and drop the GreenCircle from Hierarchy window to a folder in the Project window. I created a folder “Prefab” to put my prefab objects. When you create a prefab object this becomes blue in the Hierarchy window. Then I renamed my GreenCircle prefab to GreenCirclePrefab. Duh! You can delete the GreenCircle object from hierarchy window, if you wish, since we gonna instantiate the prefab of this object by code. Or you can keep this for while just for visual reference in the Scene/Game window.

11. If you press play you should see a green circle at centre and that’s it. So let’s add some interaction. I created a folder “Script” in my project window so I can keep my codes organised there. Select the folder you want your scripts, right click > create > c# script. Rename this file to “Spawner”. (Since I’m learning c# I will be doing my codes in c# but if you know Javascript or Boo you should convert everything easily). Right click on the Spawner C# and select Sync MonoDevelop Project.

12. A new basic C# class is created for you in the MonoDevelop (it’s the code editor used by Unity3D). Write like this:

13. Save it. Now we need add this script to some object. I choose use an existent object, like the Main Camera, instead create a new empty GameObject just to be my green circle spawner. So, drag and drop the C# Spawner from Project window to the Main Camera object at the Hierarchy window. Now you can see the c# code attached to the Main Camera as a component. In Unity all our public variables can be seeing and editable by the Inspector! Amazing! Ah! We still need to reference our Green Circle Prefab object. Just click in the circle next to “Green Circle Prefab” property and select “GreenCicrclePrefab”, yes that same prefab we created before.

14. Time to create the script for our green circles. Just like before, create a new C# script, name it to green circle and go to monodevelop:

15. As we did before, we need to add this script to some game object. In this case, let’s add to our GreenCirclePrefab object, in the project window. Select the prefab and in his Inspector window, at bottom click in Add Component button > Scripts > CircleChain C#. Now, every time we instantiate a Green Circle prefab object, this code will be running.

16. That’s it! Now we have a basic Circle Chain game mechanics working in Unity3D.

Download the project files

These links was useful for me:

  • codeBeast

    Yeap – great to see Unity tuts. So multiplatform – even Xbox and Ps3 – just imagine our educational software on the PS3. Kids are gonna love their homework from now on. Edutainment/EduGaming is the future for kids to learn.
    Got all our stuff in flash which is great for the moment. Can’t eait for the 2d product to come out. C sharp looks pretty easy so that should be fun too. Keep the UNity 3d tuts coming. Good start. Get some unity3d plugin tuts going available from the store. Cheers guys.

  • Phoenix

    Thank you very MUCH!!! Emanuele!!
    Waiting further tutorials for Unity3D!

  • govindaraj Kumaresan

    Cheers ema

  • Great tutorial, but I’m holding off getting into Unity until all their 2D stuff is released, hopefully will make things a lot easier.

  • Pingback: GameDev Tutorial – Basic Circle Chain Engine Using Unity3D – parts 2 and 3 - Emanuele Feronato()