Starting with Blade Engine Tutorial 5
tutorial created by Patricio Land
Previous tutorials:
You can download the full project created in this tutorial from here.
--
Hello!, welcome to the next chapter in this series of tutorials crafted to reveal all the secrets behind the Blade engine! This time we´re using the same scenario we create in Tutorial 4 so if you miss the last one please take the time to complete all the steps on it before continue.
In the previous scene we had our Actor player ready to pick the green ball and give it some use. There´s also a window in the scene and if you remember it had a generic description on it. So if you look at it, the default text message ´I´m not interested´ will be shown. In case you want to use it, the lines ´for what?´ will pop in the screen.
So we need to change that. Select the Window object,
And from the right side of the editor, at the ACTOR menu, inside the verb panel, select the little pencil icon in order to create a new lookat verb.
Now press the pencil icon at the second half of the screen (the action panel) and create a new Say action, and write something like: "It´s summer out there!" on it.
Also imagine that the window is jammed, so we can reveal this status to the player doing the same for the pickup verb, with a Say action that will show the phrase:
"The window is stuck! Bad news for my claustrophobia!" on it.
Remember that as we learn last time, you can add extra animations to perform in conjunction with these actions.
Please download this zip file. This file contains all the image sets we´re using to let the kid escape from his room.
In order to achieve that we need to break some eggs, or even better, some windows.
Create a new Atlas with all the images from this folder and name it Junkyard.
The first thing is to create a new sprite animation for a Broken_window actor. Add the description ‘A broken window’ and don’t forget to put the Visible field in false and a ZINDEX of 5.
With the new Broken_window actor selected to the left, choose ANIMATION from the right side menu of the editor.
Use the broken_window animation from the Junkyard Atlas and put the broken glass animation with a speed of 0.5 and drag it over the window, as in the following image:
Test the scene. If you did well, the window should be intact, as we set the visibility of the broken_window sprite to false, so engine will not show this element until we turn it to the true status.
Next we need to create some extra animations for the Actor player and the ball. For the first one we need to add the jump, open_window and throw_ball anims (get them from the Junkyard Atlas), as in the picture:
Play the scene again, pick up the ball and open the inventory (the little with bag in the corner). The ball should be inside it.
Now drag the ball over the window.
The default message will show: "I don´t know what to do with that"
Let´s change it to give the player a clue about how to escape from this room.
Select the Window actor from the left menu and WORLD form the ACTOR Ball to the right
There´s a new verb called use associated to a Lookat. Edit the Lookat action and change the phrase to something like: "This is a heavy ball, i could break something with it."
Try the scene, use the ball with the window and check if the modification work.
As wee set the seed of freedom in our player´s mind, we must proceed to conceive the liberation plan!
The whole idea is to use the ball to break the window, so we must create all the necessary steps to perform this interaction. starting at moment the player drags the ball over the window.
With the Ball actor selected from the left side of the editor, go to ACTOR Ball to the right and be sure to have Verbs and Actor selected.
Add a new verb: use
So Verb ID: use
Target BaseACtor: window
This verb will activate a group of events when the Ball gets in touch with the Window.
At the second half of the menu (always to the right) click on the add button and create two Cutmode actions (one true, the other false). Between them add an action Goto to send the player close to the window, then add an action Animation to run the $Player animation throw_ball and finally remember to make visible the Broken_window animation changing it´s VISIBLE attribute from false to true using the SetActorAttr command. Finally do the opposite for the Window actor using the same action in order to deactivate the non-destroyed window from the scene.
(Note: as this is an update from the last tutorial, probably you´ll find the same name you used last time for the scene, so don´t be confused by it).
If everything went right, the list of actions should stay like this one:
It´s also a good idea to give some feedback to the human player, so you can add a Say verb with a funny line like:
´Freedom!´
Test the scene. As the result of this interaction the player must be able to break the glass!
But..¡wait a minute! Check the inventory once again. The green ball is still there. This is a logic inconsistency as the ball should be outside the room, and obviously somewhere else outside our pockets.
One easy solution is to remove the item from the inventory…but where?
Go the the Scenes menu (at the left of the screen) and add a new Scene, this time use the little pencil icon to create a new one. This time use the Junkyard image from the Atlas of the same name as shown in the following picture
Congratulations, your adventure has now two scenes!
The junkyard seems to be a nice place to drop the ball, so go back to the list of actions we set up for the ball and add a RemoveInvetoryItem action as this one:
Once again, run a test of this scene. Do all the steps to break the window and check if the ball has been removed from the inventory.
This is a good opportunity to take a closer look to the Inventory. As everybody knows, this is a metaphysical place (a magic pocket, a backpack even a black hole) where all the items are stored until the player finds a way to use, combine or get rid of them. As you already experienced, the Inventory is shown as a white bag in the right corner of the screen.
But that´s not all. Within Blade, you can change the inventory´s position (down, up, center, left or right) and it´s own behavior (single action true or false) from the Game Props menu at the upper right zone of the editor.
Play with this options in order to understand how they work. It´s quite simply!
In case you don´t like the default bag icon, you can change this image (and actually you can fully modify ALL the UI elements) accessing the graphic files at the
'assets/ui'
and/or
'assets/ui/1' folders.
You can find more information about customization here:
https://github.com/bladecoder/bladecoder-adventure-engine/wiki/Customizing-the-game-UI
To get a more realistic effect of the broken window, it´s possible to play sound clip associated to the animation. Blade Engine uses the .ogg file format to play both music and sound fx. There´s more than one way to accomplish this job, but in this particular scene we´re going to add a Sound action.
Remember to put all your .ogg files inside the sound or music folders in the asset structure before calling them from the engine.
Then add the Sound Action before or after the broken window animation, like this:
To get the complete structure of instructions as follows:
Now is time to test the scene with your volume on!
Our hero is a step closer to his liberation. But to help him to perform the big escape we´re going to wait until our next tutorial. See you soon!