How to make Wordle in Unity (Complete Tutorial) 📚✏️

Name: How to make Wordle in Unity (Complete Tutorial) 📚✏️
Uploaded: 2022-11-29T21:38:51.000Z
Duration: 3 h 54 min 4 s

How to Create Wordle in Unity

Introduction to Wordle

Adam introduces himself and the purpose of the video, which is to create a Wordle game in Unity. He explains that Wordle is a web-based word game where players have six attempts to guess a five-letter word, receiving feedback through colored tiles.

Tutorial Overview

Adam acknowledges being late to the trend but expresses excitement about creating this tutorial. He invites viewers to join his Discord community for direct help and encourages subscriptions as he recently surpassed 10,000 subscribers.

Setting Up the Project

The tutorial begins with creating a new project in Unity Hub. Adam notes that while they will use UI components primarily, selecting a 2D template is preferable for this game.

He specifies using Unity version 2021.3, emphasizing that any recent version should suffice for this tutorial.

Initializing the Game Scene

After naming the project "Wordle" and saving it on his desktop, Adam discusses renaming the default scene for organization purposes.

He highlights how to change the background color of the camera in Unity's inspector panel and previews it in the game view.

Camera Settings

Adam suggests setting up an orthographic projection for better visuals since it's primarily a UI-based game. He also mentions adjusting its size settings.

Creating UI Elements

To render UI elements, he instructs viewers to create a canvas by right-clicking in the hierarchy and selecting "UI" > "Canvas," noting that this action also creates an event system for handling inputs.

Canvas Configuration

Adam explains various components of the canvas, including rendering options (screen space overlay), and emphasizes checking "Pixel Perfect" for crisp visuals due to its entirely UI nature.

Scaling Considerations

Discussing scaling methods based on screen size, he advises adapting UI layouts especially when developing for mobile devices due to varying resolutions across different screens.

Reference Resolution Setup

Adam elaborates on setting reference resolutions depending on target devices—suggesting common dimensions like 1280x720 or 720x1280 based on landscape or portrait orientations.

Game Development: Setting Up UI Elements

Match Mode and Resolution Settings

The match mode allows developers to prioritize matching either the width or height of the game interface using a slider. It's recommended to keep this setting in the middle for balanced adjustments.

When developing for specific devices like tablets, consider adjusting settings based on whether the game is intended for portrait or landscape orientation. Testing different configurations is essential as there isn't a one-size-fits-all solution.

Previewing Game Resolutions

Developers can preview their game in various resolutions, which will be useful once UI elements are built. This feature helps visualize how the game will appear under different settings.

Graphic Ray Caster Component

The graphic Ray Caster component detects user interactions such as button clicks. It is necessary for games with interactive elements but requires no customization at this stage.

Creating Game Board Structure

To set up the game board, create child objects within the canvas by right-clicking and selecting "Create Empty." This establishes a foundational structure for further development.

Anchoring options allow positioning of objects relative to their parent (the canvas). Stretching an object across both axes can be achieved by adjusting offset values to zero.

Designing Rows and Tiles

Each row of the game board will consist of six rows with five columns each, where each column represents a tile.

Instead of creating empty objects for tiles, it's more efficient to use UI images that can be customized later.

Utilizing Prefabs for Efficiency

Turning tiles into prefabs allows developers to make changes universally across all instances without needing individual adjustments.

Layout Management

Adding a horizontal layout component organizes tiles automatically in a row format. Spacing between tiles should be consistent; 16 pixels is suggested as it aligns with common design practices.

Standard spacing systems often utilize multiples of four or eight pixels, making 16 pixels a typical choice in UI design.

Finalizing Row Alignment

Adjustments made through layout groups affect child elements rather than the parent object itself, ensuring proper alignment and distribution among tiles within rows.

Game Board Setup and Tile Customization

Setting Up the Game Rows

The speaker discusses the need to uncheck options that force expand the width or height of game rows, simplifying the setup process.

A total of six rows are created for player guesses, aligning with standard gameplay mechanics.

The addition of a vertical layout group allows for automatic vertical alignment of rows on the game board.

