* WalrusIRC

You need to have 5 posts and not be part of restricted usergroups in order to use the WalrusIRC embedded shoutbox. However, you can also access our IRC channel called #CodeWalrus via EFnet.

Author Topic: HTML5 osu!mania (and later osu! standard)  (Read 13354 times)

0 Members and 1 Guest are viewing this topic.

Offline unknownloner

  • Full User
  • CW 4x3 challenge winner!
  • *
  • Join Date: Dec 2014
  • Location: Yesterday
  • Posts: 221
  • Post Rating Ratio: +1/-0
  • WHY CAN'T I CLICK ALL THESE CIRCLES?!
    • Code Blog
  • Gender: Male
HTML5 osu!mania (and later osu! standard)
« on: December 02, 2014, 02:01:40 am »
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:
<iframe width="640" height="385" src="//www.youtube.com/embed/1PgNIuIK_S0?fs=1&start=" frameborder="0" allowfullscreen></iframe>

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 »



  
/)

Offline Juju

  • aka Yuki Kagayaki aka J̵̭͕͇ù̞̭̝̯̦j̴̭̙̗͖͡ù͏͓̲̕
  • CodeWalrus Staff
  • Super User
  • Server Maintenance
  • Moderator
  • Forum Maintenance
  • Original 5
  • CodeWalrus Supporter
  • *
  • Join Date: Nov 2014
  • Location: Inside a walrus
  • Posts: 3133
  • Post Rating Ratio: +32/-2
  • Couch potato
    • jul.savard
    • juju2143
    • @juju2143
    • juju2143
    • @julosoft
    • juju-kun
    • /u/juju2143
    • juju2143
    • @juju2143
    • Juju's shed
  • Gender: Female
  • WalriiPoints: 99999
Re: HTML5 osu!mania (and later osu! standard)
« Reply #1 on: December 02, 2014, 02:08:03 am »
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
On semi-hiatus until who knows when. CODEWALRUS 2.0 COMING SOON
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

Offline pimathbrainiac

  • Full User
  • Original 5
  • Join Date: Nov 2014
  • Location:
  • Posts: 421
  • Post Rating Ratio: +2/-1
  • Formerly Banned CW Co-Founder Turned News Editor
    • pimathbrainiac
  • Gender: Other
Re: HTML5 osu!mania (and later osu! standard)
« Reply #2 on: December 02, 2014, 02:23:51 am »
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!

Offline unknownloner

  • Full User
  • CW 4x3 challenge winner!
  • *
  • Join Date: Dec 2014
  • Location: Yesterday
  • Posts: 221
  • Post Rating Ratio: +1/-0
  • WHY CAN'T I CLICK ALL THESE CIRCLES?!
    • Code Blog
  • Gender: Male
Re: HTML5 osu!mania (and later osu! standard)
« Reply #3 on: 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.

  
/)

Offline pimathbrainiac

  • Full User
  • Original 5
  • Join Date: Nov 2014
  • Location:
  • Posts: 421
  • Post Rating Ratio: +2/-1
  • Formerly Banned CW Co-Founder Turned News Editor
    • pimathbrainiac
  • Gender: Other
Re: HTML5 osu!mania (and later osu! standard)
« Reply #4 on: 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*
Well, I'm bach here too!

Offline xlibman

  • Omni founder & CW co-founder
  • Super User
  • Original 5
  • CodeWalrus Supporter
  • *
  • Join Date: Nov 2014
  • Location: Quebec, Canada
  • Posts: 18878
  • Post Rating Ratio: +99/-4
    • dj_omnimaga
    • DJOmnimaga.music
    • @DJOmnimaga
    • dj_omnimaga
    • @DJOmnimaga
    • /u/DJ_Omnimaga
    • DJOmnimaga
    • 112/11286
    • @djomnimaga
    • @DJOmnimaga
    • DJ Omnimaga music store
  • Gender: Male
Re: HTML5 osu!mania (and later osu! standard)
« Reply #5 on: December 02, 2014, 02:46:01 pm »
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-57, 73, TI-80 (broken), TI-81, TI-82, TI-83, TI-83+ (broken), TI-83+ (broken), TI-83+SE (broken), TI-84+, TI-84+CSE, TI-84+CE, TI-85, TI-86, TI-89T, TI-92, TI-Nspire, TI-Nspire CX (semi-broken), HP 39gII, HP Prime, Casio fx-7000G, fx-7400G+, fx-7700GE, fx-9750G+, fx-9750GII, fx-9860G, cfx-9850G, FX-1.0+, fx-CG10, fx-CP400
  • Consoles, mobile devices and vintage computers owned: Samsung i5510, Nexus 5, Atari 2600, Lynx, SMS, Game Gear, Genesis, Dreamcast, NES, SNES, N64, GCN, Wii, Wii U, GBA, DS, 3DS, PS2, PS3, PS4, PSP, PSVita, XBox 360, XBOne

