Demo PAINTING Perspective
The 2.5d ToolKit GUI has been updated from the video and the scene settings improved, but the basic steps remain the same.
You will find this example in 2.5dToolkit/Demo/Demo MULTILEVEL (3 level)/Perspective.
Below is shown step by step the operations to be performed to complete a multilevel scene.
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. Save it as Example or whatever you want.
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.
You will find a new option in Main Settings: Multi-Level scene. Select it. Remember to do this before initializing objects or creating areas, otherwise you’ll have to start over.
Select in the project folder 2.5dToolkit/Demo/Demo MULTILEVEL 2.5dTK/Graphics.
Drag the BgMultiLevel 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.
The multilevel function requires the character in the scene. Drag it from the Assets\2.5dToolKit\Demo\3D objects folder into its field.
Your initial environment will look like this:
The first thing to do is choose the zero level. In our picture it will be the top layer.
This is the most important part in creating multilevel scenes. You will need to find the right camera settings now, as once you create a level above or below level zero, you cannot change those settings.
In short, you need to set the camera’s FOV, rotation and Y-axis, as well as character size, to get the best setup for your scene.
As repeated many times, a 2.5d world does not require high FOV values, as it could distort the character when it is on the sides of the screen.
Looking at our image, we immediately realize that the yellow line of the horizon will have to be kept above the bridge so as to allow the character to cross it.
Let’s raise the rotation of the camera a little and lower the FOV so as to bring the horizon above the bridge.
With a rotation of 5 and a FOV of 30 we get this initial setting.
On the left of the picture, on what will be level zero, there are two people. Drag the character close to one of them and resize it to get about the same height.
Now drag the character around making sure it scales correctly to the objects in the scene.
At first glance, it looks like we got lucky. If we bring the character closer to the second person near the fire we will see that they appear proportionate.
Even compared to the barrels in the scene, they are always about halfway up the character.
Please note that this is a drawing that is not very detailed, and we cannot strive for perfection.
Having set the camera rotation low, the character does not appear tilted to the sides of the screen despite the FOW at 30.
With different images that require more rotation you will need to lower the FOV even further.
Now that we’ve found the best FOV and rotation settings, the next step will be to control the depth of our scene. It would be hardly believable if the character reached the bridge with only four or five steps.
Select the Navigation tab. The multilevel environment will require the use of three new functions, Create new level, Connect Vertices, Select vertex. We will see it later.
Click New walkable area and draw the new walkable area as shown.
Now go back to the Scenes tab to be able to activate the meter functionality.
Select, in the Options section, Meter settings. All areas in the scene will be turned on. Move the cursor over any edge of an area and it will highlight. In our case we choose the longest edge. Right-click and a label will appear. Change color and size to your liking.
Here’s what we get:
The length of the edge is 16 meters and between the brackets we find the minimum and maximum number of steps that the character should take to travel this stretch. The number of steps is calculated according to the setting of the Step length field which is 0.65 by default.
Again, we’re in luck. The border length of the area looks good. Maybe we could change it to about 20 meters?
Let’s try to see how it works.
In the Scene tab you can set the camera values. Act on the Y axis. It cannot go below a minimum value set by 2.5dTK but you can raise it and lower it again. You will see that the meter values change according to the Y position of the camera. By setting Y to 0.86 we will have a border length of 20 meters and a number of steps between 24 and 36. You can also enter the value directly in the field.
Let’s try baking the mesh using the Bake button in the Navigation tab. Nothing might happen. When camera rotation is very low Unity may have difficulty baking the mesh. Unity’s new navigation system locks the Radius to a minimum value of 0.05. If this is your case you can use Navigation (Obsolete) by setting the Radius to 0.01.
After verifying that the area is baked regularly, you can enter Play Mode. Move the character over the area first.
In Play Mode left click on the area to make the character move a little forward a little backward and adjust his walking speed. It is set to 1 by default. Use the Character-related settings section at the bottom of the Scene tab.
0.4 might be an acceptable value.
Now put the character at the beginning of the area and click on the far side of it to make it go all the way.
Count the steps.
To hide the meter, deselect the Show meter values item in the Options section.
That’s no good. After 36 steps the character is only halfway there.
Show the meter by clicking Show meter values.
Let’s increase the rotation to, for example, 10, move the character close to the first man and resize it.
We will see that by increasing the rotation, the long edge of the area has greatly reduced its value. We raise the Y value of the camera until we get the value of 20 meters again.
Let’s walk the character to set a proper walking speed again. Could be 1.3.
Let’s make the character traverse all the area again.
This time the total number of steps is 30, exactly halfway between the minimum and maximum value. That’s great. If we move the character to the left side of the screen, we will see that the tilt is negligible. The settings as a whole may be correct, but we are still missing some step.
Important: Remember to save your new settings before exiting Play Mode or everything will be lost. At the bottom of the Scene tab click on Save scene data.
Once back in Edit Mode, click on the Load scene data button.
Now let’s build the second area of level zero and this is what we get:
However, we want to simulate the passage of the character on the bridge so as to be sure that the zero level is well set, because, as mentioned, after the creation of areas at different levels it will no longer be possible to change the camera values.
Creating areas for the bridge will take some work, so we’ll just create a passageway area that we’ll then delete.
We will use the new Connect vertices option. It allows you to connect two vertices of an area with two vertices of another area, both on the same level and on different levels.
We will create a passage between the two areas using three vertices that are already there as well as one vertex that we will add.
Create a vertex where it is missing. Go to the Navigation tab, double click on an edge of the right area, move the cursor to where you want to insert the vertex (the edge will light up) and right click.
Now we have the 4 vertices to join.
Select the Connect vertices item.
This is what you will see:
You can start from any area you like, but try to always go clockwise.
Select the left area with a double click on an edge and right click on the first vertex, then on the second. They will turn blue. Same procedure for the right area.
Now click Done.
A new area will be created between the 4 vertices.
Bake using the Bake button in the Navigation tab.
You can now enter Play Mode and test your scene on level zero. This time try setting the running speed as well, which could be 3.5.
Move the character with a left click or make it run with a double click.
To have the scene clean, disable Gizmos in Game View and in the Options section select Hide Areas.
To be picky, we could perhaps reduce the FOV and camera rotation a bit by taking into account the number of steps, but we can be satisfied.
Overall it sounds very good, we can consider level zero completed.
Remember to save the last change by clicking Save scene data.
Go back to Edit Mode, reactivate Gizmos and click on Load scene data.
Let’s now create the second area at a lower level.
In the Navigation tab click on Create new level, just below the two buttons Bake and Clear.
This is what you will get:
Select the area on the left with a double click and the tools needed to create a second level will appear.
This time we will use the Use reference lines option to understand how it works, then you can decide whether to use it or not. However, it is very useful for building levels at different heights.
Activate the option. Two fields will appear: Set vertical line and Draw cross line.
Select Set vertical line. Move the cursor to the point visible in the image and left-click. A vertical line will appear.
Here we don’t need the second line but we draw it anyway. Select Draw cross line, move the mouse after the vertex (otherwise you select it and now we don’t want this) to the edge of the area, left click, follow the edge of the area until it crosses the vertical line and click the button again.
Now let’s move the character’s feet to the intersection of the two lines (you may have noticed that when you select an area the character is transported to that same level). Use right click and drag to move the character.
Using the up and down arrow keys 2.5dTK moves the character to the base of the vertical line. Use the Game View zoom to help you place it correctly.
Now click on Confirm new level.
As reminded by the pop-up, and as mentioned before, once an area at a level other than the zero level has been created, it will no longer be possible to change the camera values. It will be possible to re-enable this function only after deleting all the additional levels.
Once you click on Ok the new level will be created.
Now that the new layer has been created, you can draw the new area. You don’t need to click New walkable area, the script has done it for you.
Remember that even now you can delete this area and its level by clicking on the bin. However, if there are other areas on this layer, only the area will be deleted and the layer will be kept, and the camera settings will still be locked.
Notice how the new area is at a lower level than the zero area.
Now we need to create a connecting area between the two areas, but first we need to make some small changes. As you know, if an object is under another object, or the objects are too close together, Unity may have difficulty baking properly.
Our connection area will need to be narrower than the drawing of the stairs. To achieve this we will add some vertices to the areas.
We select an area and add a vertex, then we do the same thing with the other area, as shown. Remember that you can add vertices to a point with the right mouse button and remove a vertex with the middle button. If the spots are too big, you can select the Use small spot option.
Now, as we did before, we can click on Connect vertices, select the first area, select two vertices, select the second area and select two more vertices, always keeping a clockwise direction, and click on Done, then Bake. If the connect area is not baked correctly, check its slope in Scene View, as well as check the Max Slope value of Unity Navigation.
Before proceeding with the third area it would be good to test the scene. Enter Play Mode and move the character around. Since the camera values can no longer be changed, you will only be able to save any changes made to the character. The Save scene data and Load scene data buttons are changed to Save char data and Load char data.
The test went well, the character goes down and up the sloping area.
Now we can create the third area. The steps to follow are the same, but this time both reference lines will be essential.
Click Create new level and select the lower area.
Select Use reference line, then Set vertical line. Left-click at the bottom of the staircase, as shown.
Now select Draw cross line and left click at the point shown in the picture (where the steps begin), cross the vertical line and click again. Keep this line parallel to the edge of the upper area, above the door. If you need to draw the line again click on Draw cross line to undo the job. As before, move the character’s feet to the intersection of the two lines.
Using the dedicated buttons move the character to the base of the vertical line and click Confirm new level. Click New walkable area and draw the area.
Now we can create the last connection area. We follow the same steps as before, adding new vertices to the two areas, but this time we add four because the stairs are poorly designed. With the Connect vertices function we create the sloping area. Then we can bake.
If we have used the Reference lines correctly, the two connection areas should have a similar slope.
We enter Play Mode and test the scene.
All great.
Now we need to deal with the bridge, which will require a new function.
Let’s start by eliminating the passage area that we no longer need now. Move to the Navigation tab, select the area and click on the bin.
Position the Scene View and Game View windows so that you have a good view of both.
In the Options section click View environment from top and adjust Scene View as shown in the figure.
By looking at the edges of the areas we are able to establish the connection points for the new area.
We select Draw in Scene View (if Auto-Draw in Scene View option is not selected), under the Bake and Clear buttons, we pass the mouse over an edge of the left area and when it lights up we double click to select it. If the area struggles to respond to the passage of the cursor you can change the values Line radius and Spot radius.
Insert two connection vertices for the bridge.
Select the right area and repeat the operation.
Now, using Connect vertices, create the pass area.
If the bridge were a flat walkway we would be done, but instead it is curved. We need to tweak it to give the impression that the character is going up and down as it walks through it.
Still in Scene View, we select the area and add four vertices as shown in the figure.
Now let’s check Select vertex, then the area of the bridge. Let’s move the cursor over the first vertex, for example the one at the bottom left. Right-click to select it. It will turn blue.
Using the vertex movement buttons we move it up. Let’s check in Game View its position.
When its position seems correct, we move on to the second vertex, but this time we click on the Copy last level button. We repeat the operation for the remaining two vertices.
This is what we will get:
Our work is finally done. Bake, enter Play Mode and test the scene.
This is our baked scene:
And this is our mesh.
To create a mesh go to the Mesh tab. You will find the created area in the GameObject VBAreaTK, child of VB25dTK in the Hierarchy. You can drag the VBAreaTK GameObject into the Area field to obtain a mesh that includes all the drawn areas or single areas to obtain distinct meshes.
Learn more about the functions of the Mesh tab.
Now we need to insert our clipped sprites from the background image, but first we’ll create three non-walkable areas.
Move to the Navigation tab and select the zero area. Click New NotWalkable area and draw a perimeter around the barrel.
You can also create very simple non-walkable areas with just three vertices as they are currently only used to determine the position of the sprite.
As you can see the area in Scene View looks very different from the one drawn in Game View. We’ll fix it later, right after we put the sprite.
Now draw the second and third non-walkable area by selecting the corresponding walkable area.
Now we can insert the sprites.
As you know there are two ways to create sprites: the classic size and the large one.
Starting by using large sprites, which are much easier to manage. Also their size does not affect performance because the difference between the two is minimal.
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.
Let’s start by inserting the bridge sprite.
First, click on the View environment from top item in the Options section. Adjust Scene View to view the bridge area.
Move to the Objects tab and drag the sprite 2.5dToolKit\Demo\Demo MULTILEVEL 2.5dTK\Graphics\BigSprites\bridge_big into the Object field.
Select Auto position.
This is what you will get:
Left click in Game View and drag the sprite until it is positioned as shown. Don’t go beyond the bridge area or else the character won’t be hidden by the sprite.
In Game View you will not see the sprite move because it will cover, at each position of z, the background image from which it was cut. This is the power of the large sprite.
Once positioned, remember to click Empty object immediately or you could move it unintentionally.
Now, one by one, we repeat the same operation for the sprite of the barrels and the box. Remember to always select Auto position. If the sprite is perpendicular in Scene View you may not see it well. Move the view a little to view it. To place it, use the non-walkable areas you drew earlier.
We placed all five sprites. Now we just have to optimize the non-walkable areas. To do this, we position the Scene View so that a sprite is perpendicular to our gaze, move to the Navigation tab, select Draw in Scene View (if Auto-Draw in Scene View option is not selected), and reshape the area. If the spots are too big you can select Use small spot. Also, when you double-click to select the area, the character is moved to it. You can push it away from the area with the right click in Game View.
Here is the finished scene:
After baking:
Let’s enter Play Mode and test the scene. To get a better view, deactivate Gizmos and check Hide areas in the Options section.
Fantastic! A small tweak to the non-walkable area of the three barrels, that looks a bit small, and we’re done.
To see how to place the small sprites, watch the video at the top of the page from minute 27:15.
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.
