HelloRun - A WebGL 3D Game | Hacker News Reader

HelloRun - A WebGL 3D Game

hellorun.helloenjoy.com

223 pointsuptown106 comments

Beautiful but restarting from the beginning on the slightest mistake makes this game negative fun to play.

Agreed. I'd love to be able to restart where I left off. Maybe the high score could reset, but the music could continue. The music's great, and coupled with the color change at the drop, it could be really cool.

I disagree, think of it like Bit.Trip Runner, the beat builds as you progress, but you have to start over if you fail.

Super Hexagon.

Yes, but look how they do it. The music never skips a beat and certainly never cuts to straight silence, and Runner taps his feet for an appropriate number of beats so he launches himself at the right time. It's still a shock to lose, but it's not a bucket of cold water to the face like this.

Bit.Trip Runner was not this difficult. And it's hard to make out the difference between an open space and a closed one. I tried it about 30 times and then gave up.

I hated playing that too, even though it was not quite as hard.

If you're so inclined: https://soundcloud.com/dutoncmusic/du-tonc-surging-memories

Thank you. I got annoyed by the mouse sensitivity and just wanted to hear the song. =pp

I use keyboard for such games.

Isn't that how most score attack games of this style work?

I ended up disabling the gates as I just wanted to look at it for a bit

  HELLORUN.Game.prototype.onGate = function() {}

On the one hand, I dislike the multiple layers of abstraction removing the programmer from the metal and killing performance. On the other hand, being able to hack the source code like this reminds me of my childhood Apple IIe, cracking and hacking days. Adding extra lives and other cheats was THE reason I learned how to program. If I grew up with today's binary apps and need for developer kits, I'd likely spend more time consuming and less time hacking.

This is really really cool. Am I the only one who wanted to play just because I wanted to hear more of the song? It makes sense that the motivation to play a little more could be tied to how much of the song you hear. Even though I have heard this song before multiple times, the gameplay aspect of song revelation makes it more fun.

This got me thinking about how shortsighted are artists, musicians and producers, who are not thinking of reaching out to fans through interactive digital experiences rather than simple publishing deals. The music industry profitability is going down the drain and the only way to make people pay a premium would be to invest in thoughtful interactive experiences attached with the music. Games could be one of those but definitely not all of those.

And if you just can't conjure up the skill required to hear the whole song, the main menu fortunately links to its soundcloud: https://soundcloud.com/dutoncmusic/du-tonc-surging-memories

how shortsighted are artists, musicians and producers, who are not thinking of reaching out to fans through interactive digital experiences

That's nice if you have a good marketing budget but most indie musicians, especially electronic ones, can't easily afford a video, never mind an interactive experience. It is possible and I have some interest in that aspect of things since my approach is heavily sequencer-based, but the more work goes into the music (as opposed to using canned loops) the fewer resources are available for other things.

Cool… the fog color matching the gate color often makes it difficult to discern which section is the opening.

I came to the comments to say exactly that.

It's supposed to be challenging. You will learn to discern.

I agree—this game is really frustrating because it's difficult to see the barriers. Challenging games are often frustrating, don't disagree with you there - but this particular flavor of challenge isn't really fun. I'd prefer "it came too fast" or "it was moving and hit me" to "the wall looked just like the opening." I definitely got better after my first few plays at discerning the walls from the openings, but it took me a few tries to even realize that that's why I was dying. I imagine many people will give up before I did.

Just chiming in to agree with this. Games that are difficult because of their UI usually aren't very fun.

Also, it seems important for the game to quantize input. I.e. right now you can occupy a continuous height anywhere from "0.0 to 1.0", but it would be much more fun if the game would automatically snap your height to either "bottom, middle, or top." It's quite frustrating to lose because you just barely clip a gate.

I didn't realise it was a continuous range of heights, 3 set heights would definitely be better as the holes are at set heights. Fantastic game and music, though. Really demonstrates how capable WebGL actually is.

Even worse. I found myself in situations where I cleared the middle section of one gate and, without any movement on my part at all, hit the next gate even though it also had an open middle section. This happened to me twice with a gate at the top of a ramp.

