Insights... SpaceLamb Game, Site of the Day, 12th June 2015
What did you want to accomplish with the site?
On the one hand, the purpose of this game was to promote our studio, and on the other hand, to get the feel of WebGL to show our clients that we could make cool and creative projects.
Our experience of previous Flash developments has shown that developing a game results in a deeper and broader study of the technology. It provides a clear understanding and use of the technology in real projects. It was important for us to create this project as a non-profit one: saving time on R&D, working to a deadline, delivering beautiful, high quality results.
Our game is based on a simple arcade game technique – fly and catch. And the main character is a lamb! We just really love lambs:) The game was designed to be appealing, pretty and funny, involving different controls: a computer mouse, camera and mobile device. We also wanted to make the most of WebGL: shaders, collision, procedural animation and other features of the technology. The game was aimed at a certain target audience – agency managers and art directors.
We had already made some cool Flash things, so it was no problem for us to transfer our knowledge and experience to WebGL. But here we faced different limitations and bugs depending on the browser which brought us to the conclusion that the technology was not quite complete. What we could do in Flash 6 years ago is only today possible in WebGL. There is still a room for improvement for this technology.
Despite all the challenges, we have got a great full-fledged project. We have managed to combine a number of different technologies and make them work to the full. It is not just some spinning cube or kite demo, it is a full-scale game.
This game alone can be made into a commercial project. Replace the Lamb with a bun, scatter some flying food products around – and there you go! You are already making a burger. Well... you know what brand could be offered such a promo game;)
What technical challenges did you encounter and how did you solve them?
There were some challenges not only with the technical realization of the game, but with the visual part as well, since we had set some interesting objectives that we'd like to share here.
We started developing the game drawing the main character and game objects. It was a true challenge for our illustrator. He had to come up with an image of the Lamb and his surroundings, and draw more than 10 lively illustrations in the style of a comic strip. At the same time, all the illustrations had to be drawn in layers reflecting a shift to create the parallax effect. The feature of our illustrations was the replication of "printing" – chromatic aberration covered with a point pattern. It is similar to what we see when a picture is printed out. But in our case we wanted to intensify the effect to make it more visible, adding a certain charm to our illustrations.
The 3D designer followed at the illustrator's heels. He had to draw the Lamb in 3D by the layouts of our illustrator for our lambs from the 2D and 3D worlds have common features. After that, he needed to create the actual 3D world where our hero would be flying and picking up objects. Some bones had to be added to the Lamb to make it come alive. The models for WebGL also had to be optimized for the game to use up fewer resources. We decided to use low poly modelling for the game. To export models into Three.js we used a plugin working with a required format. Although it did not recognize all parameters of the model, so the developer had to adjust some of them manually when integrating the model into the game.
To increase FPS we made a good use of Three.js tools optimizing the game, to name a few:
- combining static objects into one, due to a large number of scene objects
- reusing active elements
- using the same texture for colouring different objects to minimize draw calls
- a few other tricks
We really wanted the game to look complete, standing out and inviting to the eye. So we paid special attention to the visual aspect, and in the end used our shader materials. But we faced a problem here. When we started animating the bones, we realized that skeleton animation wouldn't work with the shader. The described method didn't work according to the documents. Thanks to Firefox Dev Tools we could see how other shaders work in Three.js with animation and used some data to add to our shader.
In the meantime, the designer was working on the interface that looked well-balanced against the background of nice illustrations and aesthetically pleasing. He did a good job. We were happy with the preloader – a rocket ready to be launched, the START button and the rocket blasting off. The logo appeared animated nicely. And the HUD design deserves particular attention as the designer approached it in a very creative way. He created various indicators showing what objects had been picked up, how much oxygen was left and the distance to Earth still to cover.
Both the preloader and interface are vector elements. We chose Snap.svg to work with vectors as it had shown good results in demos. However, in the full-fledged project it didn't prove its worth . We had a number of problems using SVG animation. It took us a lot of time to see why so many resources were used up animating the objects, which were not so numerous. Besides, when changing a shadow or a gradient we had to use hacks, since this engine could only create, not edit them. We managed to solve all these problems outside Snap.svg. However, we wondered why it had to be external developers tweaking it instead of implementing these functions in the engine.
What did winning the FWA award mean to you?
It is so cool winning the FWA award!
We have spent a lot of time, effort and resources to create the game. It was a very meticulous job. And the FWA award is a great reward for the whole team that has worked to create the game. It proves that we have made a unique high quality product. It feels amazing.
- Three js – Ricardo Cabello (mr. doob) did a great job. He maintains and develops his engine that has got a lot of potential. We very much appreciate his work.
- GreenSock (GSAP) – responsible for the interface animation and SVG. Our developer spent a lot of time animating the Lamb with the help of this engine. When the Lamb’s spaceship collides with an asteroid, he gets turned around, with his feet and head moving the way they should be. If the Lamb hits an asteroid several times in a row, we can see the SlowMo effect. Just like in the best movies! And this is all thanks to this engine!
- WebRTC – thanks to this technology the game can be controlled using a web camera. We get a lot of positive feedback on this game mode, the users love it!
- Socket.io – this library enabled us to use mobile devices as a joystick to manipulate the Lamb in the game.
- and others.
Three hot facts
1) Lamp effect
As mentioned earlier, we tried to make the picture attractive and pleasing to the eye, and to set our own colour scheme. That's why we used our own shaders, but we didn't stop there. We created a separate scene that was on top of everything, and lit it from a number of light sources of different colours. While playing you can see colour spots moving across the screen. It adds a peculiar charm to the graphics and makes the colours more restrained and attractive.
2) Visual effects
In the game, the Lamb has to catch the things that have fallen out from his spaceship during a crash. We wanted to emphasize it visually. All the things are marked with indicators on the top that flash when a corresponding object is caught. But we wanted to go even further.
The ordinary objects (Lamp, Cube, Crystal) are accompanied with the screen glowing around the edges with the colour of the object. The Lamp stands for an idea, the Cube for knowledge and the Crystal for technologies. They don't bring many scores. While the bonus objects (Beer Barrel, Plant Flask, Stamp Case) are equipped with more attractive shaders. As you can guess, the Beer Barrel is for alcohol, the Plant Flask is for mushrooms, and the Stamp Case is for a mysterious substance. When one of these objects is picked up, you can see a relevant visual effect; for example, it is the blurring effect and the Lamb becoming sluggish when he picks up the barrel of beer; or the inverse control and acid colours if he picks up the flask with plants. These bonuses bring more scores. If other objects are picked up while the effect is active, the number of scores awarded for them multiplies. We studied how substances influence a human to replicate these effects, read some materials and watched videos, in an attempt to reflect them in our game. We all found this task fun and creative.
There is also a first aid kit and oxygen tank.
The first aid kit relieves the effect of the bonuses and reduces the damage from the collision with asteroids. The oxygen tank increases the oxygen level reduced after the collision with asteroids. The designer came up with an interesting way to show it: on the left there is an indicator looking like an oxygen tank. As the level of oxygen reduces, the tank starts producing bubbles that come out at different speeds and the indicator turns a bright red colour.
3) Different final scenes
As mentioned earlier, the illustrator had to draw a lot of screens. We wanted to diversify the final scene in some way. In the end of the game the Lamb lands near the 12Wave flagship parked at the lot for space ships.
The final picture – the text and illustration – depends on how many times you have hit asteroids and what bonuses you have picked up (if you've got more Beer Barrels, Plant Flasks or Stamp Cases). The number of scores collected is determined in the same way.
For instance, if you have been mostly picking up Stamp Cases, in the end of the game you get a pair of spectacles as a major bonus and see an illustration, showing you land near the flagship at the same parking lot, but... the Lamb and everything around takes a different shape. The Beer Barrel and Plant Flask have similar scenarios:)