ActionScript3でのMVCテンプレートの使用

まえがき

6か月前に初めてactionscript3を書き始めたとき、コードの最適化について考えたことはありませんでした。 オブジェクトの基本的なプロパティを変更したり、新しい単純なメソッドを追加した後、「初心者」向けに多くのブログやサイトで提供されているコードが正しく機能するようにしたかっただけです。 言語の基本的な機能を研究した後、追加のライブラリ、特にプログラムアニメーション用の物理エンジンとツインナーに精通する番になりました。これはすべて、独自のフラッシュゲームを作成することから始まったためです。

最適化に関する考え

今では、かなり多くのプログラムコード、2つのプロトタイプのプロトタイプ、いくつかの小さいながらも経験を積んで、コードを記述するためにMVCテンプレートを使用するようになりました。

MVCに関する情報を検索した後、テンプレートについていくつかのことを学びました。

1.テンプレートを大幅に使用すると時間を節約できます

2.結果のコードは構造化されて出てきます

3.コードを完全に書き換える必要なく、スクリプトモジュールを変更する機能

ActionScript3でMVCを使用する

そして今、宇宙船についての簡単なゲームの例でプログラミング自体に目を向けます。

モデル

このクラスには、船舶の速度、宇宙での位置に関するデータ、つまり船舶の移動に必要なすべての情報が含まれます。 このクラスは、 getおよびsetメソッドを使用して、ゲーム中にデータを変更します。

表示する

このクラスには、おもちゃのすべての表示部分と、プレーヤーアクションのイベントリスナーが含まれています。

コントローラー

最も興味深いクラスは、アプリケーションロジック全体です。 Viewクラスでモーションキーが押されたときに、クラスがイベントをリッスンするとします。 Modelクラスのデータを変更します 次に、 Viewクラスが新しいモデルデータを読み取り 、画面上の船の位置を更新します。

コードを書く

船の代わりに、アプリケーションの基本クラスを作成して、FlasDevelopで何らかの円を描くか、宇宙船の画像をインポートしてみましょう-Flexを好む人のために。 モデル、コントローラー、表示クラスも作成します。 メインクラスコンストラクター自体：



クラスMain

 //......imports...... public class Main extends Sprite { private var m_model:Model; private var m_view:View; private var m_controller:Controller; public function Main() { m_model = new Model(); m_controller = new Controller(m_model); m_view = new View(m_model, m_controller); addChild(m_view); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

//......imports...... public class Main extends Sprite { private var m_model:Model; private var m_view:View; private var m_controller:Controller; public function Main() { m_model = new Model(); m_controller = new Controller(m_model); m_view = new View(m_model, m_controller); addChild(m_view); } }











ここでは、メインクラスで、すべてのテンプレートクラスを「定義」します。 表示クラスへの注意-モデルとコントローラークラスオブジェクトは、同時に2つと相互作用するため、すぐに転送されます。 私のおもちゃでは、クラスコントローラーは「モデル」自体のみを変更できます。



クラスビュー

 //......imports...... public class View extends Sprite { [Embed(source="my_small_spaceship_image.jpg")] public var m_image:Class; public var m_spaceShip:Bitmap = new m_image(); private var m_model:Object; private var m_controller:Object; public function View(model:Object, controller:Object):void { m_model = model; m_model.addEventListener(Event.CHANGE, changed); m_controller = controller; m_spaceShip.x = 200; m_spaceShip.y = 200; addChild(m_spaceShip); addEventListener(Event.ADDED_TO_STAGE, addedToStage); } public function addedToStageHandler(event:Event):void { stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); } public function keyPressed(event:KeyboardEvent):void { m_controller.key_Pressed(event); } public function changed(event:Event):void { m_spaceShip.x = m_model.direction[0] m_spaceShip.y = m_model.direction[1]; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

