You don’t often hear gaming and email in the same sentence, especially when the subject of playing a game is mentioned. However with the power of animations, transitions and a little bit of imagination we hope to bring these two things together to create something a bit unique – a fully playable game within an email. This blog post will talk about how we made our gaming email a reality thanks to the techniques we talked about in our previous blog post on animation. So strap in, grab your nearest companion and prepare to fight an alien invasion all from the comfort of your own email client.

Before we venture on it’s important to note that the techniques used in the email are way above what most email clients can support so the email will only work in the most modern of email clients. We hope that one day all email clients will be able to support what will be discussed in this blog post but until then fallbacks and content-swapping are necessary to support these clients. That however is a how-to for another day; we have some gaming to do!

First of all check out our demo gaming email here. There may be a few kinks with the email as it is only a prototype (and after all no video game is completely perfect) so go easy on it. We hope to nail down some of the bugs and implement new features in future versions.

Once you’ve had a good play around with the email carry on reading the blog post where we will explain how everything works.

Countdown

The first section we want to talk about is the countdown sequence in the game as it ties in nicely with what we’ve talked about so far. Creating the countdown required the use of the CSS transition style on multiple tables to effectively slide them into the email as well as a div to act as a container for the countdown slides.

Each of the numeric images in the countdown are essentially their own table, positioned to the left of the main email table so as to remain out of sight, and then triggered by a checkbox being ticked to move over to the centre of the email. Visually this can be seen below

Whilst on paper this sounds easy enough to do there are two problems that arise from this method – How do we hide the numbers until they are needed and how do we time the countdown so that each number is shown separately? The answer to these is to use CSS transition delay and some cool CSS styling. Let’s focus first on the hiding of the numbers.

There are plenty of methods that can be used to hide an element in an email (display:none, opacity:0, etc.) and we decided to incorporate most of them into hiding our numbers. The first thing we did was to create a div to act as a container for all of our countdown elements. Once we did this we added some styles to it including overflow:hidden, width:600px and position:relative. This will create a container of 600px width where everything outside of the 600px will be hidden which is exactly what we want. It’s important to note that the inclusion of position:relative is needed as this will help us with the positioning of our numbers. Once this div is created we can start adding our numbers to the template, giving them the styles of position:absolute, opacity:0 and left:-600px. This will move the numbers to the left of the template and due to having the container div, will hide them from sight. We now have all the numbers ready to be called in by our checkbox trigger.

Bringing in the numbers to display on our gaming email is easy enough but we want to stagger them in, to create the illusion of a countdown. Achieving this is fundamentally down to two things, creating a CSS transition and adding a z-index to each of the numbers. Let’s address the z-index first as this is the easier part.

The z-index style allows you to order elements in your email template so that certain elements appear above others in a stack. In the case of our gaming email it means we can stack the numbers so that each number will appear above the previous number when visible on the email. The way the z-index is coded into our email follows this pattern –

Number 3 = z-index: 2
Number 2 = z-index: 3
Number 1 = z-index: 4
Game Screen = z-index: 5

As you can see having a higher number in the z-index will bring the element further up the stack of elements. Z-index numbers are unlimited so you can stack as many elements as you want.

With our z-index ordering added we can now focus on the transition part of the countdown. The good thing about the countdown is that the transition is exactly the same for all the numbers with the only difference being the delay on the transition to stagger the individual number appearing. Due to the addition of a transition delay each number needs to have it’s own class as the delay for each number will be a different value. Looking at the below piece of code you see how the CSS is set up to accommodate our countdown –

.countdown-three { transition: left 0.1s, opacity 0.3s linear 1s } 
.countdown-two { transition: left 0.1s 1s, opacity 0.1s linear 2s } 
.countdown-one { transition: left 0.1s 2s, opacity 0.1s linear 3s } 
.level1 { transition: left 0.1s 3s, opacity 0.1s linear 4s }
#start-game:checked ~ .countdown-three, #start-game:checked ~ .countdown-two, #start-game:checked ~ .countdown-one,  #start-game:checked ~ .level1 { left: 0px; opacity: 1 }

As mentioned the transition for each number is the same with the only difference being the last number, which is the transition delay. Adding these CSS classes along with the previous elements we’ve added gives us the visual countdown display we wanted in our gaming email.

You may notice the use of ~ in the :checked CSS class which is a CSS selector. This basically links classes together to say when class a is checked change the property value of class b. The ~ is a general sibling selector and will change any sibling element to the checkbox with the class name. There are a number of different selectors that can be used and this can be viewed via the W3C website. Note that some of them won’t work in email so it’s important to test before adding to a proper email template.

Now we’ve explained how the countdown section works let’s move on to the game itself and talk about some of the cool stuff that’s happening there.

Shooting Section

In the main part of the game there’s visually a lot of things going on but one thing we would like to focus on is the different states of the targets depending on the actions of the reader. Each of the 4 targets in the game has three different image changes – the default state, the hover state and the active state. We can activate these with CSS classes easily enough but as email clients struggle with pre-loading of images we were finding that there was a delay in changing images when the user hovered or clicked on the target. We decided to implement image sprites and background positioning changes to counter this and create a smoother image change.

