DEV Community: Atena Razm

React State Management: When & Where add your states?

Atena Razm — Sun, 30 Jun 2024 19:50:55 +0000

When you start learning React, managing state can be challenging at first. It's crucial to understand when you really need a state for a variable and where to place that state to ensure your code is robust and efficient. Proper state management not only optimizes performance by minimizing unnecessary re-renders but also enhances predictability and maintainability, making your code easier to debug. It promotes component reusability, supports application scalability, and maintains a clear separation of concerns. Ultimately, effective state management leads to a smoother user experience and a high-quality, performant application.

There is a series of questions you can ask yourself to determine if your variables need separate states or if they can be simple constants. Additionally, these questions can help you decide where to keep the state if it is needed.

When do I need a state variable?

Do you need to store data?
YES:
Will data change at some point?
NO: Regular "const" variable
YES:
Can it be computed from existing state/props?
YES: Derive state
NO:
Should it re-render the component?
NO: Ref(useRef)
YES:
PLACE A NEW PIECE OF STATE IN COMPONENT!

Where to place your new state?

Always start with a local state in the current component. Then ask yourself if it's:
Only used by this component?
YES: Leave it in the component
NO: Also used by a child component?
YES: pass it to the child via props
NO: Also used by one or a few sibling components?
YES: List state up to first common parent
NO: Used all over the component tree by more than a few sibling components?
YES: Then, you probably need a Global State!

A practical summary of React State variables & Props!

Atena Razm — Fri, 21 Jun 2024 20:49:37 +0000

There are so many videos and documentation out there to help you learn the concept and usage of State and Props with code examples. this article is not about teaching you these concepts from scratch or providing you with code examples. The main point of this blog is to briefly give you a practical summary of what they are and when to use them. So, if you are completely new to these concepts, I would suggest you first watch some basic tutorials about them to get the most out of this summary.

State

What is State?

The state variable is a plain JavaScript object used by React that includes all information about the component's current situation. State variables are immutable and private to that component.

When do we need a state for a component?

Whenever you need to change/update part of the UI
Whenever the user is supposed to interact with the UI
Whenever you need to persist local variables between renders

Using state correctly:

States are immutable. The component that owns a piece of the state, should be the one that modifies it. Do not modify the state directly. Instead, use setState().
State updates may be asynchronous. So, if you need to use the value of this.props and this.state to calculate the next state value, instead of directly passing an object to setState() pass a callback function with the state and props as arguments.
State updates are merged.
The data flows down.

How does setState() work?

This method tells React that we are updating the state. Then, React checks which parts of the state are changed to bring the DOM in sync with the virtual DOM based on those changes.

Note: props is basically a plain JavaScript object that includes all the attributes that we set in the parent component. Every React component has the props property. It is used to pass data from a parent component to a child. It is “read-only” and cannot be modified, if we need to do so, we should use setState and modify them from the state.

State vs props

Ownership and Control:

State: Internal data, owned and controlled by the component itself.
Props: External data, owned and controlled by the parent component.

Conceptual Understanding:

State: Can be thought of as the component's memory, holding data over time across multiple re-renders.
Props: Like function parameters, used to pass data from parent to child components.

Mutability and Effects:

State: Can be updated by the component itself, triggering a re-render.
Props: Read-only, cannot be modified by the receiving component. Receiving new props also causes a re-render.

Usage:

State: Used to make components interactive.
Props: Used to configure child components from the parent component.

Note: Whenever a piece of state is updated, the component that owns the state, and all children components that receive the piece of state as props will be re-rendered to keep in sync.

Short-Circuiting and Logical Operators in JavaScript: &&, ||, ??

Atena Razm — Fri, 07 Jun 2024 21:14:04 +0000

Short-circuiting is a concept in logical operations in many programming languages, including JavaScript where the evaluation stops as soon as the outcome is determined. such as the “AND operator” and “OR operator”. This feature only looks at the first value to decide what to return without even looking at the second value.
It is particularly useful for optimizing code and preventing unnecessary computations.

The && operator: if the first value is true, it immediately returns “the second value”, and if the first value is falsy it will immediately return “the falsy value”.

// falsy values: 0, '', undefined, null
console.log(true && 'Something'); // Something
console.log(false && 'Something'); // false
console.log(0 && 'Something'); // 0
11

The || operator: if the first value is true, it immediately returns “true”, and if the first value is falsy it will immediately return “the second value”.

// falsy values: 0, '', undefined, null
console.log(true || 'Something'); // true
console.log(false || 'Something'); // Something
console.log(0 || 'Something'); // Something

But there can be a problem with the returned value since if the first value is 0 but it’s not actually false, it’s just falsy! Then we would need to get the actual value of 0, not the second value.
Another example:

const count1 = undefined;
const count2 = 0;
console.log(count1 || 'No data'); // No data
console.log(count2 || 'No data'); // No data

