All posts in "C#"

Building Flappy Bird #8 – UGUI – Building the UI

Welcome back!  In this section, we’ll add a scoring system.

 

The plan…

For our scoring system, we’ll use the bubble image we have in the art folder.

We’ll setup our game so that the player needs to pop bubbles for points.

To display the score, you’ll need UI components.  We’ll use the Unity3D UI system to accomplish this.

UGUI – The Unity3D GUI system

The Unity GUI system will allow us to easily draw text and graphics over our game.

Getting started with the GUI system is pretty simple, we just need to add a GUI game object.

Add a Text object by selecting GameObject->UI->Text

In your Hierarchy, you should see TWO new GameObjects.  There’s the Text that you added and a Canvas that is it’s parent.

The Canvas is the root of your UI, and all UI elements must be children of such a Canvas.

Because we didn’t already have a Canvas in our Scene, the editor automatically created one for us and added our new Text GameObject as a child.

In your game view, you should see our new Text object in the bottom left.

Let’s edit our Text object to say something more meaningful than “New Text”

With the Text GameObject selected, look at the Text component in the Inspector and notice the “Text” field.

Change it to say “Score: 0”

Anchoring

Right now, our UI component isn’t positioned correctly.  We could drag it around until it looks close, but right now it’s Anchored from the middle, so it would be at different areas depending on the screen size.  What we want for this game is to anchor the score text to the top left of the screen.  To accomplish this, we’ll use the “Anchor Presets”.

On the transform for the Text, click the Anchor tool (the red cross with a white box in the middle, the mouse is over it in the screenshot)

You’ll be presented with this dialog.

We want to select the top left point, but before you click it, notice the text at the top of the dialog.

For this UI component, we want to set the position along with the anchor, so before you click the pivot, hold the Alt key.

You should now notice your Score Text has moved to the top left corner of the screen.

Before we go too much further, let’s re-name the Text to something useful.

Change the name to “ScoreText”

Experiment

Try playing with the text component for a few minutes.

Adjust things like the font size, style, and color to get familiar with some of your options.

If you increase the font over 26, you’ll notice that it’s no-longer visible in your game view.

This is because the text is too large to fit into the component.  You can fix this by increasing the size of the text component.

Let’s Code

It’s time to hookup some code to make our score counter work.

The first thing we want to do is create a script to handle keeping score.

Create a new script named “ScoreKeeper”

Change the ScoreKeeper.cs file to look like this


using UnityEngine;
using UnityEngine.UI;

public class ScoreKeeper : MonoBehaviour
{
  private int _currentScore = 0;

  public void IncrementScore()
  {
    _currentScore++;
    Text scoreText = GetComponent<Text>();
    scoreText.text = "Score: " + _currentScore.ToString();
  } 

  void Update()
  {
    IncrementScore(); 
  } 
} 

Attach the “ScoreKeeper” script to the ScoreText GameObject

Before you hit play, look at the script and see if you can guess what it’s going to do.

 

Score Changing

Score Changing

 

Let’s inspect the different parts of this script to see what’s going on.

using UnityEngine.UI;

You’ve seen the “using” statements before.  What they do is tell the engine that we want to “use” components from that namespace.

In computing, a namespace is a set of symbols that are used to organize objects of various kinds, so that these objects may be referred to by name.

In this instance, we’re just telling Unity that we’ll be “using” UI components in our script.

private int _currentScore = 0;

Here, we’re defining a variable to hold our current score and setting it’s value to 0.


public void IncrementScore()
{
   _currentScore++;
   Text scoreText = GetComponent&amp;amp;amp;lt;Text&amp;amp;amp;gt;();
   scoreText.text = "Score: " + _currentScore.ToString();
}

The IncrementScore method does 3 things.

  • Adds one to the score using the ++ operator.  This could also be written as
    _currentScore = _currentScore + 1;
  • Gets the Text Component and assigns it to a local variable named “scoreText”
  • Sets the .text property of the “scoreText” object to have our new current score.

    ToString() gives us a text representation of a a non-text object

The last bit of code we have is the Update method.  All it’s doing is calling IncrementScore.  Because Update is called every frame, our IncrementScore method is called every frame, which in turn makes our score increase.  In this instance, the faster our game is running, the faster our score will increase.


void Update()
{
  IncrementScore();
}

The Update method is really just implemented so we can see something working.  For our game, we’ll have a more complicated scoring system, so let’s delete the Update method.

Change your ScoreKeeper script to look like this


using UnityEngine;
using UnityEngine.UI;

public class ScoreKeeper : MonoBehaviour
{
  private int _currentScore = 0;

  public void IncrementScore()
  {
    _currentScore++;
    Text scoreText = GetComponent<Text>();
    scoreText.text = "Score: " + _currentScore.ToString();
  }
}

 

Now that our code has changed, we need another way to call the IncrementScore method….

In comes the bubble

Look to your art folder in the Project View.

Drag a bubble from the Art folder into your scene.

Dragging Bubble to Scene

Dragging Bubble to Scene

Now, add a CircleCollider2D component to the newly placed bubble.

Check the IsTrigger box.

 

Let’s Code

We’ve got our bubble placed, but we really need to get some code in to make things work.

 

 

 

using UnityEngine;
public class Bubble : MonoBehaviour
{
  [SerializeField]
  private float _moveSpeed = 1f;

  // Update is called once per frame
  void Update()
  {
    transform.Translate(Vector3.up * Time.deltaTime * _moveSpeed);
    if (transform.position.y > 10)
    {
      Reset();
    }
  }

  void Reset()
  {
    transform.position = new Vector3(transform.position.x, -10, transform.position.z);
  }

  void OnTriggerEnter2D(Collider2D other)
  {
    if (OtherIsTheFish(other))
    {
      ScoreKeeper scoreKeeper = GameObject.FindObjectOfType<ScoreKeeper>();
      scoreKeeper.IncrementScore();
      Reset();
    }
  }

  bool OtherIsTheFish(Collider2D other)
  {
    return (other.GetComponent<Fish>() != null);
  }
}

Attach the bubble script to your bubble in the Hierarchy.

Now try playing and see if you can catch the bubble.

Cant catch the bubble

Cant catch the bubble

If you placed your bubble like I placed mine, it can’t be caught.

