Setting an object's transparency

Mar 10, 2015 at 12:37 PM
Hello,

In the game I'm working on, I want to have a building appear semi-transparent while the player chooses its location. Then when it's chosen, I want to change the transparency to 100%. To accomplish this I'm setting the transparency of the context of each sheet in my object to 0.2 when I create the object. However, each time I set the position of the object, the transparency seems to decrease until it becomes opaque.

Any ideas would be much appreciated! To be clear, I want the transparency to remain at 0.2 as the position of the object changes. I'm sure I'm making a silly mistake or don't really understand how transparency works in sheetengine.

YouTube Video Showing Problem

Mouse hover code:
$("#maincanvas").mousemove(function(event) {    
// get the hover coordinates

var offsetTop = $('#maincanvas').offset().top;
var offsetLeft = $('#maincanvas').offset().left;

var P1puv = {
    u:event.clientX - offsetLeft, 
    v:event.clientY - offsetTop
};
var P1pxy = sheetengine.transforms.inverseTransformPoint({
    u:P1puv.u + sheetengine.scene.center.u, 
    v:P1puv.v + sheetengine.scene.center.v
});

if(buildingGhost === "buildingE"){
    var tmpX = P1pxy.x + 35;
    var tmpY = P1pxy.y + 25;
    var tileX = Math.round(tmpX / 100)
    var tileY = Math.round(tmpY / 100);
    console.log("P1pxy.x=" + P1pxy.x + " P1pxy.y=" + P1pxy.y + " tileX=" + tileX + " tileY=" + tileY);
    
    if(ghostBuilding == null){
        ghostBuildingOldP = {x:tileX,y:tileY};
        ghostBuilding = createBuilding({x:tileX * 100,y:tileY * 100,z:0}, 1, '#4a3a47', '#4a3a47', 0.2);
    } else {
        if(tileX != ghostBuildingOldP.x || tileY != ghostBuildingOldP.y) {
            ghostBuildingOldP = {x:tileX,y:tileY};
            ghostBuilding.setPosition({x:tileX * 100,y:tileY * 100,z:0});
            sheetengine.calc.calculateAllSheets();
            sheetengine.drawing.drawScene(true);
        }
    }
} else {
    ghostBuilding = null;
}
});
House creation code:
function createBuilding(centerP, stories, colour, roofColour, alpha){

var frontWall = new sheetengine.Sheet({x:0,y:50,z:25}, {alphaD:0,betaD:0,gammaD:0}, {w:100,h:50});
frontWall.context.globalAlpha = alpha;
frontWall.context.fillStyle = colour;
frontWall.context.fillRect(0,0,100,50);
frontWall.context.clearRect(30,15,70,20);

var frontLedgeBottom = new sheetengine.Sheet({x:13,y:48,z:15}, {alphaD:90,betaD:0,gammaD:0}, {w:75,h:4});
frontLedgeBottom.context.globalAlpha = alpha;
frontLedgeBottom.context.fillStyle = colour;
frontLedgeBottom.context.fillRect(0,0,75,4);

var frontLedgeLeft = new sheetengine.Sheet({x:-19,y:48,z:20}, {alphaD:90,betaD:0,gammaD:90}, {w:30,h:4});
frontLedgeLeft.context.globalAlpha = alpha;
frontLedgeLeft.context.fillStyle = colour;
frontLedgeLeft.context.fillRect(0,0,30,4);

var sideLedgeRight = new sheetengine.Sheet({x:50,y:11,z:26}, {alphaD:0,betaD:0,gammaD:0}, {w:4,h:20});
sideLedgeRight.context.globalAlpha = alpha;
sideLedgeRight.context.fillStyle = colour;
sideLedgeRight.context.fillRect(0,0,4,20);

var sideLedgeBottom = new sheetengine.Sheet({x:48,y:28,z:15}, {alphaD:0,betaD:90,gammaD:90}, {w:40,h:4});
sideLedgeBottom.context.globalAlpha = alpha;
sideLedgeBottom.context.fillStyle = colour;
sideLedgeBottom.context.fillRect(0,0,75,4);

var windowFront = new sheetengine.Sheet({x:10,y:48,z:24}, {alphaD:0,betaD:0,gammaD:0}, {w:75,h:30});
windowFront.context.globalAlpha = alpha;
windowFront.context.fillStyle = '#b6b8ff';
windowFront.context.fillRect(0,0,75,30);

var windowSide = new sheetengine.Sheet({x:47,y:28,z:24}, {alphaD:0,betaD:0,gammaD:90}, {w:40,h:19});
windowSide.context.globalAlpha = alpha;
windowSide.context.fillStyle = '#b6b8ff';
windowSide.context.fillRect(0,0,75,19);

var doorWindow1 = new sheetengine.Sheet({x:47,y:-20,z:25}, {alphaD:0,betaD:0,gammaD:90}, {w:20,h:35});
doorWindow1.context.globalAlpha = alpha;
doorWindow1.context.fillStyle = '#b6b8ff';
doorWindow1.context.fillRect(0,0,20,35);

var sideWall1 = new sheetengine.Sheet({x:50,y:0,z:25}, {alphaD:0,betaD:0,gammaD:90}, {w:101,h:50});
sideWall1.context.globalAlpha = alpha;
sideWall1.context.fillStyle = colour;
sideWall1.context.fillRect(0,0,101,50);
sideWall1.context.clearRect(0,15,40,20);
sideWall1.context.clearRect(55,13,20,35);

var door = new sheetengine.Sheet({x:55,y:-10,z:25}, {alphaD:0,betaD:0,gammaD:90}, {w:20,h:35});
door.context.globalAlpha = alpha;
door.context.fillStyle = '#5d3500';
door.context.fillRect(0,0,20,35);
door.context.clearRect(2,2,15,12);
door.context.clearRect(2,22,15,8);

var sideWall2 = new sheetengine.Sheet({x:-50,y:0,z:25}, {alphaD:0,betaD:0,gammaD:90}, {w:101,h:50});
sideWall2.context.globalAlpha = alpha;
sideWall2.context.fillStyle = colour;
sideWall2.context.fillRect(0,0,101,50);

var frontRoofLedge1 = new sheetengine.Sheet({x:0,y:52,z:50}, {alphaD:90,betaD:0,gammaD:0}, {w:100,h:6});
frontRoofLedge1.context.globalAlpha = alpha;
frontRoofLedge1.context.fillStyle = colour;
frontRoofLedge1.context.fillRect(0,0,100,6);

var frontRoofLedge2 = new sheetengine.Sheet({x:2,y:55,z:53}, {alphaD:0,betaD:0,gammaD:0}, {w:105,h:6});
frontRoofLedge2.context.globalAlpha = alpha;
frontRoofLedge2.context.fillStyle = colour;
frontRoofLedge2.context.fillRect(0,0,105,6);


var sideRoofLedge1 = new sheetengine.Sheet({x:50,y:2,z:50}, {alphaD:0,betaD:90,gammaD:90}, {w:105,h:6});
sideRoofLedge1.context.globalAlpha = alpha;
sideRoofLedge1.context.fillStyle = colour;
sideRoofLedge1.context.fillRect(0,0,105,6);


var sideRoofLedge2 = new sheetengine.Sheet({x:55,y:2,z:53}, {alphaD:0,betaD:0,gammaD:90}, {w:105,h:6});
sideRoofLedge2.context.globalAlpha = alpha;
sideRoofLedge2.context.fillStyle = colour;
sideRoofLedge2.context.fillRect(0,0,105,6);


var backWall = new sheetengine.Sheet({x:0,y:-50,z:25}, {alphaD:0,betaD:0,gammaD:0}, {w:100,h:50});
backWall.context.globalAlpha = alpha;
backWall.context.fillStyle = colour;
backWall.context.fillRect(0,0,100,50);


var roof1 = new sheetengine.Sheet({x:1,y:1,z:55}, {alphaD:90,betaD:0,gammaD:0}, {w:107,h:107});
roof1.context.globalAlpha = alpha;
roof1.context.fillStyle = colour;
roof1.context.fillRect(0,0,107,107);
roof1.context.clearRect(20,20,68,68);


var roof2 = new sheetengine.Sheet({x:1,y:1,z:48}, {alphaD:90,betaD:0,gammaD:0}, {w:68,h:68});
roof2.context.globalAlpha = alpha;
roof2.context.fillStyle = roofColour;
roof2.context.fillRect(0,0,68,68);


var roofLedgeBack = new sheetengine.Sheet({x:0,y:-33,z:52}, {alphaD:0,betaD:0,gammaD:0}, {w:68,h:7});
roofLedgeBack.context.globalAlpha = alpha;
roofLedgeBack.context.fillStyle = colour;
roofLedgeBack.context.fillRect(0,0,68,7);


var roofLedgeSide = new sheetengine.Sheet({x:-32,y:0,z:52}, {alphaD:0,betaD:0,gammaD:90}, {w:68,h:7});
roofLedgeSide.context.globalAlpha = alpha;
roofLedgeSide.context.fillStyle = colour;
roofLedgeSide.context.fillRect(0,0,68,7);

 
var building1 = new sheetengine.SheetObject(centerP, {alpha:0,beta:0,gamma:0}, [doorWindow1,door,roofLedgeSide, roofLedgeBack, roof2,roof1,sideRoofLedge2, frontRoofLedge2, sideRoofLedge1, frontRoofLedge1, sideLedgeRight, windowFront, windowSide, frontLedgeBottom, frontLedgeLeft, frontWall, sideWall1, sideWall2, backWall, sideLedgeBottom], {w:150,h:100,relu:20,relv:30});

sheetengine.calc.calculateChangedSheets();
sheetengine.drawing.drawScene(true);

return building1;
}