sheetengine Discussions Rss Feed

New Post: Setting an object's transparency

riotgrrrl — Tue, 10 Mar 2015 12:37:49 GMT

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;
}

New Post: How to manipulate z-ordering of sheets

dobsonl — Tue, 10 Feb 2015 15:48:46 GMT

I've checked it out, it's pretty cool! I like it :) Nice work!

New Post: How to manipulate z-ordering of sheets

pilleman — Tue, 10 Feb 2015 15:32:44 GMT

It took a while but finally we went online. I am proud to present you the configurator we worked on the last month.
The part of the 3D visualization is managed by the sheet engine.
Please use the “View in 3D” button to see the sheet engine working: www.cubit-shop.com/en-uk/sofa/configurator

Thanks again!

New Post: Sheetengine dead?

dobsonl — Tue, 27 Jan 2015 20:47:18 GMT

Sorry, I've been busy lately with other stuff and couldn't get a new release out. No major modifications are planned as of now. For the time being I can recommend you try Three.js, it has some sort of isometric support, and it can also rely on WebGL. Shadows might be a bit more tricky to implement to work globally but not that difficult either. Also it probably has the biggest community among js game engines so that can also be a plus.

New Post: Sheetengine dead?

chearner — Tue, 27 Jan 2015 18:12:30 GMT

The last posts to this forum are from September 2014, and the last source code update was in 2012. Is this thing in active development anymore??

Can anyone recommend a good alternative to build isometric javascript games?

New Post: manipulate xyz and size of simple Sheets

Mishap — Mon, 15 Sep 2014 16:41:27 GMT

I see,

ok, i will try to handle the zoom issue - this is the biggest problem here I think

Thanks again!

New Post: manipulate xyz and size of simple Sheets

dobsonl — Mon, 15 Sep 2014 16:21:11 GMT

Well, intersection calculation for objects are automatically switched off, so by switching shadows off I think you have pretty much optimized what you can.

New Post: manipulate xyz and size of simple Sheets

Mishap — Mon, 15 Sep 2014 15:30:07 GMT

I have seen the example with large sceene handling and it looks very nice.
But unfortunately I do have to zoom out - maybe i can limit the zoom out factor a little bit.
The Crossyard version is really not a solution exactly because of the reasons that you have yourself.

The Images that i place (sheet textures) might as well be higher then the actual basesheet, so the z-ordering is indeed needed. but I don't care about interceptions or shadows (I have disabled all the shadows).
Is there any other calculation I can disable to make it faster?

thanks a lot!!!

New Post: manipulate xyz and size of simple Sheets

dobsonl — Mon, 15 Sep 2014 15:10:48 GMT

Hi,

for sheetengine to work with big scenes I have created an example that uses dynamic loading and unloading sheets. This means that you can have as many sheets as you want, but the canvas will display only a limited number of sheets at a given time. When the camera moves, more sheets are loaded and some that fall out of the viewport are unloaded. Unfortunately I don't have a solution for zooming out. I have solved this problem in Crossyards by drawing the static scenes onto separate images and then creating image pyramids from them: this way the information you show on every stage is the same amount so you get the same performance, however this approach only works for strictly static scenes, there is no "augmented" gameplay possible when you zoom out. It would be too much information to handle.

You might get good results with basesheets because they don't count in calculations: no intersections, no shadows, no z-ordering, etc. They are simply drawn to the canvas as a first step, but sheets are different, because they do cast shadows, they may intersect other sheets and the order of drawing is arbitrary so it needs to be calculated. It could possibly be faster with WebGL support, but it is not implemented yet.

I cannot give advice on what engine to use, search for them on the internet, maybe you'll find some useful. If you don't need shadows cast by sheets that are reflected on other sheets/objects, you don't need sophisticated z-ordering because your sheets/objects are positioned on the same level and always in set orientations, and your sheets/objects never intersect, then your problem is a lot smaller than what sheetengine is capable of solving, and can be solved with simpler engines with better performance. Sheetengine was designed to render "difficult" scenes, with aribtrary sheet positions and orientations.

New Post: manipulate xyz and size of simple Sheets

Mishap — Mon, 15 Sep 2014 12:58:13 GMT

Hi dobsonl and thanks for the answer!

