just starting out in java/html

[ninogenio]

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

[combatking0]

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.

[ninogenio]

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
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

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 

[combatking0]

That's brilliant!

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.

[ninogenio]

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 .

[combatking0]

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.

[ninogenio]

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!

[combatking0]

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.

[ninogenio]

Ahh i see thanks for that ck i will be much more carefull about case sensitivity when working with files in future

[combatking0]

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:

Code: [Select]

<!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.

[ninogenio]

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!

[combatking0]

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.

[ninogenio]

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.

[combatking0]

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.

[ninogenio]

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

[combatking0]

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

[ninogenio]

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 

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..

[combatking0]

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.

[ninogenio]

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  .

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..

[combatking0]

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.