Cyclone112

Hey Tom, Yeah you can definitely do that. I already use setSize on the character sprite so it collides with the bottom 16x16 portion of the player (The full sprite is 16x24). The issue though is if you reduce the player body size to be any less than the tile size there will be space in between tiles for the player to move. This might be fine for some people but it doesn't feel right (I've experimented with it). It's hard to describe but it just feels sloppy/off in terms of the movement.

Nope. I put my project on hold and started a different one for now. I'm guessing you would have to do some manual velocity manipulation when you collide with a circular object but I haven't tried it yet. Let me know if you figure something out! Would be much appreciated.

Looks like the slopes plugin is specifically for tilemaps which might work but I also want to have collision on sprites which I don't think that slopes plugin can do. It looks like it's possible to convert tiles into sprites so then I could do circle collision on them. That way my player sprite could have body.setCircle(<width of the sprite>) and then the sprite will round all tiles and whatever other objects are in the game. The issue with this though is the sprite moves slowly around a corner as the rounded collision slows the sprite down. EX: I'm near the top-left of a tile and I hold right which applies an X velocity of say 60. As the user moves around the corner of the tile they also move in the Y direction to get around the corner meaning the velocity is split between the X and Y. This makes sense but the combined split X/Y velocity appears to still be less than the original applied velocity of X:60. Anyone know if there is a way to prevent any slowdown when colliding with a circle body as described above?

Anyone have any ideas?

Hey jamessimo, I don't have to worry about a player dying by fractions of a pixel because when an overlap happens with a flame I determine if the player is >=50% in the flame so partial overlap is allowed. I don't want to use grid/tile based movement because it will just make the movement feel clunky and I want the user to have freedom. If they move into the next tile by 30% and try to stop moving the game would either have to keep them moving the rest of the way or move back to the previous tile. Ideally I would like clipping into just the corners of the tile or somehow be able to line the players up perfectly with the gap.

Let's say you have a sprite with a collision body of 16px/16px and all the areas to move in the map are exactly 16px/16px as well. It's very hard to maneuver the sprite to be at exactly in the opening to avoid collision letting the player move through it. For example, I attached a gif I made of how Bomberman solves this problem: Bomberman allows the player to clip slightly into the corner of the tile when they get close to the edge so the player starts moving diagonally into the open gap so then the player doesn't have to worry about lining up perfectly. I've looked into doing that but collision detection is AABB on tiles. I also can't just set the players x/y coordinates to be in the right spot because that will break any other collision physics going on. So is there a way to round the corners like in Bomberman or to use velocity to position the player in the opening of the lane perfectly or any other ideas I'm not thinking of? Thanks

I have a top-down game where I want most objects aligned to tiles. They can be moved(by having a velocity applied to them) but when they do they need to end exactly within a tile when they are stopped. Let's say I have a sprite that is moving across the screen and it detects that the next tile it will try to enter is occupied by some other object. In that scenario I would like to manually stop the sprite at exactly the location of the tile it's in. Currently I have collision on blue and red in the picture and blue would then be manually aligned at the previous tile which looks bad animation wise as it sort of jumps backwards. So what I think I need is a sort of predictive method where before blue enters the next tile it checks if that tile is occupied and if so stops. Any suggestions on the best way to handle this?

Well I spent some time investigating and I'm just frustrated to no end right now. Perhaps someone else has setup multiple gamepad support in there game and could help both of us out. It might not be something that can be solved within Phaser either as I tested on 2 different PC's to different results just using this site here: http://html5gamepad.com/ PC #1 When I hook up 2 controllers they both show and work fine. If I unplug controller 2 then controller 1 still works fine. If I replug in controller 2 they both work fine. If I unplug controller 1 it disconnects BOTH controllers PC #2 When I hook up 1 controller it works fine When I connect the second controller I get a third random invalid controller showing which you can see a screenshot of here When I unplug either controller the third random one disappears I do see the exception you got but it seems to only occur in certain scenarios for me. I was able to avoid the game crashing by just adding an extra check in the pollStatus function in SinglePad like so: if (!this.connected || !this.game.input.enabled || !this.game.input.gamepad.enabled || !this._rawPad || (this._rawPad.timestamp && (this._rawPad.timestamp === this._prevTimestamp))) The disconnect callback is still called properly and I can reconnect the controller and keep playing just fine. This seems to avoid any crashes or ill effects and might just be what you need if your game only supports a single player. If your game is meant for up to 4 people locally then you will still probably have some issues like I'm experiencing in the PC #1 and #2 descriptions above

This is the exact tutorial I used to start my game in TypeScript a few months back. Most of it is still relevant and some pages have comments with modifications to things that are outdated. Highly recommended.

So I confirmed that I get the same error you do on the example page but I know I don't in my game. So that's a good thing. I'll compare my code to the example and try to see why that would happen. It's Valentine's Day today though so I'll have to properly look into this issue tomorrow night as my girlfriend will murder me otherwise .

HTML5 gamepad support is still in an experimental stage and I'm just talking about in general, not Phaser itself. I just added Gamepad support to my game yesterday and I never had that issue. Perhaps it's the gamepad you used? I tested with an XBOX ONE and PS4 controller and both worked fine connecting/disconnecting. Also might depend on the browser you were testing with

Okay I figured out a nice, easy solution at least for my situation (top-down tiled game). If the overlap callback is triggered then for sprite3 (which is the one I'm manually putting a velocity on) I just manually set velocity to 0 and then x, y to be outside of sprite2. In my case I actually have a helper function where I determine which tile the object is in and then i can just set sprite3 to those coordinates but that won't work for most games so I made a little snippet of code as an example of what people can use. I renamed sprite3 to be moveableSprite and sprite2 to be stationarySprite so the code reads better. Also I converted some code from TypeScript to JS for the example so it might not work in JS exactly as is shown this.stationarySprite.immovable = true; this.moveableSprite.immovable = true; this.game.physics.arcade.overlap(this.stationarySprite, this.moveableSprite, this.immovableOverlap, null, this); // at some point a velocity is applied to moveableSprite this.moveableSprite.body.velocity.x = 50; // Manually place moveableSprite beside stationarySprite. This isn't a full example since I'm using my own // tile helper functions in my game but it shows how someone would likely do it. immovableOverlap(stationarySprite, moveableSprite) { moveableSprite.body.velocity.x = 0; moveableSprite.body.velocity.y = 0; var moveableSpriteXLeft = moveableSprite.x; var moveableSpriteXRight = moveableSpriteXLeft + moveableSprite.width; var stationarySpriteXLeft = stationarySprite.x; var stationarySpriteXRight = stationarySprite.x + stationarySprite.width; // Test if moveableSprite has collided with the left side of stationarySprite if (moveableSpriteXRight > stationarySpriteXLeft && moveableSpriteXRight < stationarySpriteXRight) { moveableSprite.x = stationarySpriteXLeft - moveableSprite.width; } // More tests for other sides/directions if () {} } Honestly now that I've written this I bet the Phaser library itself has this exact type of code only better so maybe it's worth actually looking at the Phaser source code to see if some code can be reused.

Yeah unfortunately I thought that was the case drhayes. I agree that I think I will have to do the collision manually myself. What I have tried is when sprite2 and sprite3 do collide phaser still calls the collide callback and then I set sprite3.body.velocity.x = 0; The sprite stops moving as expected but it's like <=1pixel into sprite2. I'm guessing I would then have to manually separate the two objects myself there. Hmm... I wonder if there is an easy/proper way to do that. I'll give it a go and then maybe get it into the sandbox if I still can't get a proper solution going. Thanks

I have 3 sprites: spritePlayer is my main sprite I control sprite2 will NEVER move. sprite3 will only move when spritePlayer moves against it AND presses a key. Then I want it to have a constant velocity in that direction and if it comes across sprite2 then it collides/separates and loses it's velocity. I set sprites 2 and 3 to have body.immovable = true so if spritePlayer touches either of them they don't move and spritePlayer can't move through them either which is exactly what I want. If I press a key to trigger sprite3 to move I set sprite3.body.velocity.x = 50 and it moves right through sprite 2 when it comes across it which is what I don't want. I know two immovable objects don't separate as programmed in phaser so there must be some other way to get the desired effect I need. Perhaps I'm going about this the wrong way but I'm having a hard time figuring out any other way.

Okay I finally got it working. You need to reset the currentAnim object on the animation manager back to anim1 after pausing anim2 and it starts right where it left off. var anim1 = this.animations.getAnimation("animation1"); var anim2 = this.animations.getAnimation("animation2"); this.animations.play("animation1", 10); // Sometime later anim1.paused = true; this.animations.play("animation2", 10); // Sometime later anim2.paused = true; this.animations.currentAnim = anim1; anim1.paused = false;