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

osu! in JavaScript & HTML5

posted
Total Posts
270
Clemaister
59 posts
Joined December 2009
Topic Starter
Clemaister


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

Power of progamming languages (JS) :
Balldroppings
FPS Game
Other possiblities for JavaScript

- Projects of TheCameleon
Pictuga
BeatMP3
Last edited by Nathanael , edited 14 times in total.
mekadon_old
mekadon_old
HTML5
But some touch phones don't support HTML5 =[
[quote]- People who can't play the game for some reasons (Mac & Linux users, people using a computer that does not have good performances etc...)[/quote]
Not really. osu! will lag worse than normal if it's played in a web browser since it will use more CPU power. Acceptable if graphics are scaled down though

You should contact peppy though if you want to continue :)
Good luck :D
Clemaister
59 posts
Joined December 2009
Topic Starter
Clemaister
But some touch phones don't support HTML5 =[
You got right, edited.

osu! will lag worse than normal if it's played in a web browser since it will use more CPU power. Acceptable if graphics are scaled down though
Of course, we'll try to make not too much images, so graphics will be scaled down.

Good luck
Thanks ^^"
Neo Adonis
320 posts
Joined November 2009
Neo Adonis
It's the craziest idea I've ever heard. But it's excellent!!

Call me when it's done. :)
peppy
19,314 posts
Here since the beginning
peppy
HTML5 canvas is a huge cpu draw in most current browser implementations, without any hardware support; don't expect huge performance. That said, I do wish you luck and will be looking on at your progress.

Sorry but I don't share source code for these kinds of projects, and even if I did it won't actually help that much. I can provide some specs documents for the osu file format and whatnot, though.
Neo Adonis
320 posts
Joined November 2009
Neo Adonis

peppy wrote:

HTML5 canvas is a huge cpu draw in most current browser implementations, without any hardware support; don't expect huge performance.
First at all, I think you should forget about storyboards and videos. But I think all the other stuff is possible with JavaScript. I think it will be better if you use html5, but being a technology in development, it's convenient to use JavaScript and XHTML ATM.

Seriously: continue with the project. I don't wanna see it dead. OK? ;)
peppy
19,314 posts
Here since the beginning
peppy
@Neo: I think you missed the part where html5 does not replace javascript.
Clemaister
59 posts
Joined December 2009
Topic Starter
Clemaister
Sorry but I don't share source code for these kinds of projects
Don't worry about it, I totally understand.
Digikid13
57 posts
Joined March 2010
Digikid13
Sounds interesting, I'll be willing to help if you need anything.
anonymous_old
0 posts
Here since the beginning
anonymous_old
ITT people who don't understand one problem.

It is currently impossible to stream audio (without Flash) (1) with reliable offsets (using <audio>/<embed>/etc.) or (2) with a small buffer size (using Mozilla's API).

Currently, Flash is just a much better tool for this job.

Clemaister wrote:

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...
A C# XNA game structure will probably not fit with a JavaScript game structure. JavaScript and C# are fundamentally different languages and deserve very different program models. But I won't bother getting into that. If you can't provide a prototype, there's no point in you even seeing the source code to osu!. And honestly, I doubt you can get a prototype running.

But good luck.
Last edited by anonymous_old , edited 1 time in total.
mm201
osu! Alumni
4,495 posts
Joined August 2008
mm201
I could only see the small fragments dealing with timings, scoring, etc. being relevant.
4

WebGL seems like a better tool for the job than raster drawing to a canvas.

If you think this is going to be a good choice for low-spec machines, think again.
Clemaister
59 posts
Joined December 2009
Topic Starter
Clemaister
It is currently impossible to stream audio (without Flash) (1) with reliable offsets (using <audio>/<embed>/etc.) or (2) with a small buffer size (using Mozilla's API).
But Javascript could call a flash containing the audio.
peppy
19,314 posts
Here since the beginning
peppy
I can't say I've tried myself, but audio sync seems relatively possible based on http://www.thewildernessdowntown.com/
anonymous_old
0 posts
Here since the beginning
anonymous_old

peppy wrote:

I can't say I've tried myself, but audio sync seems relatively possible based on http://www.thewildernessdowntown.com/
Yes; audio cues could work. That still doesn't let you sync hit sounds, though; they'll sound 100ms off, which would be horrible for streams.
Clemaister
59 posts
Joined December 2009
Topic Starter
Clemaister

strager wrote:

peppy wrote:

I can't say I've tried myself, but audio sync seems relatively possible based on http://www.thewildernessdowntown.com/
Yes; audio cues could work. That still doesn't let you sync hit sounds, though; they'll sound 100ms off, which would be horrible for streams.
Please check Balldroppings, you'll see that's possible.
mekadon_old
mekadon_old

MetalMario201 wrote:

If you think this is going to be a good choice for low-spec machines, think again.
This, and

strager wrote:

Yes; audio cues could work. That still doesn't let you sync hit sounds, though; they'll sound 100ms off, which would be horrible for streams.
It might be possible to change the offsets of the music and the hitsounds amirite?
Clemaister
59 posts
Joined December 2009
Topic Starter
Clemaister
Yeah I think it's possible, anyway it'll be ok for that.
anonymous_old
0 posts
Here since the beginning
anonymous_old

Clemaister wrote:

Please check Balldroppings, you'll see that's possible.
That uses Flash.
TheCameleon
85 posts
Joined September 2010
TheCameleon

strager wrote:

Clemaister wrote:

Please check Balldroppings, you'll see that's possible.
That uses Flash.
Yes it does ;)

Now, I can post on this forum, as Clemaister played a few beatmpa for me so as to "unlock" the forum ;)