Here, the second console log should show 0 as the total number, not undefined. To fix this, we should give the condition some flexibility with falsy values other than null and undefined. That’s where we use the Nullish coalescing operator. This operator returns the falsy value if it’s anything other than undefined or null. So, for the values of 0 and empty strings, it will return the actual value of them.

const count1 = undefined;
const count2 = 0;
const count3 = 5;
console.log(count1 ?? 'No data'); // No data
console.log(count2 ?? 'No data'); // 0

Optional chaining operator: this can be very useful when dealing with objects that may have missing properties or when you want to safely access deeply nested properties without running into null or undefined errors.

const data = {
 value1: undefined, // or it could be { nested: undefined }
 value2: { nested: 3 },
 value3: { nested: 5 }
};
function getMultiplicationResult(obj1, obj2) {
 const val1 = obj1?.nested ?? 0;
 const val2 = obj2?.nested ?? 0;
 return val1 * val2;
}
const result = getMultiplicationResult(data.value1, data.value2); // 0 * 3 = 0
const result = getMultiplicationResult(data.value2, data.value3); // 3 * 5 = 15

Here, we used ? (Optional Chaining) to safely access the nested property of the objects obj1 and obj2.
And used ?? (Nullish Coalescing) to provide a default value of 0 if nested is null or undefined.
So, if data.value1 is undefined or if data.value1.nested is undefined, val1 will be set to 0.

Async/Await keeps order in JavaScript;

Atena Razm — Thu, 06 Jun 2024 19:41:57 +0000

JavaScript is a single-threaded synchronous language, meaning it goes through the statements in the order they are written and processes one at a time.

console.log("cook!");
console.log("eat!");
console.log("clean!");

// cook!
// eat!
// clean!

If before the cook! operation there was an asynchronous operation like fetching the recipe from an API, the program might not wait for it to complete before moving on to the cook!, eat!, and clean! operations. This can result in out-of-order execution, like so:

fetchRecipeFromAPI(); // Assume this is an asynchronous function
console.log("cook!");
console.log("eat!");
console.log("clean!");

// Output might be:
// cook!
// eat!
// clean!
// (sometime later) Recipe fetched!

Well, we definitely need to get the recipe first, and then cook based on it!
To ensure the steps are executed in order, even if one of them is asynchronous, we can use async and await keywords. These little friends can help us write asynchronous code that appears synchronous, making it easier to understand and maintain.

There are 2 steps to use them:

Define the asynchronous function with the async keyword before it.
Use the await keyword inside your asynchronous function to pause the execution until the operation is completed.

In the following example:

fetchRecipeFromAPI is an asynchronous function simulating a recipe fetch operation with a delay.
cook is an asynchronous function that waits for fetchRecipeFromAPI to complete before continuing.
main is an asynchronous function that ensures cook, eat!, and clean! happen in order.

async function fetchRecipeFromAPI() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("Recipe fetched!");
            resolve("recipe");
        }, 2000); // Simulate an API call with a 2-second delay
    });
}

async function cook(recipe) {
    console.log("start cooking with", recipe);
}

async function main() {
    const recipe = await fetchRecipeFromAPI(); // Wait for the recipe to be fetched
    await cook(recipe);  // Wait for the cooking to complete
    console.log("eat!");
    console.log("clean!");
}

main();

// Output:
// Recipe fetched!
// cook!
// start cooking with recipe
// eat!
// clean!

By using async and await, you ensure that the asynchronous cook function completes before moving on to eat! and clean!. This maintains the logical sequence of operations.

Note: If you try to get the value of an asynchronous function outside of it, It's always gonna be Promise { }, because JavaScript has no way of knowing what the result will be outside of that asynchronous process.

You can find the actual code in this SandBox

Essential Summary of Unity's New Input System

Atena Razm — Wed, 17 Jan 2024 05:31:00 +0000

The Input Action System

The basic idea

The User presses a button on a device (User > Device > Interaction)
There is a Binding between Device, Interaction, and Actions
The Action calls a method in our code
The code reacts to the interaction

Photo's reference

Input Action Maps

An Action Map provides controls for different circumstances and levels.
Each Action Map has a name and an ID too, which are unique within the Action Asset that the Action Map belongs to (if any).
For an Action to do something, you must first enable it, individually or in bulk through Action maps. When you enable an Action, the Input System resolves its bindings.
To stop Actions or Action Maps from responding to input, call Disable.

This is what happens on Enabling an action:

Update()/FixedUpdate()/ manual updates 
{
  > The Action actively monitors the Control(s) it's bound to
  > If (a bound Control state changes)
    {
       The action processes the change 
       {
          > If (the Control's change represents an 
                 Interaction change)
            {
               > The action creates a response.
            }
        }
     }
 }

Each Action Map has an InputActionMap.actionTriggered callback.

Input Actions

