sheetengine - Isometric HTML5 JavaScript Display Engine

Commented Unassigned: Moving around in a large scene with no character just asdw keys? [7]

Freid001 — Sun, 03 Jan 2016 15:47:05 GMT

Hi,

I'm new to sheetengine, and just having a few issues rendering large scenes.

I am using the loadAndRemoveSheets() function like in the example files. I would like to be able to move around inside the world but without a character. I have created some action listeners for the asdw keys, when I use the asdw keys to move around the correct tiles are being created and destroyed. But the new tile does not position in the center of the canvas. Is it possible to get this newly drawn center tile to be displayed in the center of the canvas? I have tried sheetengine.scene.setCenter(targetp, targetpuv); but had little success.

Thanks for any help!

CODE:

$(function() {
var canvasElement = document.getElementById('maincanvas');
sheetengine.scene.init(canvasElement, {w:900,h:500});

var centertile = {x:0,y:0,z:0};

// define some basesheets
var map = [];
for (var x=-3; x<=3; x++) {
for (var y=-3; y<=3; y++) {
map.push({
centerp: { x: x * 100, y: y * 100, z: 0 },
orientation: {alphaD: 90, betaD: 0, gammaD: 0},
size: {w:100,h:100},
init: function() {
var basesheet = new sheetengine.BaseSheet(this.centerp, this.orientation, this.size);
basesheet.color = '#5D7E36';
return basesheet;
}
});
}
}

// define some sheets
for (var i=0; i<50; i++) {
(function() {
var w = Math.random()*10 + 30;
var z = w;
var c = Math.floor(Math.random()*3);
map.push({
centerp: {x:Math.random()*1000 - 500, y:Math.random()*1000 - 500, z:z},
orientation: {alphaD:c == 0 ? 90 : 0, betaD:c == 1 ? 90 : 0, gammaD:c == 2 ? 90 : 0},
size: {w:w,h:w},
init: function() {
var sheet = new sheetengine.Sheet(this.centerp, this.orientation, this.size);
sheet.context.fillStyle = c == 0 ? '#006' : c == 1 ? '#600' : '#060';
sheet.context.fillRect(0,0,w,w);
return sheet;
}
});
})();
}

sheetengine.scene.setCenter(centertile);

loadAndRemoveSheets({x:0,y:0}, centertile);

// draw initial scene
sheetengine.calc.calculateAllSheets();
sheetengine.drawing.drawScene(true);

window.onkeydown = function(e){
move( e.keyCode );
};

window.onkeyup = function(e){
move( e.keyCode );
};

function move(key) {

//var oldcentertile = $.extend( {}, centertile );

var newcentertile = {x:0,y:0,z:0}
if (key == 87) {
newcentertile.y -= 1;
} else if (key == 83) {
newcentertile.y += 1;
} else if (key == 65) {
newcentertile.x += 1;
} else if (key == 68) {
newcentertile.x -= 1;
}

loadAndRemoveSheets( centertile, newcentertile );

sheetengine.scene.setCenter(newcentertile);
sheetengine.calc.calculateChangedSheets();
sheetengine.drawing.drawScene(true);

//sheetengine.drawing.drawScene(true);

}

function loadAndRemoveSheets(oldcentertile, centertile) {
var boundary = { xmin: centertile.x * 100 - 300, xmax: centertile.x * 100 + 300, ymin: centertile.y * 100 - 300, ymax: centertile.y * 100 + 300 };

console.log( boundary );
console.log( oldcentertile );
console.log( centertile );

// remove sheets that are far
for (var i=0;i<map.length;i++) {
var sheetinfo = map[i];
if (sheetinfo.centerp.x < boundary.xmin || sheetinfo.centerp.x > boundary.xmax || sheetinfo.centerp.y < boundary.ymin || sheetinfo.centerp.y > boundary.ymax) {
if (sheetinfo.added) {
sheetinfo.sheet.destroy();
sheetinfo.added = false;
}
}
}

// add new sheets
for (var i=0;i<map.length;i++) {
var sheetinfo = map[i];
if (sheetinfo.centerp.x < boundary.xmin || sheetinfo.centerp.x > boundary.xmax || sheetinfo.centerp.y < boundary.ymin || sheetinfo.centerp.y > boundary.ymax)
continue;

if (!sheetinfo.added) {
sheetinfo.sheet = sheetinfo.init();
sheetinfo.added = true;
}
}

// translate background
sheetengine.scene.translateBackground(
{x:oldcentertile.x*100,y:oldcentertile.y*100},
{x:centertile.x*100,y:centertile.y*100}
);
}

});
Comments: move.png

Commented Unassigned: Moving around in a large scene with no character just asdw keys? [7]

Freid001 — Sun, 03 Jan 2016 15:46:39 GMT

Created Unassigned: Moving around in a large scene with no character just asdw keys? [7]

Freid001 — Sun, 03 Jan 2016 15:43:59 GMT

New Comment on "Rendering large scenes"

Freid001 — Sun, 03 Jan 2016 00:50:16 GMT

Hi, I'm having some problems moving the camera view around a large scene map I have created. I am creating and destroying tiles using the loadAndRemoveSheets() as demonstrated in the demo files. When I use the around keys to move around the map the correct tiles are being destroyed and create but they no not get set to the center of the canvas. Thus I can see other tiles on the map but only for as far as the canvas's height and width. Is it possible to position the newly selected center tile at the center of the canvas? Thanks

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.

Commented Unassigned: Bug? at calculateChangedSheets - currentsheet.intersectors is undefined [6]

dobsonl — Thu, 04 Sep 2014 05:52:34 GMT

Hello

sometimes I get this rrror
> TypeError: currentsheet.intersectors is undefined

after I performed a change at a sheet and now want to redraw. Of course I call calculateChangedSheets() before I call the redraw method.

I don't yet know when and how it exactly occurs. I can't reproduce this error intetionally. It just sometimes occur and sometimes not at likely changes..

Is ist a bug or am I doing something wrong?

PS: A complete refresh works by the way..
Comments: Sorry, I really don't understand how this is possible. If currentsheet is undefined then it should throw an error already before that line. If intersectors is undefined it should simply skip to the next line. Try changing line 1418 to this if (currentsheet.intersectors) { instead of this if (currentsheet.intersectors != null) {