Making the jump to HTML5

[Biggerplay]

I've been a Flash/AS3 dev for many years. I've worked on numerous advergames, created many of my own Flash games and sold many games on FGL. My site is the same as my username on here.

 

Recently I've heard murmurings from different directions that there's less and less money being made with Flash games, reciprocally I've heard that JS games are making more and more money. My current main job is a big iOS strategy game I'm working on but I thought perhaps now is the time to really get serious about HTML5 and put some time aside to make some games.

 

So the questions in this post is mostly about me trying to get myself up to speed as quickly as possible as I'm a bit late to the party. I've looked on these forums already but haven't quite found the answers I'm looking for.

 

Questions…

 

1. I'm completely new to JS, but it doesn't look that far off AS3, are there any main gotchas that I should be aware of using JS rather than AS3? I think I've heard it somewhere that JS is a bit like AS1/2 ?
   
2. Do I need to use a local web server? (I’m on Mac) I know there seems to be a web cloud option but what are the differences (advantages/disadvantages) in developing with the cloud as apposed to a local web server? I’m all for things being as easy as possible, so if that’s the cloud approach cool, but equally I don’t want to put myself in a situation where I’m constrained in any way by using the cloud option, hence the question ☺
   
3. The cloud9 approach has the IDE built in? So I do or don’t need a separate editor in that case? If I went the local web server way though, I also do have the complete Adobe suite of tools, if that’s of any use to me ?
   
4. Does anyone here use Cloud9, and have created games with cloud 9?
   
5. One thing does concern me and that’s Apples view of HTML5 games, which for obvious reasons if they were to take off would have an impact on the App store. Part of the reason I want to develop HTML5 games is so I can create a game that runs on web and iOS devices. I know this is a very crystal ball like question, but is there any danger that Apple would just stop HTML5 games running on their devices somehow?
   
6. What HTML5 game making SDK will give me the most Flash/AS3 like experience? That seems like Phaser so that's the one I'm going for, but why would I use Phaser as opposed to say using GameMaker? what's the main advantage of using a lower level library as compared to something like GameMaker or Impact.js?
   
7. I looked at run pixie run the other day on my iPhone 4S and was really impressed how smooth it ran, pretty much an exact similar experience to running a native game of that type. Why would/should I use Phaser to develop a game rather than straight pixi.js ? I suspect the answer will be libraries that make my life easier such as preloading etc and I'm all for that but are any other not so obvious advantages/disadvantages to using Phaser over Pixi?
   

Thanks for any advice.

[relaxx]

>> What HTML5 game making SDK will give me the most Flash/AS3 like experience

 

Try Haxe. Of course, with Flambe or any other HTML5-friendly haxe-framework.

[rich]

1) I don't think JS itself will give you any real headaches coming in from AS. What is likely to give you headaches is understanding the platform itself and making sure you code to that, by platform I mean the browser - something you never had to worry about with Flash. Most issues you'll hit will be browser / performance specific and almost certainly unrelated to JavaScript as a language.

 

2/3/4) Use a local web server, it's painlessly easy to set-up on OS X. Cloud is just too slow for real time development imho.

 

5) Sure, technically they could - all they would have to do is disable a few key APIs like canvas and web audio and games would be next to dead on iOS. As they were the ones who pretty much pioneered adding them though, this isn't something I'd be overly concerned about. There are a couple of important things to bear in mind: for all the billions app store revenue generates for Apple, it's still less than 6% of their overall annual income. I'm not saying that's an income stream they want to lose, I'm just saying it's not quite the behemoth lots of people mistake it to be. Most importantly though, iOS is rapidly declining against Android where html5 is becoming more and more of a first class citizen with every release. Even so, code for the situation as it stands today, not some paranoid 'potential' future.

 

6) haXe is probably the most Flash like of all, just be super careful re: mobile performance. Game Maker is nothing like Flash, although there are quite a lot of devs here who use it. Personally I think coming from your position of being an experienced AS dev you'll get frustrated with Game Maker quickly. It also won't teach you anything about actually making html5 games. I think you'll get on better with an open source framework, something you can peek into internally and start to figure out for yourself. Steeping learning curve up front, yes, but ultimately more valuable imho.

 

7) Could I suggest you have a look at my slides from a talk I gave at the Montreal International Games Summit last November? You can download a PDF here: http://gametest.mobi/slides/migs2013.pdf

 

Specifically look at pages 24 on, the section titled "Why do I need a framework? I prefer to roll my own". It's sort of related to your question. In it I split out what you need to make an html5 game. I focus on just one Platform requirement (Loader), and dive into that (page 27), page 28 gives some examples of other factors you need to consider and page 30 sums up all the things you're likely to need in order to just start coding your game. Pixi.js is fantastic, I would never have built Phaser on it if it wasn't, but they are focused on being the best possible html5 renderer available, and a renderer is only part of the package needed.

[Chris]

For the webserver, you could try out our Warp project.

[Biggerplay]

1) I don't think JS itself will give you any real headaches coming in from AS. What is likely to give you headaches is understanding the platform itself and making sure you code to that, by platform I mean the browser - something you never had to worry about with Flash. Most issues you'll hit will be browser / performance specific and almost certainly unrelated to JavaScript as a language.

 

