Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat | DONATE
support scale9Grid ? — Gideros Forum

support scale9Grid ?

yuewahyuewah Member
edited January 2012 in Suggestions & requests
will you plan to support scale9Grid ?
e.g. http://www.sephiroth.it/tutorials/flashPHP/scale9/

Likes: Yan

+1 -1 (+1 / -0 )Share on Facebook
«1

Comments

  • atilimatilim Maintainer
    Good idea. Added to requests list.
  • some additional information about scale9Grid reference.

    http://dl.dropbox.com/u/16976971/tmp/TiledAndSlicedSprite.png

    SlicedSprite = scale9Grid, while "Tiled and Sliced Sprite" is much more flexible

  • atilimatilim Maintainer
    Thank you.

    I understand. But how about directly using a tile map to achieve this effect? Because with a simple algorithm, it's possible to organize the tiles exactly shown in the picture.
  • This was a 9Grid type control created for another framework, ti can be easily ported for Gideros. http://iphone.oz-apps.com/a-grid9-control

    Likes: atilim

    twitter: @ozapps | http://www.oz-apps.com | http://howto.oz-apps.com | http://reviewme.oz-apps.com
    Author of Learn Lua for iOS Game Development from Apress ( http://www.apress.com/9781430246626 )
    Cool Vizify Profile at https://www.vizify.com/oz-apps
    +1 -1 (+1 / -0 )Share on Facebook
  • no , scale9Grid can be resized without distortion of graphic.
  • atilimatilim Maintainer
    hmm.. I think OZApps' implementation is correct:
    - The corners are not scaled
    - The sides are scaled only in x or y axis.
    - The center is scaled arbitrarily

    Am I missing a point?
  • I'm having a heck of a time trying to stitch together images to make variable-sized popup boxes (think speech bubbles). I've tried the tile map route and I've tried the route of placing corners and placing the expandable parts and scaling them.

    But, in all my tests I'm getting a lot of artefacts, presumably from a combination of filtering and scaling. I've tried with textures filtered and not filtered when loaded - when not filtered, the results aren't great because of the scaling that Gideros does and resultant jaggy lines. When filtering is on, the artefacts are pretty much on all edges of the tiles. Plus as the box moves around the screen, sometimes you get small gaps between some of the tiles.

    So, I'm at a bit of a loss here - there does not appear to be a way of stitching together multiple images in a reliable way from what I can see. But, is there anything I've missed. Can I bake a sprite's children into a single texture, which I can then use for instance?

    Am I fighting a losing battle here? Is there no way to compensate for scaling to create perfectly seamless tiled imagery?

    Anybody got any ideas?
  • atilimatilim Maintainer
    edited February 2012
    Hi,

    If TileMap is ok for you, to avoid the 1 pixel gap between tiles while using filtering, give the parameters displaywidth and displayheight 1 (or 2) pixel smaller than tilewidth and tileheight.

    http://www.giderosmobile.com/documentation/reference_manual.html#TileMap.new
    TileMap.new(
        100, 100,
        texture,
        64, 64,  --> tilewidth and tileheight 
        0, 0,
        0, 0,
        63, 63, --> 1 pixel smaller than tilewidth and tileheight
    )
    So that neighbor tiles will blend with each other well. I haven't try this but most probably you'll get satisfactory results.
  • HI @atilim, the problem with this method is that the TileMap facility is actually still outputting the full tile size which causes me problems with fading out of the popups as it shows up the overlaying as it fades out.

    I actually wonder if there's not a bigger issue here though. I will have backgrounds where I want to overlay some parts over others, for instance to create the impression of a character passing through a door (take a look at the image on the latest blog post at http://www.looshkin.com/ - that's one of our test rooms, you'll see the door on the left). Because Gideros is scaling in a way that leads to changes in the pixels on texture edges, I can't do this because there will be artefacts created along those edges.

    Take the example of an image package, for instance. If you have a hard border at the edge of the image, you retain that hard edge if you scale it up. This avoids artefacts on edges and would allow stitching together of pieces without having to worry about scale modes etc.

    I hope that makes sense. This is actually a big problem for me - I'm surprised it hasn't come up before, if I'm honest. I can't be alone in wanting to use a sliced approach to elements in my app?

    Any ideas?
  • atilimatilim Maintainer
    Hi @moopf,

    I think I totally understand now. I have some ideas but let me do some experiments before telling them.

    Likes: bgcis

    +1 -1 (+1 / -0 )Share on Facebook
  • No worries @atilim, if you want me to test anything just let me know, or if you need any more info just shout :)
  • atilimatilim Maintainer
    edited February 2012
    Hi,

    When the filtering is used, the transparent pixels around the border edges bleeds into the inner side. On the other hand, if you take a big image (as in your blog), divide into texture regions and display them then everything looks ok because borders are continuos and not transparent. For example, the code below looks always good with filtering and scaling:
    local texture = Texture.new("looshbg.jpg", true) -- taken from <a href="http://www.looshkin.com/blog/" rel="nofollow">http://www.looshkin.com/blog/</a>
     
    -- create 4 200x200 texture regions
    local region1 = TextureRegion.new(texture, 0, 0, 200, 200)
    local region2 = TextureRegion.new(texture, 200, 0, 200, 200)
    local region3 = TextureRegion.new(texture, 0, 200, 200, 200)
    local region4 = TextureRegion.new(texture, 200, 200, 200, 200)
     
    -- create bitmaps from texture regions
    local bitmap1 = Bitmap.new(region1)
    local bitmap1:setPosition(0, 0)
     
    local bitmap2 = Bitmap.new(region2)
    local bitmap2:setPosition(200, 0)
     
    local bitmap3 = Bitmap.new(region3)
    local bitmap3:setPosition(0, 200)
     
    local bitmap4 = Bitmap.new(region4)
    local bitmap4:setPosition(200, 200)
     
    -- add the bitmaps to the stage
    stage:addChild(bitmap1)
    stage:addChild(bitmap2)
    stage:addChild(bitmap3)
    stage:addChild(bitmap4)
    Then I divided looshbg.jpg into 200x200 regions with Fireworks, saved them as separate image files and tried to stitch them together seamlessly. But because of transparent border, I have no success.

    As you know, OpenGL texture size always has to be a power of two. Inside gideros, the texture size is increased automatically to conform to this rule and expanded parts are filled with _transparent_ pixels. I've done a little modification to the expanding algorithm so that border pixels are replicated without making them transparent. And then the problem vanishes.

    I'm glad if you can you download libgideros.a from here http://dl.dropbox.com/u/684866/libgideros.a.bz2 and replace with your libgideros.a of your GiderosiPhonePlayer/GiderosiPadPlayer and do some tests.

    Thank you :)
  • hmmm, I've just tried this new version with my popup and, whilst it's better, I'm still encountering the following problems (the player showed 2012.2.1 so I'm presuming it's definitely the correct version I've put on my iPad):

    1. On stretching, aliasing appears on stretched sprites where there are hard borders.

    2. On zooming the pieces appear to separate with a pixel gap between them in many places. The problem is, that because the screen scales automatically to fit the device, this is always apparent (only way I could stop it was to use pixel perfect scaling and have the popup in a sprite group that doesn't scale with zoom - but that's just hiding the problem).

    It sounds, from your last test, that point 1 might be being caused by having the individual sprites packed into a texture where each one is surrounded by transparency. What I've tried is extending each of the images in the packed texture by 1 pixel so that the border on each hard edge is carried on, but whilst this pretty much gets rid of the artefacts from stretching, it still doesn't get rid of the gaps from point 2 above, so it's still unusable when you have any scaling going on at all, either on the app level or on sprite group level.

    Does that help at all?
  • Hi @atilim, just to add. I think the method you've chosen really doesn't work with packed textures at all, basically because of the transparent borders around the individual images. I've done a quick test in cocos2D on an app I've already done where I'm tiling popups from packed textures and I do get the similar gap issue to point 2, but not to the same obvious extent. It is still there, however.

    I'm going to try it without packing textures to see if that gets rid of the gap problem but I'm concerned about texture memory usage using this method, especially for backgrounds.

    I guess the problem is that as Gideros is designed to be used cross-platform on different devices where content will automatically get scaled, maybe this just isn't going to work. But then, surely this is something that developers have found ways of dealing with before, otherwise you wouldn't be able to resize screens on desktop games - and I'd be surprised if stitching cut images together wasn't a commonly employed technique.

    btw, just as an aside, what you've changed in the version you gave me - does that still play nice with tile maps???
  • Hi again @atilim. Ok, it works perfectly without any flaws from either stretching or overall scaling when using individual images, rather than packed textures. So, I think this narrows it down to how packed textures are being used. Do you have any ideas on how this could be made better? Or is this just a limitation I'm going to have to deal with?

    If that's the case, there's so much I won't be able to pack into textures I'm getting concerned that I'm going to be eating texture memory.
  • atilimatilim Maintainer
    Hi @moopf,

    I forgot to tell that I've only applied this method to single textures :-\" If it's ok with single textures than this method can be easily extended to texture packs.
  • atilimatilim Maintainer
    edited February 2012
    Then great :)

    This version fixes the error of http://giderosmobile.com/forum/discussion/503/gideros-cpu-usage-when-idle#Item_4 and changes the padding algorithm. Nothing else :)

    Btw, are you using pre-packed textures by Gideros Texture Packer or dynamic packing with TexturePack class?
  • Hi @atilim, if you can apply this to packed textures I'd be incredibly happy! Honestly, that would be great, it's been concerning me since I discovered it yesterday, and it would be fantastic.

    I'm packing textures using TexturePacker by Andreas Loew which is what I've used for a while now.
  • atilimatilim Maintainer
    edited February 2012
    Hi @moopf,

    Texture Packer have Extrude option under Layout tab (just below Inner Padding option). This is the same algorithm. So that you can get rid of transparent border and get seamless stitching.

  • Hi @atilim, well there you go. It just shows you that no matter how long you use a piece of software you'll always find something you never knew was there before :) Just tried it and it works a treat. Gideros' texture packer doesn't have that option, does it? Maybe it's worth adding in, unless you're going to alter the method used internally in Gideros.

    And it's worth saying again, the support and responsiveness here is wonderful :)
  • atilimatilim Maintainer
    great :)

    Currently Gideros Texture Packer doesn't have this option and I'll add it. And I'll alter the algorithm of dynamic packing of textures. We usually try to keep Gideros Texture Packer at its minimum and focus on IDE and runtime. Because there always Andreas Löw's great Texture Packer exists :)

    Thank you for this great conversation. Your questions helps us a lot while improving the product. :)
  • Yes @atilim, completely agree. TexturePacker is absolutely fantastic - I've never found that facility before, I guess, because previously I dealt with just iOS and never had to take into consideration whole screen scaling.

    btw, on the IDE, can you make CMD+F bring the Find box back up to the front if it's still open in the background behind the main window. Currently it doesn't ;) Only brings it up if it's not currently open.
  • Hi @atilim, just one more thing whilst we're talking about scaling images. Is there any reason you can think of why an image with a white border, when scaled, rather than having white artefacts at the edges of the images, has grey? I'd kind of expect it to be alpha'd white.
  • atilimatilim Maintainer
    CMD+F issue is noted :)

    As you said, you should see transparent white. Maybe your background is dark so that it appears as gray? For example, for a white background it appears as totally white.
  • Regardless of what color the background is, I'd expect the scaled edges of a white box to remain white. This is in a sprite group above a group containing the background. How does scaling a white image lead to the introduction of other colors - greys in this instance?

    Even when part of the popup lies on white, the edges are aliased with grey when scaled. That doesn't make any sense to me.
  • atilimatilim Maintainer
    edited February 2012
    Can you post a screenshot? It can help me a lot about understanding the issue. (btw, are we talking about 2012.2 or 2012.2.1?)
  • moopfmoopf Guru
    edited February 2012
    Not sure how to embed an image on the forum, but it's here:

    http://www.moopf.com/gideros/grey.png

    This was on 2012.2.1 but I've just checked and it's also noticeable on 2012.2

    Lighter backgrounds obviously show this up more than darker backgrounds.
  • atilimatilim Maintainer
    edited February 2012
    If it's tile map than I think I know the problem.

    As you know, if a pixel is transparent then its color should not be important. For example, there shouldn't be any difference between a transparent white (255, 255, 255, 0) and a transparent black (0, 0, 0, 0). But with filtering, some difference appears:

    For example you have a opaque white pixel as (255, 255, 255, 255) and next to it there is a black transparent pixel as (0, 0, 0, 0). While interpolating between these two, a color of (128, 128, 128, 128) appears. To overcome this problem, the transparent pixel should be white as (255, 255, 255, 0).

    If you've packed your tiles with Texture Packer, you may want to pack them with Extrude option also. It should solve this problem.

    (There is link "Attach a file". You can use it to post images on the forum)
  • These are packed in TexturePacker with the extrude option (this is actually the popup that was giving me problems earlier on this thread). I'm not using the tile map, I'm constructing it myself as I can stretch everything bar the corners to suit rather than using separate tiles to get the width.

    I think I'm following you now, but I've never had to do this before. I've taken the texture packed in TexturePacker, brought it into Pixelmator, added a layer at the bottom, flood filled it white and then made it invisible. Saving this, the aliasing is fine.

    This actually means that I should pack light outlined and dark outlined textures separately (or get more complex with flood fills after packing the texture). That's all a bit of a pain really!

    Shouldn't fully transparent pixels be ignored when filtering? Just thinking out loud here. Bet you wish I'd never found Gideros now ;)
  • atilimatilim Maintainer
    edited February 2012
    :D I'm glad you've found Gideros :) (btw, where have you heard of Gideros?)

    This actually means that I should pack light outlined and dark outlined textures separately (or get more complex with flood fills after packing the texture). That's all a bit of a pain really!
    Absolutely this should not be the solution. But in fact extrude option should solve the problem. Is it possible to send me your texture pack? (atilim@giderosmobile.com)

    Shouldn't fully transparent pixels be ignored when filtering?
    Nope :) uhm.. technically not possible.
Sign In or Register to comment.