715 posts
  • Author had a File in an Envato Bundle
  • Most Wanted Bounty Winner
  • Sold between 50 000 and 100 000 dollars
  • Author had a Free File of the Month
  • Exclusive Author
  • Has been a member for 6-7 years
  • Beta Tester
+3 more
majd_abdul says

A couple of days ago I decided to try making a game in HTML5 . The plan was to make a small minigame just to see how things work, a top down shooter, player plane controlled by mouse, shoots when clicking, enemy planes approach from above, shoot at you, and can be destroyed.

I had to stop for now, due to a growing urge to throw my laptop out of the window.

Anyway, here’s what I got to so far, caution! not tested on anything but FireFox: http://jsbin.com/onogof/264/edit#javascript,html,live

Good things:

- The main code part is JS which is great since I use it in Unity too

- JSBIN is an awesome editor, allowing to see the immediate result of your coding

- There were many great tutorials to follow, thanks to much more capable HTML game developers. Here are some of the tuts I followed: http://diveintohtml5.org/ , http://michalbe.blogspot.com/2010/09/simple-game-with-html5-canvas-part-1.html , http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/

Bad things:

- The code is very lacking and requires lots of workarounds and compromises in the design aspect, just to accommodate the way coding is handled in HTML5 .

- making games with HTML5 canvas (as of 2011) is like making websites with notepad. It’s blasphemy.

- It crashes ALOT (28 times so far).

All in all it was an okay experience. At first I planned to make a complete minigame and maybe put it in the empty Games category in the HTML5 section on CodeCanyon, but just thinking about having to deal with object rotation, sound or text makes me cringe…

I’ll go back to my trusted Flash and Unity now, thank you.

4140 posts
  • Bought between 1 and 9 items
  • Brazil
  • Exclusive Author
  • Has been a member for 6-7 years
  • Referred between 1 and 9 users
  • Sold between 5 000 and 10 000 dollars
tsafi says

I don’t think your code is the problem.

You just use a dynamic background that’s equivalent to flash as you use open enter-frame event the difference flash or Unity in your case, are part engine as to html5 or even jquery which are based on function or looped math commands, for them that’s a growing problem as if you look at WP you see a growing use in CPU with all the attempts there trying to do complex effects.

With HTML 5 i saw not long ago a demonstration how they attack flowing active function in game on HTML 5 as they use lots of math configuration on the level of alchemy. To put things in perspective for you, just imagine you have in flash enter-frame event and you take the same enter-frame event and build it around math function like sin,tan,cos, atc` that will cut your CPU by 50%, thing is that’s way to complex sh* math for most .(for example if you remember Envato poor attempt using the flowing balloon background with html 5 same effect you use here )

Bottom line right now HTML 5 need a use of some 3 party platform to do complex sh* unless you are a top coder and willing to spend few months on some basic app`s . But i see HTML 5 as the Rolls-Royce of HTML template in the future but not for games

8186 posts Community Moderator
  • Attended a Community Meetup
  • Community Moderator
  • Has been a member for 6-7 years
  • United Kingdom
  • Contributed a Tutorial to a Tuts+ Site
  • Won a Competition
  • Contributed a Blog Post
  • Beta Tester
  • Bought between 50 and 99 items
+4 more
MSFX Volunteer moderator says

ha, great effort for a first go!

tried it in Chrome and the planes dont blow up but still looked good :)

How long did it take you?

Any links for useful tuts?

1161 posts
  • Author had a File in an Envato Bundle
  • Has been a member for 5-6 years
  • Sold between 50 000 and 100 000 dollars
  • Exclusive Author
  • Referred between 10 and 49 users
  • Bought between 50 and 99 items
FlashTang says

Here is what I did in past few days :D

http://dl.dropbox.com/u/29345465/other/fb/index.html

But the shame is CC do not approve “outputed” js code (I used haxe ,it’s very similar to AS3 ) :p

8186 posts Community Moderator
  • Attended a Community Meetup
  • Community Moderator
  • Has been a member for 6-7 years
  • United Kingdom
  • Contributed a Tutorial to a Tuts+ Site
  • Won a Competition
  • Contributed a Blog Post
  • Beta Tester
  • Bought between 50 and 99 items
