Top-Down Controller Series: Episode 3 - Creating an NPC and Dialog Box

Introduction

• Series: Top-Down Controller
• Episode: 3
• Topic: Creating an NPC and dialog box with a cool typing effect and continue button.
• Goal: When player is in range, they can press a button to speak; dialogue box appears with typing effect.

Unity Scene Setup

• Start with player that can move around.
• New Assets: Import NPC sprite and profile image.

Creating NPC GameObject

• Drag NPC sprite into the hierarchy (creates NPC GameObject).
• Player Tag: Create and assign Player tag to player GameObject.
• Add Colliders to NPC:
  • Capsule Collider: Main collider for player collision.
  • Box Collider: Set to isTrigger for dialogue activation.

Setting Up Dialog Panel

• Hierarchy Changes:
  • Create new UI > Panel, named dialog panel.
  • Position and scale dialog panel.
  • Child Objects:
    • Profile Image: Add new UI > Image for NPC profile; adjust as needed.
    • NPC Name: Add new UI > Text for NPC name.
    • Dialog Text: Add new UI > Text for displaying dialogue.
  • Settings:
    • Scale Canvas with screen size.
    • Disable dialog panel in hierarchy initially.

Scripting the NPC (C# in Visual Studio)

• Script Name: npc
• Libraries: using UnityEngine.UI
• Variables: Public & Private
  • GameObject dialogPanel
  • Text dialogText
  • String dialogue (array for sentences)
  • int index (current position in dialogue)
  • float wordSpeed (typing speed)
  • bool playerIsClose
• Collider Methods: Check player in range
  • OnTriggerEnter2D and OnTriggerExit2D methods to set playerIsClose.
• Update Function: Handle Interaction
  • Check player in range & key press (e.g., 'E') to show/hide dialog panel.
  • Create ZeroText function to reset text and deactivate panel.
  • Call ZeroText in appropriate places.
• Typing Effect:
  • Create IEnumerator Typing for simulating text typing effect.
  • for each loop to display characters.
  • Use yield return new WaitForSeconds(wordSpeed).
• Next Line Function:
  • Handle moving to next dialogue line.
  • Reset text if at the end of dialogue.
• Script Assignments in Unity:
  • Assign variables in NPC inspector: dialog panel, dialog text, sentences.
  • Set word speed value.

Continue Button Setup

• Enable dialog panel to add continue button.
• Continue Button:
  • Design and position continue button.
  • Add OnClick event linking to NPC’s NextLine function.
• Button Activation Script:
  • Create GameObject continueButton variable in script.
  • Add logic to update function to activate button after text completes.
  • Ensure button deactivates at beginning of NextLine.
  • Disable button initially in Unity inspector.

Testing

• Move player in and out of range.
• Press button to activate dialogue box.
• Check typing effect and continue button functionality.

Conclusion

• Successfully implemented NPC interaction with dialogue box and typing effect.
• Thank patrons and ask viewers to like and subscribe.