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
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)
Waryas
Waryas
You can precalculate all the bezier curve and hold them in a table. More memory usage, faster / no lag during gameplay.
Guy-kun
770 posts
Joined December 2009
Guy-kun

TheCameleon 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)
Most of the things so far have been
>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.
TheCameleon
85 posts
Joined September 2010
TheCameleon
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
Shael_old
Shael_old
Any updates?
TheCameleon
85 posts
Joined September 2010
TheCameleon
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)
Mithos
632 posts
Joined February 2011
Mithos
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.
TheCameleon
85 posts
Joined September 2010
TheCameleon
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)
peppy
19,374 posts
Here since the beginning
peppy
No workies on stable chrome :(. Hangs before song select appears.
Mara
4,907 posts
Joined November 2009
Mara
Previous song is still playing when playing next map.
Guy-kun
770 posts
Joined December 2009
Guy-kun
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
peppy
19,374 posts
Here since the beginning
peppy
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.
Jarby
2,962 posts
Joined August 2008
Jarby
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.
TheCameleon
85 posts
Joined September 2010
TheCameleon
I'm happy that you enjoy bezier sliders :)

TheCameleon wrote:

NB. bezier curves are on the unstable branch, thus other features may not work (eg spinners)
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.

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
TheCameleon
85 posts
Joined September 2010
TheCameleon
I just read again the whole post →

mm201 wrote:

WebGL seems like a better tool for the job than raster drawing to a canvas.
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.

strager wrote:

Clemaister wrote:

Please check Balldroppings, you'll see that's possible.
That uses Flash.
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)

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.

Hyguys wrote:

and more design on skin , to make the skin look like the default osu skin.
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.

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

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!.
Thanks :)

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 ?
  1. fixed cursor, font (bold) in webkit
  2. faster to load
  3. translation support → you can help us translate into your language !
  4. 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.

Guy-kun wrote:

One thing, once you resume, the play window won't disappear
both fixed

Some updates are only available at http://osu-web.tk/unstable/
(keep in mind that /unstable is buggy !)
mm201
osu! Alumni
4,495 posts
Joined August 2008
mm201

I made these sliders in GDI+ ages ago. If canvas provides you with offscreen drawing, I can provide something similar.
TheCameleon
85 posts
Joined September 2010
TheCameleon
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)
mm201
osu! Alumni
4,495 posts
Joined August 2008
mm201
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.
akrolsmir
606 posts
Joined November 2010
akrolsmir
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).
TheCameleon
85 posts
Joined September 2010
TheCameleon

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.
Well, that's what we are doing ;)
Maybe your are referring to 
Bezier.prototype.pointAtDistance = Catmull.prototype.pointAtDistance
? Those functions are used to place the ball on the slider ;)

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.
thanks :) changed to "Continue"

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).
Of course you can !
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/
yuichan16_old
2 posts
Joined December 2012
yuichan16_old
it's a bit too laggy
Marcin
osu! Alumni
4,944 posts
Joined March 2011
Marcin
What a necro...
shycjd
22 posts
Joined October 2011
shycjd
it sounds like so great!
but will osu! web be more laggy?
abcmno
1 post
Joined December 2012
abcmno
i'm very interested in it.
- Marco -
Technical Support Team
8,525 posts
Joined December 2011
- Marco -
It would be cool but it needs to be playable
[Kanzaki Ranko]
327 posts
Joined June 2009
[Kanzaki Ranko]

strager 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?
^ from page 3

marcostudios wrote:

It would be cool but it needs to be playable
670839245
22 posts
Joined May 2013
670839245
Fail to load, due to a SUPER bad Internet connection. Stuck at 99%.
- Hourai -
- Hourai -
very nice
IOException
488 posts
Joined May 2013
IOException
are there keyboard shortcuts to clicking, like Z or X? i can't play osu without keyboard :P
670839245
22 posts
Joined May 2013
670839245
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.
olszam
20 posts
Joined February 2012
olszam
Try to use asm.js
Zamieci
284 posts
Joined September 2013
Zamieci
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!
Alyne_old
1 post
Joined February 2012
Alyne_old
Please, publish it to Firefox OS!
It's ready, you just have to give it an icon :3
Ven
85 posts
Joined August 2013
Ven
Cool idea, I could play Osu at school without having to use Safe Mode.
Eren Yaeger
122 posts
Joined September 2013
Eren Yaeger
Works perfectly for me when using chrome!
ZachHill
4 posts
Joined March 2015
ZachHill
this was 5 years ago? WOOOOOOOOOOOOOWWWOWOWOWOWOWOWOWOOWOWOWOWWOOWOWOWOWOW :shock:
abraker
Global Moderator
8,356 posts
Joined July 2014
abraker

Marcin wrote:

What a necro...
Asda Meal Deal
108 posts
Joined July 2015
Asda Meal Deal
Its quite well done.

Only thing I would suggest is to add keyboard options. ZX YZ etc but well done :-)
Raymonf
41 posts
Joined September 2011
Raymonf

ctg1996 wrote:

Its quite 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?
SirCmpwn
11 posts
Joined August 2014
SirCmpwn
If you're looking for something newer, try http://www.drewdevault.com/osuweb/
LERUfic
50 posts
Joined August 2013
LERUfic
it's very lagging... :cry:
i only got up to 20 fps
hope you can fix this :)
Blackbetty6
9 posts
Joined June 2015
Blackbetty6

Clemaister 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
LOL
Blackbetty6
9 posts
Joined June 2015
Blackbetty6
Would you like a NOTELOL???
XinCrin
2,845 posts
Joined January 2012
XinCrin
Oh you guys this is a 5 years old project =p
Crowie
osu!artist
328 posts
Joined August 2015
Crowie
it needs a skip button!
RainbowMovies34
5 posts
Joined January 2016
RainbowMovies34
VERY GOOD!Thanks!Computers can open it,too!
RainbowMovies34
5 posts
Joined January 2016
RainbowMovies34

ghostshipCrowie wrote:

it needs a skip button!
Yes,that web osu! needs a skip button but its no prob :D
You can(only) wait!
Last edited by RainbowMovies34 , edited 1 time in total.
RainbowMovies34
5 posts
Joined January 2016
RainbowMovies34
Can we upgrade skins on it?
Remyria
366 posts
Joined June 2012
Remyria
¯\_(ツ)_/¯ 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)
Last edited by Nathanael , edited 1 time in total.
Nathanael
Global Moderator
6,166 posts
Joined January 2013
Nathanael
Those links are no longer available and removed. ¯\_(ツ)_/¯
Igoorx
39 posts
Joined February 2014
Igoorx
This link works: http://www.osu-web.com/ but idk if it's the same x.x
syxz_old_1
1 post
Joined April 2016
syxz_old_1
Download puffin then you can play on mobile/ipad but it's slightly laggy -.-
Please sign in to reply.

New reply

0
219 / 270