2009年04月22日

PushButton Engine Getting Started with Flash CS4(Japanese)

期待のFlash向けGame Framework, PushButton Engineですが僕の環境(Eclipse & Flex Plugin on Mac OS X)ではさっぱり動かず、PBFlexlessEngineDemoをCopy & Pasteで作るも駄目、まともに動くまで様子見かと思われたのですが、ここに来てFlash CS4で動かすDocumentが公開され、ためしにTutorial通りに記述したら動いたので画像入りで以下にその手順を書きます(画像入りはたぶん世界初)。

※日本語が読めない方もこの記事を参照すると思うので、文中の英語、専門用語はカタカナではなくalphabetで記述します。

参照元(reference to):
Getting Started With Flash CS4

Chapter 0(original)

PushButton Engineをdownloadします。
Download PushButton Flash Game Engineにはzip圧縮版がdownloadできます。最新版はpushbuttonengine - Google Codeのrepositry上からcheckoutします。もちろんlocal環境にSubversionが無ければcheckoutできません。Mac OS X v10.5には標準で入っていますが、Windowsには入っていないので予め入れておく必要があります。第2引数のProject nameは自由に変えられますが、ここではpushbuttonengine-read-onlyのままにします。

svn checkout http://pushbuttonengine.googlecode.com/svn/trunk/ pushbuttonengine-read-only
zip archiveをextract、またはcheckoutされたPushButton Engineは以下のような構成になっています:
root.png  以降、pushbuttonengine-read-only folderの事を(as) PBE root folderと呼びます。

TheSDK

Flash CS4のmenuから以下の手順でActionScript 3.0の詳細設定dialogを表示します。

(jp)Flash->環境設定->ActionScript->ActionScript 3.0設定...
(en)Edit->Preferences...->ActionScript->ActionScript 3.0...
「ライブラリパス:(Library path:)」の+ buttonを押して、 SWC filesの含まれるfolderを指定します。例では既にcheckoutしたPusshButton Engineを/Users/<userName>/Program/pushbuttonengine-read-onlyに保存しているとします。Library folderは前述のroot folder直下、Libraries folderなので、Open dialog boxでLibraries folderを指定します。

pbe_flash_01.png

Hello, World!

new *.fla projectを作ります。menuから以下の手順で作成します。

(jp)ファイル->新規...->Flashファイル(AS3.0)
(en) File->New...->Flash File (ActionScript 3.0)
Timeline tabから、Mainのtimelineの1frame目をright clickし、Actionを選びScript windowを表示させます。

pbe_flash_04.png

Getting Started With Flash CS4 の中で示された、以下のscriptを貼り付け、documentをsaveします。ここでの名前はHelloWorld.flaとしましょう。

// Import some PushButton Engine classes.
import PBLabs.Engine.Core.*;
import PBLabs.Engine.Debug.*;
 
// Tell PBE where the root of our app is.
Global.MainClass = this;
 
// Display a log message via the Logger.
Logger.Print(this, "Hello, world!");  

pbe_flash_02.png

保存が終了したら実行します。

(jp)制御->ムービープレビュー
(en)Control -> Test Movie
出力タブ(Output tab)に以下のlogが表示されればPushButton SDKはinstall成功(success)です。
[object MainTimeline] - Hello, world!

Simple Platformer

HelloWorld.flaを閉じ(close)、以下の手順でnew documentを作成します。

(jp)ファイル->新規...->Flashファイル(AS3.0)
(en) File->New...->Flash File (ActionScript 3.0)
Timeline tabから、MainのTimelineの1frame目をright clickし、Actionを選びScript windowを表示させます。 Getting Started With Flash CS4 の中で示された以下のscriptを貼り付け、documentをsaveします。今度の名前はPlatformer.flaとしましょう。
import PBLabs.Engine.Core.*;
 
// Tell PBE where the root of our app is.
Global.MainClass = this;
 
// Load the level by indicating what file to load, and what group to start with.
LevelManager.Instance.AddLevelFileReference("level.pbelevel", 0);
LevelManager.Instance.AddGroupReference("Everything", 0);
LevelManager.Instance.Start();
 
