HelloRun - A WebGL 3D Game

http://hellorun.helloenjoy.com/

by uptown • 13 years ago

223 106 13 years ago

hellorun.helloenjoy.com

dirkk0• 13 years ago

Probably the fastest WebGL game I ever experienced - wow.

tantalor2• 13 years ago

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).

mattmoss• 13 years ago

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

film42• 13 years ago

I came to the comments to say exactly that.

worldsayshi2• 13 years ago

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

bengotow• 13 years ago

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.

PhasmaFelis• 13 years ago

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.

grannyg00se• 13 years ago

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.

sixQuarks• 13 years ago

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.

shmerl4• 13 years ago

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

araes• 13 years ago

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

austinhallock• 13 years ago

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

650REDHAIR• 13 years ago

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

BrandonY• 13 years ago

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...

tluyben2• 13 years ago

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.

hansjorg• 13 years ago

    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?

brokenparser• 13 years ago

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.)

nekgrim• 13 years ago

Hello Joshua.

Yoric• 13 years ago

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

willvarfar• 13 years ago

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

That'll fix it!

kanwisher• 13 years ago

Pretty awesome on chrome on osx

worldsayshi2• 13 years ago

I want to turn right once in a while!

Great stuff!

bkanber• 13 years ago

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.

infogulch• 13 years ago

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?

JesseObrien• 13 years ago

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

MLR• 13 years ago

Just play with the arrow keys, way easier.

tslocum• 13 years ago

Reminds me of Missile Game 3D

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

peoplee• 13 years ago

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! =)

rubycowgames• 13 years ago

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

dreen2• 13 years ago

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

Awesome work anyway :)

crucio• 13 years ago

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

exit2• 13 years ago

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

cnp2• 13 years ago

Hopefully they write a blogpost

dreen2• 13 years ago

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

rwinn• 13 years ago

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 :)

tbolse• 13 years ago

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

michaelmcmillan• 13 years ago

It seems down unfortunately.

imtu80• 13 years ago

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.

munificent• 13 years ago

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

HeyItsJames• 13 years ago

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.

tsumnia• 13 years ago

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

rtkwe• 13 years ago

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

y2bd• 13 years ago

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

4lun• 13 years ago

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

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

slacka2• 13 years ago

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.

shire• 13 years ago

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

cheapsteak• 13 years ago

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.

dubcanada• 13 years ago

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

ahsanhilal• 13 years ago

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.

alainbryden• 13 years ago

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

anigbrowl• 13 years ago

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.

jacklockyeruk• 13 years ago

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

ep1032• 13 years ago

Is the source code somewhere?

slacka2• 13 years ago

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

yaru22• 13 years ago

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

terabytest2• 13 years ago

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

ep1032• 13 years ago

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

AndrewGaspar• 13 years ago

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

whiteshadow• 13 years ago

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

bart42_0• 13 years ago

Fun

ratsimihah• 13 years ago

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

codygman• 13 years ago

I got to 90 ;)

qrybam• 13 years ago

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.

azakai• 13 years ago

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.

computer• 13 years ago

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

chc2• 13 years ago

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.

comicjk2• 13 years ago

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....

chc2• 13 years ago

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

tantalor2• 13 years ago

Your browser is 288 days out of date.

shmerl4• 13 years ago

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

exDM69• 13 years ago

Works perfectly for Firefox 22.0 / Ubuntu amd64 too.

CoryG89• 13 years ago

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

taitems• 13 years ago

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.

NoCowLevel• 13 years ago

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.

frozenport• 13 years ago

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

shmerl4• 13 years ago

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.

exit2• 13 years ago

apparently it was "built with unity"

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

cnp2• 13 years ago

I'm dying to know this answer too

braco_alva• 13 years ago

AFAIK it only does NaCl besides their Web Player.

julius• 13 years ago

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

egypturnash• 13 years ago

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.)

naboavida84• 13 years ago

Maybe include an invert axis option? Great btw

ambrop7• 13 years ago

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

general_failure• 13 years ago

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?

jpalioto• 13 years ago

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

j_lane• 13 years ago

incredible

sankush• 13 years ago

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

hipaulshi• 13 years ago

Wow! that's awesome!

stigi• 13 years ago

OMG, I feel like in Tron!

arc_of_descent• 13 years ago

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.

sasas• 13 years ago

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.

HelloRun - A WebGL 3D Game

Related Stories