TexturePacker already does a quite good job in compressing PNGs. It contains algorithms to reduce the PNGs to 8 bit and includes pngopt to reduce the file size. TinyPNG might still reduce the size a bit more - but you usually don't gain more than 5% compared to TexturePacker only.

Please take a look at this tutorial: https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-for-phaser3
It explains how to create and use sprite sheets in Phaser 3 in a simple scene. Skip the part about sprite sheet creation.
You'll have to exchange the loader code in the preload() function to something like this because you are using the older atlas format:
this.load.atlas('grayfox, 'grayfox.png', 'grayfox.json');
It would be better to give your sprites more descriptive names instead of "0.png"... this makes the animation setup much easier.
Assuming that your frames are named
walk-0001.png
walk-0002.png
...
walk-0008.png
and so on you can use the following code to get the frames:
var walkFrames = this.anims.generateFrameNames('grayfox', {
start: 1, end: 8, zeroPad: 4,
prefix: 'walk-', suffix: '.png'
});
var walkFrames = this.anims.generateFrameNames('grayfox', {
start: 1, end: 8, zeroPad: 4,
prefix: 'jump-', suffix: '.png'
});

I've just created a short tutorial for PixiJS that explains
How to create & use sprite sheets with a few mouse clicks
Use animations from sprite sheets (much easier than enumerating all sprites manually....)
Optimize sprite sheets for smaller size and faster loading (up to 50%)
Visually edit pivot points
The full tutorial including source code is available from here: How to create sprite sheets and animations for PixiJS

Hi,
I've fixed some of the stuff including the outdated version of phaser you used.
I've also created new PhysicsEditor and TexturePacker project files.
The game seems to be fine now. The sprite collision shapes are currently displayed as convex hulls not as concave sprites - but this is a display bug as far as I know.
Best
Andreas

> However, for the second one, I've done everything like in the tutorial,
Hm.... really?
Ok... there are several things that you have to fix...
1. Using
this.load.json('shapes', 'assets/physics/physicshapes.json');
is enough to load the physics data. Adding 'assets/physics/physicshapes.json' to each image does not make sense nor work.
2. Try to give the physics shapes the same names as your sprites. Not "1" - use "ob1" instead.
3. Use a sprite sheet to speed up loading instead of loading many sprites manually. This also makes handling sprite much easier.
3. Use this to create a sprite with an attached physics shape:
this.matter.add.sprite(200, 50, 'sheet', 'crate', {shape: shapes.crate});
'crate' is the name of the sprite - in this case inside a sprite sheet
'shapes.crate' references the physics object.

Hi,
can't help you with the first issue - but for the collision issue please take a look at our tutorial here: https://www.codeandweb.com/physicseditor/tutorials/how-to-create-physics-shapes-for-phaser-3-and-matterjs
Bets
Andreas

@photonstorm Thanks! Your are right - it only works in WebGL...
We'll disable the "Rotate Sprites" feature from the exporter with the next TexturePacker update. Please let me know if you extend the canvas renderer to support rotated sprites.
I've also updated our How to create sprite sheets with Phaser 3 tutorial... this one might also help @Linzeestomp

@photonstorm - Sorry - but this does not seem to be right. I've a demo running with rotated sprites in the Phaser3 exporter - and it works without any problems... (also see your announcement here: https://phaser.io/phaser3/devlog/48 - you must have added the code at some point in time )
But I also have issues with multipack - especially with the code we've added for the new json files that contain all the Texture references. What was the intended way to load a multipack json file? Whatever I try - it always tries to use the json file name and replaces .json with .png.
I assume that this is what is happening in this case: Instead of loading scene-1.png and scene-2.png as specified in the .json file - it loads the (old) scene.png file which does not match the data anymore.

The problem is that tiles drag in neighbour pixels. In your case I'd assume that it comes from the 3 empty tiles in the top row. The transparency creates these issues. This might also happen on other tiles if they drag in coloured pixels...
The best thing to do is to surround your tiles with a 1 pixel border that repeats the tile colours.

The problem is that the sprite sheet does not have a regular layout. Some sprites are bigger, some smaller,...
Use Photoshop or Gimp and extract the single images as png files. Use TexturePacker to build a sprite sheet. This will also save you memory because it can be much smaller.
A tutorial how to use sprite sheets can be found here: https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-for-phaser3