The reason for this is that we only ever change the Y position of the bubble, so it never moves past us.

Instead of adding more code to the bubble, we’ve got another trick we’ll be using.

Set the bubbles position to [2.5, -4, 0]

Now, make the bubble a child of the seaweed parent.

Bubble becoming a child of seaweed parent

Bubble becoming a child of seaweed parent

In the Inspector, hit the Apply button so that all our seaweed parents get a bubble.

Now give your game another play and enjoy your great work!

If all went well, it should look a bit like this

Popping Bubbles

Popping Bubbles

 

Next Up: We’ll randomize our bubbles, fix more bugs, and polish up our graphics (and maybe build out to a phone).

Continue reading >
Share

Building Flappy Bird #7 – Props &Experimentation

Building Flappy Bird #7 – Props and Experimentation

In this post, we’ll add some props to make our game feel a little more polished.

Let’s get right to it!

Props

To get started, take the crab from the art folder and drag it to your Hierarchy.

Change the position and scale of the crab to match the image.

Take special note of the Z value “-1”.  This is needed to make the crab appear in front of the ground.

Once you have the settings copied, try playing with the Z value and see how it disappears when the Z is not a negative value.

Your crab should look like this.

If your crab is above or below the ground, try adjusting the Y position until it looks right.

 

Hit Play and watch the crab not move.

How do we move the crab???

Easy!  We re-use the “MoveLeft” script from before.

Attach the “MoveLeft” script to the crab

Set the speed to 2.5

Click play again and watch the crab disappear off our screen only to reappear later.

 

Let’s do it again!

Let’s add another prop using the same technique as before.

Grab the starfish and drag it to the Hierarchy.

Set it’s position and scale to match these

Add the “MoveLeft” script to the starfish.

Your starfish should look something like this.

If your starfish is above or below the ground, try adjusting the Y position until it looks right.

 

One Last time…

If you were looking around in the art folder, you may have guessed, we still need to add the clam.

Drag the clam to your Hierarchy.

Set it’s position and scale to match these

Add the “MoveLeft” script to the CLAM.

Now it’s time to play!  Give your game a test run and make sure the Crab, Clam, and Starfish are re-appearing properly.

If you played, you may have noticed a bug in our game.

When the props re-appear on the right side of the screen, they’re going to a random height.

To fix this, we need to add an option to our “MoveLeft” script.

Change your “MoveLeft” script to match this


using UnityEngine;

public class MoveLeft : MonoBehaviour
{

  [SerializeField]
  private float _speed = 5f;
  [SerializeField]
  private bool _randomizeHeight = true;

  // Update is called once per frame
  void Update()
  {
    transform.Translate(Vector3.left * Time.deltaTime * _speed);
    if (transform.position.x < -15)
    {
      if (_randomizeHeight)
      {
        float randomYPosition = UnityEngine.Random.Range(-3, 3);
        transform.position = new Vector3(15, randomYPosition, 0);
      }
      else
      {
        transform.position = new Vector3(15, transform.position.y, 0);
      }
    }
  }
}

Now, on your Clam, Starfish, and Crab, uncheck the Randomize Height option in the Inspector.

Play again and you should see your props preserving their Y position.

Save your Scene

It’s time to save our scene.  Select File->Save Scene As

Browse to the Scenes folder

Give your scene a unique name, or copy mine.

You can verify that your scene is saved by looking in the Scenes folder.

Now repeat this process to save our experimental scene.

Your scenes folder should now look like this

The top left area of the unity application bar shows the name of the currently loaded scene.

Great work so far, now it’s time to have a little fun and get creative!

Experiment

ctrl/cmd-s will save the currently opened scene

For this part, I want you to add some more props and place them where ever you like.

Spend 5 minutes trying things out.

Play with their scale, position, and rotation until you get something YOU LIKE.

Come back once you’re happy with your changes.

Now SAVE your scene so you don’t lose that customization.

Optional

If you like, you can even find some external art.

One of the easiest places to use is google images.

Just make sure that you select “Transparent” for the “Color” when searching.

If you don’t see Color, click the “Search tools”

To download an image from google images, just click on it to get the full art view, then right click and hit “Save image as…”

 

Next Up: Scoring

In the next post, we’ll add an interesting scoring system.

You’ll get a nice introduction to the Unity3D GUI system and add a goal for your players.

 

Continue reading >
Share

Building Flappy Bird #6 – Randomization & Ground

Building Flappy Bird #6 – Randomization & Ground

Right now, our game is a bit too easy.  It goes on forever, but it’s always exactly the same.

What we want to do next is add some variation to the seaweed.  To accomplish this, we’ll have our game pick a randomized Y value for the position.

Since we already move our seaweed when it gets to -15 on the X axis, we can make do the randomization at that time.

 

To do the randomization, we’ll just call into the Random function Unity provides us.

float randomYPosition = UnityEngine.Random.Range(-3, 3);

UnityEngine.Random.Range will return a value between the first and second numbers passed in.  For this example, we’re passing negative 3 and positive 3, so we’ll get a number somewhere between there.

Change your “MoveLeft” script to match this

using UnityEngine;
using System.Collections;

public class MoveLeft : MonoBehaviour {

  [SerializeField]
  private float _speed = 5f;
  // Update is called once per frame
  void Update () {
    transform.Translate(Vector3.left * Time.deltaTime * _speed);
    if (transform.position.x < -15)
    {
      float randomYPosition = UnityEngine.Random.Range(-3, 3);
      transform.position = new Vector3(15, randomYPosition, 0);
    }
  }
}

 

Give the game a play now.

Seaweed Random Height

 

Notice how the seaweed Y position is changing just enough to add some difficulty to our game.

Cheats (Bugs we should fix)

There's No Floor

 

If you’ve been playing all these times I said to Play, you’ve probably noticed a few issues.

For example, if you fall down without hitting a seaweed, you just fall, there’s no ground.  The same goes for flying too high, you can go above the seaweed and just hang out there safely.

Open the “Fish” script and modify the Update() method to match this

 

// Update is called once per frame
void Update () {
  bool pressedFireButton = Input.GetButton("Fire1");
  if (pressedFireButton)
  {
    Rigidbody2D rigidbody = GetComponent<Rigidbody2D>();
    rigidbody.velocity = Vector3.zero;
    rigidbody.AddForce(Vector3.up * _upwardForceMultiplier);
  }

  if (transform.position.y > 6f || transform.position.y < -6f)
  {
    Application.LoadLevel(0);
  }
}

