just starting out in java/html

[Yaloopy]

so it is possible to use intellisense

Yes, autocomplete, go to definition across multiple files etc. all work if you use VS as your editor.

I've been using VS2010 for some web stuff but some CSS(3?) commands just don't register with it. rgba(...) for example just gets lost. I've no internet connection at home so maybe I'm just missing an update.

Brackets looks great, giving it a download now.

i coded the last half of that little project with brackets and its very very good, it actually does intellisense and so far i never had any issues using it. another plus is that its really lightweight and doesn't take precious resources etc

I tried out brackets for a few hours just now. It's very good. Like you say, lightweight and fast. Brilliant program, I'll be using it a lot if I don't run in to any bugs!

[combatking0]

I had no idea we had so many JavaScript enthusiasts over here

[Hotshot]

That had be most Impressive raycaster that written in JavaScript as saying goes....if you put mind into it then Anythings is Possible 

[ninogenio]

thanks hotshot

ha i just noticed you put up a modified version ck.. its really cool too see it go live!!

i love what you did with the keys!! i just had a quick skim through the code and can see quite a few area's i can improve my own code k++.

i just spent an hour going back over this i added quite a few constants and comments so it should be simpler too understand whats going on. i also modified my casting rays too get rid of the fish eye effect and give much nicer shading so it looks quite a bit better now. *code attached* i haven't had time too make all the good changes like the key stuff you made yet ck but i definitely will be tomorrow.

i have looked into js a bit deeper and we should be able too texture map the walls but i doubt the floor and ceiling will be possible im going too keep chipping away at this.

-edit i just noticed this new one runs about 2x the speed in chrome than it does in ff ill have too look into that tomorrow i am probably doing something dumb 

[ninogenio]

i have implemented all the changes you made ck. the key stuff is brilliant!

i completely recoded the ray casting algo today. i have been reading lots of tutorials on raycasters. i think i finally have a really good grasp of it all. this version runs much much faster with a lot more detail in the casting i also did a bit of shadow casting in the minimap another thing i have learned and made the code a bit more logical. oh and i am 90% sure we can cast the walls, thats next. we can't cast floor or ceiling without webgl though

[combatking0]

I just uploaded an optimised version too. Here's the link again so we don't have to go to the previous page: http://fx.barcodebattler.co.uk/waveSphere/jsraycaster.htm

I removed a nested loop from the RayCast function and replaced it with a couple of divisions.

I'll compare notes with your newest version and see if we came to the same conclusion...

Wow, that's massively different! I like what you've done with the minimap. The code is so different that it is hard for me to make a direct comparison, but we've both made significant performance increases

Tomorrow I'll try to figure out how your new version works.
K++ for making my brain work harder.

[Jim]

I've been using VS2010 for some web stuff but some CSS(3?) commands just don't register with it. rgba(...) for example just gets lost. I've no internet connection at home so maybe I'm just missing an update.

Better in VS2012 and better again in VS2013

Between Java, JavaScript, JScript, JQuery and sleep deprivation I'm a bit confused

Java - object oriented, compiled (to bytecode) language, which runs on the Java Virtual Machine.  Can make executable programs as well as run in a plugin in some web browsers
JavaScript/ECMAScript/js - interpreted script language implemented by most browsers, usually delivered in web pages though engines like Node.js can execute javascript on display-less servers (in the same way servers run PHP).  Unrelated except by name to Java.
JScript, JScript.NET - Microsoft's bastardisations of JavaScript
JQuery - a javascript library which provides an API which hides away browser differences. eg. document.getElementByName('id') becomes $('id') and will work on all browsers.

[ninogenio]

Between Java, JavaScript, JScript, JQuery and sleep deprivation I'm a bit confused

Java - object oriented, compiled (to bytecode) language, which runs on the Java Virtual Machine.  Can make executable programs as well as run in a plugin in some web browsers
JavaScript/ECMAScript/js - interpreted script language implemented by most browsers, usually delivered in web pages though engines like Node.js can execute javascript on display-less servers (in the same way servers run PHP).  Unrelated except by name to Java.
JScript, JScript.NET - Microsoft's bastardisations of JavaScript
JQuery - a javascript library which provides an API which hides away browser differences. eg. document.getElementByName('id') becomes $('id') and will work on all browsers.

