TileMaps are very broken in Safari, and it seems to be due to 1 line of code which, if I comment it out, makes everything work fine. I'd create a PR but I do not know exactly how this particular rendering flag is used:

The line is here:

https://github.com/photonstorm/phaser/blob/master/src/tilemap/TilemapLayer.js#L677

In method: Phaser.TilemapLayer.prototype.shiftCanvas

context.globalCompositeOperation = 'copy';

Example:

http://jsfiddle.net/zq8hn23g/6/

This works fine in all browsers except Safari. If you run the example, then click and drag on the canvas, you'll see the tilemap flicker in and out of visibility.

Please let me know if you need any more info.

Hello ! I've been working on implementing isometric tilemaps for a while now.

fixes https://github.com/photonstorm/phaser/issues/3618

Summary of the changes and their rationale :

• Added orientation field to the layer data, to prevent "this.layer.tilemapLayer.orientation" unwieldy calls in the engine code.
• Changed pixelX and pixelY calculations for the tiles in isometric layers in updatePixelXY to display tilemaps correctly.
• Changed WorldToTileXY and TileToWorldXY components to work with isometric tilemaps. I also changed every component (getTilesAtWorldXY, getTilesWithin...) that used to call both WorldToTileX and WorldToTileY to call the XY alternatives instead, because sadly with isometric coordinates you need to work on both at the same time when converting to/from the world coordinates.
• Changed the renderers to use the tileset's sizes when displaying tiles (and not the tiles') when the map is isometric. This may seem weird - but in Tiled the tileset's tiles don't necessarily have the same height as the tiles, it's usually double, to allow for "block/cube" type isometric maps. Check my test's map (in assets/tilemaps) to understand this.
• Adjusted culling for isometric dynamic layers. I felt like the cullpadding didn't really make sense for iso maps so I didn't include it, but I'm not so sure, let me know. As part of this, I added a isoCullDistances attribute to dyn layers in order for the user to decide how strict the culling is.
• Allowed the parser to parse isometric maps.
• Applied the linter ;) probably more adjustments I forgot.

For staggered and hexagonal maps :

• Changed pixelX and pixelY calculations ,Changed WorldToTileXY and TileToWorldXY components to work with them. They use the same culling as standard maps with modified values for the vertical axes. You can do tileToWorldY, worldToTileY separately with them but not the X variants because of the formulas.

Comments : Tiled itself doesn't support proper object layer display. Proper being, detecting when objects are behind walls/ when they are not. They are displayed above the map in all cases. I might be wrong, but I believe changing it would require a significant rewrite of the renderer, in order to interleave the objects and the tiles. I think it's better to just let users sort it out with Z-indexes. Thus I decided not to implement it in the engine by default. Is that reasonable ?

Thank you in advance for your feedback !

Edit : ~Only standard isometric is supported for now, but staggered is just a formality at this point, would come a week later at most after this PR is accepted.~ Staggered and hexagonal map modes are now supported.

Earlier I made an (ugly) pull request https://github.com/photonstorm/phaser/pull/1923 that made Phaser work with Webpack, but since 7a6de818e1c8742f0e4e3eb0ffb3dc80a280a0e5 I'm sorry to say that this doesn't work anymore.

I'm getting

Uncaught ReferenceError: PIXI is not defined

from https://github.com/photonstorm/phaser/blob/6139071ebc918ddd8a1201279ebc7c70e645de8e/src/Phaser.js#L357

For repro you can use the Webpack boilerplate found here https://github.com/photonstorm/phaser/pull/1924

I just updated to 2.2.1 and was looking forward to new features and fixes. But with the new update I get a lot of trouble with the collision detection. An example is just the breakout-example of phaser itself. When I play it for quite some time (besides the fact that the paddle is flickering aournd some times) some of the collisions are not recognized and the ball just flies through the bricks. I have similar issues with 2 other games. It happens often, if you have hits directly followed by each other (e.g. between two lines of bricks in breakout).

Setup: Phaser 2.2.1 Tested on: Desktop Browser: Firefox (up-to-date) Cordova-Build: Nexus 5 (up-to-date)

EDIT: After turning my game into SlowMotion (to see the debug bounding boxes) it did not happen so far. BUT it did also not happen with earlier Phaser versions.

