Guest
home
beatmaps
rankings
community
store
help
forum
  1. Forums
  2. osu!
  3. Development

osu! in JavaScript & HTML5

posted
Total Posts
270
show more
TheCameleon
85 posts
Joined September 2010
TheCameleon
I'm working on an addon system !
This would make my life easier to add "Special Modes" (flashlight, double time ...)
Moreover, it would help me to enhance the main menu.

On the other hand, anyone would be able to submit his own addon !
They are quite easy to make, you can ask me if you want me to extend the API :)
(addon system is coded, but not uploaded right now)

Btw, I'm back to work on sliders !
TheCameleon
85 posts
Joined September 2010
TheCameleon
Grrrrrr.....
Sliders are f****** hard to make !
If anyone wants to help :P

Well, I found some good ideas that help a lot :P

PS : for those interested in technical stuff :
Before, thick lines were drown for sliders
Now, I'm trying to draw the whole path "around" the slider (and that's much harder)
mm201
osu! Alumni
4,495 posts
Joined August 2008
mm201
http://en.wikipedia.org/wiki/B%C3%A9zier_curve
http://en.wikipedia.org/wiki/Catmull-Ro ... Rom_spline

Also note that for beziers, two consecutive points on the same spots means the end of one bezier and the beginning of another.
Slider velocity is measured in hundreds of osupixels per beat.
Guy-kun
770 posts
Joined December 2009
Guy-kun
Wow, this looks like its actually getting somehwere now, I'm starting to be impressed ^^
TheCameleon
85 posts
Joined September 2010
TheCameleon
I had an idea about the iPhone version. That should be possible. But it would be quite an "awful" work (it would require the player to clic on a button when the music starts :/ ), cause we can't play audio in background with Safari iPhone.
If you want a version for any other device (phones), please tell me, and I'll give it a look if possible ;)
Edit : the device has to support html5's <canvas>

I'm still working on (linear) sliders (still the drawing -- there are no built-in function to draw the outline), but it looks much better. For those wondering, tests are not on osu-web right now, I'm just trying to make it work before adding it in osu-web.
mm201
osu! Alumni
4,495 posts
Joined August 2008
mm201

TheCameleon wrote:

PS : for those interested in technical stuff :
Before, thick lines were drown for sliders
Now, I'm trying to draw the whole path "around" the slider (and that's much harder)
peppy tried something like this in 2007. It wasn't pretty. :P You'll run into crazy math issues when you consider sharp corners and overlapping paths. Drawing a thick line for the outline, then another for the path, is probably the simplest option for now. osu! (peppysliders) does it this way.

If Canvas supports anything like max blending, palette substitution, and backbuffers, you could take an mmslider approach, but I wouldn't expect this is possible.

inb4webgl
adamskii_uk
324 posts
Joined April 2008
adamskii_uk

TheCameleon wrote:

I'm still working on (linear) sliders (still the drawing -- there are no built-in function to draw the outline), but it looks much better.
I'm no expert in designing games, but one method I can think of to fix this outline issue would be to create a slider using two lines of different thicknesses. Then you could place the thicker line centered underneath the thinner line, thus creating the illusion of a outline around the slider.
peppy
19,301 posts
Here since the beginning
peppy

MetalMario201 wrote:

Drawing a thick line for the outline, then another for the path, is probably the simplest option for now.

adamskii_uk wrote:

I'm no expert in designing games, but one method I can think of to fix this outline issue would be to create a slider using two lines of different thicknesses. Then you could place the thicker line centered underneath the thinner line, thus creating the illusion of a outline around the slider.
adamskii_uk
324 posts
Joined April 2008
adamskii_uk

peppy wrote:

MetalMario201 wrote:

Drawing a thick line for the outline, then another for the path, is probably the simplest option for now.
Yeah, I didn't read MetalMario's post completely, I just glanced through it, so I didn't notice he already mentioned the same thing as I did. :)
TheCameleon
85 posts
Joined September 2010
TheCameleon

MetalMario201 wrote:

Drawing a thick line for the outline, then another for the path, is probably the simplest option for now. osu! (peppysliders) does it this way.
That's what I've been doing for a while ;)
The advantage of drawing the path around the slider is that I can use a built-in js function to know if the player clicked in the slider or not. But as it is really hard to do (and takes a lot of time to work), I think I'll just keep drawing thick lines, and check if the user clicks in the slider with some home-made stuff. Moreover, it will be very similar to how I will know where the user clicks/slides on the slider. So that way I don't bother doing 2 different tools, when 1 is enough.
mm201
osu! Alumni
4,495 posts
Joined August 2008
mm201
In terms of gameplay, the cursor being inside/outside the slider track is irrelevant. The ball is the only thing you should be concerned with.
TheCameleon
85 posts
Joined September 2010
TheCameleon

MetalMario201 wrote:

In terms of gameplay, the cursor being inside/outside the slider track is irrelevant. The ball is the only thing you should be concerned with.
Hmmm.... that's right !
Thanks a lot for the tip :P
It will be much easier :)
TheCameleon
85 posts
Joined September 2010
TheCameleon
Just finished a function that tells me the coordinates of a point on a (linear) slider, from a given distance from the beginning of the slider.
Quite useful to draw the ballon (or at last a circle).

Still have to add it in osu-web :P
TheCameleon
85 posts
Joined September 2010
TheCameleon
Now works on iPhones (with music) and more browsers ;)
(it tries both .mp3 and .ogg)
Guy-kun
770 posts
Joined December 2009
Guy-kun
Etremely laggy on the iPhone 4 :c
Plus the page is scrollable which makes you drag it accidentally all the time, removing this would be a big improvement
TheCameleon
85 posts
Joined September 2010
TheCameleon
Scroll disabled ;)
The lag is awful, I know, but I can't fix that :/ (or at least I don't think so)

On sliders, a circle is now drawn, but it's really buggy, and doesn't follow the slider the way it would, nor at the good time :/ I'll try to fix that asap ;)
Galkan
Global Moderator
2,023 posts
Joined September 2009
Galkan
Status:

Opera: lagging
Firefox: lagging+autoresizing to window mode
IE: not even loading
TheCameleon
85 posts
Joined September 2010
TheCameleon
Autoresizing is the most awful bug as I can't fix it, because there are no reason for such a bug (I never call the resize function).
On firefox, the only fix I have, it you to do the following : Tools > Settings > Content (3rd tab) > Javascript > Advanced > uncheck "Allow scripts to move/resize windows" (given names may not be accurate as I translated them from French)

Edit : found where the bug is located. Still dont know why it resizes the window :/
TheCameleon
85 posts
Joined September 2010
TheCameleon
The AutoResize bug (on Firefox) seems to be fixed.
Is it the case for you ?

Fact : the bug was in the function that draws the current progress of the song (the circle at the top-right corner)
Galkan
Global Moderator
2,023 posts
Joined September 2009
Galkan
It helped, but the game still lags. I mean, it runs smoothly first 15 seconds then it lags or completely freezes. Same in Opera.
TheCameleon
85 posts
Joined September 2010
TheCameleon
I think it's an issue with sliders (lag + freeze). I'm working on it, and it's still very buggy. Sometimes it freezes, and I know why, but it helps a lot for debugging purpose ;)
Hyguys
1,272 posts
Joined May 2010
Hyguys

Galkan92 wrote:

It helped, but the game still lags. I mean, it runs smoothly first 15 seconds then it lags or completely freezes. Same in Opera.
^this
also , the skin is good , but try using numbers 1,2,3,4,5,6,7,8,9,0 from default osu! skin , if you can
Guy-kun
770 posts
Joined December 2009
Guy-kun
Runs perfect on chrome <:
mm201
osu! Alumni
4,495 posts
Joined August 2008
mm201
Rofl, I just got an idea: render the slider tracks serverside! :D
Cache each slider for each map, then serve them as pngs. Render them on the server using a better technology like OpenGL.
Lemon Water_old
199 posts
Joined March 2010
Lemon Water_old
I don't really likes this song <3
Ephemeral
Inland Empire
3,936 posts
Joined April 2009
Ephemeral
everything bar the sliders works perfectly fine in chrome, but freezes after 10-12s in firefox and opera
rust45
1,088 posts
Joined May 2009
rust45
After the first three hit circles it just stops working, the browser is running fine and if I refresh it starts again and keeps going until the same part where it froze.
TheCameleon
85 posts
Joined September 2010
TheCameleon
Hmmm.... I fixed the freeze.

