Demo NICOHOME Perspective
WITH SMALL SPRITES
You will find this example in 2.5dToolkit/Demo/Demo NICOHOME/Perspective
We want to create an environment from this image:
Create a new scene. You can do it in two different ways.
- Create a new scene and click [MainMenu/Tools/VB Game Studio/Start 2.5D Toolkit]
- Click on [MainMenu/Tools/VB Game Studio/Reset 2.5D Toolkit/Reset and create a new scene].
- Note: this option will not ask you to save the previous scene. All work will be lost.
The GameObject VB25dTK with VBAreaTK as child will be created in the Hierarchy. A new 2.5d Toolkit window will be created. Dock it near the Inspector.
Place side by side Scene View and Game View and enable Gizmos in Game View.
Show Navigation from [MainMenu/Window/AI].
Save scene. Scene name is required as 2.5D Toolkit will use a folder with this name to save some data.
This is your initial working environment:
Drag Main Camera into its field. The Camera background field will appear.
The initial default configuration sets perspective projection and 2.5d Environment as the type of work. We don’t have to change anything. The PPUs are set to 100 and are fine. Remember that both the background image and the sprites you use will be set with these PPUs.
Select in the project folder 2.5dToolkit/Demo/Demo NICOHOME/Graphics. You will find inside two folders, BigSprite and SmallSprites. In this example we will use small sprites.
Drag the NicoHome background image into the Camera background field.
A popup will warn you to set the correct resolution in Game View. The camera distance will be set automatically according to the image size. This way any sprites cropped from this image won’t have to be scaled.
This is what you will get:
The red line (visible in Scene View), represents the closest point to you (nearClipPlane) and the yellow line the farthest (farClipPlane). This will be the area where you can draw your areas and move objects.
First, go to the Navigation tab and set a very low Agent Radius, between 0.1 and 0.05.
Now check that the horizon line is beyond the furthest point of your floor. To raise / lower it you can use the FOV and rotation of the camera.
In the case of this image, no initial changes are required. We’ll do that later, to get proper depth to the scene.
Start drawing the main walkway area where your character will move. We will then set up the camera as needed. Enlarge Game View to work better.
Select the Navigation tab, click on New Walkable area and build your area.
You can move vertices by clicking on them and dragging them with the left mouse button. You can insert new vertices by placing the cursor on an edge of the area and right-clicking. You can remove a vertex by clicking on them with the middle button. Both the vertices and edges will change color or become thicker when you hover over them.
In the Navigation tab you will find two items, Spot radius and Line radius. By changing the values the Gizmos will react according to the distance of the cursor.
Use small spot is good if you want to place very close vertices (especially if you use the Simple Mesh worktype).
Keep line straight (horizontal and vertical) allows you to draw straight lines if enabled.
Now select the Scene tab. The Meter setting item, in Options, only works if you are on this tab.
Check Meter setting and the area(s) will all be selected.
Move the cursor to the edge you want to measure and left click. Its measurement in meters will appear. If you want to hide it click a second time. You can change the color of the label and change its size.
You may have something similar:
As we can see the length of the edge under the windows is two meters, too little.
From the Scene tab we can modify the height, rotation and FOV of the camera thus obtaining a variation of these measures.
Only moving the camera on the Y axis will these values change significantly. But as we will see it is not enough to get a right configuration of the environment.
In 2.5d games a high FOV causes character distortion (which increases by increasing the rotation of the camera) on the sides of the screen. It is therefore advisable to lower it if there is rotation.
For now let’s set the border below the window to about 5 meters by changing the camera height.
Then click on the View environment from top button in the Options section.
Now let’s load our character. We drag it from the Project folder into its field. Remember that initializing the character and objects in the scene must always be done this way. Then, in order to manage them, you can drag them from the Hierarchy into their respective fields.
Once the character is loaded you will see the numbers in brackets appear next to the meter measurements. These are the number of steps the character will have to take to walk that segment (the value depends on how you set the character’s Step length field).
Holding down the right mouse button, we move the character to the sides of the screen to see if it distorts. In this case we have zero camera rotation so we won’t get this annoying behavior.
Now let’s move the character to the bottom in front of the door and resize it to the right height.
Then we move it around the room and check that it maintains the right proportion to the objects in the room.
The character, next to the stool placed in front of the computer on the right of the image, would seem a bit too tall.
We will therefore have to increase the rotation of the camera a little (the more the camera rotates, the smaller the difference in character size between the closest and furthest points will be) and adjust its height again.
We also take advantage of this to decrease the FOV which will give a flatter image of the character but also more suitable for the 2.5d game.
After working on the camera settings and dragging the character around the room to check its proportions we get this configuration (we also modified the walking area a bit):
We lowered the FOV to 29, rotated the camera to 2.2 and set its Y axis to 2. Now the character’s proportion is correct as are the room measurements.
Let’s try out our environment by entering Play Mode. Remember that you can also modify the environment in Play Mode but before exiting you will have to save the changes by clicking on Save scene data and once in Edit Mode you will have to recall them by clicking on Load scene data.
You don’t need to use the Bake function because the script will take care of it as soon as it enters Play Mode.
Make sure you have the edge meter enabled so you can refer to it for any adjustments.
In Play Mode you will find four parameters enabled in Character relating settings: Walk speed, Walk rotation speed, Run speed, Run rotation speed. Set Walk speed and Run speed as needed by making the character walk (single click) or run (double click).
Also check that the character’s step count is close enough to those suggested next to the meter readings.
All right. With Walk speed set to 1.8 and Run speed to 4 the character moves well.
Click Save scene data to store the new values, exit Play Mode and click Load scene data.
Now that the environment is ready we can start placing 2D and 3D objects.
Important note: even with objects in the scene you can always change the environment. All objects will be automatically resized and moved regardless of the modification made. However we think it is the right choice to insert the objects once the scene is finished so as not to overload the script with too much work.
The objects we will use are three sprites cut out of the background image, one sprite to place on the floor and a 3D cat. You find them in the Graphics folder in Demo NICOHOME.
Let’s start by placing a desk full of items on the lower left side. The character, walking in his area, must remain partially hidden from it.
The sprite must be positioned so as to cover the part of the image from which it was cut out.
Click View environment from top to get a top view in Scene View. The sprite must be approximately at the point marked by the circle so as to partially cover the character when it passes in front of that point.
For a better view check Hide floor in the Scene tab.
Select the Objects tab and drag the sprite from the Project folder.
The controls for placing / editing the sprite will appear.
Now, by left clicking and dragging, you can move it in your scene. Enlarge Game View, check Hide areas in the Options section, enlarge Game View and try to overlap the object as much as possible.
With the buttons you can move the object in all directions. We do not recommend moving it on the Y axis, it is better to work on the X and Z axes.
Note: contrary to what is shown in the various videos, when you use the 2.5dTK buttons to overlay the sprites on the background image from which you cut them, it is advisable to move them mainly on the X axis and on the Z axis, using the Y axis only if strictly necessary. This is because in this way we will keep the sprites on the same plane as the area that hosts them.
Using Hide object you can make sure that the sprite is perfectly placed. When you’re done remember to click Empty object or you may unintentionally move the sprite by clicking in the scene.
Here’s what the sprite will look like in Scene View:
Do the same thing for the plant, bottom right.
Now if you move the character with the mouse you will see that it will be covered by sprites.
Continue by placing the chest in front of the bed. Now it will be necessary to pay a little more attention.
It will have to be placed in the empty space near the curve of our area. If, while drawing the area, you got too close to the point where you need to place the object, it is possible that you need to retouch the outline of the area at that point.
As we will see in the example dedicated to large sprites, they will allow you to work much easier and faster than small sprites. Also, since the background of the large sprite is transparent you won’t notice any appreciable difference in its size compared to the small one.
Here is the placed sprite:
Finally we have to place the last sprite on the floor. Unlike the previous ones, placed outside the walkable area, it will be necessary to draw a non-walkable area around it.
Put the sprite where it suits you best.
Select the Navigation tab and double click on an edge of the walkable area to select it. The New NotWalkable area button will be enabled. Click it then draw an area around the sprite. There is no need for precision as we will edit it later.
Click View environment from top in the Options section. As you can see the size of the area is bigger than it appears in Game View.
Enlarge Scene View, position the view on the new NotWalkable area displaying the sprite well, check Draw in Scene View in the Navigation tab (with this option enabled you will not be able to move the view with the mouse in Scene View, so you have to do it first).
If the area is not selected double click on an edge of it and start adjusting it.
Add more vertices (right-clicking the border) and shape the area (dragging the vertices) trying to make it round enough. This way the character will walk in a circle around it. When you’re done, uncheck Draw in Scene View so you can move the view with the cursor and check that the area surrounds the sprite well.
We will now place the 3D cat on the chest in front of the bed. Drag it as usual from the project folder and place it at the foot of the chest.
Now we can use the Y axis to bring the cat up to the shelf. Remember that when you change this axis you will no longer be able to use the mouse when clicking in Game View otherwise it will return to floor level. Instead, use the X and Z buttons to move it along these directions.
This is how we will see it in Game View:
And this as it’s really placed in Scene View:
Now we just have to enter Play Mode and test our scene. As mentioned, you will be able to change the camera values and all objects will keep their position (remember to save before exiting and then load the changes). Instead, editing areas and moving objects will have to be done in Edit Mode.
WITH BIG SPRITES
The steps to follow for the preparation of the scene are the same as above. Nothing changes, except that, once the large sprite has been initialized, you must select the Auto position item before moving the sprite.
Note: using large sprites allows you to work much easier and faster than using small sprites. These sprites are the same size as the background image and you can prepare them using a good graphics program.
When you move the large sprites you will see that it will cover exactly the part of the background image from which it was cropped wherever you move the cursor. You will not need to move it on the X axis but you will only have to refer to the Z axis. Its placement is immediate.
Watch this video to learn more about creating large sprites and placing them (v2 03 – 2 5D Toolkit: A way to place sprite with just a click in one second).
Keep in mind that 2.5d Toolkit has changed since then but the basic steps to create a scene are still the same.