Image sprites are certainly not a new thing but in this scenario worked perfectly as it meant the email client only needed to load one image instead of three images for each target. This handled the image delay issue we were having but now we needed a way of adding the images to the template and then having a way of changing the position of the image. Fortunately this is where the use of background images comes in.

Before showing the CSS, which includes our images, it’s important to show how the shooting section is laid in table wise. You can see from the code below that the table layout is pretty standard with a table row of four columns. Each column contains a label within it which will activate the next part of the game depending on if you hit the right target or not –

<table cellpadding="0" cellspacing="0" width="600" align="center" border="0" style="position: absolute; z-index:5" class="level1">          
<tr>               
<td class="level1-lose"><label for="game-lost" class="you-lose" id="girl1"></label></td>                
<td class="level1-lose" id="girl2"><label for="game-lost" class="you-lose"></label></td>                
<td class="level1-win" id="alien1"><label for="game-won" class="you-win"></label></td>               
<td class="level1-lose" id="boy1"><label for="game-lost" class="you-lose"></label></td>                                  
</tr>             
</table>

As you can see each td has an id on it and this is to link to the image sprites we are using for the targets –

#girl1 {background: url(level1-panel1.jpg) no-repeat 0px 0px; height:400px; width:172px}
#girl2 {background: url(level1-panel2.jpg) no-repeat 0px 0px; height:400px; width:141px}
#alien1 {background: url(level1-panel3.jpg) no-repeat 0px 0px; height:400px; width:167px}
#boy1 {background: url(level1-panel4.jpg) no-repeat 0px 0px; height:400px; width:120px} 
#girl1:hover { background-position: -172px 0px }
#girl2:hover { background-position: -141px 0px }
#alien1:hover { background-position: -167px 0px }
#boy1:hover { background-position: -120px 0px } 
#girl1:active { background-position: -344px 0px }
#girl2:active { background-position: -282px 0px }
#alien1:active { background-position: -334px 0px }
#boy1:active { background-position: -240px 0px }

With the CSS you can see we are controlling the width and height of the table cells as well as the background image on the table cells. Then when we hover over a table cell or click on it we are moving the position of the background image to the relevant image for that action (in the case of our example the alien being shot). It’s quite a simple technique but we think the effect it has is pretty cool.

Scene Transitions

The final thing we wanted to talk about is the animations in the email. These animations are the main talking point of the email and keep everything together so it’s important to delve into what makes them work.

As we’ve discussed already in this blog post you can add a transition to any element as long as the right CSS styles are present and you place the checkbox in the right area of your template. This includes whole email templates as seen within the gaming email. It’s easy enough to move a whole template and hide it as shown but what about if you want to add some flair to the transition. Well CSS animation is your best friend for this.

CSS animation works differently from CSS transition in the fact you need keyframes to animate the element you want. Keyframes contain the properties you want to animate and what animation to use. CSS animation has greater customising than CSS transitions and is generally used for more advanced animation, such as the whole email animations we have in the gaming email.

Below is an example of some code containing CSS animations taken from the W3C site –

/* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

The code for CSS animation is similar to CSS transitions in that you have to give the animation a set duration as well as have both styles in the element and keyframes. However this method allows you to add more animations and really customise how you want the animation to work. We can show this off in the shake animation we have when you beat the first level –

#game-won:checked + .game-body {
left: -3000px; 
         
-moz-animation-name: shake;  
-webkit-animation-name: shake;   
animation-name: shake;      
-moz-animation-duration: 2s;
-webkit-animation-duration: 2s;    
animation-duration: 2s;    
-moz-animation-fill-mode: both;  
-webkit-animation-fill-mode: both;    
animation-fill-mode: both;              

/*Object is at the centre at the start and finish of the animation*/
0%, 100% {transform: translateX(0);}
 
/*Object is moved left by 10px*/
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 
/*Object is moved right by 10px*/
20%, 40%, 60%, 80% {transform: translateX(10px);}}

The important part to mention about the animation here is the percentage used in the keyframes. Adding 30% and a style to your keyframes will tell the animation exactly what to do when the animation is 30% of the way through. In the example above it’s move the object over to the left by 10 pixels. Adding more percentages with styles will give you a more complex animation.

We’ve really stepped up the CSS animation on this example but it gives you a good idea of what you can achieve with CSS animation. If you’re feeling overwhelmed by the coding involved there are plenty of helpful websites out there that can assist in creating your animations.

The good thing about CSS animation is that it can be used in conjunction with CSS transition to create a multi-layered animation. This can be seen in the gaming email with the combination of moving the template to one side and hiding it after we’ve shaken the email template. Both of these animations can be done at the same time or in the case of our gaming email can be done at different times. This is done through the transition-delay/animation-delay style.

CSS animations can appear scary at first so we suggest starting off with something smaller before moving onto a larger scale project. Our blog post on CSS animation and animating a ghost image is a good starting point for a smaller scaled animating project.

Final Points

We hope that you’ve enjoyed the ride with this blog post on our latest project, a fully workable gaming email. Initial testing of the email has been largely positive on the modern email clients but we still have some work to do.

Animation and interactivity in emails is something we really feel passionate about so we’re looking forward to seeing what other cool, interactive ideas we can come up with. Until then have fun with our gaming email, tell us know what you think in the comments and stay tuned for more posts talking about what makes us tick.

Over and out…