PushButton Engine Lesson # 2: add a simple shape

opening speech

Today we will continue to study the PushButton Engine (PBE) and learn how to create your objects and components in PBE . The article is a translation of the 2nd official PushButton Engine lesson , which tells about working with PBE components and creating simple shapes.
')

PushButton Engine Lesson # 2: Adding a Simple Figure

“The higher your building should be, the lower its foundation should be” - Saint Augustine

The goal of this lesson is to teach users to add simple shapes that will be drawn on the screen.

This lesson consists of a series of steps: small gaps that will focus on achieving small goals. This approach will speed the understanding of the PusButton Engine (PBE) .

Content:
- Files to start the lesson
- Download the initial project
- Editing source files
- Check out all this in action.
- Overview
- 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

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

Download initial project

Based on lesson # 1, you will need to unpack the contents of the archive into the desired folder and make sure that the project is compiled for you. This will give you a "basic" project, with which you can continue to work.

Now we can proceed to setting up a simple PushButton Engine scene, as well as add a circle to the scene that will be drawn in the center.

Editing source files

At first glance, our project looks like a regular Flash project without content.

File path: /src/Level2Base.as

[SWF(width= "800" , height= "600" , frameRate= "60" )]
public class Lesson2Base extends Sprite
{
public function Lesson2Base()
{
// PBE
PBE.startup( this );
}
}

* This source code was highlighted with Source Code Highlighter .

In the beginning we will set up the SceneView , which is a “canvas” on which objects created on the stage will be drawn.

Now we will create the scene itself ( Scene ), by calling the auxiliary function PBE.initializeScene :

/**
* .
*/
private function createScene(): void
{
//
var sceneView:SceneView = new SceneView();
sceneView.width = 800;
sceneView.height = 600;

// ,
PBE.initializeScene(sceneView);
}

* This source code was highlighted with Source Code Highlighter .

Now we will create a hero object. The object of the hero, as well as the object of the scene, will have 2 components.

The first component is a spatial component: it “tells” the space manager where the object is located

The second component is the render component (drawing): it registers itself with the render manager and “tells” the manager how the object should be shown on the screen. In the current tutorial, we will use a simple image of a circle, but PBE provides much more features.

/**
* .
*/
private function createHero(): void
{
//
var hero:IEntity = PBE.allocateEntity();

// «»
var spatial:SimpleSpatialComponent = new SimpleSpatialComponent();

// 0,0
spatial.position = new Point(0,0);
// 50,50
spatial.size = new Point(50,50);
spatial.spatialManager = PBE.spatialManager;

// "Spatial"
hero.addComponent(spatial, "Spatial" );

//
var render:SimpleShapeRenderer = new SimpleShapeRenderer();
render.fillColor = 0x0000FF0;
render.isCircle = true ;
render.lineSize = 2;
render.radius = 25;
render.lineColor = 0x000000;
//
render.scene = PBE.scene;

// «» ,
render.positionProperty = new PropertyReference( "@Spatial.position" );
// «» ,
render.rotationProperty = new PropertyReference( "@Spatial.rotation" );

// "Render"
hero.addComponent(render, "Render" );

// "Hero"
hero.initialize( "Hero" );
}

* This source code was highlighted with Source Code Highlighter .

We have already achieved a lot! If you compile the project now, you will need to see the object on the screen!

Check it all out in action.

After compilation you should have a .swf file similar to the one shown below (click to open in a new window):

Overview

So now we know that in order to create an object using ActionScript , you need to use the following code:

//
var newEntity:IEntity = PBE.allocateEntity();

// ( )

// PBE "EntityName"
newEntity.intialize( "EntityName" );

* This source code was highlighted with Source Code Highlighter .

To create components you need to write a little more code:

//
var newComponent:IEntityComponent = new WhateverComponent();
//
newComponent.field = value;
// "TheComponentName"
newEntity.addComponent(newComponent, "TheComponentName" );

//

* This source code was highlighted with Source Code Highlighter .

Conclusion

Hooray! You have just completed lesson # 2 . During this lesson, you added your first objects and components to the game and saw the results of your work! Future lessons will be more difficult, but we hope that the lessons will help you to deal with PBE .

If you wish, you can download the files that were created during the writing of this lesson:

The source archive of the lesson

From translator

Translation of the second lesson came to an end, I can not say that this lesson, along with lesson # 1, told us a lot about PBE , but I hope it will be more interesting later and we will understand all the pleasures of working with PBE .

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