Updated gui pie node manual. minified a bunch of images.

docs/en/manuals/gui-pie.md

@@ -5,31 +5,52 @@ brief: This manual explains how to use pie nodes in Defold GUI scenes.
 
 # GUI pie nodes
 
-Pie nodes can be used to create circular or ellipsoid objects. In its simplest form, a pie node is simply a circle or ellipse inscribed in the node bounding box. If the width and height are identical, the circle's diameter will be that value. If the width and height differ, the node will instead be an ellipse with the node width being the horizontal extent of the ellipse and the height being the vertical extent. The texture set for the node is applied straight, with the corners of the texture correlating to the corners of the node bounding box.
+Pie nodes are used to create circular or ellipsoid objects ranging from plain circles to pies and square donut shapes.
 
-![Pie node](images/gui/gui_pie_create.png)
+## Creating a pie node
 
-Pie nodes have a set of properties that make it possible to use them to create a wide range of shapes. All of these properties can be changed programmatically (see [GUI API documentation](/ref/gui) for details) and some can be animated.
+<kbd>Right click</kbd> the *Nodes* section in the *Outline* and select <kbd>Add ▸ Pie</kbd>. The new pie node is selected and you can modify its properties.
 
-![Pie properties](images/gui/gui_pie_properties.png)
+![Create pie node](images/gui-pie/create.png){srcset="images/gui-pie/[email protected] 2x"}
 
-Inner radius
+The following properties are unique to pie nodes:
+
+Inner Radius
 : The inner radius of the node, expressed along the X axis.
 
-Outer bounds
-: Extend the node to the outer radius (`Ellipse`) or to the node's bounding box (`Rectangle`).
+Outer Bounds
+: The shape of the outer bounds of the node. 
+  
+  - `Ellipse` will extend the node to the outer radius.
+  - `Rectangle` will extend the node to the node's bounding box.
 
-Perimeter vertices
+Perimeter Vertices
 : The number of segments that will be used to build the shape, expressed as the number of vertices required to fully circumscribe the 360 degree perimeter of the node.
 
-Pie fill angle
+Pie Fill Angle
 : How much of the pie should be filled. Expressed as a counter-clockwise angle starting from the right.
 
-![Radius and angle](images/gui/gui_pie_radius_angle.png)
+![Properties](images/gui/properties.png){srcset="images/gui-pie/[email protected] 2x"}
+
+If you set a texture on the node, the texture image is applied flat, with the corners of the texture correlating to the corners of the node bounding box. 
+
+## Modify pie nodes at runtime
+
+Pie nodes respond to any generic node manipulation functions for setting size, pivot, color and so forth. A few text node only functions and properties exist:
+
+```lua
+local pienode = gui.get_node("my_pie_node")
 
-With the *Outer bounds* option set to `Rectangle` the shape extends to the node bounding box. Together with an *Inner radius* and/or a *Pie fill angle*, complex shapes can be created.
+-- get the outer bounds
+local fill_angle = gui.get_fill_angle(pienode)
 
-![Rectangle bounds](images/gui/gui_pie_rectangular.png)
+-- increase perimeter vertices
+local vertices = gui.get_perimeter_vertices(pienode)
+gui.set_perimeter_vertices(pienode, vertices + 1)
 
-![Rectangle bounds and angle](images/gui/gui_pie_rectangular_angle.png)
+-- change outer bounds
+gui.set_outer_bounds(pienode, gui.PIEBOUNDS_RECTANGLE)
 
+-- animate the inner radius
+gui.animate(pienode, "inner_radius", 100, gui.EASING_INOUTSINE, 2, 0, nil, gui.PLAYBACK_LOOP_PINGPONG)
+```