flash游戏开发-地图相关-Tile layout非常好的入门教程。
2009-07-25 14:37
661 查看
This article will show how to make a tile based layout in AS3, trying to keep OOP architecture.
The project can be compiled from pure code compiler (such as FlexBuilder, flashDevelop) or from a blank file in the flash IDE, pointing the main class from the stage.
The application will get a XML file containing map of number and will translate it to visual map on screen. This has no interaction – just the tile placement and manager.
The program will have X classes. Each class is responsible of doing specific things.
main class – manage everything and create instances of all other classes
XmlLoader – load an XML file and hold it's data
Parser – parse the XML to rows array and cells in rows (each row is an Array)
Screen – receive the array that the parser made, and build a matrix of tiles.
Tile – a single tile; holds type, X position and Y position.
We will get to the Main class at the end.
First class – XmlLoader
This class receives path to the screen XML file, and tries to load it. When the XML is loaded, the class dispatches (shoot) an event so the class that created the instance of XmlLoader will know the loading process is done and that we can move on (this is a non synchronic operation that's why we need event mechanism).
Please notice that there is one event listening – to the loading operation, and a second event dispatching – so the main class will catch. The first is internal, and the second is to connect with other classes. After loading the XML data, the instance of XmlLoader will hold the data and enable other classes get it through a special getter function it has. Another thing to notice is the try & catch thing there – that handles special error events, and prevents an error message from being send to the user on runtime.
Second class – the parser
The parser's job is very simple – get a XML object and divide it to rows, and each row to single number. Again, after doing it's part, an instance of this class will hold an Array of rows so other classes will be able to read it. This too is done with a getter function. The _rows array is actually 2 dimension array. Every cell in it represent a single row, and every row has multiple digits in it, according to the XML line.
The constructor of the class receives a XML type. Hers how this class looks like:
In order for this thing to work, the XML file should have this structure:
Any other structure will require a change in the parser.
Both Parser and XmlLoader are in a package (folder) called 'tools'.
Third class – a visual one – Screen
The Screen class instance is actually one screen. It receives an array of rows (the kind that the Parser parses to) and build a matrix of tiles from that array. It does it with 2 for loops. The first loop is to run over the lines, and the inner loop is to run within the line over all of the numbers in it. Each time the program is in the inner loop it creates a single tile, and pushes it to an array (so in the future we can get access to all tiles).
This class and the Tile class are in a package called 'visual'.
Fourth class – Tile
The last visual class is the Tile class. It represent a single tile, and holds 3 properties of it:
Type (the code in the XML that represent this tile)
locationX – represent it's horizontal position in the matrix – numeral location – not pixels in the screen
locationY - represent it's vertical position in the matrix
All 3 properties have getter function, so outer objects can "ask" each tile for it's properties. I decided to represent the difference between the tiles type with a color change, though this can be easily changed.
This is how my Tile class look like :
The Main class
Finally – the main class. This is what makes the whole thing work:
Notice that after the creation on the XmlLoader – the program waits for the XmlLoader to say "Ok – done" , and only then (onXmlReady function), it continue doing it's things.
Here's the Flex project packed in one zip file: TileGame.zip
来自:http://www.gotoandplay.it/_articles/2007/10/tileLayout.php
The project can be compiled from pure code compiler (such as FlexBuilder, flashDevelop) or from a blank file in the flash IDE, pointing the main class from the stage.
The application will get a XML file containing map of number and will translate it to visual map on screen. This has no interaction – just the tile placement and manager.
The program will have X classes. Each class is responsible of doing specific things.
main class – manage everything and create instances of all other classes
XmlLoader – load an XML file and hold it's data
Parser – parse the XML to rows array and cells in rows (each row is an Array)
Screen – receive the array that the parser made, and build a matrix of tiles.
Tile – a single tile; holds type, X position and Y position.
We will get to the Main class at the end.
First class – XmlLoader
package tools { import flash.events.EventDispatcher; import flash.net.URLRequest; import flash.net.URLLoader; import flash.events.Event; public class XmlLoader extends EventDispatcher{ private var _loader:URLLoader; private var _xml:XML; public function XmlLoader(path:String){ _loader = new URLLoader(); try{ _loader.load(new URLRequest(path)); }catch(e:Error){ trace("error in loading the XML file") } _loader.addEventListener(Event.COMPLETE,onLoadXml); } private function onLoadXml(event:Event):void{ //trace("xml loaded") _xml = XML(URLLoader(event.target).data) dispatchEvent(new Event(Event.COMPLETE)); } public function get xml():XML{ return _xml; } } }
This class receives path to the screen XML file, and tries to load it. When the XML is loaded, the class dispatches (shoot) an event so the class that created the instance of XmlLoader will know the loading process is done and that we can move on (this is a non synchronic operation that's why we need event mechanism).
Please notice that there is one event listening – to the loading operation, and a second event dispatching – so the main class will catch. The first is internal, and the second is to connect with other classes. After loading the XML data, the instance of XmlLoader will hold the data and enable other classes get it through a special getter function it has. Another thing to notice is the try & catch thing there – that handles special error events, and prevents an error message from being send to the user on runtime.
Second class – the parser
The parser's job is very simple – get a XML object and divide it to rows, and each row to single number. Again, after doing it's part, an instance of this class will hold an Array of rows so other classes will be able to read it. This too is done with a getter function. The _rows array is actually 2 dimension array. Every cell in it represent a single row, and every row has multiple digits in it, according to the XML line.
The constructor of the class receives a XML type. Hers how this class looks like:
package tools { public class Parser{ private var _xml:XML; private var _rows:Array; public function Parser(xml:XML){ _xml = xml; _rows = new Array(); getRows(); } private function getRows():void{ // get all rows var rows:XMLList = _xml.screen.children(); var singleRow:Array; var rowString:String = rows[i]; for(var i:uint=0;i<rows.length();i++){ rowString= rows[i]; // split numbers in string to cells in singleRow array singleRow = rowString.split(""); //save singleRow in _rows array; _rows.push(singleRow); } } //return an arra of all rows (every row is an array of numbers public function get rows():Array{ return _rows; } } }
In order for this thing to work, the XML file should have this structure:
<?xml version='1.0' encoding='UTF8'?> <data> <screen id="" title=""> <row>111111111111111111111111111111</row> <row>100000000000000000000000000001</row> <row>101000000000000000003300000001</row> <row>101000000000000000000000000001</row> <row>101111110000001111000000000001</row> <row>100000000000004400000000000001</row> <row>100000000000000000000111510001</row> <row>100000000000000000000000000001</row> <row>111111111111111111111111111111</row> </screen> </data>
Any other structure will require a change in the parser.
Both Parser and XmlLoader are in a package (folder) called 'tools'.
Third class – a visual one – Screen
The Screen class instance is actually one screen. It receives an array of rows (the kind that the Parser parses to) and build a matrix of tiles from that array. It does it with 2 for loops. The first loop is to run over the lines, and the inner loop is to run within the line over all of the numbers in it. Each time the program is in the inner loop it creates a single tile, and pushes it to an array (so in the future we can get access to all tiles).
This class and the Tile class are in a package called 'visual'.
package visual { import visual.Tile; import flash.display.Sprite; public class Screen extends Sprite{ private var _screenArray:Array; private var _tiles:Array; public function Screen(screenArray:Array){ _screenArray = screenArray; _tiles = new Array(); var tile:Tile; var row:Array; // create matrix for(var i:uint=0;i<_screenArray.length;i++){ row = _screenArray[i] as Array; for(var j:uint=0;j<row.length;j++){ // create a new tile and push it to _tiles tile = new Tile(Number(row[j]),j,i) addChild(tile) _tiles.push(tile); } } } //let other classes get the tiles array. public function get allTiles():Array{ return _tiles; } } }
Fourth class – Tile
The last visual class is the Tile class. It represent a single tile, and holds 3 properties of it:
Type (the code in the XML that represent this tile)
locationX – represent it's horizontal position in the matrix – numeral location – not pixels in the screen
locationY - represent it's vertical position in the matrix
All 3 properties have getter function, so outer objects can "ask" each tile for it's properties. I decided to represent the difference between the tiles type with a color change, though this can be easily changed.
This is how my Tile class look like :
package visual{ import flash.display.Sprite; public class Tile extends Sprite{ private var _type:uint; private var _locationX:uint; private var _locationY:uint; // colors of tiles static private var TILE_TYPES:Array = [0xDDDDDD, 0xFF00AA, 0xCC00CC, 0xCCCC00, 0x3300FF]; private const TILE_SIZE:uint = 10; public function Tile(type:uint,locationX:uint,locationY:uint){ // get parameters _type = type; _locationX = locationX; _locationY = locationY; //draw a square graphics.lineStyle(1,0x000000,0.2); // different color by type parameter graphics.beginFill( TILE_TYPES[_type],1); graphics.drawRect(0,0,TILE_SIZE,TILE_SIZE); graphics.endFill(); x=TILE_SIZE*_locationX; y=TILE_SIZE*_locationY; } public function get type():uint{ return _type; } public function get locationX():uint{ return _locationX; } public function get locationY():uint{ return _locationY; } } }
The Main class
Finally – the main class. This is what makes the whole thing work:
package { import flash.display.Sprite; import tools.XmlLoader; import flash.events.Event; import tools.Parser; import visual.Screen public class TileGame extends Sprite{ private var _xmlLoader:XmlLoader; private var _xmlData:XML; private var _screenParser:Parser; private var _screenArray:Array; private var _screen:Screen; public function TileGame(){ var url:String = "http://www.avgil.com/as3/tilegame/screen1.xml"; try{ _xmlLoader = new XmlLoader(url); } catch(e:Error){ trace("couldn't load XML file") } // wait till the XmlLoader will finish loading the data _xmlLoader.addEventListener(Event.COMPLETE,onXmlReady); } private function onXmlReady(event:Event):void{ //recieve the XML data from the event _xmlData = XmlLoader(event.target).xml as XML; //parse and build a screen from parsed data _screenParser = new Parser(_xmlData); _screenArray = _screenParser.rows; _screen = new Screen(_screenArray); _screen.x = 50; _screen.y = 50; addChild(_screen); } } }
Notice that after the creation on the XmlLoader – the program waits for the XmlLoader to say "Ok – done" , and only then (onXmlReady function), it continue doing it's things.
Here's the Flex project packed in one zip file: TileGame.zip
来自:http://www.gotoandplay.it/_articles/2007/10/tileLayout.php
相关文章推荐
- Python视频教程(入门语法、游戏开发、网络编程)
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(十二)神奇的副本地图
- 9秒学院-html5游戏开发入门教程
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(三十四)地图编辑器诞生啦!
- ANDROID 开发:谷歌地图开发入门(3)--- google map api v3 入门教程辅助
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(三十四)地图编辑器诞生啦!
- 2015年最新Android基础入门教程目录第一章:环境搭建与开发相关(已完结 10/10)
- Senparc.Weixin.MP SDK 微信公众平台开发教程(十三):地图相关接口说明
- cocos2d-x游戏开发系列教程-坦克大战游戏之坦克和地图碰撞的检测上
- C#ForUnity游戏开发系列教程--入门篇
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(三十七)地图自适应区域加载
- ANDROID 开发:谷歌地图开发入门(2)--- ZTE V899D ROOT 教程,获得ROOT权限。
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(三十六)地图自定义切片与导出
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(四十二)制作精美的Mini地图②
- Unity3D(3D游戏开发入门教程-38)Unity3D人物动画介绍,关键帧角色动画导入并切割
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(三十八)地图间的传送与切换
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(十)斜度α地图的构造及算法
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(三十四)地图编辑器诞生啦!
- [入门教程]使用Cocos2d-html5游戏引擎编写一个简单的游戏 第一回合: 搭建开发环境
- enyo官方开发入门教程翻译一Layout之Drawers