Wednesday, June 4, 2014

Turn based RPG with Unity 2D - Part 2: Camera control



So now our player character can move around in the grid but the camera is still. If we want the camera to follow, we need to add some script.

(Edited 28. June 2014 for better camera scale)
First, let's adjust the camera size. You probably have a preference how big everything looks on the screen but I like it in the scale 1 to 1. Let's do some math:

We have 1 unit which is 32 pixels. Let's say our screen height is 768 pixels. All we have to do is count the camera size with this formula:

screen_height / 2 * 1 / unit_size
=
768/2 * 1/ 32

The answer is 12. This is your camera size.


Now, create another script in the assets and call it CamController:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
using UnityEngine;
using System.Collections;

public class CamController : MonoBehaviour {
 
 public GameObject target;  // The player


 private Vector3  offset;

 void Start () {
   
  // Change the z value of the offset
  // to something below the sprites.
  // Otherwise you can't see anything:
  offset = new Vector3(0f, 0f, -10f);
 }
 
 void Update () {
  
 }
 
 // Let's put the movement in LateUpdate (called after Update function)
 void LateUpdate() {
  // Change camera's position to the same as the player (with the z-value of -10)
  transform.position = target.transform.position + offset;
 }
}


Now drag the script to the Main Camera -object in the hierarchy view. In the inspector, scroll down to Cam Controller (Script) component and set the target by clicking the small circle:

CamController in Main Camera object

Go back to PlayerController script and change the speed to something higher, like 50 to make the movement snappier.

---


Part 1: Grid movement
Part 2: Camera control
Part 3: Lighting
Part 4: NPC AI

Code highlighted with hilite.me

Turn based RPG with Unity 2D - Part 1: Grid movement (tutorial)

DISCLAIMER: This is my tutorial of making a really simple RPG or roguelike with Unity in 2D mode. I'm not a professional Unity developer (just picked it up) and I'm prototyping as I go. Feel free to comment some good practices.

---
Part 1: Grid movement
Part 2: Camera control
Part 3: Lighting
Part 4: NPC AI

Setting up the project

 

First, let's decide our cell size in the grid:

32 x 32 pixels - done.

Then start your new project normally (in 2D mode), let's call it RPGTutorial. Now I made a really simple 32 x 32 pixel square character for this purpose and imported it to Unity:

The character

Drag the character to Assets in Unity project

Then use the inspector (click the player sprite) and change the pixels to units to 32 and hit apply:




Then, for prototyping purposes I made a grid background (you will probably make the level with a tile based editor but for this purpose, I just quickly whipped up a single image and imported it to Unity):


Background

Also change the pixels to units to 32 for this asset, then drag it to the scene. Also drag the player sprite on top of the grid like so:

Scene view

Change the transform X and Y in the inspector to 0 (zero) for the grid to center it. For the player change the X and Y to -3.5 to put it in the corner.

Scripting


Create a new C# script in the assets and name it PlayerController. Edit the file like so:



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
using UnityEngine;
using System.Collections;

public class PlayerController : MonoBehaviour {
 
 private Vector2 pos;
 private bool moving = false;
  
 void Start () {
  // First store our current position when the
  // script is initialized.
  pos = transform.position;
 }
 
 void Update () {
 
  CheckInput();
  
  if(moving) {
   // pos is changed when there's input from the player
   transform.position = pos;
   moving = false;
  }
 }
 
 private void CheckInput() {
  
  // WASD control
  // We add the direction to our position,
  // this moves the character 1 unit (32 pixels)
  if (Input.GetKeyDown(KeyCode.D) || Input.GetKeyDown(KeyCode.RightArrow)) {
   pos += Vector2.right;
   moving = true;
  }
  
  // For left, we have to subtract the direction
  else if (Input.GetKeyDown(KeyCode.A) || Input.GetKeyDown(KeyCode.LeftArrow)) {
   pos -= Vector2.right;
   moving = true;
  }
  else if (Input.GetKeyDown(KeyCode.W) || Input.GetKeyDown(KeyCode.UpArrow)) {
   pos += Vector2.up;
   moving = true;
  }
  
  // Same as for the left, subtraction for down
  else if (Input.GetKeyDown(KeyCode.S) || Input.GetKeyDown(KeyCode.DownArrow)) {
   pos -= Vector2.up;
   moving = true;
  }
 }
}

Save the script and drag it from the assets to the player object in the Hierarchy view. Hit play and test the movement with WASD keys.

---


Part 1: Grid movement
Part 2: Camera control
Part 3: Lighting
Part 4: NPC AI

Code highlighted with hilite.me