Join us on Discord!
You can help CodeWalrus stay online by donating here.

HTML5 osu!mania (and later osu! standard)

Started by unknownloner, December 02, 2014, 02:01:40 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

unknownloner

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.

  
/)

Yuki

Looks pretty cool! I use Chrome and it works okay.
  • Calculators owned: TI-83+ (dead?), Casio Prizm (also dead???)
  • Consoles, mobile devices and vintage computers owned: A lot
Read Zarmina!
YUKI-CHAAAANNNN
In the beginning there was walrii. In the end there will be walrii. All hail our supreme leader :walrii: --Snektron

if you wanna throw money at me and/or CodeWalrus monthly it's here

pimathbrainiac

Holy crap that is amazing! O.O

So what is your plan for the next update (as in, what do you plan to accomplish)?
Well, I'm bach here too!

unknownloner

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.

  
/)

pimathbrainiac

Cool! I wish you luck with this project!
and hope I can port it to Java someday... *runs*
Well, I'm bach here too!

Dream of Omnimaga

Wow that came out nicely it seems. :D 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?
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U

Yuki

Not really, HTML5 is getting almost as fast as desktop applications nowadays, with Javascript optimizations compilers throw in.
  • Calculators owned: TI-83+ (dead?), Casio Prizm (also dead???)
  • Consoles, mobile devices and vintage computers owned: A lot
Read Zarmina!
YUKI-CHAAAANNNN
In the beginning there was walrii. In the end there will be walrii. All hail our supreme leader :walrii: --Snektron

if you wanna throw money at me and/or CodeWalrus monthly it's here

unknownloner

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.

  
/)

Dream of Omnimaga

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?
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U

unknownloner

#9
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

  
/)

Dream of Omnimaga

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.
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U

unknownloner

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.

  
/)

novenary

Well that's a nice thing you've got right there. :) Good luck completing it !

Dream of Omnimaga

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?
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U

unknownloner


  
/)

Powered by EzPortal