vanilagy / marbleblast

A web port of Marble Blast Gold and Marble Blast Platinum.

Marble Blast Web

This project is a clean-room web port of the 3D platformer games Marble Blast Gold and Marble Blast Platinum (including Marble Blast Ultra), implemented in TypeScript.

Play it here: https://marbleblast.vaniverse.io/
TAS Rewind version here: https://github.com/RandomityGuy/MBG-Web-Rewind

Features

In this game, the objective is to roll your marble to the finish pad in the fastest time possible, while avoiding hazards and collecting gems and power-ups. It includes almost 4000 levels, including 220 original MBG/MBP/MBU levels (69 beginner, 79 intermediate, 108 advanced, 25 expert) and more than 3900 community custom levels. It implements all gameplay elements, sounds, music and UI/menu components from both Marble Blast Gold, Platinum and Ultra - additional features include a replay system and online leaderboards. The two games (Gold/Platinum) can be switched between seamlessly and without reloading in the main menu. The game can be played using a keyboard, mouse, gamepad or on your mobile device.

View version history

Screenshots

Technical overview

The game is fully implemented in TypeScript and utilizes its own custom rendering and physics engine. Its levels and assets weren't rebuilt from scratch; instead, they are read and imported from .dif, .dts and .mis files used internally by the Torque 3D Engine, on which the original game runs. All the game's internal logic was implemented from scratch, however. The physics simulation runs at a fixed rate of 120 Hz and utilizes continuous collision detection - it was tuned to feel like a Marble Blast game, but there are still differences in the physics, because of which times in this game shouldn't be compared to those in the original. Resources are lazily loaded over the network when required for levels, making the initial load time of the website relatively short. The UIs are all implemented in plain HTML and CSS, and local persistence for settings, scores and replays is provided by IndexedDB. The game features a state-based replay system which guarantees deterministic playback - replays are compressed using pako and stored locally. Custom levels are supplied by Marbleland and are cached on the server. The backend itself is implemented using Node.js and mostly handles resource loading and leaderboard updates. An SQLite database is used to store online scores. The built-in video renderer is implemented using the WebCodecs API and my own multiplexing library.

Building and developing

If you wish to build the game yourself, simply clone the repository, then run npm install --legacy-peer-deps and npm run compile, which will compile the TypeScript code using rollup. Then run npm start to start up the server (runs on :8080 by default). If you want to configure the port and other server options, modify server/data/config.json. For fast development run npm run watch-fast (or npm run watch for a slower, but typechecked version). If you wish to bundle the project, run npm run bundle, which uses Sarcina and writes to dist/.

Note: This project has a dependency that requires node-gyp. Install node-gyp before running npm install on this project with npm install -g node-gyp, and if you're on Windows, make sure to run npm install --global --production windows-build-tools right afterwards in an elevated command prompt (one with admin rights) to handle the annoying installation stuff.

Notes

The current version only runs on the newest versions of Chromium-based browsers, Firefox and Safari, both on desktop and on mobile. Android support should be top-notch, and Safari is as best as it can be given Apple's restrictive PWA features on iOS. Older versions of this project utilized three.js for rendering and OimoPhysics for physics - without them, this project wouldn't even exist. Additional thanks to the maintainers of pako and jszip for making other parts of this project possible, as well as to Jeff, RandomityGuy and Whirligig for helping me out with parts of the code, and to the entire Marble Blast community for their feedback and support. The gameplay itself wasn't my idea at all and I highly recommend you check out GarageGames's original version of Marble Blast Gold, as well as the game's community, here: https://marbleblast.com/

marbleblast's Issues

Offline Mode?

First off, I'd like to say that I love what you've done here. It's nice to see one of my favorite games of all time finally accessible to more platforms than just Windows and Mac. I also adore how there is an option to play it in mobile. I have a suggestion on how to improve the mobile experience. Since this is a Progressive Web App, there is an option to install it as an Android/iOS application. However, doing so only creates a shortcut, it doesn't actually download much. This means you have to stay connected to the internet to play the game, which I find somewhat annoying. I did some research and found that a PWA has the ability to cache its files to the device it's installed on, making it useable offline. Would it be feasible to implement this feature here?

webpack.cache.PackFileCacheStrategy

Site is offline

Hi, the site https://marbleblast.vani.ga/ seems to be offline (DNS problem?)

Stuck on finish goal (iOS)

Whenever i finish a level i get fireworks as usual but after that i’m stuck on the finish goal because i don’t get the menu that shows the time which means i can’t go to the next level. I used a keyboard and an iOS Device. The browser that i used was Chrome/Edge.

Older system compatibility

Can you make the game work on older browsers?

new game request

hi vanilagy is it possible to create buzzing cars game online
here's where you can download the game http://www.blupi.org/.

Game crashes as iframe

Hi,

i wanted to put this game on my website in an iframe but notcied it crashes when it is put into it.

Example: https://jsfiddle.net/yamochnw/
Could this get fixed? Thank you

Marble Blast Gold link

The website links you to Platinum by default, and the only way to get to Gold is by clicking the button in the top left. I wanted to share the Marble Blast Gold port with my friends. Is there a way to get a direct link to the Marble Blast Gold port rather than Platinum? Would be nice :)

Physics

Physics
^{yes this is a pooppost}