Big problem with tilemap and webGL off, CocoonJS

EDIT: I ""fix"" the problem with high-DPI display= yes, but just on the iphone, on the computer I have the same problem

Hi everybody, I have a very big problem about this...

I made some tilemap in 64x64 and it was perfect after I disable the webGL.

Why I would to disable the webGL? because with cocoonJS the frame will be amazing...

I was made 6 or 7 object with a sine movement (for testing), with webGL, the frame was 42/38!! but, when I disable the webGL the fps turn on 62!!! without slowing down or lag!!

I don't need to use webGL because I don't use effect for my project...

Now, where is the problem? the tilemap... every tile has a tiny outline and I don't undertand why...

someone know how I can fix it? it's very tiny trasparent outline...

and another question is, I read in the manual, if you use webGL, the performance incrase like twice...now, why in cocoonJS is different? with the webGL the performance is ok, but if I disable it will be perfect??

thank you very much!!

"every tile has a tiny outline and I don't undertand why..."

in the past I was trying to use TiledBackground on CocoonJS and it always have such outline

it has to do with sub pixel rendering vs integer gpu rendering.

—

so only way to use Scale Outer + Linear Sampling and TileMap without seams

is to make 1px invisible border around every tile?

scirra.com/forum/found-solution-for-seams_t93983

it has to do with sub pixel rendering vs integer gpu rendering.

so, what I can do it? I read the topic but I don't really understand how fix the problem, I tried a lot of combination (this night I will try another things... now I don't have my project with me)

if I disable the webGL I can see a seams, but with the webGL the performance will be fewer like 20 fps...

why in CocoonJS the webGL make this problem? I should contact ludei?

It's very important the fps, because when the fps is 40/35 you can see a lot of lag...

—

so only way to use Scale Outer + Linear Sampling and TileMap without seams

is to make 1px invisible border around every tile?

I tried a lot of combination... tonight I will try again

if you want tilemaps without seams you must select sampling to "point" and maybe pixel rounding to "on"

but you will lose scrolling quality and some png's will look a lot worse than the one you exported from lets say photoshop.

if you create 1px invisible border around every tile how will you tile them?

the only other way to not have seams without using the above at least to my knowledge is to use your tilemaps as sprites with animation frames. read the tutorial from ashley about "basic platformer"

it has nothing to do with cocoonjs. it has to do the way gpu renders pixels.i gave you above the solution.you pick what works best for you

EDIT i am not sure if cocconjs supports any of the above so go with solution no 2 just to be sure

if you want tilemaps without seams you must select sampling to "point" and maybe pixel rounding to "on"

but you will lose scrolling quality and some png's will look a lot worse than the one you exported from lets say photoshop.

if you create 1px invisible border around every tile how will you tile them?

the only other way to not have seams without using the above at least to my knowledge is to use your tilemaps as sprites with animation frames. read the tutorial from ashley about "basic platformer"

thank you very much for the reply, but I would prefer to use the tilemap... it's perfect to load with JSON file and implement in the future new level from internet.... with the sprite I need to "redesign" all of my game... this is my last point if i don't solve the problem

I don't remember if I try this combination, if a lose the quality of png I don't care if my game run 60fps on iphone...

the must of people don't care if the quality of the image is perfect, you can see a lot of application with a lot of download and the quality of the graphics are not very good...

I don't understand that, If I make every tile with a trasparent border what happen?

thank you very much again

—

"the fix: extrude 1px border from the texture outwards "

ok, maybe I don't get the whole idea

anyway I think that if there are seams on tiles with linear sampling, then there is - in fact - no real use for many people who would like to use tiles

szymek

glad i could help!

i had to learn all these the hard way.wish i had someone to tell me earlier.

Ashley says that that's the way it is but i cant believe this because it renders the whole tilemap thing useless for many situations.

so if you want to help out,

bug him until he figures out a way!

szymek

glad i could help!

i had to learn all these the hard way.wish i had someone to tell me earlier.

Ashley says that that's the way it is but i cant believe this because it renders the whole tilemap thing useless for many situations.

so if you want to help out,

bug him until he figures out a way!

I try your suggestion but doesn't work...

in my project the seams stay everytime... and a see a line to a png trasparent tiledbackground! I try all of the combination,

pixel rouding ON, sampling POINT, low quality etc... but doesn't make any difference...

how I can use tilemap if I can't use for this problem?? with webGL is working, but if i turn off webGL the seams return visible.

I repeat, cocoonJS with a webGL on will be very laggy with 4/5 sprite with one color and one movement sine turn in 38fps! , without webGL the performance are incredible. 61 fps without lagging!

this is a big problem for my opinion if the rendering of construct2 without webGL make this "seams" around the tile...

it's a bug? we can fix it?

thank you for the reply, I think this is very important to improve the performance... try in your project, turn off the webGL and try CocoonJS..

Ribis are you using fullscreen scaling? you must use integer scaling, other than that, maybe post a capx with your settings to check

Ribis are you using fullscreen scaling? you must use integer scaling, other than that, maybe post a capx with your settings to check

thank you for the reply, and what is integer scaling? I can't see on the options

I try all of the resolution (Fullscreen in browser) with:

pixel rouding:on

Fullscreen scaling: High quality

use high-DPI display: yes

enable WebGL: off

Sampling: point

I try all of the combination, on the computer you see the seams like 80% of the tile, on iphone you see the seams a little bit, depends where the player is on the Y,X...

this is very frustrating, because I tried Construct2 for 2 years, and now, when I'm ready to make a serious project just appear a error rendering

with webGL no seams, but I don't need webGL, just make lag on CocoonJS, a lot of lag.

I can't send the project now (I need to make a new one with the same problem, and I will do it) did you resolve this problem without WebGL?

this is very frustrating

above the fullscreen detail setting, "fullscreen in browser" has options, try integer scaling

above the fullscreen detail setting, "fullscreen in browser" has options, try integer scaling

if I set integer scaling, on the computer is working (sometimes...) , but on iphone with cooconJS, when the player is moving on the map, you can see a horizontal line with the same color of my texture, the horizontal and vertical line take all of the screen...

it's happen without tile (where I don't have texture in the tilemap) and when the player is moving on the map.... sometimes the lines are different from the border of the single tile (look this image and the first of the upload)

this is very strange and I don't know what I can do... this make to me a big problem, I must disable the webGL because I don't need to use it... tomorrow I will post a capx with the same tilemap...

someone know how I can fix it? I would like to use tilemap, I think is the best way for my game...

thank you very much!!