How did we manage to „Enter the game” – that is, step by step about creating our mobile game

If you don’t know what the game we created is yet , before reading this text you must  find out about it here: how to educate employees more effectively – a few words about a game.

And if you know, here is the continuation of our adventure …

After months spent in front of the computer screen, litres of applied eye drops  and a few neck cramps, we finished the work and the mobile game called „Enter the game” has become a reality.

What was its implementation like, paid for with such a great sacrifice?

Hybrid technology in a mobile game? It works!

Each project begins with a decision. You have probably also heard the saying that the sapper is wrong once only? We also had to make a choice that could have an impact on the success of the entire undertaking . And you probably already know what it was:

do we focus on native technology, that will provide us with better performance, but will also require more time and work from us, or do we risk and choose hybrid application, that will allow us to save both.

Mobile games are asking for the use of a native applications and the use of more low-level language – a lot is going on in the game so performance is an absolute basis. However, if the same end result can be achieved more easily, why not take the risk?

What were we afraid of using hybrid technology?

First of all, that the application will not live up to our expectations, there will be visible slowdowns in the game, and we will lose a lot of time and we will go to the dead end and we will have to start all over again. Believe it or not  – it would really hurt.

But as it is said nothing ventured , nothing gained. The hybrid application turned out to be a bull’s eye. We used the ReactNative platform, thanks to which the game ran smoothly, and there were about seven elements animated on the screen with no obstacles. It was enough for us  – there were never more than seven animated employees or machines on one board at a time.

It turned out that it was also necessary to introduce a limit on the size of the board background. If the graphics were too large the game would suddenly slow down. It was  due to increased memory allocation. On some phones the size of the board chosen by us  wasn’t a problem, but on  others it was a strong limitation. By trial and error we selected the size , that allowed the game to run smoothly on all the devices. Exceeding this size by even one pixel  caused the application to jam.

What the use of ReactNative gave us?

• significant reduction of application development time. If we have chosen a native technology, we would probably curve our game until today. Just joking 😉 But it certainly wouldn’t do without the involvement of additional people,
• sufficiently good performance,
• the ability to operate the game in hot reloading mode – when the application remains running, we can enter a new code at that time, which is „injected ” into the appropriate files without  losing the state of the application,
• but, above all, we could use one application code for  Android and   What were the benefits of that ?  – see section 1.

How did we create our game boards ?

All boards in  „Enter the game” are constructed in isometric projection and they consist of tiles laid side by side. We could put any elements on each tile, depending on what we wanted to build. This method is great for two reasons:  firstly,  we can create each new board relatively quickly; secondly: existing board can be effectively expanded with just little work.

The action of our game takes place mainly in a square-shaped  production hall. Within it , there are clickable elements. The rest is simply a  static background, which we could give any shape according to our fantasy.

How did we create the animations for our game ?

              When creating the animation we used the  Lottie library. In the game you  will find:

• looped animations, that were ideally suited to depict the repetitive work of machines and people in the factory. We were able to breathe life into production line with the help of JSON format. Our irreplaceable graphic designer (greetings to Radek 😉 ) prepared an animations in Adobe After Effects program, from which he then exported them to JSON with Bodymovin plugin. All these gave a pretty neat result, that you can admire here:

• the second type of animation were animations generated by us in a code. This way we moved static elements along the production line – e.g.. car windows or bonnets manufactured in the factory.

How did we animate static images in the code?

Each board of  „Enter the game” was designed in an isometric projection, so the elements on the production line moved diagonally. We had to determine the appropriate motion trajectory for each element.

When the product moved along the belt from point  A to point  B, the task required that you do some work on it – tighten/oil /repair etc. Then the progress bar appeared above the animated element showing how much work needs to be done  by the player before the item is completed . When the  slider finally reach 100%, the part, that the player worked on, moved  from point  B to point C. And so on and so on until the task was completed .

How is the plot of our mobile game developing?

We decided to dispense the subsequent boards and tasks in time to encourage the players to be systematic. On the first day, the players could do only a few tasks , on the second day they could do the next ones. It wasn’t possible to do the tasks „for the future”, and then for the next few days enjoy the current  success. This solution favored the goal of the game which was to be consistent acquisition and consolidation of knowledge . In turn, it allowed us to control the players’ progress  – we created  mini-community among employees and each  of them had the same opportunities in the game every day.

For the same reason, we decided that all boards were stored on the server  and not in the application. This allowed to create new boards available for the players without the need to reinstall the game. In practice, it was done this way that when we made the application available to the players, only three of the eight boards were prepared in the application. We drew new elements for the future boards and introduce task texts on  an ongoing basis.

If there was a new challenge, the player was informed about it in  push notifications sent via Firebase, which has several valuable advantages: it allows you to send  mass messages, both to Android and iOS, and, in addition, it is free. Thanks to  push messages we were able to send messages to selected players – e.g.. those, who were invited to the additional quiz due to the same number of points.

As administrators we were able to track the progress of each user in the administrative panel and check if the game is moving forward, and also learn what causes the most difficulty for the players  – also in quizzes. We knew exactly  if the players acquire the knowledge and which of them  exactly.

How did we solve the issue of storing players’ personal data?

As we all know, security first and foremost, and since GDPR provisions have entered into force, no one wants to deal with more personal data than it is absolutely necessary. Therefore we did not collect such data in our database as well.

A unique  hash has been created for each player, based on his employee ID and date of birth. This hash was then sent to our application. The employee , who wanted to log in to the application used only the ID number and his date of birth. The application created the hash in the same way using the hash function and compared it to the hash database, if they were consistent, the employee „entered the game ”.  Apart from the  hash, only his nickname was stored in the database.

Each employee had an automatically created account (i.e.. hash) in our game at the time of employment at  Volkswagen factory. No one had to register anywhere  – all you had to do was to download the game and enter your ID and date of birth.

And what about the restrictions based on the Gambling Law?

They didn’t concern us at all. There is no element of randomness in the game , so these regulations did not apply to it. The points were awarded to players for  good investment decisions and correct answers in quizzes. Everyone had the same chances to win.

Sin not to try, right?