StickDots - Online Mobile Game

Details

Team Name: Amir & Frens
Role: Programmer
Figma Link: https://bit.ly/3Yj63EG

Objective

Develop and deliver an online mobile game, while simulating a real "in-office" experience by collaborating closely with a team of 9 developers.

Tools & Technologies

C#, Unity, Figma, Photon

Project Summary

StickDots is a modern, 12-player max idle multiplayer game that reimagines the classic Dots and Boxes. Featuring online multiplayer, personalized user profiles, a turn-based system, and competitive leaderboards, StickDots brings timeless gameplay to the digital age.

My Contributions:

User Interface Design and Implementation

UI Implementation

My role in StickDots started off as the UI programmer. Being that the group is comprised of 9 programmers, there was a need for an artist, and I stepped up and took on the challenge (See Figma link in 'Details'). Along with designing, I took on bringing the art to the game.

As a UI Designer and Programmer on "Stick Dots," I delved into the intricacies of UI implementation for the first time. I invested significant effort in understanding the entire UI pipeline, mastering the use of canvases, layouts, and ensuring proper sizing for various aspect ratios. This experience enabled me to create a responsive and visually appealing interface that enhances the player experience across different devices and screen sizes.

I also learned the importance of programmatically adding UI elements. For example, when a player joined the lobby, I would instantiate a gameObject as a UI element, which would then appear as an entry indicating the player's presence. Using canvases and layouts, I ensured these elements were organized appropriately, contributing to a dynamic and user-friendly multiplayer experience. Additionally, I worked on the networking aspects of the multiplayer game, ensuring seamless interaction and synchronization between players.

The screenshot above illustrates the player list management system I designed, where each player joining the lobby is programmatically instantiated as a UI element.
I ensured the UI elements were correctly sized and aligned using canvases and layouts to accommodate different aspect ratios. This involved:
Player Entry Instantiation: Each player joining the lobby is represented by a PlayerListEntry clone, which includes their name, color, and ready status.
Grid Layout Group: Utilized Unity's Grid Layout Group to organize the player entries efficiently, ensuring a clean and orderly display.
Responsive Design: Ensured that the UI elements adapt seamlessly to various screen sizes and resolutions, enhancing the user experience.

I explored the power of Unity's built-in UI capabilities by connecting buttons to functions directly through the editor, as shown in the screenshot. This approach allowed me to quickly set up interactions without writing additional code, highlighting the convenience and efficiency of Unity's default UI system.
On Click Events: Utilized Unity's OnClick events to manage game object activations, ensuring that specific actions were triggered upon button presses.
No Programming Required: This method required no additional scripting, allowing for rapid prototyping and testing of UI elements and their interactions.

Player Joining Room Script

Key Learnings:

A solid understanding of UI design principles, dynamic instantiation of UI elements, and the importance of responsive design in game development.
Creating responsive and visually appealing interfaces that enhances player experience across different devices and screen sizes.
Understanding both built-in tools and custom coding approaches to choose the best method for different aspects of game development.
Knowledge in Photon PUN for real-time updates and custom properties management.