PushButton Engineレッスン＃4：カスタムコンポーネントへのコントロールの追加

はじめに

本日のチュートリアルでは、 PushButton Engineでキーボード駆動オブジェクトを作成する方法について説明します。 プッシュボタンエンジン（PBE）を始めたばかりの場合は、 PBEチュートリアルシリーズのレッスン 1 、 レッスン2、およびレッスン3を読むと役立つ場合があります。 また、 公式ウェブサイトのオリジナル記事のレッスンをいつでも読むことができます。

キーボード制御

「人間、野菜、宇宙の塵、私たちは皆、遠くから見えないミュージシャンが演奏する神秘的なメロディーに合わせて踊ります。」-アルバート・アインシュタイン。



このレッスンの目的は、キーボードを使用して簡単な図を画面上で移動するカスタムコンポーネントを作成する方法を学習することです。



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



このレッスンは、 PBEを学習し始めたばかりの場合に役立ちます。 しかし、これにもかかわらず、プログラミングに慣れている必要はありません。



内容：

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

-レッスンの紹介

-コンポーネントの作成

-作業結果の確認

-結論

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

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



レッスン開始キット



レッスン用のスターターキットから.swfファイルをコンパイルする場合、画面の中央に青い円が表示されます。



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

レッスン紹介

前のレッスンでは、動作モデルに基づいてキャラクターを制御するシンプルなコントローラーコンポーネントを作成する方法を学びました。 次に、プレーヤーが制御する動きを追加するキーストロークを追加します。



ユーザー入力を合理化するために、 PBEはPBE.isKeyDown（）メソッドを提供します。このメソッドは、ボタンが押されたかどうかを確認します。



キーボードショートカットアクションやボタンの特別なイベントの送信など、より複雑な入力設定のために、 PBEはInputManagerおよびInputMapクラスを提供します 。 これらのクラスはより「強力な」機能を提供しますが、通常、単純なゲームを作成する場合は必要ありません。 このレッスンでは、それらについては説明しません。

コンポーネント作成

前のレッスンのように、3つの単純なコンポーネント（レンダリングコンポーネント、「空間」コンポーネント、コントローラーコンポーネント）を含む単純なシーンを再度作成します。 また、 TicketComponentクラスから継承されるカスタムコンポーネントを作成します。このコンポーネントは、すべてのフレームで自身を「更新」する機能を備えています。



この新しいコンポーネントは、ボタンが左または右に押されたかどうかを確認し、ボタンの1つが押された場合、コンポーネントはオブジェクトを移動します。



InputKeyクラスは、多数のボタンを操作する機能を提供します。

// InputKey

InputKey.LEFT

//

InputKey.stringToKey( "LEFT" )



* This source code was highlighted with Source Code Highlighter .

レッスンのルートディレクトリには、 HeroControllerComponentクラスのテンプレートがあります。 キーボードイベントに応答性を追加するには、 onTick（）メソッドを呼び出すたびに、 PBEに 、押したいボタンをチェックするように要求します。 これは、およそ次の方法でPBE.isKeyDown（）メソッドを使用して実行できます。

// isKeyDown() , , (true — , false — )

if (PBE.isKeyDown(InputKey.SPACE))

{

//

Logger.print( this , "Hey, cheer up!" );

}



* This source code was highlighted with Source Code Highlighter .

現在押されているキーに応じて、空間コンポーネントの位置を変更します。 前のレッスンのように、 PropertyReferenceクラスを介して空間コンポーネント位置変数への参照を受け取り、ルールに従って変更を行い、この変数に新しい値を設定します。



オブジェクトの位置を変更するルール：



1）右キーが押された場合：オブジェクトを右に移動します

2）「左」キーが押された場合：オブジェクトを左に移動します

3）オブジェクトがフラッシュドライブの右端を超えた場合：オブジェクトをフラッシュドライブの右端に戻します

4）オブジェクトがフラッシュドライブの左端を超えた場合：オブジェクトをフラッシュドライブの左端に戻します



動作の仕組みがわかったので、これをコードで実装できます。 HeroControllerComponentクラスを変更して、以下のコードに一致させます。



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

作業結果の確認

フラッシュドライブをコンパイルすると、 .swfファイルが表示され、その内容は次のスクリーンショットのようになります。

おわりに

おめでとうございます。レッスン4を完了し、ユーザー入力の反応を追加する方法を学びました。



以下のリンクから、レッスンで使用されたすべてのファイルをダウンロードできます。



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