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’.
- 1 Preparation
- 2 Import 2D image to Unity
- 3 Preparation to control 2D image with PlayMaker
- 4 Get the ‘MainCamera’ GameObject
- 5 Implement the function to make the image face MainCamera
- 6 Flip 2D image horizontally
- 7 Convert into Prefab
- 8 Upload to STYLY
Set up Unity
Following the article below, install Unity and create a project.
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’.
Drag and drop the image data from Explore into the ‘Sprites’ folder to import it to Unity.
Click the image icon and find the ‘Texture Type’ field in the Inspector. Set ‘Texture Type’ to ‘Sprite (2D and UI)’.
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.
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.
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.
It displays the ‘玩’ icon at the GameObject in the Scene and the Hierarchy window.
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’.
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.
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.
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.
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’.
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).
Flip 2D image horizontally
However, the displayed image is now flipped horizontally as the Z-axis follows the MainCamera.
Click the GameObject of the image and check the ‘Flip X’ box in the ‘Sprite Renderer’ component on the Inspector tab.
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.
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.