forum

osu! in JavaScript & HTML5

posted
Total Posts
270
show more
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
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

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
Runs perfect on chrome <:
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
I don't really likes this song <3
Ephemeral
everything bar the sliders works perfectly fine in chrome, but freezes after 10-12s in firefox and opera
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
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
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

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

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

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
Oh, I was talking about IE9 :l any previous versions have basically -no- HTML5 support, and ie9 is shit at best~
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
<:
Thank me later

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

Lemon Water_old
I saw a slider smaller than the others ;)
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
>Microsoft
>Believing their help

I wouldn't bother too much with IE, you'll be very limited and get stuck constantly :l
Galkan
I might have been little unclear, but I was just only asking for supporting IE (as I don't think it's major, neither I use it), not that I want to play by it :3
TheCameleon

Galkan92 wrote:

I might have been little unclear, but I was just only asking for supporting IE (as I don't think it's major, neither I use it), not that I want to play by it :3
of course, but a wide support is (I think) useful ;) And as I read that IE9 supports well html5, it would be a good idea to support it as, it means it should be quite easy to do.
TheCameleon
A good check, would be to go there http://osu-web.tk/music.html with IE9, and tell me if it actually works (music playing AUTOMATICALLY) :) That would help a lot :)
TheCameleon
If you want to try sth "fun" go there http://osu-web.tk/length.html and click (at least twice) anywhere in the top left corner ;)
TheCameleon
Feels so better with that new beatmap :) (and music !)
TheCameleon
Btw it should no longer freeze ;)
The bug isn't solved however, but I just handle the bug...

Edit : the freeze is back, but because I made it so, for debugging purpose. I will re-"fix it asap ;)
(I recall you that it's still in "beta")
Derekku
There's an edit button, you know. You don't need to post five times in a row. :v
TheCameleon

Derekku wrote:

There's an edit button, you know. You don't need to post five times in a row. :v
;)

I think I found where the main bug is from !
Edit : numbers were actually saved as string (when parsing the osu file), and this caused issues when doing math stuff (returned things like "40-30" instead of 10 :/)
Guy-kun

Derekku wrote:

There's an edit button, you know. You don't need to post five times in a row. :v
He must like post count.

[edit]Almost as much as me.
TheCameleon
From here, freezes and (basic) slider stuff seem to be fixed ;)
Please report if it's not the case for you ;)

Edit : next step > make sliders better (correct timing, ...)
bope
freeze seems fixed in chrome but firefox still has the freezes for me
Galkan
Status:

Opera: lagging as hell.
Firefox: Working - gained 30k points, lol
Guy-kun
w/e
anonymous_old

Guy-kun wrote:

Stop the stream of constant minor updates, which is almost twitter-bad

Shouldn't you get something to really show rather than posting every little thing you do here? Currently it's now worse, timing and all than it was a few days ago.
This isn't even beta, its alpha, its kinda annoying.

>Yes I know I've changed my mind from what I said before :T

I'd like to know actual progress/ versions rather than in effect 'builds', which I think you should keep to your personal blog

tl;dr ver:
SPOILER
Stop posting here so often
nou
TheCameleon
I'll consider installing Opera so as to see what's going on. You say it's laggy, however Opera is said to be a very good browser. I'll do my best to reduce lag ;)

If you have any request/idea for osu-web, just say it :) I'll do my best ;)
If you want to help the project by developing, just DM me (javascript knownledge required)
Guy-kun

strager wrote:

nou
I had good intentions ;-;
rust45
Things I noticed:

When you click on a circle early, it's number and approach circle dissapear, and it is still clickable for points.
The sliders don't work, I see the track, then a yellow circle going on the track backwards, it ends up and the beginning of the slider when you are meant to click on the sliders.
TheCameleon
Fixed ;)
But you can't "slide" on sliders ;) (you can for fun, but that won't change anything :P)

Edit : You can now "slide" on sliders !
Points do NOT increase when sliding. The only thing you can see is a message "win289", 289 (example) being the abscissa of where you cursor is ;)