Fish Floor

Fish Floor

If you play again, you’ll see that when the fish drops below -6 on the Y axis, the fish dies and the level re-loads.

The same happens if you click fast enough and bring your above positive 6 on the Y axis.

 

Real Ground

Let’s add some real ground now.  In Flappy Bird, we have a simple striped ground (mario ground).  For our game, we have some dirt.

To do this, we’re actually going to add a quad to our scene.  The quad is located under 3D assets, but it does exactly what we need for our 2D game.

Remember you can mix and match 2D/3D in your games.

 

Rename the new quad to “Ground”

Quad renamed to Ground

Adjust the position to [0, -4.8, 0].  Y is -4.8

Set the X value of Scale to 20.

Your Game View should now look like this

 

Materials

A quad is not a sprite, so we don’t have a Sprite Renderer.

What we have instead is a Mesh Renderer.

What we need to do is change the Material of our renderer.  The art package you downloaded in part 1 has a materials folder with a material named “Ground”.

Drag that “Ground” material and drop it onto the “Ground” Game Object in the Hierarchy.

You could also drag the material onto the area that says “Element 0” in the screenshot above.

 

Adding material to ground

Adding material to ground

Since the quad is a 3D object, when we added it, there was a 3D collider attached to it.  That collider is a new type that we haven’t used before called a MeshCollider.

We’re building a 2D game though, so we need to remove that 3D collider.

Removing the MeshCollider

Removing the MeshCollider

 

Then add a BoxCollider2D to our “ground”.

Your BoxCollider2D should have a nice rectangular green outline.

When we hit the ground, we want it to do the same thing the seaweed does, so let’s reuse one of our old scripts.

Add the “SeaweedCollisionHandler” script to the “ground”

Get ready to play

Now think for a second.

What do you expect to happen?

..

..

Go ahead and hit play to see if you were right.

Strange sliding fish

Strange sliding fish

What’s going on?

Right now, it probably seems think things have gotten worse.

Your fish is sliding along the ground.  The seaweed is sliding along the ground.  And your fish isn’t dying until he slides in.

If you remember from part 2, we forgot to check the IsTrigger checkbox.

Go ahead and check it now, then give it another try.

Your fish should now be dying the moment it touches the ground.

Animating the Ground

The last thing we need to do is get our ground animating.  Previously, when we wanted things to move, we applied a Translate on their rigidbody.

For the ground though, we’re doing something different.  We created the ground as a Quad for a specific reason.  We want to animate the texture on it, without actually moving the transform.

To do that, we’ll need to create a new script.  Create one now named “GroundScroller”.

Open the “GroundScroller” script and edit it to match this


using UnityEngine;

public class GroundScroller : MonoBehaviour {

  [SerializeField]
  private float _scrollSpeed = 5f;

  // Update is called once per frame
  void Update()
  {
    // Get the current offset
    Vector2 currentTextureOffset = this.GetComponent<Renderer>().material.GetTextureOffset("_MainTex");

    // Determine the amount to scroll this frame
    float distanceToScrollLeft = Time.deltaTime * _scrollSpeed;

    // Calculate the new offset (Add current + distance)
    float newTextureOffset_X = currentTextureOffset.x + distanceToScrollLeft;

    // Create a new Vector2 with the updated offset
    currentTextureOffset = new Vector2(newTextureOffset_X, currentTextureOffset.y);

    // Set the offset to our new value
    this.GetComponent<Renderer>().material.SetTextureOffset("_MainTex", currentTextureOffset);
  }
}

Attach the “GroundScroller” script to the Ground GameObject

Try playing again and watch the ground scroll along with the seaweed!

 

Ground scrolling too fast

Ground scrolling too fast

Well, maybe it’s not quote scrolling “along” with the seaweed.  It’s going a bit too fast and looks pretty strange.

Luckily, if you were paying attention to the code, we’ve added a variable to adjust the scroll speed.

If you try to adjust the speed while playing, it’s going to keep resetting.  This is because of how we’re handling death.  When we do a LoadLevel to reload the scene, all of those gameobjects are being re-loaded and re-created.

We have a couple of options for finding the correct speed.

  1. Change our death system to not use LoadLevel
  2. Stop the game, adjust the value, hit play, rinse, repeat (until we get the right value).
  3. Disable the fish and adjust while the game plays.

Personally, I prefer the easy way, so let’s go with option c.

  1. Stop playing.
  2. Now disable the Fish.
  3. Start Playing again
  4. Adjust the speed until find a reasonable value. (I ended up with 1.5)
  5. Memorize that number
  6. Stop playing
  7. Re-enter that number.

Now play one more time and enjoy what you’ve made.  See how far you can get.

 

Next Up

Great work so far.  Our game has come together and is functional and fun.

In the next part, we’ll make our game a little fancier with some props and add a unique scoring system.

Continue to: 

Building Flappy Bird #7 – Props &Experimentation

Continue reading >
Share

Building Flappy Bird #5 – Movement

Time to Move

So now that we have all of our seaweed, it’s time to start moving through them.

If you remember from before, we’re not actually going to move our fish.

Instead, we’ll move the seaweed past our fish.

Let’s create a new script named “MoveLeft”

Here’s our starting MoveLeft file.

using UnityEngine;
using System.Collections;

public class MoveLeft : MonoBehaviour {

  // Use this for initialization
  void Start () {

  }

  // Update is called once per frame
  void Update () {

  }
}

For our “MoveLeft” script, we don’t need anything in the Start method, so delete that now.

In our Update method, we want the object the script is on to move to the left, so add the following line of code.

transform.Translate(Vector3.left * Time.deltaTime);

The transform here is the transform you see in the inspector with the position, rotation, and scale.

Translate just moves the transform’s position in the direction and magnitude of the Vector3 we pass in.

What we’re passing in is Vector3.left multiplied by the amount of time that has passed since the last frame.

If you remember, our game will run somewhere between 30 and 90 frames per second.  Because the frame rate is variable, we want to use the amount of time passed since the last update.  This makes it so our seaweed move the same speed regardless how fast our device can run the game.

