Just as I'm about to tap the back button... Boom.
What a delightful surprise. Perhaps the tide really is turning.
I played it on the iPad, for which the game seems perfectly matched, but it's available on Mac/Windows/iPhone as well.
I think the best part was that I really had no clue what was coming next.
I wish some of the animations moved a bit quicker though. Other than that....bravo.
Everyone can be Green Lantern!
Anyway - what I'm really looking forward to is realtime multiplayer / multiuser versions of all these great demos. Just think of the viral/network effect. I'm sure it's all quite possible now that we have node.js?
I was thinking they were doing some sort of bitmap-grid skewing & stretching, but it seemed way too precise & neat.
Thank you for stating the (what probably should have been) obvious ;)
@latch - i think you're right about the kids angle. Having a truly interactive story like this would be awesome for kids!
Processing has a loop that runs every frame, in which you redraw the whole scene each time. So for a Tetris game, on each frame you'd draw all the blocks in their correct position. You maintain the game state however you like, you just tell processing what to draw each frame.
In Raphael, its more like a traditional game engine. You might for instance make a new Circle (or Monster, or Hero..), and give it properties and events. The redrawing would be handled for you.
Hope that helps/makes some amount of sense. My experience here is very limited, so its possible I'm misrepresenting one or both of the libraries.
Reminds me of a game a friend and I back in college for stylus tablets that was essentially Pokemon, but where you had to draw your Pokemon before you could battle with them. This was for a class in pen stroke recognition, so we spent all our time inferring the "skeletons" and "body features" of your Pokemon, and never actually made it to the "game" part. It was cool, though! Once you had the skeleton, you could animate the monsters in fairly cool ways (to simulate attacks, dodging, etc.). You could also infer the "stats" of the monster based on how fat its limbs were, how much armor it had vs. how many spiky bits, etc.
Might be a cool project for someone, now that this kind of thing is possible on the web (and now that touch interfaces are ubiquitous).
Does anyone here know what was used to produce this? I'm guessing HTML5 canvas trickery, but I'm not a web-dev so I'm really curious if that's the case.
However it was made, this is one of the best web-demos I've seen in a long time. Thanks for sharing!
This really makes me want to dive into some of this new web hotness :)
Often, a quick right-click will be enough to expose flash; JS/canvas/html5 will give you the normal context menu, flash normally produces its own unhelpful context menu. That's a good indicator.
If you have to go back to the source, what you're looking for in determining if something is flash or not is an <embed> or <object> in the main HTML. That's not always a sure indicator - it could be being added in JS. Likewise the presence of a <canvas> element is a good indicator that it's JS.
In this case, the huge number of .js includes is the biggest hint - 18 <script src=...> elements, including telltale file names like 'stickman.js', 'animation.js', etc.
For example one I posted a while back: http://news.ycombinator.com/item?id=2098247
Drawing just a circle for the stickman is very funny. Drawing a vertical line for the stickman breaks it.
You know the rule: those who live by the sword will be shot by those who don't.
(Dicks holding dicks. Always funny.)