Menu
here s the issues advice me on how to fix em plz, i ve attached the whole code full, m trying to make an interactive map(like ggl maps)
now my first issue is the fact the allLoaded function loops like forever when i use
[CODE]engine.tile.allLoaded = function()
{
var i, len = engine.tile.images.length;
for(i=0; i<len; i++)
{
if(engine.tile.images[i][3] === false) //[3] = boolean
{
return false;
}
}
return true;
};
it never stops i tried to wait for almost 10min it keeps looping endlessly
so i used globalBoolean thing, just to check out if the value is changing to ‘true’, so it worked… obviously the globalBoolean aint that great …
but the problem is that it works only for the default zoom, when i zoom in to the next map it takes time until chrome says kill page n then it displays nothing but when i press f5 and zoom in again it takes time but displays the second map (X2 zoomed tiles) // allLoaded issue obviously
when i press right or left it also takes huge time to move in the wanted direction, and if i am on the zoomed map it takes enough time to make chrome ask again if i wanna kill the page which is so disturbing! why is it so slow? what to do to help the situation?
what s wrong with my allLoaded why does it loop eternally?
what is the tiles taking so much to move right or left?
i use png files of 256*256 px, if u wanna try to see how it behaves u can use what ever tiles in that style just name the folder M1 and name the png files i.png i++, 8 tiles for the first zoom, and 32 for the second one (M2 as folder)
PS:
the whole code
[CODE]var globalBoolean =false;
var Z, mapData;
var id=’M’;
var PX,PY;
var Maps = [map1, map2];
var engine={}; //engine object set up
Z = (!Z)?1:Z;
mapData = (!mapData)?map1:mapData;
engine.loader = document.getElementById(‘loader’);
engine.outhnd = document.getElementById(‘output’);
engine.canvas = document.getElementById(‘canvas’);
engine.handle = engine.canvas.getContext(‘2d’);
//output function for debug
engine.output = function(message){
engine.outhnd.innerHTML +='<br />’ + message;
}
engine.screen = {};
engine.screen.width = engine.canvas.width;
engine.screen.height = engine.canvas.height;
engine.screen.tileX = engine.canvas.width / 256;
engine.screen.tileY = engine.canvas.height/ 256;
engine.viewport = {};
engine.viewport.x = 0;
engine.viewport.y = 0;
engine.map = {};
engine.tile = {};
engine.tile.empty =[];
engine.tile.holder =[];
engine.tile.images = [];
engine.tile.store = function(Z, id){ //working
var i, k, imgSrc, myid;
nZ = (Z!==1)? (Z/4)+1 : 1;
//storing the zoomlevel and type+id
for (i=1; i<= (Z*8); i++){
var tile = new Image();
var boolean =false ;
k=i-1;
myid= id+i;
tile.src = ’tiles/’+id+nZ+’/’+i+’.png’;
tile.onload = function()
{
engine.output(‘ONLOAD WORKS’);
boolean=true;
globalBoolean = true;
engine.output(‘globalboolean ‘+globalBoolean+’ boolean’+boolean);
};
engine.output(k);
engine.tile.images[k]=[Z,myid,tile,boolean];
engine.output(engine.tile.images[k]);
}
engine.output(‘my length ‘+engine.tile.images.length);
engine.output(‘*****’+engine.tile.images[4][2].src);
}
engine.map.draw = function(mapData){
var i,j; //loop
var newid=0;
var mapX=0;
var mapY=0;
var tilepos,id,x,y;
var nZ = Z*4;
var newid=0;
engine.output(‘drawing from ‘ + engine.viewport.x +’, ‘+engine.viewport.y+ ‘ to ‘+
(engine.viewport.x + engine.screen.tileX) +’, ‘+
(engine.viewport.y + engine.screen.tileY));
PX= (Math.floor(engine.viewport.x)- engine.viewport.x)*256;
PY= (Math.floor(engine.viewport.y)- engine.viewport.y)*256;
for (j=0; j < 4; j++){
for (i=-nZ; i < 2*nZ; i++){
var id, x, y;
var newX,newY;
newX=Math.floor(engine.viewport.x)-1;
newY=Math.floor(engine.viewport.y)-1;
mapX = i+newX; engine.output(mapX);
mapY = j+newY; engine.output(mapY);
id= mapData[mapY][mapX];
x=mapX;
y=mapY;
tilepos = ( mapData[mapY] && mapData[mapY][mapX]) ? mapData[mapY]
[mapX]: ”;
engine.tile.holder[newid] = [id, x, y];
engine.output(‘Le tile test ‘+mapData[mapY][mapX]);
engine.output(‘Heres the holder for ‘+newid+’ ‘+engine.tile.holder
[newid]);
engine.tile.draw(i,j,tilepos);
engine.output(‘here it is ‘+tilepos);
newid++;
}
}
}
engine.tile.emptystore = function(){
engine.output(‘EMPTYSTART’);
var eboolean=false;
var empty=new Image();
empty.src = ’tiles/emptytile.png’;
empty.onload = function(){
eboolean=true;
}
engine.output(‘/////here s the empty ‘+empty);
engine.output(eboolean);
engine.tile.empty = [empty,eboolean];
}
engine.tile.retrieve = function(tile_id){
// retrieve the tiles depending on the stored id exp M1 for the first map tile of
any given zoomlevel, G1 for the first geomag tile of any given zoomlevel
engine.output(“retrieve starting”);
var i,len=engine.tile.images.length;
for (i=0;i<24;i++){
if(tile_id!==”){
if(engine.tile.images[i][1] === tile_id){
return engine.tile.images[i][2];
}
}else {
return engine.tile.empty[0];
}
}
}
engine.tile.draw = function(x,y,tile){
/*engine.handle.drawImage(tile,x*256,y*256);*/
var img=engine.tile.retrieve(tile);
engine.handle.drawImage(img, x*256-256+PX , y*256-256+PY);
}
engine.tile.Zoomdraw = function(x,y,tile){
/*engine.handle.drawImage(tile,x*256,y*256);*/
var img=engine.tile.retrieve(tile);
engine.handle.drawImage(img, x*256+nPX , y*256+nPY, 512, 512);
}
engine.tile.allLoaded = function (){
var i,len=engine.tile.images.length;
if(globalBoolean === false ){
return false;
} else {
return true;
}
}
engine.draw = function(mapData){
if (engine.tile.allLoaded() === false){
engine.output(‘***it s false for ‘+engine.tile.images);
setTimeout(function(md){
return function (){
engine.draw(md);}
}(mapData),100); // 100ms
}else{
engine.output(‘Lets move on’);
engine.output(‘this is it ‘+engine.tile.images);
engine.map.draw(mapData);
}
}
engine.start = function(mapData, x, y){
engine.output(‘Engine starting…’);
engine.viewport.x = x;
engine.viewport.y = y;
//storing the tiles
engine.tile.store(Z, id);
engine.tile.emptystore();
engine.output(‘on engine start’+engine.tile.images[2][3]);
engine.draw(mapData);
engine.output(‘…Done’);
}
//Moving
engine.viewport.move=function(dir){
if (dir == ‘left’ ){
engine.viewport.x–;
/*x =x-1; engine.output(‘new value of viewport’+x);*/
zoomlevel =(engine.tile.images[0][0]!==1) ? (engine.tile.images[0][0]/4)+1:1;
mapData = Maps[zoomlevel-1];
engine.map.draw(mapData);
}
if (dir == ‘right’){
engine.viewport.x++;
zoomlevel =(engine.tile.images[0][0]!==1) ? (engine.tile.images[0][0]/4)+1:1;
mapData = Maps[zoomlevel-1];
engine.map.draw(mapData);
}
if (dir == ‘up’){
x=engine.viewport.x;
y=engine.viewport.y;
y=y-1;
zoomlevel =(engine.tile.images[0][0]!==1) ? (engine.tile.images[0][0]/4)+1:1;
mapData = Maps[zoomlevel-1];
engine.start(mapData,x,y);
}
if (dir == ‘down’){
x=engine.viewport.x;
y=engine.viewport.y;
y=y+1;
zoomlevel =(engine.tile.images[0][0]!==1) ? (engine.tile.images[0][0]/4)+1:1;
mapData = Maps[zoomlevel-1];
engine.start(mapData,x,y);
}
}
//retrieve the tiles
engine.tile.Located = function(x,y)
{
engine.output(‘Location engine’);
//localte the first displayed tile
var i,len;
var id;
len = engine.tile.holder.length;
engine.output(‘what do we get here ‘+x);
for (i = 0; i<len; i ++){
if( engine.tile.holder[i][1] === x && engine.tile.holder[i][2] === y){
engine.output(‘it equals ‘+x+’ and ‘+y);
id=engine.tile.holder[i][0];
}
}
return id;
}
//zoom in/out
//
engine.canvas.zoom = function(S){
engine.output(‘zoom engine’);
//var
var x,y;
var T1,T2,T3,T4,T5,T6,T7,T8;
var nPX,nPY, nZ;
x=engine.viewport.x;
y=engine.viewport.y;
nPX= PX*2;
nPY=PY*2;
nZ= (Z!==1)? (Z/4)+1:1;
//locate the tiles
T1=engine.tile.Located(x,y);
T2=engine.tile.Located(x+1,y);
T3=engine.tile.Located(x+2,y);
T4=engine.tile.Located(x+3,y);
T5=engine.tile.Located(x,y+1);
T6=engine.tile.Located(x+1,y+1);
T7=engine.tile.Located(x+2,y+1);
T8=engine.tile.Located(x+3,y+1);
engine.output(‘t1’+T1+T5);
//clear the canvas context
canvas.width = canvas.width;
//fill up with the zoomed tiles
if( S == ‘+’ ){
/*use Ts*/
//load the new tiles
if (nZ >=1 && nZ <5){
PX = nPX;
PY = nPY;
nZ++;
Z=(nZ-1)*4;
mapData= Maps[nZ-1];
engine.tile.store(Z,id);
engine.draw(mapData);
}
}
}
the arrays
[CODE]
var map1 =
[
[”, ” , ” , ” , ” , ”],
[‘M4’ , ‘M1’ , ‘M2’ , ‘M3’ , ‘M4’ , ‘M1’],
[‘M8’ , ‘M5’ , ‘M6’ , ‘M7’ , ‘M8’ , ‘M5’],
[”, ” , ” , ” , ” , ”]
];
//Zoom2
var map2=
[
[”, ” , ” , ” , ” , ”, ”, ”, ”, ”],
[‘M8’, ‘M1’, ‘M2’, ‘M3’, ‘M4’, ‘M5’, ‘M6’ , ‘M7’, ‘M8’, ‘M1’],
[‘M16′,’M9’, ‘M10’, ‘M11’, ‘M12’, ‘M13’, ‘M14’, ‘M15’, ‘M16’, ‘M9’],
[‘M24’, ‘M17’, ‘M18’, ‘M19’, ‘M20’, ‘M21’, ‘M22’, ‘M23’, ‘M24’, ‘M17’],
[‘M32’, ‘M25’, ‘M26’, ‘M27’, ‘M28’, ‘M29’, ‘M30’, ‘M31’, ‘M32’, ‘M25’ ],
[”, ” , ” , ” , ” , ”, ”, ”, ”, ”]
];
source
[CODE]
…
<script src=’arrays.js’></script>
<script type=”text/javascript”>
window.addEventListener(‘load’, function()
{
engine.start(mapData,1,1);
}, false);
</script>
<script src=’mapgoengine.js’></script>