XMoto.js

DEMO

This project is a HTML5 Port of XMoto using CoffeeScript, PixiJS 8.18.1 and Planck.js 1.5.

This is the first part of a 2-parts project:

1. XMoto.js (this project!): JavaScript port of the game that need to be compatible with a lot of pre-existing levels (XML files) from the original game.
2. XMoto.io: social XMoto game with a backend for scores, replays, etc.

XMoto.io will be built on top of XMoto.js, using Ruby on Rails, and both the projects will co-evolve and interact in some parts.

More about the project development on http://xmoto.io (not up-to-date but good intro).

Demo

Master branch is frequently deployed here: http://js.xmoto.io

Click on the "debug mode" button and have fun with the simulation parameters. You can copy-paste the generated URL to keep the custom physics.

Examples:

• Tractor
• Rodeo
• Physics
• Big Head
• Moon
• Furious

Usage

• Upload "data", "lib" and "bin" folders on a static web server (put 'data' folder on the root directory)
• Include all the JavaScript files of /lib/ and /bin/xmoto.js on your web page.
• Call $.xmoto('l1.lvl') or $.xmoto('l1.lvl', options) where "l1.lvl" is the name of the level and the options are:

{
  container: '#xmoto'   # game selector (empty div)
  loading:   '#loading' # loading selector
  chrono:    '#chrono'  # chrono selector
  width:     800
  height:    600
}

Vision / Inspiration

Use XMoto port as starting point to create a 2D sandbox game:

• That is modular enough for most 2D physics game.
• With a level editor (1 click to switch between game and in-game editor).
• With accessible community levels (and games?).

Inspirations:

• Algodoo - Physics sandbox
• Dreams - Game, community and editor
• Line Rider / Free Rider - Physics, community
• Trackmania - Lightweight levels/replays + editor
• Geometry Dash for simplicity, community
• Fancade for community, in-game editor
• Escape Simulator for community, in-game editor

Developpment

Installation

• brew install nodejs yarn to install NodeJS and YARN (on MacOS)
• yarn install to install development dependencies

Working environnement

To compile to JavaScript in real-time:

./node_modules/.bin/coffee -j bin/xmoto.js -wc src/*.coffee src/*/*.coffee

To start web server on http://localhost:3001 :

node server.js

Don't forget to restart the coffee command if you create new COFFEE files.

Tests

Parsing & Loading of original levels

Load each level on a browser using Playwright and logs the failures.

yarn test:levels

Comparison with original X-Moto

Use this link to compare screen 1/1 with original X-Moto (same zoom/resolution):

http://localhost:3001/?level=943&debug=true&automatic_scale=false&manual_scale=false&default_scale.x=90&default_scale.y=-90&width=1024&height=768

Technical informations

• Implementation of replays is described here

COVID-XMoto

Many years after this project was shelved, and out of nowhere, James Fator decided to fork this project to make a heavily modified version of XMoto.js, dedicated to the somewhat strange years of the COVID virus.

The COVID-19 confirmed cases timeseries has become a mountain of flags which you must climb with your motorcycle! Can you win the race for the cure?

• Play COVID-XMoto
• The COVID-XMoto fork

Thanks again to James Fator for this nice project! I'm always happy to see that open-sourcing side projects can lead to unexpected things.

Please visit his personal website for other cool projects: https://jamesfator.com/

TODO

• Adjust the camera a bit (player more on the borders of the camera, less zoom)
• Improve moto sound (less high-piteched?)
• Adjust Y position for stereo/volume? Needed?
• Add grip (blocks)
• Use WheelJoint instead of RevoluteJoint and PrismaticJoint?
• Test other themes (where are assets?)
• Manage checkpoints
  • 7663 is an easy one to trigger
  • Keep momentum ?
  • http://wiki.xmoto.tuxfamily.org/index.php?title=Notes_on_Checkpoints
• Shouldn't assets.get_url(texture_name) be assets.get_url(texture_file)?
• Attach texture_params directly to blocks, entities etc? Instead of adding the params one by one? => performance.now(), Date.now() or Ticker? (see PR)
  • http://wiki.xmoto.tuxfamily.org/index.php?title=Others_tips_to_make_levels
• Create selector of levels by name
• Should we trigger a small acceleration bump/sound/particles each time up is triggerd?
• Make the game playable on mobile (4 buttons or device rotation or volume buttons?)
• Manage 120fps on compatible screens by interpolating positions using Gaffer's fixed timestep: https://gafferongames.com/post/fix_your_timestep/
• Good inspiration to draft Blocks in editor: https://schteppe.github.io/poly-decomp.js or https://poly-decomp-es.vercel.app/
• This game has nice wheels physics (+sound) https://robertw.itch.io/meltdown-escape
• Adjust the height of the driver (less bumpy!? Height of sprite? Compare values?)
• Create alternative box2D physics using DIV elements on screen to make the moto moves on websites.
• Add specs for Physics methods (deduplicate etc.)
• QR Code with mobile access:

• for timing?
• for complete card?
• for inviting people?
• for controlling with phone?
• for other functionality?

and other stuffs