G2D Skinning System

Here is how the G2D skinning system included in the G2D library works.

Basically it's all related to the Area object, infact the first thing you have to do is to create a new area like this:

Local area1 = G2D.Area:new( 50,  50, 300, 250)

An area object stored in the variable area1 will be created, from now on you can use Area methods to manipulate the area or to render a skin on it. For example, if you want to scale the area you can use the method :scale() with the horizontal and vertical multipliers (factors).

area1:Scale(0.5, 0.5)

This copmmand will half the horizontal and vertical sizes.

But let's return to the skin system, as said, all you need is to use a single method with your area to render a skin on it, suppose we want to render a bevel box on our area, here is what you need:

area1:SkinBevel(colorsTable, aspectTable)
  • colorTable : It's a table with the color to use to render the bevel box edges, it must have the following fields :
    • light : Light Edges (top and left edges)
    • dark : Dark Edges (bottom and right edges)
    • middle : Internal color (set to NIL to leave it empty)
  • aspect : It's a table with further parameters with the following fields :
    • fx : CanCodice be one of the following effect :
      • GFX.BevelFx_Raised : Use this to render a bevel with “raised” effect
      • GFX.BevelFx_Recessed : Use this to render a bevel with “recessed” effect
      • GFX.BevelFx_Flat : Use this to render a flat bevel (without 3d effect)
    • height : Border's height
    • type : This one specifies the bevel box type :
      • GFX.BevelType_Standard : Normal bevel
      • GFX.BevelType_Sunken : Bevel with sunken edges

So, the previously seen command becomes:

area1:SkinBevel(
  { light = $CCCCCC, dark = $333333, middle = $777777 },
  { aspect = { fx = GFX.BevelFx_Raised, height = 2, type = GFX.BevelType_Standard } }
)

And that's all!

If you want to render multi-layered skins there is a method to achieve this:

G2D.Area:SkinMulti(skinLevels, offset)

Let's say we want to render a multi-layered skin on our area1 object, and we want to apply a first level with a color gradient and a second level with a bevel box, here is how you have to proceed.

So what we need? According to the :MultiSkin() method documentation we need to pass two arguments, the first one is a table that describes the skin layers, the second one is an optional offset table to adjust (if we need it) the horizontal and vertical position respect to the area object.

Let's start with the first layer, the one with the gradient:

Local gradientLayer =
  { type = GFX.SkinType_Gradient,
    params =
      { color1 = $444444,
        color2 = $FFFFFF,
        alpha = #NONE,
        angle = 45 }
    }
    

Let's proceed with the second layer:

Local bevelLayer =
  { type = GFX.SkinType_Bevel,
    params =
      { colors =
        { light = $FFFFFF,
          dark = $444444 },
        aspect =
        { fx = GFX.BevelFx_Raised,
          height = 2,
          type = GFX.BevelType_Standard }
       }
   }
   

Now we will call the skinning method as follow :

 area1:SkinMulti({ gradientLayer, bevelLayer })
 

And we should get something like this:

Here is the complete code snippet:

Local area1 = G2D.Area:new( 50,  50, 300, 250)
Local gradientLayer =
  { type = GFX.SkinType_Gradient,
    params =
      { color1 = $444444,
        color2 = $FFFFFF,
        alpha = #NONE,
        angle = 45 }
    }
    
Local bevelLayer =
  { type = GFX.SkinType_Bevel,
    params =
      { colors =
        { light = $FFFFFF,
          dark = $444444 },
        aspect =
        { fx = GFX.BevelFx_Raised,
          height = 2,
          type = GFX.BevelType_Standard }
       }
   }
   
 area1:SkinMulti({ gradientLayer, bevelLayer })
 
 WaitLeftMouse()

Combining all the possible skinning methods the possibilities are endless!

hollywoodlibs/g2d/skinning.txt · Ultima modifica: 2017/04/25 12:20 da admin
CC Attribution-Noncommercial 4.0 International
Driven by DokuWiki Recent changes RSS feed Valid CSS Valid XHTML 1.0