article

AndresGenvid avatar image
AndresGenvid posted

02. Unreal Blueprint Clock DataStreams guide   

Unreal DataStreams Guide

This guide was written as a quick reference step by step guide for setting up a simple Unreal datastream. For more in depth information on each step please check the documentation at https://www.genvidtech.com/

Download Clock Assets

  1. Download the folder containing the assets for this guide

  2. Import “clock_face” as a texture after creating your project (or you can drag and drop the clock folder into your content folder in explorer to get a pre-built clock)

Clock Setup

  1. If you dragged and dropped the clock folder into your content folder skip this section

  2. Create an object of type “Sprite” (Paper2d->Sprite)

    • Set the source texture as “clock_face”

  3. Create a material and set it’s color to be black

  4. Create a blueprint actor. Attach the following components:

    • A scene component attached to the default scene root named “Clock”

    • A scene component attached to “Clock” named “HourHand”

    • A cube component attached to “HourHand” named “HourHandCube”

      • Set the location to 75, 0, 0

      • Set the scale to 1.5, 1, .15

      • Set the material to the material created above

    • A scene component attached to “Clock” named “MinuteHand”

    • A cube component attached to “MinuteHand” named “MinuteHandCube”

      • Set the location to 0, 0, 100

      • Set the scale to .1, 1, 2

      • Set the material to the material created above

    • A scene component attached to “Clock” named “SecondHand”

      • Set the rotation to 0, 45, 0

    • A cube component attached to “SecondHand” named “SecondHandCube”

      • Set the location to 50, 0, 0

      • Set the scale to 1, 1, .075

      • Set the material to the material created above

    • A paper sprite component attached to “Clock” named “Face”

      • Set the Source Sprite property to the sprite created above


  5. 1668112545491.pngFinished component list for the clock



  6. Create a function called “GetAngle”. This will be used to calculate an angle from a hour, minute, or second

    • It should have 3 float inputs: Min, Max, and Value

    • It should have 1 float output: Angle

    • Call “Normalize to range” passing in the value, min, and max inputs

    • Call “Lerp”. A is 360, B is 0, and Alpha is the value returned by “normalize to range”

    • Return the value returned by Lerp


  7. 1668111716616.pngGetAngle function




  8. Create 3 variables of type float on the blueprint. Hour, Minute and Second.

  9. On tick we want to set the hour value

    • The hour value should be in a 0 - 12 hour format allowing for decimals along the way. This value should then be passed into GetAngle. See the image below

  10. 1668112464778.pngTick function for the Clock




    • The Minute value should be between in a 0 - 60 format allowing for decimals along the way. This value should then be passed into Get Angle. See the image below


  11. 1668111858101.pngTick function for the clock (continuation from above)


    • The Second value should be between in a 0 - 60 format allowing for decimals along the way. This value should then be passed into Get Angle. See the image below


  12. 1668111938693.pngTick function for the clock (continuation from above)



    • Set the Pitch of the “HourHand”, “MinuteHand”, and “SecondHand” using “SetRelativeRotation” and the values calculated for each. See the below image

      • Note 60 will have to be added to the hour angle, and 90 will have to be added to the second hand


  13. 1668112047808.pngTick function for the clock (continuation from above)



    • Add the Clock blueprint actor to the level in view of the camera. Confirm it is working correctly by hitting play


1668112222189.pngFinished clock in the level



Blueprint Implementation

  1. On the GenvidStream blueprint create the following function


  2. 1668112263029.pngGenvidStream function




    • We form a JSON string inserting the time now when appropriate

      • The final format should be: {“hour”:”<hour>”,”minute”:”<minute>”,”second”:”<second>”}

  3. On BeginPlay for the GenvidStream blueprint add the following blueprint code


  4. 1668112314523.pngBeginPlay of GenvidStream





  5. 1668112352698.pngCustom event on GenvidStream



    • We make a GenvidStream named “ClockTime” with framerate 30 and assign it to the first element in the array “Streams” that already exists on GenvidStream objects

    • We bind the New GenvidStream to a new custom event. This custom event calls the function created above and submits the returned string as a stream


unreal engineunreal
10 |600

Up to 8 attachments (including images) can be used with a maximum of 1.0 MiB each and 10.0 MiB total.

Article

Contributors

AndresGenvid contributed to this article