10 Games

fb-logo
Toughlex
  • Score Awaiting client review
    n/a
  • Date Published
  • Reading Time 4-Minute Read
10-games-1-ipad-1024x720-1

The toughlex team developed 10 interactive online games. Each of them shares the same architecture but differs with different gameplays.

Context

Toy Museum is the first toy museum in Lithuania. It was opened at the very end of 2012 by one young family. The museum represents the history of Lithuanian toys. It’s the place where all the known information about historical toys of Lithuania are kept. Along with that, there you can play with the toys that your great-grandfather used to play with. The museum seeks to be innovative and constantly upgrading. Because of that, they thought it would be a great idea to propose some interactive games to be played with for a museum visitors.

Project Goal

The main goal of the project was to create 10 interactive games which would be fun to play with. Games must be simple, support multi-language and be smoothly playable on tablets. One of the biggest requests was – the games must serve an educational purpose and each of them should represent different historical eras.

Solution

We cooperated with UAB Elektronynės Leidybos Namai in this project. They were responsible for all the game ideas and designs while the toughlex team had to make their ideas come true. All the graphic designs and proposals were static and before the implementation phase, we didn’t know how the final product will really look like. Some of the ideas were changing various times until we with the client came up with a consensus in every area.

Responsive Design

The first thing we wanted to achieve is that the games could be playable on any device with any screen. It means that web games design should be responsive and should be scaled accordingly. The toughlex team came to a solution on 4×3 quadrangle which resizing functionality depends on screen width and height. If the width of the screen is narrower than a height then a full width is used maintaining the 4×3 playable screen. Alternatively, if the screen’s height is smaller than width, playable screen resizes to use full height but maintain 4×3 playable screen. Having this responsiveness solution all the games can be nicely resized on any screen without any visual suffering.

Mini Framework

As all the games shared the same basic functionality for navigation, sounds and some parts of gameplay, the toughlex team decided to prepare a mini-framework. We have created a fully functional mini framework which let us quickly implement all the games as only styles, sounds and gameplay logic needed to be added custom for every game. The framework could have looked like a time-consuming matter but at the end of the project, we knew it was the right decision as it saved a lot of time later.

Animations

Games without fluent and interactive animations are not so fun to play with. The toughlex team spent huge attention to animated details. Each of player’s interaction is followed by some neat details as well as gameplays themselves offer dynamic and not dull experience.

Technologies

The only bigger library we have used in this project is TweenMax Lite which makes animating HTML5 tags easier. In order to make games fast, we chose to use plain CSS for all the web designing and responsiveness. Also used some lightweight JavaScript libraries for the mini-framework: jQuery and knockout.js. All the technologies used are picked having in mind to not overdone matters.

Skills

  • 2D Animation
  • Requirements Analysis
  • PSD to HTML
  • CSS
  • jQuery

Results

The Toy Museum’s visitors not only can play with historical toys but also try some new age technology mini-games. And we are just happy we were able to help!