I put another song ;) The song is better, but the beatmap is awful :/
Does anyone know a good music (ACDC, Rolling Stones,Beatles,...), that is nice to hear over 100times a day when debugging ? (the 20first seconds need to be VERY nice, as I almost only hear them)
RandomJibberish
osu! Alumni
1,833 posts
Joined August 2009
RandomJibberish
The Beatles - Here Comes the Sun

have fun
adamskii_uk
324 posts
Joined April 2008
adamskii_uk

TheCameleon wrote:

Hmmm.... I fixed the freeze.
No, you haven't. ;) Before I was able to click on a few hit circles before the game froze, but now it freezes on the very first hit circle, when playing the game in firefox.
TheCameleon
85 posts
Joined September 2010
TheCameleon

RandomJibberish wrote:

The Beatles - Here Comes the Sun

have fun
Thanks a lot :)
debugging will be funnier :)

About the freeze, it might be a cache issue. Try to re/load the page a few times (Shift+F5). On Chrome I had to clear the cache. All this since I changed the beatmap.
Galkan
Global Moderator
2,023 posts
Joined September 2009
Galkan
Status:

Opera:

adamskii_uk wrote:

it freezes on the very first hit circle, when playing the game
Firefox: Freezing after 30 sec
IE: Still not loading (is it going to be working on?)

Also, on Opera I do not see the osu! cursor (as in FF) :F Why is it?
Guy-kun
770 posts
Joined December 2009
Guy-kun

Galkan92 wrote:

Status:

Opera:

adamskii_uk wrote:

IE: Still not loading (is it going to be working on?)
I.E. Always has the shittiest support for anything, mostly HTML5, don't get in the slightest excited, I doubt he'll get much working in IE
TheCameleon
85 posts
Joined September 2010
TheCameleon

Guy-kun wrote:

I.E. Always has the shittiest support for anything, mostly HTML5, don't get in the slightest excited, I doubt he'll get much working in IE
That's right ;)
But I read that IE9 has a good support of html5, so, if you really want to use IE, you need the beta of IE9 ;)
Guy-kun
770 posts
Joined December 2009
Guy-kun
Oh, I was talking about IE9 :l any previous versions have basically -no- HTML5 support, and ie9 is shit at best~
TheCameleon
85 posts
Joined September 2010
TheCameleon
:/
Can anyone paste here the content of IE9's error console ? (should be called sth like "(Developper) tools"). As I don't use Windows, I can't test by my own.
Those error messages are much more useful than saying "it doesn't work" ;)
Guy-kun
770 posts
Joined December 2009
Guy-kun
<:
Thank me later

>Looks like the audio player fails to load and breaks the script from continuing any further pretty much...

Lemon Water_old
199 posts
Joined March 2010
Lemon Water_old
I saw a slider smaller than the others ;)
TheCameleon
85 posts
Joined September 2010
TheCameleon

Guy-kun wrote:

<:
Thank me later

>Looks like the audio player fails to load and breaks the script from continuing any further pretty much...
69 C00D36C4
C00D36B4 Either the video codec or the audio codec is unsupported, or one of the streams in a video file is corrupted. This content may not be supported. For more information, visit the following Xbox website: www.xbox.com/support
From Microsoft's website. But this is said to affect *only* xbox :/
Guy-kun
770 posts
Joined December 2009
Guy-kun
>Microsoft
>Believing their help

I wouldn't bother too much with IE, you'll be very limited and get stuck constantly :l
show more
Please sign in to reply.

New reply

0
101 / 270