Process for integrating UI resources in Unity

Required Tools:

• Git

• Git LFS

• Source Tree/GitHub Desktop

• Bitbucket/GitLab/GitHub account

• Unity Hub

• Unity Engine

Required Resources:

• Client Requirements Documentation

• Unity Project (Repository)

• Fonts (".ttf" or ".otf") 

• Backgrounds (".png" + ".psd")

• Panels (".png" + ".psd")

• Mockups (".png" + ".psd")

• Atlas (".png" + ".psd")(optional Aspect Ratios: 1:1, 1:2, 1:4, 1:8, ... 1:(N-1)*2)

• Figma Project (Read Only)

Technical Tips:

• All steps must be validated with a programmer and asked about the specific requirements at each step.

• Assets Naming

• Folders Naming

• UI GameObjects Naming

• Project Elements Naming

• Presets Naming

• Hierarchy Structure

• UI Scalability

• Responsive

• Containers

Design Tips:

• UX

• Art Style

Base Steps:

1. Take the Requirements (Get Referents)

   • Questions Client

   • Questions Resources

2. Make the Approach

3. Make the Commercial Proposal

Concrete Steps:

4. Make the Unity project setup on the computer.

5. Assemble the structure of UI windows into unity.

6. Make the UI responsive (see more)

7. Integrate UI resources into the unity project

8. Setup the atlas in unity (see more)

9. Replace and configurate each UI element in unity with the final resources.

10. Final Delivery

    • Window Prefabs (Unity Assets)

    • Window Example Scenes (Unity Assets)

IMPORTANT: These configuration must be done with a member of the engineering team.

Softwares and Accounts:

• Install Unity Hub

• Install Unity Engine (install the target version, install this from Unity Hub)

• Install Git

• Install Git LFS

• Install Source Tree

• Create Hosting Account (Bitbucket, GitLab, GitHub, others)

Project and Repository:

• Download the Project Repository

• Configure project (Custom Packages, Branch, others)

• Open Project with Unity Hub

IMPORTANT: You should consider:

• Remember to use the correct screen resolution.

• Remember to Setup the Canvas Scaler.

• Setup the stretch property to all the screen elements (see more).

Results:

• Prefabs with responsive.

IMPORTANT KNOWLEDGES: You should know about:

• Unity Engine Bases

• Unity UI Elements

• Unity UI Components

• Unity Prefabs

• How to Create Presets

IMPORTANT TIPS: Consider these points before to begin:

• Check that you are in the correct branch in Source Tree

• Define and Setup the game resolution (Game Window)

• Setup the components of the canvas

• Remember to use the correct screen resolution (Game Window)

• Remember to Setup the Canvas Scaler Component.

• Set the correct gameobjects naming.

• Remember Open the GUI Prefabs from the Asset and NO from the GameObject 

• [Optional] Create Presets

Results:

• Unity Assets (Images, Others)

• Sample Scenes

• Screen Prefabs (Define The Screen Hierarchy Structure with the Engineering Team)

IMPORTANT: You should consider:

• Responsive screens

Results:

• Screen sample scenes (The same scenes of the previous steps)

• Screen prefabs updated.

IMPORTANT: You should consider:

• The aspect ratio of the atlas must have a scale of 2.

• How to update an atlas.

• Set the correct assets name nomenclature.

Results:

• Add resources in the project and upload this to the repository.

IMPORTANT: You should consider:

• You have to know how to edit an atlas without broke the project. 

• How to update an atlas.

Results:

• Atlas configured in the project.

• Screen Sample Scenes (".unity")

• Screen Prefabs (".prefab")