How do I avoid tile seams with cocoonjs export

Hi,

I have my project set to:

pixel-rounding=ON

sampling=POINT

Fullscreen in browser=letterbox integer scale

fullscreen scaling=low quality

Use high-dpi displays=NO

yet when I create an IOS app via cocoonJS my game on the device still shows terrible seams at the edges of tiled background objects.

What am I missing? I've successfully exported games before with these settings and saw no seems, I don't think I changed anything, but now I have seams no matter what I try once the games on my device...

Any ideas?

thanks,

Mike

I am also having the same problem.

And letterbox scale does nothing because cocoonjs defaults to scale outer.

I've still found no solution and will contact the cocoonjs staff, please let me know if you have any luck finding a solution on your end, Bonesy.

Can we really be the only two trying to export games that use background-tile objects (or retro pixel art games for that matter) with cocoonjs?!?

Has anyone successfully exported a retro style pixel art game using cocoon js recently? If so, please show us the exact settings you used in both the capx and on cocoonjs.

thanks,

Mike

I have exactly the same problem.

I haven't got a lot of time to dedicate to the issue right now, but if I find out anything worthwhile I will most certainly let you both know (and would appreciate it if you do the same ).

Good luck

Hi again everyone,

I've just posted this on the cocoon js community forum: http://support.ludei.com/hc/communities ... 2-anymore-

please join in there..the more we make the issue visible to them, the more likely they'll address it quickly.

thanks,

Mike

Hi everyone...ed, from the C2 community says he ran into this issue when trying to export form C2 build 169, and when he reverted to using b168 the problem disappeared! I'm going to test this now and if that's the case, report it to Ashley ASAP!

wish me luck,

Mike

Sadly, I've tried many combinations of versions of C2 and cocoon settings and the seems will NOT go away. Has anyone else had any luck?

I spotted in the xcode debug window in my latest attempt the following report....is this the problem?

com::ideateca::service::js::core::JSDocument::GetElementById line 234: Not found getElementById: c2canvasdiv IDTK_LOG_INFO: [JS] Invoked in JSValueRef com::ideateca::service::js::core::JSConsole::Log line 102: [Construct 2] Letterbox scale fullscreen modes are not supported on this platform - falling back to 'Scale outer' IDTK_LOG_WARNING: [JS] Invoked in void com::ideateca::service::js::WebKitNode::addEventListener line 163: Not implemented window addEventListener: online IDTK_LOG_WARNING: [JS] Invoked in void com::ideateca::service::js::WebKitNode::addEventListener line 163: Not implemented window addEventListener: offline IDTK_LOG_WARNING: [JS] Invoked in void com::ideateca::service::js::WebKitNode::addEventListener line 163: Not implemented document addEventListener: appMobi.device.update.available IDTK_LOG_WARNING: [JS] Invoked in void com::ideateca::service::js::WebKitNode::addEventListener line 163: Not implemented document addEventListener: backbutton IDTK_LOG_WARNING: [JS] Invoked in void com::ideateca::service::js::WebKitNode::addEventListener line 163: Not implemented document addEventListener: menubutton IDTK_LOG_WARNING: [JS] Invoked in void com::ideateca::service::js::WebKitNode::addEventListener line 163: Not implemented document addEventListener: searchbutton IDTK_LOG_WARNING: [JS] Invoked in void com::ideateca::service::js::WebKitNode::addEventListener line 163: Not implemented document addEventListener: tizenhwkey IDTK_LOG_WARNING: [JS] Invoked in void com::ideateca::service::js::WebKitNode::addEventListener line 163: Not implemented canvas addEventListener: webglcontextlost IDTK_LOG_WARNING: [JS] Invoked in void com::ideateca::service::js::WebKitNode::addEventListener line 163: Not implemented canvas addEventListener: webglcontextrestored

i dont know if this helps but r169 had a new feature that destroyed everything on export.it created huge seams.

i made a bug report about it and in r170 ashley reverted the export process to r168 and everything is ok again.

also the good news are that he finally fixed the tilemap seams under some circumstances. please refer to the changelog of r170.you just have to select the seamless mode from the tilemap properties on the left of the editor.

for me ,for the first time ever i have no seams with the tilemap object and i am super happy about it!

but if for any reason you still have seams another way to fix them is to add your tilemaps as sprites and then overlap them by 0.5 of a px .

lets say you have 128x128 tile-sprites.

you make your grid 127.5x127.5 and you snap them.

seams gone!

with the method i told you there is no need to use all those dreadful settings!

pixel rounding on= destroys spriter animations since they tween subpixel (you should have known that!! you created spriter! ) and it makes everything choppy when moving.

sampling point= destroys image clarity and quality and especially if you have thin lines in your png then it flickers like crazy!

leterbox integer scale? Noooooo! only integers? the game will look like ...

we have been raging a battle for months to get rid off all these terrible settings and since r170 we won the war!!

why dont you use

pixel rounding off

sampling linear

letterbox scale

try my method with either sprites overlapping by 0.5 of a .px or the new tilemap with seamless mode to on and tell me what you see

cheers!

This game is for a client, they want retro pixel art look, the sprite animations are low-res, per frame images, I used Spriter to make the animations, but then exported them as png and processed them into pixel art, so no Spriter files are being used in the game.

I know how to replace tiled background objects with sprites, but that's not remotely optimized, and most importantly, it USED TO WORK, and now it's broken.

I too am super glad that tilempas might finally be useable for non retro style games

Hey Everyone, I just exported and built my game using Ejecta instead of cocoon and it has no seems, so its definitely a cocoon js issue/limitation.. now to tell them on their forums etc...

I have the exact same problem, I have been developing a 32x32 pixel game and the problem seems to have something to do with Scale Outer as the seam-lines also appear when I preview in Chrome/Firefox.

When I switch to "High Quality" Fullscreen Scaling the seam-lines disappear but so does my pixel grid

Can anyone help us out here? Ashley maybe?

CocoonJS doesn't support any of the letterbox scale modes, so will always fall back to a floating-point scale inner/outer which can cause seams. I'd definitely recommend Ejecta or Crosswalk, both of which have letterbox support.

Thanks for the tip Ashley, but whats strange is I've had a seamless export with cocoon js just weeks ago, same game, same art, same settings. but, ejecta it is for now.