• Create Account

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

# thefollower

Member Since 16 Feb 2008
Offline Last Active Private

### 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    = [];

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

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:

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

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