Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Building a game with "physics"

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys,


I'm about to make a game with at catapult/rubberband, somewhat like Angry Birds, but only vertical and not horizontal.

You need to hit flying objects that "rains" down.


I'm in the research phase right now, and I am thinking about using GSAP with it's Physics 2d, instead of going all out physics and using something like Matter.js.


Do any of you have experience in using GSAP for games with Physics?


I still haven't decided if I want to use DOM notes or Canvas.

Link to comment
Share on other sites

For basic physics, I'd say it's a great choice but if you want to to more full-featured physics with reflection/bounce, hit detection, mass, etc., that's not really what Physics2DPlugin was built for (mostly because that type of stuff doesn't really belong in a linear tweening engine where durations are essential). I've heard good things about Box2D. 


As for DOM vs Canvas, it really depends on the type of gameplay/visuals you want. If it's super rich with tons of stuff flying around, I'd strongly recommend going with Canvas and maybe a library like PixiJS for maximum performance (and of course you can use GSAP with that). If it's more simplistic or text-heavy, DOM might be perfectly suitable. 


Good luck, and happy tweening!

  • Like 4
Link to comment
Share on other sites

The Physics2D plugin would be fine for something like an explosion. For projectiles and other stuff that will need to respond to collisions, it's probably better update your objects on each frame. That's not say you can't do both on the same object. Here's a demo using Pixi. The scaling, rotation, and alpha is done using tweens, while the positioning is done manually.

See the Pen vNwRdO?editors=0010 by osublake (@osublake) on CodePen


It's much easier making a game using the DOM, but it's performance is going to be limited by the number of elements you're moving around on the screen. Canvas doesn't have this limitation. Like Jack mentioned, Pixi is king when it comes to performance. It was designed with 2D games in mind, and powers several popular game engines like Phaser.io and Panda.js.

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

Hi guys,


Thanks for the replies


I ended using Phaser.io as you recommended. What an amazing project.


Thank you for your time.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.