You can precalculate all the bezier curve and hold them in a table. More memory usage, faster / no lag during gameplay.
forum
osu! in JavaScript & HTML5
posted
Total Posts
270
Most of the things so far have beenTheCameleon wrote:
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)
>I can't do anything about
>Wait I've done it.
A developer should never say 'I can't do anything about' until you've spent at least a significant amount of time trying/researching.
Backgrounds are now displayed.
A "start page" is now present (for new users).
Beatmaps are now cached in your browser (html5 stuff). This means that once they are in your cache, the game is *much* faster to load :)
("only"100 50 files are loaded instead of over 300)
Edit : We added a dev-version of osu!web. http://osu-web.tk/unstable/
That way, we can keep osu-web.tk more stable :)
Edit : seems to be working atm on iOS 4.2.1, quite laggy, images not scaled down. etc. Looks better if you add it to your HomeScreen ;)
Edit : FPS is now displayed :)
For me ~50 on Fx4 and <20 on iPhone (and <10 in landscape)
Sometimes the "lag" is caused by js' <audio> API (was the case with Fx4 a few days ago - we found a workaround)
Edit : You can get osu! web source code here : https://launchpad.net/osu-web
Browse code → https://code.launchpad.net/osu-web
Report bug → https://bugs.launchpad.net/osu-web
Suggestions → https://blueprints.launchpad.net/osu-web
FAQ → https://answers.launchpad.net/osu-web
A "start page" is now present (for new users).
Beatmaps are now cached in your browser (html5 stuff). This means that once they are in your cache, the game is *much* faster to load :)
("only"
Edit : We added a dev-version of osu!web. http://osu-web.tk/unstable/
That way, we can keep osu-web.tk more stable :)
Edit : seems to be working atm on iOS 4.2.1, quite laggy, images not scaled down. etc. Looks better if you add it to your HomeScreen ;)
Edit : FPS is now displayed :)
For me ~50 on Fx4 and <20 on iPhone (and <10 in landscape)
Sometimes the "lag" is caused by js' <audio> API (was the case with Fx4 a few days ago - we found a workaround)
Edit : You can get osu! web source code here : https://launchpad.net/osu-web
Browse code → https://code.launchpad.net/osu-web
Report bug → https://bugs.launchpad.net/osu-web
Suggestions → https://blueprints.launchpad.net/osu-web
FAQ → https://answers.launchpad.net/osu-web
Well, not for now. I got a lot of stuff to do for school, and for my studies next year.
I'm too buzy to work on osu-web, even if I want to. But I'll work on it when I have enough free time ;)
If you want to code with me, you can go there → https://launchpad.net/osu-web/ and submit code. It will be put (manually) on http://osu-web.tk/unstable/ until I can give it a closer look, so as to send it to http://osu-web.tk/ (stable version)
I'm too buzy to work on osu-web, even if I want to. But I'll work on it when I have enough free time ;)
If you want to code with me, you can go there → https://launchpad.net/osu-web/ and submit code. It will be put (manually) on http://osu-web.tk/unstable/ until I can give it a closer look, so as to send it to http://osu-web.tk/ (stable version)
This game was really unstable for me on Chrome. I suggest you scale it WAYYY back so the game is playable, and make every update playable until you can play the whole thing stable.
Bezier curves are now working !
You can test it @ http://osu-web.tk/unstable/
NB. bezier curves are on the unstable branch, thus other features may not work (eg spinners)
You can test it @ http://osu-web.tk/unstable/
NB. bezier curves are on the unstable branch, thus other features may not work (eg spinners)
No workies on stable chrome 
. Hangs before song select appears.
. Hangs before song select appears.Previous song is still playing when playing next map.
Doesn't load in dev chrome, but works really nicely in FF4 actually, I'm impressed.
One thing, once you resume, the play window won't disappear
One thing, once you resume, the play window won't disappear
Doesn't work in Firefox 3.6.x. Song never loads. I suggest testing on more than one browser, and avoiding the same regressions as you move forward.
Wow, I never expected this to be completed to this extent, good job. Although it was running under 30fps the whole time according to the counter at the bottom right and I had to ignore the approach circles completely for timing.
I'm happy that you enjoy bezier sliders :)
I still have to fix issues that came while adding bezier curves. When all that will be ready (and a bit stable) it will be sent to http://osu-web.tk/ (aka stable version).
A smaller FPS is actually normal. Beziers curves with over 2 control points are home made (pixel by pixel) and thus are longer to draw.
Edit : Added Catmull curves.
Started to work on hitcircles stack.
Edit : moved bezier and catmull to http://osu-web.tk/ (means more stable)
You can download the code of the website at https://launchpad.net/osu-web/+download
This should explain most of your issues. http://osu-web.tk/unstable/ is known to be buggy. It's just a live preview of current code. If you want sth more stable, go to http://osu-web.tk/ but features in development (eg bezier :p) are not present.TheCameleon wrote:
NB. bezier curves are on the unstable branch, thus other features may not work (eg spinners)
I still have to fix issues that came while adding bezier curves. When all that will be ready (and a bit stable) it will be sent to http://osu-web.tk/ (aka stable version).
A smaller FPS is actually normal. Beziers curves with over 2 control points are home made (pixel by pixel) and thus are longer to draw.
Edit : Added Catmull curves.
Started to work on hitcircles stack.
Edit : moved bezier and catmull to http://osu-web.tk/ (means more stable)
You can download the code of the website at https://launchpad.net/osu-web/+download
I just read again the whole post →
There was also some discussion about taiko. We dropped that idea for now. We may work on it again, but *much* later.
----------------------
What's new ?
Some updates are only available at http://osu-web.tk/unstable/
(keep in mind that /unstable is buggy !)
WebGL actually draws to a canvas, but browsers try to use hardware acceleration, but I doubt it would be more efficient. Moreover it's more 3D oriented, which is not our target.mm201 wrote:
WebGL seems like a better tool for the job than raster drawing to a canvas.
More explanations about *why* it uses flash. That website produces sounds (≠playing .ogg/.mp3 files). Raw sound edition/manipulation is not possible with html5. (for example, http://mta.me/ which is in html5 also *makes* audio using flash)strager wrote:
That uses Flash.Clemaister wrote:
Please check Balldroppings, you'll see that's possible.
Neo Adonis wrote:
About the hit circles, why don't you try to use the sprites instead of circle drawing? The same with numbers. I'll search how to make color blend in canvas. If it's not possible, I'll say you. Or, if you can make it server-side, try coloring sprites using plugins (GD or ImageMagick if you're using PHP) and return the colored sprites.
As we moved a bit forward, we may start to use sprites (images) soon. We'll keep an option to use only drawing, for slower computers (even if slower computers are not really targeted...). We'll do the whole thing with <canvas>, since we removed all the server side.Hyguys wrote:
and more design on skin , to make the skin look like the default osu skin.
Neo Adonis wrote:
(And before I forget it: http://osu.ppy.sh/?p=faq&n=2&c=7 [Scoring section]. No need to get worried about it ATM, though. Just a reminder.)
Thanks :)strager wrote:
They're based off Overall Difficulty, not the speed of the song. Sliders are much more lenient with timing, too (kinda...). Make your own fancy formula (e.g. (10 - OD) * 35 ms overall hit window, with * 15 ms for 100 and * 25 ms for 50); once you have the game up and running you can worry about making it more like osu!.
There was also some discussion about taiko. We dropped that idea for now. We may work on it again, but *much* later.
----------------------
What's new ?
- fixed cursor, font (bold) in webkit
- faster to load
- translation support → you can help us translate into your language !
- slider are finally at the good timing
(the ball has a good path, but the slider is not cut off the way it should for now)
LunaticMara wrote:
Previous song is still playing when playing next map.
both fixedGuy-kun wrote:
One thing, once you resume, the play window won't disappear
Some updates are only available at http://osu-web.tk/unstable/
(keep in mind that /unstable is buggy !)
I made these sliders in GDI+ ages ago. If canvas provides you with offscreen drawing, I can provide something similar.
Thanks for the answer ;)
Well, I found a way to draw n-control-point bezier and catmull curves. You can give it a try if you want at http://osu-web.tk/unstable/test/catmull.html and http://osu-web.tk/unstable/test/bezier.html (just click to draw a curve)
The thing is that sliders have a sliderLength property, which I do not respect when drawing the slider, but the ball DOES respect sliderLength. I still have to tweak a little bit my code to take sliderLength in count when drawing.
The only issue I have is with big bezier/catmull curves, because they're slower to draw (they are pre-calculated, of course).
Other new stuff
- stops rendering when game is paused (yes, it wasn't the case before !)
- maximum fps to avoid cpu overload (not 100% done)
Well, I found a way to draw n-control-point bezier and catmull curves. You can give it a try if you want at http://osu-web.tk/unstable/test/catmull.html and http://osu-web.tk/unstable/test/bezier.html (just click to draw a curve)
The thing is that sliders have a sliderLength property, which I do not respect when drawing the slider, but the ball DOES respect sliderLength. I still have to tweak a little bit my code to take sliderLength in count when drawing.
The only issue I have is with big bezier/catmull curves, because they're slower to draw (they are pre-calculated, of course).
Other new stuff
- stops rendering when game is paused (yes, it wasn't the case before !)
- maximum fps to avoid cpu overload (not 100% done)
osu!'s approach is to divide the slider into a set of lines equally separated in parameter space (not distance). (Spacing them equally in distance involves some messy calculus/combinatorics which just isn't worth it.) The renderer then doesn't concern itself with drawing beziers, just joined line segments. This allows for any and all sorts of curves to be drawn.
Nice concept, and I'll be looking forward to future updates. For now, slight translation issue:
On the pause menu, it shows: "Pause - Hit "P" to restart the game"
But it really should be "unpause" or "continue" instead of "restart"; in English "restart" usually means to start again from the beginning, which can get confusing.
Also, how can I take a look at the code behind this? I looked around the project page but I don't know French, and the links under stable and unstable show "The resource could not be found." ( I wanted to see how bezier curves are drawn for my apps).
On the pause menu, it shows: "Pause - Hit "P" to restart the game"
But it really should be "unpause" or "continue" instead of "restart"; in English "restart" usually means to start again from the beginning, which can get confusing.
Also, how can I take a look at the code behind this? I looked around the project page but I don't know French, and the links under stable and unstable show "The resource could not be found." ( I wanted to see how bezier curves are drawn for my apps).
Well, that's what we are doing ;)mm201 wrote:
osu!'s approach is to divide the slider into a set of lines equally separated in parameter space (not distance). (Spacing them equally in distance involves some messy calculus/combinatorics which just isn't worth it.) The renderer then doesn't concern itself with drawing beziers, just joined line segments. This allows for any and all sorts of curves to be drawn.
Maybe your are referring to
Bezier.prototype.pointAtDistance = Catmull.prototype.pointAtDistance? Those functions are used to place the ball on the slider ;)
thanks :) changed to "Continue"akrolsmir wrote:
Nice concept, and I'll be looking forward to future updates. For now, slight translation issue:
On the pause menu, it shows: "Pause - Hit "P" to restart the game"
But it really should be "unpause" or "continue" instead of "restart"; in English "restart" usually means to start again from the beginning, which can get confusing.
Of course you can !akrolsmir wrote:
Also, how can I take a look at the code behind this? I looked around the project page but I don't know French, and the links under stable and unstable show "The resource could not be found." ( I wanted to see how bezier curves are drawn for my apps).
The code is hosted on our website, via bazaar. You can access it with the following command line bzr clone http://osu-web.tl/unstable/ (on linux, with bzr installed. Or you can use a Windows GUI, some are listed there http://wiki.bazaar.canonical.com/Window ... 0Installer
You can also access the code from our servers at http://osu-web.tk/unstable/js/ and the code related to bezier/catmull curves is available at http://osu-web.tk/unstable/js/curves.js
I use the formula from http://en.wikipedia.org/wiki/B%C3%A9zie ... ralization and http://www.mvps.org/directx/articles/catmull/ (equation 2)
-----------------------
osu-web is finally "playable" on iPhone (starts, images are scaled down, uses touch events)
to start playing on an iPhone, you'll have to click on the loader, once your beatmap is selected.
-----------------------
We moved to a professional web host.
www.osu-web.com/
it's a bit too laggy
What a necro...
It would be cool but it needs to be playable
^ from page 3strager wrote:
How about you abstract it enough so you can replace it when needed and so people can stop discussion shit which doesn't matter because this won't be finished anyway?
marcostudios wrote:
It would be cool but it needs to be playable
Fail to load, due to a SUPER bad Internet connection. Stuck at 99%.
are there keyboard shortcuts to clicking, like Z or X? i can't play osu without keyboard 
Project abandoned? The files in the project page (not the game) cannot "be found"(error 404), and the FB page hasn't been edited for months.
I have to say, I get RAM spikes while playing. It saps up RAM fast, I gobbled about 2 GBs of RAM in a few seconds.
Is this a Memory leak, or is it something to do with canvas size, because it doesn't kill my RAM when I play it with half a screen. Full screen, yeah right.
BTW the browser I'm using is WaterFox 26, a 64 -Bit Firefox. If the 64-bit orientation could be something to look at that would be nice!
Is this a Memory leak, or is it something to do with canvas size, because it doesn't kill my RAM when I play it with half a screen. Full screen, yeah right.
BTW the browser I'm using is WaterFox 26, a 64 -Bit Firefox. If the 64-bit orientation could be something to look at that would be nice!
Please, publish it to Firefox OS!
It's ready, you just have to give it an icon :3
It's ready, you just have to give it an icon :3
Cool idea, I could play Osu at school without having to use Safe Mode.
Works perfectly for me when using chrome!
this was 5 years ago? WOOOOOOOOOOOOOWWWOWOWOWOWOWOWOWOOWOWOWOWWOOWOWOWOWOW 
Marcin wrote:
What a necro...
Its quite well done.
Only thing I would suggest is to add keyboard options. ZX YZ etc but well done :-)
Only thing I would suggest is to add keyboard options. ZX YZ etc but well done :-)
What if I told you that this project is from 5 years ago?ctg1996 wrote:
Its quite well done.
Only thing I would suggest is to add keyboard options. ZX YZ etc but well done :-)
If you're looking for something newer, try http://www.drewdevault.com/osuweb/
it's very lagging... 
i only got up to 20 fps
hope you can fix this
i only got up to 20 fps
hope you can fix this
LOLClemaister wrote:
Hey people,
TheCameleon and I are working on a new project : program osu! in JavaScript and HTML5 in order to make an osu! on web, to make it playable directly on a browser.
Advantages :
- Osu! could be played on many touch phones able to suf on internet.
- People who can't play the game for some reasons (Mac & Linux users, people using a computer that does not have good performances etc...)
- Players will be able to try the game (whitout creating account), before downloading it which will avoid people who never play the game saying "Oh, this game is fucking stupid".
Disadvantages :
- Very long project.[but that's a detail]
- Graphism will not be as nice as osu!.
Some people will say that it's really a mad project, but we know that's possible, mostly with the powerful new element in HTML5, <canvas>.
Of course, it'll be easier and faster if we had the source of osu! to have an idea more clear of structuring the program, but we know that a source is not a thing easy to give so...
You can try it at
www.osu-web.tk
Anyway, hope you'll like the idea of this project.
Also I'll post here some projects by TheCameleon, to show what he is able to program.
Links:
- Osu! web
www.osu-web.tk
test version (very unstable)
Project page
Contribute (dev page)
- Power of progamming languages (JS) :
Balldroppings
FPS Game
Other possiblities for JavaScript
- Projects of TheCameleon
Pictuga
BeatMP3
Would you like a NOTELOL???
Oh you guys this is a 5 years old project =p
VERY GOOD!Thanks!Computers can open it,too!
Yes,that web osu! needs a skip button but its no probghostshipCrowie wrote:
it needs a skip button!
You can(only) wait!
Can we upgrade skins on it?
¯\_(ツ)_/¯ redirects me to a page that looks like it wants to give viruses and with popup that prevents the closing of the page until you check the box "prevent the page from creating more dialog boxes", I suggest to erase the link in all the messages in this thread at least (maybe verification to be sure it doesn'T happen only to me)
Those links are no longer available and removed. ¯\_(ツ)_/¯
This link works: http://www.osu-web.com/ but idk if it's the same x.x
Download puffin then you can play on mobile/ipad but it's slightly laggy -.-