Zoo Cards as Scriptable Objects
Objective: Create cards for each zoo exhibit using scriptable objects.
Create a new panel, naming it Card_Panel, as a child of Canvas. Next create three UI > text objects: Title_txt, Description_txt and Animals_txt. Three UI > images are also required: Background_img, Animal_img and Logo_img. The card will also require a Close_Button. The heirarchy should appear as below with the Background_img at the top and the Close_Button at the bottom.
The process of setting up panels has been previously described and is beyond the scope of this article. When complete, the Card_Panel should look similar to that shown below. The text and image are place holders.
The CardModel is a ScriptableObject, which is not attached to a game object. It is used to hold information about the object, in this case title, description and exhibit strings. In addition, there is one sprite, animalImg.
The CreateAssetMenu allows access to these objects in the editor as shown below. Right clicking on the ScriptableObjects folder reveals a Cards within the menu that adds a New Card CardModel.
Data for each card can now be entered, for example Big_Cats below.
The CardView script is added as a component of the Case_Panel, and uses the UnityEngine.UI namespace. It contains the UpdateCard() method which requires an int ID to define the card displayed, changing the title, description, exhibit and animalImg variables for the Card_Panel.
The variables, title, description, exhibit and animalImg, are references to the Card_Panel child objects Title_txt, Description_txt, Animals_txt and Animal_img and assigned in the inspector as shown below. The CardModel[] array holds references to the each zoo exhibit’s scriptable object, and as a public variable, are also assigned in the inspector.
When the user selects an exhibit, Big_Cats_Button’s On Click() method sets the Card_Panel to active, and calls UpdateCard() method on CardView script, passing an integer corresponding to its corresponding Cards[] array element, shown above. This ID links the scriptable objects to the exhibits via the map buttons.
Below we can see how the text and images have been swapped out on the Card_Panel via the UpdateCard() method using the scriptable objects.
Finally the Close_Button, red X in upper right corner above, uses On Click() to set the Card_Panel to inactive returning the user to the interactive map.
Scriptable objects are efficient way to create a class of objects with similar variables, yet vary individually.
This project uses assets from GameDevHQ Filebase.