Bandcamp|Reverbnation|Facebook|Youtube|Twitter
Retired Omnimaga admin (2001-11) and editor (2012-14)

Offline Juju

  • aka Yuki Kagayaki aka J̵̭͕͇ù̞̭̝̯̦j̴̭̙̗͖͡ù͏͓̲̕
  • CodeWalrus Staff
  • Super User
  • Server Maintenance
  • Moderator
  • Forum Maintenance
  • Original 5
  • CodeWalrus Supporter
  • *
  • Join Date: Nov 2014
  • Location: Inside a walrus
  • Posts: 3133
  • Post Rating Ratio: +32/-2
  • Couch potato
    • jul.savard
    • juju2143
    • @juju2143
    • juju2143
    • @julosoft
    • juju-kun
    • /u/juju2143
    • juju2143
    • @juju2143
    • Juju's shed
  • Gender: Female
  • WalriiPoints: 99999
Re: HTML5 osu!mania (and later osu! standard)
« Reply #6 on: 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.
  • Calculators owned: TI-83+ (dead?), Casio Prizm (also dead???)
  • Consoles, mobile devices and vintage computers owned: A lot
On semi-hiatus until who knows when. CODEWALRUS 2.0 COMING SOON
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

Offline unknownloner

  • Full User
  • CW 4x3 challenge winner!
  • *
  • Join Date: Dec 2014
  • Location: Yesterday
  • Posts: 221
  • Post Rating Ratio: +1/-0
  • WHY CAN'T I CLICK ALL THESE CIRCLES?!
    • Code Blog
  • Gender: Male
Re: HTML5 osu!mania (and later osu! standard)
« Reply #7 on: 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.

  
/)

Offline xlibman

  • Omni founder & CW co-founder
  • Super User
  • Original 5
  • CodeWalrus Supporter
  • *
  • Join Date: Nov 2014
  • Location: Quebec, Canada
  • Posts: 18878
  • Post Rating Ratio: +99/-4
    • dj_omnimaga
    • DJOmnimaga.music
    • @DJOmnimaga
    • dj_omnimaga
    • @DJOmnimaga
    • /u/DJ_Omnimaga
    • DJOmnimaga
    • 112/11286
    • @djomnimaga
    • @DJOmnimaga
    • DJ Omnimaga music store
  • Gender: Male
Re: HTML5 osu!mania (and later osu! standard)
« Reply #8 on: 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?
  • Calculators owned: TI-57, 73, TI-80 (broken), TI-81, TI-82, TI-83, TI-83+ (broken), TI-83+ (broken), TI-83+SE (broken), TI-84+, TI-84+CSE, TI-84+CE, TI-85, TI-86, TI-89T, TI-92, TI-Nspire, TI-Nspire CX (semi-broken), HP 39gII, HP Prime, Casio fx-7000G, fx-7400G+, fx-7700GE, fx-9750G+, fx-9750GII, fx-9860G, cfx-9850G, FX-1.0+, fx-CG10, fx-CP400
  • Consoles, mobile devices and vintage computers owned: Samsung i5510, Nexus 5, Atari 2600, Lynx, SMS, Game Gear, Genesis, Dreamcast, NES, SNES, N64, GCN, Wii, Wii U, GBA, DS, 3DS, PS2, PS3, PS4, PSP, PSVita, XBox 360, XBOne

Bandcamp|Reverbnation|Facebook|Youtube|Twitter
Retired Omnimaga admin (2001-11) and editor (2012-14)

Offline unknownloner

  • Full User
  • CW 4x3 challenge winner!
  • *
  • Join Date: Dec 2014
  • Location: Yesterday
  • Posts: 221
  • Post Rating Ratio: +1/-0
  • WHY CAN'T I CLICK ALL THESE CIRCLES?!
    • Code Blog
  • Gender: Male
Re: HTML5 osu!mania (and later osu! standard)
« Reply #9 on: 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 »

  
/)

Offline xlibman

  • Omni founder & CW co-founder
  • Super User
  • Original 5
  • CodeWalrus Supporter
  • *
  • Join Date: Nov 2014
  • Location: Quebec, Canada
  • Posts: 18878
  • Post Rating Ratio: +99/-4
    • dj_omnimaga
    • DJOmnimaga.music
    • @DJOmnimaga
    • dj_omnimaga
    • @DJOmnimaga
    • /u/DJ_Omnimaga
    • DJOmnimaga
    • 112/11286
    • @djomnimaga
    • @DJOmnimaga
    • DJ Omnimaga music store
  • Gender: Male