Edit : now the circle on the slider turns green when sliding on it ;)
Hyguys
Some offscreen notes.
it runs on firefox now <3 <3
ty
Guy-kun
No longer works in chrome. Stops playing anything when the first note should appear
Randy96
Looks great, what do you plan on working on now?
TheCameleon
:)

Now ? I still have a lot of work left. I have to improve sliders (point count, timing, speed). Something interesting to do may be HPDrain.

Edit : working on spinners :P
bagnz0r
Er... Just a side note but...
You don't know how to use CSS 3 properly.
http://www.pictuga.tk/fiche-311.html
Guy-kun
Chrome: catch your exceptions :l

anonymous_old
odear

I see an ==

and I see an == false.

Two strikes bro.
TheCameleon
http://osu-web.tk/spinner.html
Test page for spinner
Clic anywhere around the center of the "spinner" (appears after first clic). A box tells you if you're are drawing a circle or not.

Edit : Yes, most of the work is done :)
anonymous_old
Any updates?
TheCameleon

strager wrote:

Any updates?
A small update
Edit : A big update :)

I finally managed to make spinners work. When there is a spinner, it's written spinner. If it's written is green it means you are actually drawing a circle. If it's red you're NOT drawing a circle.
It may be a bit laggy on old computers. The number of "points" (from your spin) is actually displayed in the window title. The bigger is it, the slower it is on old computers. removed

Please report bugs ;)

Edit : it IS possible to add the skin for spinners ;) it might be very slow :/ I'll see what I can do, when I have time ;) done

Edit : Small design changes :
  1. the spinner is now at the centre (so you have to spin around it)
  2. a line is drawn when you spin (yes you can make a nice stickman if you want :P) removed
Edit : spinning "skin" is on !

Edit : the cirlce, the "frame" and the "progress" bars are now used :)
(but the progress stuff is just based on the time and not your spinning)

Edit : know issue :
sometimes the game stops before the first spinner to start, that's b/c all the needed pictures are not loaded at the good time
Noobleah
try to preload the whole game? because it laggs like hell and the timings off when it doesnt preload. some of the skins are missing if on a slow connection.
TheCameleon

Noobleah wrote:

try to preload the whole game? because it laggs like hell and the timings off when it doesnt preload. some of the skins are missing if on a slow connection.
They are already preloaded ;) But now, I don't check if everything is loaded before starting the game. I'll have to work on that part ;) Currently the only thing I do for preloading purpose it to let the script load for 5sec, but I doesn't seem to be enough :/

Edit : now 100% fullscreen (removed the menu bar)
Noobleah
There is a problem with your sliders, sometimes the're too slow. So sometimes you miss hit markers when following a slider.
Hyguys
hm , only spinner now? :O
TheCameleon

Noobleah wrote:

There is a problem with your sliders, sometimes the're too slow. So sometimes you miss hit markers when following a slider.
Right now, ALL the sliders are 1''5 long
I sent a PM to peppy a few days ago about this kind of stuff (and scoring), but I'm still waiting for an answer ;p
Guy-kun
What browser is this aimed towards?
I wouldn't recommend going into specifics like scoring until its playable/not so damn buggy
(using chrome)
sp1ky
It's a little buggy but that's to be expected (it's a rhythm game clone running in javascript) and that site is there to show us his progress (According to previous posts, it's not completely up to date with development version). Cut him some slack :)
Well done TheCameleon
Ephemeral
performance issues with prior elements need to be addressed before new features are added, imo
Lilac
What Ephemeral said.
TheCameleon

sp1ky wrote:

It's a little buggy but that's to be expected (it's a rhythm game clone running in javascript) and that site is there to show us his progress (According to previous posts, it's not completely up to date with development version). Cut him some slack :)
Well done TheCameleon
Actually, it's almost always the latest dev version on the website, except when I'm doing some complex stuff (ie spinner slider loader...) that I handle in one lonely .html file (cause it can be really buggy) ;)
Guy-kun
>the current spinner is really buggy, doesnt do much but lag and jump about.

I dont even know if reporting stuff is needed any more? Doesn't seem to be replied to.
TheCameleon

