2
\$\begingroup\$

This question already has an answer here:

I'm making an isometric map for a game, I can draw it, but I don't know how to implement a sort of 3d collision detection without Threejs or other 3d library.

It is possible? Maybe make the block an Object can help? I have searched a lot on the web, but I found only libraries. Thank you!

This is my JavaScript code:

var canvas = document.getElementById('canvas'),
	ctx = canvas.getContext('2d'),
	width = canvas.width = window.innerWidth,
	height = canvas.height = window.innerHeight,
	stop = false;

var tw, th;
var player;

setup();
draw();

function setup(){
  ctx.translate(width/2,50);

  tw = 60; //tile width
  th = 30; // tile height
  player = new Player(2,3,2);

};

function draw(){

  ctx.clearRect(-width/2,-50,width*1.5,height+50);

    for(var i = 0; i < 5; i++){
      for(var j = 0; j < 5; j++){
        drawBlock(i,j,1,tw,th);
      }
    }

    if(!stop){
    	requestAnimationFrame(draw);
    }
}

function drawBlock(x,y,z,w,h){

	var top = "#eeeeee",
	    right = '#cccccc',
	    left = '#999999';

	ctx.save();
	ctx.translate((x-y)*w/2,(x+y)*h/2);

	ctx.beginPath();
	ctx.moveTo(0,-z*h);
	ctx.lineTo(w/2,h/2-z*h);
	ctx.lineTo(0,h-z*h);
	ctx.lineTo(-w/2,h/2-z*h);
	ctx.closePath();
	ctx.fillStyle = "black";
	ctx.stroke();
	ctx.fillStyle = top;
	ctx.fill();

	ctx.beginPath();
	ctx.moveTo(-w/2,h/2-z*h);
	ctx.lineTo(0,h-z*h);
	ctx.lineTo(0,h);
	ctx.lineTo(0,h);
	ctx.lineTo(-w/2,h/2);
	ctx.closePath();
	ctx.fillStyle = "black";
	ctx.stroke();
	ctx.fillStyle = left;
	ctx.fill();

	ctx.beginPath();
	ctx.moveTo(w/2,h/2-z*h);
	ctx.lineTo(0,h-z*h);
	ctx.lineTo(0,h);
	ctx.lineTo(0,h);
	ctx.lineTo(w/2,h/2);
	ctx.closePath();
	ctx.fillStyle = "black";
	ctx.stroke();
	ctx.fillStyle = right;
	ctx.fill();

	ctx.restore();

}

function drawTile(x,y,stroke,col){

	ctx.save();
	ctx.translate((x-y)*tw/2,(x+y)*th/2);

	ctx.beginPath();
	ctx.moveTo(0,0);
	ctx.lineTo(tw/2,th/2);
	ctx.lineTo(0,th);
	ctx.lineTo(-tw/2,th/2);
	ctx.closePath();
	if(stroke){
		ctx.stroke();
	}else{
		ctx.fillStyle = col;
		ctx.fill();
	}

	ctx.restore();

}

function Player(x,y,z){
  this.x = x;
  this.y = y;
  this.z = z;
  this.w = 10; //width
  this.h = 10; //height
}
canvas{
  width:100%;
  height:100%;
}
<canvas id="canvas"></canvas>

\$\endgroup\$

marked as duplicate by John McDonald, Felsir, Anko, DMGregory Dec 13 '18 at 15:38

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • 1
    \$\begingroup\$ It's not really clear, to me at least, what your goal is. Could you compare it to some existing game perhaps? \$\endgroup\$ – Phoenix Aug 25 '17 at 3:25
  • 1
    \$\begingroup\$ Are you sure you need 3d collision detection? If you are making a tile based game and dont care about collisions on the y-axis, you could either just do 2d collisions. An even easier approach, since it is a tile-based game, would be to just check if objects are on a specific tile \$\endgroup\$ – George Hanna Aug 25 '17 at 8:37
  • \$\begingroup\$ When I developed an isometric game once, I made a good experience with keeping the game mechanics completely orthogonal and do the conversion to isometric in the rendering system. This drastically reduced the mental acrobatics I had to do when implementing things like collision detection and movement vectors. \$\endgroup\$ – Philipp Nov 10 '18 at 12:25
0
\$\begingroup\$

to compare any box with one axis-aligned box I use this approach:

method boolean checkCornerColission(x1, y1, z1, x2, y2, z3, width, height, depth):
  return x1 > x2 and x1 < x2+width and y1 > y2 and y1 < y2+height and z1 > z2 and z1 < z2+depth;

method boolean checkColission():
    for corner i=0 to 7:
      if checkCornerColission(x[i],y[i],z[i]...):
         return true;
    return false
\$\endgroup\$

Not the answer you're looking for? Browse other questions tagged or ask your own question.