Developers Manual > Cocos Studio > UI Editor > UI Editor Workspace > UI Editor Rendering Panel

UI Editor Rendering Panel

Overview

The Rendering panel provides a rendering widget to support real-time previewing functionality.

Functionality

Select


Use your mouse to select the entire widget, then copy or delete the widget.

Adjust View


Details:
* At the corners or the 1,2,4, or 5 points of reference as labeled above, you can use your mouse to adjust the size of the widget. You can also scale the widget by simultaneously pressing the Shift key and clicking on the widget to modify the widget to be uniform to scale.
* By selecting the point of reference as shown in the graphic as point 3, you can rotate the widget.
* Note that point 6 is an anchor point.

Context Menu

Add Object


Add one you selected widget to the render panel.
note:
When you select a widget and add a widget through the context menu, CocoStudio will add a widget to your currently selected widget. If you don’t select a widget before you launching the context menu to add a widget, CocoStudio will add the widget as a root widget’s sub-widget.

Layout Alignment

Center Alignment => Aligns the selected widgets to the center.
Left Alignment => Aligns the selected widgets to the left.
Right Alignment => Aligns the selected widgets to the right.
Top Alignment => Aligns the selected widgets to the top.
Bottom Alignment => Aligns the selected widgets to the bottom.
Horizontal Alignment => Aligns the selected widgets horizontally.
Vertical Alignment => Aligns the selected widgets vertically.
Original Alignment => Reverts the selected widgets back to their original alignments.

Delete Object


Deletes the selected widgets.
Note:
* If no widget is selected, then the menu item will be disabled.
* Supports multiple selection.

Copy

Makes a copy of the selected widgets.(If no widget is selected, then the menu item will be disabled.)

Paste


Pastes the pre-copied widgets.(If no widgets were copied before, then the menu item will also be disabled.)

Edit Animation


Edits the animation of the selected widget.(Switch to the animation mode first to edit the animation of the widget.)

3-2-2-img-06.png (4.3 kB) hanrea@qq.com, 2013-12-02 09:07

3-2-2-img-07.png (4 kB) hanrea@qq.com, 2013-12-02 09:07

3-2-2-img-08.png (4.3 kB) hanrea@qq.com, 2013-12-02 09:07

3-2-2-img-01.png (49.3 kB) hanrea@qq.com, 2013-12-02 09:07

3-2-2-img-02.png (72.8 kB) hanrea@qq.com, 2013-12-02 09:07

3-2-2-img-03.png (10.6 kB) hanrea@qq.com, 2013-12-02 09:07

3-2-2-img-04.png (31.8 kB) hanrea@qq.com, 2013-12-02 09:07

3-2-2-img-05.png (4.6 kB) hanrea@qq.com, 2013-12-02 09:07

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