ahh so thats what JQuery is for! i spotted it in your webgl christmas entry, but i thought it was for debugging or something ill definitely have too have a close look into this. cheers very much jim.

I just uploaded an optimised version too. Here's the link again so we don't have to go to the previous page: http://fx.barcodebattler.co.uk/waveSphere/jsraycaster.htm

I removed a nested loop from the RayCast function and replaced it with a couple of divisions.

wow that's seriously quick now ck, k+ for noticing that improvement.. the old for loop was killing performance i noticed yesterday. that was one of the reason's i decided too scrap the old algo.

i am ready too implement texture mapping i just need a good method of loading a texture and rendering rectangular sections of it. what way do you guys usually load and blit images too a canvas?

[combatking0]

To be honest I haven't done texture mapping in JavaScript, so this is new ground for me.

[ninogenio]

i figured out texture loading and blitting it goes like..

Code Select Expand


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML Blit</title>

<script>

var context;

var Texture = new Array();
var jpg = new Image();
jpg.src = "sometexture.png/jpg..etc";
Texture.push(jpg);

function init() {
context = document.getElementById('canvas').getContext('2d');
setInterval(loop, 1);
}

function loop() {
context.drawImage(Texture[0], 0, 0, TexW, TexH, 0, 0, TexW, TexH);
}

</script>

</head>

<body onLoad="init()" style="text-align:center;>

<div style="margin:auto;">
<canvas width="800" height="600" id="canvas"></canvas><br />
</div>

</body>
</html>


this will blit the texture but its easy too also use this too stretch the texture or only draw part of it you can also push as many texture's as needed into the texture struct and just step through them all blitting each!

i am now going too add this too the caster 

[ninogenio]

pahh that last one is no good for this

it almost works but fails based on the standard draw image command lets you clip the right of an image but not the left.. i need too be able too grab strips of the image from anywhere..

so ive had too code this it. all seems like a necessary evil  i have had too spit the screen into loads of vertical scanlines they can be of any width if they are 1 the image gets drawn its proper size if they are made 2 it becomes double the width etc...

i can now split the image into any segment i want. i can stretch it in x and y directions or do anything i want with it.

i have had too wing this taking bits and pieces all over and seeing how they work.. so if i am doing anything dumb please let me know. cheers guys.

Code Select Expand


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ImageBlitter</title>
</head>
<div id="screen"></div>
<script>
const TexW = Your Texture Width;
const TexH = Your Texture Height;
const TexX = 90;
const TexY = 90;
const TClipY = 0;
const ScanLineWidth = 1;
var context;

var ScreenVScanLines = [];

function init() {
context = document.getElementById("display");
    context = context.getContext("2d");
var Screen = document.getElementById("screen");
   
for (var i=0;i<800;i+=ScanLineWidth) {
var VScanLine = document.createElement("div");
VScanLine.style.position = "absolute";
VScanLine.style.left = i + "px";
VScanLine.style.width = ScanLineWidth+"px";
VScanLine.style.overflow = "hidden";
var Texture = new Image();
Texture.src = ("Any Texture/png/jpg");
Texture.style.position = "absolute";

VScanLine.appendChild(Texture);
VScanLine.img = Texture;

ScreenVScanLines.push(VScanLine);
Screen.appendChild(VScanLine);
}
setInterval(loop, 1);
}

function loop() {
    for (i=0;i<TexW;i+=1)
    {
        var VScanLine = ScreenVScanLines[i+TexX];
        VScanLine.style.height = TexH+"px";
        VScanLine.style.top = TexY+"px";

        VScanLine.img.style.height = TexH + "px";
        VScanLine.img.style.width = TexW +"px";
        VScanLine.img.style.top = -TClipY + "px";
        VScanLine.img.style.left = -i + "px";
    }
}

