7 ms·

HTML5 Game Engine

167 points by sandaru1 17y ago

olalonde 17y ago
Amazing... a few years ago I would have swore this was Flash.
panschk 17y ago
Unfortunatly, it does not play well with a german keyboard. Z, X, C keys are used as buttons, but on a german keyboard Z und Y are switched.
- deleted 17y ago
  [deleted]
- barrkel 17y ago
  I can assure you, it works much worse with a Dvorak layout.
  - deleted 17y ago
    [deleted]
  - billybob 17y ago
    This should be easy to fix with a 'configure my controller' option. They could let you choose which keys do what for their game, and maybe show the most common configurations as options before you make your own.
    - chipsy 17y ago
      If you take the Flash market as an example, any sort of configuration seems to be too much effort for most developers to undertake. (Although I happen to be building a Flash engine that would simplify adding configuration options.)
      - gb 17y ago
        That's just laziness or lack of foresight on the part of the developers, adding customisable keys should be trivial.
- deleted 17y ago
  [deleted]
justliving 17y ago
very nice work!
deleted 17y ago
[deleted]
ZeroGravitas 17y ago
Between this and the Apple iAd demo in HTML5, which notably demo'd pressing the screen and getting an 'inline' audio response instead of throwing you into a media player, a basic feature of most simple games currently missing from Mobile Safari, I think this is just about to get interesting.
chime 17y ago
I'm so psyched by the idea of games in HTML/JS. I've made a few games in Canvas myself using Processing.js: http://games.zetabee.com/ http://games.zetabee.com/ but frankly I'm amazed at the Akihabara games. I realized Processing.js was cool but I don't think it lends to raw speed as well as these games. I think I'll be making a lot more games in JS in the near future. Thanks for this link sandaru1. Edit: Having looked into the source code... wow! For the "capman" game, he's creating the game map using ascii art and his "help.js" library has a function just for that: asciiArtToMap. This takes me back to the early 90s when making games meant you had to bitblt sprites and worry about every byte in the RAM. His library is great if you want to make sprite-based 2D scroller-type games but I don't know if it is easier to roll your own mini-library or use his for other types of games (e.g. puzzles). However, the source code itself is very extensive and I can certainly see the gamebox.font library being very useful for JS games.
- WilliamLP 17y ago
  Doing anything in JS and Canvas seems exactly like programming in the early 90s. I think Commander Keen on a 386 may have had more performance headroom than this! This is what is supposed to save us from proprietary tools like iPhone and Flash? I really don't get it.
  - chime 17y ago
    Programming in the early 90s felt like the Wild-West - anyone could strike gold, anyone could make pickaxes, and anyone could build a town around a set of rail-tracks. Almost all of the large game companies today started as small programming teams in the 90s. I don't know what could be more exciting for startup. The fact that feature-rich tools, IDEs and libraries don't exist for JS/Canvas games is EXACTLY why I love it. There is so much opportunity here for those who love to build and innovate. If you don't believe that JS/Canvas has a future, I can't change your mind. But if you think that there is a future for browser-based games running JS, then this a very exciting field to jump into. Before prototype, mootools, and jQuery etc., JavaScript frankly sucked. It was alerts, statusbar texts, and title bar changes. I see Canvas being in that category right now. There is a lot that needs to be done before you will see a thousand "Top 10 tricks to speed up your Canvas game" posts but that's exactly where the most exciting part lies.
gopher 17y ago
I've seen the future.
adamhowell 17y ago
Was excited about trying a demo on my iPhone, but seems the demos are all keyboard only. A mobile demo would go a long way since that's a reasonably big use case.
- allenp 17y ago
  This is supposed to be a mobile version: http://www.kesiev.com/akihabara/demo/game-tlol.html?touch=yes http://www.kesiev.com/akihabara/demo/game-tlol.html?touch=ye... I couldn't get it to work on the desktop but the controls are there for touch screen.
  - adamhowell 17y ago
    Ah, thanks for that. Impressively smooth.