The final script should look like this

using UnityEngine;
using System.Collections;

public class MoveLeft : MonoBehaviour {

  // Update is called once per frame
  void Update () {
    transform.Translate(Vector3.left * Time.deltaTime);
  }
}

….

Time.deltaTime is the amount of time passed since the call to Update().  This number is generally really small around 0.0166.  It’s calculated in Unity3D by dividing 1 by your framerate.  (1/60 = 0.0166)

Now go back to the Editor and select the “seaweed parent” in our Project View.

With the “seaweed parent” Prefab selected, look to the Inspector(the one in the Project view is the Prefab)

Add the “MoveLeft” script to our “seaweed parent”.

Now try playing again.

If your seaweed isn’t moving, go to your code editor and make sure you saved your changes to the “MoveLeft” script.

If all went well, you should see your seaweed all moving to the left and your fish appears to be swimming forward.

Seaweed Moving

Seaweed Moving

Why Prefabs are Great

Once you’re done playing, I want you to select one of the seaweed’s in your Hierarchy (it doesn’t matter which one)

Notice that the “MoveLeft” script was added to it.

This is where the power of Prefabs comes into play.

Any change you make to the Prefab will be automatically applied to placed instances of that Prefab.  (this applies in all of your scenes when you have multiple)

If you take a closer look at the Transform, you’ll notice the Position & Rotation are bold.

Properties that are bold are not using the values from the Prefab.  If you modify a property of a GameObject in the Hierarcy View, it will become bold and no-longer take changes from it’s Prefab.

Speed things up

Right now, our seaweed is moving pretty slow.  Let’s modify the “MoveLeft” script to make the seaweed speed adjustable.

Edit your “MoveLeft” script to match this

using UnityEngine;
using System.Collections;

public class MoveLeft : MonoBehaviour {

  [SerializeField]
  private float _speed = 5f;

  // Update is called once per frame
  void Update () {
     transform.Translate(Vector3.left * Time.deltaTime * _speed);
  }

}

Here you can see we’ve introduced a variable with the [SerializeField] attribute on it just like we did previously with the fish.

We then multiply our translation by that new “_speed” variable.

We set the default for _speed to 5f, so it should move 5 times faster than before.

Try playing again.

 

For me, 5 seems a bit too fast.  Because we used [SerlaizeField], we can adjust this speed directly in the editor.

Select the Prefab for our seaweed and adjust the speed until you find a # that feels right.

The final speed I used is 2.5

If you accidentally did your editing on an instance of the seaweed from the Hierarchy instead of the Prefab in the Project view, no problem!

You can actually apply your changes from a placed instance to it’s Prefab (and all other instances) by simply clicking the “Apply” button at the top of the inspector.

Let’s play some more

Give the game another try and see if you can get through all the seaweed.

They’re Gone!

If you’re any good at this game, you noticed all the seaweed disappeared to the left.

You may be wondering if you should add more seaweed to make the level bigger, or if you should move the fish, or maybe the seaweed?

If you weren’t, start wondering now and see what ideas you come up with.

While there are many different ways you could accomplish making this game go on longer, the easiest and best is to just move the seaweed once it goes out of view.

To do this, we need to go back to our “MoveLeft” script.

Change your script to match this

 

using UnityEngine;
using System.Collections;

public class MoveLeft : MonoBehaviour {

  [SerializeField]
  private float _speed = 5f;

  // Update is called once per frame
  void Update ()
  {
    transform.Translate(Vector3.left * Time.deltaTime * _speed);
    if (transform.position.x < -15)
    {
      transform.position = new Vector3(15, 0, 0);
    }
  }
}

Let’s focus on the new lines of code. Lines 13-16
First, we look at the X value of the transforms position.
If that X value is less than -15, we execute the code inside the brackets { }
The code in the brackets is setting the position of the seaweeds transform.
The value we’re setting it to is 15 for the X and 0 for Y & Z. [15, 0, 0]

So all we’re really doing here is checking if a seaweed moved far enough to the left. (negative X values are left of our fish who’s at 0)

If the seaweed is far enough over at -15 or further, we move it back to the right, but far enough off the right side that our players won’t see it on their screen.

 

 

Save the script and play again.

I’ve split my Scene & Game views again here.  I recommend you do the same to get a good idea of what’s going on.

Seaweed Reuse

Seaweed Reuse

 

Next – Randomization & Ground – We’ll add some randomization, some ground, and a couple props.

Continue reading >
Share

Building Flappy Bird #4 – Prefabs

Prefabs – Moving with Parents

If you’ve followed along so far, you have a pretty fun game.  You can fall down and die, or keep hitting space to stay alive.

While I’m sure that will lead to hours of fun, let’s try making it a bit more difficult.

Adding the Top

The first thing we need to do is add a top seaweed.

To do this, we’ll duplicate the bottom one, then move it, and flip it over.

Select the seaweed in the Hierarchy

Right Click and select Duplicate  (the hotkey for this is ctrl-d or cmd-d)

 

The duplicate should be selected automatically and be named seaweed (1) since it’s the first duplicate.

 

Set the rotation Z axis of the new seaweed to 180.

Set the position Y value to positive 6.

Your Game View should look like this

Go ahead and hit play.  Try to balance between the 2 seaweeds without dying.

Clean Up

Let’s do a little cleaning of our game object names.

Rename the bottom seaweed from “seaweed” to “seaweed bottom”

If you don’t remember how to rename, select the seaweed in the Hierarchy and hit F2.  Alternatively you can rename it in the Inspector by typing where the name is.

Next, rename the top seaweed from “seaweed (1)” to “seaweed top”.

While the names of these game objects doesn’t technically matter, it’s useful for us to have good names for our objects.  It makes them easier for us to find and differentiate later in our development.

Empty Game Objects & Parenting

Now, we’re going to create a Game Object that has nothing other than a transform.

To do this, select GameObject->Create Empty from the menu.

You should see a newly created Game Object in your Hierarchy with the name “GameObject”

Let’s rename this right away to “seaweed parent

Now set the X, Y, & Z values of the position to 0.  If the were already 0 for you don’t worry about it

Becoming Children

Next, we’re going to make our seaweed bottom & seaweed top into children of seaweed parent.

