Posts Tagged :

a paint bucket

buhler, gaming,╧gamification, multiplayer game, realtime game,role based game
Realtime Whiteboard game 1024 602 Parini Vyas

Realtime Whiteboard game

Some Cutouts, A Whiteboard
 & 
a Role based Multiplayer Game

This has to be the best project so far in terms of quality, and the challenge it carried. Gamifying a multiplayer role based cutout game with real time  updating  data of users sitting in different corners of the world. The game was fun to make as the concept was very new. Well there are games which had similar features but that was limited to only using brushes, tools that are generally available on a whiteboard  application So, the challenge was placing cutouts , along with watching what other players were doing at the same time. This Live game had a countdown which was supposed to match with other players and to be honest , that was the biggest challenge we faced being a web application and the limitations of Technologies that we could use for the game

roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool, paint board, elearning, education , cakephp, fabric js, java script, js, web based game,web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot

The basic idea of the game was each player will be taking up a role, based on the role they take up, they will     be assigned a task for that particular  round

roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool, paint board, elearning, education , cakephp, fabric js, java script, js, web based game,web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot

 

Ideally a game with 2 Rounds and two different Phases

Where in Phase1 , Users will Sketch their Idea with a Basic Whiteboard: Colour Palette, Pen (Thickness  variable), Bucket of paint, Text, and shapes: squares, triangles & circle (rotate- and resizable)

While in Phase 2, Users will start building with the 2D cutouts assigned as per their role. Each Role will have a set  of 2D cut outs to choose from.

The difference here between Round 1 & Round 2 was only that in Round 1,the players will have to wait for each 

other to complete their tasks.  Round 2 , Users would be working together, So, when in Round 2, Everyone is sketching on the same whiteboard; Users can See each other’s sketch and cutouts placed if they are in Phase 2.

web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js,npm,npx,how to develop react app,how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot

For both the rounds, The result was scored based on how accurate they fulfilled the task and how quick they  were. Here, each cutout for each role was given a specific score. Only when each player played their game  accurately, they would get a good score at the end of the game.

roundbased game, multiplayer game, web game, whiteboard game, realtime game web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game

As this game was designed to bring change in the working culture of the company. A tutorial was also designed for First Time users, so that they know what exactly is to be done.

There  was also a preview window, if you might have noticed in above screenshots.. the purpose was to design a rough sketch in phase 1 and based  on  that and keeping that preview in mind, the user can place cutouts on the fresh Whiteboard they get in Phase 2

The most interesting part about this game was the countdown timer .. The  clock  was always ticking but The group score at the end of the game gives motivation and great encouragement to the team members. I can say this was a brilliant idea of bringing together and working as a Team for the people of Buhler

Here’s the video that gives an overview of the Web Application : https://youtu.be/pNE34__D7aY

 

web application, multiplayer game, whiteboard game, fabric js, game, web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game
Whiteboard Multiplayer Web Game 1024 576 Parini Vyas

Whiteboard Multiplayer Web 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,web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game

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,web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game

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, web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js,npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game

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, web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game

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,web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js,web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based 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: