Graphic Designs

Completion Date:

Air Gallet Explosion

Frame-by-frame 2D vector animation of an explosion for a recreated University assignment

Software

Affinity Designer, Unity, Trello

This project was a university assignment that provided hands-on experience with the Unity game engine and involved team collaboration. While the ultimate goal was to recreate the classic 1996 arcade game Air Gallet, each team member was required to design a particle effect for the project. Instead of using the standard approach of creating explosions with the particle effect system, tracing over the explosion sprite from the original game achieved a result more truthful to the source material. Due to an inexperience with Unity's particle system, designing this animation frame-by-frame in a vector format was more efficient than raster. This allowed for exporting the design in any resolution without sacrificing quality, a needed characteristic as all frames were finalised onto a single sprite sheet.

In this game-focused project, particle effects are many small animated objects that can be manipulated to move in specific patterns, fade out, or collide with other objects to represent explosions, fire, smoke, and sparks. Sprites, on the other hand, are 2D images typically of characters, objects, or backgrounds. When arranged in a grid, they form a sprite sheet that can be used to create complex animations, with each sprite representing a single animation frame. During this project, a sprite sheet was used in Unity to develop a specific repeatable particle effect.

In this project, the primary goal was to recreate the first level of Air Gallet while meeting the weekly sprint objectives and documenting progress on a Trello board. Additionally, the project involved the creation of a particle effect, in this case, to simulate explosions, which was of utmost importance due to the game's focus on destruction. The goal was to ensure that the animation accurately represented the original, contained the same number of frames, and was the same length. Implementing the particle effect into Unity to be used in real-time for the game's recreation was also a crucial objective. Finally, matching the audio to play at the correct time was another critical project component.

Full Air Gallet Playthrough

Before developing the project, a comprehensive playthrough of the original Air Gallet game was recorded and timestamped to indicate the different levels. This was an essential step in the design process as it allowed entire levels to be captured so they could be edited for a complete view. An original playthrough was required as the game automatically scrolls vertically, but the player needs to manually go back and forth between edges to capture those offscreen areas. Additionally, identifying the most repeated assets, such as enemy types, destructible objects, and environmental pieces like trees and buildings, helped prioritise which assets should be developed first. Similarly, the particle effects were catalogued, revealing that the game had a single explosion effect for bosses, a small one for enemies, and one for objects which was used extensively throughout the game, making it the top priority for development.

After extensively researching the source material, planning began on the team's Trello board. Each card on the board was assigned to a member and was dedicated to an element of the recreation, such as a specific enemy plane, a feature of code, or a particle effect. Most cards included a checklist of tasks, including attaching a reference image, blocking out a concept, refining the design, gathering feedback, implementing changes, and placing the element into the project. Trello's commenting feature was heavily used to provide each member with feedback, store tutorials, and information researched. Additionally, a dedicated list was used to prepare for and record the results and feedback from each weekly scrum meeting, helping the project to stay on track and meet requirements.

To create the explosion effect accurately, the recorded playthrough of the original game was broken down into a clip where the full explosion was on screen into 21 individual frames. However, since the game vertically scrolls, the reference frames had to be repositioned to ensure that the explosion stayed still in each frame and didn't move along the screen. Additionally, M1 Bridge was used to extract all of the game's original sound effects, including the explosion sound, from the MAME ROM file and convert them into a readable file type for use in the new particle design.

To create a more stylised version of the game, the final design for the explosion effect would consist of only a handful of colours. Since the project involved converting the original 2D game into a 3D space, it was decided that creating a stylised atmosphere would ease the recreation process. Consequently, the explosion effect would no longer be pixel artwork. Instead, it required smooth edges, which Affinity Designer, a vector-based software, was able to achieve. The design would then be incorporated into Unity's particle effect system and coded to play when enemies, objects, and players explode. The sound effect would also match the original game and play synchronously with the explosion particle. Additionally, the duration of the effect would be consistent with the original game, lasting for a total of 21 frames.

... Original explosion particle effect reference
... Final Trello board with sprint reviews, assigned cards, checklists, and due dates

To create a more stylised version of the game, the final design for the explosion effect would consist of only a handful of colours. Since the project involved converting the original 2D game into a 3D space, it was decided that creating a stylised atmosphere would ease the recreation process. Consequently, the explosion effect would no longer be pixel artwork. Instead, it required smooth edges, which Affinity Designer, a vector-based software, was able to achieve. The design would then be incorporated into Unity's particle effect system and coded to play when enemies, objects, and players explode. The sound effect would also match the original game and play synchronously with the explosion particle. Additionally, the duration of the effect would be consistent with the original game, lasting for a total of 21 frames.

Following the design phase, developing the explosion particle was a smooth process. The decision to use only a limited number of colours and compensate for the vertical scrolling by capturing reference images made the process straightforward. Using Affinity Designer, a 4096px by 4096px canvas was used to trace each animation frame with the pen tool to create colour-filled shapes. After tracing and colouring all the frames, they were correctly layered and copied into a new document divided into 1024px sections. Each frame was placed into a grid to make up the sprite sheet, a 5120px by 5120px document. The entire design process took three days and 27 hours of work. Once completed, the particle was quickly implemented into Unity as the software automatically divided the sprite sheet into individual frames based on the grid reference.

... Explosion animation frames laid out in a sprite sheet

Upon reflection, it became clear that the explosion particle effect was successfully recreated to match the new game style and was of high quality. However, a few areas could be improved, such as the hard-lined boxes used for the spark in the first frame, which resembled the original pixel art rather than the new cartoon style. Additionally, the gradients used in some frames were not consistent with the flat style of the rest of the particle effect, leading to a larger file size.

Final Explosion Particle Effect in Unity

The project provided valuable insights into the time commitment required to hand-design an animation of this quality and the challenges of designing with a limited colour palette to achieve a cartoon-style effect. It also provided a basic understanding of Unity's particle system. In future projects, finding more efficient ways to create particle effects in this style could streamline development. For example, partially automating the process by using a colour filter to isolate the targeted colours of the explosion and an auto SVG outline tracer tool to achieve a rough shape of each coloured shape could provide a base shape for all 21 frames, with adjustments made to correct any artefacts. This process could also be repeated to create additional particles for the final game reaction, as the project lacked other particles.

Have a project in mind?

Click below to tell me all about your graphic design idea. I can help fulfil your vision.