Gangster Squad: Tough Justice game

Gangster Squad Tough Justice is a stage3D based flash game that can be played here

At high peaks up 6 people worked on this project consisting of: developer, game art artist, ui designer, 3D character artist, game tester, wave editor and map editor. Some facts:

  • 9.5 weeks development
  • 2002 sprites packed into 4 sprite sheets
  • 232 sound effects
  • 157 voice overs for the characters

Overview

Art & Design

  1. Character design
  2. Environment design
  3. Sprites
  4. 3D characters
  5. Particle Sprites
  6. Map Editing
  7. Interface Design

Technology

  1. Starling
  2. Raycasting
  3. Enemy Ai
  4. Destructable Environments
  5. Rendering Sprites
  6. Particles
  7. Ui Transitions

Character Design

Initial concept looked a little bit like mini gore with a top down perspective and chubby character proportions. The camera was initially close up because we wanted to feel the impact of the weapons stronger. But as Ai and environment became more part of the gameplay we had to change the perspective to be further away.

This image shows the enemy designs, the game comes with 9 different enemy types.

Drawings from the earely environment direction: We didn’t end up doing all the environments we wanted to at the beginning :(

Environment Design

The environment is painted in Photoshop and matches a perfect 60 degree isometric view. Many of the bigger sprites have destroyed states which show when an object gets damaged.

All sprites were drawn in a 2x size so that future resizing or porting offers some freedom.

Sprites

Every physical object or particle was saved as a seperate PNG image and packed into a sprite sheet. Sequenced sprites such as open/ close or destruction states were saved with sequential filenames such as table_00, table_01 etc.

For the character sprites we wrote a 3dsMax script that renders specific frames of the animation and specific directions we want to cover in the game.

This is what a texture looks like using the ShoeBox JPNG compression where one image contains booth the RGB and alpha portion of an image inside 1 big JPG image. This technique compresses the textures down to 40% of the original size.

3D characters

The game uses pre-rendered sprites of 3D characters that we created in 3dsMax. Blender and Photoshop were used for the texture painting. The animations were done using Character Studio inside 3dsmax and several animations were translated to other characters to save work.

Characters in their T-pose. Every character was rendered in 2 sprite sets: Legs and upper body. That way we could rotate and animate those 2 sections independently in the game engine.

Particle Sprites

If you shoot something or blow something up you want it to look satisfying. We sourced several explosions, smoke and fire sprites from professional stock footage but painted everything else we needed such as chunks and pieces of objects you can blow up or destroy.

Many of the particle sets are played back or displayed at a random frame of the collection such as the muzzle flash for example so that it never looks repetitive.

Map Editing

For the map editing we used monogonEd (one of Soap’s internal tool’s) which was a result of previous projects such as Expendables 2 – Deploy & Destroy. For this game we added a few unique features such as vector sets (for the walls and floors) as well as custom pivot registration points.

For the collision detection in the game we used a seperate bitmap where every channel represents a certain collision flag in the game engine such as #world, #objects or #cover so that the Ai in the game can make good decissions.

Interface Design

The UI was build in the old school Flash IDE using timelines and is rendered on top of the stage3d.

Starling

The game engine is build on top of Starling but strongly modified to support for example

The game runs smooth with up to 10,000 sprites in the screen area. All of these sprites can be animated or scripted without impacting the performance.

Raycasting

Most of the collisions in Gangster Squad are based on raycasting within a bitmap of a lower resolution. Each of the red, green and blue channels functions as a different flag for the different collisions or rays that are casted.

Other uses of this raycasting include:

In order to have a map that can change (destructable envinroment) every object sprite comes with its own collision brush (red sprites) and is drawn into the collision bitmap once it gets added or removed.

The green channel is a bitmap processing that gets updated in a more frequent cycle and represents the cover area for the AI so it can hide behind objects to shoot at you.

Ai

The Ai has several ways of communicating with the player to show what it’s up to or how it deals with the current situation. Some highlights:

For the pathfinding which is solving the actual walking path to a target we used a Dijkstra based path finding in a rouhg grid representation of the collision map. Because this pathfinding is reading the pixel values for each grid position from the collision map we can always ensure that the collision data is up to date, like when some environments changed due to the destruction of some objects.

Destructable Environments

Most of the objects have multiple destruction states of their sprites. So that when an object gets damaged it transitions into the next sprite state until it gets destroyed completely.

Objects also offer cover for the player and enemies, if they become destroyed the cover is gone too and the enemies will seek for other cover options.

Rendering Sprites with 3dsMax

For the character sprites we wrote a script inside 3dsMax to render the sprites in a specific sequence. This allowed us to re-adjust the number of directions or animation frames to max out the texture sheets space.

Particles

 

Every object in the game has unique material definitions that affect how it gets blown up into pieces or casts particles if you scratch it with your weapons.

A pooling system keeps a limit of the total animations and sprites that can be displayed at once but usually it doesn’t exceed 6,000 sprites at a given time.

Ui Transitions

Besides timeline animations the UI features dynamic masking transitions to blend 2 UI states. This gives the UI a film aesthetic while still having all those little plays in detail.