I will explain the workflow to create an electric bulletin board in Unity and upload it to STYLY.

※ you can access the sample project at https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/Denkou

Environment

• Unity**2017.4.0f1**  (https://unity3d.com/jp/unity/qa/lts-releases)
• STYLY Plugin (https://styly.cc/download/?lang=ja)

 

Place UI in the space

Firstly, I explain how to make a UI floating in 3D space.

 

 

Create a Canvas

Create a Canvas at first.

Rename the created Canvas ‘Denkou‘.

 

Place UI in the space

Set the ‘RenderMode’ of the Canvas to ‘WorldSpace’.

 

 

The UI is attached on the screen by default.

However, by setting Canvas’s RenderMode to ‘Worldspace’, the UI is placed in the middle of the space.

 

Adjust the size of UI.

As the size is too large, set the scale factor of ‘Denkou’ to (X=0.01, Y=0.01, Z=0.01).

 

Adjust the position of UI

Set both Pos-X and Pos-Y to zero.

If their value is not zero, there might be a gap between the actual position and the displayed position when the UI is uploaded to STYLY.

Create UI Image

 

Set the size of UI Image

Set the width and height of the UI Image to 500 and 100 respectively.

 

Set the position of UI Image

Set the Pos-X and Pos-Y of the UI Image to zero to place at the origin.

If their value is not zero, there might be a gap between the actual position and the displayed position when the UI is uploaded to STYLY.

Colour UI Image black

Colour the UI Image black.

 

Firstly, click the colour bar of the UI Image.

 

It brings up the colour-setting window. Select black.

 

Then, the UI will look as shown below.

 

 

Create UI Text

Create a UI Text and put it in the UI Image.

 

Set the colour of UI Text

Color the UI Text whitish-yellow.

 

Make UI Text fit to the length of words

Add ‘ContentSizeFitter’ and set ‘Vertical/Horizontal’ to ‘Preferred Size’.

 

With the default setting, the words going out of the range aren’t displayed.

But, by adding ‘ContentSizeFitter’, the text box is adapted to the length of the sentences.

 

Make UI Text left-aligned

For the UI Text,  set its Anker to ‘Middle-Left’, and ‘Pivot X’ to 0.

With regard to the position, set both Pos-X and Pos-Y to zero.

 

By setting Anchor and Pivot this way, the UI text is set to left-aligned (The text is aligned along the left edge).

 

Scale up UI Text

As the UI Text is too small,  set the scale factor to (X=4, Y=4, Z=4) to scale it up by a factor of four.

 

Type a sentence

Type a sentence you want to display on the UI Text. For example:

・Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch

Anything is OK!

 

Set the font

*Note by translator: Ignore this section assuming your default language is English. For your information, the original article was written in Japanese.

The font of the UI text is set to Arial at the moment. Change it to another font.

 

I used a free font, NotoSansCJKjp-Regular, this time.

 

Why do you need to change the font?

*Note by translator: Ignore this section assuming your default language is English. For your information, the original article was written in Japanese.

Since the default font data in Unity doesn’t support Japanese.

So you need to prepare the font data that supports Japanese.

 

Add a motion to the UI text

I explain how to add a motion to the UI text.

 

Open the Animation window

Select ‘Windows > Animation’ in the top menu.

 

It brings up the Animation window.

 

Create the Animation data

With ‘Denkou’ selected in the Hierarchy window, press the Create button in the Animation window.

 

It displays the ‘Create new Animation’ window. Name it Denkou and save it.

 

The data related to the animation has been created.

 

Activate the record mode

Press the red button in the Animation window to start the record mode.

 

When recording, the timeline bar turns red.

Record the position of UI Text

Add an animation so that the text moves to the left.

 

In the recording mode, Right-click the ‘Pos X’ label of the UI text and select ‘Add Key’.

 

When you clicked ‘AddKey’, a key is added to the Animation window.

Move the UI text by animation

The setting of animation

Set ‘Samples’ to 600 and ‘Pos X’ to -10000.

It moves the UI text from PosX=0 to PoX=-10000 in 600 frames.

 

Check the animation

Press the Play button to check the animation.

Straighten out the animation curve

The default animation curve is not linear

When adding a key to the animation, by default, the animation curve is not linear.

I want to make it linear this time.

 

Make the animation curve linear

With the two animation keys selected, select BothTangent > Linear.

 

Now the curve became linear.

 

Clip the UI text

Finally, clip the UI text to hide the text outside the blackboard.

We clip the text by the UI image.

 

 

 

Select the UI Image and add Mask component

Click the UI Image to select. Then, click the ‘Add Component’ button.

 

Search and select ‘Mask’.

 

When you add a Mask component, it clips the UI text so that the text outside the blackboard is hidden.

Play the animation. It completes your electric bulletin board.

 

 

Adjust the animation: Make the text come from the edge of the board.

At this state, when staring the animation loop, the text appears at once ‘unnaturally’ since it stars at X=0.

 

Adust the animation so that the text comes in from the edge of the blackboard.

 

Open the Animation window.

Click Windows > Animation in the top menu.

Modify the x value

With the playhead (a white vertical line) moved to 0:00, Set x to 1000.

 

It’s finished!

Play the animation. You now see the text coming in from the edge of the blackboard.

Upload it to STYLY

I explain how to the electric bulletin board created to STYLY.

 

Change the Layer for ‘Denkou’

As Denckou’s Layer is ‘UI’ at the moment. Change it to ‘Default’.

 

Click the Layer drop-down list.

 

Select ‘Default’.

 

It brings up a window. Press the ‘Yes Change Children’ button.

When uploading to STYLY, you need to change the layer of the assets to ‘Default’.

Make Prefab from UI

Drag ‘Denkou’ onto the Project window.

It creates a Prefab.

 

Upload Prefab to STYLY

Right-click the Prefab and select ‘STYLY > Upload Prefab to STYLY’ to start uploading.

For large data like font data and etc., it takes a long time to upload. Please wait with patience.

When the upload is completed, a window pops up with the message ‘Upload succeeded’ as shown below.

 

Check the data uploaded

Access to styly and open STYLY Editor.

Select ‘Asset > 3D Models > My Models’. Now you can find ‘Denkou’ uploaded earlier in My Models.

 

You can place ‘Denkou’ by selecting it.

You can access the sample project at https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/Denkou