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

opening speech

“If you don't control your mind, someone else does it.” - John Allston



In this lesson, we will add a custom component that will move a simple fill across the screen. If you’re just starting to learn PushButton Engine (PBE) , then it may be useful for you to read lesson # 1 and lesson # 2 from a series of lessons about PBE . Also, you can always refer to the documentation on the official website and, in particular, to the official lesson # 3 , the translation of which is this article.
')
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
- we connect
- Check out all this in action.
- 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 upper left corner of the flash drive.

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

Introduction to the lesson

One of the strengths of the PushButton Engine is the flexible way to add components and functionality to the game. In this lesson, we will create a relatively simple component to create motion. In the future, the lessons will deal with user input events and collision tracking, but in this lesson in this lesson we will try to keep things relatively simple.

The “initial” set for this lesson is very similar to the result of lesson # 2 , except that the ball is shifted to the upper left corner of the screen, or rather to the coordinates x = -375 and y = -275 . We moved the ball to these coordinates so that it is in the upper left corner of the flash drive. Pay attention to the picture showing the coordinate system of our flash drive.

Create component

Just like in the previous lesson, we will set up a simple scene. The hero object will have 3 components: a render component, a “spatial” component and a controller component ( DemoControllerComponent ). The component controller will add a zigzag motion to the ball object, something similar you could see in the game Space Invanders .

To begin, we will need to create a class for the new component. In order for our new component to have the basic properties of the components, we will extend the class for the new component from one of the standard classes. As a standard component, the properties of which we will use in this example, the class TickedComponent was chosen. Components that will be expanded from the TickedComponent class will “get” the onTick () method, which will be called 30 times per second. We will locate the movement logic in the onTick () method.

So, every 33 milliseconds, the onTick () method will be called in the controller component. This method will “look” at the position of the parent object (the position will be obtained from the “spatial” component), and then add small changes in order to create a simple movement. The logic of the component controller will be as follows:

1) If we are in the left corner of the flash drive:
1.1) Start moving to the right.
1.2) Move down.

2) If we are in the right corner of the flash drive:
2.2) Start moving left.
2.3) Move down.

3) In other cases, we continue to move in the direction in which we are moving now.

Now that we have an action plan, we need to embed it all into our project. Create a new file in the source directory of your project, name it DemoControllerComponent.as and copy the following code into it:

File Path: /src/DemoControllerComponent.as

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

import flash.geom.Point;

// TicketComponent, onTick()
public class DemoControllerComponent extends TickedComponent
{
// ,
public var positionReference:PropertyReference;

// ,
// 1 , -1
private var direction: int = 1;

public function DemoControllerComponent()
{

}

// onTick()
public override function onTick(tickRate:Number): void
{
//
var position:Point = owner.getProperty(positionReference);

//
if (position.x < -375)
{
//
direction = 1;

//
position.y += 20;

//
} else if (position.x > 375)
{
//
direction = -1;

//
position.y += 20;
}

// X ,
position.x += direction * 5;

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

* This source code was highlighted with Source Code Highlighter .

Now that we have created a new component, it's time to add it to our game! We add a component controller in the same way that other components were added in lesson # 2 .

At the end of the createHero () method, immediately after the last call to the hero.addComponent () method, add the following lines of code:

File Path: /src/Lesson3Base.as

// -
var controller:DemoControllerComponent = new DemoControllerComponent();
// - . -
// «»
controller.positionReference = new PropertyReference( "@Spatial.position" );

// - "Controller"
hero.addComponent( controller, "Controller" );

* This source code was highlighted with Source Code Highlighter .

We have finished creating a new controller named DemoControllerComponent , as well as connecting it to the object and associating it with the “spatial” component of the object.

That's all! Now nothing prevents us from compiling and running a flash drive.

Check it all out in action.

After compiling, you will need to see a .swf file, similar to the screenshot below:

Conclusion

Congratulations !!! You have completed lesson # 3 , created your first custom component, and saw it work in action.

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

The source archive of the lesson

Links to all lessons (will be updated as lessons are laid out):

1) PushButton Engine Lesson # 1: setting up FlashDevelop
2) PushButton Engine Lesson # 2: add a simple figure
3) PushButton Engine Lesson # 3: add controls to a custom component