Input Actions are designed to separate the logical meaning of an input from the physical means of input.
Actions use InputBinding to refer to the inputs they collect.
Each Action has a name (InputAction.name), which must be unique within the Action Map that the Action belongs to, and a unique ID (InputAction.id), which you can use to reference the Action.
The Actions can be: created in its dedicated ActionAssets’ Editor, embedded in the MoboBehaviour components, manually loaded from a JSON file, or created directly in code. **Note: **You must manually enable and disable Actions and Action Maps that are embedded in MonoBehaviour components.
An Action doesn't represent an actual response to input by itself. It informs your code that a certain type of input has occurred. Your code then responds to this.
Each Action has a started, performed, and canceled callback.
You can poll the current state of an Action (the current value of an action) whenever you need it; to do this, use InputAction.ReadValue<>().
InputActionTrace can record changes happening on Actions.
You can also use PlayerInput to pick up input from Actions.
Action phases in receiving an input: Disabled, Waiting, Started, Performed, Canceled.
You can read the current phase of an action using InputAction.phase. The last 3 phases have a callback associated with them.

Note: Each callback receives an InputAction.CallbackContext structure, which holds context information that you can use to query the current state of the Action and to read out values from Controls that triggered the Action (InputAction.CallbackContext.ReadValue).
Note: The contents of the structure are only valid for the duration of the callback. In particular, it isn't safe to store the received context and later access its properties from outside the callback.

When and how the callbacks are triggered depends on the Interactions present on the respective Bindings. If the Bindings have no Interactions that apply to them, the default Interaction applies.
At runtime >> a Controller sends an Input >> an Interaction completes >> the Action triggered >> the code responses
There are 3 different Action Types that you can select in the Input Action editor window, or by specifying it as a parameter when you call the InputAction() constructor. The default Action Type is Value. Learn More about them here. In Summary:
Use the Value type for any inputs that should track continuous changes to the state of a Control. When the Action is initially enabled, it performs an initial state check of all bound Controls. If any of them is actuated, the Action then triggers a callback with the current value.
The Button type is very similar to the Value type, but its Actions can only be bound to ButtonControl controls, and it doesn’t perform the initial state check as the Value one does. Use this for inputs that trigger an Action once every time they are pressed.
With the Pass-Through type, any change to any bound Control triggers a callback with that Control's value. It won’t try to determine where this value is coming from. This is useful if you just have one set of controls, and want to process all input from a set of Controls.
To see currently enabled Actions and their bound Controls, use the Input Debugger. Here is a tutorial.
You can also use the InputActionVisualizer component from the Visualizers sample to get an on-screen visualization of an Action's value and Interaction state in real-time.

Input Action Asset

An Input Action Asset is an Asset that contains Input Actions and their associated Bindings and Control Schemes. These Assets have the .inputactions file extension and are stored in a plain JSON format.
In the Control picker window, you can explore a tree of Input Devices and Controls that the Input System recognizes and binds to these Controls.
The Device and Control tree is organized hierarchically from generic to specific. Ref
Instead of browsing the tree to find the Control you want, it's easier to let the Input System listen for input. Ref
Finally, you can choose to manually edit the Binding path, instead of using the Control picker. Ref

Using Input Action Assets

*Auto-generating script code for Actions - * Video

One of the most convenient ways to work with .inputactions Assets in scripts is to automatically generate a C# wrapper class for them. Using Action Assets with PlayerInput Component - Video
set up all your Actions in an Input Action Asset >> Then assign it to the PlayerInput component >> which can automatically handle activating Action Maps and selecting Control Schemes for you

Input Bindings

During the disambiguation process, the Input System looks at the value of each Control bound to an Action. If the magnitude of the input from any Control is higher than the magnitude of the Control currently driving the Action, then the Control with the higher magnitude becomes the new Control driving the Action.
If you don't want your Action to perform disambiguation, you can set your Action type to Pass-Through.
Runtime rebinding allows users of your application to set their own Bindings.

Input Interactions

An Interaction represents a specific input pattern. For example, a hold is an Interaction that requires a Control to be held for at least a minimum amount of time.
Interaction’s phases: Waiting, Starting, Performed, Canceled
Not every Interaction triggers every phase.
Using Interactions: You can install Interactions on Bindings or Actions.
Interactions on Actions work very similar to Interactions on Bindings, but they affect all Controls bound to an Action, not just the ones coming from a specific Binding. If there are Interactions on both the Binding and the Action, the Input System processes the ones from the binding first.

Here are the Predefined Interactions:

Default Interaction
Press
Hold
Tap
SlowTap
MultiTap

Note: You can write your own custom Interaction and use it in the UI and code the same way you use built-in Interactions. To do so, add a class implementing the IInputInteraction interface.

Processor

It will process your Input after it’s received. For example, it can Normalize the value of the input you receive if you only care about the direction of the input to move your character, and not the Value of it.
Learn about the Deadzone processor type here.
You can choose multiple Processors, and it depends on the type of your Action.

Character's Movement handling in Unity Input System