I'm confident that I didn't move the ship because I used the arrow keys and positioned myself well before reaching the first gate. I was close enough to missing the opening that I would understand hitting the first gate, but hitting the second gate is uniquely frustrating.

Try using arrow keys, it does exactly that.

No, I won't, because when frustration_value > fun_value I stop playing immediately and never come back.

Failing because I wasn't quick enough can be fun. Failing because your overly-clever graphics engine requires me to distinguish "fog" from "glass in fog" in 0.5 seconds is never fun.

As did I. It's not fun when I don't even know what I did wrong. Sometimes even after I fail I can't really tell how I was supposed to know what the proper path was because it all looks so similar.

Totally agree, I couldn't tell where the holes were. Made it very, very frustrating. Instead of making it a skills game, it made it more of a luck game. I'd rather play slots than this.

I guess to make it more interesting, there had to be some patterns. I.e. the gates aren't completely random.

This. The game would at least be reasonably fun with wireframe options, or some way to kill the fog effects. But certain combos, like green with green fog, just become a big haze of green. Also, an option to show you where your hitbox is in relation to the gate alignment would do wonders. When you're going down stairs, trying to figure out where the heck you are, and then hit a complete reset, this game loses its fun. Also, holding shift results in what looks like me selecting the entire <canvas> window, as everything gains a blue highlight in Firefox 23.0.1

On Firefox, fails with

[15:54:39.366] TypeError: k is null @ http://hellorun.helloenjoy.com/js/three.min.js:412 [15:54:39.366] "Error creating WebGL context." [15:54:39.368] TypeError: this.view is undefined @ http://hellorun.helloenjoy.com/js/hellorun.min.js:1

On Chrome, I see some rendered triangles, but just wireframe, and the game does not seem to work.

Not on my up-to-date Firefox on 64-bit Linux; it works perfectly.

That's pretty odd. I'm running Firefox for Mac and it works fine for me, and Mac graphics drivers have a reputation for dodginess. It flies through an untextured wireframe maze during loading, which might be what you're seeing in Chrome.

Firefox 17 for Linux 64-bit: NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.fillStyle] @ http://hellorun.helloenjoy.com/js/hellorun.min.js:4

Update: I pass all the WebGL compliance tests at https://www.khronos.org/registry/webgl/sdk/tests/webgl-confo....

You might want to check your update button. The current version is Firefox 23.0.1.

Sounds like he's on debian, which only uses the ESR release by default

I had similar problems with WebGL on Firefox (Ubuntu) that went away when I upgraded to 23.

I don't have root on this system, and installing Firefox without root is such a pain I haven't gotten around to it.

Your browser is 288 days out of date.

Works prefectly (Firefox 23.0.1 64 bit / Debian testing amd64). What does Firefox say about your video driver in about:support?

Works perfectly for Firefox 22.0 / Ubuntu amd64 too.

what is this why is it just a static piece of --- Oh, cool. Really needs some kind of "hang on, loading" for the initial preloader.

Sadly it didn't work too well with my Leap. I mean, aside from the basic gorilla arm problems, I found that I got a TON of framerate hiccups and sometimes it just totally ignored it.

edit after playing some more, with a high score of 70.

I also have some issues with the game itself. The thumping beat and the "run on shift" behavior makes me feel like this is a game that wants to be about zooming down a tunnel at high speed, but it defeats itself - the barriers are way too close to be able to run through them unless you see that an entire path segment has holes in the same places, and it's just too damn hard to see them half the time. And I say this as a person who has loved playing Jeff Minter's "Space Giraffe", which is basically a Tempest variant dropped inside a music visualizer with the intensity set to 11. I am a life support system for a visual cortex,and I think these gates are hard to make out - I think this means there's something wrong. If they had a white sheen or something this would be more playable.

The scoring seems to encourage MOVE FAST ALL THE TIME too - you get 1 point for moving through a gate, and 2 for running.

