This is a thing I'm actually really excited about.
I'm implementing osu!mania to run in a web browesr, including loading actual osu!mania maps. If you don't know what osu!mania is, think guitar hero but it goes up to 8 keys.
Anyways, enough chit chat, here's links:
http://z80.ukl.me/dartmania/dartmania.html (http://z80.ukl.me/dartmania/dartmania.html)
Please use chrome to view it right now because stuff seems to get out of sync for me in firefox. I'll be fixing that soon :)NEW VERSION: http://z80.ukl.me/webmania/
If it doesn't work for you, here's youtube:
It's called dart!mania because I'm writing it in the dart language. I'll post source later when it works better.
Looks pretty cool! I use Chrome and it works okay.
Holy crap that is amazing! O.O
So what is your plan for the next update (as in, what do you plan to accomplish)?
Going to switch the mp3 decoder to a pure javascript decoder so I can gurantee support mp3 in all browsers and also have better control over timing. Then I want to make it actually accept user input to play it. Later I want to implement the standard osu game mode (the one with the circles and sliders everywhere), and also play back game replays from other people's plays in the actual osu game client.
Cool! I wish you luck with this project!
and hope I can port it to Java someday... *runs*
Wow that came out nicely it seems. :D HTML5 definitively seems versatile for game development and in your case it doesn't lag. Would using sprites/images slow thing down a lot by the way?
Not really, HTML5 is getting almost as fast as desktop applications nowadays, with Javascript optimizations compilers throw in.
Technically it's already using sprites, they're just 1x1 white pixel sprites scaled/colored as needed. (I may have been a little lazy while writing the library it uses for graphics). But anyways it's all hardware accelerated opengl type stuff.
Aah I see now. By the way, when scaling up sprites is it possible to choose if you want to use nearest neighboor or bi-linear filtering to prevent the images from looking blurry in more recent browsers?
Yes it is. If you want a good reference for what I can do, the WebGL api available in browsers is a currently mirror of OpenGL ES 2.0 (with a few things added or removed, but for the majority of cases it can be treated as OpenGL ES 2.0).
In other words, if your android or iOS device can do it, I can do it and more (the 'and more' part is because the hardware is more powerful).
Also if anyone is interested, I'm using this library (which I also maintain) to make writing the graphics code easier.
https://github.com/unknownloner/DTMark
Ok cool to hear. If I ever port games to HTML5 (eg if this site gets an arcade) this could be handy. I can always stretch graphics up in an image editor but sometimes that takes more space.
I should probably mention there's a difference between using the 'WebGL' canvas context and the '2d' canvas context.
The '2d' context is drop dread simple to use on it's own without any external libraries, but it's sooooooo slooooow if you wanna do anything remotely complex. (and personally I don't like it much anyway, but that's just because I low me some low-level graphics code)
WebGL is fast, but if you don't know what you're doing and don't care to learn you might have a bad time.
The middleground is to use a library which abstracts away the WebGL stuff at the cost of having to structure your code around the library.
My library takes a different approach from a lot of the popular ones by just being a helper library on top of WebGL, so it makes a lot of common tasks (like drawing some 2d sprites on the screen, and using sprite-sheets for animation frames) pretty easy, but you can still just write straight WebGL code if you want and it won't interfere.
Well that's a nice thing you've got right there. :) Good luck completing it !
Quote from: unknownloner on December 03, 2014, 04:26:06 AM
I should probably mention there's a difference between using the 'WebGL' canvas context and the '2d' canvas context.
The '2d' context is drop dread simple to use on it's own without any external libraries, but it's sooooooo slooooow if you wanna do anything remotely complex. (and personally I don't like it much anyway, but that's just because I low me some low-level graphics code)
WebGL is fast, but if you don't know what you're doing and don't care to learn you might have a bad time.
The middleground is to use a library which abstracts away the WebGL stuff at the cost of having to structure your code around the library.
My library takes a different approach from a lot of the popular ones by just being a helper library on top of WebGL, so it makes a lot of common tasks (like drawing some 2d sprites on the screen, and using sprite-sheets for animation frames) pretty easy, but you can still just write straight WebGL code if you want and it won't interfere.
So if somebody wants the speed of HP Prime calculator language, but absolutely can't stand any language that is lower-level than TI-83+BASIC (even C, Lua, Python and Java), then does he pretty much have to forget about HTML5 game programming?
Pretty much if you can use javascript, or any of these https://github.com/jashkenas/coffeescript/wiki/list-of-languages-that-compile-to-js then you're good to go.
Hm I guess I'll pass on HTML5 game dev then >.<
DJ O, if you're wiling to give it a try, I could make some neat projects with you in Haxe (with Snowkit or flixel) ! Let's port your Axe Game on HTML5! :p
Wish me luck lol. :P
Got some bezier curves and circles rendering,
Bezier curve:
(http://z80.ukl.me/bezier/bez.png)
Circle arc, same points:
(http://z80.ukl.me/bezier/circ.png)
For those who don't know, in osu! all sliders are defined by a set of control points.
2 points = straight line
3 points = arc that intersects all three points
4+ points = bezier curve
So in all actuality that first bezier curve would never be seen in game, but it proves that the code works.
If you want to try and run it yourself you can go to http://z80.ukl.me/bezier/ but depending on when you try it, it might not work, because I'm actively working on it.
Your link only displays a blank page, so I assume I'll have to try later. :P
ANyway I like how this looks like. I didn't know such thing was possible in HTML5. Is it very CPU-intensive?
Nope, that stuff is actually 100% on the GPU
Ah ok, but still, would a 2011 mid-end graphic card handle it?
Yeah
Put it this way, the laptops at my school with integrated intel graphics can run it.
Ok cool. My computer is old so...
Fyi DJ, integrated intel graphics are like the worst c ever. Even your phone has a better GPU. :P
Lol I know that and it makes switching to a different graphic card a major PITA. On my 2005 computer I pretty much was unable to set my new Radeon card as primary card because of the on-board video one.
Also my 2010 computer doesn't have intel graphics at least. :P I don't get why they still sell computers (some supposedly higher end) with on-board video. Most games don't support those cards.
Because they don't make intel i3/i5/i7s without 'Intel HD Graphics' built in
Unless you mean actual on-motherboard graphics cards, I haven't seen very many of those these days...
When looking at Staples flyers a few years ago I often saw computers with insane amounts of RAM and disk space, with some other cool specs, but cty Intel graphics.
Well yeah if it ONLY has intel graphics it's kinda meh, but honestly the latest Intel processors have integrated graphics processors that are competent enough to play games and stuff, it just won't look very pretty.
Yeah true, although from what I notice, whenever you buy a game, Intel cards are never listed on it, even for older or lower-end games. I remember that even though my old computer could support Halo CE, I still got errors on install because it said my card was not supported and to continue at my own risk. Even if Intel would release the best integrated GPU ever and have it remain this way for 8 years, games would still not even support it. >.<
By the way, is it normal that your game shows a blank page all the time, even when you're not on? I'm using Opera 26 (based on Chromium).
No, it should definitely be loading... Check the console for errors, if you see any maybe try with chrome.
I don't think Opera 15 and higher even has an error console lol. I guess I'll need to check in a different browser.
EDIT: Nvm, it's just well hidden now. It used to be called Opera Dragonfly. I get the following error:
Uncaught TypeError: Cannot read property 'createBuffer' of null
Yup, that means either your browser or your graphics card drivers don't support WebGL
---
Alternatively, it means I'm getting the webgl context wrong, if the DartMania thing works for you
I checked some website and it appears that Opera 26 doesn't fully support Webgl, only partially. I am surprised considering it's based on Chromium. It could explain why I can't get it to open.
Welp, higher end CPUs actually have better IGPs than the lower end ones. :P I just don't install the driver as far as I'm concerned.
Sorry to necro, but Streetwalrus pointed this thread out to me.
I've been working on this project:
http://www.drewdevault.com/osuweb/
Source code is here: https://github.com/SirCmpwn/osuweb
Try dragging and dropping this file on it: https://sr.ht/ed5.osz
Hi,
Looks interesting. I don't have any OSU files on me so I'll try yours then check out online if there are any other interesting ones, or ask Unknownloner. I remember this thread from a while ago and was sad that the game was not completed. Glad to see another Web-based OSU (although Unknownloner's game was a bit closer to Guitar Hero in style IIRC)
Yes because the game in the op is an osu!mania clone but later in the thread there's some material that looks closer to actual osu!.
As for the file, Sir posted one for testing.
Quote from: SirCmpwn on June 13, 2015, 09:53:03 PM
Sorry to necro, but Streetwalrus pointed this thread out to me.
I've been working on this project:
http://www.drewdevault.com/osuweb/
Source code is here: https://github.com/SirCmpwn/osuweb
Try dragging and dropping this file on it: https://sr.ht/ed5.osz
It's kinda c right now but this has quite a bit of potential with some work. Good job!
I might mess around with a fork of it :P
I will say that it didn't actually use my skin even though I dropped it in lol.
Quote from: Streetwalrus on June 13, 2015, 10:08:36 PM
Yes because the game in the op is an osu!mania clone but later in the thread there's some material that looks closer to actual osu!.
As for the file, Sir posted one for testing.
Oh right I checked now and remember that he posted those afterward too. I mostly remembered the vertical rhythm HTML5 game.
HTML5 osu!mania, Episode 2: The Revengening!!!
http://z80.ukl.me/webmania/
It's there, it works, it's somewhat playable!
Ooh that is awesome :D, but what are the controls in this one?
D, F, J, K.
It says it right on the keys for the first 4 seconds of the song.
Oh right, my bad. I was doing two things at a time :P (watching Star Trek movies) so I missed some frames or part of them :P
Quote from: unknownloner on July 09, 2015, 10:04:50 AM
...it's somewhat playable!
*cough*To people who can play OSU mania like maniacs*cough*
Indeed. Unknownloner chose a particularly hard song... O.O
As far as osu!mania maps go, that one is pretty easy. :P
I wanted to choose a map that was easy enough that most people who already play mania could play it, but hard enough to still be interesting.
If OSU beginner maps are that hard, I doubt I'll play this game. I mean, I couldn't even beat Butterfly in beginner mode at Stepmania O.O, and it had about three times fewer notes.
I didn't say it was a beginner map, I said it was an easy map. Beginner maps are way easier.
Oh ok, I thought that was one of the easiest. I wouldn't have been surprised, considering some games are like that (Donut Quest II, anyone?)
By the way, are song files generated automatically when you load a song in or do you have to make them by hand? Because people could probably use their own songs+backgrounds and if you distributed the game then this would avoid issues about copyrighted songs.
People have to make them; auto-generated maps always suck compared to handmade.
Ah ok. I guess if they can make them then that's good as well, though. I was more worried because I would be willing to include this topic in the downloads section since it seems to be in demo stage now, but if the final version is going to come entirely with copyrighted songs then that could pose some issues.
It supports osu maps, and later will support beatmania and stepmania maps. it'll be on the user to download them at this point
Ah ok, good to hear :)