Transfer from as3 to Js

[Shedvel]

Hi,

as as3 developer i am having hard time adjusting to whole javascript (canvas) game development process.

I wrote a few test games using plain Vanilla JS, and few using frameworks (EaselJS, Crafty...), but it all seem somehow ....dirty coded, in terms of code structure, solutions for everyday stuff, like game UI, gameLoop, etc. whihch in js seem to me like overkill for such simple stuff, in comparison to native approach i had as option using as3 and flash for graphics.

Also there are no complete examples of best practices for some of usual game dev concepts,sSheet animations, game state machine, etc. So i spend way too much time wondering around frameworks.

Tl;DR; i have a few questions :

1) Do you use frameworks, and which, or you recommend plain javascript for development.

2) Where can i find some example of best practices, of ie. state machine, ssheet animation, resource preloading (i user PreloadJS, and some self cooked solution)...etc.

3) As habit from flash i would like to skip using DOM for UI elements for games, so what you use and how, cose coordinate based canvas hit testing for Ui seem to use a lot of resources.

4) Which IDE you use, i miss FlashDevelop lightfast workflow and non bloatness in light of WebStorm i currently use.

thanks in advance and sorry for bad English, havent used it for a while.

[IvanK]

Hello, welcome to plugin-independent browser games development!

 

I am making AS3 games for 6 years and JS for 2 years. Here are my answers:

 

1) I entered JS games development by trying to convert my AS3 games to JS, without editing the code too much. There was no library with same API, so I had to write my own - IvanK.js . I also wrote my Tweener - http://tweener.ivank.net . 

 

2) Personally, I hate any best practices instructions. You must find your own way of doing things. For me, it is totally the same as making Flash games. Make sure you know basic JS features (prototypes, constructors) and tools! (XmlHttpRequest, Audio, JSON, ...). 

 

3) As I said, I use IvanK.js for graphics, user input, events etc. There is display object tree, each container (Sprite) has its own coordinate system. There is hitTestPoint, hitTestObject and many other flash functions.

 

4) I don't use any IDEs, I use Notepad++. When I change something, I switch to browser and press F5 to see the changes. I use JS console a lot (console.log = trace, in Chrome you can "unfold" traced objects). The nice thing is, that development goes faster, than developing with Adobe Flash.

[PixelPicoSean]

1) Also comes from as3 world. I am porting my game from flixel/as3 to impactjs now. For game engine I'll recommend ImpactJS since it looks familiar to flixel/flashpunk (well it's a commercial engine and that's why I'm going to switch to Joy.js later )

4) I use SublimeText 2 with some plugins, it's very fast and lightweight. 

[rich]

I use Visual Studio and TypeScript for everything I make now (before that Sublime + plain vanilla JS). It gives you something very very similar to AS3, with the same level of code completion, compiler errors, debugging, stack tracing, breakpoints, etc but compiles to perfectly clean and nicely readable JavaScript at the end, not some weird-ass munged-up thing like CoffeeScript or Dart.

 

You still have to do a lot of the 'grunt' work yourself though, i.e. State machine, tweening, etc. But then you had to in Flash too really if you think about it. Beyond display and event stuff you had to build your own state handler, your own AI, game loop, etc. There were lots of examples to borrow of course but still nothing 'native' as such, so it's not vastly different really.