Jump to content

  • Log In with Google      Sign In   
  • Create Account

Banner advertising on our site currently available from just $5!


1. Learn about the promo. 2. Sign up for GDNet+. 3. Set up your advert!


thefollower

Member Since 16 Feb 2008
Offline Last Active Private

Topics I've Started

Simplify nodes in a grid

27 January 2015 - 05:58 PM

Hello 

 

I have a basic node system that stores points as well as the points they are connected to in my JavaScript like this:

 

var path    = [];
    path[0] = {'x':1,'y':3,'linksTo':[1],'id':0};
    path[1] = {'x':1,'y':4,'linksTo':[0],'id':1};
    path[2] = {'x':1,'y':1,'linksTo':[3] ,'id':2};
    path[3] = {'x':1,'y':0,'linksTo':[2] ,'id':3};

Now the end result looks something along the lines of this in my game:

ekCtZxN.png

 

The yellow dots represent the nodes stored in my path data. Now the question is how do i simplify this for when a user is building a road on the map so it automatically corrects the data.

 

Essentially if a user builds an intersection the nodes will update accordingly to keep the data clean and simple here is an example with the nodes in the place they should be:

m8SUOME.png

 

The logic to do this seems quite complex and am hoping for some guidance on the best way to do this, i don't really know where to begin with adding the functionality to do this. The paths can go in 8 compass directions, N,S,E,W,NE,SE,SW and NW.


Tiling my map in isometric perspective

11 January 2015 - 07:18 PM

Hello

 

I am having difficulty understanding how to tile my map correctly. I have a given base grid size which is represented with a simple white grid cell in my game (see image):

paJx3uc.png

 

Now the red dot represents where the camera is currently focused on the map.

What i am want to do is apply a floor texture of which is 5 times the size of those small white tiles - its larger so that the texture looks more natural.

But i also only draw around the camera's location outwards by calculating the maximum grids that fit on the screen at any one time. I do that with this code logic in my draw function (Javascript):
 

var sprites            = [];
    sprites[0]         = {};
    sprites[0].scale   = 1; //this tile is same size as the map base grid size
    sprites[0].img     = new Image();
    sprites[0].img.src = //directory to image
    sprites[1]         = {};
    sprites[1].scale   = 5;//this tile is 5 times larger to map base grid size
    sprites[1].img     = new Image();
    sprites[1].img.src = //directory to image 

//iterations = maximum number of base grids that can be seen on screen from screen dimensions 
 var iterationsX = Math.ceil(canvas.width/gridSize); //grid width = 32pixels
 var iterationsY = Math.ceil(canvas.height/ (gridSize/2)); //grid width /2  = 16pixels for isometric

