manipulate xyz and size of simple Sheets

Sep 14, 2014 at 10:26 PM
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
Coordinator
Sep 15, 2014 at 6:09 AM
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
Sep 15, 2014 at 12:58 PM
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!
Coordinator
Sep 15, 2014 at 3:10 PM
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.
Sep 15, 2014 at 3:30 PM
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!!!
Coordinator
Sep 15, 2014 at 4:21 PM
Well, intersection calculation for objects are automatically switched off, so by switching shadows off I think you have pretty much optimized what you can.
Sep 15, 2014 at 4:41 PM
I see,

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

Thanks again!