</script>

</head>

<body onLoad="init()" style="text-align:center;">
<center><canvas id="display" width="800" height="600" style="border:1px solid #d3d3d3;">If you can read this, you'll need to upgrade to a browser which can render the CANVAS tag.</canvas></center><br />Original code by Ninogenio.<br />Adapted by Combatking0.
<div style="margin:auto;">

</div>

</body>
</html>


this should finally work for my project... time for take two 

[combatking0]

Vertical strips you say - my UDG challenge entry effectively did this. Let me dig though my sources...

OK, imagine we have a square image 128 pixels across and we want vertical strips 8 pixels across...

Code Select Expand


cnvs.drawImage(imageObject, stripNumber * 8, 0, 8, 128, stripX, stripY, stripWidth, stripHeight);


I didn't think of using this approach before you mentioned it, but this should work.
You could have the images stored in an array, allowing you to use imageObjects[hittype] instead of a series of IF statements.

I'll put a prototype together and see how well it runs...

edit
I've put my attempt here: http://fx.barcodebattler.co.uk/waveSphere/jsraycaster4.htm
but I'm unable to work out how many strips there are per section of wall - if I could work that out I would have this working perfectly.
My test images are stored in http://fx.barcodebattler.co.uk/waveSphere/images/ and are each 128*128 pixels in size.

[Jim]

Code Select Expand


var jpg = new Image();
jpg.src = "sometexture.png/jpg..etc";

One thing you should be aware of...when you set the src property on an Image it begins an http request to get the piccy and returns immediately.  The Image is only ready some time later once it's downloaded which could be a while.  When it is ready, the 'onload' method on the Image is called, e.g.

Code Select Expand


var jpg = new Image();
jpg.src = "sometexture.png/jpg..etc";
jpg.onload = function() { alert("I'm ready now"); }


[combatking0]

Here's a crude attempt to get it working. There's a counter in the code which checks how many images have loaded and refuses to run the program until all of the images are ready.

I'll put it live on my server when I get home.

[ninogenio]

thanks jim!

i noticed this morning that ck had added an onload too the source so done a bit of investigating... if i hadn't got the heads up from you guys that would have came back too haunt me. i have only been running everything locally on my hd so far . k+

@ck.

i spent half the night last night first working with draw image couldn't get it too work. so went with the scanline method. i eventually got that too work but i hated doing it that way it was big time overkill. really slow and clunky.

i then seen your post this morning and thought, bugger it ill give it one last go after five mins. something clicked and i got it too work 

i have attached source and images. well all this needs is a little game logic and it will be really cool 

-edit haha. you posted while i was writting this, awesome stuff. well done mate 

[combatking0]

I've realised I can modify this to accept images of any size. I'll add the changes before I make it live tonight.

[ninogenio]

excellent! yes that should make life a lot easier.. i am going too start work on sprite casting that part should be quite easy. then i think we have everything we need too go make some retro games 

[combatking0]

Brilliant! K++ for starting this one off - I've learned a few things about Raycasting and between us we've built a solid looking game engine.

I've uploaded the scaling version. From the looks of it, the best aspect ratio for images on the walls is roughly 1:2 to prevent stretching.

[ninogenio]

thanks ck!

its actually getting better i couldn't get time to do the sprite stuff yesterday. but i have had time of work today so went too start doing sprites.. but noticed loads of places for optimization, got rid of loads of if checks and precalculated everything possible. at this point it was running really really smooth. i would say about twice the speed. then i added all our scene textures too the mini map which looks cool. then i redone all the movements. it now doesn't get stuck when you hit a wall and you can specify the distance you wish the collisions too take place.. i added a small factor too stop the wall textures becoming very large and skewed.

now i will do sprites update attached  with the object.width stuff you added

[combatking0]

That's a huge increase in performance - I had a go at the most simple, basic, fundamental floor casting on the live version. It runs a bit slowly, and I'm working towards not messing the code up too much.

I'll blend your improvements into my experiments and see what comes out of the other side. Hopefully some sort of golden egg.