From Prototype to Work of Art

Gabriel Asay
4 min readMar 20, 2024

--

This article marks an exciting turning point in our journey as I take the next step in developing the game prototype featured in my previous articles by introducing vibrant art assets. Join me as we elevate the visual appeal and immerse ourselves further into the world of game development!

But before we dive into the fun part, let’s first understand why game prototyping is so important.

Every game developer knows the golden rule: prototype before you polish! Why waste hours perfecting a game that’s about as fun as watching paint dry? Prototyping lets us whip up a quick taste of gameplay, toss it to the wolves (aka playtesters), and see if it’s got the spark we’re looking for. It’s like trying on shoes before you buy them — why commit to something uncomfortable when you could strut in style?

I hope that sheds some light on the significance of prototyping. Now, let’s transition into the process of transforming my Unity3D prototype into a 2D game with captivating assets.

I’ll begin by dragging a background into the scene and creating a background sorting layer to add it to.

I’ve resized the background to fit my game screen. I’ll now drag the sprite for my player into the hierarchy, attach the script from my prototype player, copy the values over from it, and then delete the cube.

We need to attach a Box Collider 2D to our Player and mark it as a Trigger. Then, we’ll adjust the collider’s size in the Scene view to fit the player sprite.

That’s about it for the player. Now, let’s move on to the enemy. We’ll begin by dragging the enemy sprite into the hierarchy, just like in the previous examples. Then, we’ll attach the enemy script, add a Box Collider 2D, mark it as a trigger, and finally, drag the enemy object into the Prefabs folder.

We’ll follow the same process we used for the enemy with our laser. Make sure these three objects have their respective tags. Now, we can open up our Laser script because there have been some changes, and we need to update it to ensure we’re still getting collisions. Below is the script I’m going to modify.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Enemy : MonoBehaviour
{
[SerializeField]
private float _speed = 4.0f;

// Start is called before the first frame update
void Start()
{

}

// Update is called once per frame
void Update()
{
transform.Translate(Vector3.down * _speed * Time.deltaTime);

if (transform.position.y < -5)
{
float randomX = Random.Range(-8.5f, 8.5f);
transform.position = new Vector3(randomX, 5.3f, 0);
}
}

private void OnTriggerEnter(Collider other)
{
if (other.tag == "Player")
{
Player player = other.transform.GetComponent<Player>();

if (player != null)
{
player.Damage();
}

Destroy(this.gameObject);
}
else if (other.tag == "Bullet")
{
Destroy(other.gameObject);
Destroy(this.gameObject);
}

}
}

Basically, all we have to do is go to the OnTriggerEnter() method and add ‘2D’ after ‘Enter’ and ‘Collider’ like so:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Enemy : MonoBehaviour
{
[SerializeField]
private float _speed = 4.0f;

// Start is called before the first frame update
void Start()
{

}

// Update is called once per frame
void Update()
{
transform.Translate(Vector3.down * _speed * Time.deltaTime);

if (transform.position.y < -5)
{
float randomX = Random.Range(-8.5f, 8.5f);
transform.position = new Vector3(randomX, 5.3f, 0);
}
}

private void OnTriggerEnter2D(Collider2D other)
{
if (other.tag == "Player")
{
Player player = other.transform.GetComponent<Player>();

if (player != null)
{
player.Damage();
}

Destroy(this.gameObject);
}
else if (other.tag == "Bullet")
{
Destroy(other.gameObject);
Destroy(this.gameObject);
}

}
}

Cool! Let’s view the game now and see how it looks and plays:

Wow! That looks so much better than just a cube and blank background! And this is just the beginning of my polishing phase for this game. If you want to see more, stick around because I’ll be posting these articles daily. That’s all for today. Happy Coding!

--

--