To do this, just drag them one at a time in the Hierarchy view onto the seaweed parent.

Becoming Children

Becoming Children

Now that the top and bottom are children of the parent, changes to the parent will affect them.

If you move the seaweed parent around, you’ll see the children move along with it, but always stay the same relative to each other.

If you haven’t done it already, go over to the Scene View now and try moving around the seaweed parent.

Select the move tool

Move it around

Move Parent

 

Now let’s reset the position to 0, 0, 0

Prefabs

A Prefab is a GameObject that exists in your Project, not only in a Scene.

Think of them like a blueprint or design of a GameObject that you want to re-use multiple times.

Since we want to create a Prefab now, let’s first make a folder to hold our Prefabs.

Right click and Hit Create->Folder

To create a prefab, you can drag a GameObject from the Hierarchy to a folder in the Project View.

Creating a Prefab

Creating a Prefab

You’ll notice the “seaweed parent” turned blue.

A blue GameObject is using a Prefab.  (if you see a red GameObject, that means it’s using a Prefab but the Prefab is broken or missing)

Duplication

Now we need to add a few more seaweeds to our scene.

To do this, select the “seaweed parent”, right-click, and select Duplicate.

You should see a GameObject named “seaweed parent (1)”

Look to the Inspector and set the X value of position for “seaweed parent (1)” to 5.

You should now be able to see your second seaweed, it’s just moved a little to the right(5 units to be exact)

Now, let’s recombine our Scene and Game views back into tabs so we can get a bigger view of the Scene.

If you’ve dragged your Scene or Game view to a second monitor, you don’t need to do this.

Select the Scene view tab and zoom out using your mouse wheel or touch pad.

Duplicate your seaweed parent again. (or the copy of your seaweed parent, they’re both the same thing)

Set the X position of the new one to 10.  (in the inspector)

Repeat this process 4 more times.  Each time, add 5 to the X position.

The end result should look like this

 

Continue to: Part 5 – Unity3D – Moving our Fish

Continue reading >
Share

Building Flappy Bird #3 – Physics & Collisions

Unity3D – Physics & Collisions

In this part, we’ll add some seaweed and learn about the Unity3D physics system.  We’ll learn how to handle collisions in Unity3D and kill some fish.

Let’s get started

Now that we have a fish that jumps in place, let’s add something for him to jump over.  You may have noticed in the Art folder we have a sprite named “seaweed”.  Let’s place a seaweed in our scene by dragging it from the Art folder (in the Project View) over to the Scene View.

Scene - Seaweed

Scene – Seaweed

Once it’s placed, let’s adjust the position in the inspector.  We’ll set the X to 0 and the Y to -6.

Inspector - Seaweed

Inspector – Seaweed

Let’s Play

Before you hit play, think for a second about what you expect to happen.

  • Will the fish fall through the seaweed?
  • Will he hit it and die?
  • Will he land on top?
  • Once you’ve picked an answer, hit play and watch what actually happens.

What’s Missing?

If you guessed that the fish would fall through, great job.  If not, let me explain why it happened.  For our fish to collide with the seaweed, we need to tell the Unity3D physics engine that these GameObjects should collide.  Luckily, that’s a very simple task for us to accomplish.  What we need to do first is add a collider to our fish.  A collider is just another component and we add it just like any other component.

  1. Select the Fish.
  2. In the inspector, hit Add Component.
  3. Find the PolygonCollider2D and add it.
Inspector - Fish Add Polygon Collider 2D

Inspector – Fish Add Polygon Collider 2D

Once you add the Collider, your fish should get a green outline.

Scene - Fish Polygon Collider2D

Scene – Zoomed in to see collider

Let’s think again.  If we hit play now, what will happen?  If you’re not sure, give it a try.

Game View - Fish Falling through Seaweed

Game View – Fish Falling through Seaweed

The fish is still falling through.  You probably already guessed, but what’s missing is a collider on the seaweed.

Let’s add one now.

The Seaweed

Select the seaweed, then add a Polygon Collider2D, just like we did with the fish earlier.

Inspector - Seaweed Add PolygonCollider2D

Inspector – Seaweed Add PolygonCollider2D

You should notice the collider on the seaweed.

Scene - Seaweed with Collider

Scene – Seaweed with Collider

Now hit play one more time.  I promise something will happen now.

Rolling Fish

Rolling Fish

If you want to see why the fish is rolling off the side, separate out your scene and game view.

To separate the views, just left click and hold the mouse button.  While you’re holding the button, drag the mouse and the panel will detach.  If you move to the right a bit, you should be able to dock them side by side.

Split Game And Scene View

Split Game And Scene View

Now hit play again and watch the fish falling along the collider of the seaweed.

 

Collision Handling

What we need to do now is handle the collision.  The physics engine in Unity3D can detect collisions or make things roll and bounce on it’s own, but what we want to do is make the player lose the game.  In Flappy Bird, if your bird touches a tube, you lose the game.  We want to do the same thing here.  To do that, we need to create a new script and attach it to our seaweed.

Create a new C# script in the Code folder.

Name it “SeaweedCollisionHandler”

Project - Creating Seaweed Collision Handler

Project View – Creating Seaweed Collision Handler

Double click the “SeaweedCollisionHandler” file to open it in our editor (MonoDevelop or Visual Studio).

The file should look like this.

using UnityEngine;
using System.Collections;

public class SeaweedCollisionHandler : MonoBehaviour {

  // Use this for initialization
  void Start() {

  }

  // Update is called once per frame
  void Update() {

  }
}

Since we won’t be using Start & Update on the SeaweedCollisionHandler, let’s delete them and add in some collision handling code instead.

Change your file to match this.

using UnityEngine;
using System.Collections;

public class SeaweedCollisionHandler : MonoBehaviour {

  void OnTriggerEnter2D(Collider2D other)
  {
    Debug.Log("Entered");
  }

}

Save the file then go back to the Unity3D Editor.
Select
the “seaweed” GameObject in the Heirarchy then add the “SeaweedCollisionHandler” script to it in the inspector.

Next, on the PolygonCollider2D component, check the IsTrigger checkbox.

A picture of the inspector showing the Seaweed Collision Handler script attached to the seaweed game object

Seaweed with SeaweedCollisionHandler Script

Now hit Play and watch what happens.

