Developers Manual > Cocos Studio > UI Editor > UI Widget General Properties

UI Widget General Properties

Size and mode

Size percentage

Open the percentage mode of widget size.

Size Percent

  • X:Sets width of the widget in Percent.
  • Y:Sets height of the widget in Percent.

Control width

Sets width of the widget in pixels.

Control height

Sets height of the widget in pixels.

Mode

Auto

Automatic mode.

Custom

Custom mode.

3x3 grids

3x3 grids use a small picture to draw the large area’s picture without distortion techniques.
When drawing, follow the rules below:

a. Keep the shape of the four edges.
b. Stretch graphics and keeps the corners at the same size.
c. You can simultaneously stretch the middle, horizontal, and vertical sections. The end result may not keep the original proportions.

Four parameters of CocoStudio

CapInsetsX and CapInsetsY use a pair of parameters. They determine our center coordinates of the lower left corner. Cocos2d-x uses the lower left corner as the origin.
CapInsetsWidth and CapInsetsHeight determines the size of the center.

Note
The widget width should be greater than 2*X and widget height greater than 2*Y, or else the UI Editor will be prone to graphic artifacts.
Set 3 x 3 grids attribute value in scaling properties to 1; otherwise the graphic appears distorted.

Common properties

h3. Interactive

The control widget accepts user events. If the widget does not accept user events, such as a button, check the check box.

Show/Hide

Controls whether the control is displayed. Users can set some widgets not displaying in start state, latter through the code and then displayed. But whether or not the control display will be initialized and loaded depends on your system’s memory.

Name

Sets the widget’s name, so the widget can be obtained through the named values in CocoStudio.

Tag

Sets the widget’s tag, so the widget can be obtained through the tag values in CocoStudio.

Rotation

Sets the widget’s rotation property value to rotate clockwise.

Scale

Sets the widget’s scaling, divided into X axis scaling and Y axis scaling. Values can be either positive or negative, when the negative effect can be achieved.

Position

Sets the position of the UI widget based upon the x and y coordinates. The position is based on the lower left corner of the parent node.

Anchor point

Sets the position of the anchor point. All UI widgets use the center point as the default anchor point except for the UIPanel, ScrollView, and DragPanel widgets which use the lower left corner as the anchor point.

Render layer

Sets the widget’s rendering order. Smaller values are first rendering, but may be rendered after coverage.

Transparency

Sets the opacity of the background color,ranging from 0-255, 0 for transparent, 255 for the opaque option.

Color blend

Sets the widget’s blend color. The drop-down menu will appear after the color selection box option is selected. Select the color option after mixing the original widget and color rendering.

Widget layout

Percentage

Open the percentage mode of widget position.

Position

  • X: Controls anchor point X coordinates relative to the parent anchor point X vector-valued(A value of pixels).
  • Y: Controls anchor point Y coordinates relative to the parent anchor point X vector-valued(A value of pixels).

Proportion(%)

  • X:Controls anchor point Y coordinates relative to the parent anchor point X vector-valued.The percentage of values for the width of the parent.
  • Y:Controls anchor point Y coordinates relative to the parent anchor point X vector-valued.The percentage of values for the height of the parent.

Sign up for our newsletter to keep up with the latest developments, releases and updates for Cocos2d-x.