Wow - so you mean sheetengine is not made to work with such big scenes?
Using sheetengine I've already created the world that has the new perspective (2.5D), it can be moved and zoomed, it redraws everything after moving or zooming, since the dynamic scene has limited width and height... And with 3500 basesheets I can moove and zoom it without a problem.
But when I just place around 200 simple sheets and the move/zoom or just redraw the world - it gets very very slow...
So if 3500 sheets is too much for the sheetengine, could you please give me a suggestion what could I do or which framework to use for this task:

I have a small game (in 2.5D, so 100x68px each tile) that will have 3500 basesheets and can also have up to 3500 sheets (these are only images, so no objects will be created using poligons or what so ever) placed on the basesheets.
People place the objects on the basesheets, move the map, zoom in/out (preferably the zoom out goes until one sees the whole scene)....
It must be fast...

So I've already build this using normal html and js, but it's too slow on old PCs, so I'm trying to create a canvas version.

Thanks a lot for your help!

New Post: manipulate xyz and size of simple Sheets

dobsonl — Mon, 15 Sep 2014 06:09:41 GMT

Hi,

how is performance with static sheets instead of objects? Unfortunately only objects implement partial redrawing of areas in case if they move/change, so if you choose to work with static sheets, you will need to redraw the whole scene, which would be quite slow in your case as I can imagine. Showing 3500 sheets anyway sounds to me a lot more than what is reasonable with html5 and sheetengine, but you need to test it.

Image preloading: what I usually do is define a counter with the number of images to load (var counter = 100;) and at every image onload I decrease the counter and check if it has reached 0 - in which case I also call drawScene once. Not the best and most sophisticated approach, and you might also want to watch out for image loading errors. Alternatively you could use some sort of promise technology, or async library like https://github.com/caolan/async

New Post: manipulate xyz and size of simple Sheets

Mishap — Sun, 14 Sep 2014 22:26:52 GMT

Hi,

I've read that after placing a normal sheet it becomes a static part of the scene.
Is there a way to change the x/y and width/height properties after placing them?
I don't want to use SheetObject since it is much heavier for the processor. On the scene I have about 3500 objects - if one zooms out, it is possible to see all of them at once - and that gets really heavy if I use sheetObject.

Another question is how to handle the image preloading of many objects?
I am using this code to preload and append the image to a sheet:

var sheet = new sheetengine.Sheet(...);
var img = new Image();
img.onload = function() {
    sheet.context.drawImage(img,0,0,wid,height);    
    sheetengine.calc.calculateChangedSheets();
    sheetengine.drawing.drawScene(true);
};
img.src = mySRC;

If I place at least 100 objects with imgages, I have to call the drawScene method 100 times - this doesn't seem right. What can I do to call it only once?

thanks
Mishap

New Post: move object with drag

dobsonl — Fri, 05 Sep 2014 12:47:54 GMT

Hi,
you can download examples from the download page. You can also check the documentation tab here on codeplex. There is no such example that presents dragging objects, however whatever info you need to achieve it is written in the following examples:

Moving / rotating objects - https://sheetengine.codeplex.com/wikipage?title=Moving%20%2f%20rotating%20objects&referringTitle=Documentation
Selecting locations and objects - https://sheetengine.codeplex.com/wikipage?title=Selecting%20locations%20and%20objects&referringTitle=Documentation

New Post: move object with drag

Pirosoftit — Fri, 05 Sep 2014 12:29:18 GMT

Hi, my question: is it possible drag the objects with mouse? i can't find examples.

best regards

New Post: How to: Move SheetObject textured

RohanDeshpande — Thu, 04 Sep 2014 06:48:06 GMT

Keten, Levente has given me a solution that might help your problem, it helped mine.

Try changin lines 609-610 to this:

    targetContext.clearRect(0, 0, viewPort.w, viewPort.h);

instead of this:

    targetContext.fillStyle = sheetengine.backgroundColor;
    targetContext.fillRect(0, 0, viewPort.w, viewPort.h);

This fixed the issue for me. I can now simply set whatever background I like on the canvas itself, and there are no issues so far that arise from moving the camera or SheetObjects interacting with the edges of the scene. I'm not noticing the bug which you've shown above, are you calling drawScene() each time a sheet moves?

Btw, I'm interested in how you've achieved 'non square' maps. Did you modify the BaseSheet render loop somehow? Currently my idea is to put an 'inactive' property on a BaseSheet and simply not render it if the BaseSheet has that property.

New Post: How to manipulate z-ordering of sheets

pilleman — Thu, 03 Jul 2014 12:39:51 GMT

