Using DOTween with FlowReactor

You are here:
< All Topics
Table of Contents

FlowReactor comes with a very powerful DOTween DOSequence node which allows you to easily and visually create DOTween sequences. In this tutorial we will learn how to create a ui flow, animate ui objects, and learn how we can react to user input.

Scene setup:

First we need to setup our scene.

To follow this tutorial please make sure DOTween is installed and the DOTween FlowReactor addon is enabled.

Download DOTween:
http://dotween.demigiant.com/download.php

Enable DOTween addon:
Tools / FlowReactor / Addons / Enable DOTween addon

  • Lets create a ui button object. Right click in the hierarchy and select: UI -> Button

  • Lets add a simple image object to our newly created canvas. Right click the canvas object and select: UI -> Image

  • Great. Now add a second Button object inside of the newly created image object and set the text name to “Close”. This button will close the image rect again.
    Place the button wherever you want inside of the image object.

  • Now set the image rect size to 0, 0. We will animate the size with DOTween later.
    Also disable the close button object to make sure it is not visible anymore.

  • To make sure FlowReactor can react to button events, we need to add an EventTrigger component to each button. Select both buttons and add the EventTrigger component to it.

Blackboard setup:

Our scene is ready. Now lets start creating our blackboard.

  • Right click in the project view and select Create / FlowReactor / New Blackboard

  • Select the newly created blackboard and add

    • 2x EventTrigger variables,
    • 1x GameObject variable and
    • 1x Rect Transform.
  • Name them like in the image.

Eventboard setup:

For this ui flow we need to listen to the tween complete event, therefore we need to create a new Eventboard.

  • Right click in the project view and select Create / FlowReactor / New Eventboard

  • Add a new event and call it OpenTweenComplete

Graph setup:
  • Right click in the project view and select: Create / FlowReactor / New Graph.

  • Open the newly created graph. Before we start adding new nodes lets assign the blackboard and eventboard first. Simply go to the blackboard tab and drag the blackboard object to it. Do the same for the eventboard.

  • Now to make sure our graph reacts when the user clicks on the button, we have to create two new OnUIEventTrigger nodes for our open and close buttons.

  • select the first OnUIEventTrigger node and go to the node inspector. In the Pointer dropdown select Pointer Click

  • For the uiObject variable we select the blackboard variable. Click on the blackboard button and select the ButtonOpenEventTrigger variable.

    Now do the same for the close button.

DOSequence Open tween:

We can now start with the DOSequence nodes

  • Lets connect the first OnUIEventTrigger node with a DOSequence node.

  • Select the DOSequence node. Go to the node inspector and click on the add button to add a new tween object, select the RectTransform type and connect the variable with the blackboard ImageRect variable.

  • Change the DOScale to DOSizeDelta and set the size to something like 300, 10. Set the duration to 0.2

  • Lets add another tween object with the same configuration as the first one. (RectTransform and DOSizeDelta) Set the size to 300, 200 and duration to 0.2. The second tween object is set to append. This makes sure that it will be animated after the first object has been finished. So we now have a nice “build up” animation.

  • As you can see, by adding multiple tween objects you can easily build tween sequences with different types of animations.

  • As a last step we have to call our OpenTweenComplete event to make sure the close button appears. Simply enable the OnTweenComplete event option and select the event from the dropdown list.

DOSequence Close tween:

Now lets create the close tween animation when the user clicks on the close button

  • First we need to add a SetActive node which disables our close button after the user has clicked on it. 
    Add a SetActive node and connect it to the second OnUIEventTrigger node.

  • Select the SetActive node and connect the ButtonCloseGameObject blackboard variable to it.

  • Add a second DOSequence node and connect it to the SetActive node.

  • Select the DOSequence node and configure the tween animation to RectTransform and DOSizeDelta. For the RectTransform select the ImageRect from the blackboard.
    Set the size delta to 0,0 and duration to 0.2.

Final steps:

We’re pretty much done. Just some final steps:
To make sure our close button object gets active after the open tween is complete we have to add an EventListener node which is connected to a SetActive node.

  • Add an EventListener node and select the OpenTweenComplete event.

  • Add a SetActive node and connect it to the EventListener node. Select the ButtonCloseGameObject from the blackboard and set the active state to true.

  • Now add the graph to an empty game object in the scene.

  • Make sure to configure all blackboard scene overrides. Assign all ui objects to the appropriate fields.

  • You’re done! Hit run and click on the buttons. 🙂

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google