Socious and Xplosion (Product Development)

As part of my university final year game design module I put together a team to tackle the big project associated with the module. This was considered the toughest module of the entire Digital Art and Technology degree I was doing.

The group consisted of myself, Matt Bilson (@MattBilson), Devin Cheevers (@DevinCheevers) and Andy Coates. Together we set out to create a new kind of arcade table.

We used our knowledge of existing hit arcade games and added our own new technology to enable interfacing with Bluetooth enabled camera phones in order to enhance playability and the social aspects of gaming.

The project included developing:

  • Company corporate identity
  • Business plan
  • Game concepts
  • Product development
  • Game microsite
  • Various content
  • Game prototype
  • Game testing
  • Mobile game (flash lite)

In this post there is the step-by-step documentation of how we built our own retro style, socially orientated games table, pictures of the play tests, a video of our game in action and the mobile game.

In Game Video

Give the video some time it takes a while to get into it. I also have to apologise for the sound.

The Mobile Game

You can get a taste for the game with the mobile version that Devin developed. To play:

  • click on the flash movie to activate it
  • use the arrow keys on your keyboard to move the hovercraft
  • hold the ‘enter’ button on your keyboard to increase the power on the bombs
  • release the enter button to shoot the bomb
  • hit as many red markers before the timer runs out

Supporting websites

Part of the project involved creating websites for the Fobo brand we had created and the Socious game platform we were promoting.

Prototype Development

Building the frame

This is the first view of the first structure for the prototype. To get to this stage it took from 12 noon until about 3:30pm in the cold workshop, not bad at all!

At this stage I hadn’t worked out a price for the materials, but as I was a good friend of a carpenter I managed to use the workshop for free and pay my mate a fair price.

Another angle

Here it is again at a different angle. As you can see the bottom tray has been measured to fit a specific computer case, as well as some room above for future expansion including speakers.

If you look hard enough, you can just about make out that the shelf the PC is sitting on is not flush with the legs on this side.

The cladding we are using is going to be pinned (with nails) directly onto the legs. This gap, which is on both sides, is intentional so that the PC and other internal components, could get sufficient airflow and not over heat.

Screen mounting

This shot shows that there is just a 15 inch TFT flat screen, rotated 90 degrees to the player, so that the playing field is longer than it is wide. This also helped the viewing angle on the display whilst playing.

It also illustrates that the screen is mounted on using a few bit of wood. Nothing fancy yet!

Skirting and Structure

After another 3 hours in the cold workshop we managed to get some nice skirting on the sides of the table top and on the legs.

We drilled holes for the buttons, and used a jig saw to cut square holes for the directional control box. They were so snug we didn’t even need to glue them!

You can also see where the TFT screen rests when it is placed in the hole.

A Little Preview

When I got home I set up the table, put the screen is and put in the controls to see how it would look and feel. Just a preview though, nothing is wired and the custom game the team are building, xplosion, is still being developed.

Players eye view

This is a preview of the players perspective of the table. We wanted to put the controls fairly far apart, to introduce a kind of harley effect and making them comfy.

The screen has been put 90 degrees to normal to give the games more playability. Ideally though we would have put in an apple 30 inch cinema display, but funds were tight!

You can also see the ridge along the sides of the table. There is going to be a thin sheet of perspex that will make the table top flush and easier to clean.

Lights

Before I started to paint the table I found some old strip lights at the bottom of a glass desk. I picked them up and thought they would look awesome under the sides of the table.

One of the bulbs was missing and I had to replace that at a cost of £4.50.

Cool strip lights

 

At this early stage you can already appreciate that the strip lights were a good idea and that they can stay.

An option at this stage was to try and colour the strip lights a cool colour, a few ideas flew around and they were left on the side lines for now.

Pre Primer

Painting the wood. The first thing I did was to take out all of the components, the screen and over up the plastic directional control boxes with black tape.

First I sanded down the wood with some medium grit, 100-200, sandpaper and then I gave the tops a quick coat of black.

I gave the table a bit of black to see what it would look like and it became clear this table needed a good bit more sanding and some decent primer if the black was going to stand out properly.

Primer

So I sanded some more and then on went the primer.

I think at this stage to show a picture of the case painted black would give the game away a little, so I kept that picture until later.

Keyboard Control Board

This part of building the table was a real mission.

We wanted to make developing new games for the Socious platform as easily as possible, so we decided to use hacked up a PS2 keyboard. This was the inputs from the controls would be key presses and therefore easy to configure in any game development environment.

We then wired the connections on the circuit board to our switches from the buttons and directional controls. This was not easy.

Wiring up

The start of wiring. We had:

The table top on its side.
A stanley knife.
A spare monitor and PC.
A hot soldering iron.
Lots of wire.
Lots of solder.
We then connected the wires to the switched and checked that they produced a unique keypress. Harder than it sounds.

The Control Stick

