PushButton Engineレッスン＃2：単純な形状の追加

はじめに

今日は、 プッシュボタンエンジン（PBE）の研究を続け、 PBEでオブジェクトとコンポーネントを作成する方法を学びます。 この記事は、PBEコンポーネントの操作と単純なシェイプの作成について説明している第2公式 プッシュボタンエンジン チュートリアルの翻訳です 。

PushButton Engineレッスン＃2：単純な図形の追加

「建物が高ければ高いほど、その基礎は低くなります」-セントオーガスティン

このレッスンの目的は、画面に描画される単純な形状を追加する方法をユーザーに教えることです。

このレッスンは一連のステップで構成されています。小さな目標を達成することに焦点を当てる小さなギャップです。 このアプローチは、 PusButton Engine（PBE）の理解をスピードアップします。

内容：
-レッスンを開始するファイル
-初期プロジェクトをダウンロードする
-ソースファイルの編集
-実際に確認してください
-概要
-結論

レッスンを開始するファイル

レッスンの学習を開始するには、スタータープロジェクトをダウンロードし、レッスンのベースとして使用できます。

レッスン開始キット

完了したレッスンのソースファイルは、記事の最後にあります。

初期プロジェクトをダウンロード

レッスン1に基づいて、アーカイブの内容を目的のフォルダーに解凍し、プロジェクトが一緒にコンパイルされることを確認する必要があります。 これにより、作業を続行できる「基本」プロジェクトが作成されます。

これで、単純なプッシュボタンエンジンシーンの設定を開始でき、シーンに円を追加して、中央に描画できます。

ソースファイルの編集

一見したところ、このプロジェクトはコンテンツのない通常のFlashプロジェクトのように見えます。

ファイルパス：/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 .

最初にSceneViewを設定します。これは、シーンで作成されたオブジェクトが描画される「キャンバス」です。

ここで、補助関数PBE.initializeSceneを呼び出して、シーン自体（ Scene ）を作成します。

/**
* .
*/
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 .

次に、ヒーローオブジェクトを作成します。 ヒーローのオブジェクトとシーンのオブジェクトには2つのコンポーネントがあります。

最初のコンポーネントは空間コンポーネントです。オブジェクトが配置されている空間マネージャーを「伝えます」

2番目のコンポーネントはレンダー（レンダー）コンポーネントです。レンダーマネージャーに自身を登録し、画面にオブジェクトを表示する方法をマネージャーに「伝えます」。 現在のレッスンでは、単純な円の画像を使用しますが、 PBEはさらに多くの機能を提供します。

/**
* .
*/
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 .

すでに多くを達成しています！ ここでプロジェクトをコンパイルする場合、画面上にオブジェクトを表示する必要があります！

実際に確認してください

コンパイル後、次のような.swfファイルが作成されます（クリックして新しいウィンドウで開きます）。

復習

したがって、 ActionScriptを使用してオブジェクトを作成するには、次のコードを使用する必要があることがわかりました。

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

// ( )

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

* This source code was highlighted with Source Code Highlighter .

コンポーネントを作成するには、もう少しコードを書く必要があります。

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

//

* This source code was highlighted with Source Code Highlighter .

おわりに

やった！ レッスン2を完了しました。 このレッスンでは、最初のオブジェクトとコンポーネントをゲームに追加し、作業の結果を見ました！ 将来のレッスンはより難しくなりますが、レッスンがPBEの対処に役立つことを願っています。

必要に応じて、このレッスンの執筆中に作成されたファイルをダウンロードできます。

レッスンソースでアーカイブする

翻訳者から

2番目のレッスンの翻訳は終了しました。このレッスンは、 レッスン1のコンパートメントでPBEについて多くのことを語ったとは言えませんが、さらに興味深いものになり、 PBEで作業する喜びをすべて理解できることを願っています。

すべてのレッスンへのリンク（レッスンのレイアウトに従って更新されます）：

1） PushButton Engineレッスン＃1：FlashDevelopの設定
2） プッシュボタンエンジンレッスン＃2：単純な形状の追加
3） PushButton Engineレッスン＃3：カスタムコンポーネントへのコントロールの追加