カメラがスプライト画像を追従している。

How to keep 2D image facing the main camera with PlayMaker

In this article, I will show you how to implement a gimmick to keep the 2D image in a scene facing the Player camera (i.e. the main camera) with PlayMaker.

This game effect is called ‘Billboard’.

2D画像がメインカメラの方向を追従している。

The 2D image is following the main camera

Preparation

Set up Unity

Following the article below, install Unity and create a project.

Buy PlayMaker

Following the article below, buy and import PlayMaker.

Prepare 2D image to import

Prepare a 2D image you want to import.

In this article, I use the image of a planet ‘Planet.png’.

Import 2D image to Unity

Create the ‘Sprite’ folder in a place.

This time, we create it under ‘Assets/STYLY_Examples/SpritesLookAtCamera’.

"Sprites"とリネームしたフォルダを作成する。

Create a folder and rename it ‘Sprites’

 

Drag and drop the image data from Explore into the ‘Sprites’ folder to import it to Unity.

Unityに画像をドラッグ&ドロップする

Drag and drop the image into Unity

Click the image icon and find the ‘Texture Type’ field in the Inspector. Set ‘Texture Type’ to ‘Sprite (2D and UI)’.

 
TextureTypeを"Sprite (2D and UI)"に変更。

Change TextureType

Drag and drop the Sprite created above from the ‘Sprites’ folder into the Scene or the Hierarchy window to display it on the game screen.

シーンに画像をドラッグ&ドロップする

Drag and drop the image into the Scene

It now completed the preparation to import the image to the Scene.

Preparation to control 2D image with PlayMaker

Now, we are going to implement the function with PlayMaker.

Use the ‘PlayMakerEditor’ window to implement a function with PlayMaker.

If it’s not displayed in Unity, select ‘PlayMaker > PlayMaker Editor’ in the top menu to display it.PlayMaker Editorを表示する。

Display ‘PlayMaker Editor’

 

Right-click on PlayMakerEditor with the GameObject selected in the Scene or the Hierarchy folder.

Then, it brings up the ‘Add FSM’ command, so click it.

右クリックでPlayMakerEditorにStateを追加

Right-click and add a State to PlayMakerEditor

It displays the ‘玩’ icon at the GameObject in the Scene and the Hierarchy window.

GameObjectにPlayMakerがアタッチされると”玩”アイコンが出現

The ‘玩’ icons appear when PlayMaker is attached to the GameObject.

It now completed the preparation to implement the gimmick with PlayMaker.

Get the ‘MainCamera’ GameObject

In the PlayMakerEditor, get the GameObject of the MainCamera (Note that the MainCamera defines the player’s view in STYLY).

Rename the ‘State 1’ State, which is connected from ‘START’ by the arrow, to ‘LookAtCamera’.

Stateをリネームし、ActionBrowserを開く

Rename the State and open Action Browser

Select the ‘State’ tab on the right and click the ‘Action Browser’ button at the bottom of the window.

Then, it brings up the list of Actions, so search for ‘Get Main Camera’.

Click ‘Add Action To State’ to add the State.

ActionBrowserで実装したい機能(GetMainCamera)を探す

Find the function you want to implement (‘GetMainCamera’) by using ActionBrowser.

Now ‘MainCamera’ is displayed on the State tab. It means you have acquired the GameObject of the MainCamera.

You can store this acquired ‘MainCamera’ GameObject in a variable by using ‘Store Game Object’.

Click the ‘Store Game Object’ dropdown and select ‘New Variable…’. Then, enter ‘MainCamera’ in the textbox.

取得したMainCameraのゲームオブジェクトを変数に格納する。

Store the acquired ‘MainCamera’ GameObject in the variable

Now the ‘MainCamera’ GameObject has been stored in the ‘MainCamera’ variable.

You can also check what is in the variable, on the ‘Variable’ tab.

 

Implement the function to make the image face MainCamera

MainCamera has been acquired, so now we implement the gimmick to make the Z-axis of the image keep pointing to Maincamera.

Open ActionBrowser, find ‘LookAt’ and click it.

ActionBrowserで実装したい機能(Look At)を探す

Find the function you want to implement (‘Look At’) by using ActionBrowser

Set the ‘MainCamera’ created earlier for ‘TargetObject’ on the State tab.

Click the double-line button on the right to select a variable from the dropdown. Then, click ‘MainCamera’.

LookAtを使ってメインカメラを追従させる

Make MainCamera follow by using ‘LookAt’

If you check the ‘Keep Vertical’ box here, it will follow only the lateral motion of the camera without chasing the vertical motion.

If check the ‘Draw Debug Line’ box, a line will appear to show how the Z-axis of the image is following the MainCamera when playing the game (The default line colour is yellow).

"Keep Vertical" と "Draw Debug line"に任意でチェックを入れる

Check ‘Keep Vertical’ and/or ‘Draw Debug line’ on demand

 

Flip 2D image horizontally

However, the displayed image is now flipped horizontally as the Z-axis follows the MainCamera.

このままだと画像が反転している

In this state, the displayed image is flipped.

Click the GameObject of the image and check the ‘Flip X’ box in the ‘Sprite Renderer’ component on the Inspector tab.

画像のInspectorのFlip "X"にチェックを入れて左右反転する

Flip the image horizontally by checking ‘Flip X’ in the Inspector of the image.

It corrected the orientation of the image.

Convert into Prefab

The implementation has been finished, so let’s convert it into a Prefab to upload to STYLY.

Create a folder to store the Prefab in.

This time, I created the ‘Prefabs’ folder under ‘Assets/STYLY_Examples’.

In the Inspector, click the GameObjected with the gimmick implemented and then, just drag and drop it into the Prefabs folder.

It creates the Prefab with the gimmick implemented by PlayMaker.

ドラッグ&ドロップでPrefab化する

Drag and drop it to convert into Prefab

Upload to STYLY

Following the article below, upload the Prefab from Unity to STYLY.

 

That is all. Congratulations.

If you implement this gimmick on multiple images, the landscape changes according to where you stand. So you would find it interesting. I really recommend trying it.