Skip to content

Add web-mvp-extend prototype: engine, scoring, gameplay canvas, chart… #842

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
j48523713-del wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add web-mvp-extend prototype: engine, scoring, gameplay canvas, chart… #842

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
193 changes: 20 additions & 173 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,173 +1,20 @@
<h1 align="center"><a href="https://bemuse.ninja/"><img src="website/static/img/logo.png" alt="Bemuse 〜beat☆music☆sequence〜" height="162" /></a></h1>

<h2 align="center">open-source web-based online rhythm game</h2>

<p align="center">
<a href="https://circleci.com/gh/bemusic/bemuse"><img src="https://img.shields.io/circleci/project/bemusic/bemuse/master.svg?style=flat" alt="CircleCI"></a>
<a href="https://codecov.io/gh/bemusic/bemuse"><img src="https://codecov.io/gh/bemusic/bemuse/branch/master/graph/badge.svg" alt="Codecov" /></a>
<a href="https://twitter.com/bemusegame"><img src="https://img.shields.io/badge/twitter-@bemusegame-blue.svg" alt="twitter" /></a>
<br>
<a href="https://sonarcloud.io/summary/new_code?id=bemusic_bemuse"><img src="https://sonarcloud.io/api/project_badges/measure?project=bemusic_bemuse&metric=alert_status" alt="Quality Gate Status" /></a>
<a href="https://sonarcloud.io/summary/new_code?id=bemusic_bemuse"><img src="https://sonarcloud.io/api/project_badges/measure?project=bemusic_bemuse&metric=sqale_rating" alt="Maintainability Rating" /></a>
<br>
<a href="https://bemuse.ninja/project/"><img src="https://img.shields.io/badge/read%20the-docs-brightgreen.svg?style=flat" alt="Docs"></a>
<a href="https://gitpod.io/#https://github.com/bemusic/bemuse" title="Develop in GitPod"><img src="https://img.shields.io/badge/develop%20in-gitpod-blue.svg?style=flat"></a>
</p>

