Bring a stick man to life. • Hacker News Board

Re: Bring a stick man to life.

#31

Post by 5hoom » Thu, Sep 22, 2011, 9:01 AM UTC

user24 wrote: post #27

5hoom wrote: post #22

This is really impressive. 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!

it's certainly not flash, it's canvas/svg/JS, check out the source (View->Source or Tools->Web Developer->Page Source)

Cool. I checked the source, but wasn't sure what I was looking at. Thanks for confirming(ish) my guess!

This really makes me want to dive into some of this new web hotness :)

Re: Bring a stick man to life.

#32

Post by sesqu » Thu, Sep 22, 2011, 9:12 AM UTC

scottkrager wrote: post #6

That was highly entertaining. 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.

I tried it on an old laptop, and the only animation that really bogged down was the latter half of the rain part (before the next segment).

Re: Bring a stick man to life.

#33

Post by tim_iles » Thu, Sep 22, 2011, 9:22 AM UTC

5hoom wrote: post #22

This is really impressive. 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!

It's using Raphaël, http://raphaeljs.com/

Re: Bring a stick man to life.

#34

Post by [deleted] » Thu, Sep 22, 2011, 9:41 AM UTC

[deleted]

Re: Bring a stick man to life.

#35

Post by user24 » Thu, Sep 22, 2011, 9:46 AM UTC

5hoom wrote: post #31

user24 wrote: post #27

Earlier quoted context omitted.

it's certainly not flash, it's canvas/svg/JS, check out the source (View->Source or Tools->Web Developer->Page Source)

Cool. I checked the source, but wasn't sure what I was looking at. Thanks for confirming(ish) my guess! This really makes me want to dive into some of this new web hotness :)

The actual JS source is minified which makes it almost impossible to read (but if someone has the time to pick over it and post an 'autopsy of a stickman' blog post I'm sure the karma will flow readily!).

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 or in the main HTML. That's not always a sure indicator - it could be being added in JS. Likewise the presence of a element is a good indicator that it's JS.

In this case, the huge number of .js includes is the biggest hint - 18 elements, including telltale file names like 'stickman.js', 'animation.js', etc.

Re: Bring a stick man to life.

#36

Post by gokhan » Thu, Sep 22, 2011, 10:32 AM UTC

gojomo wrote: post #17

People who like this will probably also like the game 'Max & the Magic Marker' — a side-scrolling platformer where reified stick-drawings are your main tool. http://maxandthemagicmarker.com I played it on the iPad, for which the game seems perfectly matched, but it's available on Mac/Windows/iPhone as well.

Another puzzle game you control with drawings:

http://www.crayonphysics.com/

Re: Bring a stick man to life.

#37

Post by mihaifm » Thu, Sep 22, 2011, 11:06 AM UTC

xedarius wrote: post #28

Outstanding! I've been thinking about doing some HTML5/Javascript stuff for a while. What kind of dev environment do you guys use? I was thinking of Eclipse ...

I use Notepad++ and do debugging with Chrome

Re: Bring a stick man to life.

#38

Post by rohit89 » Thu, Sep 22, 2011, 11:30 AM UTC

wingerlang wrote: post #13

scottkrager wrote: post #6

That was highly entertaining. 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.

Longer legs = faster progress. I made super tiny legs first and nearly died of age while waiting for him to walk.

Yea, I drew a (somewhat imperfect) circle and it didn't move at all. It kept wobbling but didn't move an inch.

Re: Bring a stick man to life.

#39

Post by krmmalik » Thu, Sep 22, 2011, 11:50 AM UTC

I love stuff like this. Im hearing the raphaelJS name a lot so it's nice to see what can be done with it. I just assumed the library was for drawing charts? But I guess it's more for vectors.

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?

Re: Bring a stick man to life.

#40

Post by wulczer » Thu, Sep 22, 2011, 12:18 PM UTC

krmmalik wrote: post #39

I love stuff like this. Im hearing the raphaelJS name a lot so it's nice to see what can be done with it. I just assumed the library was for drawing charts? But I guess it's more for vectors. 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?

Raphael is for generating SVG, so you can draw anything with it. Oh, and multiplayer browser games were possible long before Node.js appeared, there's no new magic there.