// References to components. We have to reference them, otherwise the compiler
// will remove them from the SWF and the level won't load correctly. Every
// class the level file references needs to be mentioned here.
import PBLabs.Rendering2D.Scene2DComponent;PBLabs.Rendering2D.Scene2DComponent;
import PBLabs.Rendering2D.SpriteRenderComponent;PBLabs.Rendering2D.SpriteRenderComponent;
import PBLabs.Rendering2D.SpriteSheetComponent;PBLabs.Rendering2D.SpriteSheetComponent;
import PBLabs.Rendering2D.SimpleSpatialComponent;PBLabs.Rendering2D.SimpleSpatialComponent;
import PBLabs.Rendering2D.BasicSpatialManager2D;PBLabs.Rendering2D.BasicSpatialManager2D;
import PBLabs.Rendering2D.CellCountDivider;PBLabs.Rendering2D.CellCountDivider;
import PBLabs.Box2D.Box2DDebugComponent;PBLabs.Box2D.Box2DDebugComponent;
import PBLabs.Box2D.Box2DManagerComponent;PBLabs.Box2D.Box2DManagerComponent;
import PBLabs.Box2D.Box2DSpatialComponent;PBLabs.Box2D.Box2DSpatialComponent;
import PBLabs.Box2D.PolygonCollisionShape;PBLabs.Box2D.PolygonCollisionShape;
import PBLabs.Box2D.CircleCollisionShape;PBLabs.Box2D.CircleCollisionShape;
import PBLabs.StupidSampleGame.DudeController;PBLabs.StupidSampleGame.DudeController;
import PBLabs.Animation.AnimatorComponent;PBLabs.Animation.AnimatorComponent;
import PBLabs.Rendering2D.UI.SceneView;PBLabs.Rendering2D.UI.SceneView;

pbe_flash_03.png

続いてLevel fileを保存します。Notepad(Windows)やTextEdit(Mac OS X)などのtext editorを使ってXML descriptionをpaste。platformer.flaと同じ階層(same directory)にsaveします。名前はlevel.pbelevelとします。
もしくは以下の場所からlevel.pblevelをplatformer.flaと同じ階層(same directory)へcopyします。

<PBE root folder>/Projects/Demos/PBEngineDemo/Assets/Levels/level.pbelevel

pbe_flash_05.png

次にこのgame専用のcustom componentを作成します。Getting Started With Flash CS4 のDudeController classをtext editorにpaste、saveします。名前はDudeController.asで、save locationはplatformer.asと同じ階層(same directory)にPBLabs、更にその中にStupidSampleGame folderを生成し、saveします。

/*******************************************************************************
 * PushButton Engine
 * Copyright (C) 2009 PushButton Labs, LLC
 * For more information see http://www.pushbuttonengine.com
 * 
 * This file is licensed under the terms of the MIT license, which is included
 * in the License.html file at the root directory of this SDK.
 ******************************************************************************/