Because we checked IsTrigger, the fish no-longer rolls off the seaweed.

Instead, it calls into our OnTriggerEnter code that we added to the SeaweedCollisionHandler.

And in our OnTriggerEnter code, we write a line of text to our debug console.

To view the debug console, just click the Console tab next to the Project tab.

You should see a single line of text in there that says “Entered”.

If you didn’t get that, double check that IsTrigger is checked and that the SeaweedCollisionHandler is attached to the correct GameObject (“seaweed”).

Now let’s Save our Scene

Before we save, let’s create a folder for Scenes

To create the folder, just right click and select Create->Folder

Now go to the File menu and select Save Scene As

Browse to the Scenes folder and Name our Scene “Fish“, then hit Save.

Time to Die

We really want our fish to die when he hits the seaweed (at least we do if we want our game to be like flappy bird).

Let’s go into the SeaweedCollisionHandler script and make it happen!

Edit the script to look like this:

using UnityEngine;
using System.Collections;
using UnityEngine.SceneManagement;

public class SeaweedCollisionHandler : MonoBehaviour {

  void OnTriggerEnter2D(Collider2D other)
  {
    SceneManager.LoadScene(0);
  }

}

That’s it.  Now play the game and watch what happens.

When you hit the seaweed, your fish appears in the starting location again.

Fish Falling

Fish Falling

This happens because we’re reloading our level.  (level & scene are interchangable terms for the Unity engine)

The LoadLevel command will load a Scene by Name or Index.

In this instance, we’re using the Index 0.  (that just means it’s the first in the list of our scenes.  1 would be the second scene, 2 would be the third)

Application.LoadLevel(0);

Because we don’t have our project setup with a list of scenes, it’s just using our current scene.

Let’s change that now

Under the File Menu, select Build Settings…

Click the Add Current button.

You should see your scene added to the list.

Saving our Project

Up to this point, we haven’t really done anything that required us to save our project.  We’ve saved our scene and scripts, but the project itself hasn’t been saved since we created it.

Because we changed some project settings, we need to save the project to make sure those settings aren’t lost.

When you were setting up your build options, you may have already seen the Save Project button.

Go ahead and hit that now to save our new settings.

Click File, then Save Project.

A saving dialog will pop up and disappear shortly after.  If your computer is fast, you may not even notice it, but your project should be saved now.

Great work so far.  In the next part, we’ll turn this into an actual game.  We’ll add more seaweed, and start making the fish swim through them.

Continue to:  Unity3D Intro – Building Flappy Bird – Part 4 – Prefabs

Continue reading >
Share

Building Flappy Bird #2 – Let’s Code

Building Flappy Bird in Unity3D – Part 2 – Let’s code

Code in Unity3D can be done in either C# or Javascript.  If you don’t have a preference, I’d recommend C# for your development.  It’s much more popular in the Unity3D community.  Most samples you find will be in C# only.  For this tutorial though, I’ll provide both the C# & Javascript versions.

Moving the Fish

If you’ve played Flappy Bird before, you know the bird flys to the right of your screen past a bunch of tubes.  Or at least that’s what it looks like.  In reality, the bird is just going up and down and the tubes are moving.  So for our game, all we need the fish to do is go up when we tap the screen (or click the mouse).

First we need to create a folder for our code.  In the root of the Project view, create a new folder named Code.

Project Code

Project Code

In the Code folder, right click and create a new C# script.

Project Create CSharp Script

Project Create CSharp Script

Name the new file “Fish”

Project Fish CSharp File

Project View Fish CSharp File

If you need to re-name a script, just select it and hit F2.

Windows Only Section (Optional)

If you’re using Windows, I want you to switch your editor to Visual Studio now.  You can use MonoDevelop (the default editor), but the benefits of using Visual Studio make me HIGHLY recommend it.

To switch to Visual Studio, select Edit->Preferences

Preferences Menu

Preferences Menu

Go to the External Tools section and set your External Script Editor to Visual Studio 2015.

Settings - Select Visual Studio

Settings – Select Visual Studio

 

Back to our Code (Mac & Windows)

Now, double click the newly created Fish script.

You should be presented with a code file that looks like this.

using UnityEngine;
using System.Collections;

public class Fish : MonoBehaviour {

 // Use this for initialization
 void Start () {

 }

 // Update is called once per frame
 void Update () {

 }
}

In Unity3D, every Component on a GameObject must inherit from MonoBehavior.  If you don’t know what this means, don’t worry, you’ll pick it up.  What this means for us though is that our Fish script has some default functions we can hook into.  You can see two of these functions in your code now.

  • Start – Any code in here will be called when the GameObject is created in our game.  If it was placed in the Hierarchy (like our fish will be), it’s called when the game starts.
  • Update – Any code we place in here will be called once per Frame.  In a typical game, we’ll have 30-90FPS (Frames per second).  This means that the code here will get called 30-90 times per second.

InputManager

To move the fish, we’ll need to read the players Input.  Because this is such a common thing to do, there’s a very simple way to get it.

Modify your Update function to look like this.

// Update is called once per frame
 void Update () {
   bool pressedFireButton = Input.GetButtonDown("Fire1");
   if (pressedFireButton)
   {
      Rigidbody2D rigidbody = GetComponent<Rigidbody2D>();
      rigidbody.velocity = Vector3.zero;
      rigidbody.AddForce(Vector3.up * 1000);
   }
 }

Now let’s look at the code and see what it’s doing, line by line.

bool pressedFireButton = Input.GetButton("Fire1");

Here, we’re creating a new variable named pressedFireButton.
It’s type is bool – A bool variable can be either true or false.

We’re assigning it a value from our Input system by calling the GetButton method.  The GetButton method takes one parameter which is the name of the button.  We’re passing in the button name “Fire1” and the function will return True if we’ve pressed one of the inputs mapped to it.

Fire1 is a default button in Unity3D that is mapped to many things [Space, Left-Ctrl, Left Click, A button (Xbox), X button (PS), etc].

Checking Conditions

Next we have some conditional code.  This line checks to see if the result of our input check was true.  If so, the code following it in braces {  } will be executed.

if (pressedFireButton)
{
 ... everything in here will execute
}

So if we have pressed the “Fire1” button (ex. tapped space), everything inside the braces will execute.  This will only happen ONCE per press.  You must release and re-press the button for the GetButton(“Fire1”) call to return true.

