Where to start as a beginner?

[Clms]

Hello!

I am an absolut beginner to these topics here so I hope that my newbie questions are tolerated here. I am looking forward learning a lot!

My idea was to animate objects on my website with a physics engine. Simple things like dragging objects and throwing them around.
Therefore I looked into matter.js which seemed learnable. But I never found examples with real graphics, only simple shapes.
So I started to look into this and a whole new world opened. So here I am now with my questions that I couldn't find an answer yet:

My goal is to create simple objects to interact with on my website. Like I said grabbing and throwing them around.
The next step would be a balloon attached to a rope hovering where you can push the balloon around with the mouse.

Which tools should I concentrate on to achieve results like those?
It is important for me that I can use images / textures (for example for the balloon) as well as "custom shapes" for the objects I want to throw around.
All the physic engine examples I have seen so far are based on rectangles, squares, etc. But how could I use the shape of an tree (not only the texture but also the shape which interacts with other objects)?

Maybe pixi.js with an physics engine? Or is phaser the easiest way to go? Or is there something even better?

Thanks a lot in advance!

Best,
Clms

[mattstyles]

A physics engine is usually comprised of 2 main parts in order to work: the physics engine and the rendering engine. In my view these should be separate but they are often punted together.

Two popular physics engines are matterjs and p2. Both allow bolting on any renderer you like. Last time I checked matter it seems to be having a bit of an overhaul at the moment, they certainly used to have examples with tacking pixi on but I can not find the examples now but I did see it ships its own renderer but mentions somewhere this is a debug renderer. This is a great move in my view as you can get started with the physics library immediately (I believe p2 has something similar) and tack on something optimised for performance (such as pixi) later, I'm assuming matter still supports this but might be light on examples/documentation temporarily, you could always try opening an issue on the repo (after looking through first to see if an issue is already open/ongoing).

Both matter and p2 are very feature rich and provide a really solid simulation, at a computational cost. As there is a cost associated with running lots of semi-accurate calcs to provide a rich simulation Phaser exposes 2 (maybe 3) different physics engines you can use: it uses p2 for a more realistic simulation and an arcade physics engine which is cheaper (i.e. quicker, less computationally expensive) and less accurate but a very good engine when you need less accuracy and more performance.

Maybe start by using Phaser as it joins up the dots between physics and render (as well as lots of other useful stuff) and move up to really digging in to the guts of physics and rendering libraries later.

[Nesh108]

Hello and welcome to the mad world of game development

@mattstylesanswer is great and has a lot of information, however I want to give another suggestion (perhaps too late, who knows):

If you are really a beginner, the first things to learn are the concepts behind your ideas, which then can lead you to know exactly what you want to achieve technically. Something that really helped me was working with a WYSIWYG system and working my way through the huge amount of stuff to know about. So, my suggestion would be to get Unity, download some free physics/rag doll projects or tutorials and explore.

After you are done playing around with the game, explore all the components, how they interact, their colliders, joints, etc. 

I believe that after having checked a bunch of projects (from simple to a bit more complex), you will know exactly the terminology to use (extremely important) and more or less the result you want to achieve