The second Game Jam theme is UI and game juice. For this game jam, I worked by myself. The theme I chose was game UI, where I will possibly look to Skill Tree mechanics to use in the capstone project. This project is very coding heavy; it will be a good learning experience to learn more about UI within Unity while learning more coding elements and coding, which is not my strong suit within game design. Where I only know the basics.
Research
Once, I chose the skill tree as the main focus for this game jam. I first started the project by researching how different games have used skill tree mechanics. The Final Fantasy series was the main influence I researched for the skill tree. Each game does a different interpretation of the skill tree mechanism. Through the research, I looked into the different strategies games use for the skill tree, what types of abilities games are used, etc. After researching and looking at what elements/abilities can be implemented for the skill tree, I plan to design. I figured out the main skills: physical attack, magic attack, physical defence, magic defence, attack speed, and HP.
For the skill tree structure, planning to use the final Fantasy 16 skill tree as the main influence from researching different games' skill trees. Final Fantasy 16s ended up being the most simple in design and functionality. These are critical elements for the skill tree for the project, as we have a short time limit to work. As a result, the skill tree is kept simple but functional.
Art for Skill Tree UI
Next, I started designing and creating art for the skills themselves. For this, I wanted to go with very simple and easy-to-read UI/designs as I do not want to overcrowd the screen with detailed designs for the skill tree. As a result, I created icon symbols for each skill. Make sure the icon is easy for the player to understand. Here are the final icons. Created the icons in Procreate
Brainstorming Skill Tree Structure
After researching, I started doing a rough design for the potential structure and UI for the skill tree. Through brainstorming, I came up with a structure inspired by FF16 that had circles for each skill theme. As a result of the structure of my skill tree, planning to have one large circle, then it will branch off to other mini circles. Each circle will have a theme. For example, one circle theme could be around physical skills such as attack and defence. Here is a rough sketch of me brainstorming different potential designs.
Base Coding For Skill Tree Mechanic
Once the designing elements are done, move on to the coding side of the skill tree, coding is not my strong point, so for this, I used a tutorial series that fully breakdowns how to code a skill tree in Unity. To help me have a better understanding of coding. The first code to create is the code for three different scripts. The player skill manager, skill tree library and the scriptable objects for the skills. This was my second coding for a project. This was a great experience as the tutorials I used fully broke down the reasoning for each form of code. This made it a lot easier to understand the code, as learning this code used elements that hadn't been used before. I had only done basic coding before this, so it was an interesting experience. Here are photos of the work in progress for coding the skill tree's base code.
UI
UI Document
Next I move onto the UI side of the skill trees for this I learnt about a the tool of UI documnet. Where it creates a new state file, this opens a window; from there, you can create your UI. On the left side, it has different tools that you can use to create different types of UI, for example, the visual element. You can add images, colours, text, scrollers, and more here. I want to explore more in the future all the tools that can be used in the UI document. The UI document also uses layers and hiragies on the left side, similar to the regular Unity. I never knew Unity had a function like this. Learning the UI document is similar to how UI is down in the Unreal engine; however, it is regular c# code instead of blueprints. For the UI document, I ensured the canvas was the same size as the screen. From there, I experiment with the different tools within the document. Through play around i found the UI documnet alot easier to loayout and creat UI compared to how i have normlay done UI which is on a canvus in the scene. Here are some photos of work in progress.
UI coding
In the tutorial, they also show how you through the UI document you can also do UI through coding in the UI document. Where you create the header and the first label. From there, you go into the UI code. From there, you can copy the line for the text and edit it to change the writing and the label for the text. I did this with different skills. I didn't know you could do UI through coding. It was an interesting experience to learn, and through the process, it was a lot easier and quicker to set up the different skill names through the code, going through the text one by one. Here are some photos of the process.
Reflection
Due to the time frame, I was unable to complete the skill tree within the 2-week limit. However, I learned a lot about UI design and how you can create UI within Unity. This project taught me about the UI document, which uses a separate window to create UI. Where before this game jam, I thought you only used the canvas to create UI. So, it was an interesting experience to learn about the tool UI Document. Learning about the tool reminded me how Unreal Engine does its UI, as they are similar to using a separate window instead of a canvas. I will continue to learn and experiment with the UI document in the future,e as it makes creating a menu-type UI much easier.
Another element I learned through this game jam is creating UI through coding. This was very interesting to learn as coding isn't my strong suit, but learning and experimenting with the coding method through the UI document made creating UI much quicker than using the normal method of creating each text label from scratch or copying and pasting.
I will continue working on the skill tree for the capstone. Reflecting the game jam it was an interetsing exerpinces looking more inot ui in Unity as i havent explored this side of Unity very well compared to over elemenst. Defferinlty wants to come to learn more about UBity UI for the capstone project and other future projects.
Komentarze