I think you can now have a look ther > http://osu.pictuga.tk/
Now it's kindda powerful !

What works right now?

HitCircles
CircleApproach
Combos (color + number)
Clic on HitCircles

What doesn't work ?

Music (that sucks I know)
Sliders
Spinners
Everything else lol

The link for more informations > http://www.pictuga.tk/fiche-311.html
anonymous_old
0 posts
Here since the beginning
anonymous_old
What made you choose JS/canvas over AS3/Flash?
TheCameleon
85 posts
Joined September 2010
TheCameleon
The wish to make something clean, cross-platform, lightweight, use new (open) standards...
And to show that flash isn't always required (except for music)

Btw the code will be open source (GPL3), server side included
Neo Adonis
320 posts
Joined November 2009
Neo Adonis
I've seen your work, and for a week, I think it's good.

You've done it well at reading .osz files! I've compared with the song, and your work at translating data is excellent! Tip: if you're downloading constantly the latest file, don't do it. You'll be wasting bandwidth. Else, download and upload to your server the file, let's say, every day or week. Just in case...

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.

Now only I can add the following: keep it up!
TheCameleon
85 posts
Joined September 2010
TheCameleon

Neo Adonis wrote:

I've seen your work, and for a week, I think it's good.
:)

Neo Adonis wrote:

You've done it well at reading .osz files! I've compared with the song, and your work at translating data is excellent! Tip: if you're downloading constantly the latest file, don't do it. You'll be wasting bandwidth. Else, download and upload to your server the file, let's say, every day or week. Just in case...
Right now the latest osu file is downloaded each time (from the "Grab the latest osu" link on osu website). I already coded the part which reads osz files, but it's not in use right now. The problem is that our server is free and is very limited. Thus we can't leave files over 2-4Mb on the server. And osz files are often bigger (mp3 storyboard).

We already thought to put in place a cache system.
Therefor we will have to change to anothdr free server (I know a better one but it is often down).

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.
Drawing circles is much faster than using images ;) And it's lightweight.
For this kind of "secondary" problems, we will see later. Right now we have bigger problems (no sliders, no music, no use of dificulty parameters...)

Neo Adonis wrote:

Now only I can add the following: keep it up!
:)
peppy
19,314 posts
Here since the beginning
peppy
Your scaling is off; you aren't enforcing aspect ratio at all. Seems like a good start, I guess.
Rokodo
1,104 posts
Joined August 2008
Rokodo
If you need some server space.
TheCameleon
85 posts
Joined September 2010
TheCameleon
Fo now, we just use the full screen size ;)

We changed to another (free) server. We now are using legtux.org's services. We no longer have that stupid file size limit ;) This will help a lot.
In the meanwhile, we took a real domain name, quicker to remember.

http://www.osu-web.tk/
Zeugziumy
327 posts
Joined June 2010
Zeugziumy
Wow cool project...
I hope you get a nice work there...
And I hope there is taiko T-T

It could have flash for chat, at the Right >>>, like Kongregate
peppy
19,314 posts
Here since the beginning
peppy

TheCameleon wrote:

Fo now, we just use the full screen size ;)
And i'm saying it's therefore horribly wrong.
Hyguys
1,272 posts
Joined May 2010
Hyguys
There's much things missing.
the song.
sliders.
spinners.
and much more.
and more beatmaps.
but good job!

sry for my bad english.
RandomJibberish
osu! Alumni
1,833 posts
Joined August 2009
RandomJibberish
You need to enforce the aspect ratio or it breaks spacing and patterns. All the squares in the map turn into fat rectangles lol

I also reccomend you make the circle sizes proportionate.
TheCameleon
85 posts
Joined September 2010
TheCameleon
Wow... the ratio breaks all my size variables :/ I'll have to fix that !
Now, I will focus on the server side as my new server is much more flexible ;) This might bring music to the game ! Please note that this include that music does require flash.

