Func_Msgboard: Canvas Quake?

News | Forum | People | FAQ | Links | Register | Log in

|  | Canvas Quake?

Posted by RickyT23 [94.7.222.38] on 2012/05/05 02:38:33

Been messing with HTML5 canvas.
CanvasQuake?
That was the first, er, 'version'.
http://rickyt23.com/dudeGame/
This was the second.
http://rickyt23.com/dudeGame2/
Managed to make object oriented bullets. Yay!
Next - crates?
Collision?
WFT is a collision algorithm?!?!?!

Controls:
#1 posted by RickyT23 [94.7.222.38] on 2012/05/05 02:42:29
V1:
left-right or a & d = move forwards and backwards
jump = up (haven't added w yet. I should really. chances are that by the time you're reading this I will have. Maybe. Depends how quick you are to read it and how lazy I am)
space = fire
V2:
new feature - Double Jump! Hold up or a well-timed double tap.
I'm sure the bullets keep flying forever, so that probably means if you play it forever your computer will blow up. I deny any responsibility in advance)
#2 posted by ZealousQuakeFan [82.16.80.21] on 2012/05/05 03:40:17
http://www.metanetsoftware.com/tec...
http://www.realtimerendering.com/i...
Thanks
#3 posted by RickyT23 [94.7.222.38] on 2012/05/05 04:18:45
Those look useful as hell :)
http://rickyt23.com/dudeGame4/
To Do:
Make the array system for objects into a stack (if that makes sense) to stop computers from exploding.
Scrolling
Add enemies, combat, collision, levels, game script system, menu, savegames, sound effects, loading screen, draw better stuff....
:DDD
Interesting Start
#4 posted by than [180.147.94.21] on 2012/05/05 11:15:05
Looking forward to see what you make of this. It would be cool to have a really nice 2d version of Quake. FrikaC made a cool game called Qake that you might want to check out: http://www.frikac.com/?page_id=9
I was doing a lot of canvas stuff a while ago and found it a generally liberating coding experience, since all you need is a text editor and a web browser (I used Notepad++ and Chrome). I made MANY little games and experiments, which I will upload if I finally get some web hosting sorted out.
There were a few things, however, that I hated about it.
1. browsers have different ideas of standards, or are at different states of implementation. The more complex your stuff gets, the more you start to encounter incompatibilities between different browsers and end up wasting time trying to fix stuff that should work according to standards, but doesn't
2. browser security is a pain in the ass to deal with. If you want to modify any data on a canvas, you make it "dirty". This means that often you cannot write back to the canvas for some security reason. This was fucking infuriating. Look up CORS for more info on this.
3. Performance. Canvas has no real fast blitting routines. You can draw lines and shapes etc. but they are anti-aliased. AFAIK there is no way to turn them off. This, along with javascript lacking fast performing arrays (arrays are basically just the same as the standard objects, which are hash-maps) limits the speed at which you can run stuff. What I was doing wasn't especially taxing, and I had allocated my memory in one chunk, rather than as I needed it, so I didn't have any real performance problems, but currently performance is shit compared to native code. NaCl might be worth a look if you want to do some serious coding, but then you are limited (currently) to Chrome running on x86.
4. Local file access is the most awful thing ever. Currently only Chrome has any reasonable semblance of local file access. There are some web standards that allow you to create local databases or use local storage, but it's very limited (understandably... you don't want a 500mb file on your HDD used essentially as a cookie, and you don't want some website uploading random shit or illegal files to your cache without your permission). What I wanted to try doing, and might still try, is to write a Quake level editor using Canvas and OpenGL so that I can make maps anywhere I have a web browser and reasonably modern video chip. The limiting factor seems to be local file access. You don't want to be downloading big chunks of data like models, textures etc. from a server, and there are also legal reasons why it would be best to avoid having the Quake PAK files online. You could run a local server, but that's kind of a pain in the ass.
Anyway, despite what some people seem to think about javascript, canvas and webgl, I reckon they are pretty neat technologies and will enable a lot of cool things to be done online in the coming years (there is already a huge amount of cool stuff that can be done.)
Than
#5 posted by SleepwalkR [92.231.234.65] on 2012/05/05 12:04:29
I can host your shit on fov120 if you want.
#6 posted by ZealousQuakeFan [82.16.80.21] on 2012/05/05 23:30:44
You shouldn't try to do too much in a first project dude. Collision detection alone is really hard to get right.
Canvas has no real fast blitting routines.
Yeah Flash's copypixels is a big reason why I'm enjoying playing with it so much. Can throw a lot around the screen.
Though these days I guess you could use something like Starling and Stage 3D.
I wonder how Stage 3D compares to WebGL actually...
Well I Made A Scrolling Functionality
#7 posted by RickyT23 [94.7.222.38] on 2012/05/06 00:01:34
http://rickyt23.com/dudeGame5
ZQF - Yeah, I imagine that before long it will just become a total clusterfuck, but you have to start somewhere I guess! This thread to me is like some idiot with a push-bike going to a motorcar tyre fitting shop to get his innertube inflated.
I Have Also Been Toying With HTML5 Stuff...
#8 posted by metlslime [67.188.81.46] on 2012/05/06 08:00:00
canvas is supposedly pretty fast if you draw an un-scaled rect with integer coordinates. Anything else is kinda slow.
Standards are also annoyingly nonstandard right now; I have managed to avoid any browser weirdness so far except at the moment i'm using requestAnimationFrame which isn't standardized yet. But i can easily switch back to setInterval (There's no vsync possible either way, argh.) Oh yeah and keyboard input requires different weird browser hacks, but that's nothing new to html5. No sub-millisecond timers, that's annoying.
Javascript is an interesting language, I have learned how to use it rather than abuse it, for the most part. I am just now getting to the point where lack of class inheritance seems to be a problem; not sure what coding patterns i will use to work around that.
I have written a collision system using that Metanet Software tutorial (post #2 above) as a reference, and it works pretty well. I basically move each object to its destination for that frame and then apply the SAT to push overlapping objects out of each other. This is not a great way to do it because there is no concept of motion, and if you're halfway into a wall you're just as likely to get pushed through it rather than blocked on the side you started on. I plan to rewrite it so that the movement vector is clipped against each collision plane, shortening the path of the object so it never has a chance to penetrate.
There's Also Svg...
#9 posted by mwh [121.73.77.183] on 2012/05/06 12:09:19
http://raphaeljs.com/scape/ is fun.
Javascript is a decent enough programming language really, although the environments (i.e. browsers) are a PITA and ohmygod so many of the people talking about it on the internet don't have a clue what they're doing...
#10 posted by ZealousQuakeFan [82.16.80.21] on 2012/05/06 12:19:37
Yeah I generally found SAT is great for getting a boolean response but actually picking a resolving axis and such is really dodgy.
I wrote this as my test for doing a dynamic grid:
http://www.dampdogdev.com/flashPro...
but the actual collision is more of an AI decision than a physical response, monsters just move away from each other when the overlap.
So I'm in the same place, looking at writing an A priori system too. Once you have lots of objects, A moves out of B, B moves into C, C moves out of B into D and everything breaks :P
Javascript: The Good Parts
#11 posted by than [180.147.94.21] on 2012/05/06 12:51:31
http://www.youtube.com/watch?v=hQV...
Worth a look if you've an hour to spare and care about writing nice Javascript.
You might also want to check out Crockford's site for his style guidlines (which I follow fairly religiously even though I used a different style for other languages in the past.)
http://javascript.crockford.com/
http://www.crockford.com/wrrrld/ma... <he used to work at Lucasarts!
jQuery is also worth checking out since it simplifies a lot of stuff you might do with regard to touching the DOM (such as making UIs etc.)
Sleep
#12 posted by than [180.147.94.21] on 2012/05/06 13:09:56
Thanks, that might be cool. If and when I have something worth putting on a website I will contact you. I was thinking maybe a blog and google drive for files would be good enough though. Not sure yet, and for javascript stuff a blog probably wouldn't be any good.
Cool
#13 posted by SleepwalkR [92.231.233.107] on 2012/05/06 13:40:40
New Version:
#14 posted by RickyT23 [94.7.222.38] on 2012/05/06 21:25:26
Monsters!
Bullets are a stack of 50 now. (I think)
You can shoot monsters! They just keep coming!
(Max 6 monsters)
http://rickyt23.com/dudeGame6/
#15 posted by necros [99.227.156.158] on 2012/05/06 21:46:36
can you make it so you aim where your mouse is on the screen? that'd be cool.
also, they look hilarious. :)
New Version
#16 posted by RickyT23 [94.7.222.38] on 2012/05/06 23:05:54
Health and Kills readout.
Messed a bit with monster generation and monster behaviour.
You can't die yet though. But you do take damage.
http://rickyt23.com/dudeGame7/
Haha
#17 posted by spy [92.46.23.116] on 2012/05/07 15:21:58
thats gay
Nice done Ricky
New Version:
#18 posted by RickyT23 [94.7.222.38] on 2012/05/08 02:19:17
The player is now the Quake guy instead of a stick man.
You can Die!
Tuned the monster behaviour a bit more
Added player firing/non-firing frames
Began externalising data into separate .js files (the beginning of a level-loading system)
Best score is 210.
Known Issue: By the time the 'you are dead' message appears, the score is cleared from the screen.
http://rickyt23.com/dudeGame9/
#19 posted by necros [99.227.156.158] on 2012/05/08 03:47:07
this is getting to be pretty cool :)
Added Fiends!
#20 posted by RickyT23 [94.7.222.38] on 2012/05/08 14:09:25
They jump. They chase.
They do no damage (yet).
http://rickyt23.com/dudeGame10/
JS is a lot faster than I had feared.
#21 posted by Spirit [80.171.98.20] on 2012/05/08 14:22:51
Are you following a tutorial or taking a course? This is pretty nice!
Thanks Spirit
#22 posted by RickyT23 [81.131.107.249] on 2012/05/08 15:53:30
Means a lot. :)
I've just finished the first year of a part-time foundation degree in Computer Science. I've done a module in C++, for which I created Minesweeper, and my Minesweeper worked pretty well. Realised a lot of stuff.
'Off the back of that' I created an XML/PHP CMS/directory for a Web Applications module, if you want to have a giggle it's at http://rickyt32.com/CRD_FINAL/ - none of the places are real. And it's very hackable I'm sure.
I've also been using a bit of JQuery for work stuff, so Javascript seemed like a good idea :).
I found one good video on getting started with HTML5 canvas, and used a blog page to figure out how to do object stuff in JS. The rest is all me :) Which is probably why it's terribly inefficient I'm sure, and there are lettle to no comments in my code XD
The vid I found for canvas:
http://www.youtube.com/watch?v=kFu...
The guy has a thick Scottish accent (though I speak fuent Scottish ;), and the links are dead, but it really helped me nonetheless.
#23 posted by RickyT23 [81.131.107.249] on 2012/05/08 15:55:41
http://rickyt23.com/CRD_FINAL/
(the one in #22 has a typo)
#24 posted by Spirit [80.171.98.20] on 2012/05/08 16:30:58
Nice!
You might like http://quakeone.com/forums/quake-t...
Yeah That Looks Cool
#25 posted by RickyT23 [81.131.107.249] on 2012/05/08 16:44:26
But unfortunately I can't find a larger version of the image. 223x600 is the largest :( And Quakeguy is a bit too small :D
'Cause it is a bit of a pain to make the sprites.
New Version:
#26 posted by RickyT23 [94.7.222.38] on 2012/05/08 22:09:27
More Quake textures :)
Improved Fiends (now they have a slashing anim)
Bullets pointing backwards, er, point backwards.
Some new GFXs.
http://rickyt23.com/dudeGame11/
'Nother New Version
#27 posted by RickyT23 [94.7.222.38] on 2012/05/09 04:06:21
http://rickyt23.com/dudeGame12/
This one has killable, fightable fiends.
Also has corpse-stay for dead fiends.
Tweaked ^^
#28 posted by RickyT23 [94.7.222.38] on 2012/05/09 04:33:41
bed.....
New Version
#29 posted by RickyT23 [94.7.222.38] on 2012/05/09 13:41:17
Added blood particles!!!
Minor fixes when restarting after death:
http://rickyt23.com/dudeGame13/
#30 posted by ZealousQuakeFan [82.16.80.21] on 2012/05/10 04:31:16
Those flying monsters are genius :p
Here's what I've been working on btw, still not quite ready to put up something playable just yet...
http://www.youtube.com/watch?v=-2b...
Sweet!! Very Nice :)
#31 posted by RickyT23 [94.7.222.38] on 2012/05/10 04:54:03
Heh - this is my first Javascript project. And really it's the first decent attempt I have made towards coding an action game. Seeing your game made me feel inadequate ;) Still I'm a total n00b to coding sop I shouldn't worry too much I guess....
So are you using Flash CS5 to make it, and Actionscript?
BTW - my first attempt at collision (you can jump on crates - a bit rocky still but functional):
http://rickyt23.com/dudeGame14/
#32 posted by ZealousQuakeFan [82.16.80.21] on 2012/05/10 05:32:22
I'm using the Flex SDK and FlashDevelop, a free IDE for it. I don't actually own Flash CS5 itself, which is the reason other than performance that I'm not using Flash vector graphics. :)
#33 posted by ZealousQuakeFan [82.16.80.21] on 2012/05/10 05:33:52
And yeah it's all Actionscript, levels are stored as XML.
Heh - I'm Using NP++, GIMP
#34 posted by RickyT23 [94.7.222.38] on 2012/05/10 06:05:37
And just Javascript. No framework :P
I'm using the context2D library to draw stuff onto a canvas. I'm not using any of the built in effects for HTML5 canvas, I don't know how much faster it is, but I think it's got to be faster than doing what I am doing - using .pngs with transparency for everything. I couldn't get negative scaling to work either so I have had to make separate images for everything facing left and right.
I get the idea of control loops and everything, but it startles me how many iterations I can carry out per frame. I'm sure if I were better at abstraction it would be a lot more efficient. But ATM the blood particle array is uncapped, and it doesn't seem to give any major slowdown. And the more features I add, stuff like collision detection and damage detection, and rendering two different types of animated monster, it hasn't missed a beat yet.
Firebug seems to slow down sometimes, but I'm not sure that that ism't more the fault of Firebug itself. I only ever use Firebug when I get an error, just in the hope of seeing the error message.
Better Collision Detection On Crates (works Well Now)
#35 posted by RickyT23 [94.7.222.38] on 2012/05/10 06:09:27
No lame monsters on the first life (intentional - nice to see it with just Quake GFX)
5:00am - bad. bed.....
http://rickyt23.com/dudeGame15/
Now The Silly Black Monsters Shoot Green Acid At You.
#36 posted by RickyT23 [94.7.222.38] on 2012/05/11 04:06:21
And they bleed
http://rickyt23.com/dudeGame16/
Oh And Just To Be A Card
#37 posted by RickyT23 [94.7.222.38] on 2012/05/11 04:07:59
And because I was experimenting an forgot about it until just now, this version is running at 40FPS instead of 30. 00ps!
#38 posted by mwh [49.225.209.57] on 2012/05/12 02:25:35
Heh. Doesn't work too well on my phone :-)
I Could Probably Make A Phone Version
#39 posted by RickyT23 [94.7.222.38] on 2012/05/12 04:05:21
Is it performance or input that is the problem?
Or both?
#40 posted by mwh [121.73.77.183] on 2012/05/12 13:04:03
Both of both, the canvas is very flickery for some reason, but yeah input is a more severe issue. Android 4 fwiw.

Post A Reply:

Name: |
Title: |
Body: |

Website copyright © 2002-2013 John Fitzgibbons. All posts are copyright their respective authors.