How can I use a sheet as a basesheet?

Jan 24, 2013 at 1:55 PM

In order to create more complex maps, i'd be nice to know if I can apply textures to a basesheet or use a sheet as a basemap.

Thanks for reading!

Jan 27, 2013 at 1:20 AM

You could actually use a simple sheet instead of a basesheet, just rotate and position it to the right orientation/location. The only problem with this approach is that unlike sheets basesheets do not take part in calculations (they don't cast shadows, they don't intersect other sheets, etc.), therefore it is more performant to use basesheets to display the ground than sheets. I will include basesheet textures in the next release. If you can't wait you could check line 733 in the source code (drawBaseRects function) that does the drawing of basesheets. You could pin a canvas instance on basesheets and in this function simply use the html5 drawImage method instead of the fillRect.

Jan 27, 2013 at 1:54 AM

Never mind, I can wait :)

Actually, since I've waited a couple of days for an answer I started thinking about switching to Isogenic Engine; but im seriously HAPPY that this project is alive.
Could you provide some information about mapping with sheetengine? With two-dimensional arrays I guess or importing JSON from *somewhere*.

I don't really know how to use shadows yet, I've just added a texture and rotated it on the Z axis in order to look normally isometric, no idea if sprites can cast shadows following their shape :O

BTW, you should viralize your engine a little bit, Google keeps recommending "Cheat Engine" when I search for this page :P

Jan 27, 2013 at 9:53 AM

I think Isogenic targets very different problems, so if you have not yet made a deliberate choice, look through all the examples of these projects and possibly create prototypes that should help you decide if sheetengine is something you could use efficiently for your project.

What do you mean by "mapping"? Check out the example "Rendering large scenes". It does everything on the client side, but it should not be a big deal to use data coming from a backend server in JSON. The idea is to use a function for loading new sheets (loadAndRemoveSheets) that loads new sheets from the server and removes existing ones from the scene according to which portion of the map you are looking at.

Shadows come out of the box, you don't need to code anything deliberately for shadows to be in the scene. Simply place some sheets and they will cast shadows on the ground and onto each other as well. Traditional sprites are tricky with shadows, because a sprite is 2-dimensional and it does not hold any information about how it should cast shadows. So you either include the sprite shadow in the 2-dimensional images (as you can see it in the sprite animation example) or define sheets that are textured to a specific shape using alpha colors (as seen in the creating objects example).

Google: I hope the growing community will handle this issue :)

Jan 27, 2013 at 3:44 PM

Do you think that if I aint going to use Sheetengine's power for drawing objects, and I'm just going to use sprites, Sheetengine may not be the best choice for me?

Jan 27, 2013 at 5:34 PM

If you are only using sprites and simple scenes then I would look for a library that concentrates on sprite drawing. If you want to use complex objects and interactions with more complex 3d scenes that leverage movements in 3d space (like jumping up a ramp and moving between sheets or objects of arbitrary position and orientation - not just simply upright or tile-based), then sheetengine could be a good choice.

Jan 27, 2013 at 5:54 PM

I'm aming to create a 2-3 room based virtual world for testing several of my abilities.
Since I'm using 2D-Rendered 3D Graphics in an Isometric perspective, and for the sake of creating nice looking complex maps: I'll be using a "background" map, then placing "transparent" tiles on top of it and deciding wether the tiles are walkable or not (e.g because you can't walk on water or because my array map says there's a certain object "sprite" in the given coordinates).

In other words, a transparent basesheet would be created from an external file and then I'd spawn the given sprite, assigning the right collision properties to each one of them.

There would be no actual jumping or climbing, because even if I had a stair (say like this Although there are two or three aproches to designing that kind of map, every each of them is based on he fact that the player never "climbs" anything, its just an effect making us believe he's climbing while he's just walking an the same isometric grid.

Understanding this I think my idea goes with the "(...) just simply upright or tile-based)" kind of game, thus using another engine. Please let me know (or correct me) if I'm wrong 'cause i'm not really a fan of the other Iso HTML5 game engines out there.

Thanks for reading & answering :-)

