Shuffle - connecting gaming experience with Digital Signage

Digital Signage is a great promotional tool when you want to introduce elements of fun and enrich shopping experience. There are a lot of really creative use cases when it comes to this technology - check out Kamil’s article to learn what you can do to use it to it’s full potential.

Have you ever had a problem what to do with your child while you are shopping in the mall? Digital Signage gaming may be the solution you are looking for. Interactive touchscreen table allows using small games to engage children almost anywhere you’d want.

But this is not the only way to use Digital Signage games, you can use them for introducing fun during everyday activities like shopping, promoting your products, engaging potential customers, and attract more clients by giving vouchers, the sky’s the limit (check out other games that we’ve done).

How to create a puzzle game for touch devices

Our long term client Digitopia, for whom we’ve developed few Digital Signage products, has approached us with the idea for a new game. They knew we can bring even their craziest ideas to life and asked us to develop a jigsaw puzzle game for interactive displays. Right from the start we knew that it was a great project for us to work on, not only because we really enjoy delivering great digital products, but also because (as it's a game for kids) it’s theme allowed us to simply have fun during the development.

The interactive game we developed is based on puzzles - to finish it players have to compose a picture out of its jumbled elements. User picks one of four levels of difficulty, which are based on whether the game will be divided into 3, 6, 9 or 12 puzzle pieces. After that they have to choose the type of image - it can be either illustration or photograph.

Chosen image is then it divided into the selected amount of pieces that are displayed in a random order. When pieces are moved they reveal a background, which shows where each element of the image should be placed. Users can also take a helpful peek at the whole image by clicking an icon on the top right. Players have 60 seconds to arrange all the pieces of the puzzle. Game can be played either on horizontal or vertical screens in FullHD resolution.

Technologies supporting puzzle  game development

The game’s UI was developed with Angular, which speeds up the development process and helps in sharing data between various application states. The puzzle itself was created with the use of HTML5 Canvas. The images are uploaded to Canvas, divided into pieces and then shuffled. Whenever a piece is moved, the game is checking whether it’s in the right place. When all puzzles are correctly placed (or when the time runs out) the end screen shows weather you won or lost the game and invites you to take another try.

The whole development process was managed by Gulp with the help of Browserify and SASS, while the game was developed to run in nw.js which combines Webkit and Node.js.

During game development we used:

• HTML5 Canvas,
• Angular,
• Browserify,
• SASS,
• Gulp,
• nw.js (previously Node-Webkit).

Creating this game was not only our duty, but also a lot of fun! This kind of projects help us to broaden our knowledge, improve our skills and are very satisfying to work at. Are you curious what our work on other projects looked like? Check out other case studies on our blog!

‍