forum

osu! in JavaScript & HTML5

posted
Total Posts
270
show more
Layola_old

eMkay wrote:

In Firefox it works smoothly, but i can't maximize my window in Firefox if i didn't have it maximized upon loading the site.
I have a similar problem. My window always un-maximizes when I visit the website. It doesn't let me maximize either. Also, are the hitobjects suppose to be clickable?
TheCameleon

Layola wrote:

eMkay wrote:

In Firefox it works smoothly, but i can't maximize my window in Firefox if i didn't have it maximized upon loading the site.
I have a similar problem. My window always un-maximizes when I visit the website. It doesn't let me maximize either. Also, are the hitobjects suppose to be clickable?
Holidays = more time to develop :P
The un-maximize problem seems to be solved.

I added some in-game images (50-100-300 images on clic). They are loaded at the beginning so as to avoid latency ;)
Other images will come soon :) It makes the game much more nicer.
If you want to see all of them, press "i" while playing ;)

Another feature : the progress (in time). It's doesn't work in Firefox (issue with track duration (it doesn't return a number :/ ), but it works with Chrome. THIS DOESN'T AFFECT THE GAME ITSELF on firefox, you just don't know when it's done.
Another issue with firefox is time offset. Chrome is much more accurate ;)
So, Chrome is better, but Firefox also works, but isn't fully supported.
TheCameleon
I added the cursor !
But, again, there are some issues :/
Firefox handle it the way it should, but Chrome doesn't place it the way it should (the center of the circle = the hotspot of the mouse)
And this placement issue is a real problem, as the coordinates of the mouse do not match with what that user sees, and so, you can click just besides hitobjects :/
Randy96
Looks pretty nice, are you working on sliders?
TheCameleon

Randy96 wrote:

Looks pretty nice, are you working on sliders?
It's on my checklist ;)
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
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
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
Wow, this looks like its actually getting somehwere now, I'm starting to be impressed ^^
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

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

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

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

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

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

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
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
Now works on iPhones (with music) and more browsers ;)
(it tries both .mp3 and .ogg)
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
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
Status:

Opera: lagging
Firefox: lagging+autoresizing to window mode
IE: not even loading
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
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
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
show more
Please sign in to reply.

New reply