Join Grant Skinner for an in-depth discussion in this video In depth: Atari Arcade, part of The Creative Spark: Grant Skinner, Interactive Developer.
We have like basically a 7-hour work day. We do that because I think people work better when they have like a home life, and Atari arcade was definitely the exception to that. We all pulled incredible hours on it. I think Mike is like the guy that poked the most hours because he was our one guy doing art for the whole project. We basically got approached by both Atari and Microsoft. And they said, hey, we want to, we want to rebuild some of these like classic arcade games. And, you know, I grew up on those games, so to me, it was like a super-exciting opportunity to like play with those properties again.
And, you know, getting to do it in an official capacity. I've actually like re-created a lot of these games in the past and but it probably wasn't legal. (LAUGH) And so we kind of looked at what they asked us to do. And, we decided that maybe the best way to show off HTML 5 wasn't necessarily to like, rebuild games that were 30 years old and make them the same. What we'd actually rather do is we'd rather bring these games forward, so we want to like preserve the soul of the game. But sort of, you know, rebuild the flash drive like make the, the graphics more modern.
Have more modern music, you know, take advantage of the stuff that's available to us nowadays, like multi-player and social aspects and stuff like that. And and the client approved of it. So, this project brought together a lot of different things. It was, you know, a touch first experience. It was really designed to be used on a tablet or a desktop device. Feels very, like tangible, very tactile. you can drag things around. all of the games are playable using multi-touch, you know, either with onscreen joysticks or with direct touch interface.
And I think it's really the first time that something of this scale has been launched on top of HTML 5. So basically, the client's trusting us enough, that we have to kind of run with it. And we have to you know put our, our own personality into the project. Instead of just being told, you know, build this and having it go off a brief and you know, work with spec. You know, we've got to sort of define that back. The first thing that we started playing with is, you know, we're building an arcade. So, images like Flynn's arcade come to mind, right? I mean, a huge strong nerd growing up. And so we had a lot of like neon and we had 3D arcade cabinets, and we started showing this to the client.
And they were like yeah, this is great. Keep going with it. So, we actually took this pretty far. We had, like a whole working 3D arcade with cabinets that like slid forward and backwards. And you could play on, and then one of the higher-ups at Atari took a look at it and said, we don't do retro. Atari doesn't do retro. At this time, we were a month and a half into a project that was already ridiculously tight. Like, we only had about three months to build this project end-to-end. And that included, you know, eight games, all the art, all the audio, the whole site that went around it.
Coming up with the concepts of what these games were going to be and how they play. Figure out how to make really great touch controls, as well as make them desktop playable. So, it was pretty darn stressful to like, all of a sudden, get hit with having to rewrite the whole con, core concept for the site. So, we started playing around with other ideas, and we came up with this idea called the Tsunami. And we started out with some really simple tests and we realized that, that Internet Explorer 9 didn't have support for the full CSS 3D spec that we needed. And so, we wound up having to write a custom, very simple 3D engine that would actually.
Let us work cross-platform so that every browser would show this content. And we showed the clients and they really liked it. And so, we've started moving forward. But what we really didn't really tell them is that the sort of core inspiration for this was actually Atari cartridges, which is still pretty retro. We really wanted to be true to these games, right? We wanted to like, give them a new skin. But we wanted them to have a, a really strong connection to the originals. And so, for every single game, we tried to figure out, you know? What's the iconic piece of this game? What is instantly recognizable? So, you know, games like Lunar Lander, for example.
You have the, the moonscape. And you have these ships flying around. For games like Missile Command, it's all about the lines. The trail behind missiles and the circular explosion, so we didn't want to like bring in new art that got rid of that really iconic aspect of the game. With Centipede, for example, we were basically dealing with this tension between what we wanted the character to be and what the client wanted the character to be. Yeah, the original game really doesn't give you a lot to work off of like, what do these characters look like? They're just a bunch of pixels on a screen, and the client was really looking at it from the perspective of these like, comic books.
This was actually the manual that came with the game, and the centipedes is like, sort of friendly guy that gets bewitched and comes and attacks you. For me, Centipede was more around what I knew from the arcade cabinet. You know, this awesome psychedelic trippy mushroom kind of an experience. And the centipede was really evil and scary. And a lot of the ads around that time were also this kind of like bad ass image behind it, right? I mean, chicks dug it, it was, obviously. and so it really took us a while to find sort of a middle ground between that cutesy appearance to it and something that was a little bit more bad ass, right? So, Mike started out with some pixel art, and at the end of the day we decided that we wanted to do something that was a little more vector.
Mike: It was actually a really sort of tough process. we were still in the retro phase, and I thought I was really into pixel art at the time and I was just getting into it. So, I figured I'd moder, modernize it but not to a point where it's, it's vector yet. It'd be sort of SNES error and started off just throwing pixels around until I had something that was kind of cute but still sort of, felt like the original game. I tend to sketch in the middle ground where it's kind of rough, enough that I could make it pixel art if I need to be or go vector with it. And from there I ended up liking the guy on the right, and did the pixel art version of him. Male: And one of the compromises that we came up with, with the client was. We made our characters a little bit more evil but still pretty cartoony, but we'd start the game in this sort of friendly, happy green field. And then as the game progresses, and you go through different levels, you move into this darker, scarier environment.
With, you know, these guys lurking in the background and this like psychedelic glow on the mushrooms. So, we've go to sort of capture some of how we looked at the game and how the client looked at the game. People ask, you know, why isn't it in HTML 5? We could build this in Flash, we could build this in other technology. And honestly, we could probably do it faster and the games might even run better. But you have to always be pushing boundary, right? You have to play at the edge of a technology. To push it forward, to create the demand for more experiences being built in the same way. And so this let us like, feel out that space and, you know, create the techniques, and show to other developers that this was possible. And it opens up the door for other people to create these experiences.
(MUSIC). I don't believe in overworking people.
As the CEO of gskinner.com, a rich interactive design firm based in Alberta, Canada, he loves playing with technology in a research and development role. It was his passion for exploring new frontiers that led him to the Internet, where he began building content that no one had seen before.
Grant first rose to prominence as a notable Flash developer while his growing company delivered projects for agencies, startups, and corporate clients including Adobe, Microsoft, Google, and Facebook. He found the opportunity to challenge himself again with HTML5. Grant builds demos to show where the technology could go, and source tools such as CreateJS that enable others to push the boundaries of HTML5. By creating and sharing tools that empower the digital community, he facilitates the spread of creative content around the world.