Handling Physics

The first thing we do inside the braces, is get the RigidBody2D component.  This is the same component you added to the Fish earlier (when it started reacting to gravity).

Rigidbody2D rigidbody = GetComponent<Rigidbody2D>();

The properties we care about are X, Y, & Z.  These are numeric values that represent a measurement on their corresponding axis.

We assign the RigidBody2D of our fish to the variable named “rigidbody”.

The “velocity” of our rigidbody is how fast it’s moving.  It’s measured in a Vector3, which is just a simple data structure containing 3 values (and a couple calculated properties we’ll worry about later).

On the next line, we set the velocity of our rigidbody to Vector3.zero.

rigidbody.velocity = Vector3.zero;

 Vector3.zero is just a shortcut to get a Vector3 with 0 for all 3 of it’s values.

This completely stops our rigidbody.  If it was falling, going up, or in any other direction, this line of code stops it.

So setting the velocity of our rigidbody to Vector3.zero is setting the rate of movement to 0 in all directions.

Adding some Force

Next, we want to add some force and push our Fish upward.

rigidbody.AddForce(Vector3.up * 1000);

AddForce does exactly what the name says.  It takes a single parameter, which is a Vector3.  We pass in Vector3.up, which is just another shortcut to get a Vector3 pointing in the default upward direction.  But before AddForce evaluates the Vector, we multiply it by 1000, so the resulting input is a Vector3 with the values [0, 1000, 0].

You may have already skipped ahead and tried it out.  If not, get in the editor, hit play and try out our input handling.  You should be able to click spaceleft-ctrl, or your mouse’s left-click.  Notice how the fish STOPS, then gets force added.  If we didn’t Stop the fish, you’d have to click very fast just to keep from falling.

It’s too much!

Fish flying too far

Fish flying too far

You may have noticed that the amount of force we’re adding is too much.  Your fish is probably flying way off the top of the screen.  We have a couple ways we could address this problem.  The simplest is to just change that value of 1000 that we used earlier to something smaller.  Go ahead and try that now.  Make sure to SAVE the changed file or Unity3D won’t pick up your changes.

Another way to make these changes is to expose the multiplier we’re using in the Unity3D editor.  Specifically, we’ll exposed it on the Fish component of the Inspector.  To do this, we need to introduce a variable to our Fish class and add a special attribute to it so Unity3D knows we want to edit it.

Change your Fish.cs file to look like this.  Bold parts show the changes.

using UnityEngine;
using System.Collections;

public class Fish : MonoBehaviour {

 [SerializeField]
 private float _upwardForceMultiplier = 100f;

 // Use this for initialization
 void Start () {

 }

 // Update is called once per frame
 void Update () {
   bool pressedFireButton = Input.GetButton("Fire1");
   if (pressedFireButton)
   {
      Rigidbody2D rigidbody = GetComponent<Rigidbody2D>();

      rigidbody.velocity = Vector3.zero;

      rigidbody.AddForce(Vector3.up * _upwardForceMultiplier);
   }
 }
}

What we’ve done here is introduce “_upwardForceMultipler”.  We’ve set the default value to 100f.  The “f” on the end just signifies it’s a floating point value.

Most positional math in Unity3D and other game engines is done with floating point numbers.

Save the changes you’ve made here, then jump back to the editor.

Select the Fish.

You should now see an extra field in the Fish component that matches our variable name.  If you don’t see the component, hit Play, then Stop.  Playing forces a compile, which makes the engine update to your most changes.

Inspector - Upward Force Multiplier

Inspector – Upward Force Multiplier

Now we don’t have to change code to modify our force.  We can simply adjust the number in here until we get a value we’re happy with.  Go ahead and try it now.  Make sure you’re NOT in PLAY mode when making the changes though.

Changes done while you’re in Play mode do not save.  There are good reasons for this that we’ll cover later, but for now, just make sure you’re not playing when you make your changes (or they’ll be lost and you’ll have to do them again).

After a little trial and error, I ended up with 200 for my multiplier.  If you have a different # that’s okay, go with something that feels right to you.  You can always adjust this value later, and now that it’s in the Inspector, you can do it easily.

Continue to: Part 3 – Unity3D Physics & Collisions

We’ll add some Seaweed, learn about Physics & Collisions, and even kill a fish.

Continue reading >
Share

Building Flappy Bird #1 – Unity Intro

Building Flappy Bird in Unity

Unity is a great engine, but like all game engines it has a little learning curve.  This tutorial is designed to take you through the entire process of building a 2D game in Unity that will run on the web, pc/mac, and mobile.  By the time you complete this project, you’ll understand:

  • The different areas of the Unity editor
  • Importing Art
  • Using the Physics system
  • Handling Input
  • Writing a little code (even if you’ve never written code before)

Let’s get started!

Importing the Art Package

In the editor, click Assets, Import Package, Custom Package

Importing a Unity Package

Select Assets->Import Package->Custom Package…

Browse to the Art assets package.  If you don’t have it, you can download it by clicking here.

Import package file list shows of all the files in the package

Import Package File List

You’ll be presented with a file list dialog.  This dialog allows you to select which files in the package you want to import.  By default, all files will be selected.

For now, click “Import”.

Next, focus your attention on the Hierarchy section of the editor.  It should be in the top left corner and contain a single GameObject named “Main Camera”

Hierarchy With Main Camera

Hierarchy With Main Camera

Select the Main Camera by clicking on it.

Hierarchy With Main Camera-Selected

Hierarchy With Main Camera-Selected

Selected GameObjects in your Hierarchy will show blue.  You can select any number of GameObjects at the same time.  For now though, we only have one available to us, so let’s look over to the other side.

Inspector View of "MainCamera"

Inspector View of “MainCamera”

On the right we have the Inspector area.  Here you can see or inspect details about your selected GameObjects.  Notice that the inspector shows 5 components because we’ve selected the default camera object Unity creates for us.   The 2 components you care about today are the Transform and the Camera.

Transform

EVERY GameObject in Unity has a Transform.  The transform controls the objects Position, Rotation, and Scale.

  • Position - The location of the object in the world or relative to it's parent.
  • Rotation - The direction the object is facing.
  • Scale - The size of the object.