Atena Razm — Wed, 17 Jan 2024 05:30:34 +0000

To handle the movement of a game object I have 2 ways:

Using Rigidbody Physics
Using Transform for Direct Manipulation

Let's check each of them separately.

1. Using Rigidbody Physics

Pros:

Realistic physics interactions with the environment using Unity’s physics engine.
Built-in features like gravity, collision detection, and mass which can simplify the implementation of certain behaviors.

Cons:

It might add extra complexity and Tuning to get the movement exactly how you want it, for example in the jumping or fraction scenarios.

This approach is usually recommended for a more physics-based or complex 2D game.
There are different ways to control the movement of a Rigidbody:

A. Rigidbody.AddForce

Purpose: Used to apply a force to the Rigidbody.
Behavior: Adds a force to the object, taking into account its mass, resulting in acceleration. Continuously applying force can lead to continuous acceleration.
Use Case: Suitable for simulating realistic physics-based movements, such as jumping, pushing objects, or responding to external forces.

Use it when you want:

to simulate forces and acceleration in a more physics-based manner.
realistic interactions with other objects, gravity, and forces are desired.
to handle scenarios like jumping, falling, or being pushed by external forces.

Code Example:

 float movementInput = playerActionControls.Land.Move.ReadValue<float>();
 float horizontalForce = movementInput * _moveSpeed;
 _rigidbody.AddForce(new Vector2(horizontalForce, 0f));

B. Rigidbody.velocity

v: Velocity vector
Δd: Change in position vector
Δt: Change in time

Here is its formula: Velocity(v)= Δt / Δd

Purpose: Used to directly set the velocity of the Rigidbody.
Behavior: Sets the object's velocity directly, ignoring mass. The object will move at a constant speed in the specified direction, without continuous acceleration unless additional forces are applied.
Use Case: Suitable for situations where you want direct control over the object's speed and direction without simulating realistic physics-based forces.

Use it when you want:

direct control over the object's speed and direction without simulating complex physics forces.
the object to move at a constant speed without acceleration.
to create more straightforward, predictable movements.

Code Example:

 float movementInput = playerActionControls.Land.Move.ReadValue<float>();
 float horizontalMovement = movementInput * _moveSpeed * Time.deltaTime;  
 _rigidbody.velocity = new Vector2(horizontalMovement, _rigidbody.velocity.y);

Note: In this example, Time.deltaTime is used to ensure that the movement is frame-rate independent.

Note: In Unity, when using Rigidbody to handle physics-based movement, it's generally recommended to use either Rigidbody.AddForce or Rigidbody.velocity but not both in the same frame. Mixing them can lead to unexpected behavior because they represent different ways of applying forces to an object.

2. Using Transform for Direct Manipulation

Pros:

Simplicity of implementing the basic movements.
Predictability of the behavior by having more control over the character’s position.

Cons:

Limited physics interactions
Manual handling for features like jumping, ground detection, and responding to collisions.

Note: Using transform.Translate for movement is generally better suited for non-physics-based scenarios or when you want to handle movement manually without relying on the physics engine. In such cases, make sure to disable the Rigidbody's gravity and kinematic properties.

This approach is usually recommended for simple 2D platformers with basic movements.
Code Example:

transform.Translate(new Vector3(horizontalMovement, 0, 0));

Using Unity New Input System in my Shooting Platformer

Atena Razm — Wed, 17 Jan 2024 05:26:39 +0000

Introduction

Unity's new Input System is a powerful and flexible system designed to simplify the process of creating, modifying, and reusing input configurations across different platforms and devices.

Before using the new Input System, we have a few interesting concepts like User, Device & Controls, Interaction, Actions, Action Map, Processor, and Workflows to learn and make our lives easier. Need a fast-forward? Check out my "Essential Summary of Unity's New Input System" blog then!

My Code Walk-through

I am about to explain my steps for implementing the new Input System to my 2D Shooter game character to control its horizontal movement as well as jumps.

1. Setting the Actions in the ActionMap

Right-clicked in the Projects tab
Selected the Input Actions
Opened the newly created Input Action in its Editor window
Made the Land Action Map and 3 Actions in it: Move, Jump, Fire

Move

I set the Action Type to “Value”, because:

It does disambiguation (finds the active control device)
It automatically sends out the Start and Canceled callbacks as well as Performed. (Moving the joystick sends out the started and performed callbacks, and as soon as the action value is back to the initial one, the canceled callback cancels the action)
It’s the only action type that does the initial state check
It’s good for one-player

Jump

Set the Action Type to Button
Checked the “Initial State Check” checkbox,

because:

The jump only happens once every time the key is pressed
It jumps again only if the key is up and pressed again

Fire

Set it to Button Type
I didn’t check the checkbox
I set the Interaction to “Press” >> “Press Only”,

because:

Firing is triggered with a button
The button type only has the “Performed” phase
and, I wanted to customize the key's behavior to instantiate Bullets as long as the Key was pressed down, not only once on each press

