Want to start working with us?
Get in touch and let us know how we can help you.

Contact us

Blog

GAMING IN EMAIL EXPERIMENT: THE BLUE HEDGEHOG – PART 2 Gaming in Email experiment: The Blue Hedgehog – Part 2.

Following on from the previous blog “Can you put a hedgehog in an email?“, I began working on another version shortly after completing it, as I had some other things I wanted to try out. Ideally I would build this one again from scratch as the positions of everything are a little all over the place. But for sake of time and what I was looking to do with it as a concept, it’ll do the job. So (again) this is just a Webkit thing. Please view it in Chrome or Safari for the time being.

I must stress again this has nothing to do with SEGA or Sonic the Hedgehog and was built for experimental purposes, more in relation to some of the code exercises.

While I was creating the first version, I drew the sketch below, and it got me thinking about the bonus sections of Sonic. The other version was deliberately, more of an interactive advert/banner and I felt like this version could lean more towards a game, and be a little more complex. The idea was that Sonic would run through the track as an animation, and the user would be responsible for collecting the rings.

sketch

 

To Start

I did a little research and looked at some of the bonus levels, and found some assets to plan around, and started trying to piece some things together to give me some ideas to work from. I then made this mock-up from some of the assets I’d found online in various places, to try and make a vague plan.

In hindsight I should have done a scamp or draw up a plan like I did with the first version, as that would have helped me to build it much better with a more precise direction in mind. This was a little bit “shot in the dark, and I had to keep going back and changing things, which I wouldn’t have had to do,and would have had a better result had I prepared better before the build.

track_mock

I then made a flat single frame from this idea, and our 3D Artist (Steve) kindly replicated the track for me with the new design. Which made life much quicker and easier than me creating it myself.
It looked incredible and worked great, but the problem I had was there was 284 individual png frames at 320px wide, and then working that into email.

track_flat

 

So I set about making the sprite

The Track Sprite 

There are tools to help create sprites, but I do like to create myself. I went through the frames and got them down to 69 frames. Ideally I would have liked more for a better animation, and then ideally for weight I would have liked less. For the purposes of the experiment I left it at that as I could have probably worked on that quite happily for days. On anactual job I’d have made the track a little shorter, which would have allowed for more frames and a smoother run. However it’s still lighter than most .gifs I see out there. (if you were to create this a .gif it would be heavier, and as we’re on only targeting Webkit for this we don’t have to think about that).

I dunno if you’ve ever created a really long PNG in Photoshop but they tend to get quite awkward to put all in one line beyond about 8000px. So I made the sprite in 3 rows of 23 frames (7360px).

platform

I first trying coding it like this out of curiosity, however that wouldn’t loop the group of three infinitely:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
-webkit-animation: play1 3s 0s steps(23) forwards, play2 3s 3s steps(23) forwards, play3 3s 6s steps(23) forwards;

@-webkit-keyframes play1 {
from { background-position-y: 0px; background-position-x: 0px; }
to { background-position-y: 0px; background-position-x: -7360px; }
}

@-webkit-keyframes play2 {
from { background-position-y: -500px; background-position-x: 0px; }
to { background-position-y: -500px; background-position-x: -7360px; }
}

@-webkit-keyframes play3 {
from { background-position-y: -1000px; background-position-x: 0px; }
to { background-position-y: -1000px; background-position-x: -7360px; }
}

But I couldn’t get that to loop infinitely, so reverted to the more obvious approach:

1
2
3
4
5
6
7
8
9
10
11
12
animation: play1 9s 0s steps(23) infinite;}

@-webkit-keyframes play1 {
from { background-position-y: 0px; background-position-x: 0px; }
33% { background-position-y: 0px; background-position-x: -7360px; }

33.0001% { background-position-y: -500px; background-position-x: 0px; }
66% { background-position-y: -500px; background-position-x: -7360px; }

66.0001% { background-position-y: -1000px; background-position-x: 0px; }
100% { background-position-y: -1000px; background-position-x: -7360px; }
}

The Sonic Sprite

I couldn’t find too many sonic sprites that had a view from behind, so I had to make do with what I could find. And again it works well enough for the purpose of the example.

soinc

The Rings

I wanted there to be 10 rings that sonic has to collect, the user would click/press the rings, and there were 4 things I wanted to happen.

  1. The rings would move and appear somewhere along the track.
  2. They would also be a sprite background animation and would spin.
  3. On hover/press the rings would increase in speed.
  4. When the ring is checked a “sparkle” sprite would play.

It was at this point i started to pay for not planning things out before building, as I couldn’t get everything to happen at once. I then started having to move everything around, and everything had an impact on everything else.
I’ve kept all the commented up the sections in the embedded style with titles so you can see your,  in the code this time so you can see what everything is in the embedded style.

The Scoreboard

This made up of a background image, a sprite of numbers.
The score inputs, and the ring inputs are radio buttons and each ‘ring’ has a corresponding ‘score’ with the same name. Thing ‘ring’ input is set as unchecked, and the ‘score’ is set as checked. By checking the ‘ring input’ the ‘score input’ becomes unchecked. This then affects what is displayed on the scoreboard, because whenever a score become unchecked, it moves to the next relative checked position.

Here it is with overflow set as visible, so you can see for yourself.

score

 

Given more time…

  1. I’d like to make sonic jump whenever a ring is checked, and I’d like to move him around the track a little more that he does, just to try and bring him in to the game a little more, as really he and the track are just a visual setting. This is fairly easy to accomplish but again it’s fairly time consuming.
  2. I’d like to introduce something to not click on, which decreases the score if checked. But I don’t think I could use this scoreboard method.
  3. Again like the other version, it’s all images, so I’d like to try and get more live text in there.
  4. It may be also a little tall for all iphone screens, or phone screens looking at it in chrome – but again that’s down to not planning ahead. I’d look to make it shorter if i were to remake it.

After all that, I think I prefer the simplicity of the first version, seems more quirky and fun, but then I think I made that point a little in that blog.