Jump to content
Search Community

Can we create a basic retro game using GSAP?

WarenGonzaga test
Moderator Tag

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

Hello, I would like to know if we can create a retro game using GSAP? Is it really possible for beginners to create their own basic game using GSAP? Even without physics in the game just to control the character only. Or even control a snake in the snake game. Anyone tried to create a game using GSAP? Can you please share it?

  • Like 1
Link to comment
Share on other sites

Hi warren, nice to see you again.

 

Yes, GSAP can handle animation in a game, but there is a lot more to making a game than just making things move.

 

For character movement TweenLite may not be the best choice as a tween has fixed duration and destination.

For instance if pressing the right arrow key creates a tween that moves something 100px to the right of its current location for 1 second, what if the user wants to move 300px? will the user need to press 3 times or will you have to program some awkward logic that repeatedly checks if a new motion tween should be created once the first tween ends.  What if while the character is moving to the right the user hits the down arrow? Will you need to write code that kills the tween that is moving to the right?

 

Character movement is usually handled by making small increments to x/y values while a particular key is down. 

 

If you want to move enemy ships around or fire bullets, tweens would be great.

 

My suggestion is to start small with very very low expectations. Get something small working and then try to figure out how to add more features.

95% of building your game will be writing code un-related to animation: collision detection, scoring, generating enemies, generating missiles, programming input controls, etc.

 

I would suggest going to some sites that focus on general HTML5 Game Development and learn the basics without using GSAP at all. Add GSAP only where it makes sense or makes things easier.

 

 

  • Like 2
Link to comment
Share on other sites

I've made a few games using GSAP:

Nevergrind - Single-Player RPG

Firmament Wars - Realtime Multiplayer Strategy Game

I have no regrets using GSAP. It's my favorite tool and as far as I'm concerned it hasn't limited me in any way and I feel very productive with it. I plan to make a 3rd game, a multiplayer co-operative rogue-like follow-up to Nevergrind. Developing games with GSAP is a pure joy. If needed you can even pause the game, as long as you don't use setTimeout or setInterval. As long as every timer and animation is created using GSAP (TweenMax, TimelineMax, TweenMax.delayedCall), you can just do TweenMax.pauseAll() to pause the game (this can be done in Nevergrind by hitting ESC).

 

Since GSAP can tween any object value using any ease, it's simple to Tween using the set method, onUpdate, over time, or whatever kind of animating you need to do. Hope that helps. Discovering GSAP was like finding the holy grail for me because I was seriously using JQuery's .animate before that.

  • Like 7
  • Thanks 3
Link to comment
Share on other sites

2 hours ago, Maelfyn said:

I've made a few games using GSAP:

Nevergrind - Single-Player RPG

Firmament Wars - Realtime Multiplayer Strategy Game

I have no regrets using GSAP. It's my favorite tool and as far as I'm concerned it hasn't limited me in any way and I feel very productive with it. I plan to make a 3rd game, a multiplayer co-operative rogue-like follow-up to Nevergrind. Developing games with GSAP is a pure joy. If needed you can even pause the game, as long as you don't use setTimeout or setInterval. As long as every timer and animation is created using GSAP (TweenMax, TimelineMax, TweenMax.delayedCall), you can just do TweenMax.pauseAll() to pause the game (this can be done in Nevergrind by hitting ESC).

 

Since GSAP can tween any object value using any ease, it's simple to Tween using the set method, onUpdate, over time, or whatever kind of animating you need to do. Hope that helps. Discovering GSAP was like finding the holy grail for me because I was seriously using JQuery's .animate before that.

 

Alright! Very nice game you have developed with GSAP. I know the feeling creating game using GSAP. Here's my basic usage of GSAP with my little tank.

See the Pen dMpjMy by Waren_Gonzaga (@Waren_Gonzaga) on CodePen

 

Link to comment
Share on other sites

Thanks, Warren. Note that when I developed those games, I was new to web development. I was not even a professional web developer, so someone with more experience should be able to make something much more polished. Those games were developed with a 4-digit budget.

Link to comment
Share on other sites

On 11/14/2017 at 8:21 AM, Carl said:

I would suggest going to some sites that focus on general HTML5 Game Development and learn the basics without using GSAP at all. Add GSAP only where it makes sense or makes things easier.

 

My thoughts exactly. If I were making a retro game, there's very little chance I would even use GSAP. Most animations are probably going to be physics based, which work in a much different way than a tween.

 

A good forum for games is HTML5 Game Devs.

http://www.html5gamedevs.com/

 

And a good game engine, with a lot of community resources is Phaser.io.

http://phaser.io/

 

 

  • Like 3
Link to comment
Share on other sites

  • 3 years later...

Thanks everyone involved for the helpful discussion and suggestion. I was wondering why I didn't see many web games using GSAP. Now that makes sense.

 

I guess building games is the dev equivalent of data visualization. You don't know how complex it can be until you get into it. Before I started, I could only think of animation. Then I discovered that there are important concepts to explore such as collision detection, input control, enemies etc. My mind was blown. Mad respect for game devs, especially indie ones.

  • Like 2
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.
×
×
  • Create New...