Ho ho ho! Christmas is coming and as every year we wanted to design an original Christmas greeting to bring a smile to all those who read and follow us in networks. In recent editions we have played with responsive design and animations, introducing some other element in vector design (SVG) or graphics sprite. Here you have an examples of past Christmas.
But this year we wanted something more interactive where the user had to think and perform some actions, so we have chosen to create a puzzle mini-game of visual dexterity, always using HTML, CSS and JS, which we use daily in our work but oriented to the game instead of to web design.
The operation of the game is very simple: everyone is in a hurry during Christmas, even Santa! That is why, in order to have enough time to go through all the houses and chimneys, we will help him decorate his tree. For this we have to select the objects that Santa has scattered around his garden that best fit with each of the tracks. Will you be able to find all the objects in this mini-game type ” Where’s Wally?”
Do you want to know how we made the Christmas card? Keep reading!
The idea of the mini-game
This year’s invitation was a challenge because it was the first time we were faced with the design of a game, and in addition to the illustrations and the layout part we had to think about a story and write a script together with the mechanics of the game. Luckily Alfonso knows a lot about this, so we get the design of the game quickly. But here we needed pencil and paper to capture the ideas and the story we wanted to tell.
As a reference, we took the classic puzzle games and classic graphic adventures of Lucas Arts, where you have to solve small puzzles by selecting the right object at the right time. The plates of Where’s Wally? have also served us as an idea, so if you are a fan of one of those two references, you will surely find some familiar detail in the game.
I leave you now with Alfonso to explain you how the design of the illustration was made:
Illustration design
On this occasion, we have done all the design of the illustration in Affinity Designer. We have been using some of the tools that the program has, about which we have written during these last weeks in the UI Design guide.
Choice of grid type
In the first place, and when deciding to make an illustration in isometric format, the first thing is to define the grid in our Work Table. To do this, we define it in Vista> Guides and Axes Assistant. Of all the available options, we choose that the grid type is isometric. In the spacing, we opted for 10px, since this way we have a sufficiently dense grid. For the elements that are smaller, the workflow has been to make them a much larger size to be able to give it all kinds of detail, and then to scale it to its final size. It’s the good thing about working with a vector design program. It does not matter how we work, we will never have to worry about having pixelated objects.
Another important option is to modify the tolerances (the magnet icon of the Toolbar,) and activate the adjustment to grid. Thus, our cursor will always snap the isometric mesh, and we will not have to worry about our objects not being completely adjusted.
Organisation of the layers
Although it may seem a bit burdensome, the organization of layers is essential to avoid problems in the future, and we can edit the svg code more easily. On this occasion, I have opted for each object to be in a layer differentiated from the rest, as you can see in the image. Although there are individual elements that are grouped, such as snowflakes, this helps us to make the animation easier to get.
Exportation to SVG
The last step is the simplest one. When exporting to SVG format, we must be careful to only select the elements that are inside our work table. This removes us from the fact that we are exporting a loose line that has been lost, and that when viewing the SVG in the browser, we left the illustration off center.
Layout in HTML, CSS and JS
Most of the work is already done, because integrating the SVG format into HTML is as simple as copying and pasting. The alternative is to load it as an image, but if you want to animate the elements or change the classes of the objects you must choose the first option. Therefore, once the SVG has been cleaned (there is always some unnecessary class or extra adjustment that is added to the program) and verified that it is displayed correctly in the browser, the CSS time arrives.
.streetlight {
animation: streetlight 5s linear infinite;
}
@keyframes streetlight {
0% { opacity: 1; }
20% { opacity: 0.3; }
100% { opacity: 1; }
}In the CSS you will find many animations like the bounce for the head of the character when he speaks or the change of colour of the lights of Santa’s house. All work without problems with the elements of the SVG. We have also used some gradients for text boxes; you have an example here.
In some cases we have found a lack of compatibility with some browsers. For example, Edge does not work correctly with transform CSS property and SVG elements, so we do not have animations when user clic on wrong items but fortunately the overall design will be very similar.
Another interesting animation is the one used for the letters of the end (spoiler alert!) We have three different colours for the text-shadow property that are changing in an infinite animation.
Finally, a very simple JS: only functions to hide and show elements and to add or delete classes. An interesting question that we have learned during the process (thanks Sara Moya!) is that .addClass(); and .removeClass(); do not work in some versions of jQuery with SVG elements, so it has been necessary to use attr(); instead.
Merry Christmas and Happy New Year
We hope the invitation has inspired you and brought out a smile. Thank you very much for helping Santa with his tree, we hope he will reward you with many gifts!
Merry Christmas from all the SiloCreativo team 🙂