This repo is for Phaser 3 related issues only. If you've found an issue with Phaser 2 please see the Phaser CE (Community Edition) repo instead.

This should not be used for technical support. If you're struggling trying to use Phaser then post your question to the forum, Slack or Discord channels. GitHub Issues are for bugs and feature requests only.

API errors must include example code showing what happens, and why you don't believe this is the expected behavior. Issues posted without code take far longer to get resolved, if ever. Feel free to use a site such as jsBin or CodePen to demo the problem. If we can run it, and see the error, we can usually fix it.

If your Issue contains any form of hostility it will be instantly closed and you will be blocked from access to all our repos.

Be nice. We do this for free.

Hi! Let me say that I'm a real fan of Typescript, and I try to evangelize as much as I can in projects that I see that they will earn really value for this.

You have several issues related to the usage of Typescript outside the project (query). Because this does not expose a definition file for Typescript, is not easy as we as developers would like.

I understand that Typescript would add somewhat complexity to the development of the project, but is important to notice that Typescript is just JS with types, and other nice features too if you would like to use them.

You currently are using JSDocs for typing, and the development setup is being made with Webpack. Even when you are not using ES features, I think that the sole use of Webpack breaks the bottom line of complexity needed for Typescript usage.

I really think that declaring Types, and Interfaces with Typescript will help the development of the project, but will ultimately help developers using this library. This migration can happen progressively, and there is not need for breaking changes for the current code.

I'll try to write a module in Typescript, and make a PR to see what you think about it. Thanks.

Great library by the way! One glaring thing thats missing for me is unit tests. Phaser is used by thousands now and people rely on it for their apps, I think adding unit tests to the build step will give people more confidence going forward.

Do you guys have a plan for adding them? I will be happy to contribute a PR with a setup for mocha similar to what we have in the backbone.marionette project. Would you accept the PR before I spend some time on it?

I appreciate it may take some time to boost the test coverage and testing drawing the graphics on the canvas would be difficult but even basic tests that look at setting property values or ensuring events are fired would be a welcome addition.

Thoughts?

Opening a tracking ticket to watch for TypeScript definitions for Phaser 3.

