Building Areas Tutorial
- This beginner tutorial will show you how to create a new area, using the HeroBlade editor.
This tutorial will talk you through how to create a new area, using the HeroBlade client. Elements covered in this tutorial include:
- Navigating to different areas via the Organizer Panel
- Understanding how areas fit in with the world
- The important concepts of Play instances and Edit instances
- Moving around in different View modes, and using the Filter menu to select the Level of Detail (LoD) that you wish to see
- Creating a new area, and adding a Heightmap node and an Arrival path
- Adding assets via the Asset Library and (in the Area and asset management tutorial) learning how to move, modify, and duplicate them
Note: If you have not yet worked through the Getting started with HeroBlade tutorial, you may wish to do that one first.
In HeroEngine, the game is composed of a World, which is made up of Areas. An Area contains a variety of graphical elements, which are assigned to "Rooms" which specify which elements can be seen from any particular other room (Room visibility). All of these elements can be chosen and arranged via HeroBlade. HeroEngine is a collaborative editing environment, so just as players can all be in the same area at the same time, so can developers all be working in the same area at the same time.
First, if you haven't already, it is recommended that you work through the following tutorials:
Visiting other areas
- See also: Exploring an area
Before creating your first area, you may wish to explore other areas, such as in the Hero's Journey Reference world, or any others which may have already been created by your team.
When initially exploring, it is best to go to a PLAY instance instead of an EDIT instance (see the next section for more information on these). This is because all PLAY instances are spun up using only a copy of the EDIT instance, so any changes you make to a PLAY instance will not be permanent. This means you can experiment in safety, as none of your changes will be saved.
Play vs. Edit Instances
There can be many different copies (instances) of any particular area. All instances are running on the same hardware Area Server. Changes can be made by a game developer in any instance, but the only changes that will be Saved (persisted) are those that are made within an Edit instance.
For any given Area, there can be an unlimited number of Play Instances running at one time, but only one Edit Instance.
Before ever making any change to an Area, it is essential to know which kind of instance that you are in. To do this, you can double-check the informational box with the area name at the bottom right of HeroBlade.
A play instance will have the instance number in parentheses next to it. (TODO: image needs updating)
An edit instance will be bright blue and say (EDIT) next to it. A small icon of a wrench will be beside it. (TODO: image needs updating)
The default areas that your world comes with cannot be edited: they are there for your reference only. Selecting edit instances of these areas will do nothing.
Using the Organizer Panel
To get to an Area using the Organizer panel:
- On the Panels menu, choose "Organizer".
- In the Organizer panel, ensure that the "Areas" tab is selected
- Expand a folder
- Select an Area in the folder
- Double-click on the Area.
- A pop-up will appear, asking you if you want to go to an EDIT or PLAY instance.
- If you intend to change something in the area, go to the EDIT instance.
- However in most cases, you will want to go to a PLAY instance. If there is a specific instance you want to go to, you can select it from the dropdown to the right of the PLAY button.
- There will be a wait period as the necessary assets are loaded to your system.
To get to an Area using the
- In the Chat Panel or your game-specific Chat GUI, type
/HEGO <area#> EDIT | NEW | instance#
- You will need to know the area ID of the Area you want to go to.
- EDIT will take you to the EDIT version of that Area.
- NEW will spin up an arbitrary new PLAY version of that Area.
- instance# will take you to that instance number if it exists.
For more information about the
/HEGO command, type
/HEGO HELP in the Chat GUI.
- Once in an Area, you can explore as much as you wish. It is recommended that you explore with "Fly Mode" by clicking on the Fly Camera icon . You can drop your character down to where your Fly Camera is at at any time by clicking on the character icon, or pressing the "~" key. This will also put you back into Character Mode.
- One technique for getting a sense of the area layout is to move your viewpoint so that you are looking down at the ground, and then backup with the S key to fly straight up into the sky in Fly Mode. You can then move backwards while looking down at the ground, until you can see the entire area at once.
- Another technique for looking around is to go into Fly Mode, and then tap CTRL-O to get into Overhead Mode. Use the mouse wheel to zoom out until you can see the entire area. You can also hold down the Right Mouse Button and move the mouse to look around.
- If you are in an indoor area (such as a cave), you can still use this technique of backing up into the sky, but you may need to turn collide off. You can turn collide off while in Fly Mode by pressing F2. (This hotkey does not work in Character Mode.)
- If you find a particular area too dark to see, press the "B" key to turn Brightness to max, or CTRL-W to turn on wireframe mode.
- If you get stuck while moving in any Area, press F2 while in Fly Mode to turn collision off and unstick yourself.
After you have sufficiently studied other areas, you should begin to visualize and plan your own area. What is its purpose? What do you want to achieve? What types of terrain will that require? What specific props and assets will be important? These are all things that need to be considered in advance. We recommend sketching your area out before you begin.
Note: If you are just experimenting with HeroEngine, don't worry about designing a complex area, you can just go in to an "empty" area and experiment.
- See also: Tutorial: Docking HeroBlade panels
Creating a New Area
The steps here will be to:
- Create a new Area via the Organizer Panel
- Name the first Room in the Area
- Create a heightmap node in the Area
- Create an initial waypoint path
- Place some assets via the Asset Library
- Place some Speedtrees
- Learn how to use the various aspects of HeroBlade, such as the Filters menu, to view and manipulate the area
- Open HeroBlade
- Open the Organizer panel
- If you do not see the Organizer Panel, go up to the Panels dropdown menu.
- Make sure "Organizer" is checked.
- Choose the "Areas" tab of the Organizer
- At the bottom of the panel, select "Create New". This will cause a popup window to appear asking for your New Area Name.
- The name may include spaces.
- The name must be unique.
- Click the OK button
- Drag your area to the appropriate folder. For example, if you have a "sandboxes" folder. If not sure, leave it alone.
- Double-click on your new area name. You will get a popup. Click the EDIT button, to go to an edit instance.
- After a brief delay while your new area loads, you will find yourself standing on a heightmap in an otherwise empty area.
Note: You should always work in the Edit Instance, as changes to the area in a non-edit instance will never be persisted (saved). However, if you are visiting an area to get an idea of its look and feel, you should use a Play instance.
- Open the Room Toolbar by right-clicking on any toolbar in HeroBlade and checking "Room".
- Click the "Add" button
- Names may NOT contain spaces
- Organizational structure of room names is up to you. One possible name is 001_start
- Select the room name from the dropdown at the center of the Room panel
- You are now ready to start populating the room with Assets.
- Open your Area Panel
- If you don't see it, check to make sure it's selected in the Panels menu
- Click the "Add" link.
- Name your room according to your own naming convention
- Names may NOT contain spaces
- Organizational structure of room names is up to you. One possible name is 001_start
- Your room should appear in the list. Select it to work in it.
- You are now ready to start populating the room with Assets.
- See also: Full List of Keyboard Shortcuts - We strongly recommend reading this document thoroughly, as it includes special tips and tricks for working with HeroEngine.
There are three basic camera modes to be aware of:
In Game Mode (shortcut: the ` or ~ key, to the left of the number 1), you control your character normally using WASD movement.
- W is forward
- A is left (strafe)
- S is backwards
- D is right (strafe)
When you first log in with HeroBlade, you should be in Game Mode. If you are not in Game Mode, you can hit the ` (also the ~ tilde key, to the left of the 1) to switch to it, which will drop your character down from your current camera position.
Most of the time you spend creating an area will be spent in Fly Mode (shortcut: CTRL + ~). In addition to the Game Mode's WASD movement, you can also go up and down:
- R is up
- F is down
Right-clicking the mouse and moving it around will rotate your camera appropriately. If you prefer your X or Y axis inverted, you can change this option in the Render panel. Note that at this time, these changes do not persist from session to session.
Overhead Mode (shortcut: CTRL-O) is useful when laying Asset terrain and getting a birds-eye view of your area. Movement controls in Overhead Mode are essentially the same as in Fly Mode.
Note: We suggest taking regular strolls through your area in Game Mode to check for problems and to test travel time.
- Main page: Heightmap nodes
- See also: Terrain Panel
In most cases, areas will begin with a Heightmap node, also known as Terrain. If you do not have a heightmap, then proceed with the following section:
Creating a heightmap
- Open your Terrain Panel
- If you do not see the Terrain Panel, click on the Panels dropdown menu and make sure it is selected, or click the Terrain icon in the Transform toolbar.
- Click the button that says "Create Heightmap"
- A heightmap should appear in the room. At this point, because your heightmaps may have no textures, it may display as a checkerboard or whatever default graphic is used for untextured Assets in your product.
Modifying a heightmap
- Main page: Terrain tutorial
There are many powerful options in the Terrain Panel. You should spend some time adjusting the Heightmap to form it into some interesting terrain. To see some animations which demonstrate the power of HeroEngine in area-building, see the flash animations at http://heroengine.com/world.asp
Things to try:
- Hover over each button on the Terrain Panel to see its tool tip.
- Select the heightmap, and then click on the the Edit Height or Raise/Lower tools.
- Hover the mouse over the heightmap, and use the mouse wheel to change the area of effect of the terrain brush. Click and drag in different directions to see what the tools do.
- Select different brush shapes, to try different Fall Off styles .
- Try using a square instead of a round brush
- Click in the Brush pattern box to cycle through different patterns, and see how this changes things when you raise or lower terrain.
- Use the Soften tool to soften or sharpen mountains and ridges
- Apply a colored texture
- "Paint" the heightmap with dynamic details such as plants and flowers
- Dig a hole or ravine, and create a Mirror node inside of it to create a lake or river.
Create a PathArrival Path. The first Waypoint of the Arrival Path will be where all characters who arrive in the Area will appear.
Creating an Arrival Path
- Open the Paths Panel via the Panels menu
- In the "Paths" section of the panel, click on "Create Arrival"
- This will create a Path called Arrival, and a waypoint should appear in the area
You can now position the waypoint using any of the selection tools. You can add more waypoints if you desire, but only the first one will be used by the /go system.
You may notice once the waypoint is unselected that you may not be able to see it. If you need to grab it again, you can do so either using the Paths panel, selecting it from the list, or by changing your Filters so that Paths are visible. See the filters section below for more information.
- Main page: Asset Library
Assets are objects like architecture, boulders, and botany. Assets help to define an area's mood and character, so proper asset placement is particularly important in area building.
Placing Assets can be deceptive in a 3D environment; from one angle you may think that a crate is sitting on the floor, but then you actually move the camera to look at it from the floor, and there's a lot of space in between. Scale and distance can also fool you: an asset may look huge but when it's up against the camera, but drop a character in and perspective can shift dramatically.
The easiest way to place an asset is with the Dynamic Place Tool. The Translate and Rotate Tools can then be used to refine the asset's placement.
The more you place assets, the more you get a feel for proper technique. So let's get started!
Placing Your First Assets
As a general rule of thumb, you want to shape and paint your Heightmaps before you place any Assets, as even a minor change can cause massive upheaval in asset placement. The art of terrain painting is a very large subject that has its own tutorial.
When populating an Area with Assets, you should go from big to little. Start out with the big stuff (terrain blockers, buildings, gateways) and then continue on down to the smaller details: trees, bushes, static vehicles, and then finally smaller props like books, bottles, skulls, bones, chains, spiderwebs, crates, etc.
How to Place an Asset
- Open up the Asset Library by clicking on the Library Button (Hotkey: cntrl-L)
- Navigate to a Library that corresponds to the area you're creating.
- Pick something you like
- From the dropdown menu, you can choose to have the Asset added where your (Fly) Camera is, at the Area's Origin [0,0,0], or on top of a Selected Asset. Since you do not have any Assets in the area to select, it's probably best just to add the Asset at Camera.
- To add it, either:
- Double-click to add it to your Area; or
- Click on the Add button.
- This creates an Asset Instance of the Asset you have selected in your Area.
- With the Instance you have just created selected, click on the Dynamic Place Tool (Hotkey: 6)
- The Instance will now follow your mouse around on the terrain you have created.
- Left-clicking on the terrain will place it.
Placing and Snapping
Using the Snap Grid
- See also: Snap
Snap forces objects to line up on the Area's snap grid. It is useful for dressing sets that use lego-like pieces that must align together.
There is a Snap button in HeroBlade. Clicking the arrow next to it will cause the Snap popup box to appear. It looks like this:
- To Snap an Asset to the Snap Grid, Select it. A yellow bounding box should appear around the Asset.
- You can either click "Snap Selection" from the Snap dropdown, or use the CTRL+S Hotkey to snap the Asset.
- Snap must be On for "Snap Selection" to work.
There are several tools for placing objects.
- Select and Translate
- Hotkey: 3 (in Fly Camera Mode)
- Selects the object, and allows for movement on the X, Y, and Z axises.
- Select and Rotate
- Hotkey: 4 (in Fly Camera Mode)
- Selects the object, and allows for rotation on the X, Y, and Z axises.
- You can use SHIFT+Click to force the engine to force a more precise selection of whatever is in front of your camera.
- You can also select multiple Assets by clicking and dragging a selection box across the screen.
- Shifting between placement tools will not deselect items.
- To deselect an Asset, press the ESC key.
- Selecting an Object with the Dynamic Place tool and pressing Ctrl-D will allow you to repeatedly place the same object.
Sky is generally added to an area in one of two ways:
- Dynamic sky, which can be constantly changing, with cloud layers and time-of-day lighting
- Adding an asset known as a skybox which sits on top of the area like a dome, and has art to represent the sky. This is simple but static.
- Open the Environment panel
- Select the checkbox that says "Dynamic sky"
- Drag the "Time of day" slider back and forth
There are many other options for dynamic sky including clouds and wind. For more information, see Environment panel.
Adding a Skydome
- Open the Asset library by clicking on the Library button in the Transform Toolbar.
- Click on the "Search" button
- In the text box, type "sky" and click "Find"
- Choose "at Camera" in the dropdown menu, and click "Add".
- The skybox is a special kind of "skydome" asset, and cannot be touched or moved.
- Main page: Filters menu
Sometimes when you're working in an area, you want to filter out the visibility and selectability of certain objects. Maybe you'd like to only see Terrain. Maybe you only want to be able to select SpeedTrees. This is where Filters come in.
Filters toggle Asset type visibility and selection . In the case of things such as Paths, Waypoints, Lights, Audio and other "intangibles", "visibility" refers to the Asset's visualizer and bounding box.
The Filters list does not save from session to session, so turning visibility of certain items off, will reset back to visible the next time that you login.
- Main page: Particle effects
Particles are a dramatic way to add a dynamic element to an area. Particles are used to emulate fire and light, give sparkle to spells, and as on-screen indicators of quest items and clues.
Particles consist of two separate assets: a particle emitter, and the particle that is emitted (which could itself be an emitter). Particles are created primarily by artists, though some GameMasters have expressed talent in particle creation.
If there are any particles associated with the area you are working on, they will be in the library, under a Particle tab.
Create a river
- Main page: River tutorial
- See also: How to create water
You can apply an Environment Scheme by highlighting one and clicking "Apply". You will have the option to apply the scheme to the Active Room (the room you are currently in) or All Visible Rooms (your Active Room, plus all rooms visible to it).
There are many other Tutorials to try. Now that you have an Area, how about:
- Area and Asset Management Tutorial
- Creating a particle effect
- Creating waypoint paths
- Room Visibility Tutorial