stcredzero 17y ago
The games don't seem to register my keypresses in Chrome on my MacBook running Snow Leopard.
- McP 17y ago
  I thought that too until I saw the tiny text informing me that "A" actually means "Z"
  - stcredzero 17y ago
    That worked. I didn't ever see the tiny text, though.
- jcl 17y ago
  Did you try the "forced" versions linked at the bottom? Maybe it's detecting your browser as a mobile one.
rfer 17y ago
This is so awesome! It certainly is a step towards the future of online games. No more flash, no more CPU at 100%!!
- newobj 17y ago
  Right, because every browser is going to perfectly implement HTML5 without any bugs!
- wmf 17y ago
  JS canvas code can just as easily peg your CPU at 100%.
BSousa 17y ago
So 320x240 is the future? I'm all for HTML5 and all, but this honestly doesn't impress me.
- flatline 17y ago
  Well, it ran great on my iPhone.
  - teamonkey 17y ago
    Slow but still playable on my 3G. It's probably not too shabby on the 3GS. I really hope Apple have put some work into Mobile Safari's JS engine in 4.0. HW accelerated canvas rendering would be nice too.
    - WiseWeasel 17y ago
      Yep, totally smooth on the 3GS. Blows the hell out of those crappy Java games I played on the phone I had before my iPhone...
- raimondious 17y ago
  This is exciting because people are beginning to build cool libraries around HTML5, not because of the details of the games themselves.
digispaghetti 17y ago
Looks nice - certainly runs fast in Firefox, but couldn't get it to work in Android - however looks like a good start.
elblanco 17y ago
Now how do we all get sound working in HTML5 games?
- phoboslab 17y ago
  With the new <audio> Tag. A few weeks ago, I "converted" an old flash animation of mine to HTML5 <canvas> and <audio>: http://www.phoboslab.org/files/venetianization/ http://www.phoboslab.org/files/venetianization/
  - windsurfer 17y ago
    Oh dear. I closed the tab and Firefox kept playing the music.
  - elblanco 17y ago
    Will this work well enough for use in an interactive game?
mclin 17y ago
So this is using Canvas? I wonder for 2D graphics, especially for sprites you don't just use CSS, have all the blting and event handling done for you.
kingmike 17y ago
wow great work. HTML5 games are definitely going to be big

167 points by sandaru1 17y ago

Amazing... a few years ago I would have swore this was Flash.

Unfortunatly, it does not play well with a german keyboard. Z, X, C keys are used as buttons, but on a german keyboard Z und Y are switched.

deleted 17y ago
[deleted]
barrkel 17y ago
I can assure you, it works much worse with a Dvorak layout.
- deleted 17y ago
  [deleted]
- billybob 17y ago
  This should be easy to fix with a 'configure my controller' option. They could let you choose which keys do what for their game, and maybe show the most common configurations as options before you make your own.
  - chipsy 17y ago
    If you take the Flash market as an example, any sort of configuration seems to be too much effort for most developers to undertake. (Although I happen to be building a Flash engine that would simplify adding configuration options.)
    - gb 17y ago
      That's just laziness or lack of foresight on the part of the developers, adding customisable keys should be trivial.
deleted 17y ago
[deleted]

justliving 17y ago

very nice work!

deleted 17y ago

[deleted]

ZeroGravitas 17y ago

Between this and the Apple iAd demo in HTML5, which notably demo'd pressing the screen and getting an 'inline' audio response instead of throwing you into a media player, a basic feature of most simple games currently missing from Mobile Safari, I think this is just about to get interesting.

chime 17y ago

I'm so psyched by the idea of games in HTML/JS. I've made a few games in Canvas myself using Processing.js: http://games.zetabee.com/ http://games.zetabee.com/ but frankly I'm amazed at the Akihabara games. I realized Processing.js was cool but I don't think it lends to raw speed as well as these games. I think I'll be making a lot more games in JS in the near future. Thanks for this link sandaru1. Edit: Having looked into the source code... wow! For the "capman" game, he's creating the game map using ascii art and his "help.js" library has a function just for that: asciiArtToMap. This takes me back to the early 90s when making games meant you had to bitblt sprites and worry about every byte in the RAM. His library is great if you want to make sprite-based 2D scroller-type games but I don't know if it is easier to roll your own mini-library or use his for other types of games (e.g. puzzles). However, the source code itself is very extensive and I can certainly see the gamebox.font library being very useful for JS games.