Thank you for the quick reply.
It is slower now, but it works for me. I do not need real time visualization.

I will send you the link to the project when it is launched.
Great engine, excellent support!

New Post: How to manipulate z-ordering of sheets

dobsonl — Wed, 02 Jul 2014 16:14:04 GMT

No, it's not likely to be a problem of the viewsource vector. It's probably the result of some optimizations sheetengine uses in order to make z-ordering faster. Shortly, the way it works to decide which one from 2 sheets should be drawn first is that it sets off some rays in the direction of the viewsource and checks the intersections of the rays and the sheets. From the z-value of intersection points it decides which sheets to draw first. An infinite number of rays would give us the optimal solution, but that would take forever. Also, the distance <5 can be accounted for optimizations to fix some graphic glitches in games, that might not be specifically useful to you.

So here are some suggestions, to play with:

line 1291: use a lower value for zOrderDistanceThreshold
line 1295: use a lower value for zOrderDistanceThreshold
line 757: this is where the number of rays to shoot is defined. The array defines different number of rays (numpoints) for different line segment lengths (dist). Start experimenting with something like [{dist:0, numpoints:100}]. It's going to be slow, but probably give you more accurate results.

New Post: How to manipulate z-ordering of sheets

pilleman — Wed, 02 Jul 2014 14:56:49 GMT

Hi,

I have got a similar problem. Currently I am working on a configurator for sofas. And I would like to use sheetengine for the isometric visualization.

I have the following problem:
I tried to build different views that allow the user to look from different perspectives to the scenery.
Depending on how sofa-parts are placed and rotated the Z-ordering is not working.
For example here:
http://work.mach-parat.de/test/sheetengine/z_ordering/index_construct.html
The texture is not loaded the first time. Please click on the button [isofront] to redraw the scene.

I read that z-ordering is automatic and relies on the sheetengine.viewSource vector.
First I thought that something must be wrong with my viewSource vectors, but than I recognized that the build-in view does not work correct.
I put some boxes/frames on the stage to demonstrate the problem:
http://work.mach-parat.de/test/sheetengine/z_ordering/

The boxes in front are rendered correct. There is a space of 5 between the boxes.
The boxes in the middle have got problems at their right side. The difference to 1. is that the space between the boxes is 4 now
The last row of boxes has got problems at top, bottom and right side. They have got a depth 18 instead of 40 now and there is a space of 4.

Is this a problem with the heetengine.viewSource vector?
What would be the correct code to switch between the views [isofront] [isoright] [isoback] [isoleft] of the first example?

Thank you,
pilleman

New Post: How to: Basesheet hover

Casero — Fri, 16 May 2014 23:07:08 GMT

I post my solution here https://sheetengine.codeplex.com/discussions/473442. It shows white border around basesheet.

New Post: crossyards code

Casero — Fri, 16 May 2014 23:05:50 GMT

My hover around basesheet look like this:
CLICK on position x,y ->

    var puv = {
        u: x - sheetengine.canvas.offsetLeft,
        v: y - sheetengine.canvas.offsetTop
    };
    var w = sheetengine.canvas.width / 2;
    var h = sheetengine.canvas.height / 2;
    puv.u = (puv.u - w) / zoom + w;
    puv.v = (puv.v - h) / zoom + h;
    var pxy = sheetengine.transforms.inverseTransformPoint({
        u: puv.u + sheetengine.scene.center.u,
        v: puv.v + sheetengine.scene.center.v
    });

   var clickposXY = sheetengine.scene.getYardFromPos(pxy);
    var clickpos = sheetengine.drawing.getPointuv({x: clickposXY.relyardx * sheetengine.scene.tilewidth, y: clickposXY.relyardy * sheetengine.scene.tilewidth, z: 0});
    var ctx = sheetengine.context;
    ctx.save();
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#FFF';
    var w = 3 * sheetengine.scene.tilewidth / 2;
    var poly = [clickpos.u - w / 2, clickpos.v,
        clickpos.u, clickpos.v + w / 4,
        clickpos.u + w / 2, clickpos.v,
       clickpos.u, clickpos.v - w / 4];
    ctx.beginPath();
    ctx.moveTo(poly[0], poly[1]);
    for (var item = 2; item < poly.length - 1; item += 2) {
        ctx.lineTo(poly[item], poly[item + 1])
    }
    ctx.closePath();
    ctx.stroke();
    ctx.restore();