//......imports...... public class View extends Sprite { [Embed(source="my_small_spaceship_image.jpg")] public var m_image:Class; public var m_spaceShip:Bitmap = new m_image(); private var m_model:Object; private var m_controller:Object; public function View(model:Object, controller:Object):void { m_model = model; m_model.addEventListener(Event.CHANGE, changed); m_controller = controller; m_spaceShip.x = 200; m_spaceShip.y = 200; addChild(m_spaceShip); addEventListener(Event.ADDED_TO_STAGE, addedToStage); } public function addedToStageHandler(event:Event):void { stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); } public function keyPressed(event:KeyboardEvent):void { m_controller.key_Pressed(event); } public function changed(event:Event):void { m_spaceShip.x = m_model.direction[0] m_spaceShip.y = m_model.direction[1]; } }













ここには2つの重要なポイントがあります。

最初の-m_modelは変更をリッスンし、次にgetメソッドを介してModelクラスは船の新しい座標を返すことができます。

実際には、 m_spaceShip.x = m_model.direction[0]



という行で、 getメソッドを呼び出します。

2番目のポイント-keypressイベントがリッスンされ、 Controllerクラスのメソッドが呼び出されます。

次に、 setメソッドを使用して、新しい座標がモデルに書き込まれます（記録はControllerクラスからです）。



クラスコントローラー

 public class Controller public class Controller { private var m_model:Object; public function Controller(model:Object):void { m_model = model; } public function key_Pressed(event:KeyboardEvent):void { switch (event.keyCode) { case Keyboard.LEFT: m_model.direction = new Array(m_model.direction[0] - 5, m_model.direction[1]); break; case Keyboard.RIGHT: m_model.direction = new Array(m_model.direction[0] + 5, m_model.direction[1]); break; case Keyboard.UP: m_model.direction = new Array(m_model.direction[0], m_model.direction[1] - 5); break; case Keyboard.DOWN: m_model.direction = new Array(m_model.direction[0], m_model.direction[1] + 5); break; } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

public class Controller public class Controller { private var m_model:Object; public function Controller(model:Object):void { m_model = model; } public function key_Pressed(event:KeyboardEvent):void { switch (event.keyCode) { case Keyboard.LEFT: m_model.direction = new Array(m_model.direction[0] - 5, m_model.direction[1]); break; case Keyboard.RIGHT: m_model.direction = new Array(m_model.direction[0] + 5, m_model.direction[1]); break; case Keyboard.UP: m_model.direction = new Array(m_model.direction[0], m_model.direction[1] - 5); break; case Keyboard.DOWN: m_model.direction = new Array(m_model.direction[0], m_model.direction[1] + 5); break; } } }











ここでは、 Modelクラスのオブジェクトを渡し、 Modelクラスのsetメソッドを介してその位置を変更します。

次に、変数m_directionは、 m_model.direction = new Array（m_model.direction [0]-5、m_model.direction [1]）操作を呼び出した後に値を変更します。

そして最後に、 Modelクラスの例：



クラスモデル

 public class Model extends EventDispatcher { private var m_direction:Array = new Array(); public function Model() { m_direction.push(200, 200); } public function get direction():Array { return m_direction; } public function set direction(m_values:Array):void { m_direction[0] = m_values[0]; m_direction[1] = m_values[1]; dispatchEvent(new Event(Event.CHANGE)); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

public class Model extends EventDispatcher { private var m_direction:Array = new Array(); public function Model() { m_direction.push(200, 200); } public function get direction():Array { return m_direction; } public function set direction(m_values:Array):void { m_direction[0] = m_values[0]; m_direction[1] = m_values[1]; dispatchEvent(new Event(Event.CHANGE)); } }













ここでは、 setメソッドがモデルの位置データを更新し、 Viewで定義されたリスナーが呼び出されます 。それに応じて、ボートの座標が変更されます。



その結果、ActionScript3でMVCテンプレートを使用する最も単純な例を検討しました。 ご質問がありましたら、お気軽にお答えします。