{"id":745,"date":"2012-09-17T14:31:43","date_gmt":"2012-09-17T13:31:43","guid":{"rendered":"http:\/\/www.aymericlamboley.fr\/blog\/?p=745"},"modified":"2012-09-17T14:38:44","modified_gmt":"2012-09-17T13:38:44","slug":"tiled-map-editor-supported-in-the-citrus-engine","status":"publish","type":"post","link":"http:\/\/www.aymericlamboley.fr\/blog\/tiled-map-editor-supported-in-the-citrus-engine\/","title":{"rendered":"Tiled Map Editor supported in the Citrus Engine"},"content":{"rendered":"

Some days ago, I received a mail from a guy working on a game with the Citrus Engine<\/a>. It shows me the progress of his game… another blast!
\nLet me introduce CynicMusic’s game<\/a>, one of the greatest platformer game I’ve ever seen made with Starling and the Citrus Engine! He hopes to finish it around Christmas, best wishes for Alex Smith. Play the game, graphics are pixel art, and the music is awesome! I really love the mood. I also want to highlight his work on the gameplay : water, reward box… managed by Box2D Alchemy. Take a look on the FPS, 60fps, yep guys I’m impressed!<\/p>\n

I had some discussions with Alex about his workflow, he used the Tiled Map Editor<\/a> to create his levels then export them as PNG files and finally import in Flash Pro. Using Starling, textures images aren’t bigger than 2048*2048. He has created several CitrusSprite with the different PNGs.<\/p>\n

I knew the Tiled Map Editor before, but never gave it a serious look! Quickly it appears that it would be really nice to support it directly, but how can we handle the tmx format provided by the software for our map? I found an article on PixelPracht’s website<\/a>, he wrote some useful classes to parse the map! He made a quick demo for Flixel<\/a> game engine. It is also possible to create objects inside the software, great news!<\/p>\n

So thanks to his work, all hail to him, I’ve been able to write a parser to handle the Tiled Map Editor’s map in the Citrus Engine! Click here to play the demo<\/a>.
\nGraphics are free to use, they come from this website<\/a>.<\/p>\n

This is a screenshot of the level :
\n\"tiled<\/p>\n

Since the Citrus Engine is not based on grid for collisions detection, I’ve added platform objects. Mixing grid and physics is quick and really a good thing I think. It offers lots of flexibility : you may use both and keep grid interactivity.<\/p>\n

Here is the demo code :
\nMain class<\/p>\n

package tiledmap {\r\n\r\n\timport com.citrusengine.core.CitrusEngine;\r\n\r\n\t[SWF(frameRate=\"60\")]\r\n\r\n\t\/**\r\n\t* @author Aymeric\r\n\t*\/\r\n\tpublic class Main extends CitrusEngine {\r\n\t\t\r\n\t\t[Embed(source=\"\/..\/embed\/tiledmap\/map.tmx\", mimeType=\"application\/octet-stream\")]\r\n\t\tprivate const _Map:Class;\r\n\r\n\t\tpublic function Main() {\r\n\t\t\t\r\n            state = new TiledMapGameState(XML(new _Map()));\r\n\t\t}\r\n\t}\r\n}<\/pre>\n
The TiledMapGameState class :<\/p>\n
package tiledmap {\r\n\r\n\timport com.citrusengine.core.State;\r\n\timport com.citrusengine.math.MathVector;\r\n\timport com.citrusengine.objects.platformer.box2d.Hero;\r\n\timport com.citrusengine.objects.platformer.box2d.Platform;\r\n\timport com.citrusengine.physics.Box2D;\r\n\timport com.citrusengine.utils.ObjectMaker;\r\n\timport com.citrusengine.view.spriteview.SpriteArt;\r\n\r\n\timport flash.geom.Rectangle;\r\n\t\r\n\t\/**\r\n\t * @author Aymeric\r\n\t *\/\r\n\tpublic class TiledMapGameState extends State {\r\n\t\t\r\n\t\t[Embed(source=\"\/..\/embed\/tiledmap\/Genetica-tiles.png\")]\r\n\t\tprivate const _ImgTiles:Class;\r\n\t\t\r\n\t\tprivate var _level:XML;\r\n\r\n\t\tpublic function TiledMapGameState(level:XML) {\r\n\t\t\tsuper();\r\n\t\t\t\r\n\t\t\t_level = level;\r\n\t\t\t\r\n\t\t\tvar objects:Array = [Hero, Platform];\r\n\t\t}\r\n\r\n\t\toverride public function initialize():void {\r\n\t\t\t\r\n\t\t\tsuper.initialize();\r\n\t\t\t\r\n\t\t\tvar box2D:Box2D = new Box2D(\"box2D\");\r\n\t\t\t\/\/box2D.visible = true;\r\n\t\t\tadd(box2D);\r\n\t\t\t\r\n\t\t\tObjectMaker.FromTiledMap(_level, _ImgTiles);\r\n\t\t\t\r\n\t\t\tvar hero:Hero = getObjectByName(\"hero\") as Hero;\r\n\t\t\t\r\n\t\t\tview.setupCamera(hero, new MathVector(stage.stageWidth \/ 2, 240), new Rectangle(0, 0, 1280, 640), new MathVector(.25, .05));\r\n\t\t\t\r\n\t\t\t(view.getArt(getObjectByName(\"foreground\")) as SpriteArt).alpha = 0.3;\r\n\t\t}\r\n\r\n\t}\r\n}<\/pre>\n
Here it works on the classic flash display list. It works also on Starling if level dimensions are not above 2048*2048. I’m thinking to use the tile system made by Nick Pinkham (Citrus Engine contributor member) to handle bigger levels! It has been added to the CE, but it’s not 100% stable at the moment.<\/p>\n
Again, all the Citrus Engine works & demo are available on its GitHub<\/a>. Take a look on the map and the different files. Play with it. Don’t hesitate to test this parser and tell me if some important options are missing.<\/p>\n
I’ve also gave a look to the Level Architect’s code (official CE’s level editor, created by Eric Smith), for the first time, and can assure that it needs to much work to keep it supported with the new CE version. I prefer to support format from serious tools (Flash Pro, Tiled Map Editor, Gleed<\/a>) and continue to work hard on the Citrus Engine.<\/p>\n
At the moment I’m working on something very huge for the Citrus Engine and I hope to be able to come back soon with very good news. Stay tuned!<\/p>\n","protected":false},"excerpt":{"rendered":"
Some days ago, I received a mail from a guy working on a game with the Citrus Engine. It shows me the progress of his game… another blast! Let me introduce CynicMusic’s game, one of the greatest platformer game I’ve ever seen made with Starling and the Citrus Engine! He hopes to finish it around … Continue reading Tiled Map Editor supported in the Citrus Engine<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[4,51,33,11,6],"tags":[119,15,50,34,26],"_links":{"self":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/745"}],"collection":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/comments?post=745"}],"version-history":[{"count":3,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/745\/revisions"}],"predecessor-version":[{"id":747,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/745\/revisions\/747"}],"wp:attachment":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/media?parent=745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/categories?post=745"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/tags?post=745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}