easeljs detection collision two rectangles
Question
im trying to detect collision with two shapes created with easeljs: but every time - getting false in log console! can someone describe why? and what is the best way detect side of collision (left|right|top|bottom) thanks.
<!DOCTYPE html> <html> <head> <title>EaselJS collision detection test</title> <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> <script type="text/javascript"> var stage; var moveheld = 0; var KEYCODE_LEFT = 37, KEYCODE_RIGHT = 39, KEYCODE_UP = 38, KEYCODE_DOWN = 40; var turnright, turnleft, turnup, turndown; turnright = turnleft = turndown = turnup = false; function init() { stage = new createjs.Stage(document.getElementById("testCanvas")); var gran = new createjs.Graphics().beginFill("#000").drawRect(40, 384, 12, 12); var grant = new createjs.Shape(gran); var graphics = new createjs.Graphics().beginFill("#cce").drawRect(48, 384, 12, 12); var shape = new createjs.Shape(graphics); stage.addChild(shape); stage.addChild(grant); createjs.Ticker.timingMode = createjs.Ticker.setFPS(10); createjs.Ticker.addEventListener("tick", stage); createjs.Ticker.addEventListener("tick", tick); moveheld = 0; this.document.onkeydown = keyPressed; function tick(event) { console.log(collis()); shape.setBounds(48, 384, 12, 12); grant.setBounds(grant.x, grant.y, 32, 32); if (moveheld <= 0) {} else { moveheld--; if (turndown == true) { grant.y += 3; } else if (turnup == true) { grant.y -= 3; } else if (turnleft == true) { grant.x -= 3, 5; } else if (turnright == true) { grant.x += 3, 5; } }; timer = createjs.Ticker.getTicks(); stage.update(); } stage.update(); function makerunright() { moveheld = 4; if (moveheld >= 0) { turnright = true; turndown = turnleft = turnup = false; } } function makerunleft() { moveheld = 4; if (moveheld >= 0) { turnleft = true; turndown = turnup = turnright = false; } } function makerunup() { moveheld = 4; if (moveheld >= 0) { turnup = true; turndown = turnleft = turnright = false; } } function makerundown() { turndown = true; turnup = turnleft = turnright = false; moveheld = 4; if (moveheld >= 0) {} } function keyPressed(event) { switch (event.keyCode) { case KEYCODE_RIGHT: if (moveheld <= 0) { makerunright(); } break; case KEYCODE_LEFT: if (moveheld <= 0) { makerunleft(); } break; case KEYCODE_UP: if (moveheld <= 0) { makerunup(); } break; case KEYCODE_DOWN: if (moveheld <= 0) { makerundown(); } break; } } function collis() { if (grant.getBounds.x < shape.getBounds.x + shape.getBounds.width && grant.getBounds.x + grant.getBounds.width > shape.getBounds.x && grant.getBounds.y < shape.getBounds.y + shape.getBounds.height && grant.getBounds.height + grant.getBounds.y > shape.getBounds.y) { return true; } else { return false; } } } </script> </head> <body onload="init();"> <canvas id="testCanvas" width="960" height="408"></canvas> </body> </html>
1 answers
solution1
1 2016-01-02 03:19:15
Graphics have no bounds by default, as they are really expensive and complex to calculate. You can set them yourself if you know the bounds when you make the Shape, but otherwise, it will return null.
Also note that to get the bounds of a DisplayObject, you have to call a getBounds method , and not a property. To do the collision comparison, I recommend looking up the bounds of each object once, and then comparing their values in your if statement.
For example:
// Draw the shape
var gran = new createjs.Graphics().beginFill("#000").drawRect(40, 384, 12, 12);
var grant = new createjs.Shape(gran);
// Set some bounds based on what you know
// This gets more difficult as your contents get more complex.
grant.setBounds(40, 384, 12, 12);
// Store bounds (faster than looking it up each time)
var b1 = grant.getBounds();
var b2 = shape.getBounds();
// Check Collision (code not tested, just ported from your example)
if (b1.x < b2.x + b2.width &&
b1.x + b1.width > b2.x &&
b1.y < b2.y + b2.height &&
b1.height + b1.y > b2.y) {
return true;
} else {
return false;
}
I also recommend setting the positions of rectangle graphics at 0,0, and then setting the x and y of the shape, instead of translating the drawRect coordinates (unless you have a good reason to do it the other way). It is easier to work with elements this way.
var gran = new createjs.Graphics().beginFill("#000").drawRect(0, 0, 12, 12);
var grant = new createjs.Shape(gran).set({x:40, y:384});
This would obviously affect the setBounds call.
grant.setBounds(0, 0, 12, 12);
Hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.