From Prototype to Work of Art

6 min readApr 3, 2024

Basic game development cycle:

Create primitive art
Create game logic using primitives
Swap in Advanced artwork and audio
Repeat

Drag desktop folders of audio content and artwork (.jpg and .png) to the Asset folder of the Project view. (stop game is game is running)

Vocabulary: a sprite has texture 2D and UI

Two dimensional object creation presents a different menu: Sprite, Sprite Mask, and tilemaps.

<click> to toggle from the 3D to the 2D view.

Game 2D view with no axis compass in upper right corner

Steps to bring in artistic look of game.

<click> and <drag> a space BG overlay into the hierarchy. A BG overlay is 2 dimensional (a .png picture), so its component in the Inspector is a Sprite.

resize the background asset with the <Rect> tool in the game view to match the size of the camera view. Rename from SpaceBG_Overlay to Background.

The Sort Layer in the Sprite Renderer Component in the Inspector brings action objects to the front and pushes a background behind. Sort layers number from 0 to 1 and on up, higher numbers are in front of lesser number layers in the view.

Method One: Create new 2D object

The 3D Player object has 3D components of Cube, Mesh Renderer, Box Collider, rather than convert a 3D to a 2D GameObject, maybe just rebuild the Player as a 2D. The Player (Script) is important to keep.

The replacement 2D gameObject is the Player_Turn_Left0000

<double-click> and Player_Turn_Left0000 appears in a new window.

<click> to highlight the Player_Left_Turn0000 to “Player” in the Inspector

As “Player” has disappeared from the script folder in Assets, <click> on the 3D Player in Hierarchy and <click> the right-most triple-dot icon to copy the script to the 2D Player replacement.

Highlight, Copy and Paste to 2D Player object

After choosing Copy Component, the script appears as a new Asset. Don’t delete the Asset.

Copied Player appears in Asset list, unattached.

The Player script in the Assets can now be dragged to either 2D Player in the Hierarchy, or to the Add Component area of the Inspector (highlight the Hierarchy 2D Player first).

Duplicate Player can be dragged to destination 2D Player

The 2D Player is a different size than the 3D Player, so adjust the SerializeField values as needed.

Drag Prefab to new 2D Player destination

Okay to Save, delete the 3D Player.
Tag 2D Player “Player”.
Make Transform adjustments, scale.

Method Two: Convert 3D object

<click> to highlight the 3D Enemy GameObject. In the Inspector, an <Open> button appears in the Inspector.

Open button in Prefab component of Inspector

Remove the 3D components that will be replaced by 2D components:

Mesh Renderer, 3D Box Collider, Cube (Mesh Filter), 3D Rigidbody

Remaining Transform and Enemy (Script) Components

<click> to highlight Enemy in the Hierarchy, and <drag> the source asset EnemyTurnLeft0000_00000 to the Inspector Sprite Renderer Component “Sprite” source box.

Drag source Asset to Sprite Renderer “Sprite”

Add Sorting Layer of Foreground.

Here a Sorting Layer is added, not assigned to the Enemy object

First step of adding a named Sorting Layer

Here are choices Background and Foreground. Layer 1, less than “2” means that the Background will be in back of the Foreground in the camera view.

Two new Sorting Layers Background and Foreground

Now the Layer can be applied to the 2D Enemy object

Adding 2D RidgidBody to the Enemy object

Add RidgidBody 2D

Remove Gravity effect. Set Gravity to zero. Movement is handled by the Script.

Gravity Scale set to zero

Add Box Collider 2D to Enemy object and Player object

Checkmark the Is Trigger box.

The Player GameObject is in the Hierarchy, and the size of the collider 2D box is edited with the “Edit Collider” icon.

Edit Collider icon to adjust size of Player Box Collider

Here is a tighter adjusted Box Collider for the Player object. When done with the adjustments, <click> the icon again to make the collider solid (keep the measurements).

To adjust the Enemy’s Box Collider, make an Enemy object visible by opening the Prefab Look Dev — the “Open” icon in the upper right corner when Enemy is highlighted.

Note the difference of Prefab editing background from the Scene background.

Editing the Enemy Box Collider with the Prefab Look Dev

Note if editing through the Inspector was done from an Enemy Object dragged into the Hierarchy, then be sure to update the Overrides All.

Changing 3D OnTriggeredEnter code to 2D OnTriggeredEnter code

Before:

    // from the Enemy.cs file
    private void OnTriggerEnter(Collider other)
    {
    ...
    }

After:

    private void OnTriggerEnter2D(Collider2D other)
    {
    ...
    }

Deleting the Laser GameObject and starting from Scratch

Remove the 3D Laser from Assets. Deleting the Laser Prefab does not delete the Laser Script

<click> and <drag> the 2D Laser from the Asset list up to the Hierarchy to view in the scene and see adjustments as they are made.

Adjust Components. Foreground Layer (Sprite Renderer), much smaller scale (Transform)

Size and Layer adjustment to Lazer gameObject

Adjust the Laser behavior. There is already a Sprite Renderer component.
Add a Box Collider 2D component. Edit the collider to tighten around the Laser.
Add a Rigidbody 2D component. Set Gravity to zero.
Add Script component.

Prefab the Laser, <drag> to Asset Prefab folder. Delete from Hierarchy list.

<click> <drag> from Hierarchy to Asset Prefab folder

<click> to Highlight Player, <click> and <drag> to restore Laser Prefab to Player Script.

Highlight Player, drag Prefabs laser to Laser Prefab component of Player

Set “Is Trigger” in the Box Collider component is checked on each gameObject.

Fine tuning the Laser offset when leaving the Player object

Run the game, fire a laser and pause game.
Position fired Laser(clone) at (0,0,0). Position the Player at (0,0,0) also.
Zoom in and position the Laser(clone) along the y-axis offset from the Player. Take note of the offset.

Making adjustment to y-axis Laser offset

Update the y-axis offset to the FireLaser method in the Player class. (0, 1.1f, 0)

    // from Player.cs file
    void FireLaser()
    {
         _canFire = Time.time + _fireRate;

        //Instantiate(_laserPrefab, transform.position, Quaternion.identity);
        Instantiate(_laserPrefab, transform.position + new Vector3(0, 1.1f, 0), Quaternion.identity);
    }

Complete Laser object with a tag for recognition by Enemy Script

Laser Prefab object in need of its tag name Laser

In Conclusion, zoom back out to run a game test.