Design

web application, multiplayer game, whiteboard game, fabric js, game
Whiteboard Multiplayer Web Based Game 1024 576 Parini Vyas

Whiteboard Multiplayer Web Based Game

Today I am writing about the digital experience that mirrors our company’s transformative journey where every idea initiates with a mockup or a storyboard. This helps us and our clients understand the flow of the story and also lets them visualize and lets us know if they have any changes in design before we move to the UI UX , that is to designed in Figma.

So here are some unique features about the game:

Team Dynamics:
This was a Role based game – 4 players with 4 different roles, each member assuming a vital role with specific, initially hidden tasks. As the game progresses, these tasks become visible to all team members, promoting a unified strategy.

The Game has 2 Major Rounds. In round 1, users play turn wise while in round 2, users play simultaneously and can see each others activity on the screen.

Interactive Whiteboard:
The heart of the game lies in the interactive whiteboard equipped with a color palette, variable-thickness pens, a paint bucket, text tools, and geometric shapes. Here, creativity and collaboration come alive as teams use 2D cutouts to construct their visions within a time limit.

Scoring System:
Success is measured by the accuracy and speed of task completion, with a scoring system that rewards based on Cutouts used as per tasks assigned to a user. The shared whiteboard allows all participants to witness the evolution of their collective masterpiece, each cursor contributing in its unique hue.

Role-Specific Challenges:
Each role, from Bricklayer to Decorator, comes with a bespoke set of 2D cutouts, encouraging players to build according to their assigned tasks. The game’s design phase is yours to shape, with roles serving as mere guidelines to inspire a LEGO-like environment.

Creative Freedom:
Tasks are intentionally open-ended, allowing players to unleash their creativity. The scoring should reflect this flexibility, avoiding any single ‘correct’ solution.

Back-End Features:
Administrators can manage users, review past game outcomes, and analyze overall survey results through a comprehensive dashboard.

concept idea generation technology development fabric js, brainstorming

When it comes to Visualizing it becomes difficult at times because everyone has their own perspective of looking at things. So our approach is simple yet direct

So the first step was Brainstorming the Concept of how Participants will embark on an immersive adventure by joining a game through an invitation link, a unique game code, or by creating a new game. Upon entering their names and emails, players gather in a virtual lobby, eagerly awaiting the start of a collaborative challenge. Once the lobby is full, the game begins, led by the first user or a designated moderator.

ui ux mockup ui design fimga photoshop ux design design flow

UI UX was something which we had to go back and forth a lot of times. As the Application was totally concept based, we had to test multiple times until we realised that some changes in UI were necessary

Fabric JS,Three JS HTML, CSS, AJAX, JQuery, MySQL, CakePHP.

Fabric JS,Three JS HTML, CSS, AJAX, JQuery, MySQL, CakePHP.

Which technologies are to be used was another question in mind as a Realtime game was to be developed, where time was ticking and users have to finish their task in given time. Choosing the Right Technology for a Real Time Game and a Role based game was the task. The Game being real time plus a Whiteboard where the succeeding player could see the results of previous player in Round 1 and also see other players  Real time screen in Round 2 was the main challenge

Quality assurance, testing, quality check, game testing, manual testing

With lots and lots of Testing, we were able to find new culprits every time while getting rid of old culprits. The game was actually boring in the sense that we had to wait for other players to finish their game and each player got time of 4-5 mins to finish their task. So, the testing along with Scoring would take around 45 mins every time and sometimes we would take multiple roles as we had a small team 🙂

Azure setup, releasing launching game

The Application was ready to setup on clients Azure Portal. Phew!! Why do we have to take up challenging projects every time 😀 because its fun!

The Actual Game looks something like this:

3d low poly scene, render, game environment
Low Poly Environment in Maya 3d 960 540 Parini Vyas

Low Poly Environment in Maya 3d

3d low poly scene, render, game environment

Low Poly Environment – Conceptual

The most challenging part of making a 3d game or environment is the high polygons model and textures . Its sad that designers had to compromise on the look and feel of their game, environment, in order to achieve an optimized game application for their users

In 1990’s when Low poly art got invented . Before, It was satisfactory because of low computing power and other limitations. Little did we know that Low Poly Art will make its way again and get its official name as “LOW POLY ART” in future. In 2013, Low Poly art got reinvented by some content creators.

Today I see Low Poly Art as very attractive. Those sharp edges and colors attracts the interest of the end user. It allows Creators to quickly design a basic model which is always simple to Texture. Remember those Large Spider like woven UV’s of that high-poly character and the mysterious UV map of that concept car model? I would subdivide it until I got desired results . Kept subdividing until my Maya crashed 😀

3d low poly scene, render, game environment

Low Poly Environment

I am sure many of the 3d artists have also been through that pain of unwrapping UVS. Especially of those Beautiful High count model you had made by giving those minute details to make it look as realistic as possible.

This LowPoly Model I had modelled in Maya 3d was totally concept based. It has snow covered mountains, clouds floating in the sky, Pine like trees , cut trees , a camping tent, rocks and a fire place. I Kept in mind a Gaming environment where the ground is hexagon shaped and tile able. For renders, I had used Maya Mental Ray.

Well back then I had not discovered Blender’s rendering capabilities. Although, I explored this week only and my next post would be about it. I now realize how technology has really changed our life to a huge extent. Renders in Blender along with Ambient Occlusion pass blew my mind ! It is comparatively so easy now to get quality results quickly !

Hope you like this low poly 3d model .. you can download it for freeeee…!!

Below is the link: