# Tileset hitboxes missaligned **URL:** \ **Category:** Phaser 3\ **Created:** [May 17, 2026, 10:53pm UTC](https://phaser.discourse.group/t/tileset-hitboxes-missaligned/15604 "2026-05-17T22:53:37Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![s-a3](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/s-a3/32/9322_2.png) [@s-a3](https://phaser.discourse.group/u/s-a3)\ **Post date:** [May 17, 2026, 10:53pm UTC](https://phaser.discourse.group/t/tileset-hitboxes-missaligned/15604/1 "2026-05-17T22:53:37Z")
I’ve been trying to do a climbing action for my game via tilesets, where you can move wherever you want inside the tiles. My issue is that the player drops out whenever it touches another tile while overlaping the desired tile. Is there anyway to make it so it checks if the player is overlapping the tile no matter if it is overlaping another tile at the same time? (For example, the player overlaping tiles 9 and -1) ```javascript this.physics.add.overlap(this.player, this.ladderLayer, (body, tile)=>{ if(tile.index === 9){ this.player.onLadder = true console.log("vine") } else if (tile.index !== 9){ this.player.onLadder = false } }) ``` Image example, at this position, the player should be able to climb the vines, but it doesn’t at all ![imagen](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/4/4256b9071f3ea18b03ff5eaa5703459265b1c92c.png) ---
**Author:** ![s-a3](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/s-a3/32/9322_2.png) [@s-a3](https://phaser.discourse.group/u/s-a3)\ **Post date:** [May 17, 2026, 11:33pm UTC](https://phaser.discourse.group/t/tileset-hitboxes-missaligned/15604/2 "2026-05-17T23:33:49Z")
Ok updates on this, it seems that the hitboxes are weirdly missaligned in some way? Not sure what causes this. In the image gou can see that the player is some pixels at the vines when he grabs them form the left, but it does not happen the same if you try doing the same to the right. ![imagen](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/c/c0e3df3c0d2422e0a4910593187f65f1ca3bb34b.png) ---
**Author:** ![johnSSG](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/johnssg/32/8138_2.png) [@johnSSG](https://phaser.discourse.group/u/johnSSG)\ **Post date:** [May 18, 2026, 6:52am UTC](https://phaser.discourse.group/t/tileset-hitboxes-missaligned/15604/3 "2026-05-18T06:52:44Z")
You can use this.player.setSize(width, height) to change the size of the hitbox to match the sprite image. There is also this.player.setOffset() if necessary. ---
**Author:** ![scottwestover](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/scottwestover/32/7442_2.png) [@scottwestover](https://phaser.discourse.group/u/scottwestover)\ **Post date:** [May 18, 2026, 12:44pm UTC](https://phaser.discourse.group/t/tileset-hitboxes-missaligned/15604/4 "2026-05-18T12:44:37Z")
In the image you shared here, when the player does not climb, do you see your callback function for the ladder layer being called? It sounds like you have another physics collider setup between your player and maybe the bricks shown there, guessing that is another layer? For the issue you described, of dropping when you touch another tile, that sounds like another collider is taking precedence. By chance, would you be able to share the rest of your physics code? One option you might be able to use is the `processCallback`. This allows you to run custom code before your collider processing occurs, and in here you could check if you are on a ladder, and ignore the collision logic that is occurring. ---
**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\ **Post date:** [May 18, 2026, 3:19pm UTC](https://phaser.discourse.group/t/tileset-hitboxes-missaligned/15604/5 "2026-05-18T15:19:30Z")
I think there are two ways you could do this. ### create() ```js // 'preupdate' is before colliders are run. this.events.on('preupdate', () => { this.player.onLadder = false; }); this.physics.add.overlap(this.player, this.ladderLayer, (_player, tile) => { if (tile.index === 9) { this.player.onLadder = true; console.log('vine'); } }); ``` (I actually wish Arcade Physics colliders had `preUpdate()` and `postUpdate()` for this purpose.) ### update() ```js const { left, top, width, height } = this.player.body; this.player.onLadder = this.ladderLayer .getTilesWithinWorldXY(left, top, width, height) .some((tile) => tile.index === 9); ``` ---
**Author:** ![s-a3](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/s-a3/32/9322_2.png) [@s-a3](https://phaser.discourse.group/u/s-a3)\ **Post date:** [May 21, 2026, 1:10am UTC](https://phaser.discourse.group/t/tileset-hitboxes-missaligned/15604/6 "2026-05-21T01:10:44Z")
Sorry for the late response! It did call the ladder function but it did not do anything if the player is overlaping a second tile to the right (for some reason) from the same layer. Is there any example to the processCallback so I can understand how it works? Edit: samme solution worked at my end buut I would like to still know about the processCallback ---
**Author:** ![s-a3](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/s-a3/32/9322_2.png) [@s-a3](https://phaser.discourse.group/u/s-a3)\ **Post date:** [May 21, 2026, 1:22am UTC](https://phaser.discourse.group/t/tileset-hitboxes-missaligned/15604/7 "2026-05-21T01:22:14Z")
This worked! Thanks! But just in case, what does each thing mean in the update function, specifically after the `this.ladderLayer` ---
**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\ **Post date:** [May 21, 2026, 3:35pm UTC](https://phaser.discourse.group/t/tileset-hitboxes-missaligned/15604/8 "2026-05-21T15:35:02Z")
- [get all tiles within the rectangle](https://docs.phaser.io/api-documentation/class/tilemaps-tilemaplayerbase#gettileswithinworldxy) `left, top, width, height` (in world coordinates) - `true` only if [at least one tile has](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some) index 9 ---
**Author:** ![scottwestover](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/scottwestover/32/7442_2.png) [@scottwestover](https://phaser.discourse.group/u/scottwestover)\ **Post date:** [May 29, 2026, 2:13pm UTC](https://phaser.discourse.group/t/tileset-hitboxes-missaligned/15604/9 "2026-05-29T14:13:18Z")
There is an example here: > **[Phaser 4 Example Viewer](https://labs.phaser.io/phaser4-view.html?src=src%5Cphysics%5Carcade%5Coverlap%20process%20callback%202.js&return=phaser4-index.html%3Fpath%3Dphysics%252Farcade)** > **[Phaser 3 Examples](https://labs.phaser.io/edit.html?src=src%5Cphysics%5Carcade%5Coverlap%20process%20callback%202.js&v=dev)** In this example, the code skips the collision callback, and uses the process callback to indicate if the floating objects are “colliding” with the main game object. When the collision happens, the objects turn “red”, and this is being controlled by the `update` method. To see a difference, if you comment out the `return atariRect.contains(x, y);` line and just do `return false`, now when the objects overlap they will no longer turn “red”. If you play with the code, you can see how it would interact with the collision callback. For example: ```javascript this.physics.add.overlap( atari, chunks, function collision(_atari, chunk) { chunk.destroy(); }, function process (_atari, chunk) { const { x, y } = _atari.getLocalPoint(chunk.body.center.x, chunk.body.center.y); return true; } ); ``` This would remove those floating objects once they collide, and if you update the process callback to return `false`, then the collision callback should never get called.