Spacing adjustments are made to ensure a visually appealing grid layout for the game components.

Automatic Sizing and Centering

The speaker explains how to set up automatic sizing for rows based on their parent board dimensions, eliminating manual calculations.

This feature simplifies design by ensuring all elements are evenly spaced and centered within the game board.

Customizing Tile Appearance

The importance of using prefabs is highlighted; changing one tile's background color updates all instances simultaneously.

The speaker demonstrates how to change tile colors to match the background while adding an outline component for better visibility.

Styling Considerations

Suggestions are provided for customizing tile aesthetics, including color choices that align with either dark or light themes.

Emphasis is placed on personal preference in styling tiles, encouraging users to experiment with different designs.

Adding Text Components

To display letters on tiles, a text component is added as a child element using Unity’s Text Mesh Pro system.

Instructions are given on accessing and installing Text Mesh Pro through Unity's package manager if not pre-installed.

Font and Text Styling in UI Design

Adjusting Font Alignment and Size

The speaker discusses changing the font used in a project, noting that centering it visually may not appear accurate. They suggest using midline alignment for better results, depending on the font.

Instructions are given to stretch the text to fill the entire tile space by setting all transform values to zero, ensuring it occupies both horizontal and vertical spaces.

Ensuring Uppercase Text

The speaker emphasizes making sure that any text input is always displayed in uppercase by selecting an uppercase option within the settings.

Importing Fonts

The chosen font for this project is "Clear Sans," a common UI design font. The speaker mentions its usage on notable websites like the New York Times.

A link to download Clear Sans from GitHub is provided, highlighting its open-source nature and availability of various weights (bold, etc.).

Setting Up Project Files

The speaker plans to include links in the video description for downloading both the font files and their project files containing these fonts.

After downloading, they demonstrate extracting TTF files into a new folder created specifically for fonts within their project.

Converting Fonts for Use

To use these fonts with Text Mesh Pro (TMP), they need conversion as TMP renders differently than Unity's legacy text components.

By creating TMP font assets through right-clicking in the project panel, each selected font generates an SDF file suitable for use with TMP.

Scripting Game Functionality

Creating Scripts for Game Components

With text styling complete, attention shifts to scripting game functionality. A new folder is created specifically for scripts.

Three essential scripts are identified: one each for board management, row handling, and individual tiles.

Assigning Scripts to Prefabs

Each script is assigned to its corresponding prefab (tile, row, board), ensuring that instances of these prefabs inherit their respective functionalities automatically.

Handling User Input

The goal is set to allow users to type inputs that will update each tile's displayed text. This requires referencing the text component within each tile script.

Importing Necessary Libraries

For utilizing Text Mesh Pro features effectively within Unity scripts, importing using TM Pro is necessary; if not using TMP, using unityengine.ui should be included instead.

Unity Tile and Row Script Development

Setting Up the Text Component

The text component is assigned using GetComponentInChildren, as the text component is part of a child object of the tile.

If not using TextMesh Pro, the standard text component will be utilized. A public function is created to set which letter should appear in the tile.

Managing Character Input

The character input for setting letters must be converted from Char to String since the text property expects a string format.

A public property called letter is created with a getter and private setter, allowing access through game logic while restricting direct modification.

Implementing Row Logic

The row script maintains an array of tiles, defined as a public array with a private setter to ensure only the row can assign its tiles.

In the awake function, tiles are initialized using GetComponentsInChildren<Tile>() to gather all tile components within that row.

Handling Key Presses

Input detection typically occurs in Unity's update function; this section explicitly defines it as private for clarity.

To detect multiple key presses (A-Z), an array of key codes is established instead of checking each key individually.

Defining Supported Keys

A static read-only array named supportedKeys is created to hold key codes from A to Z, ensuring these keys are consistently referenced throughout.

Each key code must be typed out carefully, ensuring proper syntax with commas and semicolons at appropriate places.

Tracking Current Tile Position

Two private fields (rowIndex and columnIndex) are introduced to track which tile currently has focus during input handling.

Character Input Handling in Unity

Setting Up Character Input

