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 567 results

  1. I have a graphics issue that I cannot pinpoint. My sprite appears more blurry at some positions of the map. Does anyone have an idea what this kind of problem can depend on? Both of these pictures shows the sprite when idle on different positions - so no animation is playing - and at the first picture the sprite looks more clear than it does on the second one. I don't know what more information I can give on this that is relevant.
  2. In the Phaser documentation for groups it says that you can do the following: group.create(x, y, "spritesheet", index) ...where index is the frame on the spritesheet you want be be included in the group. However, when I use this it just displays the entire spritesheet.
  3. Hello there, What an amazing engine to render on webGL/Canvas! We are getting such a boost on performance thanks to this great library. Now, let's go to the point: We managed to partly migrate all our SVG animations to canvas using PixiJS. In order to do that, we had to parse our SVG so we could have a Container/Sprite/Textures structure that Pixi could manage and understand. We finally did it, and we have an Object like the onw you can see on the attached image: It is coming from the SVG you can find here: http://lab.pre.rtve.es/el-cuento/app/public/static/image/otto.svg So, what we have, is a lot of containers (what used to be groups in our SVG) and inside them, more Containers and finally Sprites containing Textures (what used to be paths). THE PROBLEM: We want to use Pixi's AnimatedSprite class so we can animate the mouth of our character, and when we do it, it works, but we lose the position of our Textures and they show at the upper left corner of our character. I can't see any position on this Sprites and Textures, so I guess they are just drawed where they are supposed to be and therefore when we try to animate them, we lose this relativeness to the parent and position. Any way to make them stay in place? Thank you very very much
  4. I want to make sprite gleaming at an interval in Canvas mode in PIXI. What is the best way to do that? Say I want the sprite become brighter (like a light bulb) or darker (just show some lighter color). The switch interval is 1 second or 500ms. I can think of doing this by switching the texture of the sprite but I am not sure if this is the most efficient way.
  5. Hi, I would like to know if it is possible to create a function which asks if a sprite (playerA) overlaps with an object from a JSON tilemap without sprite? If my playerA overlaps this invisible object a function would be started. I already tried the overlap function between two sprites and it worked: function onDragStop(sprite, pointer) { if (checkOverlap(playerA,sprite)){ console.log("Overlap!"); } else { console.log("Dropped"); } function checkOverlap(spriteA, spriteB) { var boundsA = spriteA.getBounds(); var boundsB = spriteB.getBounds(); return Phaser.Rectangle.intersects(boundsA, boundsB); } Here is an extract of the JSON tilemap. { "height":10, "layers":[ { "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "height":10, "name":"Calque de Tile 1", "opacity":1, "type":"tilelayer", "visible":true, "width":20, "x":0, "y":0 }, { "image":"..\/world.png", "name":"World base", "opacity":1, "type":"imagelayer", "visible":true, "x":0, "y":0 }, { "draworder":"topdown", "name":"First Object", "objects":[ { "gid":1, "height":64, "id":5, "name":"", "rotation":0, "type":"", "visible":true, "width":64, "x":317.52500448109, "y":195.111668757842 }], "opacity":1, "type":"objectgroup", "visible":true, "x":0, "y":0 }, { "draworder":"topdown", "name":"Second Object", "objects":[ { "gid":1, "height":64, "id":11, "name":"", "rotation":0, "type":"", "visible":true, "width":64, "x":449.212619275898, "y":193.621695658129 }], "opacity":1, "type":"objectgroup", "visible":true, "x":0, "y":0 }, And I would like to play a sound when the player overlaps an object, and each object would have a different effect. And then I don't know how to specificaly call one object and check if it's overlaping with the player. objects = game.add.group(); objects.enableBody=true; game.load.tilemap('world',"assets/map/world.json",null,Phaser.Tilemap.TILED_JSON); game.load.image('tileset',"assets/world.png"); world = this.add.tilemap('world'); world.addTilesetImage('tileset','tileset'); layer = world.createLayer('Calque de Tile 1'); layer.resizeWorld(); world.createFromObjects('First Object',1,'',0,true,false,objects); I don't knwo if these parts of code are enough to understand what I would like to do? I don't know where to get the informations and documentation about that =/ Any information is welcomed ^^.
  6. Hello everyone, can you told me why my code is not working ? i don't understand why is not working, i got inspired with this : https://phaser.io/examples/v2/input/keyboard-hotkeys my code: function preload(){ game.load.image('bulleRpg', 'assets/bulleRpg/bulleRpg.png'); } var spaceKey; function create(){ spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); spaceKey.onDown.add(drawBulleRpg, this); } function drawBulleRpg() { game.add.sprite(game.world.centerX + 250, game.world.centerY + 150, 'bulleRpg'); } i want just display an image when i press the spacebar. Thx lot of
  7. Obviously this isn't optimal. Was wondering if maybe I'm doing something wrong? I have a standard game loop that's managed by requestAnimationFrame(gameLoop); and within my gameloop I have a function that moves each enemy like so: enemy.position.y += 6 I don't really know what to do to keep my movement speed from varying so dramatically across different devices. Another issue that might be related, over time my sprite movement becomes gradually faster and choppier. This is the part that really really bothers me. Any help or insight would be deeply appreciated.
  8. I have a sprite of a character moving and I'm trying to apply physics collide on it that when it hits a rock for example health is decreased. I managed to achieve collision but as rectangular shape of the image, what I want to achieve is the collision happens on the boundaries of the character itself. I used PhysicsEditor to generate the JSON file, but I'm still not sure how to use it to achieve pixel perfect collision. Any thoughts?
  9. Hi, I am currently developping a Tower Defense style game and I want a nice effect when the mouse hovers a sprite. So I was wondering if it was possible to achieve something similar to this image without the necessity of making another image. I'm talking about the yellow shape when the cursor is on the sprite. I need to have this effect even during an animation, which is why I think it would be complicated to manage if I had to switch between two types of images. And also collision detection with the cursor needs to be relatively precise. When the cursor is OUT : When the cursor is OVER : Thanks
  10. Hello! I am the P2 physics. I have a sprite scaled. My problem is that the polygon loaded to the sprite does not scale with it. It is possible to scale the polygon?
  11. 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.
  12. 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);
  13. 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.
  14. 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
  15. 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!
  16. 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.
  17. 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 :)
  18. 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!
  19. 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?
  20. 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.
  21. 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?
  22. 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.
  23. 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 !
  24. 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> }
  25. 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'); } }