Starting with Blade Engine Tutorial 5

Starting with Blade Engine Tutorials – Part 5

tutorial created by Patricio Land

Previous tutorials:

• Read the Part 1
• Read the Part 2
• Read the Part 3
• Read the Part 4

You can download the full project created in this tutorial from [here](Tutorial 5/tutorial5.zip).

--

More about interactions

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.

But, as version 0.9.17 of Blade engine is now available, be sure to have this release installed in your system.

You can download it from here.

In the previous scene, we had our Actor player ready to pick the green ball and give it some use. This time we will learn a new and better method to achieve this action and to make objects interact.

So, let´s start!


There was a window in the scene and if you remember it had a generic description associated. So if you look at it now, 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 at the Scene menu from the left. And from the right side of the editor, at the ACTOR menu, 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 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 learnt last time, you can add extra animations to perform in conjunction with these actions.

Please download this zip file from [here](Tutorial 5/tutorial_5_sprites.zip). This file contains all the image sets we´re using to populate this room.

Then 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 sprite. 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 throw_ball anim (get them from the Junkyard Atlas), as in the picture:


As we´re going to use a new inventory management system we need to make some modifications to the ball in the floor.

Go to the left menu, select de ball actor and be sure to give to this sprite a Dynamic attribute in the Actor Layer field and a Zindex of 3.


Play the scene again, but don´t pick the ball. Walk around it instead. You´ll notices that our player can go front an behind it, this is the result of applying a dynamic behaviour to a layer.

A brand new inventory system

From now on, it´s important to keep in mind those recommendations when working with items on the inventory:

All the items that are going to reside in the inventory should have they own Inventory Atlas (atlas). So, in practice we have to ´duplicate´ each item. One image of this item are going to be stored in the Inventory Atlas and other image will reside in the normal Atlas associated to the scene. It´s important to know that the images are not obligatory the same, so a more detailed render of the item can be at hand in the Inventory Atlas for illustration purposes.

This method has been created to have all the inventory items in memory all the time. Remember: when an actor enters a new scene, all the atlases associated to that scene are loaded into memory, and the old ones (from a previous scene) are killed from memory, so they´re no longer available.

Having a separate Inventory Atlas is a handy way yo be able to recall every item in the game no matters the scene in play. This is also an effective way to save memory in mobile devices…so we strong suggest to adopt it.

So, create a new Inventory atlas from the Atlas button at the top of the editor and put the ball.png image on it (you will find this image in the tutorial_5_sprites file from [here](Tutorial 5/tutorial_5_sprites.zip).


Next step is to add (create) a new Ball_inventory actor to the scene.


And use the Inventory Atlas to get the animation (it´s one frame only) to shape it


So now we have two actors (Ball and Ball_inventory) that we can imagine as a same object.

Also, as we did before, it´s a good idea to use a lookat verb with a short text, go to the Verb Actor and do as follows:


For the pickup sequence (fired when the player get the Ball) we need to slightly improve our latest sequence of actions:

Edit your current version to match this one:


Finally, test the scene!

Pick up the ball and open the inventory (the little with bag in the corner). The ball should be inside it! Remember that the image we can see inside the inventory is actually the image stored at the inventory atlas!

Breaking Bad

Let´s give the player a change to escape from this boring room! As you can imagine, 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 Window actor selected from the left side of the editor, go to ACTOR Window to the right and be sure to have Verbs and Actor selected.

From there, add a new verb: use.

So Verb ID: Use Target BaseActor: Ball_inventory


This verb will activate a group of actions when the Ball_inventory gets in touch with the Window.

At the Actions menu (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 action.

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 un 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).





It´s also a good idea to give some feedback to the human player, so you can add a Say action with a funny line like: "Freedom!".

If everything went right, the list of actions should stay like this one:


Test the scene.

As the result of this interaction the player must be able to break the glass!


Dude, where´s my ball?

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 how?

Add the following action to the list


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 behaviour (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, but be sure to set the Single Action Inventory on true state.


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 customisation here.

Heat the beat!

To get a more realistic effect of the broken window, it´s possible to play sound clip associated to the animation. You can find a sound clip [here](Tutorial 5/tutorial_5_sounds.zip).

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 to the Broken_window like this:



To get the complete structure of actions at the Use Ball_inventory as follows:


And test it with your volume on!

Now our hero is a step closer to liberation. But to help him to perform the big scape we´re going to wait until our next tutorial.

In the meantime check what happens if you try to use the ball with the little spider… Will our player able to smash the cute arthropod without mercy or maybe you can figure out a better use for this creature?

See you soon!