The process begins with casting input to a character type, which Unity supports natively. This involves using parentheses and specifying the character type explicitly.

After setting the letter for a tile, the column index is incremented to move to the next tile. This is done by simply adding one to the current column index.

Managing Key Presses

To prevent multiple key presses within a single frame, a break statement is used in the loop after detecting an input. This avoids issues where rapid key presses could disrupt indexing.

An error occurs if an additional key is pressed without handling bounds correctly, leading to an "index out of range" exception when trying to access non-existent tiles.

Implementing Backspacing and Submitting Rows

The code needs adjustments to handle backspacing properly. If the column index exceeds available tiles, it should allow for backspacing instead of causing errors.

A check for submitting a row upon pressing enter will be implemented later; currently, focus remains on managing valid inputs and preventing out-of-bounds errors.

Code Optimization Techniques

The logic for checking keys has been refined by nesting loops within conditional statements that verify whether inputs are in bounds or not.

Backspacing functionality is prioritized in the script. When backspace is detected, it sets the corresponding tile's letter to a null character (represented as '0').

Enhancing Readability and Functionality

To improve code readability and efficiency, variables like currentRow are introduced to avoid repetitive access patterns throughout the code.

Understanding Column Index Management in Input Handling

Managing Backspace Functionality

The speaker discusses the need to delete a character from the previous column when backspacing, emphasizing that they are currently at the third column.

To avoid negative index values when adjusting the column index, a clamping method is proposed using Math.Clamp to ensure it remains within valid bounds.

Clamping Logic Explained

Instead of clamping on both ends, only the lower bound is necessary since movement is only backward; thus, a Max function is used to prevent negative indices.

If the column index becomes negative (e.g., -1), it will be set to zero, ensuring that no out-of-bounds errors occur during input handling.

Implementing Tile State Changes

The speaker explains how a clamp function combines both Max and Min functions for managing bounds effectively. This ensures proper tile state management without exceeding limits.

After confirming that the index does not go out of bounds, tiles can be cleared by setting them to null characters upon backspacing.

Submitting Rows and Word Comparison Logic

Detecting Row Submission

The process for submitting a row involves checking if the Enter key has been pressed using Input.GetKeyDown(KeyCode.Return) before proceeding with submission logic.

Preparing for Word Comparison

Before comparing user input with an answer word, it's essential to randomly select a word from a dictionary and establish tile states based on correctness.

Loading Dictionary Data for Game Mechanics

Understanding Word Lists

The speaker outlines two distinct lists: one containing possible answers and another with acceptable guesses. This structure mirrors official Wordle mechanics.

Accessing Text Files from GitHub Repository

Links to text files containing words are provided in the video description. These include "official Wordle all" and "official Wordle common," which contain thousands of words.

Setting Up Resources in Unity

Saving Required Files Locally

Instructions are given on saving these text files into a newly created "resources" folder within Unity's project directory for easy access during development.

Formatting Custom Word Lists

Users can create their own word lists but must ensure each word is on its own line without extra spaces or characters. Proper formatting is crucial for successful parsing later on.

Loading Assets in Unity

Importance of the Resources Folder

The Resources folder is essential for loading assets at runtime in Unity. If assets are not placed here, they cannot be loaded dynamically when the game is built.

When building a game, Unity includes everything from the Resources folder into the final bundle, allowing for dynamic asset management during gameplay.

Setting Up Arrays for Game Logic

Two arrays are needed: one for solutions (the correct answers) and another for valid words (possible guesses). Solutions will be randomly selected to compare against player guesses.

A function called start is introduced to initialize data loading when the script first runs, ensuring proper capitalization to avoid issues with Unity's automatic calls.

Loading Data from Text Files

The method resources.load is used to load a text file as a TextAsset, which allows parsing of its contents into usable data structures within the game. The specific file name must be provided without needing to specify its location since it defaults to the Resources folder.

Once loaded, the text content can be split into an array using newline characters as separators, making it easy to handle lists of words or phrases stored in the text file. This approach simplifies parsing compared to other formats like CSV (Comma-Separated Values).

Assigning Valid Words and Solutions

