How to: Move SheetObject textured

Apr 14, 2014 at 3:19 AM
Hi!
Thanks for this incredible engine... Here my question:

1) I created and box object only with canvas drawing
2) I succesfully moved the box across the scene.. no problems
3) I created an object, with an image
4 PROBLEM) When I move the object, bugs appears with image parts... Like in this pic:

Image

If this possible? (move textured objects?)
Apr 14, 2014 at 3:36 AM
autoreploy jejeje:

I adjusted reul and relv, and works fine.

But the problem is, with the "object background"... is showing blank space (show image)

Image

any reason?
Coordinator
Apr 14, 2014 at 6:14 AM
How did you put that background there?
Try creating an img behind the canvas itself to contain background image.
You could also try playing with 'sheetengine.backgroundColor', which is a fillStyle, so you can set it to any color. But I doubt you can use transparent colors. You could tweak the source code at line 609, where it clears the canvas with the given color.
Apr 14, 2014 at 5:05 PM
dobsonl wrote:
How did you put that background there?
Try creating an img behind the canvas itself to contain background image.
You could also try playing with 'sheetengine.backgroundColor', which is a fillStyle, so you can set it to any color. But I doubt you can use transparent colors. You could tweak the source code at line 609, where it clears the canvas with the given color.
I have this:
<div class="map_container">
    <canvas id="maincanvas" width="2000" height="1000" style="background:none"></canvas>
</div>
the map_container has the background-image.

I can assign a image to a sheetengine background? or only a color?

thanks
Coordinator
Apr 14, 2014 at 5:22 PM
No currently only colors are supported. Try changing those lines I referred to in the source code to use clearRect() instead of fillRect() and see if it works for you.
Apr 14, 2014 at 5:44 PM
Edited Apr 14, 2014 at 5:44 PM
dobsonl wrote:
No currently only colors are supported. Try changing those lines I referred to in the source code to use clearRect() instead of fillRect() and see if it works for you.
Yes, that works!

I changed
targetContext.fillRect(0, 0, viewPort.w, viewPort.h);
For ->
targetContext.clearRect(0, 0, viewPort.w, viewPort.h);
But now, my problem is with the background. The part of image "floating" in the background, still there after moving...

Image
Coordinator
Apr 15, 2014 at 8:00 PM
Ok, then it seems it is a bit more tricky... because the original canvas is never cleared.
Look for occurrences of the following command:
context.drawImage(sheetengine.temppartcanvas,0,0,w,h,u,v,w,h);
Now before the "temppartcanvas" (that corresponds to the current object) is drawn to the "context" insert a line that clears the context with those u-v-w-h values. Something like
context.clearRect(u,v,w,h);
Sorry, I can't check now whether it does the job, or not, but it might help.
Sep 4, 2014 at 7:48 AM
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.