Note: There are no Started or Canceled phases for the Button type. However, it has two Performed callbacks, one at pressing the button down and one at the release, which I used in my OnFire() code to simulate Started and Canceled callbacks. Learn more about Input System Action Types here.

2. Created new Bindings

Set up the Composite Bindings

Move >> Type: 1D Axis

Note: 1D Axis type…

represents a one-dimensional input axis,
is typically used for joystick axes, triggers on game controllers, or scroll wheels on a mouse,
has a range of values from -1.0 to 1.0,
when you read the value of a 1D Axis in your code, you'll typically get a float value representing the current position of the input along that axis. Example:

float horizontalInput = playerActionControls.Player.Move.ReadValue<float>();

Jump and Fire >> There is no Composite for the Button type. Just set the Binding path to the desired key by using the “Listen” button:

3. Generated C# class file for it

I chose the InputAction and in the Inspector checked the “Generate C# Class”, named the C# file (PlayerActionControls), and pressed Apply. Ref

4. Working with the Input values

Then, I created another script called PlayerController to instantiate the input controller and work with the input values.

5. Scripting the Character’s Movement

Inside the PlayerController script:

I instantiated the actions wrapper class inside the Awake() method.
Enabled and disabled the action wrapper class
Added callback methods for jump and fire's "Performed" phases.
Called OnMove() method inside Update()

void Awake()
{
   // Instantiate the actions wrapper class
   playerActionControls = new PlayerActionControls();
   _rigidbody = GetComponent<Rigidbody2D>();

   // For the jump & fire actions, adding a callback method for the "performed" phase
   playerActionControls.Land.Jump.performed += OnJump;

   playerActionControls.Land.Fire.performed += OnFire;
}

Note: 2 ways to check the input system is working:

// float jumpInput = playerActionControls.Land.Jump.ReadValue<float>();
       // if (jumpInput == 1)
       if(playerActionControls.Land.Jump.triggered)
       Debug.Log("jump");

Character's Movement

In the OnMove() method:

I read the movement input value from the PlayerActionControls, each frame,
I stored this value in a private field called _movementInput,
then multiplied it to the _moveSpeed Speed SerializeField to control the movement speed.

// Read the movement input value each frame
float _movementInput = playerActionControls.Land.Move.ReadValue<float>();

// Horizontal movement of the player character
float horizontalMovement = _movementInput * _moveSpeed;

Then, I tried different ways to handle the movement of the character:
At first, I used the transform method:

To achieve continuous movement while holding down the arrow key, I needed to multiply the input value by the movement speed and then multiply it by Time.deltaTime.
I also used the “Translate” method for smoother movement.

But then, I realized that I would have some issues with rotating the _firePoint this way, so I replaced it with the Rigidbody.velocity() method:

I didn’t need the Time.deltaTime multiplication anymore. The physics system took care of everything.

Read more about the options for handling the character's movements using Rigidbody Physics in my "Character's Movement handling in Unity Input System" blog.

Character's Flip

To rotate the character UI toward the movement direction:

I tried using transform.Rotate(x, y, z); and changed the y to 180, but then I had problems with spawning the bullets towards the _firePoint’s rotation.

Note: If you noticed, although this is a 2D game, we still need to set the z-axis value to 0f here, because in fact there is no real 2D in Unity, it’s just an orthographic projection, which is a form of parallel projection in which the top, front, and side of an object are projected onto a perpendicular plane.

So, I just flipped the character inside the OnMove() method, by changing the localScale.x on the Flip method. I flipped the _firePoint direction the same way.

OnMove()

  // Flip the character sprite to the move direction
  if (_movementInput > 0 && !_playerFacingRight)
  {
    Flip();
  }
  else if(_movementInput < 0 && _playerFacingRight)
  {
     Flip();
  }

Flip()

_playerFacingRight = !_playerFacingRight;

// Flip the character by changing localScale.x
Vector3 newScale = transform.localScale;
newScale.x *= -1;
transform.localScale = newScale;

// Flip the FirePoint direction
Vector3 firePointScale = _firePoint.localScale;
firePointScale.x *= -1;
_firePoint.localScale = firePointScale;

I also used Quaternion.Euler() in the Fire() method to flip the bullet spawns towards the direction of the Player character. You will see the code later in the Fire section.

Note: A quaternion is a mathematical representation of rotations in 3-dimensional space. Eular angles represent rotations as three separate angles along the coordinate axis (x, y, z). Quaternion.Euler is a Unity method that takes 3 float parameters representing the rotation angles and creates a rotation quaternion based on Euler angles.

Character's Jump

For the Jumping action:

I added the Rigidbody component and checked the Freeze Rotation Z checkbox to prevent the character from rotating and falling on the ground.
I could have used direct velocity manipulation or AddForce, depending on the specific requirements of my game and the level of control I needed over the physics simulation. while more complex scenarios may benefit from the physics engine's capabilities provided by AddForce, direct velocity manipulation is usually more suitable for simple 2D games with straightforward character movement.
I also added a collision check to ensure the character jumps again only if it’s back to the Ground.

