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

Read all posts about "" game

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:

using UnityEngine;
using System.Collections;
public class Spawner : MonoBehaviour {
	// the circle object to be instantiated
	public GameObject greenCirclePrefab; //used to instanciate a new green circle object
	// some qty circle controls 
	public int maxCircle = 10;
	public int count = 0;
	// Use this for initialisation
	void Start () {
	}
	// Update is called once per frame
	void Update () {
		// instanciate a new circle
		if (count < maxCircle){ // maximum 10 circles same time
			Instantiate(greenCirclePrefab, transform.position, transform.rotation);
			count++;
		}
	}
}

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:

using UnityEngine;
using System.Collections;
public class CircleChain : MonoBehaviour {
	// for screen resolution calcs - we need convert pixels to unites positions (used in the 3D world)
	public Camera cam;
	public float screenX; // = Camera.current.ScreenToWorldPoint( new Vector3 (Screen.width, 0, 0)).x;
	public float screenY; // = Camera.current.ScreenToWorldPoint( new Vector3 (0, Screen.height, 0)).y;
	// some controllers
	public float circleSpeed = 1f; // controlls green circle speed
	public float speedX;
	public float speedY; 
	// Use this for initialization
	void Start () {
		cam = Camera.main.GetComponent<Camera>(); // get the Main Camera instance
		resetCircle(); // for Random position and direction of the green circles
		getCurrentMaxWorldScreen(); // get screen limits. I had hardcoded before but it wasn’t a good solution.
	}
	// Update is called once per frame
	void Update () {
		// update the green circle movement
		transform.Translate(new Vector3(speedX, speedY, 0) * circleSpeed * Time.deltaTime); //this.gameObject.transform.position;
		// if the GreenCircle goes out the screen we manage to put it back
		if(transform.position.x > (screenX)){
			transform.position = new Vector3(-screenX, transform.position.y, transform.position.z);
		}
		if(transform.position.x < -screenX){
			transform.position = new Vector3(screenX, transform.position.y, transform.position.z);
		}
		if(transform.position.y > screenY){
			transform.position = new Vector3(transform.position.x, -screenY, transform.position.z);
		}
		if(transform.position.y < -screenY){
			transform.position = new Vector3(transform.position.x, screenY, transform.position.z);
		}
		// check if the screen bonderies changed
		getCurrentMaxWorldScreen();
	}
	// gives GreenCircle obj random position and direction.
	public void resetCircle(){
		// random degrees (360) and give back as Radians
		float direction = Mathf.PI * Random.Range(0, 359) / 180 ;
		// new directions positions
		speedX = Mathf.Cos(direction);
		speedY = Mathf.Sin(direction);
		// set positions. the position Z doesn matter and I hardcoded to 10, like the value in Main Camera
		this.transform.position = new Vector3(speedX, speedY, 10); //this.gameObject.transform.position;
	}
	// get our screen limits
	public void getCurrentMaxWorldScreen(){
		screenX = cam.ScreenToWorldPoint( newVector3 (Screen.width, 0, 0)).x;
		screenY = cam.ScreenToWorldPoint( new Vector3 (0, Screen.height, 0)).y;
	}
}

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:

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers