UI Widget General Properties¶
Size and mode¶
Open the percentage mode of widget size.
- X：Sets width of the widget in Percent.
- Y：Sets height of the widget in Percent.
Sets width of the widget in pixels.
Sets height of the widget in pixels.
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.
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.
The control widget accepts user events. If the widget does not accept user events, such as a button, check the check box.
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.
Sets the widget’s name, so the widget can be obtained through the named values in CocoStudio.
Sets the widget’s tag, so the widget can be obtained through the tag values in CocoStudio.
Sets the widget’s rotation property value to rotate clockwise.
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.
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.
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.
Sets the widget’s rendering order. Smaller values are first rendering, but may be rendered after coverage.
Sets the opacity of the background color，ranging from 0-255, 0 for transparent, 255 for the opaque option.
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.
Open the percentage mode of widget 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）.
- 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.