Also the visuals worked against the gameplay for my first few plays. The detailed, realistic corridor with cables hanging down made me assume that "down" meant "crouch" and "up" would mean "jump" - which I assumed is pretty much a momentary thing that has to be hit at the right moment to make it through a gate. It took me like five plays to work out that, no, I'm actually just kinda flying through this corridor here. If the tube had been abstract I think I wouldn't have made that assumption.

Also when I play on keyboard with it fullscreen, the keystrokes seem to keep on falling through the game now and then; I hear error beeps over the music when I hit a key sometimes. (Safari, OSX 10.8.4.)

    THREE.WebGLRenderer 58
    three.min.js (line 408)
    Error creating WebGL context.

In the console on FF 25 (Linux), no visible error message. WebGL usually works great. Maybe some missing extension?

Same in FF nightly 26.0a1:

  "HelloRun
  ________
  "
  "THREE.WebGLRenderer" "58"
  "Error creating WebGL context."

In three.min.js:412. A strange game. The only winning move is not to play. (Other webGL pages work just fine.)

Hello Joshua.

Same error with FF 26 MacOS X. Usually, I have no problem with WebGL.

    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

That'll fix it!

Addictive. Contrary to munificent, I think it's great that the game punishes you for mistakes so completely. The feel of the game makes me think of a mix between Super Hexagon (www.superhexagon.com) and Temple Run (or any other generic runner).

The only criticism I have is this: sometimes it's close to impossible to tell (even at slow speeds) where the gap is because of the way the gates are laid out and also the colour of the gates (like Cyan). Some people may argue that adding a "dice roll" into the mix is great, but considering the type of game this, it just kills the fun when you feel like you've been robbed.

(note: this is different to screwing up and starting from scratch as a result)

edit: good job.

The movement isn't sensitive enough. You shouldn't have to lift the mouse at all when playing computer games with bounded motion like this; this game requires me to lift the mouse 3-4 times just to go from the lowest barrier to the highest.

It's not my sensitivity since I can traverse all 1080 pixels in less than a single vertical swipe of my mouse. Is anyone else having the same problem?

Same problem here. I couldn't get it to move properly at all unless I picked the mouse up and moved it.

Just play with the arrow keys, way easier.

Probably the fastest WebGL game I ever experienced - wow.

Indeed, it ran at a good 40-50fps for me.

Looking closer at the requestAnimationFrame callbacks, most frames required under 16ms, but every 20th frame required 120ms or more. Eliminate that slow frame and the game should have no problem reaching 60fps.

(I used https://chrome.google.com/webstore/detail/web-tracing-framew... to get this).

Really cool! But the gates are way too hard to see, I feel like I'm colliding with thin air most of the time... The music keeps me playing though :)

Reminds me of Missile Game 3D

http://www.albinoblacksheep.com/games/missilegame3d

Am I doing something wrong? I'm using Chrome 29.xx and it's telling me my browser doesn't support WebGL.

Apparently WebGL doesn't work on Chrome for certain types of hardware, including Intel Mobile 945 Express, NVIDIA GeForce FX Go5200, certain very old drivers, and a variety of other certain pieces of hardware/software, see http://www.khronos.org/webgl/wiki/BlacklistsAndWhitelists#Ch...

Same here, but WebGL works for me; not only do I make things with it, I can use all games/demos in WebGL without issues. Only this game doesn't work. Chrome latest on Mac OS X.

apparently it was "built with unity"

does unity now target html5 without any depending on a webplayer plugin?

I'm dying to know this answer too

AFAIK it only does NaCl besides their Web Player.

It seems like the scene might have been built with Unity and was then exported. There is a data file loaded[1] which states its generator is "ThreeExporter.cs" in version 4.0.

[1] http://hellorun.helloenjoy.com/assets/station/station.js

You had me at Hello. Actually, you had me at the loading screen - so clean and slick.

Great design, great music etc etc - but it just proves that mouse pointer lock is somewhat broken on full screen Chrome for Mac. It's constantly throwing up tabs and other menu bars when you get near the top, breaking context, grabbing the mouse, lagging the graphics etc.

Amazing! I really enjoyed the game, and I have a tip, maybe to be possible continue the game round even if you failed to pass through the gates, but reseting the score and speed, this way will be possible to continue listening this incredible music! =)

