[SOLVED]Looknfeel FrameComponent has gap

[xyysnybzi]

Hi!
1. I use photoshop crop a button image to nine sub images
2. Add the nine images into a image with 2 pixels between each other
3. Create a button using FrameComponent and use the nine image
4. I got the result that the final image has gap between the nine element

this is my looknfeel code:

Code: Select all

<ImagerySection name="normal_imagery">
   <FrameComponent>
      <Area>
         <Dim type="LeftEdge">
            <AbsoluteDim value="0" />
         </Dim>
         <Dim type="TopEdge">
            <AbsoluteDim value="0" />
         </Dim>
         <Dim type="RightEdge">
            <UnifiedDim scale="1" offset="0" type="RightEdge" />
         </Dim>
         <Dim type="BottomEdge">
            <UnifiedDim scale="1" offset="0" type="BottomEdge" />
         </Dim>
      </Area>
      <Image component="TopLeftCorner" name="Arum/btn_blue_normal_LT"/>
      <Image component="TopRightCorner" name="Arum/btn_blue_normal_RT"/>
      <Image component="BottomLeftCorner" name="Arum/btn_blue_normal_LB"/>
      <Image component="BottomRightCorner" name="Arum/btn_blue_normal_RB"/>
      <Image component="LeftEdge" name="Arum/btn_blue_normal_L"/>
      <Image component="RightEdge" name="Arum/btn_blue_normal_R"/>
      <Image component="TopEdge" name="Arum/btn_blue_normal_T"/>
      <Image component="BottomEdge" name="Arum/btn_blue_normal_B"/>
      <Image component="BackGround" name="Arum/btn_blue_normal_M"/>
      <VertFormat type="Stretched" />
      <HorzFormat type="Stretched" />
   </FrameComponent>
</ImagerySection>



this is my imageset code:

Code: Select all

<Imageset Name="Arum" Imagefile="Arum.png" NativeHorzRes="256" NativeVertRes="256" AutoScaled="false">
    <Image Name="btn_blue_normal_B" XPos="2" YPos="2" Width="176" Height="25"/>
    <Image Name="btn_blue_normal_L" XPos="180" YPos="2" Width="25" Height="41"/>
    <Image Name="btn_blue_normal_LB" XPos="207" YPos="2" Width="25" Height="25"/>
    <Image Name="btn_blue_normal_LT" XPos="2" YPos="45" Width="25" Height="27"/>
    <Image Name="btn_blue_normal_M" XPos="29" YPos="45" Width="176" Height="41"/>
    <Image Name="btn_blue_normal_R" XPos="207" YPos="45" Width="25" Height="41"/>
    <Image Name="btn_blue_normal_RB" XPos="2" YPos="88" Width="25" Height="25"/>
    <Image Name="btn_blue_normal_RT" XPos="29" YPos="88" Width="25" Height="27"/>
    <Image Name="btn_blue_normal_T" XPos="56" YPos="88" Width="176" Height="27"/>
</Imageset>


The btn_blue_normal_LT and btn_blue_normal_T are not border upon

If i use one button image and create image definition in CEED, it is ok. but when the atlas update, all the positions may need update too.
so i want prepare crop it, and then i can update all the positions when make atlas. is it right?

[Ident]

The pixels aroudn your cropped image are used for interpolation. You usually need to add a frame of pixels around each image, whereas the pixels are used for bilinear interpolation so they must be set right (right colour AND transparency). Transparency is a bit tricky in photoshop because you cant explicitly show the alpha values... If you have a gap you might wanna expand the relevant parts with an extra pixel around that edge, being the same colour as the outer pixel line inside the cropped area.

Please tell me if this helped!

[xyysnybzi]

Yes, it is helpful, thank you! I use TexturePacker to add a frame of pixels around each image and solve it!