# 2D Node Transformations

#### <a class="anchor" id="bkmrk--192"></a>2D Node Manipulation Example

To illustrate basic node transformation operations, the *NodeManipulationWidget\_2D* and the *DisplayPositionWidget2D* part of the Tutorial Widgets cand be used. An usage example for *NodeManipulationWidget\_2D* can be seen in **NodeManipulationSolution\_2D** solution provided in the content folder of *cgi\_studio\_player*.

**Please consider:**

<div class="contents" id="bkmrk-a-node2dtotransform-"><div class="contents"><div class="textblock">- A *Node2DToTransform* on which the following transformations are made has to be selected in the widget.
- Only if the widget is *enabled* (this property is also derived from a base class), the setter methods of the widget properties will take effect.
- If a widget property setter changes a node property of the associated node, the visual effect can be seen, but note that the static node properties maintained by SceneComposer are not changed accordingly!
- Widget dynamics are never reflected to static scene structure. It is recommended to use SceneComposer only for property configuration and dynamics only in the Player.

</div></div></div>#### <a class="anchor" id="bkmrk--193"></a>Translations

Once the NodeManipulationWidget\_2D is linked with a node from the static scene tree and enabled, the position coordinates can be set in the Player for this property to change the position.

```
            // Set node position
            m_node->SetPosition(m_position);    // set absolute node position
            // End Set node position
```

```
            // Translate node
            m_node->Translate(m_translate);     // translate actual node position
            // End Translate node
```

<div class="contents" id="bkmrk-candera%3A%3Atransformab"><div class="contents"><div class="textblock"><dl class="note"><dd><p class="callout info">[Candera::Transformable2D::SetPosition](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_transformable2_d.html#a74becbea72134b186c14f5d3bf38f749) sets the absolute position of a node compared to [Candera::Transformable2D::Translate](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_transformable2_d.html#a9a4ed57cd39a872fcb4cfc0f9696ecf1), which adds the given vector to the current position. So setting the position first and then translating the node gives a different behavior than vice versa.</p>

</dd></dl></div></div></div>#### <a class="anchor" id="bkmrk--194"></a>Rotations

Similar to translation, rotation can also be applied via <span style="color: rgb(230, 126, 35);">[Candera::Transformable2D::Rotate](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_transformable2_d.html#ad41ec326d27717b061d3aec22a8ff628)</span> or <span style="color: rgb(230, 126, 35);">[Candera::Transformable2D::SetRotation](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_transformable2_d.html#a626aad8263416e87532dd2ffc6c3017f).</span>

```
            // Rotate node
            m_node->Rotate(m_rotate);
            // End Rotate node
```

#### <a class="anchor" id="bkmrk--195"></a>Scaling

Again there is also a<span style="color: rgb(230, 126, 35);"> [Candera::Transformable2D::Scale](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_transformable2_d.html#a83ec28ede49ce70093d2a6650b3adf89)</span> and <span style="color: rgb(230, 126, 35);">[Candera::Transformable::SetScale](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_transformable.html#a750dce59a7a54ab4f28dd3763b879dde) </span>method.

```
            // Scale node
            m_node->Scale(m_scale);
            // End Scale node
```

#### <a class="anchor" id="bkmrk--196"></a>Pivot Point

It is possible to change your pivot point with the<span style="color: rgb(230, 126, 35);"> [Candera::Transformable2D::TranslatePivotPoint](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_transformable2_d.html#a5cf36336c24d9468e68d0a69bc932ec1)</span> (or <span style="color: rgb(230, 126, 35);">[Candera::Transformable2D::SetPivotPoint](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_transformable2_d.html#a99ea052896f7f67537676a574631fffa)</span>) method. The pivot point can be used to define e.g. the rotation point that the node should rotate around. It affects the scaling too.

#### <a class="anchor" id="bkmrk--197"></a>How to get the screen space coordinates of a node

With the DisplayPositionWidget2D you can retrieve the screen coordinates of an associated node. Please consider that a node and a camera have to be selected in the widget. In the solution the widget is disabled by default, so if you want to see an output of your display position, you need to enable it. To get the screen space coordinates of an associated node, you simply need to add the render target position of your node to the window position.

<div class="contents" id="bkmrk-first-you-need-the-w-0"><div class="textblock">- First you need the world position of your node. With this position you can retrieve the viewport position, which you need for retrieving the render target position. ```
            Vector2 worldPosition = node->GetWorldPosition();
            Vector2 viewportPos = Math2D::TransformSceneToViewport(*camera, worldPosition);
            Vector2 renderTargetPos = Math2D::TransformViewportToRenderTarget(*camera, viewportPos);
    ```
- Now you need the window. ```
            Window* w = camera->GetRenderTarget()->GetGraphicDeviceUnit()->ToWindow();
            if (w != 0) {
                Vector2 delta(static_cast<Float>(w->GetX()), static_cast<Float>(w->GetY()));
    ```
- With these two <span style="color: rgb(230, 126, 35);">[Candera::Vector2](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_vector2.html "The default Vector2 class.")</span> you can calculate the screen space <span style="color: rgb(230, 126, 35);">[Candera::Vector2](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_vector2.html "The default Vector2 class.")</span> of your node. ```
                Vector2 displayPos = delta + renderTargetPos;
    ```
- displayPos now contains the X and Y screen space coordinates of the selected node.

</div></div>