• Content Count

  • Joined

  • Last visited

  1. Can't handle more than one spritesheet? I'm fairly certain that there is no such limit. My project uses at least three spritesheet atlases and five different tilesets. Can you please show us what errors are logged when you try to load more than one spritesheet?
  2. As usual, I will begin with my tilemap: As you can see I added three objects that I want to use in my map as triggers. This is the object layer called Triggers in tiled. I did not change my loading code because I assumed that you don't have to load the object layer: constructor(game: Phaser.Game, key: string, manifest: any) { super(game, key); this.addTilesets(manifest.maze); this.wallLayer = this.createLayer(this.WallsLayer); this.backgroundLayer = this.createLayer(this.BackgroundLayer); this.shadowLayer = this.createLayer(this.ShadowsLayer); this.itemLayer = this.createLayer(this.ItemsLayer); this.objectLayer = this.createLayer(this.ObjectsLayer); this.creatureLayer = this.createLayer(this.CreaturesLayer); this.separateCreaturesFromTilemap(); this.separateItemsFromTilemap(); this.backgroundLayer.resizeWorld(); this.setCollisionBetween(1, 2, true, "Walls"); }And this fails at runtime with the exception: Uncaught TypeError: Cannot read property 'length' of undefined phaser.js:64576 Phaser.TilemapParser.parseTiledJSON phaser.js:64576 Phaser.TilemapParser.parse phaser.js:64260 Phaser.Tilemap phaser.js:61637 Tilemap Tilemap.ts:23 InGame.initializeMap InGame.ts:36InGame.create InGame.ts:26 Phaser.StateManager.loadComplete phaser.js:17993 Phaser.StateManager.preUpdate phaser.js:17753 Phaser.Game.update phaser.js:24518 Phaser.RequestAnimationFrame.updateRAF phaser.js:42978 _onLoopFinally, here is the object layer as it is defined in the .json: { "draworder":"topdown", "height":8, "name":"Triggers", "objects":[ { "height":0, "name":"warp", "properties": { "map":"volcano" }, "rotation":0, "type":"", "visible":true, "width":0, "x":60, "y":12 }, { "height":0, "name":"warp", "properties": { "map":"desert" }, "rotation":0, "type":"", "visible":true, "width":0, "x":276, "y":60 }, { "height":0, "name":"spawn_player", "properties": { }, "rotation":0, "type":"", "visible":true, "width":0, "x":60, "y":36 }], "opacity":1, "type":"objectgroup", "visible":true, "width":12, "x":0, "y":0 }
  3. I know this is from the now more-or-less defunct XNA framework, but luckily code doesn't stagnate. If you have some C# chops, why not try reading the source code for their sample "Input Sequence" which is a demonstration of doing just what you asked. It shouldn't be too hard to port their example to Phaser, I believe.
  4. If you're okay with an alternative programming language that is close to ActionScript, checking out Haxe might be worth your while. They have some good UI libraries to use with HaxePunk, HaxeFlixel or Flambe. Maybe check around there?
  5. Lewster, are you sure? It looks as if most of the game is taking place in a canvas. I don't see why such games cannot be implemented in Phaser and complemented with a website built with Ember, or others. The only obstacle I see is that Phaser doesn't have premium networking support, and that could be relatively difficult to implement. Of course, I'm still new to Phaser as well and *very* green around the ears. I would very much like to hear your reasoning for considering Phaser as a less viable choice compared to other implementation strategies.
  6. Hello, I'm currently writing a little roguelike and I was presented with the same problem. Make the player move, but respect collisions. I ended up not using overlap or collision detection from the tilemap, but do the checks myself. It's easier than it sounds. Let's take a look at my map. A lot of the magic happens in the Tilemap; I extended the Phaser.Tilemap with a bunch of extra functionality. For example, in Tiled I have five layers: Walls (collision layer), Background, Items, Objects, and Creatures The blue knight, the drow and the blue ghost are creatures in the creature layer. They are animated in-game so they can't be a part of the tilemap. You *could* keep swapping tiles out to simulate animation, but eh, that's a lot of work and unflexible. What would happen if you moved a monster? You'd have to pop the tile out, sprite the creature- something you might have wanted to avoid anyway- and then put it back into the tilemap. So I opted to just extract all tiles in the Creature layer and push them into an Array. I do the same with Items, Objects, and Walls. The background can stay a tilemap because it's static and I don't need to do any checking on it (yet). Now that we've popped all of the dynamic tiles off the Tilemap, converted them to Sprites, and placed them in Arrays, we are able to do some logic! Let's say my hero is in Position (0, 0) and wants to move east to (1, 0). First, my game recognizes that my user has pressed the "Move East" button and wants to move a cell. this.actionMap[settings.move_right] = () => this.tryMoveTo(toTileCoordinates(, { x: this.player.x + 24, y: this.player.y }));Now, there might be a wall, a monster, an interactable object, an item on the ground, or nothing there. This is what my logic looks like for when the player tries to move: private tryMoveTo(destination: TileCoordinates) { // Darn, a wall Can't move, so just return/optionally show a message if ( return; // Is there a creature in the way? If so, attack it. if ( { this.attack(this.player,; // Is there an interactable object in the way? If so, activate it. } else if ( { this.activate(this.player,; // There's nothing blocking our way Let's go! } else { // But wait! Is there an item? If so, pick it up as we move. if ( this.pickUp(this.player,; this.move(this.player, destination); } }All that's left to do is move my character. I call my UX Component, the GameView, to tween the player in order to simulate movement. move(entity: Phaser.Sprite, to: WorldCoordinates) { var tween =, 300, Phaser.Easing.Linear.None); this.registerTweenDeletion(tween); this.tweensToPlay.push(tween); }So far so good, but what happens in the Tilemap? Since I'm programming a pure roguelike, there is a very clear structuring of what can go on a tile. It allows me to test step-wise what is in a given tile. The ordering of first checking for walls, then creatures, objects, and items is no mistake. This enables me to have very specific checks for every type of object in the game: wallAt(at: TileCoordinates) { return this.tileExists(at, this.WallsLayer); } itemAt(at: TileCoordinates) { return _.find(this.items, (item: Phaser.Sprite) => _.isEqual(toTileCoordinates(this, item), at)); } objectAt(at: TileCoordinates) { return _.find(this.activatableObjects, (object: Phaser.Sprite) => _.isEqual(toTileCoordinates(this, object), at)); } creatureAt(at: TileCoordinates) { return _.find(this.creatures, (creature: Phaser.Sprite) => _.isEqual(toTileCoordinates(this, creature), at)); }So much for the explanation. Perhaps some FAQ-style questions: 1. Why an Array, not a Group? Groups are awful awful awful in my opinion. I found it difficult to search through a group as there is a lack of iterating functions. Of course there is forEach and iterate, but eeeeh. I found it a pain to use for my use-case. 2. Is this performant? I think so. Array are naturally fast and for most small tilemaps there will only be a few dozen items/objects in them at any given time. I haven't done any real performance tests, so your mileage may vary. I'm also not planning on supporting mobile devices, so eh. 3. Source Code? Because of the tileset, I opted to keep the repository private. That sucks, because I'd like to release my game to the public once I'm reasonably convinced that this system works. I will have convinced myself once the game works and is shipped Until then, I hope to whip a blog post or two describing in detail how I made this system work. To that end, I'd appreciate anybody calling me out if this design is just not feasible.
  7. I have now submitted a request to investigate the issue regarding the incorrect .json file. You can find it here if you're interested:
  8. Because of the proprietary tileset, I was not able to create a sample demonstrating the bug. However, it should be done, you are right. I'll send Riddick a message and ask him for the faulty tileset and I'll open a ticket.
  9. iirc, this is an issue with Tiled, not Phaser. You can see more details in my post regarding the issue ( tl;dr: I noticed that the .json file was consistently off by about 1 tile per row. This increased the further down the tile was in the tileset image.
  10. Thanks for the heads-up! Yeah, I figured that I was trying to abuse the Phaser States. I've since refactored Player, Enemy and Animating into SubStates that my InGame state controls. Works a lot better that way, and I don't have to destroy or recreate the SubStates.
  11. Oh yeah, I had this problem as well. What worked for me is re-cutting the spritesheet. Are there any empty rows/columns in the the spritesheet? Remove all of those.Once I had a uniform spritesheet without gaps, the ids lined up with the proper tiles.
  12. Hello, I'm programming a roguelike and I've divided the main game into three distinct states: PlayerTurn, Animating, EnemyTurn. I do this to separate game logic and not have a humongous God class. Each state calls the other in a loop: PlayerTurn -> Animating -> EnemyTurn -> Animating -> PlayerTurn PlayerTurn: update() { var keyboard =; for (var inputCommand in this.actionMap) { var keyCode = toKeyCode(inputCommand); if (keyboard.isDown(keyCode)) { this.actionMap[inputCommand](); this.switchToAnimatingState(); } } }AnimatingState: init(args: any) { console.log("In AnimatingState."); this.view = args[0]; = args[1]; this.player = args[2]; this.nextState = args[3]; this.view.onTweensFinished.addOnce(() => this.switchToNextState(), this);; }EnemyTurn: update() { // No logic yet., false, false, [this.view,, this.player, State.PlayerState]); }Anyway, all three States have the init(args) function. What I also noticed is that each game.state.start() call destroys, preloads, and creates every state new again. I don't really need, nor do I want, to perform my initialization logic twice. I have my fully constructed view, tilemap, and player class that I'm passing around. In order to avoid creating my class twice and returning to the beginning game state, I have a static (global in js) variable: create() { if (!PlayerState.hasBeenCreated) { = "#000000"; this.initializeView(); this.initializeInputBindings(); this.initializeMap(); this.initializePlayer(); PlayerState.hasBeenCreated = true; } }That's pretty ugly and I wish it'd go away. Is it possible to switch states without destruction/update? My other solution was to have one GameState, and it controls which substate to process at the moment.
  13. Hello, I'm adding some extra functionality to the Phaser.Tilemap class and I've recently converted my loading code to use the new-ish Asset Pack feature. All of my tilemaps are loaded in sections like so: { "maze": [ { "type": "tilemap", "key": "maze", "url": "assets/tilemaps/maps/Maze.json", "data": null, "format": "TILED_JSON" }, { "type": "image", "key": "creatures_tileset", "url": "assets/tilemaps/tiles/Creatures.png" }, { "type": "image", "key": "items_tileset", "url": "assets/tilemaps/tiles/Items.png" }, { "type": "image", "key": "world_tileset", "url": "assets/tilemaps/tiles/World_Tiles.png" }, ...and I thought it'd be great if I could iterate through this manifest and automatically load every tileset into my tilemap, kinda like: for (var obj in manifest.section) if (obj.type === "image") map.addTilesetImage(obj.key);But I actually can't find a function in Phaser.Cache or Phaser.Loader (or somewhere else?) that lets me access the .json. If there is no easy solution, I would just load the asset pack as a .json: this.load.json("manifest", "assets/manifest.json");// ... later ...manifest = game.cache.getJSON("manifest");// Loading code here.Is that the preferred way of doing it?
  14. I guess it's because it's a raster image and blowing up a .jpeg will blur the edges of your tileset. Can you vectorize the tileset, then try increasing the scale?
  15. Hello lastnightsparty, thank you for your input! It steered me in the right direction. First, Tiled does not export the transparent background color. If your tiles have a black background, Tiled will respect that in the editor but not export it. Phaser will then pick up the tiles and render them with a black background. Secondly, and this is largely my mistake, I used the wrong tileset image. Oops Thanks for the help!