About beatmaps, right now it just takes the first one in the "ranked", and the first difficulty ;)
peppy
19,314 posts
Here since the beginning
peppy
Using flash is a bad direction. If you use flash for the music, you should use flash for everything, as it will handle better.
TheCameleon
85 posts
Joined September 2010
TheCameleon
Flash is the only way to get the playing time ;) If I could I wouldn't use it.



Edit : Now I'm working on the server part. It's the only way to get the music ;)
First, you will only have a limited choice of beatmaps ;) I'm still having issues, like that :
You are downloading too many maps at once. Lay off for a bit.
This is what appends when trying to get osz files :/

I'll work on JavaScript later. I'll focus on music (quite easy), then sliders (quite hard).
mm201
osu! Alumni
4,495 posts
Joined August 2008
mm201
Your best bet is to write a crawler like Bagno's to slowly copy the beatmaps over to your own server. You'll want to think about re-encoding the mp3s to something super-low-quality for the web.

Or do it by hand for the time being. =P
peppy
19,314 posts
Here since the beginning
peppy
Crawling is bad m'kay?

Just select a few beatmaps and copy them locally to your server (manually). Don't even attempt to allow any map to be played until you have the game in a working state. We can discuss hosting at that point.
IppE
IppE

MetalMario201 wrote:

You'll want to think about re-encoding the mp3s to something super-low-quality for the web.
HE-AACv2, anyone? :D
TheCameleon
85 posts
Joined September 2010
TheCameleon
I'll download the latest beatmap (osz) through php once a day.
I will leave it as it on the server. And extract the mp3 on the server. I may extract osu files too.
That sounds good but it's just an idea. I still need to code it.
At the beginning I wont compress the mp3 file as one lonely mp3 isnt that big on a server. (but longer to load for the user) This might change later of course.

That part will be done quite soon as it's not very hard ;)
anonymous_old
0 posts
Here since the beginning
anonymous_old

peppy wrote:

Using flash is a bad direction. If you use flash for the music, you should use flash for everything, as it will handle better.
I've been trying to say this all along.

TheCameleon wrote:

Flash is the only way to get the playing time ;) If I could I wouldn't use it.
<audio> supports timing cues, IIRC, which may fit what you (think you) need.
TheCameleon
85 posts
Joined September 2010
TheCameleon

strager wrote:

peppy wrote:

Using flash is a bad direction. If you use flash for the music, you should use flash for everything, as it will handle better.
I've been trying to say this all along.

TheCameleon wrote:

Flash is the only way to get the playing time ;) If I could I wouldn't use it.
<audio> supports timing cues, IIRC, which may fit what you (think you) need.
The main problem is that right now firefox's <audio> doesn't read mp3 (only ogg - which isn't much used in beatmpaps). And firefox is one of the main <canvas>-able browser. That wouldn't be nice to make users use Chrome only for that. 

When firefox and the main browsers will be able to play mp3, <audio> will be usable. Btw, now most of the "games" (aka proof of concept) using <canvas> do use flash ;)
peppy
19,314 posts
Here since the beginning
peppy
So use ogg?
TheCameleon
85 posts
Joined September 2010
TheCameleon
Can't convert from mp3 to ogg with php :/
peppy
19,314 posts
Here since the beginning
peppy
Sure you can. Also, stop worrying about automatic conversion. Convert a single map and make the game work. Worry about conversion later.
TheCameleon
85 posts
Joined September 2010
TheCameleon
Conversion would use command line tools (and function such as exec() or system()), which aren't available on free servers.
I prefer to use flash and mp3 at the beginning ;)
peppy
19,314 posts
Here since the beginning
peppy
You're doing it wrong. You're supposed to listen to advice, not ignore it.

*stops following thread*
anonymous_old
0 posts
Here since the beginning
anonymous_old
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?
TheCameleon
85 posts
Joined September 2010
TheCameleon
Well... Thanks a lot for your help !
I won't say anything about any future updates here.

Thanks, those who were interested in this project ;) I may DM you.
Zeugziumy
327 posts
Joined June 2010
Zeugziumy
For my opnion... HTML5 is still on searches for more improvement...
So... Like the project will take a long time, there will be LOTS of changes when making it...
Also... I don't know if someone saw my older message, but an flashed integrated chat at the left... Can add the chats and can choose the tabs
Neo Adonis
320 posts
Joined November 2009
Neo Adonis

TheCameleon wrote:

Conversion would use command line tools (and function such as exec() or system()), which aren't available on free servers.)
If the project works, you would ask for donations so you can (maybe) move it to another server. Do the most you can, and follow advices. Trust me, they are helpful.
peppy
19,314 posts
Here since the beginning
peppy
I already mentioned how they can obtain free space for hosting without funding. Only noone listened.
Clemaister
59 posts
Joined December 2009
Topic Starter
Clemaister
It's understood. I'll try to deal that with TheCameleon.
show more
Please sign in to reply.

New reply

0
1 / 270