+4 more
MSFX Volunteer moderator says
FlashTang said
Here is what I did in past few days :D
http://dl.dropbox.com/u/29345465/other/fb/index.html
But the shame is CC do not approve “outputed” js code (I used haxe ,it’s very similar to AS3 ) :p

that’s awesome :)

1999 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Author had a File in an Envato Bundle
  • Has been a member for 5-6 years
  • Author had a Free File of the Month
  • Won a Competition
  • Bought between 10 and 49 items
+4 more
bitfade says

Current canvas implementation generally sucks with the exception of iOS devices where it redefines the concept of crap.

But hardware accelerated canvas (ff and ie9 only afaik) is a whole different story and i can honestly tell it vastly outperforms flash in bitmap benchmarks (couldn’t test stage3d coz no avail on linux, thx Adobe)

Problem is, unlike flash, different browsers on the same hardware scores from 1 to 250

2160 posts
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Exclusive Author
  • Has been a member for 5-6 years
  • Sold between 10 000 and 50 000 dollars
  • Grew a moustache for the Envato Movember competition
  • Beta Tester
  • Bought between 50 and 99 items
  • Canada
Nitro_Themes says
FlashTang said
Here is what I did in past few days :D
http://dl.dropbox.com/u/29345465/other/fb/index.html
But the shame is CC do not approve “outputed” js code (I used haxe ,it’s very similar to AS3 ) :p

Dude nice job on that.

Cheers

Lester

715 posts
  • Author had a File in an Envato Bundle
  • Most Wanted Bounty Winner
  • Sold between 50 000 and 100 000 dollars
  • Author had a Free File of the Month
  • Exclusive Author
  • Has been a member for 6-7 years
  • Beta Tester
+3 more
majd_abdul says

@Tsafi: Your last paragraph says it all. For now at least, there are better solutions for in-browser games. Also it would be great if someone made a tool to help non-programmers like me make more out of what the canvas offers. Seriously, even rotation is a chore!

@MSFX: I started off with Michal’s tutorial. It’s pretty straightforward. Along the way I also used Dive Into HTML5 for reference. There’s also this neat cheat sheet

@FlashTang: That’s incredible! Just shows that a capable developer can do great with any tools.

@bitfade: From a designer point of view performance is not everything. It’s important for me to have a tool that is easy to handle, that’s why I love using Unity and Flash (This one also for vector graphics :) ).

1660 posts
  • Most Wanted Bounty Winner
  • Won a Competition
  • Exclusive Author
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Sold between 50 000 and 100 000 dollars
  • Has been a member for 5-6 years
+4 more
flashedge says

Nothing new under the sun. I just cannot understand why Adobe is wasting time behind Edge and Muse instead of giving us a damn HTML5 Compiler inside Flash.

3402 posts
  • Bought between 10 and 49 items
  • Elite Author
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 7-8 years
  • Referred between 500 and 999 users
  • Sold between 100 000 and 250 000 dollars
+1 more
bobocel says
majd_abdul said
A couple of days ago I decided to try making a game in HTML5 . The plan was to make a small minigame just to see how things work, a top down shooter, player plane controlled by mouse, shoots when clicking, enemy planes approach from above, shoot at you, and can be destroyed.

I had to stop for now, due to a growing urge to throw my laptop out of the window.

Anyway, here’s what I got to so far, caution! not tested on anything but FireFox: http://jsbin.com/onogof/264/edit#javascript,html,live

Good things:

- The main code part is JS which is great since I use it in Unity too

- JSBIN is an awesome editor, allowing to see the immediate result of your coding

- There were many great tutorials to follow, thanks to much more capable HTML game developers. Here are some of the tuts I followed: http://diveintohtml5.org/ , http://michalbe.blogspot.com/2010/09/simple-game-with-html5-canvas-part-1.html , http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/

Bad things:

- The code is very lacking and requires lots of workarounds and compromises in the design aspect, just to accommodate the way coding is handled in HTML5 .

- making games with HTML5 canvas (as of 2011) is like making websites with notepad. It’s blasphemy.

- It crashes ALOT (28 times so far).

All in all it was an okay experience. At first I planned to make a complete minigame and maybe put it in the empty Games category in the HTML5 section on CodeCanyon, but just thinking about having to deal with object rotation, sound or text makes me cringe…

I’ll go back to my trusted Flash and Unity now, thank you.

It works very well in Chrome, on Mac.

by
by
by
by
by
by