After parsing valid words from the text file, similar logic applies for solutions; however, this time it targets a different variable that has already been defined earlier in the codebase. Reassignment rather than redeclaration is sufficient here.

Debugging tools in Unity allow verification of successful data loading by switching to debug mode and checking if both solutions and valid words have been correctly populated into their respective arrays. This step ensures that foundational elements are functioning before proceeding further with development.

Random Word Selection Logic

Creating Random Word Functionality

A new function named set random word is created to select a random solution word from previously loaded solutions; this will later assist in comparing player submissions against correct answers during gameplay sessions.

Utilizing random.range, a random index within bounds of available solutions is generated, ensuring no out-of-bounds errors occur due to inclusive-exclusive behavior of integer ranges in Unity's API methods.

Ensuring Consistency with Input Formatting

To maintain consistency when comparing user input against solution words, all selected words are converted to lowercase and trimmed of any extra spaces using .toLower() and .trim(). This precaution helps prevent mismatches caused by case sensitivity or unintended whitespace around strings during comparisons later on in gameplay logic development.

Initial Submission Logic Development

Simplifying Comparison Logic

Initial submission logic focuses on basic functionality before addressing more complex edge cases; this allows developers to test core mechanics effectively while planning future enhancements based on feedback gathered through testing phases.

Future iterations will refine this logic significantly as additional features such as tile states become integrated into overall game design considerations; thus laying groundwork now facilitates smoother transitions later on when expanding upon these systems.

Wordle Game Logic Implementation

Looping Through Tiles and Comparing Letters

The process begins by looping through each tile in the row to compare it with every letter in the target word. This is done using a for loop that iterates over row.tiles.length.

Each tile's letter is stored temporarily, allowing for comparison against the corresponding character in the word at the same index. If they match, it's identified as a perfect match.

Handling Letter States

If there’s no perfect match, further checks are made to determine if the letter exists elsewhere in the word but is positioned incorrectly.

If a letter from a tile exists in the word but does not match its position, it indicates an incorrect placement rather than absence.

Conversely, if neither condition applies, it confirms that the letter is entirely incorrect and not present in the word.

Advancing Rows and Game Over Conditions

After processing all tiles in a row, we increment rowIndex to move to the next row while resetting columnIndex back to zero.

A check ensures that if rowIndex exceeds total rows available (rows.length), it signifies game over; thus disabling user input and preventing further actions.

User Feedback Mechanism

Although immediate feedback on correctness isn't provided yet, users can still submit multiple guesses sequentially without errors.

To enhance user experience, different tile states need to be established which will visually indicate whether letters are correct or misplaced based on their color coding.

Tile State Class Implementation

A new class named State is introduced within the tile script instead of using structs for specific reasons related to future logic implementations regarding state comparisons.

The class will define colors for both fill and outline properties of tiles which correspond to their visual representation during gameplay.

Updating Tile Colors Based on State

The current state of each tile must be stored similarly to how letters are saved. This involves creating public getters and setters for managing state changes effectively.

In setting states, references are obtained for image components (fill color) and outline components (outline color), ensuring visual updates reflect current game status accurately.

Game State Management in Unity

Declaring Game States

The speaker discusses the importance of consistency in declaring game states within a board script, suggesting that it makes sense to organize these declarations under headers for clarity.

Five different game states are introduced: empty state (no letter), occupied state (letter present but correctness unknown), correct state (green), wrong spot state (yellow), and incorrect state (grayed out).

Serialization and Editor Visibility

To make the declared states visible in the Unity editor, the class must be serialized using System.Serializable, allowing data representation in the editor.

Adding headers helps organize properties within a class, making it easier to manage multiple references later on.

Customizing Colors for Game States

The speaker customizes colors for each game state based on a dark theme inspired by the New York Times version of the game.

Specific color codes are provided for each state: empty and occupied states share background colors; correct is green; wrong spot is yellow; incorrect is grayed out.

Setting Game State Logic

The logic for setting tile states is discussed, including how to handle backspacing and updating tile statuses when letters are inputted.

Initially, empty states do not need to be set as they default to empty. However, occupied states must be updated when letters are entered.

Testing Functionality

