| Game Editor: How to make a compatible game |
Making a compatible game
| To make a game that works with the game editor, it needs to be able to display levels and sprites. These are the things it needs to do: systems load a level load a map map collision place sprites And some things you'll probably want: editor hook read ROM read RAM I also prepared a full video tutorial, that covers most of these.
Systems
| The level editor uses a general-purpose map system to display maps, and a general-purpose sprite system to display sprites. These "systems" are reusable code stored in .AS files. To use one, create a folder in the same location as your game. (I usually name it "functions") Copy the .AS file into that folder. Use #include to insert the code into your game, and then call the system's setup function. The setup function is usually named after the AS file, but open the AS file and check to make sure. Video (at 0:27) These are the systems you'll need:
| readXml.as nextDepth.as map.as addCollisionMethods.as sprite.as makeStreamingMusic.as makeStreamingSoundSystem.as
USAGE EXAMPLE // create a map #include "functions/map.as" _global.MAP = makeMap( "map_mc", this, 2 ); MAP.load( "myFile.map" ); REQUIRED SYSTEMS
readXml.as
| This system converts xml files created by the game editor, into regular flash data.
nextDepth.as
| This contains a function that replaces flash's getNextHighestDepth() function, which is incompatible with menus and components like the ones that the game editor uses. Also, many of the other systems require this file to be present.
map.as
| This system displays maps and stores the collision_array.
addCollisionMethods.as
| This file is required for the map system. You don't need to #include it. The map system uses it to connect to the advanced collision systems.
sprite.as
| This system displays characters that can change direction and pose. It uses these settings.
makeStreamingMusic.as
| This plays music files that are stored outside the game. If you want to use music stored within the game, use makeStereoMusic.as instead.
makeStreamingSoundSystem.as
| This plays sound effects that are stored outside the game. If you want to use sounds stored within the game, use makeSoundSystem.as instead.
Loading a level
| Each level file is actually an XML file, so you use flash's XML class to load it. After loading it, you use the readXml.as system to convert the XML into regular flash variables and objects. Finally, you send this data to a function or movieClip that reads it and creates the map and sprites. Video (at 2:30)
CODE #include "functions/readXml.as" loadLevel = function( filePath, startPlace ) { var level_xml = new XML(); level_xml.startPlace = startPlace; level_xml.onLoad = function() { var convertedData = {}; readXml( level_xml.firstChild, convertedData ); // convert XML data into flash variables buildLevel( convertedData.level, this.startPlace ); // construct the level }// level_xml.onLoad() level_xml.load( filePath ); }// loadLevel()
Loading a map
| Each level stores map information in this location: data.level.map To display it, simply tell a map system to draw the contents of this object, like so: MAP.drawObj( data.level.map ); Video (at 2:45)
USAGE EXAMPLE // create a map #include "functions/map.as" _global.MAP = makeMap( "map_mc", this, 2 ); MAP.drawObj( data.level.map );
Map collision
| Maps store their collision using a 2-dimensional array of numbers. The array is called collision_array. Therefore: myMap.collision_array[4][3] Would look up the collision value of a tile located 4 blocks over, and 3 down. I usually use 0 to represent open space, and 1 to represent walls. You can use other numbers to represent other things, such as water. Video (at 6:45)
EXAMPLE
Place sprites
| Each level stores sprite information in this location: data.level.sprites "sprites" is an array, where each element is a sprite in the level. To place all the sprites, you simply loop through each one and use the attachMovie() function to place the sprite specified by the "type" variable. Video (at 7:30)
SPRITE VARIABLES name: This is the instance name that this sprite should use. type: This is the linkage name of this sprite's movieClip. position.x: This is the horizontal position of the sprite in the map, in pixels. position.y: This is the vertical position of the sprite in the map, in pixels. data: This object contains arbitrary settings that this sprite uses. These settings are defined by the sprite's editor in the level editor. flags: This is an array of strings. Each one specifies a condition for this sprite to appear. To use this data, you need to use the updateFlaggedSprites.as system. (the example shown here doesn't use it) CODE for(var nam in levelData.sprites){ // for: each sprite var thisSprite = levelData.sprites[nam]; var type = thisSprite.type; var newName = thisSprite.name; var newDepth = nextDepth(SPRITES); var newX = thisSprite.position.x; var newY = thisSprite.position.y; var settings = thisSprite.data; SPRITES.attachMovie(type, newName, newDepth, {_x:newX, _y:newY, data:settings}); }// for: each sprite If you want the appearance of sprites to be controlled by flags, use the system: updateFlaggedSprites.as Also, if you open this file, the comments at the top will have example code you can use. (warning, it's a bit long)
Editor hook
| This is a function on the first frame that runs before anything else. It allows the game to be play-tested from within the editor. The only thing it does is recieve level data and store it in a variable. Video (at 0:27)
CODE setLevel = function( newLevel, newStartingPlace ) { levelData = newLevel; startPlace = newStartingPlace; runningInEditor = true; }
Read ROM
| A game can store game information outside of levels in a file called database.xml. This is useful for defining things such as the starting place at the beginning of the game. To use this file, you load the XML, convert it into flash data, and store it in a global object. I usually name the object ROM, since it won't change during gameplay.
CODE _global.ROM = {}; database_xml = new XML(); database_xml.onLoad = function( success ) { // convert data if(success) readXml( database_xml.firstChild, ROM ); } database_xml.load("database.xml");
Read RAM
| I usually store gameplay variables and flags in a global object named RAM. Gameplay variables are things that keep track of your progress through the game, and would be saved if you saved your game. When you test your game in the editor, you can define some RAM values to use while testing. To allow the editor to define the RAM variables, you need to detect whether or not RAM already exists at the beginning of the game, where you'd normally create it.
CODE if(!_global.RAM) // if RAM does not exist _global.RAM = {}; // define it
Video Tutorial
| Still confused? Click the link below to see how most of these are done! Video tutorial
| Last updated: April 27, 2010 |