When building a game, you might want to let your player know in which area of the game he currently is.

This is done using Areas and Area Types – they are created in the ORK Framework editor and added to a scene using the Area component.

A notification about the area can automatically be displayed when the player walks into an area. Information about the current area can be displayed in HUDs, menus and dialogue texts using the area text codes (learn more about text codes in this how-to).

Adding new colors

To make things a bit more interesting, we want to use different colors in the area notifications, so we need to add new colors first. Open the ORK Framework editor and navigate to Game > Colors.

Add a four new colors and change the following settings.

Color 2

  • Name
    Change to Yellow.
  • Color
    Select a yellow color in the color editor (R=1G=1, B=0A=1).

Color 3

  • Name
    Change to Red.
  • Color
    Select a red color in the color editor (R=1G=0, B=0A=1).

Color 4

  • Name
    Change to Green.
  • Color
    Select a red color in the color editor (R=0G=1, B=0A=1).

Color 5

  • Name
    Change to Blue.
  • Color
    Select a red color in the color editor (R=0G=0, B=1A=1).

That’s it for the colors.

A new GUI box …

We need to create a new GUI box that will be used to display the area notification when the player walks into a new area. Navigate to Menus > GUI Boxes.

To make things easier, we’ll copy our main menu GUI box (the first in the list) and change the following settings in the newly created GUI box.

Base Settings

  • Name
    Change to Area Notification.
  • Height Adjustment
    Select Auto.

Content Box Settings

  • Bounds
    Set to X=640, Y=800, W=400 and H=200.
  • Anchor
    Select Lower Center.

Name Box Settings

  • Bounds
    Set to X=0Y=0W=200 and H=50.
  • Anchor
    Select Lower Left.
  • Relative Bounds
    Enable this setting.
  • Relative To
    Select Upper Left.
  • Adjust Width
    Enable this setting.
  • Adjust Height
    Enable this setting.
  • Color (Text Format)
    Select Yellow (the color we just created).
    The text in the name box will be displayed using this color.
  • Font Size (Text Format)
    Change to 15.
  • Font Style (Text Format)
    Select Bold.

We’re done with the GUI box.

The notification layout

Now we need to set up the default area notification layout – the layout decides which things the notification will display, each area can override the default layout with a custom layout. Navigate to Game > Game Settings and change the following settings.

Area Settings > Area Notification Layout

  • Show Notification
    Enable this setting.
  • GUI Box
    Select Area Notification (the GUI box we just created).
  • Visible Time (s)
    Set to 3.
    The notification will be visible for 3 seconds.
  • Show Title
    Enable this setting.
    We want to display the name of the area’s type in the name box of the GUI box.
    Change the title text field to %tn.
  • Text
    To edit the text of the notification, click on Edit.
    We will be using some text codes to change the alignment and color of the text (learn more about text codes in this how-to).
  • Change the first line of the text to %n and select the whole line.
    Now we use the text editor buttons to align the text at the center and change the text color.
    With the text selected, click on Center, now click on More and Colors. Select the color Red and click on Add.
    The text line should now look like this: #text.center#text.color3#%n#<color
  • Move the text cursor to the end of the line (nothing selected) and hit enter to start a new line.
    Change the new text line to %d and select the whole line again.
    Use the text editor buttons again to align the text to the left – click on Left.
  • The whole text should look like this:
    #text.center#text.color3#%n#<color
    #text.left%d
  • Click on Ok to confirm the changes to the text.

That’s it for the notification layout.

Adding area types

Area types are used to organize areas. Navigate to World > Area Types, we need two area types, so add a new area type to the already existing one. Change the following settings.

Area type 0

  • Name
    Change to Town.
  • Description
    Change to A peaceful town..

Area type 1

  • Name
    Change to Field.
  • Description
    Change to An adventurous field..

That’s it for the area types.

Adding areas

Navigate to World > Areas. We need 7 areas (3 in the town, 4 in the field), so add 6 new areas to the already existing one. Change the following settings.

Area 0

  • Name
    Change to Town entrance.
  • Description
    Change to Take care when leaving the town!.
  • Area Type
    Select Town.

Area 1

  • Name
    Change to Tree square.
  • Description
    Change to Rest below the shady tree..
  • Area Type
    Select Town.

Area 2

  • Name
    Change to Backyard.
  • Description
    Change to Looking for backyard sales?.
  • Area Type
    Select Town.

Area 3

  • Name
    Change to Road to town.
  • Description
    Change to Follow this road to get to a town..
  • Area Type
    Select Field.

Area 4

  • Name
    Change to Woody road.
  • Description
    Change to A road through the woods..
  • Area Type
    Select Field.

Area 5

  • Name
    Change to Woody valley.
  • Description
    Change to A vally … with woods!.
  • Area Type
    Select Field.

Area 6

  • Name
    Change to Plain fields.
  • Description
    Change to Finally, no wood!.
  • Area Type
    Select Field.

That’s it for the areas – and our work in the ORK Framework editor.

Save the changes by clicking on Save Settings and close the ORK Framework editor. We will now add our new areas to the town and field scenes.

Town scene

Open the town scene (1 Town) and use the ORK Scene Wizard to add three areas to the scene: Create Object > Area.

Place the areas like this and select the equivalent area in the inspector of each area component.

gametutorial_7_areas1

Make sure to place the ares at the ground of the terrain, the player should be able to walk into them.

Save the scene.

Field scene

Open the field scene (2 Field) and use the scene wizard to add 9 areas to the scene (we will use the some areas more than once): Create Object > Area.

Using an area multiple times in a scene can be used to simply cover the entrances to an area, rather than placing a huge area over the whole thing. This also allows more detailed placement. The area notification will only displayed when the player enters a new area, so walking into an area component with the same area wont display the notification again.

Place the areas like this and select the equivalent area in the inspector of each area component.

gametutorial_7_areas2

Make sure to place the ares at the ground of the terrain, the player should be able to walk into them. You can also use a different collider (like a Box Collider) for your areas – just make sure to enable Is Trigger.

Save the scene.

That’s all we need to do, so change to the main menu scene (0 Main Menu) and hit play. You’ll now see the area notification when you walk into a new area.

Tip: Keeping things in order

When creating complex scenes, it’s always a good idea to keep things in order. For areas, make sure to name your game objects accordingly.

You can also use an empty game object as a parent for all areas, to group them together in the scene hierarchy.

gametutorial_7_areas3

This way you have a structured scene and have no problem finding things again.

And that’s it for now – the next lesson will cover status values – this means we’ll get to serious business from now on!