Monthly Archives :

May 2024

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