“Back to Square One” prototype made with Unity and LeanTween

Datetime:2016-08-22 23:07:03          Topic: Unity           Share

If you liked the HTML5 prototype of “Back to Square One” I showed you last week, you will be happy to know I ported the code to Unity using C# and LeanTween .

What is LeanTween? Well, you should know Unity is awesome but it does not natively support tweens like Phaser does. Too good there are some interesting tween libraries in the asset store, most of them free, and after a quick overview I choosed LeanTween .

Apart from that, I tried to keep the code as similar to itsPhaser counterpart as possible, I am just using another sprite as pivot point to rotate the square as with Unity you can’t change the registration point of a sprite at runtime. Actually, you can try some workaround but it’s a hassle. Guaranteed. It’s much easier to create a sprite as pivot point and attach the square to be rotated as child.

Have a look at what we are going to create:

Click on the stage to make the square roll and the terrain scroll. You will see two little red square. The one you see at the bottom right of the square is the pivot point, while the one you see as you start moving the square is the parent of all terrain tiles.

I am assuming you know how to create prefab, scripts and cameras in Unity, if you are in trouble check my Unity Flappy Bird prototype which explains all the basic concepts.

I placed all the code in one single class, so have a look at the code commented line by line:

using UnityEngine;
using System.Collections;
public class MainScript : MonoBehaviour {
 // public variables. Values are set in the editor
 // the square object
 public GameObjectsquareObject;
 // the pivot object
 public GameObjectpivotObject;
 // tansition speed, in seconds
 public float transitionSpeed;
 // private variables. Values are set in the script
 // the hero!!
 private GameObjectsquareHero;
 // hero pivot point. Basically another GameObject, the parent of squareHero
 private GameObjectsquareHeroPivot;
 // terrain pivot Point, the parent of all terrain tiles
 private GameObjectterrainPivot;
 // can the hero rotate?
 private bool canRotate = true;
 // array of two elements which will contain ground colors
 private Color[] colors = new Color[2];
 // this function is executed when the script is initialized.
 void Start () {
 // filling "colors" array
 colors [0] = Color.blue;
 colors [1] = Color.green;
 // placing squareHero on the centre of the stage
 squareHero = Instantiate(squareObject);
 // placing squareHeroPivot on the centre of the stage
 squareHeroPivot = Instantiate(pivotObject);
 // placing the pivot point in the lower right corner of squareHero
 squareHeroPivot.transform.position = new Vector2 (0.2f, -0.2f);
 // making squareHero child of squareHeroPivot
 squareHero.transform.parent = squareHeroPivot.transform;
 // now it's time to place the terrain pivot point
 terrainPivot = Instantiate(pivotObject);
 // we are going to add 10 terrain tiles, enough for our 320 pixels wide game
 for (int i = 0; i < 10; i++) {
 // placing a terrain tile on the centre of the stage
 GameObjectsquareTerrain = Instantiate (squareObject);
 // placing it accordingly
 squareTerrain.transform.position = new Vector2 (-1.6f + i * 0.4f, -0.4f);
 // giving the tile a tint color
 squareTerrain.GetComponent<Renderer> ().material.color = colors[i % 2];
 // making the tile child of the terrain pivot
 squareTerrain.transform.parent = terrainPivot.transform;
 // this function is executed at each frame.
 void Update () {
 // this is how we check if the player clicked
 if (Input.GetButtonDown ("Fire1") && canRotate) {
 // setting canRotate to false to prevent the player to rotate the square while it's already rotating
 canRotate = false;
 // getting current squareHeroPivot rotation, in degrees
 float currentRotation = squareHeroPivot.transform.rotation.eulerAngles.z;
 // getting current hero x position
 float currentHeroPosition = squareHeroPivot.transform.position.x;
 // getting current terrain x position
 float currentTerrainPosition = terrainPivot.transform.position.x;
 // the core of the script: LeanTween in action
 // rotateZ tweens rotation around Z axis, to currentRotation - 90 at "transitionSpeed" speed.
 // once completed, tweenComplete function is executed.
 LeanTween.rotateZ(squareHeroPivot, currentRotation - 90f, transitionSpeed).setOnComplete(tweenComplete);
 // moveX tweens position along x axis, to currentHeroPosition - 0.4 at "transitionSpeed" speed.
 LeanTween.moveX (squareHeroPivot, currentHeroPosition - 0.4f, transitionSpeed);
 LeanTween.moveX (terrainPivot, currentTerrainPosition - 0.4f, transitionSpeed);
 // tweenComplete function is called when the Z rotation has been completed
 void tweenComplete(){
 // the player can rotate again
 canRotate = true;
 // getting square pivot rotation, in degrees
 int rotation = (int)squareHeroPivot.transform.eulerAngles.z;
 // reposition the pivot so that it's always in the lower right corner of the square
 squareHeroPivot.transform.position = new Vector2 (0.2f, -0.2f);
 // changing hero position according to its pivot rotation, ready to start next rotation
 // this part can and should be optimized
 switch (rotation) {
 case 270:
 squareHero.transform.localPosition = new Vector2 (-0.2f, -0.2f);
 case 180:
 squareHero.transform.localPosition = new Vector2 (0.2f, -0.2f);
 case 90:
 squareHero.transform.localPosition = new Vector2 (0.2f, 0.2f);
 case 0:
 squareHero.transform.localPosition = new Vector2 (-0.2f, 0.2f);
 // by default we assume the leftmost child of the tarrain is the first children...
 TransformleftmostChild = terrainPivot.transform.GetChild (0).transform;
 // ... but we loop through all other children comparing their x position to find the actual leftmost child
 for (int i = 1; i < 10; i++) {
 if (terrainPivot.transform.GetChild (i).transform.position.x < leftmostChild.transform.position.x) {
 leftmostChild = terrainPivot.transform.GetChild (i).transform;
 // at this time we move the leftmost child after the rightmost tile, creating an infinite terrain without deleting old tiles and creating new tiles
 leftmostChild.transform.position = new Vector2 (2f, -0.4f);

That’s all at the moment, I plan to turn both this prototype and the Phaser prototype into two simple games, and at the moment you can download the complete project .

From null to full HTML5 cross platform game

I will take you by hand from the bare bones of JavaScript programming through the creation of a full cross platform HTML5 game, with detailed explainations and source code.

If you don't know where to start, then From null to full HTML5 cross platform game is the book for you.

About List