Week 10 - Week 12
Wong Khye Qing / 0361000
Games Development/ Bachelor of Design (Hons) in Creative Media
Task 3: Game Prototype
Games Development/ Bachelor of Design (Hons) in Creative Media
Task 3: Game Prototype
Instructions
What is in Task 2?
In previous task I have almost finish with the creation of the assets and sprite for the games. I have made a few character sprites that covered a some character movements, as well some some collectables and enemy. Here is a summary from the previous task:
Character & Enemy Design
- Character Final design: Bright Red hoodie, Blue jeans, refined edges, and shading for depth.
- Character Animation states: Idle, Walking, Jumping, Ducking, Falling, Hurt, and Dying.
- Enemy Concept: A locker that shoots swords, originally thought to be a cupboard.
- Enemy Final design: Gray, weathered texture, angry expression, and detailed animations for Idle, Attack, Hurt, and Dying.
Collectible and Portal
- Metronome: Grants invincibility for 2 seconds.
- Paper Notes: Essential for activating portals to progress levels.
- Flag O’ Reset: Checkpoint for respawning after death.
- Portal that only activates by collecting Paper Notes, allows progression to the next level.
Background & Platform Assets
- Forest: Far and middle background variants for different levels with a parallax effect.
- Abandoned Castle: Brick background with cracked walls and old pillars for the final boss level, with parallax effects.
- Dirt Platforms: Used as flooring in normal levels, multiple angles for high compatibility.
- Stone Platforms: Used in the boss level, compatible with the castle environment, including stone spikes that kill players on contact
Task 3: Game Prototype
The whole progress for this task 3 can be split into a a general two segments, which are:
- The Game movements and Mechanics
- The Interface featuring the Game interface
This will be a prototype to demonstrate a gist of my game direction and some of the progress that I have done with the assets and sprites that I have built.
Game movements
Fig 1.0 Mark Facing Left & Right, Walking
private void Flip()
{
isFacingRight = !isFacingRight;
transform.Rotate (0.0f,180.0f,0.0f);
}
private void CheckMovementDirection()
{
if(isFacingRight && movementInputDirection < 0)
{
Flip();
}
else if(!isFacingRight && movementInputDirection > 0)
{
Flip();
}
isWalking = rb.velocity.x != 0 || rb.velocity.y != 0;
}
Fig 1.1 Flip Character, C# Script
The character will have the default ability to face to the left and to right when moving towards a direction. This has allowed it to be horizontally flipped when it is going to a horizontal direction. This is an important line to allow the character to face a certain direction.
private void CheckMovementDirection()
{
if(isFacingRight && movementInputDirection < 0)
{
Flip();
}
else if(!isFacingRight && movementInputDirection > 0)
{
Flip();
}
if(rb.velocity.x != 0 )
{
isWalking = true;
}
else
{
isWalking = false;
}
if (rb.velocity.y != 0)
{
isWalking = true;
}
else
{
isWalking = false;
}
}
Fig 1.2 Walking, C# Script
The rb.velocity.x != 0 will be able to check if the user is moving, if it is moving, then the isWalking will be set to true, enabling walking. If not, the walking will halt and same goes to the animation, stopping the walking animation on the spot.
Fig 1.3 Mark Jumping & Die
private void CheckIfCanJump()
{
if(isGrounded && rb.velocity.y <=0)
{
amountOfJumpsLeft = amountOfJumps;
}
canJump = amountOfJumpsLeft > 0;
}
private void Jump()
{
if (canJump)
{
rb.velocity = new Vector2(rb.velocity.x, jumpForce);
amountOfJumpsLeft--;
}
}
private void CheckInput()
{
movementInputDirection = Input.GetAxisRaw("Horizontal");
if(Input.GetButtonDown("Jump") && isGrounded)
{
Jump();
}
}
Fig 1.4 Mark Jumping & Die
The character can jump for only once unless it touches the floor. It has been limited to only able to jump once instead of double jumping. It was able to be done by using the isGrounded to ensure that the character is touching the ground in order to jump. The amountOfJumps controls the number of times that the character, this is just an extra line to make sure that I can still edit the number of time the character can jump.
Fig 1.5 Animator Tool with Parameters, Unity
The Animator Tool has been a great tool to enable animation transition between different animation stages. Most of the animation for the character has been done here and the animation went smoothly.
Fig 1.6 Flow of the Animation
The default animation will be mark_idle which is the Idle State, it will be in a constant loop and allowing the the animation to play non stop. Until, the player starts walking which switches on the mark_walk that allows it to walk with the integration of some scripts.
Then mark_fire can be access through the idle stage which allow the animation to show that the character is firing projectiles. Players can also access mark_die from Any State, meaning the player can die in any kind of stage, because the player can meet with different types of enemies or traps when in different stages.
Parallax Background
Fig 1.7 Layers in 3D View & Parallax Effect
I have integrated Parallax Effects in my game that consisted of the foreground, midgound and background, a total of tree layers. The reason I added this effect was to add depths to the game and not make it too flat. This is because the parallax effect did allow different layers to move in different speed with the camera, making an illusion of a smoother and depth animation.
Fig 1.7 Polygon Collider 2D
The Polygon Collider is used to bound the Cinecamera as well as the Parallax Effect script to move in a specific box and not supposed to go out of the border and view the outskirt of the game.
Problems with Importing Sprites
Fig 1.8 Color Bleeding with Sprites
The color on the sprite bleed when I import and edited in the Sprite Editor, it was a file from the Aseprite. Which was why I resorted to another way of importing the sprite.
Fig 1.9 Tagging in Aseprite
Seems like tagging in the Aseprite is a more easier way to add in all the animation. Unfortunately, I was unable to edit in the Animator Panel (right image), upon saving, the animation transition lines will be removed rendered all the parameters to be useless.
My Approach
Fig 1.10 Manually Adding in Sprites One by One
Then I would need to revert back to the manual way for importing the sprites to the Animation panel to set the animations for the different states of the character. I will the use the a Animate Controller to add different animation states in manually.
Health System
Fig 1.11 Health UI & Declaring of Health Sprites
void Update()
{
for (int i = 0; i < hearts.Length; i++)
{
if (i < playerHealth.currentHearts)
{
hearts[i].sprite = fullHeart;
}
else
{
hearts[i].sprite = emptyHeart;
}
hearts[i].enabled = i < playerHealth.maxHearts;
}
}
Fig 1.12 Health Management
One of the lines from the code to ensure that the lives do not go below 0 and ensure that it does not exceed 3 lives.
public HealthSystem playerHealth;
void Update()
{
if (Input.GetKeyDown(KeyCode.E))
{
playerHealth.TakeDamage(1);
Debug.Log("Took Damage");
}
if (Input.GetKeyDown(KeyCode.H))
{
playerHealth.Heal(1);
Debug.Log("Healed");
}
}
Fig 1.13 Cheat Codes for Health
Cheat codes that I used to test for health damage and heal. By just pressing H, I will be able to heal one health and press E to damage one health.
Summary of Mechanics
Below are the gist of what was mentioned for the Game mechanics and others:
- Character flips horizontally based on movement direction when facing left or right.
- Walking affects
rb.velocity; the character will move ifrb.velocity.xorrb.velocity.yis not zero. The walking animation stops ifrb.velocityis 0. - The character can only jump when grounded; no double jump is allowed.
- The Animator Tool allows for smooth animation transitions with transitions and parameters.
- Default idle animation transitions to walking, firing, or dying animations based on conditions.
- Parallax Effect is integrated for foreground, midground, and background layers to add depth by moving layers at different speeds relative to the camera.
- Polygon Collider 2D is added to serve as camera boundaries, restricting the camera and parallax effect within the sprite boundaries.
- The Health System updates the health UI based on current and maximum hearts.
- Health Management limits health to not go below 0 or exceed the maximum value.
- Cheat codes for health: Press H to heal and E to take damage for testing purposes.
Tiles Palette for Sprites
Fig 2.0 Usage of Tiles Palette & Tilemaps
I have used the Tiles Palette in importing the tiles for the platforms, I was able to easily put in the platform sprites just like painting it. Then I have included the Tilemap, Composite Collider 2D and Rigidbody 2D where I was able to allow the player to stand on it and not go through it.
Health UI
Fig 2.1 Health UI, Heart & Empty Hearts
I have featured the health status on the top left, which can seen easily by players. I have also tried to just as less hearts as possible in order to not clutter the whole page and makes calculation easier.
Spikes
Fig 2.2 Spikes
Spikes were also added the in the level to add obstacle and act as a trap for players to avoid.
Collectables
Fig 2.2 Collectables with Mark & Animation
Collectables were also added in order to enable the players to shoot, at enemies. If they did not collect the collectables they can attack their enemies.
Summary of the UI
Below are the gist of what was mentioned above for the overall UI elements:
- Usage of Tiles Palette to import the platforms,
- Tilemap, Composite Collider 2D and Rigidbody 2D were used to detect the characters and making sure that the characters will not go through the scene.
- Health status was located on top left, which can seen easily by players
- Spikes were added as an obstacle and trap
- Some collectables were added to grant players the ability to attack enemies
The Scoreboard
What have been done for this Task 3:
- Imported Sprites into the scene
- Integration of Player movements (Idle, Walk, Jump, Die)
- Integration of Health System
- Usage of Parallax Effect for backgrounds
- Introduction of Traps like Spike that Damage health
- Integration Health UI
- Cheat code for Health (H & E Key)
- Refined Character Movements
- Cinemachine and Polygon Collider 2D (Camera Boundary)
What's Next?
What is the things that needed to be wrapped up for Final Task:
- Completion of each levels Design and Mechanics
- Enemy Introduction with complete mechanics
- Completed Game UI (Menu, Pause)
- Refined Character Movements
- Combat Mechanics
- Collectables Completion
- FX, Music and Sounds Integration
Task 3 Final Submission