2/3/4) Use a local web server, it's painlessly easy to set-up on OS X. Cloud is just too slow for real time development imho.

 

5) Sure, technically they could - all they would have to do is disable a few key APIs like canvas and web audio and games would be next to dead on iOS. As they were the ones who pretty much pioneered adding them though, this isn't something I'd be overly concerned about. There are a couple of important things to bear in mind: for all the billions app store revenue generates for Apple, it's still less than 6% of their overall annual income. I'm not saying that's an income stream they want to lose, I'm just saying it's not quite the behemoth lots of people mistake it to be. Most importantly though, iOS is rapidly declining against Android where html5 is becoming more and more of a first class citizen with every release. Even so, code for the situation as it stands today, not some paranoid 'potential' future.

 

6) haXe is probably the most Flash like of all, just be super careful re: mobile performance. Game Maker is nothing like Flash, although there are quite a lot of devs here who use it. Personally I think coming from your position of being an experienced AS dev you'll get frustrated with Game Maker quickly. It also won't teach you anything about actually making html5 games. I think you'll get on better with an open source framework, something you can peek into internally and start to figure out for yourself. Steeping learning curve up front, yes, but ultimately more valuable imho.

 

7) Could I suggest you have a look at my slides from a talk I gave at the Montreal International Games Summit last November? You can download a PDF here: http://gametest.mobi/slides/migs2013.pdf

 

Specifically look at pages 24 on, the section titled "Why do I need a framework? I prefer to roll my own". It's sort of related to your question. In it I split out what you need to make an html5 game. I focus on just one Platform requirement (Loader), and dive into that (page 27), page 28 gives some examples of other factors you need to consider and page 30 sums up all the things you're likely to need in order to just start coding your game. Pixi.js is fantastic, I would never have built Phaser on it if it wasn't, but they are focused on being the best possible html5 renderer available, and a renderer is only part of the package needed.

 

Thanks for all the advice. The .pdf is especially useful. I think I'll have a go with Phaser it seems to have the right balance for someone coming from Flash/AS3 development.

[d13]

If you code with Brackets, it will launch a web server for you automatically when you preview:

 

http://brackets.io

[alex_h]

Hi Biggerplay, I'm sure I recognise that username from the Sparrow-framework forums

Good to see you here in HTML5 land too!

As somebody who also came over to javascript from AS3 I found this book helpful:

http://jsninja.com/

it was co-authored by John Resig of jquery fame, and I found it really helpful for getting my head round the way closures and prototypes work in js and things like that. The big challenge for me was getting out of the mindset of always depending on inheritance for everything when js provides alternatives that are actually often better solutions to many problems, such as mixins, etc.

Good luck getting stuck in to javascript!

[triqui]

biggerplay I am in your same situation, if you don't want to use a framework or code your game from scratch, I would suggest you Scirra's Construct2 or Stencyl.

I personally did not like GM

[Biggerplay]

biggerplay I am in your same situation, if you don't want to use a framework or code your game from scratch, I would suggest you Scirra's Construct2 or Stencyl.

I personally did not like GM

 

I'm going to have a go with Phaser, the examples look pretty straightforward, and so does JS to a certain extent, pretty much like AS1/2 it's all the fluff around the outside, HTML/CSS that I'm a tad unsure of but I'll see how it goes.

[alex_h]

I've found I only had to set up an html and css template with a canvas in it once and could then pretty much forget about it. From that point on I was totally focussed on the display objects within my canvas game environment. I also tend to feel a bit lost when it comes to DOM and CSS, there is just so much weird syntax to remember - I'd need to do it much more often if I was to get comfortable with it.

[Tumetsu]

For me the confusing part in web development in general is the myriad of tools and their relationships. However, it looks like that when using Phaser and developing only canvas games, one probably doesn't need to wade too deep into web-development. Or at least that's how it looks like to me, but I'm novice with js/html5.

[keybol]

This is a nice thread, I am new to HTML5 too but not in mobile. Cheers!

[Techdojo]

As a newbie to the HTML5 scene (and an old-skool GM user - back before the studio days) I'm also finding this a useful thread.  Thanks Rich for the clear unbiased advice (and I'd also like to 2nd the thanks for the PDF slides, lot's of really useful info in there!).

 

Regards

 

Jon...

[SimNerd]

If you go with HTML5, you'll still need to find a way to get it running on mobile devices. I just did a project with the Intel XDK, and it is very nice. It's an integrated editor/debugger/preview-different-resolutions/spit-out-to-multiple-platforms thing that is under active development and could give me a 1.5 MB mobile app file with no muss or fuss. It compiles standard HTML5 (interpreted, naturally), so you avoid vendor lock-in. And Intel's not trying to make a buck off it (directly anyway), which never hurts.

 

And, yeah, Phaser is fantastic.

 

Haxe also looks interesting, but I haven't tried it yet.

[adgard]

For flash developers haxe is greate choice, probably.

 For example flamber has a great step by step tutorial.