Camera

This component allows our game to render.  This is the area we want to modify now.

First, try adjusting the “Background” value and notice how the background changes in the Game View (located in the center) or the Camera Preview.

To change the background, just click on the area showing the current color in the inspector.  The default is blue.

Color Picker

Color Picker

Once you’ve found a water color you like, you need to make sure the Camera Perspective is set to Orthographic.  (It should be by default, but we need to make sure)

Project View

It’s time to put something in our game.  Look to the bottom of your editor where you’ll see the Project area.

Project View

Project View

Browse to the art folder and select the Fish

Project View - Art Folder

Project View – Art Folder

Drag the Fish to the Hierarchy.

You should see the fish in your Hierarchy and in your Scene or Game View.

You can toggle between the 2 views using the tabs, or drag them out to separate them

Scene View Fish

Scene View Fish

Game View Fish

Game View Fish

Play Mode

Now, I want you to hit the Play button and watch what happens!

Game Play Button

Game Play Button

If you’ve followed along so far, nothing should have happened.  The Game View will automatically focus, but nothing should be moving.

Let’s make something happen…

With the Fish selected, hop over to the Inspector.

Click the big Add Component button.

Start typing and find the RigidBody2D.

You can alternatively browse to it under Physics2D.

 

Inspector Add Component

Inspector Add Component

The RigidBody2D component will make our GameObject (the Fish in this instance) interact with the games physics system.  One of those interactions is gravity…

Inspector RigidBody2D

Inspector RigidBody2D

Let’s Play

First, I want you to think for a second.  When you hit “Play” what do you expect will happen?  Say it to yourself, then hit the button and see if you’re right.

If you thought the fish would fall, great.  If not, don’t worry about it.  Because our fish has a RigidBody, it uses gravity (unless Gravity Scale is set to 0).  If there are no other forces acting on the object, the RigidBody will make it fall straight down.

In Part 2, we’ll start handling input and adding some additional force to keep the fish from falling away.

Continue To: Part 2 – Let’s Code!

 

Sign up here to be automatically notified about new posts


Continue reading >
Share

GIT – You should be using it

You should be using GIT

If you’ve been using source control, but haven’t made the change to git yet, let me try to convince you.  I first heard about git a few years ago.  It sounded interesting at the time, but my source control was working fine (or so I thought), so I didn’t pay too much attention.  Around 4yrs ago, I started a new project and had to pick a source control system.  One of the options we tried out was git.  Like most people, I searched google, read a bit of the docs, then hopped into the command line.  It was a disaster….

I’ve used command lines since the C64 days, can easily handle dos, powershell, and USED to be good with with linux.  That said, I’ve been primarily developing on windows, building games, websites and apps since the 90’s.  Using git via the command line felt un-intuitive and confusing.  Combining that with a new set of definitions for commands made it more confusing.  All this combined into the perfect storm of confusion.

Around 2 years ago I attended a few “Intro to Git” talks that explained the basics.  They always covered how git works and how to get around the command line.  They’d occasionally touch on the fact that visual tools existed, but they’d  focus on the command line because people who love git enough to do talks on it, love command lines.

The first thing I want to say if you’ve been avoiding git because it seems complicated/confusing, ignore the command line.  You can learn to use it later.  For now, grab one of the good graphical tools and get a bit of experience with git.  My preferred git tool is SourceTree.

Graphical tools have existed for every other source control system, so you may still need some more convincing.  The typical git pitch mentions things like offline commits & easy branching.  I won’t be covering those today.  Instead, I’ll focus on 4 points where git excels which I think may be more convincing.

#1. No file locking / read-only files

This may not be an issue for everyone, but if you’ve been a long time perforce user then you’ve fought with read-only files.  If you also happen to use Unity3D, you’ve realized just how terrible it can be.  With git, your files will no-longer be locked, read-only, or need to be checked out before you can work.

#2. Partial file commits

This one alone may be enough to convert some people.  Before switching to git, I can’t count the # of times where I was working on a feature, but needed to make a quick minor fix.  Before git, I’d stash my changes to the file in question, make the fix, and hope everything still built.  Then I’d commit, un-stash, and hope I didn’t mess up my previous work.

Git offers the perfect solution to this.  Partial commits.  If you’re using source tree, you can see just how easy it is in the image below. SourceTree - Free GIT GUI It will find the different areas of your file that have changed, and you just choose the part(s) you want to stage for commit.  You can simply commit what you want, and leave out everything else you’ve been working on.

 

#3. Commit changes without pushing them

You can commit, without pushing out your changes to anyone else.  If you’re still working on a feature, not sure about your code, or you’re just afraid to break an upcoming release, you can still commit.  Until you PUSH, your code is only committed locally.  You can roll back your changes, modify them, etc, without anyone else having access to the code until you’re ready.   It’s liberating…

#4. Finding changes is EASY

I can’t speak for all version control systems, but in many, finding your changes can be a pain.  Some systems like P4 require you or a plugin to specify each file (there are ways to find them, but they’re a pain too).  With git, it looks at the file system and sees your changes every time.  In the graphical tools, you get a nice easy view of all your changed files where you can choose which ones (or parts) to stage for commit.

There are of course many other reasons to use git.  It’s taken over as the primary source control system because it’s better than the competition.  I’m happy to have made the switch, and can’t imagine ever going back.  I hope I’ve convinced you as well.

Continue reading >
Share

SoCal Code Camp – L.A. (Nov 14th & 15th)

The summer session of SoCal Code Camp is coming up soon.

If you’re in the area, come check out my talks.

Intro to Unity Part I – 2D Games

In this session we’ll build a clone of a popular 2D mobile game in under an hour.  You’ll be introduced to the basics of the Unity3D engine and editor.  We’ll cover 2d physics & collisions, sprites, input, movement, and more.  By the end of the session we’ll build the working game to an android device.  After the session you should be able to recreate the basics of a few popular games.

Intro to Unity Part II – 3D & VR

The final session in this series is all about 3D game development and Virtual Reality.  Here, we’ll cover the differences between 2D & 3D games.  We’ll import some assets, setup animations, launch baseballs, then turn it into a VR experience.  After the session, you’ll be able to try out the virtual world we’ve built on the GearVR.

Continue reading >
Share
Page 4 of 5