rich Posted October 16, 2013 Share Posted October 16, 2013 Hi all, So I'm nearly finished on this, and it's almost the final component of the Phaser 1.1 release (previously 1.0.7) which is pretty exciting! But I wanted to give you a run-down of how tilemaps have changed in 1.1. They are now broken down into the following objects: Tilemap This holds the loaded and parsed tilemap data split into layers. Alternatively you can now create blank tilemaps of whatever size you wish and populate them with data yourself. Essentially this object is just the raw representation of the map data and contains all the functions needed to manipulate it (like swapTile, fillTile, replaceTiles, etc). Tileset A Tileset is kind of like a sprite sheet. It contains a reference to a single image that holds the tiles and dimension information. Tilesets consist of "Tile" objects which you can set collision on and now set collision callbacks on too. TilemapLayer A TilemapLayer contains a reference to a tileset and a tilemap. A Layer creates a dynamic texture which is used to render the layer in to and a sprite which is added to the display list. It doesn't hold the map data directly, or the tileset, but just references to them and you can change those at any time. So if you've got a 50 level game you only ever need to create 1 layer and just keep updating the data (and if needed tileset) it's rendering from. Of course Layers can have their own unique tilesets now. The above is a playable demo, check it out here: http://gametest.mobi/phaser/examples/tilemaps/Sci-Fly.php Use cursor keys to fly and also click anywhere in the map There are some great new changes that this configuration allows: Because layers are now just pimped-out Sprites you can insert them anywhere into the display list. This means it's now painfully easy to have a tilemap layer on the top of your game, all of your sprites, another layer and then a background. Or whatever combination you need.You can now also scale the layers and the collision system recognises this and uses the new scaled size for all collision.You can now position layers anywhere in the game world. By default they are placed at 0,0 and fixed to the camera, but actually you can put them anywhere.Multiple sprites can now share the same layer. This means you can render the same tilemap to as many sprites as you want, and it won't cost anything extra to do so - which means you can have some crazy cool effects going on. Or have a scaled down sprite containing your layer as a mini-map in your game, without having to render it all again.Layers are now much more intelligent - they use a dirty cache system, so they will never update unless something has changed (camera, map data, etc).In the previous version a map would update constantly, so this change alone saves a lot time.Tile objects now have their own collision callbacks and what's more, you will soon be able to associate any meta data you want with them (i.e. the data exported from TIled maps)Tilemap objects are just data buckets now, which means they're much smaller and it's perfectly safe to create loads of them with all your level data in. By decoupling them from the TilemapLayers both sides benefited as a result.Collision is now pixel perfect with no 'wall sticking' or penetration issues The tile collision code has been totally rewritten from scratch, using a new optimised Body hull method, and it's faster, has less checks and is far more optimised than before. It also puts us in a good place to support sloped tiles in the very near future.So I'm really pleased with this. There's still more tidying up to do and the tilemap API docs to finish, but this was the last major thing to get done before 1.1 could be released. clark, Trace Bullet, RestingCoder and 5 others 8 Link to comment Share on other sites More sharing options...
RestingCoder Posted October 16, 2013 Share Posted October 16, 2013 Just to be sure, will this eventually include the ability to use data from an object layer, and the properties assigned to a given object? I was going to start implementing that myself as soon as 1.1 was out of the dev branch. Link to comment Share on other sites More sharing options...
rich Posted October 16, 2013 Author Share Posted October 16, 2013 Yes totally. I've put hooks in place already for Tile meta data, but that is tileset specific, but it's now also really easy to expand to extract data from Object layers too. I've got a function here that scans a map and converts all instances of a specific tile index to sprites (then removes the tile from the map, leaving the sprite in place), which is pretty handy - and I think an Object layer class could do similar things. Link to comment Share on other sites More sharing options...
RestingCoder Posted October 16, 2013 Share Posted October 16, 2013 Very nice. Thanks for all you are doing with Phaset, Rich. Link to comment Share on other sites More sharing options...
spider Posted October 16, 2013 Share Posted October 16, 2013 This is fantastic. When is 1.1 planned for release? I'm holding off development until 1.1. Link to comment Share on other sites More sharing options...
spider Posted October 16, 2013 Share Posted October 16, 2013 The above is a playable demo, check it out here: http://gametest.mobi...aps/Sci-Fly.php b.t.w: Was not working for me in Chrome 29. Works in 30 (Max OS X). Unfortunately, don't have the error (nor 29) anymore. Something about FRAME. Blank black screen. Link to comment Share on other sites More sharing options...
RestingCoder Posted October 16, 2013 Share Posted October 16, 2013 This is fantastic. When is 1.1 planned for release? I'm holding off development until 1.1.Same here. Very exciting stuff is coming and I don't want to end up having to redo stuff. Link to comment Share on other sites More sharing options...
rich Posted October 16, 2013 Author Share Posted October 16, 2013 I'm really hoping to release it this week, but there aren't many days left and I want to be sure it's in a good state, so it may flow over into early next week. Tilemaps was the last big thing to finish though, so right now I'm really just tidying-up and general house keeping. Still, it's a big house, and it feels like there has been a student party in some of the rooms right now Link to comment Share on other sites More sharing options...
RestingCoder Posted October 16, 2013 Share Posted October 16, 2013 Take your time, and put out something you are satisfied with I've been working on art while waiting. Link to comment Share on other sites More sharing options...
tychon Posted October 16, 2013 Share Posted October 16, 2013 Chiming in with getting an error here, too. Chromium 28.0.1500.71: Uncaught TypeError: Cannot read property 'FRAGMENT_SHADER' of null WebGL Shaders.js:165 PIXI.CompileFragmentShaderWebGLShaders.js:165 PIXI.compileProgramWebGLShaders.js:187 PIXI.initPrimitiveShaderWebGLShaders.js:103 PIXI.WebGLRendererWebGLRenderer.js:60 Phaser.Game.setUpRendererGame.js:359 Phaser.Game.bootGame.js:284 _onBoot Link to comment Share on other sites More sharing options...
yetanother Posted October 16, 2013 Share Posted October 16, 2013 I was wondering what are the support for isometric tilemap, do the collision (mouse click for example) will still be working (because tile are not square)? Link to comment Share on other sites More sharing options...
rich Posted October 16, 2013 Author Share Posted October 16, 2013 There's no support for isometric maps yet. tychon - nice, that's a full-on WebGL error way below the Phaser stack. Do other WebGL demos work for you? (like the three.js ones for example) Link to comment Share on other sites More sharing options...
tychon Posted October 16, 2013 Share Posted October 16, 2013 Sci-Fly seems to be working now, though a lot of the examples are reporting "Performance warning: Some textures are unrenderable" a couple hundred times then aborting. Others seem dodgy, but I'm not sure if that's just my memory of the older versions different from how the current tests work. The Invaders game demo doesn't update physical position with graphical position for example. Was that always the case, or is my own memory just needing a bug report? Edit: Er, it clipped the first half of my post. Hrm. Turns out I'd forgotten to install the NVIDIA driver blobs; Nouveau doesn't provide acceleration for much in Chromium, so you put me on the right track with that. Link to comment Share on other sites More sharing options...
mariogarranz Posted October 18, 2013 Share Posted October 18, 2013 Tile objects now have their own collision callbacks and what's more, you will soon be able to associate any meta data you want with them (i.e. the data exported from TIled maps) Amazing! Already said it too many times, but even too many is not enough: You are making an awesome job with Phaser, Rich.Thanks Link to comment Share on other sites More sharing options...
hackenstein Posted October 18, 2013 Share Posted October 18, 2013 I tried to update to the current beta build, but I can't get the tilemaps to show, unless I load the tileset in the Game.preload instead of the Preloader.preload. Link to comment Share on other sites More sharing options...
gleborgne Posted January 9, 2014 Share Posted January 9, 2014 Hy, You mentionned a method scanning a map to fill sprites. Could you please share it ? using tilemap to position some game items is very interesting Link to comment Share on other sites More sharing options...
rich Posted January 12, 2014 Author Share Posted January 12, 2014 You can see this working in the dev branch and look at examples/wip/tilemap.js and you'll see how a group of sprites are generated from an object layer. Link to comment Share on other sites More sharing options...
Tweeper Posted October 22, 2014 Share Posted October 22, 2014 Hi, At the moment I'm looking for a way to import and use isometric tilemaps from Tiled into Phaser 2.1.2. Unfortunately Phaser doesn't seem to support isometric maps yet. I found this Phaser plugin for isometric maps in Phaser (http://rotates.org/phaser/iso/) , but it doesn't seem to support Tiled import. Are there any plans on supporting isometric maps with json import in the near future? Or is there an alternative out there for using isometric maps from Tiled in Phaser? Any help would be very appreciated! Link to comment Share on other sites More sharing options...
lewster32 Posted October 22, 2014 Share Posted October 22, 2014 No-one that I'm aware of has begun looking at this yet, however I don't think it'd be an awful lot of work to parse Tiled format isometric maps and create normal IsoSprites for each tile. Making it run fast and efficiently however will be a different issue, and a lot of clever stuff will have to be done with combining collision bounds, visibility culling and so on to make it run really well. Link to comment Share on other sites More sharing options...
xerver Posted October 22, 2014 Share Posted October 22, 2014 I have a plugin for phaser that supports the Tiled Editor feature set, and I plan to add isometric tile support to it in the future. https://github.com/englercj/phaser-tiled lewster32 1 Link to comment Share on other sites More sharing options...
lewster32 Posted October 22, 2014 Share Posted October 22, 2014 Oooo! Link to comment Share on other sites More sharing options...
Tweeper Posted October 22, 2014 Share Posted October 22, 2014 Thanks Guys! I have a plugin for phaser that supports the Tiled Editor feature set, and I plan to add isometric tile support to it in the future. https://github.com/englercj/phaser-tiled Very nice!! Great work. Nice to see you improved performance and I can't wait for the isometric support! That would be great!I had an orthographic map working in Phaser with import of multilayered tilemap from JSON, exported by Tiled. Also with collision layer and a hero runing in between front- and backlayers. Just replaced some code to get it working with your plugin and after some adjustments it's showing fine with all layers and it is scrolling.There are two things I can't figure out so far:- with your plugin all layers are shown directly, is there a way to let a hero walk in between layers? (with normal Phaser I drew a layer, than a hero, then the top layer, like so: // BACK LAYER backLayer = map.createLayer('back'); // COLLISION LAYER collisionLayer = map.createLayer('collision'); map.setCollisionBetween(1, 100000, true, 'collision'); // MIDDLE LAYER middleLayer = map.createLayer('middle'); // PLAYER player = game.add.sprite(32, 48, 'hero'); // FRONT LAYER frontLayer = map.createLayer('front');- for the hero to walk between bounds on a road I created a collision layer in Tiled called 'collision' and set it in phaser to create bounds with:map.setCollisionBetween(1, 100000, true, 'collision'); Do I get it right the setCollisionBetween method isn't supported yet? Anyway, very nice plugin! I'll use it for sure. And again: really looking forward to your isometric support!! Link to comment Share on other sites More sharing options...
xerver Posted October 22, 2014 Share Posted October 22, 2014 I generally have an object layer that I put my player into so I can design where in the layer stack my player is on a map in Tiled. Just make a layer named "Player" and add the player to that item.tilemap.objects[tilemap.getObjectIndex('player')].container.add(player);Physics is not supported yet in the new plugin, you can see it is on the roadmap: https://github.com/englercj/phaser-tiled/issues/1 Link to comment Share on other sites More sharing options...
Tweeper Posted October 23, 2014 Share Posted October 23, 2014 I generally have an object layer that I put my player into so I can design where in the layer stack my player is on a map in Tiled. Just make a layer named "Player" and add the player to that item. That indeed is a better structured way. Just placed my player in between the layers by creating an object layer in Tiled like your example. Works well Physics is not supported yet in the new plugin, you can see it is on the roadmap: https://github.com/englercj/phaser-tiled/issues/1 Alright. See you also added isometric support on your todo list. Thanks! I'll keep it in view Link to comment Share on other sites More sharing options...
Recommended Posts