The speaker tests functionality by entering words into the game. An error occurs due to missing component assignments which are then corrected.

Handling Edge Cases in Tile Logic

Revisiting Tile States and Logic

The discussion begins with a review of tile states, emphasizing the need to address edge cases in determining if a tile is correct.

An example is provided where multiple occurrences of the letter 'S' in a guess create confusion, as only one 'S' exists in the solution. This highlights the importance of accurately reflecting letter positions.

The speaker notes that players may incorrectly assume there are two 'S's based on their guess, leading to potential misinterpretations during gameplay.

Refactoring Logic for Correctness

To handle these edge cases effectively, the logic must be refactored to account for letter occurrences. If a guessed word contains multiple instances of a letter that appears only once in the solution, only one should be marked correctly.

A new system will be implemented that factors in how many times letters occur within both guesses and solutions to avoid highlighting incorrect letters.

Two-Pass Checking System

The proposed solution involves rewriting existing logic into two phases: first checking for correct positions and then checking for wrong placements using separate loops.

The first loop identifies correct letters and marks them while removing them from consideration for subsequent checks. This prevents multiple highlights for letters already confirmed as correct.

Managing Remaining Letters

As letters are marked correct, they are removed from a copy of the original word (referred to as "remaining"), ensuring that subsequent checks only consider unmarked letters.

A loop iterates through tiles to check if each letter matches its corresponding position in the solution. Correctly identified letters are replaced with an empty space to maintain string length.

Finalizing Incorrect Checks

After marking correct positions, another loop will assess remaining tiles against those still present in "remaining" to identify incorrect placements.

If a guessed letter does not exist at all within the solution word, it is marked as completely incorrect without affecting "remaining," streamlining error identification.

Understanding Tile State Management in Game Logic

Tile State Evaluation

The tile state is evaluated to determine if it has been set correctly. If the tile state does not match either the correct or incorrect states, it indicates that the tile is in an undefined state.

Class vs. Struct for State Representation

A class is preferred over a struct for managing tile states due to reference equality checks. This allows for direct comparison of object instances rather than needing manual conformance to equatable protocols.

Using a struct would complicate comparisons since structs are value types and require explicit implementation of equality checks, which can be cumbersome.

Handling Incorrect States

When determining if a letter is in the wrong position, it's essential to check if the remaining word contains that letter. If it does, this indicates a second instance of that letter exists but is misplaced.

If the remaining word does not contain the letter, it confirms that there are no valid instances of that letter in the solution, marking it as incorrect.

Updating Remaining Letters

The index used for updating remaining letters must reflect their correct positions; thus, adjustments are made based on where letters should be placed within the string.

The correct index for each letter needs to be identified before modifying the remaining string to ensure accurate tracking of available letters.

Edge Case Testing and Results

The complexity of handling edge cases may seem daunting compared to simpler conditions; however, thorough testing ensures all scenarios are accounted for in game logic.

Retesting with specific words demonstrates how duplicate letters are handled correctly—only one instance gets highlighted while others remain unmarked when they do not fit into defined states.

In examples where different words are tested against solutions (e.g., "hello" vs. "place"), results align with expectations by accurately identifying correct placements and misplacements without confusion from duplicates.

Importance of Loop Structure

Game Logic and Validations in Wordle

Handling Edge Cases

The speaker discusses the importance of addressing edge cases in the game, specifically noting that there are not three 'L's in the solution word.

An example is given where random letters can be typed into the game, demonstrating how players might guess letters without forming valid words.

Validating User Input

The need for a second array containing valid words is introduced to ensure players can only submit real words.

A function will be created to check if a word is valid by looping through an array of valid words and returning true or false based on whether it exists.

Implementing Validation Logic

The validation function iterates through the list of valid words; if a match is found, it returns true; otherwise, it returns false after checking all entries.

Before executing any other logic upon submission, the program checks if the inputted word is valid. If not, it exits early from the function.

Constructing Words from Letters

To validate user input effectively, individual characters typed by users must be combined into a complete word using a helper property within each row.

A public string property called "word" will concatenate letters from tiles to form this complete word for validation purposes.

