Search the Community

Showing results for tags 'sprite'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 559 results

  1. This sounds really stupid considering Phaser.Tilemap has built in getTileBelow and getTileAbove functions. However, I still can't get this to work. I am creating a Pacman clone in Phaser, and have ran into trouble. I have a method moveUp() that looks like this moveUp: function() { if (cursors.up.justPressed() && this.pathUpAvailable()) { pacman.body.velocity.x = 0; pacman.body.velocity.y = -(gameStats.pacmanVelocity); pacman.frame = 6; pacman.animations.stop(); pacman.animations.play('pacmanUp'); } }, In short, I have four different animations defined depending on which direction Pacman is going in. As such, it doesn't make since to play the animation for moving right when he's moving up and there is a wall to the right. As such, I decided I needed to create four separate functions to determine whether there is a wall in each direction. Here is what the pathUpAvailable() method looks like. pathUpAvailable: function() { return map.getTileAbove(0, (pacman.x / map.tileWidth) | 0, (pacman.y / map.tileWidth) | 0).index == -1; }, If you look at the documentation here http://phaser.io/docs/2.4.4/Phaser.Tilemap.html#getTileAbove It says that this method takes in the following three parameters. layer: The index of the current layer. In my case, I only have one, which defaults to 0. x: The x coordinate to get the tile from. It's important to note that this is measured in tiles not pixels. The x position for a sprite is measured by pixels. As such, we need to divide this value by the tile width as defined in a Tiled JSON file. This value will be a number with decimal points, so it needs to be rounded. Since arrays are zero-indexed in JavaScript we must take the floor of this value, which shorthands to | 0. y: See above. Measured in tiles not pixels This returns a Tile object, of which it seems like the index property determines whether there is a tile there or not. If there isn't, -1 will be returned. This has led to some unpredictable results. Sometimes, it will work, but for example, when the x coordinate of the character is above 400, I will receive the following in my console. Cannot read property 'index' of undefined at Object.pathUpAvailable at Object.moveUp at Object.movePacMan at Object.update I have attached a screenshot demonstrating where the issue occurs Here are a couple of things to keep in mind. It might look like I made a mistake using map.tileWidth twice for the x and y axis and it probably was a mistake. That said, both my tileWidth and tileHeight are set to 6 pixels, so that wasn't the problem here I would like to eventually display the score at the top, so I decided to center the map. I called map.fixedToCamera = false; and then set the position property of the map to center it. Given that I received the above message at a high x coordinate position, this would seem to indicate the problem was with that. I think showing my map1.json file could also be helpful here. { "height":76, "layers":[ { "data":[621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 621, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 0, 621, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 0, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 0, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 0, 621, 0, 0, 0, 0, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621, 621], "height":76, "name":"WallLayer", "opacity":1, "type":"tilelayer", "visible":true, "width":64, "x":0, "y":0 }], "nextobjectid":1, "orientation":"orthogonal", "renderorder":"right-down", "tileheight":6, "tilesets":[ { "columns":61, "firstgid":1, "image":"..\/images\/pacman_tiles.png", "imageheight":384, "imagewidth":368, "margin":0, "name":"pacman_tiles", "spacing":0, "tilecount":3904, "tileheight":6, "tilewidth":6 }], "tilewidth":6, "version":1, "width":64 } Specifically, check the number of tiles which equals 3904. Here was my buildMap function. buildMap: function() { map = this.game.add.tilemap('map1'); map.addTilesetImage('pacman_tiles', 'pacmanTiles'); wallLayer = map.createLayer('WallLayer'); map.setCollisionBetween(1, 5000, true, 'WallLayer'); }, I set the collision to 5000, which is more than the number of tiles.
  2. Solved thank
  3. I'm working on a small card game and I'd like to make an array of sprites to make the code more readable. What I mean is I have hearts,spades,clubs and diamonds and I'd like each to be its own array when I load my images from my assets. Below is similar to what I have: PIXI.Loader .add("hearts10","hearts10.png") .add("hearts9","hearts9.png") ... .load(start) I'd like to be able to access the cards via an array of arrays, sort of like: var current_card = new Sprite(resources.cards.hearts.10.texture);
  4. I have the specific requirement of using a Sprite to provide a mask for an entire tile-less terrain. So it can't be segmented into smaller pieces - container.mask will only accept 1 sprite as its mask. So what I'm doing is a 4096x2048 texture sprite with a sprite.scale = 8. Only a small part of the sprite is shown on the screen because with that scale it is massive. From what I understand, PIXI is creating a 32768x16384 quad behind the scenes and using the sprite as its texture. Performance is surprisingly pretty good I'm guessing because WebGL is smart about not drawing off-screen texels. But some overhead is bound to be there. So I'd like to have a screen sized sprite and instead change the UV coordinates of the texture on the fly in order to control what is shown. It also has to work as a mask. Is there a way to do that in PIXI? Edit: This is WebGL only. I have no interest in canvas.
  5. Hi, I updated phaser lib from older version to 2.6.2 and now there is no more "alpha" property in "sprite" object. I see "alpha" is still available using tween. But what if I want to change it directly like it was in previous version? : this.background = this.add.sprite(0, 0, 'back'); this.background.alpha = 0; thanks
  6. Hello fellow HTML5 Game Devs. I have an interesting problem I am testing out some controls and different schemes for my game. I have an image of a fighter. It uses the arcade physics mode. When I press the UP arrow, it goes right.... Code: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('background','../assets/images/deep-space.jpg'); game.load.image('fighter','../assets/images/Human-Fighter.png'); } var player; function create() { game.add.tileSprite(0, 0, 1920, 1920, 'background'); game.world.setBounds(0, 0, 1920, 1920); game.physics.startSystem(Phaser.Physics.ARCADE); player = game.add.sprite(game.world.centerX, game.world.centerY, 'fighter'); player.anchor.set(0.5, 0.5); game.physics.arcade.enable(player); // Notice that the sprite doesn't have any momentum at all, // it's all just set by the camera follow type. // 0.1 is the amount of linear interpolation to use. // The smaller the value, the smooth the camera (and the longer it takes to catch up) game.camera.follow(player, Phaser.Camera.FOLLOW_LOCKON, 0.1, 0.1); } function update() { player.body.velocity.x = 0; player.body.velocity.y = 0; player.body.angularVelocity = 0; if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { player.body.angularVelocity = -200; } else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { player.body.angularVelocity = 200; } if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) { game.physics.arcade.velocityFromAngle(player.angle, 300, player.body.velocity); } } function render() { } If you can help, it would be greatly appreciated! Thanks!
  7. I am creating a platforming game that has multiple different platforms. Some platforms slope up and others slope down. Upward Sloping Platforms * If the character moves right, his y position will increase * If the character moves left, his y position will decrease * The angle property of these platforms is negative Downward Sloping Platforms * If the character moves right, his y position will decrease * If the character moves left, his y position will increase; * The angle property of these platforms is positive The following tries to find the colliding platform. My update function looks something like this game.physics.arcade.collide(hero, platforms, function() { currentPlatform = platforms.children.filter(p => p.getBounds().contains(hero.x, hero.y))[0]; gameState.moveRight(); gameState.moveLeft(); }); } I need this platform to calculate whether the character will move upwards or downwards. Here is an example if (cursors.right.isDown) { if (currentPlatform) { hero.y = currentPlatform.angle < 0 ? hero.y - 0.04 : hero.y + 0.04; } } This obviously doesn't work, and the 0.04 value is hard coded, because I can't figure out how to increment with an angle. I've also tried calling sprite.body.touching, which returns the following Object {none: true, up: false, down: false, left: false, right: false} I am completely lost right now.
  8. Hi! How I can create paticleSystem with subPicture fromTextureAtlass? In past I used texture atlases for Sprite2D, but now I have many textures for my particles systems and I want combine all my textures in one big textures, but how I can get subTexture from my big atlas texture or it is imposible and atlases using only for Sprite2D? Thank for any information :)
  9. Hello! I have a parent sprite (which is a human body) and it has a child sprite (it's a piece of plate mail). The sprite sheet for the human and the sprite sheet for the plate mail are the exact same layout with the exact same animation frames. I was wondering if there was a way to have the plate mail follow the same animation sequence as the human, without having to map out its own animation sequences. Thanks!
  10. I have a situation where there are two sprites - sprite1 and sprite2. sprite1 is enabled for onInputDown as follows: sprite1.inputEnabled = true; sprite1.events.onInputDown.add(select, this); Then, within the select() function, there is some code to work out which sprite to display, which in this case turns out to be sprite2. Once this is done I enable sprite2 for onInputUp: sprite2 = game.add.image(game.input.mousePointer.x, game.input.mousePointer.y, "sprite2"); sprite2.inputEnabled = true; sprite2.events.onInputUp.add(deselect, this); So here, sprite2 appears under (or actually below and to the right of, but never mind) the mouse pointer while the mouse button is still down. Now, if the user lets the button go up, sprite2 should disappear when running deselect()So, if you click on sprite1 then sprite2 will briefly appear and then disappear. But it you click on sprite1 and keep holding the mouse button down then sprite2 will appear and remain there until you let the mouse button go. function deselect() { sprite2.destroy(); } BUT this is not what happens dammit. sprite2 does NOT disappear when you let the mouse button up, it just stays there. However, after this, if you then click on sprite2 and THEN let the mouse button go, it will disappear. How can I make it so that sprite2 appears when the mouse button is held down but disappears if you let it go from the first time the user triggers onInputDown?
  11. overlap

    How can I check if two sprite are overlapping or not at a given moment if both of them has special shape with loadpolygon? (eg. crosshairs rectangle vs. enemy on a click) Do I need to use P2? Maybe the solution is obvious, but I am absolutely beginner in Phaser.
  12. When I first use PIXI.js I used to put every sprite onto the stage. Then I know that there is a Container class to hold the sprites. So I can add some sprites onto one container and other sprites to another container. After that I can add all the containers onto the stage and PIXI.js will handle the drawing for me. This is a very smart idea because I can use it to group sprites that I may want to scale together or delete together. But on some occasions I still have questions putting them together because I am afraid I may have a bad design. If deleting a container means it also delete everything inside the container, is it a good design to put sprites into a container if I want to delete them as a whole in the future? Does the computer need more resources if I use many levels of containers in my game? For example, if my player have several segments or several parts, like a plane with some shield or small added laser guns, is it better to group them into one container or just put them into the parent container? If I am building a train, is it better to put all the carriages of the train into a container as a whole, meaning the train is a container, or put them into the parent container? If robustness and efficiency are the main concern, what design rules should I follow?
  13. I have made a demo that the sprite will scale to a bigger size on some event. However its texture gets blurry and resolution changed so the sprite looks very awful after scaling to a bigger size. Is there a way to scale but maintain the visual quality of the texture without changing the resolution of the texture? How about replacing the texture with a new one? This is all I can think about but I am afraid of the performance cost. I am using CanvasRenderer by the way.
  14. Hello everyone, I'm working on a test game with Phaser. At the moment I'm trying to create a "complex" player, what I mean is that my player is a paper doll from the Kenney Character Roguelike assets I can't figure out how to create my player object, has it to be multiple sprite on the same position ? A moving tilemap ? or something else ? I may not be clear, don't hesitate to ask question. Thank you !
  15. tilemap

    Hello, In my game, I created my tilemap with Tiled (like most of us). But my sprite were always in front of my scenery. and i have place some element like cars who were supposed to hide sprites (see example.png). The solution was to extract sprites from the layer containing these sprites and add them to sprite group, then sort this group using this.gamegroup.sort('y', Phaser.Group.SORT_ASCENDING); Here is the class that I made to achieve this goal. Note that I have to get the json file describing Tilemap. It's written in Typescript anf i use lodash, but it's easy to transpile it to plain javascript. import * as _ from 'lodash'; export class LayerToSprites { public placeMapSprite(layer: Phaser.TilemapLayer, map: Phaser.Tilemap, tilemapJson: any, group: Phaser.Group, game: Phaser.Game) { let layerJson = this.findLayerJson('sprites', tilemapJson), layerData: Array<any>, collectedSprites: collectedSpriteFromLayer; if (!layerJson) { return; // no data found } collectedSprites = this.collectSpriteFromLayer(layerJson.data, map); this.updateTextureAtlasCache(collectedSprites, game); this.addSpritesToGroup(collectedSprites, map, game, group); layer.renderable = false; } private addSpritesToGroup(collectedSprites: collectedSpriteFromLayer, map: Phaser.Tilemap, game: Phaser.Game, group: Phaser.Group) { _(collectedSprites.tileSprites).each(tileSprite => { let width = map.tileWidth, height = map.tileHeight, spriteInfo = tileSprite[0], row = Math.floor(spriteInfo.index / 100), column = spriteInfo.index % 100, x = Math.min(column * width, 100 * width), y = Math.min(row * height, 100 * height), tileset = _(map.tilesets).find(t => t.containsTileIndex(spriteInfo.id)); game.add.sprite(x, y, tileset.name, spriteInfo.id.toString(), group); }); } private updateTextureAtlasCache(collectedSprites: collectedSpriteFromLayer, game: Phaser.Game) { collectedSprites.tileSpriteFramesData.forEach((spriteFrameData, key) => { game.cache.addTextureAtlas(key, '', spriteFrameData.image, spriteFrameData, Phaser.Loader.TEXTURE_ATLAS_JSON_HASH); }); } private collectSpriteFromLayer(layerData: Array<any>, map: Phaser.Tilemap): collectedSpriteFromLayer { let processedTiles = new Map<number, boolean>(), tilewidth = map.tileWidth, tileheight = map.tileHeight, tileSprites = new Array<Array<tileInfo>>(), tileSpriteFramesData = new Map<string, tileAtlas>(); _(layerData) .each((id, index) => { let spriteInfo: tileInfo, currentSpriteInfo: tileInfo, tileset: Phaser.Tileset, collectedLayerSprite: collectedSprite; if (id == 0 || processedTiles.get(index)) { return; } spriteInfo = { index: index, id: id }; tileset = _(map.tilesets).find(t => t.containsTileIndex(spriteInfo.id)); currentSpriteInfo = spriteInfo; collectedLayerSprite = this.collectSprite(currentSpriteInfo, layerData, tileset, processedTiles); this.addSpriteToLayerAtlas(collectedLayerSprite, tileSpriteFramesData, tileSprites, tileset, map); }); return { tileSpriteFramesData: tileSpriteFramesData, tileSprites: tileSprites } } private findLayerJson(name: string, json: any) { return _(json.layers).find((l) => l.name == 'sprites'); } private rightTileIsSameGroup = (tileset: Phaser.Tileset, spriteInfo: tileInfo, layerData: any) => { return layerData[spriteInfo.index + 1] == spriteInfo.id + 1 } private bottomTileIsSameGroup = (tileset: Phaser.Tileset, spriteInfo: tileInfo, layerData: any) => { return layerData[spriteInfo.index + 100] == spriteInfo.id + tileset.columns } private collectSprite(spriteInfo: tileInfo, layerData: any, tileset: Phaser.Tileset, processedTiles: Map<number, boolean>): collectedSprite { let currentSpriteInfo = spriteInfo, currentLayerSprite = new Array<{ index: number, id: number }>(), continueReadingRight = true, continueReadingBottom = true, spritewidth = 0, spriteheight = 0; while (continueReadingRight) { spritewidth++; let bottomSpriteInfo: tileInfo = { index: currentSpriteInfo.index, id: layerData[currentSpriteInfo.index] }; continueReadingBottom = this.bottomTileIsSameGroup(tileset, bottomSpriteInfo, layerData); let currentspriteheight = 0 while (continueReadingBottom) { currentspriteheight++; currentLayerSprite.push(bottomSpriteInfo); processedTiles.set(bottomSpriteInfo.index, true); continueReadingBottom = this.bottomTileIsSameGroup(tileset, bottomSpriteInfo, layerData); bottomSpriteInfo = { index: bottomSpriteInfo.index + 100, id: layerData[bottomSpriteInfo.index + 100] } } if (currentspriteheight > spriteheight) { spriteheight = currentspriteheight } continueReadingRight = this.rightTileIsSameGroup(tileset, currentSpriteInfo, layerData); currentSpriteInfo = { index: currentSpriteInfo.index + 1, id: layerData[currentSpriteInfo.index + 1] }; } return { layerSprite: currentLayerSprite, spriteheight: spriteheight, spritewidth: spritewidth }; } private addSpriteToLayerAtlas(collectedLayerSprite: collectedSprite, tileSpriteFramesData: Map<string, tileAtlas>, tileSprites: Array<Array<tileInfo>>, tileset: Phaser.Tileset, map: Phaser.Tilemap) { let currentLayerSprite = collectedLayerSprite.layerSprite, tilewidth = map.tileWidth, tileheight = map.tileHeight; if (currentLayerSprite.length) { let tilesetRaw: any = tileset, currentgid = currentLayerSprite[0].id - tileset.firstgid, tilex = tilesetRaw.drawCoords[currentgid * 2], tiley = tilesetRaw.drawCoords[1 + (currentgid * 2)], spritewidthPixel = collectedLayerSprite.spritewidth * tilewidth, spriteHeightPixel = collectedLayerSprite.spriteheight * tileheight, spriteFrameAtlas: frameAtlas = { filename: currentLayerSprite[0].id.toString(), frame: { x: tilex, y: tiley, w: spritewidthPixel, h: spriteHeightPixel }, rotated: false, trimmed: false, spriteSourceSize: { x: tilex, y: tiley, w: spritewidthPixel, h: spriteHeightPixel }, sourceSize: { w: spritewidthPixel, h: spriteHeightPixel } } if (!tileSpriteFramesData.has(tileset.name)) { let newFrameAtlas = { frames: new Array<frameAtlas>(), image: tileset.image }; tileSpriteFramesData.set(tileset.name, newFrameAtlas); } tileSpriteFramesData .get(tileset.name) .frames.push(spriteFrameAtlas); tileSprites.push(currentLayerSprite); } } } interface tileInfo { index: number, id: number } interface frameAtlas { filename: string, frame: { x: number, y: number, w: number, h: number }, rotated: false, trimmed: false, spriteSourceSize: { x: number, y: number, w: number, h: number }, sourceSize: { w: number, h: number } } interface tileAtlas { frames: Array<frameAtlas>, image: any } interface collectedSprite { layerSprite: Array<tileInfo>, spritewidth: number, spriteheight: number } interface collectedSpriteFromLayer { tileSprites: Array<Array<tileInfo>>, tileSpriteFramesData: Map<string, tileAtlas> }
  16. animation

    Hello, I just want to share with you my solution to process some image operation on a sprite with animation. Note that I am working on Typescript so, you maybe have to transpile this code in pure javascript. I created a class that extend Phaser.Sprite. In this class after initializing the sprite : - i create a bitmap, that will not be added to the world, a the size of the spritesheet image and load the spritesheet image in the bitmap - i load this bitmap as a textureAtlas then I load the texture. To change color I modify the bitmap, then reload the terxture as Atlas an reload texture. (it is possible to set a different texture key in order to keep old state) As operating transformation on bitmap may be costly, it may be preferable to pre-run these transformations. class PlayerSprite extends Phaser.Sprite { private frameData: any; private bitmapBrother: Phaser.BitmapData constructor(key: string, position: Phaser.Point, game: Phaser.Game) { super(game, position.x, position.y - 32, null); this.createBitMap() .loadBitmapAsTextureAtlas() .loadTexture('heroes-sprites'); this.animations.add("down", ["sprite1", "sprite2", "sprite3"], 5, true); this.animations.add("left", ["sprite13", "sprite14", "sprite15"], 5, true); this.animations.add("right", ["sprite25", "sprite26", "sprite27"], 5, true); this.animations.add("up", ["sprite37", "sprite38", "sprite39"], 5, true); this.animations.add("stand-down", ["sprite2"], 5, true); this.play("stand-down"); } createBitMap() { let game = this.game; let cache = game.cache; let cacheSpriteSheet: any = cache.getImage('heroes-sprites', true); let bitmapBrother = game.add.bitmapData(cacheSpriteSheet.width, cacheSpriteSheet.height); this.bitmapBrother = bitmapBrother; this.frameData = cache.getJSON('heroes-sprites-atlas'); bitmapBrother.load('heroes-sprites'); return this; } loadBitmapAsTextureAtlas(prefix?) { this.game.cache.addTextureAtlas('heroes-sprites' + prefix, '', this.bitmapBrother.canvas, this.frameData, Phaser.Loader.TEXTURE_ATLAS_JSON_HASH); return this; } modifiyBitmap() { this.bitmapBrother.shiftHSL(0.1); return this; } changeColor() { this.modifiyBitmap() .loadBitmapAsTextureAtlas('changed') .loadTexture('heroes-sprites' + 'changed'); } }
  17. Hi, I need to replace the colors of a sprite during the game. More precisely, I need to swap specific colors with others (e.g., swap blue with red). I know that there is a method in BitmapData that does exactly what I need (replaceRGB). But I need to apply it to a sprite. Is it possible? Maybe if I could access the sprite's bitmapdata, I could do that. I know it is possible to replace colors using shaders, but I want to know if it is possible without shaders first. Thanks!
  18. Hi. I have a really long graphic for a progress bar and I want to render only a percentage of it. It has to change over time. How can I display chosen part of a Sprite?
  19. Hello guys, I am using the sprite for a shot from a gun effect. How I can rotate Y axis of a sprite? I need somthing like on screenshot. My sprite: It screen I did in the photoshop to give an opportunity to understand what I need
  20. I'm working on a game project where I want to be able to switch between two "dimensions" in the same world. I though the easiest way to do this was to have a keyboard event, which toggles sprites' visibility when pressed. This works fine, however, when the visibility is toggled off, and I move the character (and thus, the camera), the sprites seem to be keeping their position relative to the camera, and not the world. Which means that when I toggle the visibility on again, the sprites have moved from their original position relative to the world, but are in the same position relative to the camera. For example, if a sprite is off-camera while invisible and I move the character, the sprite gets pushed off the stage, and can't get back (because it falls down below the ground). How do I stop this from happening? How can I "lock" them in place while visible? I read that the sprites are not being rendered when visible=false, so should I be using some other method of hiding them? Here is my relevant code for the keyboard event: skey = this.game.input.keyboard.addKey(83); skey.onDown.add(this.sPressed,this); Here is the method sPressed: sPressed: function(key) { if (baddie.visible) baddie.visible = false; else baddie.visible = true; if (stars.visible) stars.visible = false; else stars.visible = true; } And here is how I make the camera follow the character sprite: this.game.camera.x = player.body.x-200; I tried changing to camera.follow, and camera.focusOnXY, and that changed nothing. I have tried googling, and can't find anything relevant to my problem.
  21. Put a "sprite" style change is similar to CSS "border-radius" OK?
  22. Hello, I'm trying to add animations to a class which is extending Phaser.Sprite export class PlayerEntity extends Phaser.Sprite { constructor(game: Phaser.Game, x: number, y: number) { super(game, x, y); this.game.add.sprite(x, y, "player"); // Error this.animations.add("down", [0, 1, 2, 3], 10, true); this.animations.add("left", [8, 9, 10], 11, true); this.animations.add("right", [4, 5, 6, 7], 10, true); this.animations.add("up", [12, 13, 14, 15], 10, true); this.animations.play("down", 4, true); this.game.add.existing(this); } } Stacktrace: Uncaught TypeError: Cannot read property 'getFrameIndexes' of null at c.AnimationManager.add (phaser.min.js:19) at new PlayerEntity (:9000/js/entity/playerentity.js:18) at l.CreatePlayer (:9000/js/entity/entityfactory.js:5) at Level01.create (:9000/js/level/level01.js:20) at LevelController.create (:9000/js/level/controller.js:15) at WorldController.create (:9000/js/world/controller.js:27) at c.StateManager.loadComplete (phaser.min.js:10) at c.Loader.finishedLoading (phaser.min.js:20) at c.Loader.processLoadQueue (phaser.min.js:20) at c.Loader.asyncComplete (phaser.min.js:20) So "this.animations.add..." is the problem. this.game.add.existing(this); Doesn't have any effect. Thanks for reading and any help is appreciated!
  23. HI everyone, sorry for very noobish question, but I'm new in phaser and objective js I'm making platform game, where I placed enemy like a sprite and programmed his movement. It works, but when I add another enemy, one is not moving, while the other is. I understand this, because sprites are not objects and all of my instructions can conduct only one, the latest sprite. How change the code, group or sth, can someone give me example, that I could add multiple sprites and all of them will be doing the same? Here's the code: //IN CREATE: for (var i = 0; i < 20; i++) { droid = game.add.sprite(game.rnd.integerInRange(0, 128), game.world.randomY, 'droid'); } game.physics.enable(droid, Phaser.Physics.ARCADE); droid.body.bounce.y = 0.1; droid.body.setSize(32, 32, 5, 1); droid.animations.add('left', [0, 1, 2], 10, true); droid.animations.add('right', [5, 6], 10, true); droid.body.collideWorldBounds = true; droid.previous_x=droid.body.x; droid.body.velocity.x = 50; //IN UPDATE: if( Math.abs(droid.body.x-droid.previous_x) > 100) enemy_switch_direction(droid); function enemy_switch_direction(enemy) { if ( enemy.body.velocity.x > 0 ) enemy.body.velocity.x=-50; else enemy.body.velocity.x=50; }
  24. Ok so Ill start with a quick example: https://i.gyazo.com/8ff58e047c8938dcf508b63bc18147bb.mp4 I start the example with a stationary swing and then proceed to swing while spinning. The station swing is perfect and smooth with zero jittering. The swing while rotating creates a horrible jitter effect. Right now the character is as follows: Base empty sprite holding everything. This only moves x and y. Bodyholder sprite is holding the characters body and is child of the base LeftArmHolder sprite is holding the left arm and is a child of the base RightArmHolder sprite is holding the right arm and is a child of the base I have tried a tweening the arm holders, which works well for static swings, but creates jittering while the character spins and swings. I have tried grabbing the body holders angle and applying the swing angle on top of that (body.angle + requiredSwingAngle). The result is the same as the tween. I have also tried creating an addition arm holder to act the base for both arms and make it a child of the body holder. The result is the same as the tween. Does anyone have any ideas on how to create a nice smooth sprite orbiting animation (backwards and forwards) whilst the parent sprite is rotating?
  25. Hi, I'm creating my first project with Phaser. I have two large background TileSprites that I want to toggle between as the game is played. When the game state calls the create() method it creates the sprites and then sets one visible true and the other false. After a set time, it will swap. The first time this swap is called, there's a bit of lag. Subsequent swaps have no lag. I've experiencing this on my Nexus 5X and Laptop (Core i7 + GTX960M). I'm guessing that because I almost immediately set visible to false, the second sprite isn't being rendered to the GPU. Once it has rendered at least one time, then subsequent calls to toggle the visibility don't lag cause the texture is somehow cached. This is all conjecture on my part, I really don't know how these things work. Is there anyway to cache a sprite/texture to the GPU, so that toggling the visibility won't cause lag? Thanks!