715 posts
  • Has referred 10+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Had an item featured in an Envato Bundle
+7 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
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has sold $5,000+ on Envato Market
  • Located in Brazil
+3 more
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

8248 posts Community Moderator
  • Has referred 10+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Attended one of our Meetups around the world
+9 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
  • Has referred 10+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Had an item featured in an Envato Bundle
+4 more
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

8248 posts Community Moderator
  • Has referred 10+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Attended one of our Meetups around the world
+9 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 :)

2002 posts
  • Has referred 50+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+9 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

2197 posts
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Helped several times protecting Envato Market against copyright violations
  • Sells items exclusively on Envato Market
+4 more
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
  • Has referred 10+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Had an item featured in an Envato Bundle
+7 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 :) ).

1661 posts
  • Has referred 50+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Won a Most Wanted contest
+9 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
  • Has been part of the Envato Community for over 7 years
  • Has referred 500+ members
  • Has sold $125,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+6 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