Blocky edges

Discussion in 'How Can I...?' started by nyhjpo, Jan 30, 2016.

  1. nyhjpo

    nyhjpo Boxer

    Joined:
    Jan 28, 2016
    Messages:
    3
    Likes Received:
    0
    Hello,

    I got a problem with adding platform to my game. First all the rotated platforms had semi-seethrough edges. I fixed this by making the images bigger. But now every rotated platform has really blocky edges, even making the image smaller doesnt help.
    Please help me with this.

    Screenshots attached
    Screenshot-1136x640-2016-01-30-06.16.59.png Screenshot-1136x640-2016-01-30-06.19.06.png Screenshot-1136x640-2016-01-30-06.16.59.png Screenshot-1136x640-2016-01-30-06.19.06.png
     
  2. Jamie

    Jamie Avid Boxer

    Joined:
    Sep 25, 2015
    Messages:
    382
    Likes Received:
    273
    Can you reclarify and rephrase what the problem is in terms of buildbox functionality?
    I assume this is BB1. Maybe you need to change the collision shape of the objects/platforms?
     
  3. nyhjpo

    nyhjpo Boxer

    Joined:
    Jan 28, 2016
    Messages:
    3
    Likes Received:
    0
    Well the problem here is that when i look at the game in the editor all the shapes are perfect and sharp.
    But when i test the game all the platforms get blocky edges.
     
  4. trudnai

    trudnai Miniboss Boxer

    Joined:
    Sep 25, 2015
    Messages:
    1,234
    Likes Received:
    696
    What do you mean by "blocky edges"? I cannot see a difference between the two pics on my iPhone.
     
  5. nyhjpo

    nyhjpo Boxer

    Joined:
    Jan 28, 2016
    Messages:
    3
    Likes Received:
    0
    The pics arent different. Both are screenshots of the game running.
    Here are 2 different ones.
    In editor:
    in editor.png
    In game:
    in game.png
     
  6. trudnai

    trudnai Miniboss Boxer

    Joined:
    Sep 25, 2015
    Messages:
    1,234
    Likes Received:
    696
    Ah you mean the edge is pixelized? Have you tried that on a real device?
     
  7. Christoph

    Christoph Miniboss Boxer

    Joined:
    Oct 4, 2015
    Messages:
    2,808
    Likes Received:
    2,309
    This happens with straight lines when they are put with some rotation. Not happening horizontally or vertically. I suppose it has to do with the render engine. And if I remember well it gets worse if you scale your images up or down. All Buildbox games have this but if you look - for example - at Phases, you realize that the more action you have, the less you will notice. You just have to distract your players with a very good game and no one will complain. Another option is to add a very small blur or glow to the edge and the stairway effect will go away. But if your design requires hard edges this won't be an option for you.
     
    Wings n Armor likes this.
  8. Phill Mason

    Phill Mason Serious Boxer

    Joined:
    Sep 25, 2015
    Messages:
    880
    Likes Received:
    719
    @nyhjpo it also depends on the resolutions of the graphics you're using. I would imagine you've sized your png images for the iPhone 5 screen res of 1136 x 640 and I can see you're viewing the screenshot in preview mode at 1920 x 1080, so the images are being scaled up. This will also contribute to pixelated edges as well as what others have mentioned above.

    I had the same issue when I created all my buttons for my latest game. The buttons were round and they all had really nice sharp edge viewing in BB preview and on an iPhone 5 device, but on the iPad, they looked awful and the edges were pixelated just like your images above. I compensated for this by making the images I dropped into BB slightly larger than I needed and then scaled them down to approx 0.7 - they now look great on both devices.

    It may not completely solve your issue, but it will certainly help.
     
    Wings n Armor likes this.
  9. todro

    todro Avid Boxer

    Joined:
    Sep 25, 2015
    Messages:
    151
    Likes Received:
    69
    Make sure you are using PNG-24 with Alpha transparency (up to 256 levels of transparency because of this additional alpha channel but also size increase). This allows a smoother adaption to the background

    The effect you see is often caused by the hard 1 bit transparency as used in PNG-8 (web optimized graphics), so it's worth checking.
     
    Last edited: Feb 2, 2016

Share This Page