Game Design:INTRO to UNITY for 2D GAMES Creating a Basic Platformer

Game Design:INTRO to UNITY for 2D GAMES Creating a Basic Platformer

Game Design:INTRO TO UNITY FOR 2D GAMES – Creating a Basic Platformer

BASICS OF 2D:

Unity Scene: Hit the 2D button at Scene top to lock out of the Z-axis.
Unity Inspector: set PNG art as “Sprites” and set "Order in layer" to decide placement:

  • Higher numbers = closer to camera
  • Lower numbers = further away
  • Use only even numbers to allow space for more insertions later.

Use only 2D Physics: Rigidbody 2D, Box Collider 2D, etc.

PAINTING BACKGROUNDS:
Paint art bitmap (PSD) or vector (FLA, AI). Export as PNG, quality 24, size power-of-2.

  • Standard game display = 1280x720, 72 ppi.Paint 2x size for HD/retina display.
  • To export as layers, foreground midground layers need empty “opacity” space.
  • For tiling/scrolling art, consider at least 3 horizontal screens, with furthest right & left sides matching. (See longer, multi-layer art in Rayman Legends play-thrus).
  • For a 2d platformer, paintFG or MG to include art which looks like platforms.

STEP 1: BACKGROUNDS IN UNITY: Move copies of PNGs into the assets folder of the Project, select each PNG and in Inspector set texture type from "texture" to "Sprite," set Pixels to Unit, and hit Apply. Pixels to Unit: # pixels = 1meter of Unity space, so the larger the number the smaller/denser the art appears on the screen. Foreground should appear smallest/densest, background should be largest/least dense.

Try this to start: FG=60, MG=50, BG=40
Move background sprites with the move tool in the Scene view, and set Camera distance in Inspector with Z position.

STEP 2: PLATFORMS: To make platform art areas collide-able, create new Empty GameObjects in the Hierarchy and to each add Component/Physics 2D/Box Collider 2D (you can create just one and [Ctrl]/[Cmd]+[d] to make easy copies—name them!). Each of these colliders can be sized, positioned, and rotated to fit the image of platforms in the art. Colliders will be invisible unless selected in the Hierarchy.
STEP 3: PLATFORMER PLAYER CHARACTER:
For a basic static (non-animated) Player Character: Create a small 2D image for character art, 72ppi and power-of-2 (like 256x256). Add to your Project.

  • In Inspector set Texture Type = “Sprite”, leave Pixels per Unit=100.
  • Add to Scene, select in Hierarchy and set Order in Layer = a high number (100, if you want the character to be foremost).
  • Add Component/Physics 2D/Box Collider 2D, and reduce size.
  • Add Component/Physics2D/RigidBody 2D, and turn on Fixed Angle.
  • Create a new C# script, title PlayerControl, add to character with movement, jumping, and flipping methods in Update.

Basic 2D Player Control script:

using UnityEngine;

using System.Collections;

public classPlayerControl : MonoBehaviour {

publicfloat speed = 0.2f ;

publicstring axisName = "Horizontal";

publicfloat jump = 1;

void Update () {

//movement code

transform.position += transform.right *Input.GetAxis(axisName)* speed;

//jump code

if(Input.GetKey(KeyCode.UpArrow)){

Vector3 position = this.transform.position;

position.y += jump / 4;

this.transform.position = position;

}

//flip character based on movement direction

if (Input.GetAxis (axisName) < 0){

Vector3 newScale = transform.localScale;

newScale.x = 1.0f;

transform.localScale = newScale;

}

else if (Input.GetAxis (axisName) > 0){

Vector3 newScale =transform.localScale;

newScale.x = -1.0f;

transform.localScale = newScale;

}

}

}

More Advanced:

CHARACTER ANIMATION in Unity 2d (from Photoshop):

IN PHOTOSHOP: Create character art/animation poses. Create a power-of-two PNG and evenly distribute character poses, consistently positioned.

IN UNITY:

a) SLICE SPRITESHEET:Add Spritesheet to Project. Set Texture Type = Sprite, Sprite Mode = Multiple. Hit [Sprite Editor]. In UpperRight Open “Slice”. Set Type= Grid Pixel Size to evenly surround character poses. Hit Slice. Can revise and re-slice. Hit Apply.
b) ADD PLAYER:Open Spritesheet in Project, choose Idle frame, drag into Scene, name Player.In Inspector,set "Order in Layer" = highest (100).Add Component/ Physics2D /Box Collider 2D and RigidBody 2D, set Gravity Scale = 4, Fixed Angle.
c) SET ANIMATION CLIPS:Open Window/Animation (2D Characters, lights, particles). Select the Player in the Hierarchy (clips will be made on what is selected).

  1. Click arrows above "Add Curve" to get "Create New Clip". Name clip idle.anim.
  2. Drag idle frames from the Project to just below the name in the Animation window to add them to the clip timeline.
  3. Change sample framerate, typically to 20 (or 5 for 2-frame animations).

Repeat these steps for all intended character motions: run, jump, etc.
d) Select the Player in the Hierarchy.In the Inspector note the newAnimator (named for Player), created automatically when Animation clips were made.
Doubleclick Animator in Project to open the State Machine.
Link up states with transitions: [any state]->[jump]->[idle]-<-[run], etc.
Create parameters in the upper-left corner of the State Machine:
Trigger named "jump"Bool named "run"Etc.
Select each transition and in the Inspector add parameters. The transition from the “run”clip back to the “idle” clip, for example, should be "Run" and "False".

And disable Exit Time on the run transition!

Add movement script to player. This will include playing the animation

This can be done with a Basic/General command…:

anim.Play("run");andanim.Play("jump");.

…or a more Advanced/Specific command:

anim.SetBool("run", true);andanim.SetTrigger("jump");

Once the following script changes are added, drag the Animator into the slot in the Inspector:
Animated 2D Player Control script. Boldface=new content:

public classPlayerControlAnimated : MonoBehaviour {

publicfloat speed = 0.2f ;

publicstring axisName = "Horizontal";

publicfloat jump = 1;

public Animator anim;

void Start () {

anim = gameObject.GetComponent<Animator> ();

}

void Update () {

//movement code

if (Input.GetKey(KeyCode.LeftArrow) || Input.GetKey(KeyCode.RightArrow)){

transform.position += transform.right * Input.GetAxis(axisName)* speed;

anim.SetBool("run", true); }

else { anim.SetBool("run", false); }

//jump code

if (Input.GetKey(KeyCode.UpArrow)){

Vector3 position = this.transform.position;

position.y += jump / 4;

this.transform.position = position;

anim.SetTrigger("jump");

}

anim.SetFloat("speed", Mathf.Abs(Input.GetAxis(axisName)));

//flip character based on movement direction

if (Input.GetAxis (axisName) < 0){

Vector3 newScale = transform.localScale;

newScale.x = 1.0f;

transform.localScale = newScale;

}

else if (Input.GetAxis (axisName) > 0){

Vector3 newScale =transform.localScale;

newScale.x = -1.0f;

transform.localScale = newScale;

}

}

}

1

Top View