Jan 27, 2013 at 9:21 PM

Well, I'm not a fan of other isometric engines, either :) That's why I created this (and because no other engine provided the features I needed). It seems to me that your scenario includes a lot of simplifications and restrictions, that make isometric displaying an easy problem for your case. So if I were you I would just simply implement my own custom isometric engine, it's not that difficult. You could even copy the relevant code from sheetengine source (like calculating points from 3D to 2D or calculating HTML5 canvas transform to draw an image on the scene with isometric projection). Z-ordering would be easy if every object is handled as a sprite and objects cannot interfere with each other, and cannot change z-level.

Or you could as well check if sheetengine works for you, and decide later if you encounter performance problems.

Feb 21, 2013 at 7:17 PM

I just had the same question as Belohlavek ("know if we can apply textures to a basesheet or use a sheet as a basemap") because later, I would texture on the ground instead of simple colors.

I did what you said dobsonl: "use a simple sheet instead of a basesheet, just rotate and position it to the right orientation/location."
Here is my code:
      // Define some sheets for the ground
      for (var x=-3; x<=3; x++) {
        for (var y=-3; y<=3; y++) {
          var sheet = new sheetengine.Sheet({x:x*40, y:y*40, z:0}, {alphaD:90, betaD:0, gammaD:0}, {w:40, h:40});
          sheet.context.fillStyle = "grey";
          sheet.context.fillRect(0, 0, 40, 40);
      // Draw initial scene
But, I noticed that on Chrome, "sheetengine.calc.calculateAllSheets(); sheetengine.drawing.drawScene(true);" is not working correctly.
Indeed, we can't see the "grid", you know, these lines between sheets. It's like sheetengine had drawn all sheets twice.
But it works on Firefox...

Thanks in advance for answering
Feb 22, 2013 at 5:01 PM
You could try using smaller sheet size (like 39) or simply draw onto the sheet from (0.5,0.5) to (39.5,39.5) instead of the full canvas. The visible grid is not intentionally drawn, it is the effect of sheets not drawn exactly next to each other.
Feb 23, 2013 at 1:46 AM
Thank you so much for your reply. Also, good job for Crossyards!
Feb 23, 2013 at 1:52 AM
Thanks :)
Apr 28, 2013 at 10:00 PM
I tried this out and it worked really well, thanks!

For anyone else needing textured base sheets, I changed line 738 in sheetengine.js to the following:
if(basesheet.img) {
  ctx.drawImage(basesheet.img, 0, 0, basesheet.width, basesheet.height);
} else {
Then you can just assign a loaded Image object with the same dimensions to the basesheet object before drawing the scene.

Is there still a plan to add this functionality to the engine in the next release?
Apr 29, 2013 at 8:27 AM
Sure! I'm planning a small bugfix release including smaller features like the above. The final implementation will most probably be similar to yours, thank you for the code snippet.
Dec 6, 2013 at 10:52 AM
This is a great fix and it works well, however, one issue I've found with it is that after applying textures to the basesheets, moving anything over them causes some white lines to appear. Dobsonl, can you let us know where the white borders around each yard come from?
Dec 6, 2013 at 11:07 AM
Try to use bigger basesheets/sheets (use bigger size and textures), or try to bring the sheets closer together (if the size is 40, place them 39 pixels away from each other.
Dec 6, 2013 at 11:30 AM
Yeah that worked...

hmm now to get everything lining up I need to subtract 1px from everything.
Apr 14, 2014 at 5:18 AM
RohanDeshpande wrote:
Yeah that worked...

hmm now to get everything lining up I need to subtract 1px from everything.
Other way, if u are using textures... is add inner-stroke in ur tiles, look this picture:

Apr 17, 2014 at 10:13 AM
Nice one Keten.

I've actually modded SheetEngine slightly to remove this problem entirely now. Basically I am still using the 1px offset hack but in a slightly different way. It removed the lines entirely which is what is optimal for a seamless level/map. If you're still interested I can post the code.