I’m working on a pinball-type game using Phaser 3 and Matter.js physics. I’ve got a working prototype, see jsfiddle link below: https://jsfiddle.net/xsh0e6v8/
there’s something wrong with the graphics off-set, probably due to the flipper2.setOrigin(1.0, 0.0) part
bumping the flippers doesn’t seem to hit the ball very well somehow, idk it doesn’t feel right
Also I found an pinball code example which also uses matter.js, but it seems to use a lot of ‘hacks’ and invisible parts which I have to take a look at. Even with the hacks it still doesn’t move very realistically imho, the ball seems to stick to the walls.
See link below, move flippers with keyboard cursors left right
I will be honest that I don’t really know Matter.js that well. But I do have experience to know that stuff like this often ends up being VERY fiddly, where you are trying to simulate a real-world control element such as a pinball flipper through tweens, physics systems etc.
My suggestion in cases like that is to make a small tool that allows you to iterate blazing fast. For this, I would make a Phaser “game” that just has the flipper in the middle. Set it so that when you click the mouse on the flipper sprite, you set the origin to that point (be sure to have an output so you can grab these origin values when you get it perfect). Then have some HTML input form elements off to the side that allow you to dynamically change a lot of other values, such as tween speed, rotation amount, and anything else. This way you can start tweaking with instant feedback.
Once you have this setup, you can expand it and add the ball. Add more tweaking inputs and start working to get the ball motion perfect. You can keep iterating on this tool until the core of your game exists in it and is tuned perfectly. Then you can either convert the tool into the game itself and add content or you can lift these core elements out and back into your existing game project.
Pinball is deceptively difficult because it has to feel right. And this is essentially my process (and a lot of other people’s) when something simply doesn’t feel right.
Okay, sorry, playing it again, I think you are really close. The only thing that felt a bit off to me is the ball movement. I would actually suggest a variation of the process I outlined above. Since your game is so close I would not create a separate tool. I would add the form inputs to this game so you can dynamically alter things like gravity, acceleration and any other value you can possibly make dynamic.
I really think you are just a bit of tweaking away from having it working perfectly.
EDIT: In real-life I am a big pinball fan and play often. To me, this is very close to “the feel”. It just needs value tweaking.
Thanks for the tip, from previous game projects I also know that quick iteration is very important and useful, especially early on. That’s why I made this simple prototype to try out some things.
The codepen example is not mine btw (also, it’s not using Phaser) so do you mean my jsfiddle? idk I will try some different shape or larger flippers, and change faster/slower tweens.
I have a question about Matter.js and Phaser; does a tween-animation affect the physics of an object? So does a tween animation really influence the speed and impact etc?
Oh, sorry, I got all messed-up here then. Okay, I checked out the jsFiddle. It seems that the paddles aren’t causing enough of an impact with the ball to lift it up. Unfortunately, as mentioned I don’t really know Matter.js physics engine. However, as far as the tweening question goes, keep in mind that tweens can be used on many things. Probably the speed of position change or rotation of the paddle would have no effect on the ball. Rather, at the moment the ball hits the paddle, it is likely calculating the impact with something that resembles real physics: the weight, current acceleration (including gravity) and velocity of the ball versus the the weight, acceleration and velocity of the paddle causes the ball to react in a certain way. Those types of attributes can likely be tweened and would have an effect on the impact. Maybe the paddle acceleration needs to be tweaked. I don’t know if Matter.js has a weight on the ball (some physics systems do and some don’t), but maybe its weight needs to be lowered.
Sorry I don’t really have a better answer. Hopefully one of the Matter experts can come in here and offer some more concrete answers.
For anyone else trying to build a pinball game with Phaser 3. I was working on the flipper problem a couple of months ago. The results of my tinkering became https://calabi.itch.io/1-bit-pinball-demo. The solution was to use the matter attractors plugin to ‘pull’ the flippers, rather than applying forces to the flippers themselves.
Create a flipper - a chamfered matter rectangle with a constraint for the pivot.
Add a matter circle to the scene and constrain it to near the tip of the flipper.
Add another, larger matter circle, make it static and position it into the distance from the tip of the flipper.
Use matter attractors to attract the two circles. You can reposition the larger circle based on key presses to ‘pull’ the flipper. The closer the larger circle is to the tip of the flipper the more springy the flipper will be, so push it far away for a snappy feel.
