If you are new to programming and creating games with Stencyl, then attributes might be something that you haven’t learnt how to use yet. However, learning about attributes is vital if you want to progress your Stencyl coding beyond the absolute minimum.
The purpose of this post is to cover the basics of attributes before we move on to more detail about them in a later article.
An attribute is a method of storing an individual piece of information that can be referenced or updated at a later time. It could be a number, or a piece of text, or any of the types of information shown in screenshot below…
Let’s consider a basic game scenario, where we have an actor that moves 5 pixels to the right each time we press a key on the keyboard. Let’s also consider that we would like to be able to increase and decrease the speed at which the player moves. As is often the case, there are several ways of achieving what we want to do, but we’ll use an attribute to specify how many pixels (points on the screen) the player will move each time we press the relevant key.
We’re going to create a single behavior that will move the player when we press a key, and it will also allow us to increase or decrease the speed of the player by pressing the up and down arrow keys.
Setting it up
Let’s set up a basic scene with a player that moves each time we click on it…
- Create a scene
- Add any actor to it (ensure that physics is disabled for this actor)
- Create a behavior called Move Player
Let’s clarify what this behavior is doing: Each time we press and release the Enter key, the behavior sets the horizontal (x) position of the actor to its own position plus 5.
We’d like to be able to change the number 5 by pressing our up and down arrow keys on the keyboard, and to do this, we need to create a number attribute…
Create an Attribute…
Make sure that you are looking at your Move Player behavior and click on the Attribute tab down in the bottom, right-hand corner of the screen. This displays the attribute panel in place of the code-block palette, so we can now create a new attribute. At the top of the attribute panel, click on the + Add Attribute button to display the ‘Create Attribute…’ dialog box, then complete the details in the dialog box as shown in the screen capture below:
If you haven’t already done so, click on OK to confirm the settings for this attribute. Have a look at the bottom of the attribute panel to view the settings for the new speed attribute, and you will see that there is an additional configuration item labelled Default Value. Depending on the size of your screen, you may not be able to see all the attribute settings, in which case you can either adjust the size of the bottom part of the panel by dragging the horizontal bar upwards, or you can use the sliders to view the information that is off the bottom of the screen.
When we create a new attribute, we can (and usually should) give it a default value. This just means that, from the start, the attribute has a value that we can work with. Let’s give our speed attribute a default value of 5 (pixels per frame). There is one more option called ‘Hidden?’ which determines whether or not users of the behavior (including you) will be able to change the default value of the attribute when they attach it to their actor. We will leave this box unchecked so that the attribute is not hidden. The attribute configuration panel should now look like the image below:
We have now created a new number attribute called speed, so let’s put it use…
Using an Attribute
Switch back to the behavior’s code (click on the ‘Palette’ tab at the bottom, left-hand corner of the Stencyl window), so that you can see the code-block that we created. What we are going to do is replace the ‘hard-coded’ number 5 with our attribute.
Click on the ‘Attribute’ button in the top section of the code-block palette, and you will see all the coding options relating to attributes as shown below:
Changing the value of the speed attribute during design-time is now very easy, even for someone else who uses your behavior (and even if they don’t understand how the behavior works). To demonstrate this, click on the tab for your actor (I called mine Player) and then click on the ‘Behaviors’ button towards the top of the screen as shown below:
Changing Attributes at Run-time
It’s all very well changing the value of an attribute at design-time; we could have achieved exactly the same result by manually changing the hard-coded number in the behavior, so let’s add some code that will enable us to change the value of the speed attribute whilst the game is running…
Go back to the Move Player behavior and click +Add Event, Input, Keyboard to add an event that will respond to a key being pressed. Change the control to ‘up’ and then add the require code-blocks so that the event looks like the code below:
What’s Going On?
If you have just tried running the game, you might be able to figure out what’s happening; you press Enter, and the actor moves to the right by the number of pixels defined by the value of our speed attribute. If you press the ‘up’ key, then the speed attribute’s value will increase by 10, so the next time you press the Enter key, the actor will move to the right by a larger step. However, it’s a bit hit and miss to determine exactly what’s going on, so now would be a great time to test out some of the debugging tips we looked at in previous articles on the TheStencylBlog.com! If you haven’t read those articles yet, I recommend that you read both Part 1 and Part 2 so you are able to follow the next few steps!
Let’s track the value of the speed attribute by printing its value to the debug console each time it changes…
We can also set up the ‘down’ key so that it decreases the value of the speed attribute, by adding the code below (if you want a shortcut to create the code, read on!)
Incidentally, you may have noted that the three events within the behavior are called, Move on Enter, Increase Speed, and Decrease Speed rather than having the default names created by Stencyl. It isn’t immediately apparent that events can be renamed, but if you double-click on the name of the attribute, you can rename it as required.
If you test the scene now, and turn on the debugging console, you’ll see that you can increase or decrease the speed of the actor by pressing the up and down keys respectively.
It’s also useful to note that if you press the down key enough times to make speed a negative number, the actor will move left each time you press Enter.
A More Practical Use
The behavior we have created is great for demonstrating how attributes work, but we can make some quick changes that will allow us to use the behavior in a more practical manner.
Currently, we need to press Enter every time we want the actor to move, but a small modification will allow us to have the actor moving all the time, and to have the speed change when we press the up and down keys. Add a new ‘When Updating’ event (+Add Event, Basics, When Updating) and rename it to be called Move Actor. Now copy the code block from the Move on Enter event and paste it into the new Move Actor event so that it looks like the code below:
When you test the scene now, the actor will move automatically because, instead of having to press the Enter key to make the actor move, the actor’s x position is being updated ‘always’ (technically, it is being updated on every frame update). However, things might be moving too fast to get a feel for what is going on (and your actor may be disappearing off the side of the screen!), so I recommend making the following changes:
- Set the default value of the speed attribute to 1
- In the Increase Speed and the Decrease Speed event, change the 10 to a 1
If you’re not sure, I’ll explain the changes below…
Setting the default value of the speed attribute to 1 means that the actor will only move one pixel at a time each on each frame. That’s 5 times slower than the current default, so the actor will move much more slowly.
Changing the hard-coded value of 10 down to 1 in both the Increase Speed and the Decrease Speed events means that when the up or down keys are pressed, the change in speed will only be 1 pixel; again, much slower than 10 pixels at a time. Making these changes allows the actor to move more smoothly, and it also gives you time to view the debugging console to examine what’s going on with changes to the speed attribute.
One Last Change!Although it’s not always possible in a tutorial, I try to encourage ‘best-practice’ whenever I can. In this case we have a hard-coded value that is duplicated in two different events within the behavior. This isn’t a disaster, but it does mean that if you want to experiment with the change in speed of the actor, you need to change the number in two different places (in Increase Speed and the Decrease Speed event). It would be great if we could just change that number once… and we can; the trick is to replace the hard-coded number with an attribute!
Click on the Attribute tab and create a new number attribute called deltaX (delta refers to a change, but you could call it anything that you are comfortable with). I’ve taken a screenshot of the attribute configuration dialog box, so you can see the settings that I have used…
Now you need to change both the Increase Speed and the Decrease Speed events so that they refer to the new attribute rather than being hard-coded…
We also had a look at some more debugging techniques, and it’s always worth remembering that if something isn’t working quite as planned, it’s a very easy process to add some debugging code to keep track of the attributes in your game.
As always, it’s great to receive your feedback about these articles, so please do post your comments below.
Please note, that this article has been recovered from archives, and we regret that comments prior to the archive retrieval are not shown. We thank previous contributors, and apologise for being unable to display your comments. New comments can be added.