Found solution for seams

  • Using WebGL like effect as tiling sprite it could have seamless texture

    http://powerupware.com/HTML5/tileWebGL/

  • About the only 100% proof way I see to eliminate tile border issues would be disallowing the Float positioning and scaling entirely.

    Unfortunately the float positioning comes from the fact that bowser frame rate ain't stable and thus the object and BG movements can't be kept on exact pixel coordinates if the movement has to look even. And non-float scaling options either cause multiple layouts or wide (ugly) borders.

    In a sense it's kinda amazing to think that with all the challenges coders had on old era (like on C64 and Amiga), at least the audio and frame sync was not amongst them. These extra layers of code and helper functions have done a lot of good, but also caused some all different problems.

  • You might get away with normal letterbox scale with point sampling, but I don't know how all graphics cards would handle that. Depending on what you do you might only need point sampling to solve seams (since it avoids the issue with mid-opacity edges not adding up to 100% opacity) - the integer scale and pixel rounding are just to make sure under all circumstances seams don't appear, and those are pretty good settings for pixel games anyway.

    Yes, games can appear less smooth this way, but it's a tradeoff you have to make. The difference should not be enormous. Remember lots of players aren't that discerning, some people happily play bejewelled at 4 FPS... and I've seen some games starting up in the wrong resolution for my monitor, using the hardware blurry linear filter that makes everything look awful, and they still shipped it with that and presumably it was not the end of the world for them. The only way to get that really silky smooth motion is to be able to scroll between pixels. If you scroll between pixels with linear sampling, you open a whole can of worms with the edge opacity issue, which is also a normal result in computer graphics and not a specific Construct 2 issue. It's a decision you have to make as a games designer. You can't always have it all.

  • Ashley

    why mobile platformers (like Leps World - it's not pixel art game) don't have seams? how they do that?

  • - the integer scale and pixel rounding are just to make sure under all circumstances seams don't appear, and those are pretty good settings for pixel games anyway.

    I have to be so bold to disagree. I found the experience in my low resolution retro project so jarringly bad with pixel rounding activated, that in conclusion it simply cannot be used. And I've seen posts from other users who also find it unusable for their pixel endeavors.

    This means I'm back to simply using sprites with numerous frames representing the different tiles. Surely nowhere near as handy as a proper tilemap would be. And I'm still not sure if it may cause performance issues for bigger levels.

    I would have to fire up Construct Classic again to really check, but am I wrong to remember there not being such tiling issues? Obviously that one runs on DirectX, so what does that do in this case and why can't HTML5? Unless I'm terribly mistaken here.

  • Some other engines don't even support floating-point positioning (i.e. pixel rounding is always on). People seem to get by OK with those tools. I would suspect other non-seaming games are using pixel rounding or point sampling.

  • Overall I think it's possible to solve these problems on special cases, but finding the universal and automatic solution that works on all possible platforms and implementations without great performance overhead is going to be hard.

  • I have to be so bold to disagree. I found the experience in my low resolution retro project so jarringly bad with pixel rounding activated, that in conclusion it simply cannot be used. And I've seen posts from other users who also find it unusable for their pixel endeavors.

    I may be wrong but I think developers for old platforms like the SNES designed their way around this. As in making sure their game objects moved by increments that played nice with a low-resolution pixel grid. No 'move sprite by 0.635 pixels per screen draw' for instance. They also had the luxury of working with platforms that gave you a consistent screen update at all times, which made delta-timing unnecessary. No need to compensate for different hardware speeds, and no Windows lurking in the background to hog resources with page filing and indexing and whatever it is it does.

  • Here the solution to all my problems (desktop platform).. i just programmed this in C# for my game. The settings are wrote to a single .txt file that the game is loading after.. plus it handle system screen resolution change and set it back when the game end.

    mediafire.com/view/myfiles

    I use crop mode, screen size is small.. and when i get to fullscreen or any window size.. everything is repositionned with Viewport properties. All layouts are scrolled to 0,0 automatically (except the ingame layout) which make the layout at top,left position and resizing is done to the right, bottom.

    End. :) and it work flawless.. if he desire fullscreen he can.. if he doesn't he can too! plus an extra where he can choose the scenario to load. But the point is that there are many option for a desktop user.. sure this kind of thing won't work on mobile.. but then you can adapt so it use integer scale and forget about the rest.

    And guess what ?.. no seams at all.. whatever the resolution is used. How this is possible ? simple.. there no scaling at the game. Only screen resolution got changed and this is the technique used by many desktop games.

  • The biggest problem about is HTML5 doesn't manipulate resolution from operative system like 1024 x 768 in game.

  • Yeah i know but like Ashley said that not a construct 2 concern.. however Node-WebKit should somewhat support this since the goal is to bring html 5 games to desktop and other desktop platforms such linux and mac.

    So unfortunally that why i had to code myself the resolution side of the app.

  • The biggest issue i have concerning this, is when i preview my game with my optimal settings (tested on chrome,firefox,ie) i have no seams, and i mean none, not less, i now also tested it with high contrast tiles,if it wasn't the case i simple wouldn't have bothered to raise this issue

    then when i export, suddenly there are, so its an export problem

    this to me, means that the technology is perfectly fine to display tiles with floating positions and no seams, but on export the texture atlas needs tweaking, wich i done and is possible to recreate the preview quality

    adjusted texture atlas

    https://dl.dropboxusercontent.com/u/61666915/noseamhighcontrast/index.html

    normal exported result (seams are really bad,because of upscaling)

    https://dl.dropboxusercontent.com/u/61666915/seamhighcontrast/index.html

  • vtrix

    so if it is about textures export, then Ashley could fix that

    or at least add some configuration?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • vtrix your adjusted results still have seams, they are just blurred into each other at the edges (at least on my computer which is nearly brand new and up to date). It's better then the normal result for sure but it's hasn't fixed the issue unfortunately.

  • Burvey, black seams? besides testing this on a good windows7 setup i'm testing this on a brand new nexus7 wich has a very high dpi, and i don't see a single seam, possible to do a screenshot? too see how it relates to the original.

    anyone else are seeying seems on adjusted version?

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)