Topic: New junkie says hello

Hello

I'm new to register but I've been reading your forum for a few months. I was inspired to learn javascript after viewing Benjemin Joffe's raycaster and ended up finding Iron Wallabys script for a raycaster. I actually remembered seeing his RPI address and found I had saved the script about a year ago before I even knew javascript. It was so cool even without images or color that I had saved it. Well I picked it apart and figured it out and then figured out how to add some canvas to it. I had to change a bunch of stuff and finally got IE to work also, but then suddenly it started getting some error and won't run. I still have some versions that run in IE but they are different in how they cycle. I set it up so the key event is what triggers the draw function . The problem is opera flashes some of the blocks unless you use setTimout( with quotes so it's only one call) to draw each key event. Even then it flashes blocks if you make the viewing area larger than 256. It works fine in firefox but setInterval is too slow for some reason and so is using setTimeout globally so i tried it different ways. I'm hoping the experts can sort it out since I tried everything.

well here's a link to the thing.
http://h1.ripway.com/politickler/raycaster/256View.html
I'm not sure if this works in IE. I might not have added the google script to this page. I will post the working one when i have a little more time. Sorry IE users. It's dreadfully slow with IE. Maybe 3 frames per second.

I added sounds when you walk through the doors and get warped. I added the moving block using splice() but it's only one block for now. I was going to ask if anyone knew how to get an enemy drawn and still draw the walls behind it. Then you could just draw the enemy with a transparent gif and animate it with dhtml ala sprites. I have a script already to go but i couldn't figure out how to draw those walls behind the enemy sprite . I'm really new to computers but this stuff is so interesting i can't stop learning.
I have some other ideas but I would like some on what it needs. I never played wolfenstein and played doom only a few times. I need some ideas.

If I'm not suppossed to reuse programming posted here, I'll remove this page from it's location and stop using it.
Oh yeah, almost forgot... I used the same technique as Mr. Joffe to move the background. Hopefully this is okay.

[quickReply]

racerX: Hello and welcome to the Asylum. You arrive right at the point where I was striving for new people coming with crazy stuffs.

To fix your flickering problem, do some double buffering, that is : render the whole thing in a canvas that is not displayed ( or not even in the DOM tree ), and once the whole frame is drawn/built in it, copy it into the canvas that is in the DOM tree.

To draw some sprites, in DHTML I used a zIndex on each 'slice' and that work all by itself. Using canvas, you'll probably have to create a zBuffer of some sort. It can be as simple as casting the rays, but storing the slices ( the texture, texture position, and depth ) in an Array. Process the entities, place them in the same Array. Sort it and finally render the slices & entities.

Hope that helps,

[/quickReply]



(Edited by poi on 06-29-2006 09:46)

I love the way everyone uses the old Wolfenstein textures, not sure how much of the caster is your work but great stuff none the less.
It works for me in IE and FireFox, but its a lot faster in FF.

Thanks poi

Umm.. I should start by saying that I'm very ignorant as far as programming techniques. I'm self taught through veiwing scripts and various tutorials online. I'm about 3 months into learning so stuff like a buffer is unknown to me. If there is a tutorial or a simple example you know of, could you point me in the right direction? Thanks in advance.

By the way, I can't wait to see 3D canvas. I found a script at teethgrinder for doing 3d with canvas and I added some other points to it to make some shapes. It's pretty cool and it gets like 10 fps. amazingly fast IMO.
here's the original scripts by teethgrinder
http://www.teethgrinder.co.uk/perm.php?id=128

here's my experiments with it. It was fun learning how to add vectors and exactly how matrix transformations work. Cool stuff.

http://h1.ripway.com/politickler/3Dcanvas/3dCanvasonpage.html

Hey, very cool. Glad to see somebody liked my little raycaster.

Welcome around, looking forward to seeing some more experiements.

Actually, I think it's hilarious how techniques have evolved. I used to use a million DIVs for 3D stuff (racerX: if you've not seen it, it's here, then toyed with SVG for a while... looks like the canvas tag might become the predominant approach soon... looking forward to seeing where the interweb goes, maybe we can finally get away from Flash (which totally doesn't work well on my linux )

---
Website

(Edited by Iron Wallaby on 06-30-2006 00:06)

thanks Iron Wallaby.
I tried doing the div thing but i couldn't get the images to resize properly. I think you had it so the images were already sliced and then resized automatically. First I made image slices and got it working, then i turned the image tags into divs and tried to have the image be the background in the divs. I used block attribute and then shifted where they would line up but it would leave an empty slice at each block.
That's when I resolved to turn it into a canvas tag script. I studied Joffe's and realized it was simply the drawImage() that made it work. Simple. So I tried it and it worked the first time. Imagine my shear joy when it worked. It was probably 4 AM but I literally yelled YES!!!!!. Your script was a breakthrough in my learning. Thank you for allowing me to use it.

Also i wonder if you could look at something. I used your variable tex as the key to where the image is drawn from when using drawImage(). I had to fudge it by making it slightly smaller or I would get one portion (I assume it was when 63-tex = 0) that would draw nothing so there would be spaces between the blocks. I could not figure out how to avoid it and it's the reason the image gets blurry and distorted as you near it.

I had to take the tex varialble and divide by 1.05 to make it a little smaller.
Can you think of a way to avoid using the 1.05? When I make the slices bigger, say 8px instead of 4px i have to fudge it by dividing by 1.15. Maybe that helps?

You had to divide the tex variable? That's very odd, since tex ends up as an integer [0..63], used to select which slice of the texture to use (and yes, you're right... I just chop each texture up into 64 images, that way I don't have to worry about slicing them in code. Nasty hack, but at the time, I wasn't aware of how to do it any other way!)

See, in the code, can_u and can_v are where the ray intersects the wall, or the horizontal axis and vertical axis respectively. So, they're how I figure out which texture slice to use. The portions of (63 - tex) are to flip the wall texture backwards if it's on the back face of a cube. This way, no matter which direction you look at the cube from, the texture map is facing the same direction. I use 63 since that's the maximum value of tex, and since it's an integer. If it's a floating point value in the range [0..64), you're going to want to use (64 - tex) instead.

That's my only guess so far... if I get a chance to look at your code in-depth, I'll try playing around.

[edit] this reminds me... you said you saved the script, if you want the version with the images, it's here.

---
Website

(Edited by Iron Wallaby on 07-01-2006 03:41)