Codementor Events

Getting started with Unity: Transition between 2 scenes via an input action Part 1

Published Nov 24, 2019Last updated May 21, 2020
Getting started with Unity: Transition between 2 scenes via an input action Part 1

This weeks project might seem a bit simple, but even the simplest project can be intimidating if you don't have a clue where to start.

The outputs I wanted and my goals were to have more than one scene, and via an input action, zoom and change to the other scenes. After accessing the second scene, there should be interactable game objects with pop ups when clicked on.

Project Setup

  • Create a new Unity 3D project
  • Create 2 scene’s. An outsideTomb scene and an Inside Tomb scene
  • Download the free assets from the asset store for pyramids and tourists
    • I used _DesertKits64_Sample for the scenery and Toony Tiny People for the tourists
  • Download fire particle system packages, I used PyroParticles from the asset store
  • Download some ambient desert SFX, and sinister SFX for inside the Tomb. I used Freesound.org to get all my audio
  • Download a desert background png and Speech bubble png
    • Import this png and update the settings in the inspector Under Texture Type to Sprite (2D and UI)
    • Click on apply

2D sprite Texturetype.png

  • Build out 3D scene for the outsideTomb scene as you want. The assets that you have downloaded and imported can just be dragged into the scene into the and dropped.
  • You can move them around and stylize as you want, have fun here!!

Screen Shot 2019-08-20 at 6.29.34 pm.png
scenesetup in scene view.png

Outside Tomb Scene

Organising your project

My OCD for neatness kicks in here, I like having everything related to each other in their seperate folders. This is how I ordered it:

  • Create 4 empty game objects and reset the inspector values

reset inspector game object values.png

  • These will be the parent Folders to keep the Hierarchy view neat and tidy

  • Rename each game object to:

    • BG
    • Terrain
    • Characters
    • ParticleSystems

    parent folders.png

  • Move the 2D background png into the bg folder. I have 2 different backgrounds to choose from so that I can swap between them. If I wanted a sunset background or a day desert scene, then I can just enable and disable the image game object to whichever one I want.

desert scene.png

  • Move all 3D game objects into the terrain folder. This would be anything relating to the scenery.
  • Move the characters into the characters folder
  • Move the fire particle system game objects into the Particle system folder

Now that my OCD is taken care of, I want some ambient audio in my demo

  • Create a new blank game object and reset the values as per above
  • Rename the game object to AudioSource
  • On this game object click on Add Component
  • Type out Audio Source and click add

audiosource component.png

  • I want my SFX to loop, as the audio is ambient .
  • Tick the loop option, and make sure Play on Awake is also ticked (but this should be set as default)

settoloop.png

  • Let's decide now what game object in the “outdoor scene” is going to be our trigger to transition into the “indoor scene”. I have chosen my zombie character to be the one to be clicked on. Our script will be coded to find a game object tagged as "Clickable" to know that this is the input object. I need to add the zombie character's tag in the following manner:

    • Click on your character
    • In the inspector, click on the drop down arrow by Tag
    • Click on Add Tag
    • Click on the plus sign
    • Type in the name “Clickable”
    • Click on save

    addtag.png

    • Go back to your character game object
    • Click on the drop down next to the heading tag
    • Select the option now that says “Clickable”
  • You have now retagged your Game Object. It is very important to note that in the code when you specify which object the ray collides with, that the spelling has to be identical to what you have tagged your object to. So look for spelling mistakes, lower cases , upper cases etc.

  • Last but most important of all, I create a new empty game object called GameController

GameController GO.png

Before scripting

There are a few actions we can do before any scripting is needed. For example, I want my characters to be animated, I need to create a Canvas for my UI interaction, and setup my particle system (fire).

Let's get started with animating our characters.

Animation

The designer of the characters I am using gave some awesome animations to go with the assets. They are not attached by default and I will need to set them up.

  • Create a new folder in the project view called animations
  • Click on Assets
  • Click on create
  • Click on Animation Controller

animationcontroller.png

  • Name it to what the animation is, in my case I will only be using the idle animation provided. So for the zombies idle animation controller I rename it to z_IdleController.
  • Double click on the newly created animation controller. This will change the view to the Animator window
  • Right click on the grid area in Animator
  • Click on create state
  • Click on empty

animator.png

  • This will create a new animation state, and will automatically create a transition between entry and your new state

createemptyanimatorstate.png

newstate.png

  • Click on the state called New State
  • In the inspector view, change the name from New State to the animation name IE, z_Idle
  • Click the “clock” next to motion
  • Here will be a list of animations that came with this package
  • Double click z_idle_A (or m_idle or f_idle, depends on what characters you chose)

selectanimationcontroller.png

  • Click on the Zombie character game object
  • click on the clock next to Controller under the Animator component
    • If you dont see the Animator component on your character game object
      • click on Add component
      • Type in Animator
      • click enter to add the component
  • Select the newly created animator controller from the list

selectanimationcontroller2.png

The idle animation is now all set, click on play and give it a test

z_idleanimation.gif

I feel my zombie’s idle is too slow, so I want to speed it up abit.

  • Go back to you z_IdleController in your animation folder and double click it
  • In the animator view, click on the state called z_idle
  • Change the speed value to 5 in the inspector

animationspeedvalue.png

Let's play it again,

z_idleanimationvalue5.gif

Perfect, let's move on!

  • You will do the same to setup your other characters with animations too, it's a rinse and repeat method!
  • This package has several animations to choose from, so add a few more characters and have fun with these animations!

Particle System Objects

The particle package I downloaded from the asset store has preset prefabs.

  • Drag in the prefabs of the various fire objects you would like in your scene. * I chose the campfire objects and placed them before my statues to give the demo some mystery and depth.

firePart.gif

That's it for particle system! All the work was done for us with these prefabs.
Thank you Mr Fire particle system effects creator!!

Creating the UI

I am using the canvas system for my popup bubble and for the text that is being displayed above my Zombie.

clickhere.png

  • Right click in the hierarchy area
  • Click on UI
  • Click on Image
    This will create a Canvas that is displayed over my 3D World, that has a new 2D sprite image as a child
  • Click on the new image game object under canvas
  • Rename it to something that makes sense to you, mine is called img_speechBubble
  • Drag your speech bubble 2D sprite into the source image area, if it doesn't want to drop into the image area, double check that you have updated the sprite texture type as previously mentioned to Sprite (2D and UI)

speechbubbleUI.png

  • Click on Set Native Size
  • Rescale the image as and how you would prefer

Lets now add the text to the speech bubble

  • Right click on the Canvas
  • Click on UI
  • Click on Text
  • Resize the font to fit in the bubble, and the position so its over the speech bubble

textobject.png

Audio

Remember the Audio Source game object we created earlier ? This is where we will now link our ambient desert sfx that will loop

  • Click on the AudioSource game object
  • Drag your SFX to the Audioclip section
  • Double check that Loop and Play on Awake is ticked, but it should be as we set it up earlier.

Audioclip.png

  • Click on play and see your work in action with no coding! In the famous words of Mr Bean's “Magicccccc.”
  • Make sure you hear your ambient background SFX.

outsidetomb.gif

Discover and read more posts from Melanie Leemans
get started