WilliamLP 17y ago
Doing anything in JS and Canvas seems exactly like programming in the early 90s. I think Commander Keen on a 386 may have had more performance headroom than this! This is what is supposed to save us from proprietary tools like iPhone and Flash? I really don't get it.
- chime 17y ago
  Programming in the early 90s felt like the Wild-West - anyone could strike gold, anyone could make pickaxes, and anyone could build a town around a set of rail-tracks. Almost all of the large game companies today started as small programming teams in the 90s. I don't know what could be more exciting for startup. The fact that feature-rich tools, IDEs and libraries don't exist for JS/Canvas games is EXACTLY why I love it. There is so much opportunity here for those who love to build and innovate. If you don't believe that JS/Canvas has a future, I can't change your mind. But if you think that there is a future for browser-based games running JS, then this a very exciting field to jump into. Before prototype, mootools, and jQuery etc., JavaScript frankly sucked. It was alerts, statusbar texts, and title bar changes. I see Canvas being in that category right now. There is a lot that needs to be done before you will see a thousand "Top 10 tricks to speed up your Canvas game" posts but that's exactly where the most exciting part lies.

gopher 17y ago

I've seen the future.

adamhowell 17y ago

Was excited about trying a demo on my iPhone, but seems the demos are all keyboard only. A mobile demo would go a long way since that's a reasonably big use case.

allenp 17y ago
This is supposed to be a mobile version: http://www.kesiev.com/akihabara/demo/game-tlol.html?touch=yes http://www.kesiev.com/akihabara/demo/game-tlol.html?touch=ye... I couldn't get it to work on the desktop but the controls are there for touch screen.
- adamhowell 17y ago
  Ah, thanks for that. Impressively smooth.

stcredzero 17y ago

The games don't seem to register my keypresses in Chrome on my MacBook running Snow Leopard.

McP 17y ago
I thought that too until I saw the tiny text informing me that "A" actually means "Z"
- stcredzero 17y ago
  That worked. I didn't ever see the tiny text, though.
jcl 17y ago
Did you try the "forced" versions linked at the bottom? Maybe it's detecting your browser as a mobile one.

rfer 17y ago

This is so awesome! It certainly is a step towards the future of online games. No more flash, no more CPU at 100%!!

newobj 17y ago
Right, because every browser is going to perfectly implement HTML5 without any bugs!
wmf 17y ago
JS canvas code can just as easily peg your CPU at 100%.

BSousa 17y ago

So 320x240 is the future? I'm all for HTML5 and all, but this honestly doesn't impress me.

flatline 17y ago
Well, it ran great on my iPhone.
- teamonkey 17y ago
  Slow but still playable on my 3G. It's probably not too shabby on the 3GS. I really hope Apple have put some work into Mobile Safari's JS engine in 4.0. HW accelerated canvas rendering would be nice too.
  - WiseWeasel 17y ago
    Yep, totally smooth on the 3GS. Blows the hell out of those crappy Java games I played on the phone I had before my iPhone...
raimondious 17y ago
This is exciting because people are beginning to build cool libraries around HTML5, not because of the details of the games themselves.

digispaghetti 17y ago

Looks nice - certainly runs fast in Firefox, but couldn't get it to work in Android - however looks like a good start.

elblanco 17y ago

Now how do we all get sound working in HTML5 games?

phoboslab 17y ago
With the new <audio> Tag. A few weeks ago, I "converted" an old flash animation of mine to HTML5 <canvas> and <audio>: http://www.phoboslab.org/files/venetianization/ http://www.phoboslab.org/files/venetianization/
- windsurfer 17y ago
  Oh dear. I closed the tab and Firefox kept playing the music.
- elblanco 17y ago
  Will this work well enough for use in an interactive game?

mclin 17y ago

So this is using Canvas? I wonder for 2D graphics, especially for sprites you don't just use CSS, have all the blting and event handling done for you.

kingmike 17y ago

wow great work. HTML5 games are definitely going to be big