package PBLabs.StupidSampleGame
{
   import PBLabs.Box2D.CollisionEvent;
   import PBLabs.Engine.Core.ITickedObject;
   import PBLabs.Engine.Core.InputMap;
   import PBLabs.Engine.Core.ObjectTypeManager;
   import PBLabs.Engine.Core.ProcessManager;
   import PBLabs.Engine.Entity.EntityComponent;
   import PBLabs.Engine.Entity.PropertyReference;
   import PBLabs.Engine.Resource.ResourceManager;
   import PBLabs.MP3Sound.MP3Resource;
   
   import flash.geom.Point;
   import flash.media.Sound;

   public class DudeController extends EntityComponent implements ITickedObject
   {
      public var VelocityReference:PropertyReference;
      
      public var JumpSound:MP3Resource;
      
      public function get Input():InputMap
      {
         return _inputMap;
      }
      
      public function set Input(value:InputMap):void
      {
         _inputMap = value;
         
         if (_inputMap != null)
         {
            _inputMap.AddBinding("GoLeft", _OnLeft);
            _inputMap.AddBinding("GoRight", _OnRight);
            _inputMap.AddBinding("Jump", _OnJump);
         }
      }
      
      public function OnTick(tickRate:Number):void
      {
         var move:Number = _right - _left;
         var velocity:Point = Owner.GetProperty(VelocityReference);
         velocity.x = move * 100;
         
         if (_jump > 0)
         {
            if (JumpSound != null && JumpSound.SoundObject)
               JumpSound.SoundObject.play();
            
            velocity.y -= 200;
            _jump = 0;
         }
         
         Owner.SetProperty(VelocityReference, velocity);
      }
      
      public function OnInterpolateTick(factor:Number):void
      {
      }
      
      protected override function _OnAdd():void
      {
         ProcessManager.Instance.AddTickedObject(this);
         
         Owner.EventDispatcher.addEventListener(CollisionEvent.COLLISION_EVENT, _OnCollision);
         Owner.EventDispatcher.addEventListener(CollisionEvent.COLLISION_STOPPED_EVENT, _OnCollisionEnd);
      }
      
      protected override function _OnRemove():void
      {
         Owner.EventDispatcher.removeEventListener(CollisionEvent.COLLISION_EVENT, _OnCollision);
         Owner.EventDispatcher.removeEventListener(CollisionEvent.COLLISION_STOPPED_EVENT, _OnCollisionEnd);
         
         ResourceManager.Instance.Unload("../Assets/Sounds/testSound.mp3", MP3Resource);
         ProcessManager.Instance.RemoveTickedObject(this);
      }
      
      private function _OnCollision(event:CollisionEvent):void
      {
         if (ObjectTypeManager.Instance.DoesTypeOverlap(event.Collidee.CollisionType, "Platform"))
         {
            if (event.Normal.y > 0.7)
               _onGround++;
         }
         
         if (ObjectTypeManager.Instance.DoesTypeOverlap(event.Collider.CollisionType, "Platform"))
         {
            if (event.Normal.y < -0.7)
               _onGround++;
         }
      }
      
      private function _OnCollisionEnd(event:CollisionEvent):void
      {
         if (ObjectTypeManager.Instance.DoesTypeOverlap(event.Collidee.CollisionType, "Platform"))
         {
            if (event.Normal.y > 0.7)
               _onGround--;
         }
         
         if (ObjectTypeManager.Instance.DoesTypeOverlap(event.Collider.CollisionType, "Platform"))
         {
            if (event.Normal.y < -0.7)
               _onGround--;
         }
      }
      
      private function _OnLeft(value:Number):void
      {
         _left = value;
      }
      
      private function _OnRight(value:Number):void
      {
         _right = value;
      }
      
      private function _OnJump(value:Number):void
      {
         if (_onGround > 0)
            _jump = value;
      }

      private var _inputMap:InputMap;
      private var _left:Number = 0;
      private var _right:Number = 0;
      private var _jump:Number = 0;
      private var _onGround:int = 0;
   }
}   

最後にこのgameに必要なresource filesをcopyします。PushButton Engineをcheckoutしたfolderの中からcopyしましょう。

<PBE root folder>/Projects/Demos/PBEngineDemo/Assets/Images/mannequin.png
<PBE root folder>/Projects/Demos/PBEngineDemo/Assets/Images/platform.png
<PBE root folder>/Projects/Demos/PBEngineDemo/Assets/Sounds/testSound.mp3
必要なfileは、Image folderの中からmannequin.pngとplatform.png 。Sounds folderの中からtestSound.mp3です。
Platformer.flaと同じ階層(same directory)にcopyします。

pbe_flash_06.png

動かしてみましょう。swf fileを起動します。

(jp)制御->ムービープレビュー
(en)Control -> Test Movie
以下のようなwindowが表示されれば成功です。矢印キー(arrow keys)で操作します。上矢印キーでこのマネキン…dude(気取り屋さん?)が「ドウッ!」と叫んでジャンプすればOK。

pbe_flash_08.png

posted by Meseta at 22:40| Comment(0) | PushButton Engine
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。