Here is the underside of the control stick. You can see in the picture that there is a rod that comes down the middle of the plastic casing. This is actually the other end of the control stick. This then pushed against the switches when you change direction, up, down, left and right.

The switches are then hooked into the hacked PS2 keyboard controller circuit, that then outputs the 4 directions as keystrokes.

Wiring Complete

This was by far the hardest part of the project. Okay, making the custom flash game was tough, but the wiring had to be re-done twice!

I tried to make an effort to clean up the wiring so that snagging the wires was more difficult and to generally make it look nicer.

You can just about see a tube of “All Purpose” glue on the left block above the screen, the soldering iron and a stanley knife. All very essential when starting a project like this.

The final specification

This picture is taken just before the playtest. The strip lights have been secured under the table and all of the components have been put in the cabinet.

At the bottom is a fairly good PC. We just wanted it to be able to play flash games well, which most PC’s can do. This one is an AMD 1600+, 768Mb Ram, bluetooth, wifi, and a 64MB ATI 7000 with dual VGA and S-Video out (so we can mirror the display to a projector for spectators – increased social interaction potential).

The bluetooth is essential for the flash game we made. Xplosion, the games name, is a socially motivated game where players control hovercrafts and fire bombs at their opponent. The winner can then bluetooth an image into one of the blocks in the game and have an associated power-up or power-down. This added a nice social aspect to the game, because if you knew who’s picture was there you could ask them if they had chosen a good or bad power up.

Wifi is also an essential part of the system to remotely update the machines software, games as well as put high scores, images and anything else online.

Above the PC is two Eltax Monitor 3 speakers. These are great to bosh out some bass for when the bombs explode and other in game sound effects.

Then carefully above that is a Cambridge Audio, A1mk3 amplifier.

Play Testing

This is the first opportunity we had to demonstrate what we had made. Will it work or will it break?!

We let the rest of the students enrolled on the final stage games module of BSc (hons) Digital Art and Technology have a go at playing and trying to break what we had created.

This picture shows quite a crowd gathered around the Socious platform playing Xplosion for the very first time.

If you want to learn more about what we get up to on the games module and what other groups have made take a look at, www.thegamesmodule.com.

Close-up

The harley effect on the controls was a hit. The more relaxed stance and posture made for a much more enjoyable playing experience.

Socious – Finished pictures

This is a completely finished picture of the Socious box. Looking sweet!

So at this stage, the price wasn’t too bad. Here is a quick breakdown.

Wood, Perspex & Workshop: £40
Primer and Paint: £12
Perspex Underlay, 2X A1 Black Card: £6
Buttons and Controls: £20
Coin Mechanism (yet to install): £10
And some forgotten small costs.
PC, Screen, Speakers & AMP were already owned.

Plymouth Students Union

In addition to the play test with the final stage games module students, we had the opportunity to let all the other students in the university have a go.

So we put the Socious table in the Plymouth University students union for all to play. We also projected the game onto a big screen for all to see.

We had some great feedback and responses from the players. We also noticed that the bluetooth element of the game really did produce a lasting social impact on the game.

Presentation

As part of the games module we pitched out games, table, corporate identity and business plans to potential clients.

We took the Socious table along so that people could have a go after we had done out pitch.

Buttons

To finish the table nicely I put black card under the perspex. This matched the colour of the black table, and complemented the black buttons and controls nicely.

To add a personal touch we placed cut out designs and stuck them down around the table under the perspex.

This players buttons are coloured blue, as is their hovercraft in the game. The other player’s colour is red.

Xplosion

An in game graphic for the custom flash game we developed for the Socious Table.

Each player was a coloured hovercraft, which could throw bombs. The bombs distance was dictated by how long the fire button is held down for.

If the bomb hit a player it would explode and kill the player. But if the bomb missed it did not detonate, but started counting down to explosion. This meant you could plant several bombs and use the B button to detonate them and hopefully kill the opponent if they were in range of the bomb.

The winner can then bluetooth an image into one of the blocks in the game and have an associated power-up or power-down. This added a nice social aspect to the game, because if you knew who’s picture was there you could ask them if they had chosen a good or bad power up.

In Game Graphics

This shot just illustrates what happens when the winner of the game sends a picture into the game.

The user can bluetooth any picture they want from any phone with bluetooth, and then choose a powerup the player will receive when a bomb lands on the picture.

In Game Graphics 2

This shot just the beginning of a game. One player, the blue player here, shoots a bomb over the central divide and tried to hit the other player.

This pictures from previous players are all over the playing field, and when hit by a bomb, the player receives a power up which is chosen by who put that picture in the game.

As seen on Makezine.com – http://blog.makezine.com/2006/02/27/the-social-arcade-table/

Nicholas Soper

About Nicholas

I am passionate about working in tech, travel, solving problems and helping people. I also love being active, surfing and being outside. From England and currently living in Cape Town, South Africa. Say hi! Learn more about Nick.