はじめに
「心をコントロールしなければ、他の誰かがそれをします。」-ジョン・オールストン
このチュートリアルでは、単純な塗りつぶしを画面上で移動するカスタムコンポーネントを追加します。 プッシュボタンエンジン（PBE）を始めたばかりの場合は、 PBEに関する一連のチュートリアルのレッスン＃1とレッスン＃2を読むと便利です。 また、 公式Webサイトのドキュメント 、特に公式レッスン＃3をいつでも参照できます。 公式レッスンの翻訳はこの記事です。
このレッスンは一連のステップで構成されています。小さな目標を達成することに焦点を当てる小さなギャップです。 このアプローチは、 PusButton Engineの理解をスピードアップします。
このレッスンは、 PBEを学習し始めたばかりの場合に役立ちます。 しかし、これにもかかわらず、プログラミングに慣れている必要はありません。
内容：
-レッスンを開始するファイル
-レッスンの紹介
-コンポーネントの作成
-接続する
-実際に確認してください
-結論
レッスンを開始するファイル
レッスンの学習を開始するには、スタータープロジェクトをダウンロードし、レッスンのベースとして使用できます。
レッスン開始キット
レッスン用のスターターキットから.swfファイルをコンパイルすると、フラッシュドライブの左上隅に青い円が表示されます。
完了したレッスンのソースファイルは、記事の最後にあります。
レッスン紹介
PushButton Engineの強みの1つは、ゲームにコンポーネントと機能を追加する柔軟な方法です。 このレッスンでは、動きを作成するための比較的単純なコンポーネントを作成します。 将来的には、レッスンはユーザー入力イベントと衝突追跡を扱いますが、このレッスンのこのレッスンでは、物事を比較的単純にするようにします。
このレッスンの「初期」セットは、ボールが画面の左上隅、または座標x = -375およびy = -275にシフトされることを除いて、 レッスン＃2の結果と非常に似ています。 ボールをこれらの座標に移動して、フラッシュドライブの左上隅に配置しました。 フラッシュドライブの座標系を示す画像に注意してください。
コンポーネント作成
前のレッスンと同様に、単純なシーンをセットアップします。 ヒーローオブジェクトには、レンダリングコンポーネント、「空間」コンポーネント、コントローラーコンポーネント（ DemoControllerComponent ）の3つのコンポーネントがあります。 コントローラコンポーネントは、ボールオブジェクトにジグザグの動きを追加します。これは、ゲームSpace Invandersで見られるものと似ています。
開始するには、新しいコンポーネントのクラスを作成する必要があります。 新しいコンポーネントにコンポーネントの基本的なプロパティを持たせるために、新しいコンポーネントのクラスを標準クラスの1つから拡張します。 この例で使用するプロパティである標準コンポーネントとして、 TickedComponentクラスが選択されました。 TickedComponentクラスから拡張されるコンポーネントは、1秒あたり30回呼び出されるonTick（）メソッドを受け取ります。 移動ロジックをonTick（）メソッドに配置します。
したがって、33ミリ秒ごとに、 onTick（）メソッドがコントローラーコンポーネントで呼び出されます。 このメソッドは、親オブジェクトの位置を「見て」（位置は「空間」コンポーネントから取得されます）、単純な動きを作成するために小さな変更を追加します。 コントローラコンポーネントのロジックは次のとおりです。
1）フラッシュドライブの左隅にいる場合：
1.1）右に移動を開始します。
1.2）下に移動します。
2）フラッシュドライブの右隅にいる場合：
2.2）左に移動し始めます。
2.3）下に移動します。
3）他の場合には、私たちが現在進んでいる方向に動き続けます。
アクションプランを作成したので、これらすべてをプロジェクトに統合する必要があります。 プロジェクトのソースディレクトリに新しいファイルを作成し、 DemoControllerComponent.asという名前を付けて、次のコードをコピーします。
ファイルパス：/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 .
新しいコンポーネントを作成したので、ゲームに追加するときが来ました！ コントローラコンポーネントは、 レッスン2で他のコンポーネントが追加されたのと同じ方法で追加します 。
createHero（）メソッドの最後で、 hero.addComponent（）メソッドの最後の呼び出しの直後に、次のコード行を追加します。
ファイルパス：/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 .
DemoControllerComponentという新しいコントローラーの作成を完了し、それをオブジェクトに接続して、オブジェクトの「空間」コンポーネントに関連付けました。
以上です！ フラッシュドライブのコンパイルと起動を妨げるものは何もありません。
実際に確認してください
コンパイル後、次のスクリーンショットのような.swfファイルが表示されます。
おわりに
おめでとうございます!!! レッスン3を完了し、最初のカスタムコンポーネントを作成し、実際の動作を確認しました。
以下のリンクから、レッスンで使用されたすべてのファイルをダウンロードできます。
レッスンソースでアーカイブする
すべてのレッスンへのリンク（レッスンのレイアウトに従って更新されます）：
1） PushButton Engineレッスン＃1：FlashDevelopの設定
2） プッシュボタンエンジンレッスン＃2：単純な形状の追加
3） PushButton Engineレッスン＃3：カスタムコンポーネントへのコントロールの追加