Guy-kun wrote:

>the current spinner is really buggy, doesnt do much but lag and jump about.

I dont even know if reporting stuff is needed any more? Doesn't seem to be replied to.
Don't worry I'm working on that ;) The main problem is that all the pictures (needed for the spinner) are not all loaded when the game starts. And if the picture ("skin") isn't loaded, javascript actually crashes ;) That's why I'm working on a loader.
Lag is also due the vast amount of work that is required (images + big array check + drawing the whole thing + mouse move detection + ...) each 50ms (20times/sec)
Guy-kun
Aah okay, yeah loading would be a big step forward.

As for the lag, my PC is towards the high end, a decent graphics card, processor etc, and chrome uses hardware acceleration. So to put it simple, it's not going to be smooth on 90% of PCs unless optimized, just as a heads-up
TheCameleon
Lag is a real issue :/

The loader will allow me to extend the UI. So I'm starting to think about other stuff such as a beatmap picker and such things. The UI will be based on osu's. Here is a quick mockup

Feel free to make suggestions :)

PS : I just saw that the mockup is in french, translations
SPOILER
  1. boxes on the right stand for beatmaps
  2. bottom-right is a "share" link
  3. the button next to the link is for donations (needed for a paid server)
  4. the picker next to the button is for settings (special modes)
  5. the slider on the bottom-left is for volume
  6. 3 boxes on the left are informations about selected beatmap

Edit : THE WEBSITE MAY NOT WORK AT ALL RIGHT NOW as I'm trying to implement the loader ;)
Edit : loader is getting good :)
Edit : wow, it takes over 20sec to load all the pictures (151 pictures to be accurate)
IppE
Loader works ok on Opera and Chromium but after its loaded nothing happens. Intentional?
TheCameleon

IppE602 wrote:

Loader works ok on Opera and Chromium but after its loaded nothing happens. Intentional?
Well, indeed it's not 100% finished ;) I was very close to the end but I had to stop ;) I'll finish that asap ;)

Edit :
  1. for those wondering, it's normal that the loader goes "back" at the beggining of the load (ie 66% to 3%). Indeed some pages that are loaded start to load other pages (for examples, images)
  2. Now, there is a real (graphic) loader ! :)
    woks fine on Firefox 4 (latest biuld from launchpad)
  3. I'm improving the HitObjects colors. The color should now follow what's said in the .osu. Next step is to put on a gradient for design purpose :P postponed
  4. Btw, I know the music and the beatmap do not match. I also konw that there are issues when sliders are vertical ;) fixed
  5. should now start to appear in search engines (Google & co) -- done (description : "osu! for browsers.")
  6. loads but doesn't start as I'm trying to set up sth (.osu parsing client - javascript - side) fixed
  7. host is down
  8. parsing client-side is WIP done
  9. favicon added
    server side (php) less used (→ ajax) and even useless ;)
  10. HitSounds (normal + whistle) are here (both ogg and mp3)
Shael_old
Any Updates?
TheCameleon

Shael wrote:

Any Updates?
You can now choose the beatmap !

Now loads much faster :)
Ephemeral
substantial improvements have been made, but i think you need to work on fixing core gameplay issues (such as sliders and calculating their length and path properly) before making anything else really

hitsounds also need to be added as they are a pretty core part of osu
RandomJibberish
It's looking great!

I agree that sliders should be next though.
TheCameleon
You're right ;)
Sliders are still an issue. I'm also working on HitSounds but I'm having weird issues. For now I disabled them, until a good fix is found.

The main issue I have with sliders is actually to know the way they work. For example I have *no idea* about the way their speed is calculated. As I have no idea at all, I made all of them 1.5sec long as a value is needed to display them.

It would be so cool if you could give me any detailed information about sliders speed ! (math formulas or sth like that) :)
Echo
information
TheCameleon
Thanks for the informations :)

Echo wrote:

"beat": the length of a beat can be calculated from the bpm (eg. 60 beats per minute = 1000 milliseconds per beat)
One question : how do I know the bpm of the beatmap ?
I think (not sure at all) that the default value is 60bpm, and can be changed with TimingPoints (x2, x3), right ?
It's not specified in the the osu file [General] nor in the [Metadata] nor in the [Difficulty], right ?
Echo
information
TheCameleon
thanks again ;)
I'll work on that asap ;)
Topic Starter
Clemaister
Thanks Echo, you're full help.
mekadon_old

TheCameleon wrote:

Shael wrote:

Any Updates?
You can now choose the beatmap !

Available beatmaps :
SPOILER
StrangeProgram
  1. Baby Difficulty
  2. Roko-Don's Taiko
  3. Lesjuh's TAG
  4. HappyMiX
Here Comes The Sun
  1. Breezin'
  2. Hard ROCK!
  3. Sweatin'
  4. Cruisin'
Anima Libera (ReMiX)
  1. EEeee's Normal
  2. Champion
  3. Expert
Welcome To The Club
  1. Hard
  2. Normal
  3. simplistiC's Club
  4. Insane
Exciting Hyper Highspeed Star
  1. eveless' Star
  2. H-boy's Hyper
  3. Hard
  4. Highspeed
Where Is The Love (Nightcore Mix)
  1. Andrea's Crazy Love
  2. DC's Little Love
  3. jericho2442's Hard Love
  4. ShaggoN's Complicated Love
  5. Lunah's Sweet Love
Jehovah's YaHVeH
  1. Hard
  2. Normal
  3. Lunatic
  4. Taiko
Bad Apple!!
  1. Easy
  2. Extra
  3. Hard
  4. Lunatic
  5. Normal
Classic Style
  1. Beginner Pianist
  2. Accustomed Pianist
  3. LRJulien's Medium Pianist
  4. Mad Pianist

Now loads much faster :)
Taiko diff what
Topic Starter
Clemaister
Taiko diffs will be may be deleted, or we might create a taiko mode, but not sure.
TheCameleon

Echo wrote:

information
sounds like a censorship lol
We gathered some useful informations about .osu spec thanks to you informations ;) (both of you) and by trying some stuff on the editor ;)
That helps a lot :) I'll code that asap ;)

btw I think that it is possible to add storyboards. bezier sliders will also come. the ball on sliders will also be added. hitsounds too.
but now we're focusing on slider speed ;)
peppy

TheCameleon wrote:

sounds like a censorship lol
See the edit message on either message for further information.
artpiggo
Do I have to download anything in order to play ?

It can't loaded to play.
TheCameleon
We are still having issues with browsers compatibility. We are also working on that.

I just (when writing this answer) fixed compatibility with Firefox 3.6 and Opera ;)
So it seems to work on Firefox 3.6, 4, Chromium, Opera (on Linux platform at least). However it may not work for everybody :/
It's not expected to work on IE8.

We recommand Firefox 4 (beta) for now ;) Others may also work.

If you still have issues try to force-refresh the whole website ;)
Therefor, close osu-web tab, wipe browser cache, go back to osu-web, try shif+F5

Edit : doesn't work on Opera for now
Wassaaaa
Worked Great on Google Chrome, it's good for a beta :3
TheCameleon

Wassaaaa wrote:

Worked Great on Google Chrome, it's good for a beta :3
thanks for this positive review :)

btw when it works on Opera (not the case right now), it's really laggy and hardly playable. We may drop Opera support for now.
Ephemeral
just pick a browser which works and block all other user agents from playing it until you've fixed everything up

your development approach seems really scattered - concentrate on the stuff that is actually important (ie core gameplay) and worry about compatibility with anything bar your chosen browser later
Topic Starter
Clemaister
Hm, I think we shouldn't leave out this kind of details, because more browsers will be avaible for osu-web, easier it will be to test and program anywhere.
peppy
I'm with ephemeral here. You don't even have a playable game yet (even without sliders). Make it play, then worry about making it play everywhere.
Topic Starter
Clemaister
Not "to play" Peppy, to test & program. Because a big part of the job is not done at home.
peppy
Install the browser of your choice...?
Topic Starter
Clemaister
This is a loss of time, and sometime we can't.
peppy
Am I missing something? Have you heard of thumbdrives and portable installations? Are you saying installing or plugging in a thumbdrive is more of a loss of time than multi-browser compatibility? ....Huh?
Topic Starter
Clemaister
Even downloading the portable version can be long, especially when we are at school (blocked downloading website, and need to use proxies etc...). But that's sure the browsers are not the main problem, I didn't meant that.
TheCameleon