// This is the "jump" action callback method
if(_isGrounded)
{
   _rigidbody.AddForce(new Vector2(0f, _jumpForce), ForceMode2D.Impulse);
   _isGrounded = false;
}

_isGrounded is set to true when the character collides with the Ground.

Fire

As I mentioned in the beginning, the action type "Button" only has the "Performed" phase. So, to simulate the Started and Canceled callbacks, inside the OnFire() method, I set a condition to change on each "Performed" phase (once on pressing the key, and once on releasing it).

  void OnFire(InputAction.CallbackContext context)
  {
     if (context.performed)
     {
         // Button action Type only has Performed phase, once at pressing the key and once at release
         // so I flip the _isFiring value on each Performed callback to semutale Started and Canceled callbacks
         _isFiring = !_isFiring;
      }
  }

Fire() method instantiates the bullet prefabs at the spawn location and towards the parameter's direction:

private void Fire()
{
    // Determine the rotation based on the orientation of the fire point
    Quaternion bulletRotation = (_firePoint.localScale.x > 0) ? _firePoint.rotation : Quaternion.Euler(0f, 180f, 0f);

    // Instantiate(whatToSpawn, whereToSpawn, adjustedRotation)
    Instantiate(_bulletPrefab, _firePoint.position, bulletRotation);

}

Then, I set a timer reset to ensure there is a fixed time gap between each bullet spawn:

    void FixedUpdate()
    {
        // Check if enough time has passed to fire another bullet
        _fireTimer += Time.fixedDeltaTime;

        if (_fireTimer >= _fireRate)
        {
            if(_isFiring)
                Fire();

            _fireTimer = 0f; // Reset the timer
        }
    }

Conclusion

Unity's new Input System is a powerful feature that any 2D or 3D game can benefit from. I hope this blog gave you some inspiration. You might need to do your own little research to find the right workflow for your project. Thanks for reading! Feel free to leave me comments and questions.

The functionality of my Player GameObject in my first 3D game

Atena Razm — Tue, 28 Nov 2023 04:13:41 +0000

in the script, I used Input.GetAxisRaw() method to make the Player object move around and jump.

Note: I used Rigidbody's AddForce() method to make the object jump. Set the ForceMode to "Impulse" to make the jump instant with a small amount of force, and the Unity Built-in OnCollisionEnter(Collision collision) method to make sure the player object jumps only when it's back on the ground, and I used a condition to specify the very first touch of the player to the ground is the one I'm looking for.

// condition to check if the player has touched the ground
    private void OnCollisionEnter(Collision collision)
    {
        if(collision.GetContact(0).normal == Vector3.up)
        {
            isGrounded = true;
        }
    }

Note: GetContact(0).normal
"Contact" is when 2 collider objects hit each other. And if they have weird shapes and touch each other from a few spots, then we need to specify which contact we need to work on. That's why we are passing 0 to the GetContact() function to specify that we need the first contact. "normal" means we are getting the normal direction of the contact, which is basically the direction that the object we are hitting is facing. (if we hit the ground, then the ground is facing up, so the normal direction is up).

To make the game object faces the direction of its movement, we set the transform.forward to rigidbody.velocity's x and z. (set the y to 0 to prevent the object facing up or down).
When the Player object hits the enemies we want to restart the current scene and start over (Game Over). To do so, we use SceneManager.LoadScene() method, which accepts the index of the scene we want it to load. However, since we don't know which scene at the time the player is going to be on, we just pass the index of the Scene in the Unity Build Settings that "GetActiveScene().buildIndex" returns to us.

// restarts the current scene
    public void GameOver()
    {
        SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex);
    }

To help the Enemy and Bonfire objects know if the Player object overlaps them, I just added a tag to the Player object. Read about them here.

The character is immune and blinks for 1.5 seconds after hitting a bonfire. I made a script named "BlinkGameObject" and added it to the HealthText and the Player objects. In the Bonfire.sc I check the conditions and call the Start and Stop the blink from the new script.

Note: To Hide and Show the Player object (Blink) once it touches the Bonfires I just set its local scale to 0 and brought it to 1 for 1.5 seconds via the InvokeRepeating() method.

public void CallStartBlinkGameObject()
    {
        InvokeRepeating("StartBlinkGameObject", 0f , blinkRepeatTime);   
    }

    void StartBlinkGameObject()
    {
        if(targetBlinkObject.transform.localScale == new Vector3(1, 1, 1)) {
            targetBlinkObject.transform.localScale = new Vector3(0, 0, 0);
        } else targetBlinkObject.transform.localScale = new Vector3(1, 1, 1);
    }
    public void StopBlinkGameObject()
    {
        CancelInvoke();
        targetBlinkObject.transform.localScale = new Vector3(1, 1, 1);
    }

