HTML5 osu!mania (and later osu! standard)

b/Web publicado por u/unknownloner December 02, 2014, 02:01:40 AM

HTML5 osu!mania (and later osu! standard)

This is a thing I'm actually really excited about.
I'm implementing osu!mania to run in a web browesr, including loading actual osu!mania maps. If you don't know what osu!mania is, think guitar hero but it goes up to 8 keys.
Anyways, enough chit chat, here's links:
http://z80.ukl.me/dartmania/dartmania.html
Please use chrome to view it right now because stuff seems to get out of sync for me in firefox. I'll be fixing that soon
NEW VERSION: http://z80.ukl.me/webmania/

If it doesn't work for you, here's youtube:

It's called dart!mania because I'm writing it in the dart language. I'll post source later when it works better.

Last Edit: July 09, 2015, 10:05:23 AM by unknownloner

Inicia sesión o crea una cuenta para dejar un comentario

u/Yuki December 02, 2014, 02:08:03 AM

Looks pretty cool! I use Chrome and it works okay.

u/pimathbrainiac December 02, 2014, 02:23:51 AM

Holy crap that is amazing!

So what is your plan for the next update (as in, what do you plan to accomplish)?

u/unknownloner December 02, 2014, 02:27:50 AM

Going to switch the mp3 decoder to a pure javascript decoder so I can gurantee support mp3 in all browsers and also have better control over timing. Then I want to make it actually accept user input to play it. Later I want to implement the standard osu game mode (the one with the circles and sliders everywhere), and also play back game replays from other people's plays in the actual osu game client.

u/pimathbrainiac December 02, 2014, 02:29:46 AM

Cool! I wish you luck with this project!
and hope I can port it to Java someday... *runs*

u/Dream of Omnimaga December 02, 2014, 02:46:01 PM

Wow that came out nicely it seems.

HTML5 definitively seems versatile for game development and in your case it doesn't lag. Would using sprites/images slow thing down a lot by the way?

u/Yuki December 02, 2014, 03:09:59 PM

Not really, HTML5 is getting almost as fast as desktop applications nowadays, with Javascript optimizations compilers throw in.

u/unknownloner December 02, 2014, 03:22:05 PM

Technically it's already using sprites, they're just 1x1 white pixel sprites scaled/colored as needed. (I may have been a little lazy while writing the library it uses for graphics). But anyways it's all hardware accelerated opengl type stuff.

u/Dream of Omnimaga December 03, 2014, 03:22:08 AM

Aah I see now. By the way, when scaling up sprites is it possible to choose if you want to use nearest neighboor or bi-linear filtering to prevent the images from looking blurry in more recent browsers?

u/unknownloner December 03, 2014, 03:50:16 AM

Yes it is. If you want a good reference for what I can do, the WebGL api available in browsers is a currently mirror of OpenGL ES 2.0 (with a few things added or removed, but for the majority of cases it can be treated as OpenGL ES 2.0).

In other words, if your android or iOS device can do it, I can do it and more (the 'and more' part is because the hardware is more powerful).

Also if anyone is interested, I'm using this library (which I also maintain) to make writing the graphics code easier.
https://github.com/unknownloner/DTMark

Last Edit: December 03, 2014, 03:53:39 AM by unknownloner

u/Dream of Omnimaga December 03, 2014, 03:55:39 AM

Ok cool to hear. If I ever port games to HTML5 (eg if this site gets an arcade) this could be handy. I can always stretch graphics up in an image editor but sometimes that takes more space.

u/unknownloner December 03, 2014, 04:26:06 AM

I should probably mention there's a difference between using the 'WebGL' canvas context and the '2d' canvas context.

The '2d' context is drop dread simple to use on it's own without any external libraries, but it's sooooooo slooooow if you wanna do anything remotely complex. (and personally I don't like it much anyway, but that's just because I low me some low-level graphics code)
WebGL is fast, but if you don't know what you're doing and don't care to learn you might have a bad time.
The middleground is to use a library which abstracts away the WebGL stuff at the cost of having to structure your code around the library.
My library takes a different approach from a lot of the popular ones by just being a helper library on top of WebGL, so it makes a lot of common tasks (like drawing some 2d sprites on the screen, and using sprite-sheets for animation frames) pretty easy, but you can still just write straight WebGL code if you want and it won't interfere.

u/novenary December 03, 2014, 10:13:25 PM

Well that's a nice thing you've got right there.

Good luck completing it !

u/Dream of Omnimaga December 04, 2014, 01:23:04 AM

Quote from: unknownloner on December 03, 2014, 04:26:06 AM
I should probably mention there's a difference between using the 'WebGL' canvas context and the '2d' canvas context.

The '2d' context is drop dread simple to use on it's own without any external libraries, but it's sooooooo slooooow if you wanna do anything remotely complex. (and personally I don't like it much anyway, but that's just because I low me some low-level graphics code)
WebGL is fast, but if you don't know what you're doing and don't care to learn you might have a bad time.
The middleground is to use a library which abstracts away the WebGL stuff at the cost of having to structure your code around the library.
My library takes a different approach from a lot of the popular ones by just being a helper library on top of WebGL, so it makes a lot of common tasks (like drawing some 2d sprites on the screen, and using sprite-sheets for animation frames) pretty easy, but you can still just write straight WebGL code if you want and it won't interfere.

So if somebody wants the speed of HP Prime calculator language, but absolutely can't stand any language that is lower-level than TI-83+BASIC (even C, Lua, Python and Java), then does he pretty much have to forget about HTML5 game programming?