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’.


The 2D image is following the main camera


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’.


Create a folder and rename it ‘Sprites’


Drag and drop the image data from Explore into the ‘Sprites’ folder to import it to 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.


Right-click and add a State to PlayMakerEditor

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


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’.


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.


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.


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’.


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.


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.