News | Forum | People | FAQ | Links | Search | Register | Log in
Canvas Quake?
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: 
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) 
 
Thanks 
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 
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 
I can host your shit on fov120 if you want. 
 
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 
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... 
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... 
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... 
 
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/flashProto/dynamicGridMultipleSizes.html

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 
http://www.youtube.com/watch?v=hQVTIJBZook

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/maniac.html <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 
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 
 
New Version: 
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/ 
 
can you make it so you aim where your mouse is on the screen? that'd be cool.
also, they look hilarious. :) 
New Version 
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 
thats gay

Nice done Ricky 
New Version: 
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/ 
 
this is getting to be pretty cool :) 
Added Fiends! 
They jump. They chase.

They do no damage (yet).

http://rickyt23.com/dudeGame10/

JS is a lot faster than I had feared. 
 
Are you following a tutorial or taking a course? This is pretty nice! 
Thanks Spirit 
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=kFueNzCD0W8

The guy has a thick Scottish accent (though I speak fuent Scottish ;), and the links are dead, but it really helped me nonetheless. 
 
http://rickyt23.com/CRD_FINAL/

(the one in #22 has a typo) 
 
Yeah That Looks Cool 
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: 
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 
http://rickyt23.com/dudeGame12/

This one has killable, fightable fiends.

Also has corpse-stay for dead fiends. 
Tweaked ^^ 
bed..... 
New Version 
Added blood particles!!!

Minor fixes when restarting after death:

http://rickyt23.com/dudeGame13/ 
 
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=-2b5RJODyMI 
Sweet!! Very Nice :) 
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/ 
 
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. :) 
 
And yeah it's all Actionscript, levels are stored as XML. 
Heh - I'm Using NP++, GIMP 
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) 
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. 
Oh And Just To Be A Card 
And because I was experimenting an forgot about it until just now, this version is running at 40FPS instead of 30. 00ps! 
 
Heh. Doesn't work too well on my phone :-) 
I Could Probably Make A Phone Version 
Is it performance or input that is the problem?

Or both? 
 
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:
message
question
exclamation
idea
flame
noflame
error
skull
beer
moon
pent
rocket
sheep
pacman
pig
cheese
worldcraft
gauntlet
crate
pitfall
pimp
smile
cool
sad
frown
oi
yay
tongue
evil
wink
neutral
q1
q2
q3
ut
hl
cs
doom
dkt
serious
cube
Website copyright © 2002-2017 John Fitzgibbons. All posts are copyright their respective authors.