Porting from Adobe Edge Animate – Where to begin?

[MemeMaker]

I made a fun "political click adventure"  (Hint: You never escape to Canada.) for the 2016 election with my wife (She did most of it, I did the sounds, some code, and QA) in Adobe Edge Animate, but unfortunately Adobe deprecated the project. If you aren't familiar, Adobe Edge Animate was basically flash for HTML5 mixed with symbols and JS based code.

The problems were rife with this project, but the concept was gold. It made affiliate revenue from the products advertised. The problem was that it absolutely sucked on mobile. iOS had at the time a 10,000px sprite width limit, and most mobile browsers loaded a maximum of 10 sound sprites. Even some desktop browsers now don't render the timed sounds correctly (the Sarah Palin sprite seems to never have correctly timed sound). I never solved these issues. The other main issue was fractional pixels rendered differently in different browsers and sprites being jittery. I forget how I solved it, but it was annoying.

 

I am exploring the possibilities now of click adventures with cryptocurrency, and would love to be able to get something close to this. I just don't know what design pattern I need for such a large animation. There is a lot going on in it.

My questions are: Where do I begin in porting this to GSAP? Does anyone here have a similar project to share? Is anyone here a refugee from Adobe Edge Animate?

 

 

[Dipscom]

Although I have no experience doing that myself, the starting point would be getting yourself a game engine and get familiar with it. Phaser is well known and widely used. Get started with that, build smaller versions of what you want to achiever, sections of your bigger project. Then, start putting those different pieces together.

 

Somewhere along that line, sprinkle some GSAP magice and you'll be golden!

[MemeMaker]

Never heard of Phaser, thank you. I really like that they have tons of code examples to explore. Now if only WebKit would die with Flash I could live a very happy life.

 

Edit: This is pretty close just from the examples: https://phaser.io/examples/v2/audio/audio-sprite