Circle Chain (http://www.emanueleferonato.com/stuff/circle_chain/) is a simple game developed in 2007 by Emanuele Feronato (http://www.emanueleferonato.com) as a monetization test in Flash Games. In fact it's based on Boomshine (http://www.k2xl.com/games/boomshine/)
Emanuele has since, ported his game tutorial for lots of platforms:
AS3: (complete) http://www.emanueleferonato.com/2012/02/20/circle-chain-ported-to-as3-with-commented-source-code-available-ready-to-jump-to-the-iphone/
Game Maker: (basic) http://www.emanueleferonato.com/2012/06/07/circle-chain-engine-made-with-game-maker/
Construct2 HTML5: http://www.emanueleferonato.com/2012/03/14/html5-version-of-circle-chain-engine-using-scirras-construct2/
Corona SDK: http://www.emanueleferonato.com/2012/02/24/basic-circle-chain-engine-using-corona-sdk/
Gideros Studio: http://www.emanueleferonato.com/2012/04/12/basic-circle-chain-engine-using-gideros-studio/
Stencyl: http://www.emanueleferonato.com/2012/02/29/basic-circle-chain-engine-using-stencylworks/
Starling: http://www.emanueleferonato.com/2012/05/22/circle-chain-engine-using-starling/
CreateJS: http://www.emanueleferonato.com/2012/10/31/circe-chain-engine-made-with-createjs-step-2/
Cocos2D HTML5: http://www.emanueleferonato.com/2013/05/28/from-zero-to-a-complete-game-with-cocos2d-html5-step-3-chain-reaction/
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 10x10 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:
https://mega.co.nz/#!0k5SnTpC!Mp0hfAJ2tBRlf6q1PYQUs09u1xEfwGqVMCxnPymG_oc
Comentários