function draw(sprites){
 for(var p=0; p<sprites.length;p++){
 var image = sprites[p]; //contains image source and data for image such as scale
 
 //camera.position holds "grid" location NOT "pixel" location
 var minX = Math.round(camera.position.x / image.scale) - iterationsX;
 var maxX = Math.round(camera.position.x / image.scale) + iterationsX;
 var minY = Math.round(camera.position.y / image.scale) - iterationsY;
 var maxY = Math.round(camera.position.y / image.scale) + iterationsY;

 for (var i = minX; i < maxX; i += image.scale) { 
    if(i < 0){ continue; }  //out of bounds - skip
 for (var j = minY; j < maxY; j += image.scale) { 
    if(j < 0){ continue; }  //out of bounds - skip
   
   //convert i:j to pixel locations
   //draw the tiles
 }}
}

The issue lies with scrolling, when I scroll the camera (and thus camera.position updates), the floor textures don't draw in the right place they kinda move around instead of staying in the right place which is annoying.

I managed to reproduce the behavior in this demo code: http://jsfiddle.net/L8fhnvhn/ - click and drag and watch the blue tiles move around when they should not.

Sadly the demo code is a bit messy as I had to incorporate a lot of functions just to get it to work as intended for the demo (which suggests a math logic error to me over some misuse of a function in my own game code).

Hope you can help explain why its not working properly...I believe the fault lies some where in my min/max math in the draw function relating to camera position, but I cannot figure out what I am missing.

Thanks


Decelerate a sprite

07 January 2015 - 09:45 PM

Hey

 

I have a sprite which i want to decelerate but I am having trouble understanding how to do this correctly, i think i have over complicated it and got myself confused.

 

So i set my sprite path and speed like so:
 

obj.speed     = 100; //km/hr
obj.velocity  =  distanceToWorld(obj.speed); // converts to game speed from real unit

var vectorX   = obj.destX - obj.posX,
    vectorY   = obj.destY - obj.posY;

    obj.normal    = Math.sqrt(vectorX*vectorX + vectorY*vectorY); 
    obj.vectorX   = vectorX / obj.normal;
    obj.vectorY   = vectorY / obj.normal;
    obj.totalTime =  obj.normal / obj.velocity; //time taken to complete path

Now once my sprite has reached the destX and destY (destination point). I want to slow the sprite down to its next destination point. But this is where I think I over complicated the method to do it.

My code looks like this for moving & slowing (using a boolean) the sprite down:

 

function slowSettings(obj,destX,destY){
	 obj.destX   	= destX;
	 obj.destY   	= destY;
	
     var vectorX        = obj.destX - obj.posX,
         vectorY	= obj.destY - obj.posY;		
	 
         obj.normal     = Math.sqrt(vectorX*vectorX + vectorY*vectorY);
	 obj.vectorX    = vectorX / obj.normal;
         obj.vectorY    = vectorY / obj.normal;		
		
     var range     = distanceToWorld(8) - obj.velocity; //8km/hr target speed for destination point converted to pixels
	 obj.brake = range / obj.normal;			
}


function updatePosition(obj,brake){
         var delta = new Date().getTime() - obj.timer;
	 if(brake){ //set to true if we want to slow the sprite down
	      obj.velocity += obj.brake*delta;
	 }
         var distance  = delta * obj.velocity;		
	 
         obj.posX += (distance * obj.vectorX);
	 obj.posY += (distance * obj.vectorY);
	 obj.timer = new Date().getTime();		
}

The current problem is the sprite slows down far before it reaches the destination. And I am not even sure if the way I am going about this is the cleanest way to do it?


Drawing larger tile correctly over base grid

30 December 2014 - 10:21 PM

Hey
 
I am a bit stuck with how to draw a larger tile over a grid which consists of much smaller tiles.
 
 
My base grid is drawn out like this:


 
var iterX     = Math.ceil(canvas.width / map.grid.widthHalf);
var iterY     = Math.ceil(canvas.height / map.grid.heightHalf); 
 
function drawGrid(context){ var minX = screen.gridX - iterX; var maxX = screen.gridX + iterX; var minY = screen.gridY - iterY; var maxY = screen.gridY + iterY;
for(var i = minX; i < maxX; i++){ if(i < 0 || i > max){ continue; } for(var j = minY; j < maxY; j++){ if(j < 0 || j > max){ continue; }
var res = gridIsoWorld(i,j,map.grid.widthHalf,map.grid.heightHalf); var x = res[0] + screen.offsetX - map.grid.widthHalf; var y = res[1] + screen.offsetY - map.grid.heightHalf; context.drawImage(gridImg,x,y); } } }

Adding a scrolling camera stuck with the maths

27 December 2014 - 03:15 PM

Hello!

 

I have an isometric game that I am trying to learn to make. I have my tiles drawn but I am stuck with how I incorporate scrolling with my camera.

 

 

My grid to pixel conversion functions are here:
 

function gridIsoWorld(gridX,gridY,widthHalf,heightHalf) { //isometric grid co-ordinate to a pixel co-ordinate
var x = (gridX - gridY) * widthHalf;
var y = (gridX + gridY) * heightHalf; 
return [x,y];
}


function worldIsoGrid(pixelX,pixelY,widthHalf,heightHalf){ //pixel co-ordinate to an isometric grid co-ordinate
var x = (pixelX / widthHalf  +  pixelY / heightHalf) /2;
var y = (pixelX / heightHalf - (pixelX / widthHalf)) /2;
return [x,y];
}

These work fine, but now I want to also add a camera offset into the mix. My game data holds this information when the game loads:

screen = {};
screen.cameraX  = canvas.width  / 2; 
screen.cameraY  = canvas.height / 2;
screen.gridX  = 2; // tile the camera starts on X axis
screen.gridY  = 2;  // tile the camera starts on Y axis
screen.offsetX  = //need to work this out so tile 2:2 is center of screen
screen.offsetY  = //need to work this out so tile 2:2 is center of screen

 

When i draw my tiles I use a double for loop which already includes correcting for the camera.offset. Although I have not yet worked out how to calculate the offset which is why my camera is not currently focused on the correct tile.

My draw code:
 

for(var i = minX; i < maxX; i++){ if(i < 0 || i > max){ continue; }
for(var j = minY; j < maxY; j++){  if(j < 0 || j > max){ continue; }

 var res = gridIsoWorld(i,j,map.grid.widthHalf,map.grid.heightHalf);
 var x   = res[0] - screen.offsetX; //need to calculate this 
 var y   = res[1] - screen.offsetY; //need to calculate this
 
context.drawImage(gridImg,x,y); 

}
}

So yeah I'm kinda stuck how to incorporate the maths for this. Please help, its tricky getting my head around it all some times xD

 


PARTNERS