Room Wall Collision
This post explains how to calculate the walls of a room in perspective. The goal is to find the location of the left and right walls and use them as borders. This creates a space in which the objects can (and can’t) be placed.
Back wall
The border of the back wall is easily calculated because it’s a straight line and will look something like
|
1 2 3 4 5 |
var maxTop:Number = 300; // Y position of the back wall. if(mouseY > maxTop – object.height/2){ // object can be placed. // insert some awesome color tween here. } |
Image 1. Object is inside border
Image 2. Object is outside border
Left Wall
Image 3. The Triangle
To calculate the border of the left wall want to know the opposite side of the triangle (O in image 3). The opposite side is calculated through the angle at which the left wall is rotated (α) and length of the adjacent side (A) of the triangle.
Tan(α) = Opposite / Adjacent
Therefore
Opposite = Adjacent * Tan(α)
α = 44.75
A = stageHeight – mouseY (the stage is 790 pixels high)
O = (stageHeight – mouseY) * Tan (44.75)
O is the distance between the left side of the screen and the beginning of the floor (where an object can be placed). The formula is calculated on every frame, so if the object moves there will a check if the object falls inside or outside the border.
|
1 2 3 4 5 6 7 8 |
var a = stageHeight - mouseY; var angle:Number = 44.75; var leftBorder:Number = a * tan(angle); if(mouseX < leftBorder + object.width/2) { // Object can't be placed } |
Right Wall
Now that we have the formula to create the left wall border the calculation of the right wall border is quite easy.
|
1 2 3 4 5 6 |
var rightBorder:Number = stageWidth - leftBorder; if(mouseX > rightBorder - object.width/2) { // Object can't be placed } |
Scaling
The wall borders are complete and we now have a room in which objects can be placed. To create a true perspective the objects need to be scaled to there position in the room (the further away the smaller the object). This can be accomplished by using the scale properties in ActionScript 3.
Conclusion
I’ve used these calculations in the MyRoom application for the exposition in the Coda museum.
No comments