PushButton Engine Lesson # 4: Adding Control to a Custom Component

opening speech

In today's tutorial, we'll look at how you can create keyboard-controlled objects in the PushButton Engine . If you’re just starting to learn PushButton Engine (PBE) , then it may be useful for you to read lesson # 1 , lesson # 2 and lesson # 3 from the PBE series of lessons. Also, you can always read the lessons in the original articles on the official website .
')

Keyboard control

“Human beings, vegetables or cosmic dust, we all dance to a mysterious melody that an invisible musician plays from a distance.” - Albert Einstein.

The goal of this lesson is to learn how to create custom components that use keyboards to move a simple shape around the screen.

Like previous lessons, this lesson consists of a series of steps: small gaps that will focus on achieving small goals. This approach will speed up the process of understanding the PusButton Engine .

This lesson will be useful to you if you are just starting to learn PBE . But despite this, it is not necessary that you be a newcomer to programming.

Content:
- Files to start the lesson
- Introduction to the lesson
- Create component
- Verification of work results
- Conclusion

Files to start the lesson

To start learning a lesson, you can download the start project and use it as a base for completing the lesson:

Set to start learning a lesson

If you compile the .swf file from the starter kit for the lesson, then you should have a blue circle in the center of the screen.

The source files of the lesson will be available at the end of the article.

Introduction to the lesson

In the previous lesson, we learned how to create a simple controller component that controls a character based on a behavioral model. Now, we will add keystrokes, which will add player controlled movements.

In order to streamline user input, PBE provides the PBE.isKeyDown () method, which checks to see if any button is pressed.

For more complex input settings, such as keyboard shortcuts or sending special events for buttons, PBE provides the InputManager and InputMap classes . These classes provide more "strong" functionality, but, usually, they are not needed when creating simple games. In this lesson we will not discuss them.

Create component

Just as in the previous lesson, we will again create a simple scene with 3 simple components: a render component, a “spatial” component and a controller component. And, again, we will create a custom component that will inherit from the TicketComponent class, which has the ability to “update” itself on each frame.

This new component will check if the buttons are pressed left or right, and if any of them are pressed, the component will move the object.

The InputKey class provides the ability to work with a large number of buttons:

// InputKey
InputKey.LEFT
//
InputKey.stringToKey( "LEFT" )

* This source code was highlighted with Source Code Highlighter .

In the root directory of the lesson you will find the template for the HeroControllerComponent class. To add a response to keyboard events, each time we call the onTick () method, we will request PBE to check for pressing the buttons that we are interested in pressing. This can be done using the PBE.isKeyDown () method, something like this:

// isKeyDown() , , (true — , false — )
if (PBE.isKeyDown(InputKey.SPACE))
{
//
Logger.print( this , "Hey, cheer up!" );
}

* This source code was highlighted with Source Code Highlighter .

Depending on which key was pressed, we change the position of the spatial component. As in the previous lesson, we will receive a reference to the variable position of the spatial component through the PropertyReference class, make changes in accordance with our rules and set a new value for this variable.

The rules according to which we will change the position of the object:

1) If the “Right” key is pressed: move the object to the right
2) If the “Left” key is pressed: move the object to the left
3) If the object went beyond the right edge of the flash drive: return the object to the right edge of the flash drive
4) If the object went beyond the left edge of the flash drive: return the object to the left edge of the flash drive

Now that we have figured out how everything should work, we can implement it in code. Modify the HeroControllerComponent class according to the code below:

File Path: /src/HeroControllerComponent.as

package
{
import com.pblabs.engine.PBE;
import com.pblabs.engine.components.TickedComponent;
import com.pblabs.engine.core.InputKey;
import com.pblabs.engine.entity.PropertyReference;

import flash.geom.Point;

/**
* , «» onTick()
*/
public class HeroControllerComponent extends TickedComponent
{
// ,
public var positionReference:PropertyReference;

public function HeroControllerComponent()
{

}

/**
* , .
*
* @param deltaTime , .
*/
public override function onTick(deltaTime:Number): void
{
//
var position:Point = owner.getProperty(positionReference);

// , «»
if (PBE.isKeyDown(InputKey.RIGHT))
{
//
position.x += 15;
}

// , «»
if (PBE.isKeyDown(InputKey.LEFT))
{
//
position.x -= 15;
}

//
if (position.x > 375)
{
//
position.x = 375;

//
} else if (position.x < -375)
{
//
position.x = -375;
}

//
owner.setProperty(positionReference, position);
}
}
}

* This source code was highlighted with Source Code Highlighter .

Check results

After you compile the flash drive, you will need to see the .swf file, the contents of which should be similar to the screenshot below:

Conclusion

Congratulations, you have completed lesson 4 and learned how to add reactions to user input.

You can download all the files that were used in the lesson from the link below.

The source archive of the lesson