You can listen to the song directly on soundclound: https://soundcloud.com/dutoncmusic/du-tonc-surging-memories

Very impressive. Is there a write up on how such games are done? In general, how long does it take to reach this level of expertise in writing games? 2 years? 5 years?

Is the source code somewhere?

It's JavaScript and the source is not obfuscated. You can view it here: http://hellorun.helloenjoy.com/js/hellorun.min.js

I made a beautified version to look at here: https://gist.github.com/slacka/6434572

Cool, though a bit confusing at first, since the player has no clue what to do, and the game restarts all the time which looks like a bug.

Amazing. Less punishing than Bit.Trip Runner, and a whole lot of fun. How long have you been working on this? The most frustrating is to get correct centering at high speeds, since you're moving the mouse with jerks, you overshoot often. It would be nice to see the right click, or some key on the keyboard, act as a "move-to-center" button.

Very well performing WebGL Game! Good work. :-)

Hey I saw this at the Mozilla HTML5 Game Dev meetup, were you the silent guy running the demo?

Awesome work anyway :)

I was also there in London and saw the game haha! I'm really interested to know more about the game, it's mysterious so far

did they get into how unity was used in their pipeline?

Hopefully they write a blogpost

No thats the thing - they said absolutely nothing about it. It was just like, heres a game displays some gameplay ok moving on ;p

Looks nice. Can't for Emotiv Insight head set (http://www.kickstarter.com/projects/tanttle/emotiv-insight-o...) to control the direction based on my head movement.

Excellent work here. I've been waiting to see more HTML5 games, and I can't wait for the first real AAA game to come out with HTML5 support. While this one isn't a full-length game, it's still smooth and polished, and I'm excited to see what happens next in HTML5 gaming.

Game is too hard. Keep running into bars as I am getting instructions.

Here's the thing about HelloRun ... I suck at HelloRun.

http://hellorun.helloenjoy.com/assets/sound/music.mp3

Change your browser tab as you hit a wall and the track speed is slowed down. You will hear the rest of the song played with a permanent pitch shift.

Very nice. Took quite a while to load. Would be great if the user could slow down the pace which also slows the pace of the music and vice-versa.

I want to turn right once in a while!

Great stuff!

Maybe include an invert axis option? Great btw

Yeah, since it feels like a plane the up/down controls should be inverted.

This is very nice, really cool. Would love to learn from it, but I can't find the source code. : /

this is amazing. definitely challenging. the music and the its illustration is pretty sweet

Has anyone used this with Leap Motion? Would be interesting to see how well it fares.

At 70 it gets so fast it becomes almost impossible to spot the openings on time.

I got to 90 ;)

Wow this super cool. The restarting makes it challenging and a challenge is fun.

After restarting for no less than 20 times, I've managed to get through 118 gates, wasted half an hour, all the while hating both the game and myself. Fun.

It seems down unfortunately.

The best thing about this game is it actually works in IE11. :')

Can't believe this kind of game runs in browser!

It uses a lot of tricks. The scene has a very low polygon count and the lighting is a pre-calculated texture.

How do you know? Did you find the sourcecode somewhere?

WebGL relies on javascript to run. Looking at http://hellorun.helloenjoy.com/js/hellorun.min.js and searching for "png" you get images like http://hellorun.helloenjoy.com/assets/station/lightmap1024.j... which looks like a pre-lightning computed texture. Looking at the vertex data (in format x,y,z(,w)) there seem to be only 2048 defined vertices, which is a tiny amount for a 3d game.

Well, it was taking a long time to load for me so I looked at the network panel to see what was being loaded and I saw the lightmap. I have a little bit of a background in 3D graphics/game development so it instantly came to mind.

wow... This is beautiful and so smooth. It doesn't even lag slightly. I must say I am very impressed.

Pretty awesome on chrome on osx

OMG, I feel like in Tron!

Wow! that's awesome!

incredible

Fun

Reply on news.ycombinator.com