(Edit: Please track this is #3224 - we're locking this issue for comments, that one is open)

This is just a heads-up for those who track issues that support for nested Containers will be removed from a forthcoming version of Phaser (not 3.12, but probably 3.13).

The ability to create and use Containers will remain, but you will no longer be able to add a Container as a child of another.

The reasons are two-fold:

1. It will improve speed as we'll no longer need to do any iteration during matrix or bounds calculations.

2. It will reduce API complexity (both internally and externally) - there are edge-cases where, for example, a deeply nested Game Object doesn't inherit the correct blend mode. Or issues like input handling needing to crawl up a container tree to find its ultimate position, all of which are adding un-needed code into the API and causing issues (both for you and me).

It's no secret that I never actually wanted Containers to be added as a feature at all. Look at the quality games made in Construct or Game Maker, for example, neither of which offer the feature. They have caused so much branching and additional work in the API that I really question their value, but at the same time, I know some devs like using them. So I won't outright nuke them (although, believe me, I've come close many times!) - but I do question their implementation. I think there is room to explore recoding the feature entirely, but in the meantime stopping the use of nested Containers will help mitigate a number of problems.

Hi,

We have a component kind of List. It basically extends Container and creates children which are also of type Containers. Each of these children contain a background image and some text objects to display data, they are aligned vertically in the parent list container. Now the issue is when we are trying to apply mask to the parent container , the text children in second level containers are not being rendered at all. Only the background image is rendered.

Further more input events seems to be working on the game objects which are masked .

https://github.com/photonstorm/phaser/blob/28e27647233cfa1fcefa4db1ccc7101a51264cac/src/tilemaps/parsers/tiled/ParseJSONTiled.js#L41

When will non-orthogonal maps be supported? Specifically for my use-case, hexagonal maps?

In 2.4.0, the button callback doesn't trigger on mouse click. With phone touch works fine (and the same code works under 2.3). Maybe related to the changes to Input.Mouse?

Code (trivial, but you never knows...):

var aButton = this.add.button(400, 300, 'aButton', function() {
            console.log('aButtonCallback');
                        //do stuffs
        }, this);

Version

• Phaser Version: v.3.55.2

• Operating system: Windows 11

• Browser: All browsers

Description

Tilemap and other entities are working with Tiled map data has incorrect type annotation for properties field.

https://github.com/photonstorm/phaser/blob/ec18bf6ac77f1ae6e36258d1105b831069984c28/src/tilemaps/Tilemap.js#L191-L198

On Tiled documentation pages the scheme of Map properties field is described as array of properties, not an object. This is correct for another Tiled entities, like layer, chunk, objects, etc.

Example Test Code

I prepared a little example with simple JSON map exported from Tiled 1.9.2. https://codesandbox.io/s/cool-surf-vbetsr?file=/scenes/HelloWorldScene.ts

In example we can see that's array's methods don't be allow for tileset.properties field.

Additional Information

I made some jsdoc types for describe Tiled custom properties and check how it generate in tsgen utility in Phaserjs repository. It generate correct TS types, but I don't so confident for edit existing Tilemap and another classes. if it is useful please feel free to use it.

I'm working on a game that needs to frequently and dynamically load a lot of assets while players are playing. Preloading most assets up front is not possible. Blobbing and URL encoding seem to be the culprits.

Blob caching in Phaser is great, but each assets blob encoding process wreaks havoc on the main thread which then causes animation stutter. Limiting the max parallel downloads can help, but ultimately blobs stack up and block the main loop.

Might be a couple approaches:

• Run Blob creation and URL.createObjectURL inside a webworker. These are heavy operations to run on the main thread
• Queue and RAF Blob creation and URL.createObjectURL to minimize their impact on the main loop.

My current workaround around feeds the loader one asset then waits for the loader to complete and repeats. It doesn't give much control over when the blob gets created and encoded so animation stutter still occurs on weak devices, but is generally better.

Version

• Phaser Version: 3.60.0-beta.17

• Operating system: macOS

• Browser: Chrome

Description

Pixel-based sprites are distorted in 3.60.0. This could be isolated to only sprites generated from "createFromAseprite". This issue does not exist in 3.55.x. Please see codepen below to example and steps to replicate.

Example Test Code

https://codesandbox.io/s/distorted-sprites-mpdted?file=/src/index.ts

Version

• Phaser Version: Phaser 3.55.2

• Operating system: Windows 111

• Browser: Chrome

Description

the render result in hexagonal mode is so different with tiled. result from Phaser result from Tiled

seems there are addition space added in both direction.

Example Tes

t Code

relative tiled tmx file, not able to attach , so just copy over

<?xml version="1.0" encoding="UTF-8"?> <map version="1.9" tiledversion="1.9.2" orientation="hexagonal" renderorder="right-down" width="14" height="14" tilewidth="52" tileheight="24" infinite="0" hexsidelength="12" staggeraxis="x" staggerindex="odd" nextlayerid="4" nextobjectid="1"> <editorsettings> <export target="anhui..tmj" format="json"/> </editorsettings> <tileset firstgid="1" name="titled" tilewidth="52" tileheight="24" tilecount="12" columns="12"> <image source="titled52.png" width="624" height="24"/> </tileset> <layer id="1" name="图块层 1" width="14" height="14"> <data encoding="csv"> 3,3,3,3,3,7,3,3,3,3,3,3,3,3, 3,3,3,3,3,7,3,3,9,9,3,3,3,3, 3,3,3,3,3,7,3,1,3,3,9,3,3,9, 3,3,3,3,3,7,7,7,7,7,9,9,9,3, 3,3,3,3,3,7,3,3,1,7,3,7,3,7, 3,1,3,3,3,3,8,3,3,1,7,1,7,3, 1,1,1,9,9,9,7,7,7,3,1,3,3,3, 1,11,11,3,9,3,9,9,7,7,3,3,3,9, 11,1,1,3,3,3,3,9,9,9,9,9,9,9, 3,3,3,3,3,9,9,9,9,9,9,9,9,3, 9,9,9,9,9,9,9,3,3,8,7,7,7,7, 9,9,9,9,9,3,3,1,3,7,3,1,1,1, 3,3,3,3,3,1,1,1,7,3,1,1,1,3, 3,3,3,3,1,3,1,3,7,1,1,3,3,3 </data> </layer> </map>

Additional Information

Version: Phaser Version: 3.55.2 Browser: Windows Chrome 107

I'm running into an interesting problem, and I think I have it narrowed down to the cause, and it's possible that it's expected behavior. I have a game that is running on our website, the game runs inside of an iframe where the contents are on a different domain than the website. We use to have document.domain set, but have recently removed it as it is getting deprecated. I noticed that some of our games weren't working correctly if you were dragging something in the game, dragged your mouse of the game area, and then released. Generally what would happen is the item wouldn't get "dropped" and would continue to follow your mouse.

It seems like the mouseup event is not firing for the game when you release outside of the game. After a bit of diving into Phaser's code, it looks like the mouseup listener for when the mouse is released outside of the game was being down by doing window.top.addEventListener('mouseup') which obviously doesn't work without document domain setting, so it falls back to just using window.addEventListener. The relevant code is found here: https://github.com/photonstorm/phaser/blob/v3.55.2/src/input/mouse/MouseManager.js#L475

I created a simple setup that results in the problem:

const contentWrapper = document.getElementById('contentWrapper');
const canvas = document.createElement('canvas');
canvas.width = 1024;
canvas.height = 768;
contentWrapper.appendChild(canvas);
canvas.addEventListener('mousedown', () => console.log('mouse down on canvas'));
window.addEventListener('mouseup', () => console.info('mouse up on window'));

class Example extends Phaser.Scene {
  create () {
    this.input.on(Phaser.Input.Events.POINTER_UP_OUTSIDE, () => console.info('phaser pointer up outside'));
    this.input.on(Phaser.Input.Events.POINTER_UP, () => console.info('phaser pointer up'));

    this.add.text(this.scale.width / 2,this.scale.height / 2, 'This is a test Phaser game', { align: 'center', color: '#ffffff', fontSize: '32px', fontFamily: 'Arial' }).setOrigin(0.5);
  }
}

/** @type {Phaser.Types.Core.GameConfig} */
const config = {
  type: Phaser.WEBGL,
  width: 1024,
  height: 768,
  parent: 'contentWrapper',
  canvas,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH
  },
  scene: Example
};

const game = new Phaser.Game(config);

I noticed if I didn't create the Phaser game (comment out the last line of code), the canvas/window listeners work - you get the "mouse up on window" if you click inside of the canvas, and then release outside of the canvas. Once the Phaser game is created, that stops working.

After a bit more digging, I found that adding the following to the config fixes the issue: input:{mouse:{preventDefaultDown:false}}. The relevant code that this is used is here: https://github.com/photonstorm/phaser/blob/v3.55.2/src/input/mouse/MouseManager.js#L391. I am assuming that what is happening is the event gets its "prevent default" called, which prevents it from correctly firing on the window. I'm not 100% sure why turning off the down prevent default fixes it for the up event, but turning off the prevent default for up doesn't fix it. I would assume the reason why the window.top version works is because that has its own mouse up event that is fired, so it wouldn't have prevent default set on it.

Again, this might be expected behavior. I'm not sure what ramifications turning off preventDefaultDown would have, so I'm hesitant to do that. In the meantime I'm going to look at other solutions but maybe someone can shed some light on why this happens the way it does, and whether there might be a solution.

An additional note: POINTER_UP_OUTSIDE works correctly on our website on Windows Firefox, but doesn't work correctly on Windows Edge. Not sure about Mac browsers, and the structure of our website on mobile is different so it "works" on mobile but the page setup is different so I don't think the issue is relevant on there.

Final note: I noticed that Phaser 2.11.0 works. After diving through that code, it doesn't seem like they prevent default on any of the events - there's a way for that to be turned on, but it looks like it is off by default.

This PR

• Fixes a bug

Describe the changes below:

When setting the topOnly property to false on the InputPlugin, the game objects receive the events in reverse render object (i.e bottom-most object receives before top-most).

This feels counterintuitive as they should be receiving them from top to bottom.

This PR aims to fix that by modifying the sortGameObjects method.