Re: HTML5 osu!mania (and later osu! standard)
« Reply #10 on: 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.
  • Calculators owned: TI-57, 73, TI-80 (broken), TI-81, TI-82, TI-83, TI-83+ (broken), TI-83+ (broken), TI-83+SE (broken), TI-84+, TI-84+CSE, TI-84+CE, TI-85, TI-86, TI-89T, TI-92, TI-Nspire, TI-Nspire CX (semi-broken), HP 39gII, HP Prime, Casio fx-7000G, fx-7400G+, fx-7700GE, fx-9750G+, fx-9750GII, fx-9860G, cfx-9850G, FX-1.0+, fx-CG10, fx-CP400
  • Consoles, mobile devices and vintage computers owned: Samsung i5510, Nexus 5, Atari 2600, Lynx, SMS, Game Gear, Genesis, Dreamcast, NES, SNES, N64, GCN, Wii, Wii U, GBA, DS, 3DS, PS2, PS3, PS4, PSP, PSVita, XBox 360, XBOne

Bandcamp|Reverbnation|Facebook|Youtube|Twitter
Retired Omnimaga admin (2001-11) and editor (2012-14)

Offline unknownloner

  • Full User
  • CW 4x3 challenge winner!
  • *
  • Join Date: Dec 2014
  • Location: Yesterday
  • Posts: 221
  • Post Rating Ratio: +1/-0
  • WHY CAN'T I CLICK ALL THESE CIRCLES?!
    • Code Blog
  • Gender: Male
Re: HTML5 osu!mania (and later osu! standard)
« Reply #11 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.

  
/)

Offline Streetwalrus

  • Professional slacker
  • Super User
  • Original 5
  • Join Date: Nov 2014
  • Location: Israel
  • Posts: 2903
  • Post Rating Ratio: +20/-0
  • ƎW∀⅁ ƎH⊥
  • Gender: Male
Re: HTML5 osu!mania (and later osu! standard)
« Reply #12 on: December 03, 2014, 10:13:25 pm »
Well that's a nice thing you've got right there. :) Good luck completing it !
  • Calculators owned: TI-80, HP 40G, TI-84 Plus rev G (yay 128k RAM), TI-83 Plus Silver Edition (broken LCD), TI-82 Stats.fr (black), TI-Nspire CX rev C (yay Nlaunchy), TI-83+ SE ViewScreen



Offline xlibman

  • Omni founder & CW co-founder
  • Super User
  • Original 5
  • CodeWalrus Supporter
  • *
  • Join Date: Nov 2014
  • Location: Quebec, Canada
  • Posts: 18878
  • Post Rating Ratio: +99/-4
    • dj_omnimaga
    • DJOmnimaga.music
    • @DJOmnimaga
    • dj_omnimaga
    • @DJOmnimaga
    • /u/DJ_Omnimaga
    • DJOmnimaga
    • 112/11286
    • @djomnimaga
    • @DJOmnimaga
    • DJ Omnimaga music store
  • Gender: Male
Re: HTML5 osu!mania (and later osu! standard)
« Reply #13 on: December 04, 2014, 01:23:04 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-57, 73, TI-80 (broken), TI-81, TI-82, TI-83, TI-83+ (broken), TI-83+ (broken), TI-83+SE (broken), TI-84+, TI-84+CSE, TI-84+CE, TI-85, TI-86, TI-89T, TI-92, TI-Nspire, TI-Nspire CX (semi-broken), HP 39gII, HP Prime, Casio fx-7000G, fx-7400G+, fx-7700GE, fx-9750G+, fx-9750GII, fx-9860G, cfx-9850G, FX-1.0+, fx-CG10, fx-CP400
  • Consoles, mobile devices and vintage computers owned: Samsung i5510, Nexus 5, Atari 2600, Lynx, SMS, Game Gear, Genesis, Dreamcast, NES, SNES, N64, GCN, Wii, Wii U, GBA, DS, 3DS, PS2, PS3, PS4, PSP, PSVita, XBox 360, XBOne

Bandcamp|Reverbnation|Facebook|Youtube|Twitter
Retired Omnimaga admin (2001-11) and editor (2012-14)

Offline unknownloner

  • Full User
  • CW 4x3 challenge winner!
  • *
  • Join Date: Dec 2014
  • Location: Yesterday
  • Posts: 221
  • Post Rating Ratio: +1/-0
  • WHY CAN'T I CLICK ALL THESE CIRCLES?!
    • Code Blog
  • Gender: Male
Re: HTML5 osu!mania (and later osu! standard)
« Reply #14 on: December 04, 2014, 01:56:53 am »
Pretty much if you can use javascript, or any of these https://github.com/jashkenas/coffeescript/wiki/list-of-languages-that-compile-to-js then you're good to go.

  
/)

 


You can also use the following HTML or bulletin board code to share it on your page or forum signature!


Also do not forget to check our affiliates below.
Planet Casio TI-Planet Calc.news BroniesQC BosaikNet Velocity Games