**Bemuse** is an open-source, online, web-based rhythm game. It plays songs in
BMS format (See:
[Introduction to BMS](https://www.youtube.com/watch?v=Guv1vRAKanY)).

It is recommended to play this game on Google Chrome.

**Table of contents:**

<!-- toc -->

- [Video Demo](#video-demo)
- [Quick Tour](#quick-tour)
- [Technology](#technology)
- [Development](#development)
- [Sub-projects](#sub-projects)
- [How to contribute](#how-to-contribute)
- [Our amazing contributors🌟](#our-amazing-contributors%F0%9F%8C%9F)
- [License](#license)

<!-- tocstop -->

## Video Demo

<p align="center">
<a href="https://www.youtube.com/watch?v=EOgI37Myqvk"><img src="http://i.imgur.com/3sVRyGm.jpg" alt="Video Demo" width="754" /></a>
</p>

## Quick Tour

![Music selection](website/static/img/screenshots/music-selection.jpg)

- You can play **online songs** instantly in your browser.

- You can play **custom songs** by dragging a folder containing BMS files into
this screen. There are over 5,000 songs published in BMS format by the
community worldwide. You can find them using
[BMS Search](http://bmssearch.net/).

- There’s an **online internet ranking** system. You can compete with other
players and see your rank online.

- It has an **insane tutorial.**

![Gameplay](website/static/img/screenshots/gameplay-kbd.jpg)

- **Keyboard mode** (7-keys). Play along the music with your keyboard.

- **Fully key-sounded.** Each note has its own sound. The music will be affected
by your game play.

- Player together with friends using
[**party mode.**](https://www.youtube.com/watch?v=hiJzFRIhiiA) It helps you
start the game at the exact same time.

- **Multiple difficulties.** Each song has multiple difficulties to accommodate
every player skill levels.

- **Adjustable speed.** You can adjust the speed (spacing) of the notes to make
it easy-to-sightread. This does not affect the speed of the song; lowering the
speed causes notes to become more dense on-screen.

- [**Scoring and grading system.**](http://bemuse.readthedocs.io/en/latest/users/scoring-and-judgment.html)
Master the song to get the S grade (score over 500000).

![Gameplay](website/static/img/screenshots/gameplay-bms.jpg)

- **BMS mode** (7-keys + turntable). You can play using an
[IIDX controller](https://www.youtube.com/watch?v=EOgI37Myqvk) or
[MIDI controller](https://www.facebook.com/bemusegame/videos/985712734835136/).

- **HD video support.** Some songs will have a background animation in
high-definition (720p).

- **Adjustable play area size.** If the gameplay area is too long, you can
adjust the cover it to make the play area more easy-to-sightread.

- **Early/Late indicator.** Bemuse will tell you if you press the note too early
or too late.

![Options](website/static/img/screenshots/options.jpg)

- **Adjustable panel position.** You can position the note panel on either side
of the screen, or put it at the center.

- **Adjustable turntable position.** You can put turntable on the left or on the
right (BMS mode only).

- **Audio latency compensation.** Some systems may have audio latency. Bemuse
contains a calibration system to compensate for the audio latency.

**Play now at https://bemuse.ninja/.**

## Technology

- The web application is powered by **[React](https://facebook.github.io/react/)
and [Redux](http://redux.js.org/).**

- The game engine is powered by **[PixiJS](http://www.pixijs.com/).**

## Development

Install [Node.js](https://nodejs.org/en/)

```
# Install Rush
npm install --global @microsoft/rush

# Clone Bemuse
git clone https://github.com/bemusic/bemuse.git

# Enter the main repository
cd bemuse

# Install the dependencies
rush update

# Prepare all sub-projects
rush build --to-except bemuse

# Start development server
rush dev
```

For more information, check out the [Developer Guide](https://bemuse.ninja/project/docs/developer-guide.html).

Note: Online ranking features are not available.

## Sub-projects

This repository holds the code for other sub-projects, which are available for
use on npm.

| Project name | Badge | Description |
| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- |
| [**bms**](packages/bms) | [![npm](https://img.shields.io/npm/v/bms.svg)](http://npmjs.com/package/bms) | JavaScript [BMS](https://hitkey.nekokan.dyndns.info/cmds.htm) parser |
| [**bmson**](packages/bmson) | [![npm](https://img.shields.io/npm/v/bmson.svg)](http://npmjs.com/package/bmson) | JavaScript [bmson](https://bmson.nekokan.dyndns.info/) parser |
| [**bemuse-tools**](packages/bemuse-tools) | [![npm](https://img.shields.io/npm/v/bemuse-tools.svg)](http://npmjs.com/package/bemuse-tools) | Tools for [hosting your own music server](https://bemuse.ninja/project/docs/music-server.html). |
| [**bemuse-indexer**](packages/bemuse-indexer) | [![npm](https://img.shields.io/npm/v/bemuse-indexer.svg)](http://npmjs.com/package/bemuse-indexer) | Library for scanning a directory for BMS/bmson files and generate a metadata. |
| [**bemuse-notechart**](packages/bemuse-notechart) | [![npm](https://img.shields.io/npm/v/bemuse-notechart.svg)](http://npmjs.com/package/bemuse-notechart) | Library for loading a notechart for use in game. |

## How to contribute

- Drop a :star: on the GitHub repository (optional).

- Before contributing, please read [CONTRIBUTING.md](https://github.com/bemusic/bemuse/blob/master/CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](https://github.com/bemusic/bemuse/blob/master/CODE_OF_CONDUCT.md).

## Our amazing contributors🌟

<a align="center" href="https://github.com/bemusic/bemuse/graphs/contributors">
<img src="https://contrib.rocks/image?repo=bemusic/bemuse&&max=817" />
</a>

## License

[AGPLv3](LICENSE). Note that this license only applies to the main Bemuse
project, not the [sub-projects](#sub-projects), which has its own license terms
(mostly MIT).
# Bemuse-like Rhythm Game (Prototype) — web-mvp-extend

This branch contains an extended web MVP for a Bemuse-like rhythm game.

What’s included
- Shared engine (TypeScript) with improved timing, note state tracking and judgement callbacks.
- Scoring module with judgement windows and points.
- Updated Canvas-based gameplay component with judgement overlays and local audio loading.
- Simple Chart Editor stub (UI + basic note placement & export).
- Example beatmap JSON.

Run locally (after files added):
1. npm install
2. npm run dev
3. Open http://localhost:5173

Notes and next steps
- Audio: Browsers block autoplay; start playback via a user gesture (Start button).
- The placeholder audio file is referenced as public/placeholder.mp3 — replace with a real audio file or load a local one via the file input in the UI.
- This prototype focuses on timing and core gameplay flow; more polish (skins, effects, editor refinements, importers) comes next.