Nightly Roll

Please open in Google Chrome.

Marble Blast Ultra

Nightly Roll is a small implementation of a very old and common game. Titles like "Marble Blast Ultra", "Marble Madness", and "Super Monkey Ball" have been popping up for years now. The goal of the game is simple: roll through the maze-like levels while collecting points and avoiding falling off the stage.

Marble Blast Ultra.

Nightly Roll vs. The Best

Obviously Nightly Roll isn't up to par with one of the best sellers I mentioned above. It is, however, a 90% complete version of these games. Although it may not look like much at the time, I've already implemented:

-3rd person camera following the 'main character'
-Phong Shader Lighting and Reflectance
-Vertex- Based Shading
-Collision Detection
-Pointer Lock Camera
-Custom Platforms

So what am I missing? The largest missing component is actually generating more of a level. I've created a basic sin-wave for demonstration purposes, but adding more of a twist to the level makes a huge difference in how fun the game is. On top of that, there are some extra things these games have such as a point system or sparkly effects that I didn't implement as part of the base game.

What I Couldn't Do

First off, textures. I've actually written a solid amount of texture functionality for this demonstration, but the three.js library had some security issues with Google Chrome causing the textures to fail to render. I can use this in Firefox, but the rest of the html was designed for Chrome. Go figure. We'll just have to settle with some awesome vertex-shading and lighting instead.

Another weird issue was using a Sky-Dome to cover the level. It wasn't too hard to implement a basic Sky-Dome, but the pure scale of the level caused problems. Rendering a hemisphere around a 100,000x100,000 world is a little difficult for older laptops. Instead, I added a plain background image. Not as appealing, but it doesn't take too much away from the game.

Next off, rolling. What's a marble rolling game without rolling? This was actually a very unexpected issue I collided with. Because the third-person-camera is following the marble, rolling the marble really distorts the point of view of the player. I attempted to cancel out this change by un-rotating the camera, but it never worked at 100%. Something I'd like to have changed with more time.

And finally, force in the x-z plane. Gravity is already implemented as you can see, but I haven't added the translation to x-velocity where you can speed up and slow down. This wasn't as large of an issue as just a problem with time. A simple sin/cos multiplication can easily solve this issue.

What I started with.

Three.js And My Workarounds

The library I used for this, three.js, was amazingly helpful with many graphical properties. It had built in functionality for many otherwise difficult interpretations such as Phong-Shader lighting. Sadly, it didn't have everything I wanted. I had to make quite a few adjustments to the camera and collision detection functions to work with my demonstration. I also made quite a few mathematical adjustments to the shaders and generated objects.

Still, three.js made it quite easy to edit their functions to respond to any specific needs their users had. I had originally created this project using GLUT, and had something along the lines of a first person camera, collision detection, and some basic blocks in a world which I could jump on. I wanted to switch to three.js in order to gain experience for my senior project, and I caught up to my GLUT implementation within a few days. I'd definitely recommend it to future generations of graphics-students that would like to dabble in something new.