Using MVC template in ActionScript3

Foreword

When I first started writing actionscript3 half a year ago, I didn’t think at all about code optimization. I just wanted the code shown on many blogs and websites for "beginners" to work correctly after I changed the basic properties of objects or added new simple methods. After studying the basic functionality of the language, it was the turn to get acquainted with additional libraries, especially physics engines and twinners for software animation, since it all started with the desire to write your own flash game.

Thoughts on optimization

Now, having quite voluminous stocks of software code, two prototypes of toys and some small, but still experience, I got the idea to use the MVC template for writing code.
After searching for information about MVC, I learned a few things about the template:
1. Using a wildly time saving template
2. The final code is structured.
3. Ability to change any script module without the need to completely rewrite the code

Using MVC with ActionScript3

And now let's move on to programming with the example of a simple game about a spacecraft.
')

Model

This class will contain data on the speed of the ship, its position in space - all the necessary information that is necessary for the movements of the ship. The class will use get and set methods to change data during the game.

View

The class contains all visible parts of our toy, as well as event listeners for player actions.

Controller

The most interesting class is the entire application logic. Suppose a class listens for a keystroke event from the View class; changes data in the Model class; then the View class counts the new model data and updates the ship's position on the screen.

Write the code

Let's create the base class of the application, instead of the ship, draw some circle in FlasDevelop or simply import the image of the spacecraft - for those who prefer Flex. We will also create model, controller, and mapping classes. The Main class constructor itself:

class 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); } }

Here, in the main class, we “define” all the template classes. Attention to the mapping class - the model and the controller class objects are transferred to it immediately, as it interacts with them two at the same time. In my toy, the controller class can only change the “model” itself.

class View

 //......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]; } }


There are two important points here:
The first is that m_model is tapped for changes, and then the Model class will be able to return the new coordinates of the ship through the get method.
The actual string m_spaceShip.x = m_model.direction[0] and calls the get method.
The second point is that the keystroke event is heard, and the Controller class method is called.
Then new coordinates are written to the model using the set method (recording comes from the Controller class).

class 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; } } }

Here we passed an object of the Model class and change its position through the set method of the Model class.
Toist variable m_direction will change its values ​​after calling m_model.direction = new Array (m_model.direction [0] - 5, m_model.direction [1]) operations.
And finally, an example of the Model class:

class 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)); } }


Here, the set method updates the model's position data, the listener that is defined in View is called - the coordinates of our ship change accordingly.

As a result, I reviewed the simplest example of using MVC template in ActionScript3. If you have any questions, I will be glad to answer.