forum

osu! web beatmap visualiser

posted
Total Posts
9
Topic Starter
ekgame
For a little while now I've been working on a project and it has come to the point where I feel I can actually show it off. I've seen attempts to make something like this before, but that didn't stop me.

This demo shows beatmap rendering onto HTML5 canvas using Canvas API. I tried to recreate the game as close as possible, with all the fancy animations. It runs surprisingly well, but there is still room for optimization. You may notice a lower framerate (~30fps) on some browsers, but that is entirely the browser's fault as some of them fail to update the current song time frequently enough. This should be fixed when I switch to Web Audio API for the music. For the moment, use Chrome for the best experience.

This project is written in Dart and compiled to JavaScript. I'll probably post the source code some time later, as there are still a lot of things to add and improve, some code to refactor.

I've tested this on Chrome, Firefox and Chrome for Android and all of them seemed to work fine.

Ultimately, I want to make a replay player, but there are still things to be done before I can even begin to work with replays.

For now, here are some maps you can take a look at:
Foreground Eclipse - Noble [Insane]
Reol - Asymmetry [P A N's Extra]
Reol - Asymmetry [Normal]
Reol - Asymmetry [Meyrink's Easy]
utsuP - MiKUSABBATH [Tarrasky's Extra]
utsuP - MiKUSABBATH [Tarrasky's Normal]
utsuP - MiKUSABBATH [Distortion]
IOSYS - Third Eye Ya! [Normal] (some "exotic" and broken sliders)
ONE OK ROCK - Clock Strikes [Insane]
ONE OK ROCK - Clock Strikes [Moway's Extra]
iojjj - Akui to Ai no Sukima no Puzzle [Normal]
iojjj - Akui to Ai no Sukima no Puzzle [Diplomatic Immunity]


The skin assets used are from Phase 1.6 by Hazrd.
Any kind feedback is absolutely appreciated.
Fiplo
Amazing work.
Renevant
This is awesome. Very nice job

It would be nice if the offset would snap at 0, or having the ability to type it in would be cool. I couldn't seem to get it back to exactly 0 for the life of me (though i know it doesnt make a big difference).
Storyboarder
awesome
Diony
This would be awesome for sneaking a preview at a map you've never played before, in an important multi match for instance. Awesome project!
BloodCat2789
opsu!'s slider implementation would help you process that sliders. (IOSYS - Third Eye Ya! [Normal])
I converted it to javascript version.
Look at my github repo or https://bloodcat.com/osu/preview.html#646391
GL
Howl
You may want to take a look at https://github.com/SirCmpwn/osuweb - as it is another beatmap visualiser that does the same exact things.
san-lotso
This is fabulous its what osu needs a map preview to see if its too easy or too hard, this shud be added to a feature for people who have osu supporter tag when selecting a beatmap a preview of the music plays it wud be nice instead of the background for the beatmap to be replaced with this. :D fabulous
Howl

san-lotso wrote:

This is fabulous its what osu needs a map preview to see if its too easy or too hard,
star rating anyone?
this shud be added to a feature for people who have osu supporter tag when selecting a beatmap a preview of the music plays it wud be nice instead of the background for the beatmap to be replaced with this. :D fabulous
this is a viewer in HTML5. If you need one in the osu! client, you can use the "auto mod". If you want the beatmap being played in the song selection, let me say that IS possible, but would require a lot of work. As the beatmap selection and the gameplay are two entirely different parts of the game and thus of the code. It is, simply put, a pain to implement. Not to mention that it would probably go at a really low FPS on most players' computer.
If you want to request it really, though, please do a request in the Feature Requests forum.
Please sign in to reply.

New reply