Crafting My First 3D Game in Unity

Atena Razm — Tue, 28 Nov 2023 04:07:54 +0000

How did it all start?

Well, the very first steps of making this game were based on the "Create Your First 3D Game in Unity" tutorial from Zenva Academy, with the intention of learning how to do it!
After a few months, I added the new stuff I'd learned here and there from other websites to it. A few weeks ago, one of my developer friends played it on my computer and encouraged me to polish it and deploy it. He believed that I should publish a blog about it and get feedback on it from the people out there to make better games in the future. Here you go, help me improve my next game with your feedback!
It's noteworthy that the whole purpose of making this game was to learn and use the essential and basic Unity assets, namespaces, classes, and build-in methods, not using fancy outstanding purchasable assets or expressing a wonderful game story. So, let's keep it simple, and I will define different projects for those matters soon!!
Wanna give it a try? Play it here!

The Game Story and Rules

In all of the levels, the player character needs to collect 20 coins and reach the end flag within 60 seconds to pass to the next level. By passing a level, the dangerous items and obstacles get increased. Some enemies eliminate the character, and others just reduce the health by 1.

Up & down arrow keys: moving the object forward & backward (Z-axis)
Right & left arrow keys: moving right & left (X-axis)
Space key: jumping up (Y-axis)

Elements and GameObjects I Created

Scenes

I created two level scenes, one starting menu scene, and one win menu scene. Loading different scenes is done by SceneManager.LoadScene() method, which accepts the index of the scene we want it to load. Check out the SceneManager papular methods here.

Player Object

The Player character is made with the assets that came with the tutorial.
I made an empty object named Player, added the "advancedCharacter" Model to it as a child, and set the proper Scale (11, 11, 11) and position (0, 0, 0) for the best practice.
To make the player object respect gravity and stay on the ground, I added a Collider component.
To prevent the Player object from falling to the ground due to gravity I set the Rigidbody Component >> Constraints tab >> "Freez Rotation" option >> check the X, Y, and Z checkboxes.

Note: The RigidBody component applies physics to a GameObject, and Constraints checkboxes can freeze a certain axis, either the position or the rotation axis, so that the physics won't be applied to it.

Create the "PlayerController" C# script, and attach it to the Player object to control its logic and functionality.

Note: The functionality of the Player object is explained here in my The functionality of my Player GameObject in my first 3D game blog.

The offset property is set to the Main Camera to make a bit of space between the camera and the player object.
I used Unity InputSystem to set the game for Gamepad, following this tutorial.

Main Camera

Note: To make the camera follow the player object, Make it a child of the Player gameObject, and in its script file, set the transform.position equal to target.position. (in Unity Inspector, assign the target property to the Player object)
Offset property is set to the camera to make a bit of space between the camera and the player object.

Dangerous Terrian and Lava Hills

This prefab is not part of the tutorial, I made it by myself. I got the lava material from the Unity Asset store here.
Then I created a Terrain GameObject, called LavaGround. In the Inspector, I picked the "Paint Terrian" brush (the second tab from the left side) and chose the "Paint Texture" option from the dropdown. Then clicked the "Edit Terrian Layers" and chose the Lava Asset I downloaded earlier into my materials folder. I also chose the "Rise or Lower Terrain" option to create the hills.
Then I added the LavaGround script to it, and since the Terrain collider is different from the Enemy's box Collider, I used Collision.collider method to check if the player touched the LavaGround. Read more about the Collision class here.
I might make the lava ground move with an offset to make it more dynamic.

Leaderboard Canvas

For the Leaderboard, I used Canvas, which is a game object that contains all of the different UI elements that we wanna display on screen. It is supposed to show our collected Coins, Health, and Timer. Later on, I also added the Flashing "Game Over" message to it.

Note: I might add a "Pause" and a "Speaker" button to it.

The health text blinks on touching the bonfires. To do so, I kept switching its activation via SetActive(true/false);

If the player reaches the EndFlag before collecting all coins, the leftover coins' text flashes red for 1.5 seconds. For the red flash functionality, I made another exact same text object, placed it on top of the first one, and switched its scale between 0 and 1 on the desired moment via GameObject.transform.localScale = new Vector3(0,0,0); ref
To add the color background, I had to add an "image" component to it.

Timer

TextMeshProUGUI is used to display the timer's characters. I followed this tutorial to make the timer, and then I deactivated the minutes and separator components since the game round was just 60 seconds. I also added the "GameOver" object to the Timer script code and made it flash for 5 seconds along with 00 seconds, and then called the Start-Menu scene afterward. The Player object moveSpeed is set to 0 at GameOver time. To reach the Player's moveSpeed property from another component, I used: GameObject.FindWithTag("Player").GetComponent();
The timer is set to 00:00 by default, but it's being reset at the Start() method. In the Update() method we keep reducing deltaTime from the timer as long as the timer is more than 0, and we call Flash() once it reaches 0. I used String.Format() in UpdateTimerDisplay().

