Image repetition incorrect

In cocoonjs, the tiled background objects appear to have the wrong size when actually tiled. It seems to accumulate at a rate of 1 pixel per repetition.

To demonstrate this, I created a grid of tiled background objects. The image I used was 32 x 32 pixels and the grid was made of tiled backgrounds at 64 x 64 pixels each. From what I could tell, there is a 1 pixel (or so) gap between each tile.

Since I don't know the implementation behind construct and behind cocoonjs I can't say for certain who's fault this is, but I'd hope that since this affects construct that scirra will take this bug on and liaise with ludei if this is a fault in their canvas implementation.

Also, I placed a ring of tiled background objects around the level. So they are not visible and do not lie inside the level, they simply surround the level. In chrome, the object outside the level bleeds into the frame by 1 pixel.

We need pixel perfect rendering please.

To save you the time of reproducing the cocoonjs bug:

dl.dropbox.com/u/17781372/image%20bug.capx

I'd make it a link but I can't be trusted :P

FYI, I sent a bug report to Ludei today. It is quite likely that there is a bug in their fillRect implementation, since this is all the tiled background does. I will let you know how it goes.

I didn't see any gaps. Ran it on IE, firefox and chrome.

It's a bug in cocoonjs I think. The repetition style is buggy. I edited the tiled background object to paste in images (I am using whole repetitions) and not only does it work, it's surprisingly faster...

mcduck - your .capx is incorrectly set up, it has lots of separate tiled background objects. This will definitely show seams between tiles. You should just have one tiled background object and stretch it to cover the whole layout. That will not show seams on most browsers.

There are bugs with tiled backgrounds on both CocoonJS and directCanvas; I've reported bugs to both of them, but we have to wait for them to fix it. In the mean time be sure to contact Ludei or appMobi about bugs which only occur on CocoonJS or directCanvas, since we cannot do anything about the problem other than just forward your report directly on to them.

Also:

lso, I placed a ring of tiled background objects around the level. So they are not visible and do not lie inside the level, they simply surround the level. In chrome, the object outside the level bleeds into the frame by 1 pixel.

Can you provide a .capx which reproduces this issue as well?

I will try and produce the other issue in a capx asap.

The seams should never show unless you filter the textures. Without filtering you dont see the seams and there is no reason why you should in a pixel perfect scenario. I would like an explanation otherwise.

I was trying to highlight a bug with cocoonjs. It doesnt look like a normal seam artifact in cocoonjs, the image is rendered smaller. I dont understand this behaviour when opengl will do the texture repeating for you...

There is no reason why 2 exactly the same squares with exact pixel sizes and no resampling should have gaps between the objects. The problem with cocoonjs is that the repeated image takes up less space than it is supposed to and the repeated images inside the rectangle overlap each other.

Ludei are aware of this bug.

I believe Ludei have already fixed the tiling problem for their next release. However note you should also use one single tiled background object extended over the whole area for performance reasons: it can be N times faster than separate tile objects, where N is how many tiles you have on screen! (So possibly 10x faster or more)

Closing this report now, please make a separate thread for any other issues.

Ok, thanks. The multiple images as I said was just to demo a problem, not a suggested use case. However, you say it should be faster to tile one object, as I would have thought as well, but it's not with cocoonjs. The difference between pasting multiple whole images and using a single filled rectangle is the difference between 27fps and 22fps respectively in my tests, contrary to the expectation.