Providing User Feedback

When an invalid word is detected, feedback should be provided to inform users. This involves creating a new text object on the canvas indicating that their input was invalid.

The speaker outlines steps to create and style this text component for clarity and visibility on-screen.

Styling Invalid Word Notification

Instructions are given on how to position and style the "invalid word" notification text within the game's UI for better user experience.

How to Handle Invalid Words in Unity Game Development

Deactivating Game Objects

The speaker discusses deactivating a game object at the start of the game to prevent it from appearing initially. This object will be referenced later in the script when an invalid word is entered.

Organizing UI References

A new header for UI references is created to help organize properties within the Unity editor. The speaker emphasizes importing TextMeshPro components for text handling.

Handling Invalid Word Display

The speaker mentions that instead of using TextMeshPro, they could reference the invalid word text as a simple game object for simplicity. They plan to activate this text when an invalid word is inputted.

To hide the invalid word text after backspacing or clearing it, a line of code will set its active state to false.

Testing Invalid Word Functionality

Upon testing, an error occurs due to not assigning a reference to the component. After correcting this, entering "hello" confirms that it is recognized as a valid word by checking against an official list.

The discussion highlights that some real words may not be accepted by Wordle due to specific criteria, such as plural forms being excluded.

Completing Game Loop and Restart Mechanism

The next steps involve providing players with options to restart if they lose and detecting win/lose conditions. This includes setting up buttons for these actions.

Creating Buttons in Unity

The speaker demonstrates creating buttons using TextMeshPro and customizing their appearance and layout within the canvas.

Button dimensions are calculated based on existing UI elements, ensuring proper spacing and alignment between two side-by-side buttons.

Customizing Button Styles

Various styles are applied to buttons including background color matching the scene's background, adding outlines similar to tile designs, and adjusting button text colors for consistency.

Finalizing Button Functionality

Adjustments are made regarding font size and style for better visual appeal. One button is designated for starting a new game with different words upon winning.

Game Development: Button Setup and Logic

Modifying Button Appearance

The speaker removes the default Sprite from a button to achieve square corners, enhancing visual consistency.

To position two buttons side by side, the pivot of one button is set to zero and the other to one. This ensures they are equally spaced at 282 units apart.

Naming Buttons for Game Functionality

The buttons are named "Try Again" and "New Word," indicating their functions when the game ends—either retrying with the same word or selecting a new one.

These buttons will appear upon game over scenarios, allowing players options based on their gameplay experience.

Implementing Win Condition Logic

A function is introduced to check if a player has won by verifying if all tiles in a row match the correct state.

The logic involves looping through each tile in the current row; if any tile does not match, it indicates that the player has not won yet.

Disabling Input After Game Ends

Once a win condition is confirmed, input should be disabled similarly to how it's done when losing. This prevents further actions until a new game starts.

Unity's built-in functions OnEnable and OnDisable are utilized to manage button visibility based on game state changes.

Testing Button Functionality

Initial tests confirm that buttons appear correctly after exhausting guesses or winning. However, references need proper assignment before testing can proceed effectively.

Implementing a Word Game: Clearing the Board and Restarting

Functionality for Clearing the Board

The speaker discusses the need to clear the game board when starting a new game or trying again, emphasizing that there is currently no function for this purpose.

A nested loop structure is introduced to iterate through each row and tile of the board, resetting letters to a null character.

The code sets both the letter and state of each tile back to their initial empty states using specific commands in programming.

Integrating Game Controls

The speaker explains how to call the newly created function whenever a new game starts or when attempting again, ensuring that only random word selection differs between these actions.

Instructions are provided on hooking up buttons in the user interface, detailing how to link them with functions like "try again" and "new game."

Testing Game Scenarios

The speaker demonstrates gameplay by intentionally losing and then testing both scenarios—trying again with the same word versus starting fresh with a new word.

Observations are made about how resetting works; after clicking "try again," all previous inputs should be cleared while retaining the same target word.

Final Thoughts on Gameplay Experience

The speaker reflects on player behavior, suggesting that players might want to try different words even after winning, highlighting an engaging aspect of gameplay.