Skip to main content

Stage 2: Plants

Objective 🧐🗿​

In this session, we will implement the behavior and management of plants in our game, including the integration with the GameManager to control game dynamics. This session focuses heavily on scripting to make our plants functional and interactive.

Coach Note!

These are the topics you will be going over for this stage:

Standard
  • Basics of Making UI with Unity: Introduction to creating user interfaces, including Canvas, UI elements (buttons, text, images), and basic UI interactions.
  • Creatring the Grid: Make each individual square then adding colliders and tile script.
  • How If Statements Work: Explanation of conditional statements (if, else if, else) and their usage in Unity scripts to control flow based on conditions.
Advanced
  • Explain Raycasting: Detailed explanation of raycasting, how it works, and its practical applications in detecting objects in 2D space.
  • Basics of LayerMasks: Understanding LayerMasks, their purpose, and how to use them to filter objects for raycasting and other operations.

Step 1 - Set Up the Game Interface 🖋️💻​

1.1 Create the UI​

Design your User Interface (UI) to interact with plants:

  • Main Frame: Create a main frame in Unity's Canvas to contain all UI elements.
  • Background: Add an image component that serves as the backdrop for your UI.
  • Plant Card Frame: Construct another frame within the main frame to house plant cards.
  • Plant Cards: Each card should have:
    • An Image component for the background.
    • Another Image component for the plant's depiction.
    • A Text component displaying the cost of the plant.

Customize your UI to reflect the theme and aesthetics of your game.

1.2 Create the Grid​

Organize your game space:

  • Grid Container: Create an empty GameObject named 'Grid' to act as the container for the grid cells.
  • Grid Cells: Use Image UI elements to form a grid of 5x9 cells (like the classic setup in plant defense games).
    • Adjust each cell's transparency to give a glass-like appearance, enhancing the visual integration of plants.

Step 2 - Create the Plant Scripts 🌱📜​

2.1 Implementing Plant Behavior Scripts​

📝 Tile Pseudocode

Create a straightforward script called Tile:

  • hasPlant: A boolean to track whether a plant is present on the tile.

Attach this script to each grid cell.

📝 Plant Slot Pseudocode

Develop a script to manage the plant UI:

PlantSlot Class:
   Declare variables:
     - plantSprite: a Sprite representing the plant's image
     - plantObject: a GameObject for the plant itself
     - price: an integer representing the cost of the plant
     - icon: an Image component to display the plantSprite
     - priceText: a TextMeshProUGUI component to display the price of the plant

   OnValidate method:
     - Check if the plantSprite is not null:
         - Enable the icon
         - Set the icon's sprite to the plantSprite
         - Set the priceText to display the plant's price
     - If the plantSprite is null:
         - Disable the icon

2.2 GameManager Script​

Create a comprehensive script to manage game interactions. This is like the script of saying how does the game work.

A large wave of code is approaching:

GameManager Class:
   Declare variables:
     - currentPlant: a GameObject representing the currently selected plant
     - currentPlantSprite: a Sprite representing the currently selected plant's image
     - tiles: a Transform representing the parent of all tile objects
     - tileMask: a LayerMask used to filter raycast hits to only include tile objects

   BuyPlant method:
     - Set currentPlant to the plant GameObject passed as an argument
     - Set currentPlantSprite to the sprite passed as an argument

   Update method:
     - Create a ray from the camera to the mouse position
     - Perform a raycast using the ray, checking up to a distance of 100 units, and only considering objects on the tileMask layer
     - If a raycast hit occurs:
       - Retrieve the Tile component from the hit object
       - If the tile exists, does not already have a plant, and a plant is currently selected:
         - Check if the left mouse button is pressed
         - If true, instantiate the currentPlant at the hit position with no rotation
         - Set the tile's hasPlant property to true to indicate a plant has been placed
         - Reset currentPlant and currentPlantSprite to null to indicate no plant is currently selected
Medium: Add peashooter animations!

Goal: Implement interactive animations for the peashooter!

3.1 Gather your assets

Search online for peashooter assets to animate! Preferably peashooter sheet with a different image for each frame.

3.2 Editing the sheet

Use the sprite editor and slice the sheet file, then replace the existing peashooter object's sprite with the peashooter sheet.

3.3 Animate

Use the animation editor to create an animation! Simply drag the images onto the editor and click play until the animation looks right.

Hard: Create your own plants!

Goal: Create different types of plants!

4.1 Gather your assets

Search online for plant assets to animate! Preferably a plant sheet with a different image for each frame.

4.2 Create new behaviors

Script your plant to be unique by giving cool functionalities to protect the house from the zombies!