Explorar el Código

More work on user-facing manuals

BearishSun hace 9 años
padre
commit
55f8dfb02e

+ 68 - 0
Documentation/Manuals/Native/User/guiElements.md

@@ -0,0 +1,68 @@
+GUI elements									{#guiElements}
+===============
+
+A GUI element is a basic primitive GUI is constructed out of. They can be text, buttons, input boxes, images, scroll areas and more. We'll explain what the individual GUI element types are later, but initially we'll focus on functionality common to all GUI elements.
+
+# Displaying a GUI element
+In order to display a GUI element we must first create it. All GUI elements are created using a static *create* method.
+
+~~~~~~~~~~~~~{.cpp}
+// GUILabel is a type of GUI element that displays the provided text on screen
+GUILabel* label = GUILabel::create(HString(L"Hello!"));
+~~~~~~~~~~~~~
+
+But just creating the element is not enough. We must also register it with our **GUIWidget**. To do that we must first retrieve the primary @ref bs::GUIPanel "GUIPanel" from the widget. **GUIPanel** serves as an element container, and by default every widget has one. Use @ref bs::CGUIWidget::getPanel() "CGUIWidget::getPanel()" to retrieve the panel.
+
+~~~~~~~~~~~~~{.cpp}
+GUIPanel* mainPanel = gui->getPanel();
+~~~~~~~~~~~~~
+
+**GUIPanel** is a special type of a GUI element called a "layout". We'll discuss layouts in more detail in the next chapter, but for now all you need to know is that they are element containers you can add and remove other GUI elements to/from.
+
+To add an element to the panel use @ref bs::GUIPanel::addElement "GUIPanel::addElement".
+
+~~~~~~~~~~~~~{.cpp}
+mainPanel->addElement(label);
+~~~~~~~~~~~~~
+
+At this point our GUI element will be displayed.
+
+@ref TODO_IMAGE
+
+# Customizing GUI elements
+## Changing position
+// TODO
+
+## Changing size
+// TODO
+
+## Changing color
+// TODO
+
+## Hiding
+// TODO (Both active and visible)
+
+# GUI element types
+## Label
+// TODO
+
+## Button
+// TODO
+
+## Toggle
+// TODO
+
+## Input box
+// TODO
+
+## List box
+// TODO
+
+## Texture
+// TODO
+
+## Slider
+// TODO
+
+## Scroll area
+// TODO

+ 80 - 0
Documentation/Manuals/Native/User/guiLayouts.md

@@ -0,0 +1,80 @@
+GUI layouts									{#guiLayouts}
+===============
+
+In previous chapter we talked about how **GUIPanel** is a special type of a GUI element called a "layout". Layouts serve as containers for GUI elements (including other layouts), and they may also control how are elements within them positioned and sized.
+
+There are three types of layouts:
+ - @ref bs::GUIPanel "GUIPanel" - Does no automatic positioning and sizing of child GUI elements, instead user can set positions and sizes manually, as we have already seen. Each panel can be placed at a different depth, allowing GUI elements to overlay eachother.
+ - @ref bs::GUILayoutX "GUILayoutX" - Automatically positions and sizes child GUI elements horizontally one next to each other, left to right. User is able to request minimum/maximum allowed size, but is otherwise unable to manually position or exactly size the element.
+ - @ref bs::GUILayoutY "GUILayoutY" - Same as **GUILayoutX** only elements are positioned vertically, top to bottom.
+
+You will find that vertical and horizontal layouts come in handy when you need to design GUI that needs to scale across various screen sizes/resolutions. By adding your GUI elements to such layouts instead of manually positioning them, ensures the GUI system can always keep them at optimal position and size, regardless of the available screen area.
+
+# Adding/removing elements
+In the previous chapter we have already seen how to add a GUI element to a layout (a panel, more specifically). Here is the entire interface for dealing with element addition/removal, shared by all layout types:
+ - @ref bs::GUILayout::addNewElement<Type, Args...> "GUILayout::addNewElement<T>" - Adds a GUI element of the specified type to the end of the layout's element list.
+ - @ref bs::GUILayout::insertNewElement<Type, Args...> "GUILayout::insertNewElement<T>" - Inserts a GUI elements of the specified type at a specific position in the layout's element list.
+ - @ref bs::GUILayout::removeElement "GUILayout::removeElement" - Removes a GUI element from the layout's element list.
+
+Here's an example of retrieving the primary GUI panel and adding some elements to it: 
+ 
+~~~~~~~~~~~~~{.cpp}
+// Assuming "gui" is a GUI widget component
+GUIPanel* mainPanel = gui->getPanel();
+
+// Add a horizontal layout that will automatically position child elements
+GUILayoutX layout = mainPanel->addNewElement<GUILayoutX>();
+
+// Add a text label, and a button to the right of it
+layout->addNewElement<GUILabel>(HString(L"This is a button: "));
+layout->addNewElement<GUIButton>(HString(L"Click me"));
+~~~~~~~~~~~~~ 
+
+GUI elements can also be created separately and then added to layouts later using these methods:
+ - @ref bs::GUILayout::addElement "GUILayout::addElement" - Adds an existing GUI element at the end of the layout's element list.
+ - @ref bs::GUILayout::insertElement "GUILayout::insertElement" - Inserts an existing GUI elements at a specific position in the layout's element list.
+
+Same example as above, only written differently:
+ 
+~~~~~~~~~~~~~{.cpp}
+// Assuming "gui" is a GUI widget component
+GUIPanel* mainPanel = gui->getPanel();
+
+// Add a horizontal layout that will automatically position child elements
+GUILayoutX layout = GUILayoutX::create();
+mainPanel->addElement(layout);
+
+// Add a text label, and a button to the right of it
+GUILabel* label = GUILabel::create(HString(L"This is a button: "));
+GUIButton* button = GUIButton::create(HString(L"Click me"));
+
+layout->addNewElement(label);
+layout->addNewElement(button);
+~~~~~~~~~~~~~  
+
+The matter which style you use is personal preference.
+
+# Horizontal layout
+// TODO
+
+@ref TODO_IMAGE
+
+# Vertical layout
+// TODO
+
+@ref TODO_IMAGE
+
+# Customizing
+## Styles
+// TODO - GUIOptions, mention styles
+
+## Spaces
+// TODO
+
+# Compound layouts
+// TODO
+
+@ref TODO_IMAGE
+
+# Panels
+// TODO - Depth

+ 83 - 0
Documentation/Manuals/Native/User/guiSetup.md

@@ -0,0 +1,83 @@
+GUI setup									{#guiSetup}
+===============
+
+All GUI elements in Banshee are handled by a @ref bs::CGUIWidget "GUIWidget" component. Each such component must have an attached **Camera** component, which determines where will the rendered GUI elements be output. 
+
+The camera is created in the same way as we shown before, and you can in-fact use the same camera you use for normal scene rendering. GUI elements will not be affected by camera's position, orientation or projection properties - they might however be affected by the size of the camera's render target.
+
+~~~~~~~~~~~~~{.cpp}
+SPtr<RenderWindow> primaryWindow = gApplication().getPrimaryWindow();
+
+HSceneObject cameraSO = SceneObject::create("Camera");
+HCamera camera = cameraSO->addComponent<CCamera>(primaryWindow);
+~~~~~~~~~~~~~
+
+And we create a **GUIWidget** the same as with any other component.
+
+~~~~~~~~~~~~~{.cpp}
+HSceneObject guiSO = SceneObject::create("GUI");
+HGUIWidget gui = guiSO->addComponent<CGUIWidget>(camera);
+~~~~~~~~~~~~~
+
+You can now use the GUI widget to add GUI elements to it
+~~~~~~~~~~~~~{.cpp}
+// Shows the text "Hello!" on the screen
+GUIPanel* mainPanel = gui->getPanel();
+mainPanel->addElement(GUILabel::create(HString(L"Hello!")));
+
+// ... add more elements ...
+~~~~~~~~~~~~~
+
+Don't worry about what **GUIPanel** or **GUILabel** mean at this time, we'll talk about GUI panels, elements and layouts in later chapters. 
+
+# Using a separate GUI camera
+In the example above we have asssumed you will use the same camera for GUI as you use for scene rendering. However sometimes it is useful to have a separate camera for GUI, or even multiple separate cameras. In such case camera creation is mostly the same, but with some additional options that need to be enabled. 
+
+Lets see how to create a camera that can be used for GUI rendering along with scene rendering. Initial creation of the camera is identical, we just choose a render target:
+
+~~~~~~~~~~~~~{.cpp}
+SPtr<RenderWindow> primaryWindow = gApplication().getPrimaryWindow();
+
+HSceneObject guiCameraSO = SceneObject::create("GUI camera");
+HCamera guiCamera = guiCameraSO->addComponent<CCamera>(primaryWindow);
+~~~~~~~~~~~~~
+
+In order to prevent the camera from rendering scene objects, we enable the @ref bs::CameraFlag::Overlay "Overlay" option.
+~~~~~~~~~~~~~{.cpp}
+guiCamera->setFlag(CameraFlag::Overlay, true);
+~~~~~~~~~~~~~
+
+Now our camera will render just overlay objects (GUI and sprites), and nothing else. 
+
+Next, we need to make sure the camera renders after the main scene camera - if we don't then the scene rendering might render on top of the GUI. Using the @ref bs::CCamera::setPriority "CCamera::setPriority()" method we can control the order in which cameras sharing the same render target are rendered. By default all cameras have a priority of 0, and since we want our GUI camera to render after the scene camera, we set its priority to -1.
+
+~~~~~~~~~~~~~{.cpp}
+guiCamera->setPriority(-1);
+~~~~~~~~~~~~~
+
+And finally, we want to prevent the camera from clearing the render target. By default cameras will set all the pixels in the render target to some default value before they start rendering, every frame. We want our GUI camera to just render on top of anything rendered by the scene camera, so we disable that functionality by retrieving a @ref bs::Viewport "Viewport" from the camera. 
+
+**Viewport** is retrieved by calling @ref bs::CCamera::getViewport "CCamera::getViewport()". It allows you to set how and if the render target is cleared through @ref bs::Viewport::setRequiresClear "Viewport::setRequiresClear()" and @ref bs::Viewport::setClearValues "Viewport::setClearValues()". Clear options can be set separately for color, depth and stencil buffers.
+
+~~~~~~~~~~~~~{.cpp}
+SPtr<Viewport> viewport = guiCamera->getViewport();
+
+// Disable clear for color, depth and stencil buffers
+viewport->setRequiresClear(false, false, false);
+~~~~~~~~~~~~~
+
+> You can also use the viewport to control onto which portion of the render target should the camera render to. By default it will output to the entire render target but you can change the area by calling @ref bs::Viewport::setArea "Viewport::setArea()".
+
+At this point you can use the camera to create a **GUIWidget** and use the GUI as normal.
+
+# Transforming GUI
+
+Once you have set up a **GUIWidget** component, you can transform it using its scene object as normal. This allows you to apply 3D transformations to GUI elements, which can be useful for various interesting effects, including rendering GUI to in-game surfaces (like on a screen of an in-game 3D monitor).
+
+~~~~~~~~~~~~~{.cpp}
+// Rotate 30 degrees around the Z axis
+Quaternion rotate(Vector3::UNIT_Z, Degree(30.0f));
+guiSO->setRotation(rotate);
+~~~~~~~~~~~~~
+
+@ref TODO_IMAGE

+ 4 - 0
Documentation/Manuals/Native/manuals.md

@@ -30,6 +30,10 @@ Manuals									{#manuals}
 - **Input**
  - [Input polling](@ref inputPolling) 
  - [Input events](@ref inputEvents)  
+- **GUI**
+ - [Basic setup](@ref guiSetup)
+ - [Elements](@ref guiElements)
+ - [Layouts](@ref guiLayouts)
  
 # Developer guides
 

+ 2 - 1
Source/BansheeCore/Include/BsCamera.h

@@ -52,7 +52,8 @@ namespace bs
 	{
 		/** 
 		 * This flag is a signal to the renderer that his camera will only render overlays and doesn't require depth   
-		 * buffer or multi-sampled render targets. This can improve performance and memory usage. 
+		 * buffer or multi-sampled render targets. Such cameras will not render any scene objects. This can improve
+		 * performance and memory usage. 
 		 */
 		Overlay = 1,
 		/** 

+ 2 - 2
Source/BansheeEngine/Include/BsGUIPanel.h

@@ -78,13 +78,13 @@ namespace bs
 		 */
 
 		/** @copydoc GUIElementBase::_getType */
-		virtual Type _getType() const override { return GUIElementBase::Type::Panel; }
+		Type _getType() const override { return GUIElementBase::Type::Panel; }
 
 		/**	Calculate optimal sizes of all child layout elements. */
 		void _updateOptimalLayoutSizes() override;
 
 		/** @copydoc GUIElementBase::_calculateLayoutSizeRange */
-		virtual LayoutSizeRange _calculateLayoutSizeRange() const override;
+		LayoutSizeRange _calculateLayoutSizeRange() const override;
 
 		/** @copydoc GUILayout::_getElementAreas */
 		void _getElementAreas(const Rect2I& layoutArea, Rect2I* elementAreas, UINT32 numElements,