Adding textures to the base sheet tiles?

Dec 4, 2013 at 9:50 PM
Hi there,

First off, amazing engine you've created here. It's opened my eyes to some amazing possibilities for creating games in HTML5 and javascript.

I have gone through the examples and documentation briefly, and so far I haven't found a way to add textures to the base sheet tiles. Is this possible?
Dec 4, 2013 at 10:10 PM
Read the end of this discussion:
This fix is not yet included in the engine but surely will be. I hope the code snippet included in the referred discussion is helpful to you.

We are looking forward to see some of those amazing possibilities you mentioned ;)
Dec 4, 2013 at 10:45 PM
Edited Dec 4, 2013 at 11:46 PM

Do you have an estimated time frame for the update which includes this feature at all? I'd prefer to use the developer's solution than someone else's although this code snippet from @robbles seems pretty simple and great
if(basesheet.img) {
  ctx.drawImage(basesheet.img, 0, 0, basesheet.width, basesheet.height);
} else {
One other question I had was regarding elevation. Is it possible to create maps with elevation and a light source?

edit: I see from the thread you linked that to create light sources, you will need to create new sheets and layer them on top of the base sheet. Now the hard part of figuring out how to get the calculations all correct!
Dec 5, 2013 at 3:26 AM
One little thing I wanted to point out, in the "Adding a light source" demo, you've overlaid a transparent div on top of #maincanvas so any click events on canvasElement won't work, was really confused why that wasn't working!
Dec 5, 2013 at 7:12 AM
Estimated time frame: currently I'm busy with another project but I'll try to get the fix out before the end of the year.

Elevation: you mean where the base is not fully horizontal but it contains level changes? For that you cannot use basesheets in sheetengine because a basesheet uses optimizations assuming that it is horizontal. For this case you can use simple sheets and don't use basesheets at all (but this setup will reflect in performance).

Light source: I'm not sure what you mean by creating light sources. Sheetengine supports a single directional light source.

Thanks for the note on the overlay canvas confusion, I haven't thought of that. I'll think of a solution for that and note this in the documentation.
Dec 5, 2013 at 8:06 AM
Yep, I've come to the realization that using base sheets for what I want is not the way to go. What I need to do is, create "blocks" using simple sheets.

I'm having some issues with positioning them at the moment however.

I'm working with base sheets that are 64x64 pixels. Ultimately my goal is to have a couple of functions to build blocks for me. These would be something like
//creates 3 sheets of the specified size (multiples of 64x64 tile size) and positions them all correctly to form a perfect block

//positions the entire block (all 4 sheets) at a certain position at the exact coordinates of a tile on the map
I'm having trouble positioning things though, for example if I put a sheet at x:0,y:0,z:0 it sort of seems close to the center of the map but it isn't really you have any advice on how to position things accurately? Seems like you are doing this in crossyards! :)
Dec 5, 2013 at 8:16 AM
xyz referes to the center of the sheet. So if a sheet has a size of 40x40px then you could set its position to (x:0,y:0,z:20), which would show it on the ground level in the center of the map. If you position it to (x:0,y:0,z:0) it would instersect the ground surface, but since basesheets do not take part in any calculations (neither in intersection calculations) you would percieve it as if the sheet was closer to you than what you have set.
Can you check if this is the problem you are facing? Or you have some other issue...
Dec 5, 2013 at 8:25 AM
YES that solved it!

SO, the base sheets are at z:0 right? So in order to sit on the surface of them, the object needs to be at z:32 correct??
Dec 5, 2013 at 8:36 AM

(Well it depends on how you define the center of the object... Take a look at 'creating objects'. There when I define an object I accept an array of sheets whose center coordinates are relative to the object's center. So if I pass sheets with z coordinates 0 then it means the center of the object will be in level with the center of the sheets, so then I would place the object with z:32. If I pass sheets with z coordinates 32 then it means that the sheets are higher above the object center, so I would place the object then with z:0 and get the exact same result. In case of sheetObjects this scenario works because in the end the resulting center of the individual sheets are derived from the object center and the sheets' relative center to the object center, so if no rotation is involved the coordinates simply add up. Your case is somewhat similar. Note: only use sheetObjects I mentioned if you want to define objects that can move around. If you just want some helper functions that will create static sheets for you, just create the necessary functions that create the sheets with the correct coordinates and that's it.)
Dec 5, 2013 at 9:16 AM

Most of my objects won't be moving around. They'll be static and will just be used to craft the look and feel of the scene.

My next question is about there any reason why the sprites appear a bit blurry when the x and y coordinates change? If I have a sprite that is placed at x:0,y:0,z:0 the sprite looks crisp and clear. Now if I move it to x:32, it's suddenly blurry.

What could be causing this do you think?

By the way, I really appreciate your speedy and helpful replies've created something really special here!
Dec 5, 2013 at 9:30 AM
Hm.. In what browser do you experience this blurryness?
Dec 5, 2013 at 9:38 AM
Happening in Chrome and FF
Dec 5, 2013 at 9:54 AM
I'll take a look at it. HTML5 canvas uses anti-aliasing and hence if the sheet is not positioned to certain locations it's top-left corner will fall to non-whole number coordinates and it will rendered blurry.

Try this one:
sheetengine.context.webkitImageSmoothingEnabled = false;
For me it somewhat changes the outlook, but it's not necessarily a final solution, because more than one canvases play role in the rendering, and the above line only affects the main drawing canvas.
Dec 5, 2013 at 10:51 AM
Edited Dec 5, 2013 at 11:21 AM
Hmm sadly, that didn't fix it, actually that's not doing anything for me, should I set that before calling drawScene()?

It's very strange, it seems at any other coordinates other than x:0,y:0 the sprite becomes blurred. Changing the z property doesn't cause it to be blurred while at x:0,y:0.

edit: just doing some tests moving the sprite around with some buttons. When it's at x:0, x:-512 or x:512 it is not blurred. I'm moving it in 64px blocks. Is there some way to use Math.round() to ensure whole number coordinates? The main issue is I don't know what coordinates are not whole numbers...the x and y coordinates of the sheet are always whole, could it mean that because of AA, the whole numbers get fudged a bit to make things smooth?
Dec 5, 2013 at 11:19 AM
Yes, right after calling init. I do see some changes, although not convinced that it would help you in any way. I need to investigate this more thoroughly.
Dec 6, 2013 at 1:36 AM
Yes it's going to be very crucial for anyone wanting to use sprites. While I know you've designed the engine around rendered objects, it has a lot of possibilities for tactical type games if you can get good sprite support in there. You've already got an excellent engine and besides this little point I can't see any issues for what I want to do so far.

I'm going to keep going, hopefully this issue has an easy fix!
Dec 14, 2013 at 3:15 AM
Edited Dec 14, 2013 at 3:22 AM
Not sure if this is going to be helpful at all, but could this be used?

It's strange because the canvas is moving to a position which is always whole coordinates. Perhaps its the 45 degree gammaD angle that is causing the blurriness?

edit: yep, just done some tests and it seems it is the gammaD rotation that is causing the problem. When I set the gammaD to 0, the sprite is never blurry.

What is very strange to me is that the sprite is fine when it's center is at x:0 , y:0 on the map. I would understand it if the sprite was just always blurry. While it's annoying, it also gives me hope for some sort of fix! If the sprite CAN be sharp at a certain point then there must be a way to make it sharp all the time.
Dec 16, 2013 at 7:37 AM
Just noticed that this occurs on all image textures when moving the camera as well.