Dark Bit Factory & Gravity
PROGRAMMING => Other languages => Topic started by: ninogenio on January 10, 2014
-
hi every one,
i started this topic because i would like too learn as much as possible about coding in html/java i started modifying some of combatkings code last night but it all went horribly wrong. i think a good first step would be too ask what sort of environment do you guys set up too develop app/demos.
last night i was just using notepad then saving the html file dragging it into firefox and trying too debug/trace variables with the firefox debugger. it was all really rather cumbersome and taking far too much time.
so i guess a good first step would be too get comfortable with the available tools and see what you guys have learned over the years.. all the do's and dont's :cheers:
-
My first tip is debugging:
*1 Have a div tag below your demo, such as this:<div id="debug"></div>
*2 At the start of your main program cycle, add this line of JavaScript:document.getElementById("debug").innerHTML = "";
*3 At every point in your JS where you need to monitor a variable, insert this code:document.getElementById("debug").innerHTML += "#variable_name# = " + #variable_name# + "<br />";where #variable_name# is replaced by the name of the variable being monitored, but without the hashes.
Most modern browsers have developer tools, but this is the most consistent method I've found for debugging.
All the best in exploring JS. :D
-
that is perfect ck!!!
that will make my life much much easier thanks mate, i have been looking at various web development tools tonight and the one i keep coming back too is firebug it lets you edit code in real time have you had any experience with any of these tools? i would like too get the environment feeling a little more like the visual studio ide.
thanks again.
-
At the moment I'm trying to learn WebGL and I'm writing code in an editor called Brackets (http://brackets.io/) (works on Windows, Linux and OSX).
The great thing about it is that it allows for live development in Chrome. When you activate the Live Preview feature, it opens your project in Chrome and any changes you make in your HTML or CSS files are updated instantly, and any changes you make in your JS files are updated as soon as you save the file.
Let's say you're working on a horizontal menu using CSS and trying to figure out the spacing between menu items. It gets tedious to make changes using Notepad, saving the file, then switching back to the browser and reloading the page. In Brackets, you can just run it as a smaller window on top of your browser (or on a second monitor), change some values in your CSS file and see the HTML file being updated in real-time.
And an example in JS: you're trying to draw stuff on the canvas, but you're not exactly sure where you want to place it, or what size it should be. Using Brackets, you can just modify your code, save the file and immediately see the changes.
-
IE9+, Chrome and Firefox all display their developer tools when you press F12. The other major competitors (Safari, Opera) might work in a similar way, but I haven't tested them.
Brackets sounds excellent. K+ for recommending this one. You're one step ahead of me with WebGL, Gore Motel.
-
thank you guys!!
@gore motel that sounds like the ticket! k++
when i get a little time too sit down tonight im going too try a raycaster out so ill post where i get too.. gulp :)
-
The dev tools in IE are really pretty good. You can set breakpoints, skip over code and have it break on exceptions.
I use VS to type in my code and just F5 the browser. At least then I get intellisense. VS can also debug javascript but that's massive overkill.
btw. Java and JavaScript are two totally different things, related only by having a similar name.
Cheers,
Jim
-
Thanks for clearing up the JS / JavaScript difference, Jim. I've been using JS as a shorthand for JavaScript, but it could cause some confusion further down the line if I keep doing that.
-
for someone starting out its very easy too get confused between the two. i must admit up until recently i really didn't have a clue there was a difference ;D.
cheers for the tips too jim. so it is possible too use intellisense? that would make a massive difference! ill have too give a similar set up a go.
well tonight i finally managed after coding for the last five hours too get a basic raycaster i had been working on in fb ported over too javascript using the canvas. i was making some of the most stupid mistakes you guys would lol.. like cnvs.fillstyle = "rgb(255,100,100)"; missing out the capital S in fillstyle so then i was getting no color etc.. but i think i finally have a pretty good grasp of things.
now i just need a good method of how too accept control inputs i need 4 inputs for forward back turn left and turn right. i would ideally like too have my code compatible with touch screen devices but i am really not sure what too look into.
oh one other thing. i notice you set your form too only invoke the main function at every 40 millisecs or 25fps ck. is there any particular reason why its set at this or should it be ok too go too various different refresh rates.
thanks everyone.
-
->CK - I said Java and Javascript are different. For me JS and Javascript mean the same thing - the files have a .js extension. Java source code usually ends with .java.
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 notice you set your form to only invoke the main function at every 40 millisecs or 25fps ck. is there any particular reason why its set at this or should it be ok to go to various different refresh rates.
You can do this in a number of ways. If you use setInterval then your code will get called at (or around) that interval, unless of course the last one is still running. So if you set it too fast you'll end up just skipping some calls, or having some delayed. Javascript is single-threaded in the browser always.
In my xmas tree demo, I set a single shot setTimeout at the end of each frame, which means at least none will get missed and the frames are spaced evenly even if they took a long time to render.
I suspect neither is a particularly accurate timer, I don't think you can really guarantee perfect 60Hz stuff on the web.
Jim
-
thanks jim!!
i used setInterval and set it too 16ms i dont know what the difference would be between this and setTimeout. i hope i have used it properly.
well i figured out key presses and other things so. here is my first little project i hope i have used the various java script items properly. if any body sees anything i am doing that's not great could you please point it out too me as it really was a bit of a stumble in the dark.
cheers guys i doubt i would have gotten this far into my learning without the helping hand!
edit- i should say the keys are w for strafe forward s too strafe back and arrow left arrow right too rotate cam.
-
->CK - I said Java and Javascript are different. For me JS and Javascript mean the same thing - the files have a .js extension. Java source code usually ends with .java.
Between Java, JavaScript, JScript, JQuery and sleep deprivation I'm a bit confused. I'm ready for a holiday again, and I've only been back to work for a week ;) All I know about Java is that I don't want to install the SDK again - it was a pain in the bottom.
Anyway, I prefer 25fps for no good reason - most machines these days should be able to do 30fps or 40fps with few or no problems. Seems a bit odd that I have nostalgia for a frame rate. Time I upgraded!
I noticed during the recent Christmas competition that my entry was running slower on my laptop than it was on my work desktop when I was using setTimeout() at the end of each frame, but setInterval() made things more consistent, so only a very slow machine should start to skip frames.
As for mouse position and key inputs, I have built a couple of functions to deal with them.
Add the following to the body tag:<body onKeydown="control(1, event);" onKeyup="control(0, event);">Then add the following to the canvas tag:<canvas id="canvas_id" width="canvas_width" height="canvas_height" onMouseMove="mouseCon(event);" style="cursor:none;"> where canvas_id, canvas_width and canvas_height are your preferred settings. The style attribute hides the mouse pointer should you want to add a custom pointer in the demo, such as a cross-hair :)
Next in your JavaScript code, create these variables:var keyboard = new Array();
var mouseX = 400, mouseY = 300;
// Firefox Check
var ffx = false;
var cnvsX = 0, cnvsY = 0;
Then add this code which should run only once before the main program function: // If the browser is Firefox, locate the canvas position in the document
if(navigator.userAgent.indexOf("Firefox") > -1){
ffx = true;
cnvsX = c.offsetLeft;
cnvsY = c.offsetTop;
}
// Reset the keyboard
for(i = 0; i < 256; i++){
keyboard[i] = 0;
}Also add these functions: // Keyboard Controls
var control = function(et, evt){
if(ffx){
event = evt;
}
keyboard[event.keyCode] = et;
}
// Mouse Movement Control
var mouseCon = function(evt){
if(ffx){
event = evt;
mouseX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - cnvsX;
mouseY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - cnvsY;
}else{
mouseX = event.offsetX;
mouseY = event.offsetY;
}
}
With each key press (or release), the keyboard array entries will be set to either 0 or 1. The following page contains a list of common key codes - these codes match with the addresses in the keyboard array: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
Please let me know if I have missed something or designed something which is horribly inefficient.
-
wow thanks for that ck!!
in the raycasting demo i posted above i used a different method for keystrokes. i went with a
c.addEventListener( "keydown", DoKeyDown, true);
c.setAttribute('tabindex','0');
which gives my canvas focus and invokes the DoKeyDown function.
but i like your way.. it's far more like i am used too. and also the tips for the mouse/crosshair will be invaluable :cheers:
-
k++ on that raycaster - it looks brilliantly retro! I've got an idea or two for it as well.
I'm glad you like my input functions. The keyboard function can handle multiple keys being pressed simultaneously, up to 4 on most systems.
-
thanks ck.
this was just something too dip my toes in the water. it's actually towards a first person pacman ive always wanted too do. i really wanted too do textures/floor and seiling casting but i dont think that would be possible in its current position. next up im going too try and do this in webgl and sample the textures in shaders. too do it all properly.
what ideas did you have for it? cheers..
-
There was a game called Combat for the Atari 2600 - these graphics are just right for a 3D version of it!
-
For animations you might want to consider requestAnimationFrame (http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/) (and use setInterval as a fallback for older browsers).
requestAnimationFrame will try to match the display's refresh rate, and will fire less frequently when the browser window/tab is minimized (or in the background).
More about it from Mozilla (https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame) and creativeJS (http://creativejs.com/resources/requestanimationframe/).
-
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.
-
There was a game called Combat for the Atari 2600 - these graphics are just right for a 3D version of it!
ahh i know the one ck! me and my cousin used too end up rolling around the floor fighting over that one ;D.. yes i can actually see that working with this basic raycasting really really nicely. you could have a direct port of the game running in the hud and just ray cast everything too the left, that would be really cool 8)
i have been wanting too do a pacman with a spin for a while and i got the idea a few days ago too try a raycasted version.
For animations you might want to consider requestAnimationFrame (http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/) (and use setInterval as a fallback for older browsers).
requestAnimationFrame will try to match the display's refresh rate, and will fire less frequently when the browser window/tab is minimized (or in the background).
More about it from Mozilla (https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame) and creativeJS (http://creativejs.com/resources/requestanimationframe/).
ahh another top tip there gore motel! thanks very much i will look deeper into this thanks very much!
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've hosted my adaptation of your raycaster at http://fx.barcodebattler.co.uk/waveSphere/jsraycaster.htm with support for multiple key control.
I'll be making changes to it to support a floor and possibly a sky when I figure out how it works.
-
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!
-
I had no idea we had so many JavaScript enthusiasts over here :o
-
That had be most Impressive raycaster that written in JavaScript as saying goes....if you put mind into it then Anythings is Possible :clap:
-
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 :P
-
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 :(
-
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 :D
Tomorrow I'll try to figure out how your new version works.
K++ for making my brain work harder.
-
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.
-
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?
-
To be honest I haven't done texture mapping in JavaScript, so this is new ground for me.
-
i figured out texture loading and blitting it goes like..
<!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 :D
-
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.
<!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 ;D
-
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...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.
-
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.
var jpg = new Image();
jpg.src = "sometexture.png/jpg..etc";
jpg.onload = function() { alert("I'm ready now"); }
-
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.
-
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 :P. 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 :updance:
i have attached source and images. well all this needs is a little game logic and it will be really cool 8)
-edit haha. you posted while i was writting this, awesome stuff. well done mate :cheers:
-
I've realised I can modify this to accept images of any size. I'll add the changes before I make it live tonight.
-
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 8)
-
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.
-
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 :D update attached with the object.width stuff you added :cheers:
-
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.
-
very very cool ck!!
just had a two sec mess around if you pass the PAngl and RayAngle var through to moveRayindirection.
and then do this in the floor casting part
syd = truncate(VeiwDist / (Math.sqrt(distX*distX + distY*distY)*Math.cos(PlayAng-RAng)));
that fixes the fish eye effect. it looks really cool but the lines still break up i am not too sure why that is atm ill look deeper.
thanks for all this ck it looks far far better for all your ideas/additions!
-
That's certainly improved the geometry!
One possible cause for the lines breaking up is the ray block crossing detection not being triggered. This is only a temporary attempt at floor casting and I'll be replacing it with a texture mapping algorithm just as soon as I've merged our codes together.
-
excellent! i never thought floor casting too be possible so massive props for this. i never thought js was powerful enough too handle stuff like this.. color me impressed :)
i am in the middle of the sprites atm, so with your floor casting and the sprites this is going too be an awesome little framework for games.
-
After much messing about with the code, I admit defeat - I can't do floor casting without either re-inventing webGL or reducing the FPS to less than 10.
-
thats a bit of a shame. but tbh im more than happy with the checkered grid it makes a huge difference too the look of the whole thing. if we can just get the lines too fully draw it is really quite impressive!
i am having some trouble with z ordering the sprites. i can render them properly but its difficult too decide which parts too draw before and after the wall basically as we sweep the rays round casting everything we have too check too see if the sprite is some where inside the fov then check the sprites dist value against each ray and decide if we want the sprites scanline too be drawn before of after the wall scanlines. i am getting closer too success though :)
-
I'll add a function to make the grid - we can put different colours on the ceiling and floor to add a tiny bit more detail too.
edit - I have uploaded the latest version with your newest optimisations and a few changes for the floor line rendering here: http://fx.barcodebattler.co.uk/waveSphere/jsraycaster5.htm
I'll keep trying to improve the grid drawing algorithm. I have an idea to make it more complete and less computationally expensive.
-
I'm now confident that I can come up with a solution to the gaps in the floor / ceiling lines. Hopefully I'll have it finished for tomorrow night.
edit - I have improved the existing algorithm in that there are fewer gaps, but the draw order makes it look a bit strange when the player is moving.
I'll try to fix this tonight.
-
excellent thanks ck that new uploaded one looks great! k+
i was up half the night last night trying too bend draw image too my will :) i almost have the sprite working but for some reason when you get close too it its like it buffer overflows. i am also not sure how too make masking work for the sprite too make only the sprite appear and not its background.
ive attached this just too show atm its still very very roughly done and not working properly. im finding drawimage too be very difficult too work with im used too just going in and grabbing any part of an image and doing as i please with it
- edit pahh just noticed the sprite is badly messed up in firefox i have been developing in chrome and it wasn't quite as bad :(.
do you know ck if its possible too go too the image byte level it would make my life a bit easyer if i could manipulate the image down at the lowest pixel level.
-
I think the main problem with the transparency is that your image does not have transparent sections. I will test this. The Z-ordering problem also looks interesting.
I'm thinking of adding an image buffer which would use Z-ordering in some manner and then draw the objects from the buffer. I'll explain it better when I've done it.
-
i managed too fix up the sprites a lot tonight i edited the above link with the update.. all the clipping is working you will see as you walk round the sprite never draws on parts where its not ment too. the only tiny issue now is that the sprite isn't getting properly stretched on its quad. but hopefully this is fixable.
the way i z order the sprite is i get an absolute z value when i do its position processing then for each scanline we do in our raycaster i get a z value for that strip and if the sprites zval is more than the walls draw a strip of the sprite the same width as our ray strip and if not i don't. its the drawing stretched strips of the sprite with drawimage that's had me pulling my hair out.. i wish drawimage was a little more conventional and let us just grab any segment of the image we want and do what we want with it as this would have been done in five mins :)
ohh i noticed for some reason chrome and firefox are both processing drawimage differently you will notice in ff the quad stays the proper width but in chrome it shrinks.
-
My FF is doing something odd - It's only drawing the left-most strip of the walls and sprites.
I'll delve into the code and figure it out.
-
ahh bummer it sound like a buffer overflow. i actually don't think we are going too be able too properly do the sprite with draw image. i was thinking is it possible too store our image in a div tag and yous styles too clip and grab random parts of it. i think you can resize as well im just not 100% sure if overlaying a div image on a centred canvas would work properly.
-Edit i just noticed you have managed too fix the floor and ceiling casting the code is really well integrated and runs really fast!, Well done mate. that looks really really nice!!
-
Thanks. I had to make a few of the local function variables into global variables, but it's working.
I've fixed a line to make the sprite the correct width, given that it is always cut into 29 strips, where it sayssprinc += Sprite.RightI have changed it tosprinc += Sprite.GfxHndl.width / (14.5 * Sprite.Right);
I'm not 100% sure how the sprite rendering works, but I've noticed that it always starts from the left of the sprite, even when the left-most strips should be off screen. After looking at the sprite though, I've noticed that it doesn't need to be skewed like the walls do, so it should be possible to draw it in one command instead of in strips, but I need some sleep for work in the morning. We're making progress though, and this is definitely coming together.
On a sort-of related note, I was watching episode 1 of "8-bit Pwny Club" and their number 1 toilet in video games (the subject of the video) was from Duke Nukem. The rendering engine looks much like the one we're developing, only with textured floors and ceilings.[youtube]capDUGdxo2U[/youtube]
-
sprinc += Sprite.GfxHndl.width / (14.5 * Sprite.Right);
k+++++++++++++++++ :) ck you just made my night with that, i spent hours staring at this and just could not get it correct. now im looking at it, i am kicking myself for spending so much time on it.
I'm not 100% sure how the sprite rendering works, but I've noticed that it always starts from the left of the sprite, even when the left-most strips should be off screen. After looking at the sprite though, I've noticed that it doesn't need to be skewed like the walls do, so it should be possible to draw it in one command instead of in strips, but I need some sleep for work in the morning. We're making progress though, and this is definitely coming together.
yeah i tried for this at first but quickly realised it was a bit more involved. when the sprite is half obscured by the edge of a wall if drawing it in a complete form its very very hard too clip the part of the sprite away that should sit behind the wall. the only way of achiving this is too unfortunately draw the sprite in the raycasting sweep. checking the sprites z values against each rays sqr(x*x+y*y) and if the sprite strip is further than the ray hit point you just don't draw it this gives the nice illusion that the sprite is moving behind the wall when infact its actually just disappearing. now that you fixed that part for me i can add some cull checks and clipping against sceen edges.
On a sort-of related note, I was watching episode 1 of "8-bit Pwny Club" and their number 1 toilet in video games (the subject of the video) was from Duke Nukem. The rendering engine looks much like the one we're developing, only with textured floors and ceilings
yep i would say for just two guys developing in an interpreted script language we have done a some really awesome stuff here so far..
next up ill clean all the sprite code up. make it a lot more readable. then ill integrate all your code into mine and make it so we can have as many sprites as we need.
-
fixed this up lots so far today, i got it too render multiple sprites as well as some other things.
i decided too go a different but quicker way i store all the ray z values in a buffer then draw the sprites in there own function. the multiple sprite system turned out quite clever i think.. at init time you push all your sprites onto a stack and the little engine does everything else for you.
i also got sprite too scene z clipping working properly. And i managed too get spriteZ ordering working too. i store each sprite index in a list and based on there z value move the indexes around too make sure the draw in the correct order. so if you stand in a position where one sprite falls behind another, the one closest will always draw first.
still left too do is clip the sprites against the left side of the screen... my poor brain is sore from fixing all that atm so i will come back too it. and i need too figure out how image masking works. then i can animate the sprites.
ohh and i added code too shade the wall textures, i commented it out because i wasn't sure i liked it. if you un-comment the code you will see the effect.
-edit sprites are pretty much done now they have transparency the clipping is 100% fixed and they are all animating. yay! :)
-
Brilliant! This is definitely coming together.
I'll have a look at the wall shading tonight and see how well it works.
edit - The wall shading looks great. We would need to change the floor and ceiling so that they use a gradient fill instead of a solid colour for added effect, but that's not difficult.
I'll leave the sprite functions in your capable hands and see how it looks when you're happy with it.
-
cheers mate,
well after doing a half nighter the sprites are pretty much finished! they have transparency they clip 100% everywhere and they are animating through there keyframes.
if you look closely you will see the animation is happening at a different offset on each sprite this was just too show they are all being processed completely separate.
phew i am glad thats taken care of :)
if its ok i will leave the floor gradients up too you. i think from me next it will just be speed optimizations and organizing everything better. then we can go make our own games with this.
i have edit my last post with the new animated fully working sprite version. :cheers:
-
I've just uploaded a version with floor / ceiling gradients here:
http://fx.barcodebattler.co.uk/waveSphere/jsraycaster6.htm
I'll take a look at your improvements over my lunch break - I look forward to seeing how far they've come.
-
excellent! the gradiants make a big difference,
i have a few ideas for hopefully big speed ups but ill wait too hear if you have any suggestions with the sprite's first.
also i am going too clean up the code and group all the variables into objects. then at any time ie a key press we can do level.shading = 1; or level.detail += 1;
i also need too add static sprites and a little code too allow sprites too be removed off the stack and when ever needed new ones added this can be done with a simple function call.
i want too keep it as basic as possible because when we head in different directions too make different types of games the engine will change quite a bit depending on the type of game we make and that particular games requirements.
-
I've noticed the sprites tend to use the bottom-left corner as their "origin" (I'm not sure what the correct term is) point, which causes the sprite to turn about that particular corner when it is approached from various angles. If the sprites were drawn to the left of this point they would then turn about their bottom-centre instead. Other than that I have no suggestions as it looks great.
Putting all of the variables into objects is a good idea as it makes the code more portable.
When managing the sprite stack, you can use the "splice" function on the array which holds the sprite objects to remove particular array entries, but you probably knew about that already.
-
ahh yes!
i see what you mean mate, thanks for that.. sometimes when you look at something for too long you need someone to cast an eye over it. cheers,
well so far i have put all the things that belong too the engine in a caster core object and player stuff in a player object.
i have also made the map about twice the size in x and y directions.
about adding and removing from the sprite stack. after some test's i dont think it necessary. i ran a test with lots of scattered sprites and lost nothing compared too just 4. this is because of all the checks i have in place...
so its much better too just push every sprite for the level and if one die's set its cull flag so it never gets processed until we want it too.
then on level change delete the whole list and build a new one.
this now is looking very very nice. i will have all the engine done by tomorrow, then ill upload it. then we can put a full stop on it and build our games.
something i have been thinking of today was a visual level editor that lets us place all our textured blocks on our map and writes out the data array for us into a txt file. as the maps are now very very big and hard too edit by hand
-
Brilliant! I'm still trying to think of new ideas for a raycasting engine beyond the traditional shoot / search / collect.
Definitely some sort of puzzle involving lifts (to go between maps) come to mind.
edit - I've just noticed that I've put the wrong case on one of the file names on the server. I'll fix it tonight.
-
i am personally going to make a raycasted pacman clone,
hows about a hedge maze game?! i got the idea yesterday while changing the map around. you could make lots of maze's made out of hedge or any other textures where the player starts at the middle and has too find the exit there could be like four exit's but 3 are dummies.
and all the while the player fights against a ticking clock. you could hide the hud and if the player gets lost let them trade some of there time left for a quick look at the map.. you could even throw little trivia challenges or something along the way in.
i think it would make a brilliant brain game. i really think it was a shame that raycasting came along so close too the begining of 3d rastering. the technology never got a chance too be fully explored, i mean just imagine a raycasted bomerman clone! it would still retain the oldschool feel but have a different dimension. there is lots of stuff we can do that i havent seen before such as scroll the map depending on cam position. then maps can be infinitly large.
anywho...
here's a pretty huge update from me.
firstly i put all vars in objects but then reverted back again. i don't want at this stage for this too satisfy my need's it needs too be simple so others can adapt/mold it into what they need for there games.
right now onto changes made ill do a little list
1. added global var SHADING setting this too 1 enables global shading, sprites walls etc. guess what setting it too 0 does :P
2. fixed sprites so they rotate around there center and now the also draw in the center of there tiles
3. increased map size by a lot
4. it now draws lots of animated sprites, lots of static ones, and lots of object sprites.
5. enhanced sprite drawing code for huge speed up.
6. added markers for sprites on the minimap.
7. added a global var for sprite culling distance decreasing this var increases pop in but increases speed. increasing has the negative effect of this.
8. fixed code so everything sprites walls etc dynamically change detail level off of STRIPWIDTH. if you increase this you will see everything losses detail uniformly
9. changed fps too 30. only because firefox renders really clunky. in chrome im getting 60fps no problems. but even at 30 this gives us lots of meat for game logic.
10. changes movement amounts too compensate for the fps clamp.
and there is lots more but i can't remember :P
i am really happy with how this is going so far. now its really just on too bug finding and fixing there are sure too be some bugs that will pop there head up when building a game. then we can fix as we go.
it really is a good little engine even as big as the map is now i tested double this size with half the scale and it was still playable.
let me know what you think :cheers:
-
That's brilliant! :o
I've been looking at other JavaScript ray casters and there's one with more detail but it's slow - really slow. There's another one which renders only white walls. I think this one has just the right balance and it would be the perfect lure for prospective game programmers with little or no experience with programming.
K++!
I've thought of a couple more gameplay elements, such as chasing a moving sprite and switches which change parts of the map.
Also with the whole thing being written in HTML / JavaScript, the possibility of using PHP or ASP to dynamically create map layouts and save them to a database would make for a truely huge game!
The final thing I've thought of is a map made in the style of the first Pikmin game, which would reveal the detail of the areas you have explored while keeping the rest of it undrawn.
I'll upload your newest version in the morning.
-
thanks ck!
that's some excellent ideas there!, it struck me a few days ago, how many tile based games have we all made in the past!.. even down too our old tilemaped yabasic games. well they can all be ported over too this new style very very easily. because really your just developing your game in the hud as thats where all the real stuff happens. and the engine just maps everything out in 3d for us.
i already have lots of different styles of games i want too make with this. next step though is, i want too make some sort of visual level editor. something that lets me write out a file with a header that has the level stuff in it so ideally the header will hold texture names, level texture detail, size of map, scale of map etc and then just after the header the the level map with all the texture indices.
i really don't know enough about html/js too jump into this though. i will have too do a bit of research. and finally after i develop my first game in js i will port everything too android.
i think the future for me is internet/mobile apps games and demos.
oh and for whatever uses you have for this ck you don't have too keep the credits on the canvas. just a small credit in the code some where is good enough for me and i will credit you in the same way mate. but yeah my segments of code can be used/modifyed however and for whatever needs necessary :cheers:.
-
Cheers nino,
I've put the latest and greatest version up here: http://fx.barcodebattler.co.uk/waveSphere/jsraycaster7.htm
Your suggestion about Yabasic tile games got me thinking - snake would work very well like this!
I can help with the level editor. Ideas are flowing already and I'll make a start at lunch time.
-
I can help with the level editor. Ideas are flowing already and I'll make a start at lunch time.
that would be excellent ck! i used too make quite complex level editors in blitz. i had one game i had too make 100 level's for on the ds and the tool was a massive aid. i have lost all my old blitz sources unfortunately. or i would have posted it. but in essence the tool just used too dump c compatible code out with a header that had loads of level info.
the header contained info like the level id num, textures used all the engine settings for that level. it actually went a little further and used too contain sprite information too like bad guy starting placements textures and which abilitys etc they had but at this point that really isn't needed as that again would be game specific.
i will also help mold the level editor for me its just getting over the hurdle of not knowing very much js specific stuff atm.
cheers!
Your suggestion about Yabasic tile games got me thinking - snake would work very well like this!
yep, there is others too.. pong would probably work pretty good too. i seem too remeber slinks make a huge rpg game. not that i am saying we should port it. but these sort of games would work really really well.
i noticed in the new uploaded version the sign post sprite is not loading and its causing an error. but on a good note the raycaster still loads and works on my phone i cant obviously walk around without keys but it loads and renders everything fine!
-
I've traced the sign problem to a case sensitive issue - "Sign.png" in the javascript and "sign.png" in the file system. I'll fix it tonight.
-
Ahh i see thanks for that ck i will be much more carefull about case sensitivity when working with files in future :cheers:
-
The case sensitivity only applies to non-windows web servers, which is why it works on any windows computer regardless of case mistakes. Problems like this will only arise when it is uploaded to the server, so it's a good idea to get into the practise of strict case sensitivity when writing any program.
Here's my progress so far:<!doctype HTML>
<html><head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>jsRayCaster Map Builder</title>
<script>
var cnvs; // Canvas place holder
var keyboard = new Array();
var mouseX = 400, mouseY = 300;
// Firefox Check
var ffx = false;
var cnvsX = 0, cnvsY = 0;
var controlKeys = [];
var MAPW = 10;
var MAPH = 10;
var MMAPSCALE = 20;
var ptrColour = "rgba(0,255,0,0.5)";
var ptrX, ptrY;
var setup = function(){
var c = document.getElementById("display"); // Define the canvas for drawing commands
cnvs = c.getContext("2d");
// If the browser is Firefox, locate the canvas position in the document
if(navigator.userAgent.indexOf("Firefox") > -1){
ffx = true;
cnvsX = c.offsetLeft;
cnvsY = c.offsetTop;
}
// Reset the keyboard
for(i = 0; i < 256; i++){
keyboard[i] = 0;
}
document.forms[0].elements[0].value = MAPW;
document.forms[0].elements[1].value = MAPH;
setInterval("main();",40); // 25 fps
//main();
}
var main = function(){
MAPW = parseInt(document.forms[0].elements[0].value,10);
MAPH = parseInt(document.forms[0].elements[1].value,10);
ptrX = Math.min(Math.floor(mouseX / MMAPSCALE),MAPW - 1) * MMAPSCALE;
ptrY = Math.min(Math.floor(mouseY / MMAPSCALE),MAPH - 1) * MMAPSCALE;
cnvs.clearRect(0,0,800,600);
cnvs.fillStyle = ptrColour;
cnvs.fillRect(ptrX,ptrY,MMAPSCALE,MMAPSCALE);
cnvs.strokeStyle = ptrColour;
cnvs.beginPath();
for(i = 0; i <= MAPW; i++){
cnvs.moveTo(i * MMAPSCALE,0);
cnvs.lineTo(i * MMAPSCALE,MAPH * MMAPSCALE);
}
for(i = 0; i <= MAPH; i++){
cnvs.moveTo(0,i * MMAPSCALE);
cnvs.lineTo(MAPW * MMAPSCALE,i * MMAPSCALE);
}
cnvs.stroke();
document.getElementById("debug").innerHTML = ptrX + ", " + ptrY;
}
// Keyboard Controls
var control = function(et, evt){
if(ffx){
event = evt;
}
keyboard[event.keyCode] = et;
}
// Mouse Movement Control
var mouseCon = function(evt){
if(ffx){
event = evt;
mouseX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - cnvsX;
mouseY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - cnvsY;
}else{
mouseX = event.offsetX;
mouseY = event.offsetY;
}
}
</script>
<style>
.ipt{
width:32px;
}
</style>
</head><body bgcolor="#000000" text="#ffffff" onLoad="setup();" onKeydown="control(1, event);" onKeyup="control(0, event);">
<center><canvas id="display" width="800" height="600" style="border:1px solid #d3d3d3;" onMouseMove="mouseCon(event);" style="cursor:none;">If you can read this, you'll need to upgrade to a browser which can render the CANVAS tag.</canvas></center>
<form><table><tr><td>Map Width:</td><td><input class="ipt" /></td></tr><tr><td>Map Height:</td><td><input class="ipt" /></td></tr></table></form>
<div id="debug"></div>
</body></html>
It's not much yet, but I'll keep working on it after work and host it too.
-
ck, thats brilliant mate.
Its exactly the sort of tool i meant. adding/storing tiles and textures should hopefully be quite simple. how will we save the files. will they be in the JSON format? i really dont know very much about this stuff but i really want too learn. cheers!
-
The Browsers can't export files directly, but we can dump the generated JavaScript code into a TextArea. The code can then be copied from the TextArea and pasted into a specific section in the jsraycaster.htm file, possibly indicated by comments.
-
ahha, yeah that would be fine! i think we can hold the maps in the html body of our code and just load levels when and where needed. infact is it not possible too have multiple css files with config data siting beside the main js code. i am sure i have seen this done before and it might be work looking into. if this is possible it would make the raycaster much more plug and play friendly.
-
I've fixed the sign loading problem, so it's a fully working demonstration of the system.
You can have CSS files and JavaScript in the same page, but I wouldn't recommend using CSS to store variables. Extra .js files can be loaded instead.
I'll continue working on the map builder before I put it on the server.
I've thought of a possible optimisation for the main game - the map could be drawn once to the canvas, then copied into an image data object. The pre-drawn map can then be pulled from the image data object in one drawing command, with sprite pointers drawn over it. My explanation probably doesn't make sense, but I'll put an example together to explain it properly.
-
ahh yes that would be a big speed up ck, i know what you mean. i have done this many times with frame buffers where you basically grab part of the back buffer as a single image then you can draw the whole thing instead of all the individual elements with a single draw image. this would also allow us too completely remove the clear screen as the map image being draw as a sprite over and over again would clear everything for us. i already clear the raycasting portion of the screen with the background image.
i never thought this was possible on js though excellent excellent idea ck!
As for the level loader data i was just thinking if we had a game with 100 maps it maybe wouldnt be a good idea too have 100 big maps in memory all at once. but i guess its an interpreted languge so it compile's as it goes and they wouldn't be held in memory anyway lol
-
The map optimisation brings up a security error in Chrome, which so far has been the best browser for testing this amazing engine.
In a nutshell, Chrome thinks the data in local files comes from separate domains, as opposed to files which come from a hosted server.
Attempting to run the attached htm file without using the fixChrome.bat file to open it first will trigger the false security precaution, but opening Chrome using fixChrome.bat first and then opening the attached htm file will work properly.
edit - The map builder is now online. There's a text box which outputs the code, but you have to press the Generate button to apply changes. I'll put it on a 1fps update, as anything faster would be overkill.
http://fx.barcodebattler.co.uk/waveSphere/jsrMapBuilder.htm
-
i just read this is only an issue when running the files locally on the hd and should not be a problem when the code is hosted on a web server. so really its a non issue as i can still run and develop with it :cheers:
that is a brilliant speed boost ck, i have been messing around all night trying too see what bottlenecks etc we have and added a fps counter.with your hud performance boost the raycaster has jumped in ff from 20 fps too 30 on my system and on chrome its gone from 46ish too 60! so its a big jump!
there is lots of cool things i noticed with the fps counter such as when disabling the sprite drawing code completely i only gain about 2fps which means i must be doing something good in there..
the big bottle neck in ff is from rendering the wall strips it really hates either the single drawimage command being called over and over again, or all the resizing we do, and runs at half the speed of chrome. if i set the update intervals too 1ms and comment out the wallstrip drawimage. firefox runs at 250fps and chrome 209ish.
i've attached your fast map code update with fps counter added so you can have a little look at how much cpu/gpu our individual calls take up.
-edit the map builder is coming along brilliantly ck, really excellent stuff so far, its exactly what i was thinking of! k+
-edit2 changed the attachment this now is rendering between 120 140 fps in chrome and 55-60 in ff. unfortunatly i had too comment out the XYDrawRayshot we are much better too just go with a single view angle line as this was bottlenecking things too much it was really only good for debug purposes. and finally i managed too claw back a lot of the performance lost through shading by simply dropping all walls just behind the rgb(0,0,0) point, it actually works very well you cant tell the walls are being dropped and it gives us a decent fps gain. this is dynamic so if shading is 0 everything gets drawn.
obviously for safety we will still need too clamp too 30fps but at least with every fps saved now it will be extra power we can use later for game logic ;).i have a few more ideas for speed im going too keep pushing..
-
My boss made me work through most of my lunch break, so I haven't made much progress on the map builder.
You must have a better computer than I do, because my FPS counter reads about 20 in Chrome :(
Another tip I've picked up from another project is to not raycast if the player is standing still. The wall distances in the array should be enough for re-rendering the walls. I would advise against buffering the drawn walls though, as the process of saving pieces of canvas into memory can be source of slowdown.
Reducing the rays on the map should speed things up though - I've got a few jobs to do but I will have a look tonight.
edit - I've got an extra 5fps thanks to the dropping of the XYDraw function.
Reducing the height of the work area might also improve FPS, but that would use less of the available screen.
I've updated the map builder - now you can add image sources to the texture list, but they're not yet loaded into memory, nor are they usable in the GUI yet. I'll have more time tomorrow night.
-
hi mate,
sorry not had much time myself too do much today, had too take my cousin out for his b-day and not long in :crutches: .
You must have a better computer than I do, because my FPS counter reads about 20 in Chrome
ahh i am sure we can do better than that. i thought i had left a lot on the table i am running the browser with the integrated gpu rather than the dedicated one and i had turned my cpu down too 90% hoping i would be averaging the same as others :(
i am going too have a serious look in the code there must be places for optimization that i am just not seeing atm! one thing though i am sure all the texture resize's is killing performance. i wonder if we manually resize our images in paint as close as possible too wall section size. if this would give any increment in fps?
does setting STRIPWIDTH too 3 or 4 in the raycaster give you any jump in fps. as if not you must be cpu bound.
anywho i have attached another little test too the post with cpu optimizations they don't really improve performance for me but im gpu bottlenecked atm where as if your speed is being held back by cpu you might get some milage from this.
and also i had a play around with the first map builder earlier yesterday afternoon for a few hours but didn't get a chance too post i got image loading and storing going. it lets you batch load your images so just drag a select box across multiple images and they will all load up then you can click a thumbnail and start drawing on the map then it saves texture info and all the correct indices.
however your new map editor has a much much better inteface/code so we can just scratch mine i used it mainly for learning. i have attached it just incase there is anything handy for you. but your doing a fantastic job mate.
ohh and one final thing if we were too use the file api we could let the user open the texture's from anywhere on there hard disk. i actually did this earlier but was not sure if it was a good thing too do or if it would work from a server etc..
-
I've tried increasing the Strip Width to 3 and there's a massive increase in performance.
We could make it such that the FPS counter silently ticks away in the background. If it drops below 30, the Strip Width could be increased to 3 or 4 automatically.
The ability to choose multiple files looks great - I'll try to blend it into my method.
We could open files from anywhere on the disk, but the browsers are unable to move or copy them to the images/ folder.
-
excellent idea with the stripwidth ck!!
yeah that would certainly make this pretty dynamic on most every system and the difference in detail levels between 2 and 3 is very small.
infact we could start the engine with stripwidth = 1 and then just have in the mainloop if fps<30 stripwidth+=1; this then gives users with the available power max detail and users without smooth fps! yes thats an awesome idea.
i started too get excited when looking at the file api yesterday as it makes it possible for our web hosted raycaster game too be fully customized. by the individual users.
they could in theory point our games too a folder somewhere on the hd that has all the levels in txt format with an image folder in there that holds textures. then the engine can just load and parse the level files and related textures when needed.
this would also make the level editor usefull too more than just ourselfs. it would be great too get younger people involed in building a 3d game! my kids would love building there own
3d mazes :) .
-edit dynamic resolution rescale added. i only poll the fps counter every 6 seconds as there can be momentary frame drips that don't contribute too the average fps counter and i wouldn't like too change resolution based on these and also it takes a little time for the fps counter too warm up.
this works really well! i cant test it thoroughly as i am always above 30fps even with stripwidth set at 1. but under all fake situations i have put on it the program always hits the desired fps. its great k+ ck! i have been coding this pacman clone all day it's really starting too take shape ;D
one thing i noticed which is really cool is if you apply a sin wave too our workareay var it simulates the players head bobing up and down as he walks. there is loads of cool little things like that that can be done cheaply.
-
URGENT BUG FIX!
On line 51 I have mis-typed the wall texture onload function declaration asonLoad = new function(){when it should beonload = function(){This bug causes the fictitious "onLoad" event to fire regardless of a successful load or failure.
On the map builder front, I have managed to add the textures into memory. Please copy the map builder from the server, as running it from the server will cause the textures to not load. This is because the textures are not uploaded to the server and they cannot be loaded from the images/ folder unless they already exist there.
When running the map builder locally, the code is able to check if the texture load was successful or not. Failure results in the program assuming the image file does not exist in the images/ folder and rejecting the texture.
I will next add the ability to click on a certain section of the map and assign it a value / draw onto the canvas.
Removing a texture already in use on the canvas will result in all of the squares assigned that texture being returned to zero.
The following feature will then be enabling multiple texture loads to save time.
As for the game itself, there seems to be some odd behaviour on my computer. If I don't move at all, the FPS stays at about 14/15. This isn't a problem though, as it isn't noticable in terms of rendering. When I start to move, the FPS increases to 20 until the dynamic strip width kicks in a few seconds later, causing it to sky-rocket to over 40.
As you suggested in an earlier post, it may be good to cap the FPS at about 30. If we set the interval to 30ms, the max FPS will be 33.333. It may be possible to check for FPS over 31 and narrow the strip width, but this may cause the FPS to go up and down, reducing the overall gameplay experience.
If the FPS is over 31 for more than a minute, it may be possible to narrow the strips without causing too much of an intrusion.
I like the idea of the head-bobbing code.
-
i really like the way the map builder is progressing mate top stuff!!
thanks very much for the bug fix i would never have noticed that.
As for the fps not scaling while your standing still at the start. that is very strange.. it almost sounds like the timers are not firing properly. i will try too replacate it.
i found a few misc bugs tonight while building the basis for my game. one where the sprite zbuffer gets messed up when you walk in an anti clockwise circle round the sprite which i fixed.
and another where you get a strange gfx glitch at random times i think i am close too sorting.
definitly we should clamp rendering too 30ms intervals that way we can be sure no matter what detail level the game is at. player movements and such all stay the same from system too system. i actually had already implement this in the above upload and fps was at 31.somthing - 33.something
i wouldn't worry about scaling detail the other way. because increments happen at 1 every 6 seconds chances are while you sit at 40fps if you decrease stripwidth by 1 you would drop below 30 so it would just yoyo back and forth and be visually distracting for the player. the good thing about sitting at 40fps is that even if you clamp too 33 you know that you have 7fps for game logic before you would lose any more detail :)
once i manage too iron all these little kinks out ill upload a fixed up version. :cheers:
-edit here is a version with lots of bug fixes.
1. fixed the bottom of the sprites not scaling correctly.
2. i now loop the process sprite 20 times before the program runs too populate the sprite z buffer.
3. i have split the sprite zbuffer away from the processing loop too make it work correctly.
4. moved the sprite z calcs too before the if check in the processing loop stops weird sprite movement when they pop into view.
5. locked fps down too 30ms.
6. added the fix you spotted ck.
and lots of little fixes everywhere. i have checked from every angle possible and everything renders properly there is 0 glitching or strange gfx scaling anywhere i can see now.
i have tried everything and cannot replicate the strange problem you have with fps sticking until the player moves. i would like too understand why that happens though so will keep trying too see if i can replicate it. i am going too run this on different systems in the next few days.
-
I don't think you need to investigate the low FPS at the start when I'm not moving. It seems to be a quirk of my laptop.
Perhaps we should set the threshold for low FPS to 28. On my laptop it starts to get a bit ugly when the strip width gets bigger than 8.
Other than that it's looking great. :D
I'll have an update on the map builder tonight.
-
excellent!
Perhaps we should set the threshold for low FPS to 28
are you getting hardware acceleration for the canvas drawing ck??.. i am trying everything i can think of too get more from this. i even switched everything over too web gl using the webgl-2d.js lib but this actually proved slower than our canvas drawing :-\. i suspect the lib is still in its infancy though and will get faster/less buggy as time goes on.
i am now looking at the pixi.js lib trying too gain enough understanding of how it works too reinvent our code too run with it. i suspect it will take rather a lot of work though. another thing that keeps coming up. is every source i stumble on is suggesting using DOM for our sprites. they say its a more compatible system and usually much faster than draw image. but again it looks like a real head scratcher too use that system. i will certainly come up with something.
if we were too use web gl we could essentially get rid of all the rectangles for shading and simply tint the image pixels as they got passed through so this can be made too run about double the speed.
-edit do you think it would be feasible too create mulitple copy's of each image at startup and apply different shades too them? then we could just index the images based on which one is closest too shade value. the shading would not be quite as smooth as it is now but we stand too gain a massive speed boost. almost double the speed on my system... ideally we could have 9 copy's 0.0 being completely light texture and 1.0 being black so we only need too compute the 9 points inbetween. then pseudo drawimage(imageobject[ind+shadeval]-1......
-
I was thinking of dropping the FPS threshold to 28 because a slight drop below 30fps may trigger the widening of the strip widths, even if it is usually slightly above 30. Then again, dropping it if it dips below 30 should keep it above 30, which was the whole point of that development in the first place.
I don't think I have very good HW acceleration on this laptop. My desktops both at home and work run the program well above 30, so it's probably just a lack of raw processing power at this end.
We would encounter two issues with DOM sprites - the sprites would always draw in front of everything on the canvas and in the event of a sprite moving off the edge of the canvas, the sprite would still be visible and would not be hidden by crossing the edges of the canvas.
Creating 9 extra copies of each wall texture will eat up RAM, especially on games with lots of different wall textures. But it will reduce the processing load since there will be less reliance on alpha shading. On the other hand, the webGL option won't use much extra RAM and still grant a speed boost, so that may be worth examining first.
-
I've made a few minor alterations:
* Capped the strip width at 4. Mega Man looks really strange when it goes any higher and the performance isn't too bad at 4, though left uncapped it went as high as 11 once.
* Eliminated as many divisions as possible. I read somewhere that multiplication is faster than division, so I've created inverse versions of some popular variables. This may have screwed up the FPS display slightly, sorry. I'll try to fix it.
* Eliminated all "new" calls from the main and associated functions. Again, I'm told creating a "new" version of an object is a little slower than telling it to be empty, so for example [] is better than new Array().
* Removed "var" calls from loops. I'm guessing that creating a new variable takes longer giving it a value, so I have moved the declarations to points before the loops.
All of this has added up to a minor boost in performance.
The latest live version is at http://fx.barcodebattler.co.uk/waveSphere/jsraycaster8.htm
I have also been working on the level editor:
http://fx.barcodebattler.co.uk/waveSphere/jsrMapBuilder.htm
The variables created by the level editor have been moved to one location near the top of the code in version 8 of the engine. They can now be copied and pasted in on top of the existing variables.
The only catch is with the sprite images, as the builder does not support them yet. Pasting the code from the builder over the raycaster variables will result in the loss of the sprite source declarations, so I'll need to put those in.
Future plans for the map builder now include:
* Multiple file selection for faster importing
* Texture order sorting
* Scrolling if the map is larger than the viewable area
* Support for sprites
This project has come on leaps and bounds in only a month!
-
excellent!! the engine feels really nice and solid now ck!
good work with the map builder, i am getting a small bug here. the grid curser is sitting half of the grid away from my mouse pointer too the right so when trying too pull it across too get too the left side of the grid i can only get half way ill have a little look at the source in the morning and see if i can pinpoint why it happens.
all the future plans for the editor sound really great!
well i have spent the whole night teaching my self glsl for the web... i am now fairly comfortable using it with js. i am pretty far along into a replacement drawimage function. what i am hoping for is that i can turn this into is a little wrapper. so i can quickly and easily drop our engine in and it will automatically turbo charge it. at least now i have access too the shaders i can shadow and render everything in just one pass with half the geometry ;).
the attached code lets us load an image and using my own draw image command blit it with shaders, anywhere on the canvas resizing in width and height as much or little as we like. i really should have done it in shaders from the start. but got carried away with the simplicity of the canvas.
ha i cant believe it has been a month already! we really have made a cool little project here. hopefully i can have the engine running really really fast and fully completed and my first game prototype completely built by next month.
-
It will be interesting to see what kind of performance change the glsl provides.
As for the bug you're encountering, it could be that the canvas is being moved a short time after the page loads, but this is only an issue in FireFox.
I'll enable the position debug and we'll see if I can figure out what's going wrong.
edit - It feels like a month, but it's only been 2 and a half weeks.
-
well i have had a pretty rough time getting this up and running all inside webgl but i now am really close every thing works perfectly. i just have a few things too finish..
my draw image differs slightly from the canvas one so i need too figure out how too adapt my sprite rendering algo currently the sprites just render as white rects and i need too code a shader line algorithm so we can paint the floor and ceiling tiles again.
but thats all!.. everything else as you will see when you run it runs perfectly.. too my surprise i have taken too webgl really well. i just had too get used too working inside js with it. the hardest thing with webgl, is that, i so far have had too rewrite everything that we previously had done with the canvas. ie lines rects drawimage rgb stuff alpha etc..
on the plus side i spent about two hours working this webgl version into the android sdk and got the basic textured wall caster running on my tablet. it was very very easy too port.
as for the speed boost this has given....
well its much quicker. i now can hit 100fps at stripwidth=1 in chrome on both my integrated gpu and my gtx650 one. in firefox i get roughly 50fps with integrated and 60ish with gtx.
however when i set stripwidth too 2 its too fast too see whats going on :) like 200fps!
and this is just roughly done atm once i figuare out how too fix the sprites, and code the shaders too paint the floor and roof tiles back on. i can get even more speed from it.
even though i am not drawing the floor tiles this is still representable against the canvas version as i am having too draw the hud image by image frame by frame again atm. :cheers:
-
That sounds great, but I've tried testing the latest version under IE9, Chrome and FF and all I can see is the sprite locations on the map.
Everything else is black.
The error messages in Chrome are as follows:PERFORMANCE WARNING: Some textures are unrenderable. webglraycaster.htm:1
RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete' webglraycaster.htm:1
Uncaught Error: SecurityError: DOM Exception 18 webglraycaster.htm:937
PERFORMANCE WARNING: Some textures are unrenderable. webglraycaster.htm:1
RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete' The final two warnings are repeated indefinitely.
I'll try to update my version of Chrome.
edit - I've updated Chrome and it still didn't work.
Then I remembered Chrome has the awkward security so I've used the Chrome fix batch file to open the browser and it works! The only issue is that the FPS is 2 when I start and don't move, but it does rise to about 60 once I've moved the camera position.
I have thought of another optimisation - ray casting only needs to be done if the camera position is moved or rotated. It can be done once at the start of the program, and then repeated only if any keys are held down.
-
ahh i should have said sorry ck. yeah when loading textures with webgl you get cross domain security failures. so its not even loading the textures for you atm. basically too get textured webgl locally you either apply the same fix you posted earilier or run through brackets.. for some reason my ff runs this locally when it shouldn't but i wasnt complaining :)
-
I can explain some of that. First of all, IE11 is the first IE to support webgl at all, so you need at least Windows 7 with an upgraded browser.
In that case I think it's still marked as experimental too, so to get your gl object the safest way to do that is
var opts = { antialias: false };
gl = canvas.getContext("webgl", opts) || canvas.getContext("experimental-webgl", opts);
The opts thing is needed for IE since otherwise it blurs everything. Maybe you want that.
texture bound to texture unit 0 is not renderable
This error is caused by the image not being loaded before it's bound into webgl. Best way I found around that is temporarily to bind in a 2x2 placeholder which will get replaced with the image once it loads. This way you don't necessarily need to worry about counting how many images to load or waiting for them to complete. Things will just render in checkerboards until the images are available.
function loadTexture(filename)
{
var rv = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, rv);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([255, 0, 0, 0, 255, 255, 255, 255, 255, 0, 0, 0, 255, 255, 255, 255]));
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
rv.image = new Image();
rv.image.crossOrigin = "anonymous";
rv.image.onload = function () { bindTexture(rv); }
rv.image.src = filename;
return rv;
}
function bindTexture(texture)
{
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);//flip BMP upside down
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
gl.bindTexture(gl.TEXTURE_2D, null);
}
The "crossorigin" thing is supposed to fix Chrome loading textures from disk. Currently that doesn't work, but it's supposed to. Host your textures locally on IISExpress or Cassini or something for dev work.
The other cause of the 'not renderable' error is non-power-of-2 textures.
Jim
-
thats brilliant!!! thank you jim k+
up till now i have been having too keep two sets of variables one for images and the other for gl textures, but with your code there i now just need one. that's much more along the lines of what i am used too!
i have implemented your tip for grabbing the gl object as well again i wouldn't have thought of doing that. thanks mate.
@ck i have added all jims tips into this now so if it doesn't load textures because of cross compatibility you will get red and white checkers all over the walls. i have also fixed the sprites now still getting about 90fps with stripwidth = 1 and 200 = 2 so really fast.
i now just need too get the floor rendering again. but i am having some issues. do you think there is anyway the floor could be stored as a mesh with indexes. sort of like a model mesh but i dont need the z info that can be set too 1.0. that way i could just send it through too the shader and render it all in one go very very easily. i had a bash before but failed badly :)..
i also tried too add the trick of grabbing and storing the hud from the backbuffer as a single texture back in using copysubimage and glreadpixels but all i am getting with those is a black texture. i fear too get this element working i might have too resort too framebuffers/render too texture which i hoped too stay away from for now.
-edit just read you managed too get the original webgl version too work. thats excellent! i will implement your suggestion about not doing raycast's while the player does not move. it should be quite a simple thing too implement.
also another good speed up for the canvas version would be too save the background gradient image into a texture the same as we do for the hud and just blit it with drawimage. at least this way our code does not have too do all the costly gradient calcs every frame.
-
I've had a look at the line drawing algorithm for the lines and it looks like we're passing the coordinates into myrgbline() as myrgbline(xStart, yStart, xFinish, yFinish)
But the function is expecting
myrgbline(xStart, yStart, xLength, yLength)
I'll see if I can wrap my head around the code in the myrbgline function.
-
yeah i just did a quick hack inside rgbline when passing the model matrix too the shader i convert too width/height.
1.0*(width-xpos)
1.0*(height-ypos)
but really it would never work like this the most ideal way too do this is too send the floor a tile at a time and group the tiles four points, into two triangles i am not quite sure if the floor draw algo can be grouped into nearest vert groups of 4, if it can i can do filled floor tiles like chess board checkers etc.. very easily.
-edit about the issue where the fps sticks until you move. have you tryed settimeout instead of setinterval just too see if there is any change? i was messing around earlier and noticed the two commands give slightly different results. i guess its worth a little shot
-
I've thought of a way to find the corners of the floor tiles.
I don't understand webGL very well, so I'll try it under the 2D canvas model as a test.
As for the low starting FPS, I'll give your suggestion a try. I'll also test different starting angles and positions.
-
that would be excellent thanks very much mate!
i have figured the floor and ceiling line code out :updance:
i only played for 5 mins on my morning break. but i have got it going, i had too poke the x,y,lx,ly into a basic vertex buffer. at first it was really slow as i was then creating a vbo in gpu ram each *frame*. so i just loaded an initial buffer into vram at startup and set it too STREAM. then i stream the new line data each frame. my line function is at the very LEAST as quick as the canvas draw line so im happy. :)
ill upload the complete webgl version when i get home. cheers.
oh and it would still be good if we can group the 4 points of the floor into indexed verts as we could then implement floor and ceiling textures :D
-edit
attached the new version with floor and was able too get the hud trick re implemented. i had too write some render too texture stuff too get it too save all our tiles into a single texture.i have spent a half hour optimizing and cleaning the code i was doing some silly things before that was holding the speed back it now renders quite a bit faster.. i have only attached htm file as the image folder is in my last link.
im now getting 200fps in firefox and 250fps in chrome and this is with everything back in...not too shabby i think :)
this is about as fast as this will go there may be some small things that could be done but its not worth chasing the speed down imho..
-
pahhhhh that last upload only renders the floor and ceiling properly in chrome for me >:(..
ff is not drawing the floor and ceiling but still works.
firefox for some reason is not allowing me too stream data into my vbo's but chrome is :confused:..
oh well only one bug left!
has anyone else experienced similar? or can shed some light on this. i am begining too feel like ff has got it in for me :)
-
On Chrome on my laptop I'm seeing the floor and ceiling perfectly.
The framerate still starts low but quickly improves once the strip width gets to 3 if I stand still, or runs well above 60 if I start to move.
The results of my position / rotation tests are as follows:
Setting the starting rotation to 50 degrees or 150 eliminates the slowdown.
Setting the Y starting position to 200 eliminates the slowdown.
Setting the X start to 145 eliminates the slowdown.
I'll work a bit more on the map builder tonight and have an update. I'm close to getting multiple texture imports working properly.
-
ahh thats good too know ck!,
i tryed too implement the not not drawing while the cam doesnt move but gl auomatically clears everything on frame complete so i was just ending up with a black screen.
so ill just move the players starting position.
that sounds excellent with the map builder.. its going too be getting plenty of use soon. now that we have a completed canvas version and an almost complete webgl version it's come time for game building :)
-
It's great to see the progression from no textures, to 2D Canvas textures to full on WebGL.
I've put the latest WebGL version here:
http://fx.barcodebattler.co.uk/waveSphere/webglraycaster.htm
With a multi-file supporting Map Builder here:
http://fx.barcodebattler.co.uk/waveSphere/jsrMapBuilder.htm
There's also a mouse position debug so we can see what's happening with that bug you encountered.
The top coordinates are the mouse position while the lower coordinates are the top-left of the highlight square.
-
wow there is something pretty magical happening here ck!!!
i just for fun downloaded firefox onto my samsung galaxy s2 ( not a great phone by any stretch ) and tryed the webgl version. were getting 43 fps!!!....
and it only goes too stripwidth 3 i am absolutly gob smacked.
the canvas one runs at 5fps so it was defo worth our effort too port this too gl.
ohh and the mobile ff is rendering floor and ceiling so i suspect a bug in the desktop version when streaming vbo's.
next we need some buttons on the page for left right forward and back so mobile users have control.
i am going too get stuck into the map builder when i get home from work tomorrow and report where the little bug comes from. thank you for putting all this work into the map builder and supporting this mate! its coming along a treat. when it comes too building apps with gui's your work is excellent! much better than i could manage. cheers.
-
About 15-20fps on my Nexus7. Any chance you can add some tablet friendly controls? Maybe press and hold for forward, swipe to go left and right?
Great stuff!
Jim
-
excellent idea jim! yep ill try and add that in ;)
i take it the touch screen is linked too mouse events so it would be a simple case of using a mousedeltaX and mousedeltaY var for rotations and mousedown event for movement.
so that's 15-20fps for a nexus7 and 37-43 for my s2 that's really good going!.. tbh i never even expected it too work on mobile devices.
@ck would there be any chance in changing the character sprites on your server for the power of two ones in my last upload. megaman and ryu is just displaying all black in firefox. or alternitivly you can use this for non power of 2
///////////////////////////////////////////
/// Jim's Texture Load functions ///
///////////////////////////////////////////
function loadTexture(filename,gl)
{
var rv = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, rv);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([255, 0, 0, 0, 255, 255, 255, 255, 255, 0, 0, 0, 255, 255, 255, 255]));
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
rv.image = new Image();
rv.image.crossOrigin = "anonymous";
rv.image.onload = function () { imagesLoading-=1; bindTexture(rv,gl); }
rv.image.src = filename;
return rv;
}
function bindTexture(texture,gl)
{
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
gl.bindTexture(gl.TEXTURE_2D, null);
}
///////////////////////////////////////////
this will load non power of 2. but i am pretty sure it will break compatibility on our mobile hardware... so much better too just stick too ^2 textures
-
here is a version with very basic mouse movement... this might not work how we want on a touch screen though the rotation swipes will be fine. however when touching the screen too make the swipe this will register a mousedown and move the player forward also. my knowledge of js event stuff is too limited atm too make the mouse handling work properly. we ideally need this to register the the mouse down but maybe wait a second or two too see if the user is still activating mouse down then we know for sure they actually want too move forward.
@ck i know whats causing the issue with the map builder in firefox for some reason its adding the double the width of the texture preview area onto the mouseX if i manually subtract 128 from the mouseX every thing lines up properly. i tried too fix this dynamically but with no luck :( but no big deal we can just subtract the width of the preview area manually.
i have tweeked our fps stuff in this webgl version with the mouse control added.
i have set the update intervals at 45fps but left stripwidth addition at <30 fps i have also set stripwidth thresh hold at 6 i think this is a nice balance for everyone.
oh and i think i fixed the low starting fps issue. i had a little think about it and rather than start at 0 fps and let it slowly warm up too our real fps. just start at our thresh hold 30fps and let it either settle down or increase from there.
just too be safe however i moved the player y pos forward too your suggested placement of 200
-
I'll upload the power of 2 sprites and investigate the firefox issue with the map builder tonight.
Great to hear about the framereates on the mobile devices - stick some advertising space on the walls of the game and you've got a monetised adventure that everyone can enjoy with no intrusive pop-ups.
edit - the sprites have been updated along with the map builder, which now supports wall texture re-ordering.
The mouse control version of the raycaster itself is here:
http://fx.barcodebattler.co.uk/waveSphere/webglraycaster2.htm
The only problem I have with the mouse control is that the slightest movement of the mouse, even when it's not over the canvas, causes the camera to rotate. Still, it's proof that it works and between the 3 of us we can figure out how to make it better.
The new starting position has greatly improved the framerate at the beginning of the game. I can't offer an explanation as to why the old one was causing an issue, but sometimes things happen in programming that nobody can adequately explain :)
I'm wondering if a semi-transparent D-Pad displayed over the lower-left corner would be better than mouse control.
Pressing one of the virtual buttons would then cause the camera to move forwards, backwards or rotate accordingly.
-
ah the mouse move stuff isn't working properly on that webgl version on my phone all I get is rotations but even then Its not smooth I have too keep letting go and pressing again.
excellent idea with the dpad ck! yep that would work. ill see what I can do..
actually thinking.about it. is there a special handler for mouse held down as even with a d pad the way it is atm we would have too keep tapping the dpad too keep the player moving/rotating. when holding down nothing happens.
I have built quite a few levels for my game from the editor tonight. its a dream too work with! it takes roughly five mins too build a level from ground up. brilliant stuff!
-
We can detect if the mouse is down and when it is released. To follow the psuedo-code:
var mouseHeld = false;
onMousedown = function(){
mouseHeld = true;
}
onMouseup = function(){
mouseHeld = false;
}
if(mouseHeld){
//code that does stuff, detects coordinates, etc
}
Just a rough starting point.
I'll add scrolling to the map builder over the next few days.
-
ahh yes i see,
i have coded a transparent dpad. i will add something similar too what you posted cheers ck.
one thing i just noticed with the map builder is that you have added a while loop in setup for firefox when getting the context, and lots of different checks too make sure the canvas position is always correct.
should i add that into our engine too make sure mouse move works correctly for firefox too? cheers.
-
So far as I know, mousemove events don't work on mobile. On my tablet the latest version runs forward when I tap and then only after random tapping might it turn a bit.
Hopefully this weekend I'll be able to grab the code and make the controls work on tablets.
Jim
-
one thing i just noticed with the map builder is that you have added a while loop in setup for firefox so when getting the context, the pogram will not move on unless fully loaded. thus making sure the program always gets the correct canvas position.
should i add that into our engine too make sure mouse move works correctly for firefox too? cheers.
That's a good idea. There's a few lines in the engine setup function which is supposed to do the same thing but fails. I googled the working version and adapted it to our needs.
-
well here is a dpad version.
i had too add an on resize event as firefox on resize was messing up the canvas position. it actually works quite well. and i added your code for finding canvas position cheers ck.
So far as I know, mousemove events don't work on mobile.
i think you are right jim it was all kinds of messed up on my phone and tablet too. i coded the dpad version just in the hope it might work.
Hopefully this weekend I'll be able to grab the code and make the controls work on tablets.
that would be awesome!. i would love too get this working on as many platforms as possible. cheers mate
-
i have been looking at getting my own server space too be able too host my stuff and try test's etc out. but its all a little confusing and was wondering if you guys could point me in the right directions. so i don't end up renting a dud.
so far easy-space looks quite interesting... for 7.99 a month they give you unlimited hosting space and free domain name and they let you choose from linux or windows servers.
whats the main differences from windows and linux hosting and what steps are involved in actually uploading my stuff once i get my own space. so it can go live.
i am a complete noob when it comes too all this stuff so just treat me as one for any explanations :P. cheers guys.
-
-
excellent thanks mate.
xilo it is then!
scrolling maps will be cool. I have got an idea for these in my next game after this one is finished.
I want too make a retro raycasted zelda type game with a *huge* map that buffers and scrolls I plan on having lots of sub maps as temples with portal points on the main map too these.
as for my pacman clone I now am almost finished so I have began porting the whole engine and game too the android sdk. what an experience that has been! but I am now in a position too develop stuff that can be taken anywhere :)
-
For testing stuff online and hosting small websites on Linux, I recommend NearlyFreeSpeech (https://www.nearlyfreespeech.net/), as it offers a pay for what you use service. You can read about how it all works and how much it costs here (https://www.nearlyfreespeech.net/services/pricing). They also offer domain registration, but I'd go with a dedicated service such as Namecheap (https://www.namecheap.com/) for that.
When it comes to choosing between Windows and Linux hosting, it usually boils down to the following: do you need to use Microsoft's technologies, like ASP, .NET, MS SQL? If the answer is yes, then you have to go for Windows hosting. If you don't need them, go for Linux, it's going to be cheaper.
Uploading files to the server is easy, once you purchase a hosting package you'll receive info on how to connect through FTP to their servers. They'll probably also going to give you access to a control panel, and those usually have some sort of HTML upload interface if you don't want to use FTP.
-
-
excellent info guys cheers!
i have properly looked into everything and i think i might go with Xilo even though i might never need everything it offers its nice too know i can expand without worrying too much.
the map builder is coming along wonderfully ck! what plans do you have for it next maybe sprites??..
-
Sprites are next on the list, but may take a whole week to get right.
-
well i just bought a domain name and rented some space through xilo! yay,
now comes the part i have no idea about :). basically atm i just want too be able too upload and share my projects via live links, will i still have too build a basic site as a front end? if so what tools would you guys advise, cheers.
-
If you don't have access to Dreamweaver you can code in raw HTML using Notepad++ to build your website.
To get you started, you can send me a specification for a design and I'll build the first few pages for you.
-
thanks mate!!
all i need atm is the most basic page that i can put links too my projects hosted on the server. just any simple template that will let me share my projects with the members here and some friends too begin with. then i plan on slowly over time adding a nice structured ui with pictures and different things..
if you could help me out with setting a starter page out that would be excellent thank you very much.
-
Just a basic site - feel free to adjust the colour settings in the css file.
Everything can be modified in notepad.
-
k++,
thats brilliant!!! just exactly what i needed too get me started, thanks very much mate.
i put it live at
www.ninogenio.co.uk
i can't wait too get stuck in now ;D
-
Great! I'll put a link from my site in the next update.
edit - I have updated the map builder: http://www.barcodebattler.co.uk/fx/waveSphere/jsrMapBuilder.htm
Sprite capability has been partially implemented. I will add a mode button to switch between Wall mode and Sprite mode.
I'll also add a sprite properties manager to support frames and dot colours.
We will need to modify the source of the sprite colours for the map. An array will be easier to import / export than a series of if statements.
-
thats brilliant ck!! :o
while porting this over too the android sdk. i found lots of bug fixes which i have fixed. one being where i split the ray casts and wall rendering into two functions and draw the floor in between, this fixes the floor and ceiling floating slightly on quick rotations.
by doing this i also save all the cast rays into buffers so as you suggested earlier if the cam doesn't move we don't do any casting.
yes an array system would be better than all the if checks i will implement all this into our js engine in the next few days and upload a good update. im still looking into touch based inputs.
now i have my own server space i have been uploading lots of little touch input test but so far i can't get it too work properly :(
-
I'm ready to put our heads together and work on a specification for the sprite data.
What you seem to have at the moment is:const BADGUYSPRITEKEYFRAMESX=8;
const BADGUYSPRITEKEYFRAMESY=1;
const BADGUYSPRITETYPE = 4;
const GOODGUYSPRITEKEYFRAMESX=1;
const GOODGUYSPRITEKEYFRAMESY=1;
const GOODGUYSPRITETYPE = 5;
const OBJECTTYPE1 = 6;
const OBJECTTYPE1KEYFRAMESX = 1;
const OBJECTTYPE1KEYFRAMESY = 1;
const OBJECTTYPE2 = 7;
const OBJECTTYPE2KEYFRAMESX = 1;
const OBJECTTYPE2KEYFRAMESY = 1;
I propose replacing this with:var wallTextures = 4;
var spriteData = [[8,1,0.588,0,0],[1,1,0.588,0,0],[1,1,0.980,0.980,0.980],[1,1,0.980,0.980,0]];
var spriteCoords = [[10,4,0],[3,9,0],[5,14,0],[12,14,0],[21,8,0],[27,3,0],[32,21,0],[2,21,0],[22,1,1],[21,21,1],[19,21,1],[23,21,1],[25,21,1],[3,1,2],[24,1,2],[1,15,2],[24,10,2],[26,12,2],[6,3,3],[10,10,3],[18,1,3]];
The wallTextures variable serves as an offset for selecting the correct image object from the main image object array when drawing the sprites.
The spriteData array holds data about the sprite types in this order: KeyFramesX, KeyFramesY, Red, Green, Blue.
The SpriteCullMap array could be populated from the spriteCoords array during the startUp function.
Let me know if you need a hand translating my rough description into code - I might not have typed this very well.
-
excellent!
here is an updated version with those changes implemented,
http://www.ninogenio.co.uk/dpadwebglcaster/mousecontrowebgl.htm
you will notice the dpad is still there atm. thats just because i have been trying some touch specific code out that should work but doesn't. if i don't figure out the touch stuff soon ill just remove this until i get it correct.
the code changes i have made go as soo.... i have completely re organized the order of things in the main loop i have split our raycasting into two functions one that casts all the rays and stores all relevant data into buffers for later use.
and the other functions draws based on these buffers.
this gives us the chance too...
casts all the rays and get floor/ceiling position data.
draw floor and ceilings
draw walls.
in that order. this eliminates the floating effect on the floor and ceiling lines.
i have also changed things so now no sprite or raycasting happens unless the player has moved then when we come too a stop the floor/ceiling/raycasting/spritecasting stops until we move again.
so hopefully low fps while standing still will be improved..
next up we need too add some more data too the new spritedata/coord arrays too factor in the heightoffset sprite static and x and y scale. if we do this the whole engine can run purely on your excellent map builder. i would have done this but only had an hour this afternoon too get all this done.
cheers mate.
-
i have been thinking about this a little today.
i am ready too add the extra params too the new arrays too make this completely free from hard coded values. i just need too make sure its compliant with what you are doing on the map builder side of things. if you let me know how you would like me too organize this extra data i will do it in this way.
one thing i should have asked yesterday. are you going too be using the webgl version or the canvas version? i have been adding and modifiying the webgl version without first checking too see if this is indeed the preferred version.
if you prefer too use the canvas one for compatibility, all modifications so far and future ones will be put on that.
my thinking for after we get the sprite stuff completely working on the map builder, is too then completely hide the engine from the individual users. maybe have a source.js file in the same folder where level and sprite info are placed and a universal main loop where all the game logic can go.
this way younger people could use this for fun educational purposes without giving a hoot how or why the engine works. with just a little script in a js file they can build 3d levels with there own logic.
-
The WebGL version will probably be better. You've put a lot of work into it and the performance is better overall.
I'm just wrestling with the colour picker on the map builder at the moment. Once that's done I'll be able to work on the keyframe settings.
Splitting the engine into a separate file is probably a good idea.
edit - the colour selector for the sprite dots is finished. I'll work on setting the number of frames next, followed by adding the sprite settings to the data output. After that I'll add sprite location editing.
-
nice!!
just let me know when the sprite side of the map builder is done and what format the the arrays come out in, then we can put our heads together and organize the engine in such a way that is user friendly.
-
The array format for the sprites will be as follows:
var wallTextures = 4;
var spriteData = [[8,1,0.588,0,0],[1,1,0.588,0,0],[1,1,0.980,0.980,0.980],[1,1,0.980,0.980,0]];
var spriteCoords = [[10,4,0],[3,9,0],[5,14,0],[12,14,0],[21,8,0],[27,3,0],[32,21,0],[2,21,0],[22,1,1],[21,21,1],[19,21,1],[23,21,1],[25,21,1],[3,1,2],[24,1,2],[1,15,2],[24,10,2],[26,12,2],[6,3,3],[10,10,3],[18,1,3]];The spriteData array holds data about the sprite types in this order: KeyFramesX, KeyFramesY, Red, Green, Blue.
The SpriteCullMap array could be populated from the spriteCoords array during the startUp function.
The spriteCoords array holds data about sprite coordinates in this order: xPosition, yPosition, spriteType.
I'll add the NOSPRITES variable to the output too.
The map builder currently populates the spriteData array, but not the spriteCoords. I should have this done in the next day or two if my meetings don't over run.
-
We now have a fully working output code.
I'm going to work in importing code and adding a perimeter function.
-
excellent work ck!!
just had a little shot of the map builder, it feels like a proper fully featured tool now!.. ill get too work on integrating all the generated sprite stuff into the engine so it can fully run on the map builder info.
is there no way we can adapt the engine and map builder so it could be used server side? i would love too host this on my site and let visitors just build a 3d level. that would be really really cool.
now i have only just began looking into php so i don't fully know its capability's yet. but could we maybe store the generated info from the map builder on our server and let the engine access that part of our servers using php?.
if there is any possibility of hosting this on the server and having it dynamically work off the map builder i would have a good look into that.
-
We could set it up so that the textures and sprites are uploaded to the server.
If an image already exists with the name of a new image we would need to add a number to the end of the new image.
Existing images on the server can be listed using PHP with a SQL database to keep track of which images are textures and which are sprites.
.js files holding the map data can be saved to the server to eliminate cutting and pasting. Map data files could be selected from a menu page before loading the main game, again using PHP. Database functionality for this is optional but recommended.
-
I've just had a thought - what's the calculation for the starting coordinates? We could put this into the map builder.
The import button now works - download this and run it locally to test:
http://www.barcodebattler.co.uk/fx/waveSphere/jsrMapBuilder.htm
The following code can be imported, just copy and paste it into the import text box:var MAPW = 22;
var MAPH = 33;
var MapData = [[1,1,2,3,4,2,3,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],[1,0,0,0,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,4,0,0,0,0,1,0,0,0,4,0,0,1],[1,0,1,1,0,0,0,0,0,0,4,0,0,0,0,1,0,0,0,0,0,0,1],[1,0,1,1,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,1],[1,0,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,3,0,3,1,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,0,3,0,1],[1,0,0,4,4,4,4,4,4,4,4,0,0,0,0,1,1,0,3,0,3,0,1],[1,0,0,0,0,0,0,0,0,0,4,0,0,0,0,0,1,0,0,0,1,0,1],[1,0,0,0,0,0,0,0,0,0,4,4,4,4,0,0,0,1,1,0,0,0,1],[3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,0,1],[3,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,1,1,1],[4,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1],[1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,1,0,1,1,1,0,1],[1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1],[1,0,0,1,4,1,0,0,0,1,1,1,0,0,0,0,0,1,0,1,1,1,1],[1,0,0,1,1,0,0,0,0,0,1,3,0,0,0,0,0,1,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,1,3,1,0,0,0,0,1,0,1,1,1,1],[1,0,0,0,0,0,0,0,0,0,0,1,4,0,0,0,0,1,0,0,0,1,1],[1,0,2,2,2,0,0,0,0,0,0,0,1,0,0,1,1,1,1,1,0,0,4],[1,0,2,2,2,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,1,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,4],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,1,1],[1,4,0,0,0,4,0,1,1,1,1,1,1,1,1,1,0,1,0,1,0,0,4],[1,0,4,4,0,4,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0,1,1],[1,0,0,4,0,4,0,1,0,1,1,1,1,1,1,1,1,1,1,1,0,0,4],[1,0,0,4,0,4,0,1,0,0,0,0,0,0,0,0,1,1,0,0,0,1,1],[1,0,0,4,0,4,0,1,1,1,1,1,1,1,1,0,1,0,0,1,0,1,1],[1,0,1,0,0,4,0,0,0,0,1,0,0,0,0,0,1,0,1,0,0,0,1],[1,0,1,0,1,1,1,1,1,0,1,0,1,1,1,1,1,0,1,0,1,0,1],[1,0,1,0,0,0,0,0,1,0,1,0,0,0,0,0,1,1,0,0,2,0,2],[1,0,1,1,1,1,1,0,1,0,1,1,1,1,1,0,1,0,0,2,0,0,2],[1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,2,0,0,2],[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2]];
var imageSources = ["Bricks.png","Concrete.png","Wood.png","Metal.png","ryu2.png","megaman.png","lamp.png","sign.png"];
var wallTextures = 4;
var spriteData = [[8,1,0.588,0,0],[1,1,0,0,0.588],[1,1,0.98,0.98,0.98],[1,1,0.98,0.98,0]];
var spriteCoords = [[4,10,0],[9,3,0],[14,5,0],[14,12,0],[8,21,0],[2,27,0],[21,32,0],[21,2,0],[1,22,1],[21,21,1],[21,19,1],[21,23,1],[21,25,1],[1,3,2],[1,24,2],[15,1,2],[10,24,2],[12,26,2],[3,6,3],[10,10,3],[1,18,3]];
var NOSPRITES = 0;
The specified image files must be located in the images folder just the same as if they were added manually.
-
Why not
var map =
{
width: 22,
height: 33,
data: [...]
};
I think grouping things together in objects would help keep the code tidy and make it easier to extend and/or map into a database.
Jim
-
That sounds like a great idea.
-
sorry ck me and the family all were hit with a horrible flu. and then work and finishing some other projects have taken everything out of me for the past couple of weeks.
I've just had a thought - what's the calculation for the starting coordinates? We could put this into the map builder.
something like this should work.
camy = (grid_y*maph)*(mapscale/maph);
camx = (grid_x*mapw)*(mapscale/mapw);
The following code can be imported, just copy and paste it into the import text box:
Code: [Select]
var MAPW = 22;
var MAPH = 33;
var MapData = [[1,1,2,3,4,2,3,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],[1,0,0,0,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,4,0,0,0,0,1,0,0,0,4,0,0,1],[1,0,1,1,0,0,0,0,0,0,4,0,0,0,0,1,0,0,0,0,0,0,1],[1,0,1,1,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,1],[1,0,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,3,0,3,1,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,0,3,0,1],[1,0,0,4,4,4,4,4,4,4,4,0,0,0,0,1,1,0,3,0,3,0,1],[1,0,0,0,0,0,0,0,0,0,4,0,0,0,0,0,1,0,0,0,1,0,1],[1,0,0,0,0,0,0,0,0,0,4,4,4,4,0,0,0,1,1,0,0,0,1],[3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,0,1],[3,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,1,1,1],[4,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1],[1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,1,0,1,1,1,0,1],[1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1],[1,0,0,1,4,1,0,0,0,1,1,1,0,0,0,0,0,1,0,1,1,1,1],[1,0,0,1,1,0,0,0,0,0,1,3,0,0,0,0,0,1,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,1,3,1,0,0,0,0,1,0,1,1,1,1],[1,0,0,0,0,0,0,0,0,0,0,1,4,0,0,0,0,1,0,0,0,1,1],[1,0,2,2,2,0,0,0,0,0,0,0,1,0,0,1,1,1,1,1,0,0,4],[1,0,2,2,2,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,1,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,4],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,1,1],[1,4,0,0,0,4,0,1,1,1,1,1,1,1,1,1,0,1,0,1,0,0,4],[1,0,4,4,0,4,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0,1,1],[1,0,0,4,0,4,0,1,0,1,1,1,1,1,1,1,1,1,1,1,0,0,4],[1,0,0,4,0,4,0,1,0,0,0,0,0,0,0,0,1,1,0,0,0,1,1],[1,0,0,4,0,4,0,1,1,1,1,1,1,1,1,0,1,0,0,1,0,1,1],[1,0,1,0,0,4,0,0,0,0,1,0,0,0,0,0,1,0,1,0,0,0,1],[1,0,1,0,1,1,1,1,1,0,1,0,1,1,1,1,1,0,1,0,1,0,1],[1,0,1,0,0,0,0,0,1,0,1,0,0,0,0,0,1,1,0,0,2,0,2],[1,0,1,1,1,1,1,0,1,0,1,1,1,1,1,0,1,0,0,2,0,0,2],[1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,2,0,0,2],[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2]];
var imageSources = ["Bricks.png","Concrete.png","Wood.png","Metal.png","ryu2.png","megaman.png","lamp.png","sign.png"];
var wallTextures = 4;
var spriteData = [[8,1,0.588,0,0],[1,1,0,0,0.588],[1,1,0.98,0.98,0.98],[1,1,0.98,0.98,0]];
var spriteCoords = [[4,10,0],[9,3,0],[14,5,0],[14,12,0],[8,21,0],[2,27,0],[21,32,0],[21,2,0],[1,22,1],[21,21,1],[21,19,1],[21,23,1],[21,25,1],[1,3,2],[1,24,2],[15,1,2],[10,24,2],[12,26,2],[3,6,3],[10,10,3],[1,18,3]];
var NOSPRITES = 0;
The specified image files must be located in the images folder just the same as if they were added manually.
ha thats awsome. i just tried it out. massively impressed 8)
i am about too embark on properly building my website so once i have everything set up i am going too look into php for this as i think it would be an awesome attraction if this was all held server side.
-
That's great. We'll perfect the offline version first before adding in the PHP / MySQL functionality.