peppy wrote:

Install the browser of your choice...?
not always that easy. Especially when at school. And it's faster to use Firefox 3.6 since it's installed where we "work" on osu-web there.
And browser support isn't that hard (except when having weird issues with some browsers). So as to fix Firefox 3.6 support yesterday it only took me 5min. The main issue with browser compatibility is that I never check the compatibility status. I mainly manage to have it to work on my browser and then fix small compatibilty issues when at school, so as to be able to make some quick tests.

And don't worry, we're working on sliders :)
peppy
You should probably make the game playable without sliders before you attempt them. Timing still seems quite off, along with animations and handling of multiple hitObjects in stacks or on-screen at the same time. Frame-rate could also possibly be improved before attempting more advanced stuff.
Topic Starter
Clemaister
That's true.
TheCameleon
Speaking about frame-rate, the time taken to "make" the whole drawing stuff is now displayed in the bottom-left corner. I also removed the offset during 2 refreshes. For me it's around 9ms when the screen is empty and goes to 30-40ms when playing Strange Program, on Firefox 4.

The offset (between music and hitObjects) comes from the browser audio API. I can't do anything for that. I always take the most recent time value.
Ephemeral
i sure hope the browser audio API at least produces a stable offset - you can just force the game to set a new universal offset to compensate for it. if the offset fluctuates under browser load, then you may have a serious, nigh crippling issue that would pretty much ruin your project.

perhaps you should switch focus from other stuff and try to get a timing editor working within the browser so you can see what kind of restrictions you're going to have to work with before you proceed any further
TheCameleon

Ephemeral wrote:

i sure hope the browser audio API at least produces a stable offset - you can just force the game to set a new universal offset to compensate for it.<snip>
really strange idea ! that would even be worse ;)

I made a small test beatmap (called "test" on osu web). it only plays in Firefox. there is 1 single sound with a hitCircle. that way the offset is more easy to see (no chrome version of that beatmap since I'm having some issues with Audacity conversion right now)

Edit : huge improvement made on sliders. please note that only the first timingpoint is used

Edit : HitSounds added. Ball on sliders added. Reverse sliders added.
Coming soon : gameplay ratio and maybe storyboard. That will rock :)

Edit : just made a small facebook fan page https://www.facebook.com/pages/Osu-web/108368515907391 (I know I should better work on osu-web itself - but I'm a human too ;) )
TheCameleon

peppy wrote:

Your scaling is off; you aren't enforcing aspect ratio at all <snip>

RandomJibberish wrote:

You need to enforce the aspect ratio or it breaks spacing and patterns. All the squares in the map turn into fat rectangles lol<snip>
done :)

(reported Sep 2010 - fixed Feb 2011 -> 5 months later ^^)
RandomJibberish
Getting slider curves working properly and tring to resolve the offset issue should probably come before storyboards lol
TheCameleon
Slider curves are quite hard to do ;) it requires bezier or catmull, which means math stuff. It's on my todolist, but before making any working code for curves, I'll have to understand what wikipedia says about bezier and catmull curves.
Indeed the main issue is that html5's <canvas> only supports bezier curves with 2 handlers and beatmaps often user more than 2 points for their sliders... There is nothing related to catmull curves in <canvas> I'lll have to make everything by hand. And it might slow the game down :/

Storyboard seems to be easier to do ;) less math issues :)

I can't do anything for offsets. The best thing I can do is to tell you to use Firefox 4 (and not 3.6) or Chrome ;)
(for me the offset is near 1 second on firefox 3.6 but there is almost no offset on firefox 4)
show more
Please sign in to reply.

New reply