Enemies

Enemy is a simple red cube from the same tutorial that moves back and forth between two positions with the specified speed. This game object passes through any other objects in the game but the Player. Touching the Enemy kills the Player and restarts the same scene.

In the Update method of the Enemy script, we used the MoveTowards() method to make the enemy object move between two positions.

// Update is called once per frame
    void Update()
    {
        transform.position = Vector3.MoveTowards(transform.position, targetPos, speed * Time.deltaTime);

        if(transform.position == targetPos)
        {
            if(targetPos == startPos)
            {
                targetPos = startPos + moveOffset;
            }
            else
            {
                targetPos = startPos;
            }
        }
    }

Note: Speed is gonna move us at the rate of "speed" per frame. What I needed was moving 1 unit per second, not per frame. That's why I am multiplying speed by Time.deltaTime.

When the Player object overlaps an Enemy object, the OnTriggerEnter() method is called.

private void OnTriggerEnter(Collider other)
    {
        if(other.CompareTag("Player"))
        {
            other.GetComponent<PlayerController>().GameOver();
        }
    }

Note: "other" is the object the Enemy hit, which is the Player object here. First I checked the object's tag to ensure it's the Player. Then from that object, I called the GameOver() method from the PlayerController component using GetComponent.
Note: The OnTriggerEnter(Collider) method is very similar to the OnCollisionEnter(Collision), but instead of detecting if two objects hit each other, it detects if they overlap.

Bonfires and Smoke Particles

Touching the bonfire objects reduces the "Health" by 1. This prefab was not part of the Zenva tutorial, I added it by myself.
This object is created with 3 different objects:

Tim

FireParticles

BurnEffect

I have used Unity ParticleSystem to make the fire and the smoke. ref-1, ref-2, ref-3
The smoke Triggers in case of Player colliding. Learn more about the ParticleSystem here.

Coins

The coin object was created the same way as the Enemy object and got a script assigned to it.

void Update()
    {
        transform.Rotate(Vector3.up, rotateSpeed * Time.deltaTime);

    }

    private void OnTriggerEnter(Collider other)
    {
        if(other.CompareTag("Player"))
        {
            other.GetComponent<PlayerController>().TotalCoins(1);
            Destroy(gameObject);
        }
    }

Note: Since I wanted the coin to rotate around the Y axis, I passed "Vector3.up" as the first argument and the desired rotation speed as the second argument to the transform.Rotate() method.

Level Creation

Before making the levels, I made all of the mutually used game objects like the Player, Enemy, Count, and MainCamera prefabs, so that I can use them all in all of the levels without having to remake them over and over.

Then I made the Platforms prefabs and added them to the scene. Then I set the lighting:

Click the Auto Generate Lighting to open the lighting window
Make a New lighting
Click the Auto Generate checkbox
You can also play around with the Directional Light

Then I made the EndFlag prefab.

EndFlag

Made the EndFlag prefab
Created the Level-2 scene
Added the second scene to the scenes list on: File >> Build Settings… Drag and drop the scenes into the "Scenes in Build" list

Note: The scenes are being called based on their index number in the list.

Then in the EndFlag script, I set conditions to change the level in case the Player object collides with the flag, and all of the coins are collected. SceneManager.LoadScene() method can accept the scene index number or its name as an argument. Read more here.

Start Menu

For each menu scene, I created a separate canvas to display. In each menu scene's Main camera inspector, I changed the skybox option to a solid color. Then I added 1 TextMashPro and 2 Button-TextMashPro objects from the UI tab, named "Play", and "Quit!".
Each of them is calling a method on the Menu script, which is attached to our canvas. To do so, I dragged and dropped the Canvas object to the onClick event listener in the inspector, and picked the relevant method for each button.

Audio & Sound Management

Following this tutorial, we need 3 things:

Creating an empty object called AudioManager
Sound Source Component (in the AudioManager EmptyObject)
Audio Listener Component (in the Main Camera Object)

I recorded my own voice with Mac's VoiceMemo application and converted the m4a file to mp3 on CloudConvert.

Build and Deployment

I built the app locally and published it on itch.io.

Improvement Ideas & Optimization

Adding some movement and animation to the dangerous ground and the Player game object
Adding more sound effects to the Player's movements and background music
using more decent audio and material assets from the Unity Asset Store to give it a more professional look
Adding more enemies for the next levels and increasing the type of challenges
Adding the "Pause" and "Mute" buttons to the Leaderboard.

Conclusion

Making my first 3D game in Unity was not just about pixels and code; it was about getting real and trusting the little voice in my head saying: "Just do it, it'll get easier next time!". While the initial intention of crafting this little game was to showcase what I knew about Unity and game development, it actually opened my eyes to the world of my unknowns. As a result, now I have a longer To_Learn list!