Games Development / Task 2: Art Asset Development & Game Prototype

8.9.2023 - 10.11.2023 (Week 2 - Week 11)

Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media

Games Development

Task 2: Art Asset Development & Game Prototype

---

LECTURE

All lectures were completed in Task 1: Game Design Document.

---

INSTRUCTION

Art Asset Design

First, update the design from the proposal to the finalized design. This process shall occur on Illustrator, and the images created will be imported into Unity and used.

Fig.1: First Rough Idea in Proposal

Character Design

In the original data, the baby was human. However, I thought it was not very cute, so I did a lot of research on the design.

Fig.2: Baby Illustration Reference

From PhotoAC

Using a figurative expression as baby = chick, I drew a new illustration of the main character.

Fig.2: Drawing Process 1

Fig.3: Drawing Process 2

Fig.4: Drawing Process 3

The face of the damaged was also created and placed simultaneously at this stage.

Enemy Design

Similarly, enemy graphics were created.

Fig.5: Enemy Design

As a moving enemy, a raven was created. I wanted to express the flapping of its wings, so I created two images of it with its wings open. Later convert to animation in Unity.

Fig.6: Trap Design

I made an image of a trap that doesn't work. These do damage to the player they hit, but unlike crows, they do not move.

Fig.7: Screen Draft 1

UI Design

Fig.8: Screen Draft 2

In addition, a UI needs to be created.

The following elements are needed for the game to function

HP gauge: When it reaches 0, life is reduced by 1. Maximum 10.

Life: Game over when life is lost.

Coins: When you accumulate 10 coins, your life will increase by 1.

The three buttons in the upper right corner are: back to menu, restart from the beginning, and pause.

Fig.9: HP gauge

Fig.10: Life & Coin Icon 

Fig.11: Pause Button

Fig.12: Pause Screen

I then prepared a picture of the assumptions that have been summarized so far on a single screen.

Fig.13: Screen Visual Assumption

Game Prototype Development

First, output the image in Illustrator and convert it to a sprite. I also placed the player, ground, and background.

Fig.14: Placement in Unity

From here, I scripted the following logic

Background:

The background image is tiled, loops left and right, and flows to the left.

Clouds and buildings move at different speeds to add depth to the screen.

Characters:

The character can jump two steps.

On slopes, the character always descends according to gravity. Therefore, two types of ground were prepared in the program: flat ground and sloping ground.

The management of ints such as lives and coins in the UI is also tied to the character.

Enemies:

Causes damage when it hits the character.

Fig.15: Character Controller Script

void Start()

{

    player = GameObject.Find("Player").GetComponent<CharacterController>();

    anim = GetComponent<Animator>();

}

// Update is called once per frame

void Update()

{

    

}

private void OnTriggerEnter2D(Collider2D collision)

{

    if (collision.gameObject.name == "Player")

    {

        player.hitPoint -= 1;

        anim.Play("trap_collected");

    }

}

Codes for enemies, traps, etc. were addressed in this way. The animation includes turning off collision, so it does not affect the subsequent game progress.

If you fall down a hole, it's game over. Therefore, there is a sign in front of the hole that warns of danger.

Fig.15: Sign

From here, I proceeded to the development phase, re-outputting assets that we thought were missing.

Fig.16: Heal Item

Fig.17: Projectile (Attack)

The projectile, the means of attack, was designed to fly in a parabolic pattern. I will show it in the presentation video.

Vector2 spawnPosition = transform.position;

GameObject projectile = Instantiate(projectilePrefab, spawnPosition, Quaternion.identity);

Transform playerTransform = transform;

float radianAngle = Mathf.Deg2Rad * projectileAngle;

Vector2 launchDirection = new Vector2(Mathf.Cos(radianAngle), Mathf.Sin(radianAngle));

Rigidbody2D rb2d = projectile.GetComponent<Rigidbody2D>();

if (rb2d != null)

{

    rb2d.velocity = (playerTransform.right * launchDirection.x + playerTransform.up * launchDirection.y) * projectileSpeed;

}

However, it is not working very well and needs to be fixed.

Fig.18: Pause

Fig.19: Game Over

The pause and game over functions are not working as well in this stage. The logic is to set an invisible floor at the bottom of the hole and if you touch it, it is game over.

---

WALK-THROUGH

Fig.20: Play Video (12/11/2023)

*Technical attestations and specifications are explained in subtitles.

The following is a list of what is done and what is unfinished for the finished product.

Done;

Player movement, Slip on slope, attack function, double jump, expression of being hit by enemy

Background, Double layered and different move speeds, Fixed in Camera angle

Enemy and item animation, HP system, damage ( internal)

Not Yet;

Bullet doesn't work to enemy for now

UI (Such as reflection of internal HP, coin, and life), Pause function, Restart

Start Screen, Game-starting storyboard scene, Boss stage, Game clear scene

Map Decoration (Images already have)

---

REFLECTIONS

Two main challenges were imposed in this assignment.

The first is about the assets that govern the aesthetic of the game. I made images using Illustrator. I tried to make and arrange all the parts myself as much as possible, but it was quite challenging. I tried to style the entire screen more harmonized, but I felt that this in turn made it difficult to tell the difference between the background and the characters, which detracted from the playability of the game. For this reason, I changed the color of the player character to a slightly darker color.

I also had to convert the images into assets and animate them one by one. I faced some technical troubles with animations that I can't see now, such as crows being shot down, and there are some parts that I couldn't show in the play demo. Therefore, I'm going to try to achieve a cleaner finish in the final version.

At first, I thought I could manage the prototype by thinking up my own logic and finding a way to do it in chat GPT, but I had many troubles such as not being able to reference it when I actually turned it into source code. For example, other scripts could not refer to the numbers specified in the character controller, or the triggers for switching camera angles did not work, etc. Every time I faced a problem, I had to stop for several hours, and the work did not progress as I wanted.