Stencyl – Speed Up/Down, Fast Forward/Slow Motion

Being able to speed up, or slow down a game is useful in many instances. Think about Turret Defence games where you can speed up the game for durations that would otherwise be either boring, or taxing, to the player. (E.g. not enough is happening, or too much is going on.) It can also be useful in other situations, and can also be useful for achieving certain effects.

It’s quite simple to adjust the speed of a game in Stencyl, though you’ll need to use the ‘code’ block. I’m going to start off with the example.

[swf src=”http://www.jeffreydriver.co.uk/wp-content/uploads/2017/01/Speed-Test.swf” width=640 height=480]

In the above example, press SPACE to cycle through the available speeds. In my example it goes from 2 to 20 (in increments of 2.) It’s important to note that 10 is the default and stands for 100fps. A lower amount will speed up the game, while a number higher than 10 will slow it down.

NOTE: You cannot have a speed value less than 1 as it will cause the game to freeze.

Onto the Code

The code for this is really simple. In the image above you’ll see a number variable that sets the value. (In this instance it’s 10, the default value.) Obviously you can change this value in-game as you need. The code is below:

Engine.STEP_SIZE = Std.int(_Speed);

The ‘_Speed’ text in the ellipses is the internal name of the number attribute, so you’d change this to whatever the INTERNAL name of your attribute is. The internal name differs from the name that you gave it. It can be found by clicking the ‘attributes’ panel.

Stencyl – Limiting / Removing Decimal Places

When dealing with numerical values and returning scores, etc. you may notice that sometimes values are returned with extraneous decimal values, such as 456.000000000002. This is great for accuracy, but not so great when you want to return values to the player, such as scores, damage per second, and so on. Too many decimal places are generally unneeded, are annoying to the player, and will likely mess up your screen (i.e. stretching across the entire screen and even passing beyond.), Fortunately it’s easy to deal with.

Unwanted decimal places are easily dealt with, and you can also choose how many decimal places you wish to show.
decimal-places

The above code isn’t particularly complicated, though there’s a few things you need to know. First of all, ‘Your Value’ is the value you wish to display, yet limit the number of decimal places.

Secondly you’ll see the number 10 mentioned twice. This converts the number into the required number of decimal places. Think of each ‘0’ as a decimal place; so if our value is one, ’10’ will return 1.0, ‘100’ will return 1.00, as so on.

Stencyl – Creating a Dynamic Inventory

RPG’s, Point & Click games, and many, many, others use inventory systems. Such systems range from relatively basic ones, to fully fledged dynamic systems. While working on game that was non-linear, I needed a dynamic inventory system.

What is a dynamic inventory system?

In this instance I’m talking about an inventory that displays items in the order in which they were collected, and removes them as they’re used, bumping unused items down the list to fill vacant spaces. Some simpler inventory systems may just have specific slots for particular items, and may not rearrange items to fill unused spaces.

The Code

dymanic-inventory2
This code is an actor behaviour that’s attached to all items that the player can pick up. The first section checks if the item is on the ‘kill list’, this is important as when a player picks up an item, the item is then added to the kill list so that if the player visits the same scene again, the item isn’t respawned. (Technically it is respawned anyway, but if it’s on the kill list it is instantly killed so the player never notices.)

dymanic-inventory0

The code above is attached to the item which is picked up. The fist line isn’t part of the inventory system itself. It just displays a description when the player moves their mouse over the item.

I’ve limited by inventory system to 18 slots. This was done to keep things simple as my inventory icons are 32 pixels high, and the screen hight of my game is 576 pixels (576 / 32 = 18). The first ‘IF’ statement checks if inventory is full, i.e. is the inventory count 18? If the inventory is full, a message is displayed informing the player. In my example I have a list with several different messages that are picked at random to stop the message from getting stale for the player. However, chances are that in my game, the player will never actually fill the inventory completely.

In the ‘OTHERWISE IF’ statement, it checks if the inventory count is less than 18. First of all, the examine text attribute is cleared. If this wasn’t done, the text in the first piece of code would remain on screen until another event changed the attribute.

Next, we add the picked up item to a ‘kill list’ by generating a unique custom ID, as mentioned above for the first code snippet. This is important so that the same item cannot be picked up more than once.

The next line adds the corresponding inventory icon to the inventory list. The text ‘Shovel 1 Icon’ is the actual name of the actor, not just a nickname. I’ve done this so that I can easily refer to it and create it later. This isn’t the only way of doing this, but I went for simplicity.

Once we’ve finished running the code we need to, we simply kill the picked up item so show that it’s been picked up and to prevent the player from collecting it again, before we finally trigger a scene behaviour that updates our inventory.

dymanic-inventory1

This code is attached to all scenes via a scene behaviour. The inventory list doesn’t just add new items to the list. It refreshes. It’s does this by destroying the current inventory icons and creating new ones based upon the updated list.

The next bit of code checks how many item are currently in the list so that number can be referred to. It then runs the ‘create’ once for each item in the list.

The ‘create’ code pulls the relevant item from the list, and actually uses this as the actor name. The Y value for each icon is based upon its location in the inventory list. This only works properly if each of your icons are the same height (in this instance it’s 32 pixels.)

In this example the icons are displayed vertically, starting at the top and working down. If you wanted to display the icons horizontally you’d put the ‘current loop count x 32’ code as the X value, where 32 is the width of your icons.

Adding rows or columns to an inventory?

In this example you’re limited to the number of icons you can display according to the number/size of your icons and the dimensions of your screen. If you wanted to display more by using columns or rows, things become more complicated. For instance, if I wanted to allow more than 18 items in the inventory using columns, I would need to calculate the X value when creating the icons. See below:

dymanic-inventory3

Again, you may still need to limit the number of items. In the above example 36 is the max, otherwise icons after entry 36 in the list would then all be created at the X value 36 (the last value that attribute ‘X Value’ is set to.

Using rows and columns in this manner will obviously encroach into your screen space. This may be a problem if your icons are large, or you’re using lots of them.

Stencyl – Custom Grain Effect

Stencyl has some powerful built-in filters called ‘Shaders’ that can be used to create pretty much any effect that you desire. The only downside to these shaders is that they’re limited to certain platforms so they don’t currently work on mobile or web. I was after a grain effect that could be used on web, so I needed a custom solution.

Disclaimer!

This awesome custom grain effect was created for me by the talented Liberado.

Adjustable Custom Grain Effect

This particular bit of code is very complicated and uses advanced features of Stencyl, such as the Image API. It also benefits from being extremely customisable. It can be used for any screen size or resolution, and the size of the grain, the opacity, and cycling speed can all be changed.

The Code

custom-grain-effect

The code can be downloaded below as a working Stencyl project.

custom-grain-effect-stencyl

Stencyl – Turn an actor slowly towards another

Making one actor point towards, or face another is a relatively easy affair. However, simply pointing an actor towards another is rather limited, and may not be what you’re after.

Why would you like to change the speed of rotation?

Being able to change the rate of speed at which one actor turns to face another is useful for a number of situations. Imagine a tower defence game where turrets turn to face enemies, a tank turret slowly rotating independently of the tank’s body, or even using it to turn a plane.

Demo

Open demo in a new window (You may need to enable pop-ups in order to view the demo.)

Arrows to move, Z to fire.

The Code

Let’s have a look at the code that used to achieve the effect.
01-turn-towards-player-when-created
This code is attached to the enemy plane as used in the above demo. When created, the first line creates the player actor. In this instance the player actor is created at a random location on the screen.

Secondly, an actor attribute is created using the player actor. This is so we can refer to it later.

Finally there’s a custom event. This is not relevant to the enemy movement, but I will touch on it at the end.

02-turn-towards-player-drawing
The code in this image is more complex, and it uses the Easy Math Extension, though it’s possible to get this working without it, you would just need to write the code to calculate the angle between the two actors yourself.

‘dA’ is a number attribute that you’d need to create. The ‘value of EnemyTurn’ is a value that’s stored in a map, and dictates the speed at which the actor turns. I’ve used a map value here so that I can change the value in-game. If you don’t need the value to change, you can put a number value directly in here. 1 is a good value. The higher the value, the faster the turn.

The last line simply points the actor in the right direction, and sets the velocity at which it is to move. This would be zero if you wanted it to be stationary.

03-turn-towards-player-custom-event
This third image isn’t part of the actual movement behaviour, but I have used the ‘dA’ value for another purpose. These blocks make the enemy plane fire towards the player. So that the shooting isn’t random, the code checks the value of ‘dA’ and if the value is between -2 and +2, then the enemy will shoot towards the player. When ‘dA’ is zero, the player is in the direct line of sight.