MatterJS implementation

mattjennings / react-phaser-fiber

Create Phaser 3 games using React

48 stars 10 forks source link

MatterJS implementation #18

Closed bvkimball closed 4 years ago

bvkimball commented 4 years ago

I had implemented MatterJS in a previous version of this library for a project i was working on, that I was just getting back to. Noticed the api changed so I thought I would re-implement.

Understand if you want to keep this out for the time being until you have hardened the api but thought I would post it for reference and conversations. I can try to maintain this in the future as well as changes come up.

Few issues to note:

the demo added only works if you force phaser version to 3.19, because of this issue which is fixed but not released.
frameRate and animations don't appear to work but I am assuming that is work is still in progress.

PS. great work on this project!

mattjennings commented 4 years ago

Oh wow, I will definitely look through this over the weekend! This is exciting. I'll try and see what is up with the frameRate and animations, too.

bvkimball commented 4 years ago

Realized I didn't have the useMatterCollider hook working, I updated it to work similar to your ArcadeCollider. I updated the demo to show how it works. I think the hook can be more performant with the changes that seem to be in phaser@3.22.0 for Matter with MatterGameObject.setOnCollideWith

mattjennings commented 4 years ago

I am just finally getting to this now, hopefully I'll have it merged in this week. Overall it looks good! Thanks a lot for your work on this.

Regarding the animation/frameRate bug: it seemed to be happening from instance.setTexture being called after instance.anims.play in the applyProps. Interestingly enough, it appears phaser doesn't require the texture to be specified if there is an animation. So, omitting the texture prop fixed the issue in your example. Nevertheless, I've made a fix for that.

mattjennings commented 4 years ago

this will be in the v0.3.0 release. you can use it now by using react-phaser-fiber@next