Phaser matters

Managed to get lots done the past week. Starting of with the minor things.

Added env vars. Now any debug stuff can never (or... you should never say never) end up in production builds. Also used it to automatically switch between the full script files for libraries when in development and to minified versions for production.

Cleaned up the files! Had done a lot of tests and quick code snippets here and there. Removed, wrote proper and so on for most of the files. Only have the player and star object left, but those are very much things I am testing with at the moment.

Added translation to check so that I had not broken the system in the process of taking the preact base and modifying it for phaser game development. It worked nicely!

Now Phaser matters

The first release candidate for Phaser 3.16 was recently released (up to rc3 by now). I was waiting for it as it fixed a bug with using MatterJS and Tiled. I wanted to switch from Arcade physics to Matter to get proper physics and to be able to have shapes in forms other than rectangles and circles. Getting matter working with an imported map from Tiled only needed adding one additional line:

scene.matter.world.convertTilemapLayer(layerMade);

This creates a collider for every tile and if you created a custom shape for a tile it will use that shape. For example the slopes to the right in the image below are custom shapes.

I also wanted to be able to draw custom shapes that cover several tiles. In the next shot I have removed tile collision and instead drawn larger shape objects that are used for the collision. This is very fast to do thanks to the snapping abilities of Tiled. It is also possible to combine with some tiles having their own collision. Drawing shapes works fine and rotating them in tiled is also supported. Concave shapes are not supported, or might be, but I could not get it to work perfectly and figured it was not really needed.

I also added in a Sensor check. Sensors are colliders in matter that trigger events but does not physically collide. This was accomplished by adding two types in Tiled, Collider and Sensor. If shape is Sensor it is marked as such in the code and the rest matter/phaser takes care of.

Next step was adding so that objects could use shapes from Tiled as their collider. First I added support for a single shape, then I realized it would be nice to be able to add sensors in Tiled as well. For example, making it possible to check if the player touches the ground in a safer way than relying on a single pixle colliding. Took a bit of testing back and forth, mainly because Tiled positions with bottom left, phaser with center and matter with mass center, but eventually all combinations worked out as they should. The only limit is that you can not rotate the shapes in Tiled, only rotate the object itself. Did not feel rotating shapes was a must, if I really need a rectangle at an angle.. I'll do a polygon. Here is the Tiled setup of a circle collider, rectangle sensor and two ploygons for ears, and the next image how it looks in Phaser (purple only as phaser debug draws all matter shapes purple).

I have left to setup a nice solution for filtering what collides with that. By default everything added to the matter world collides and if you want to specify otherwise you have to use filters and add objects to different filters. This is easy to setup in Phaser, but I need to decide how to do it properly, should I use properties in Tiled or should I specify it some other place? Will decide this week.

The final major thing I did last week was to finish the menu. Nothing to show, but the functionality is complete. Before I only had the layout done and then half the buttons worked and the other half did nothing. All the buttons always rendered as well. Now I have added proper functionality to all buttons and only buttons of use to the current situation will be shown. I think I got all platform specific checks in as well, meaning as soon as I get to making native builds they should work as intended, feels good to have all that ready!

Anyone interested can check out a test build here https://spelmakare.se/expanse. This is from a few days ago but I think it should work as intended. Should work in browser and if using chrome/safari you should be able to install it using the PWA button. Chrome works best for computers and android, on iOS only Safari is possible to use.