Buff and Debuff Assets
This is the document detailing the assets added to the game by Team 1, covering the design justifications and implementation of items for buffs such as speed boost, jump boost, and time stop (extra time) as well as items for debuffs such as speed decrease, explosion (screen blockage), and stuck lock (player gets stuck).
These are the rules Team 1 set out within the Team 1 when designing the assets.
- The assets must make sense to the thematic style of the game.
- The assets's visual design should be relevant and represent its name.
- The assets should have consistency with each other in terms of design and animation.
Rough sketches were made in response to the key design considerations. This is crucial in the development of the assets as it gives a glimpse of how the assets will contribute to the game as well as to make sure the assets are aesthetically consistent with the game concept art.
Debuff and Buff items rough sketch
In order to achieve consistency in the design, the items' design elements follow the aesthetic components of the title design on the home page. As a result, the items designed integrate the sci-fi look with neon effects around as the outline with the same exact blue colour which is used in the menu background. Furthermore, the items adapt simplicity in terms of representing its name and functionality, for example, speed-boost item would be visualised as lightning bolt, hence, the items would make sense and live up to its name. Moreover, animation (i.e. colour-changing animation) is added to each item to differentiate between which item is a debuff and which item is a buff. For buffs, each item would change colour from blue, as the game's main colour, into yellow - whereas for debuffs, each item would turn from blue into red.
Speed increase item - enhancing the player's performance by increasing the player's movement speed (Duration: 4 seconds).
Jump Boost item - enhancing the player's performance by increasing the player's jump movement (Duration: 6 seconds).
Time-stop (Extra time) item - enhancing the player's performance by stopping the void so player gets extra time to run (Duration: 2 seconds).
Speed-decrease item - degrading the player's performance by decreasing the player's movement speed (Duration: 4 seconds).
Explosion (screen blockage) item - degrading the player's performance by adding visual blockage on the screen (Duration: 4 seconds).
Lock (player gets stuck) item - degrading the player's performance by stopping the player from running (Duration: 2 seconds).
With the items now in game, we wanted to implement a way for the user to know if they have a (de)buff active, and how long they have left before it finishes. During Sprint 3, Team 2 worked on implementing this UI element. When the player picks up a (de)buff, the goal is that icon will then be displayed above the character, with an outline and colour change to indicate how long the (de)buff has remaining. The design had to be done in such a way that the duration of the icon's animation could be scaled according to the (de)buff as each item lasts for different periods of time. The design uses a hexagon that surrounds the item's icon, which has been animated to disappear in a clockwise wipe for the duration of the (de)buff. The icon and hexagon will change colour slowly over the duration of the animation. Once the hexagon disappears, the effect stops and the icon will disappear also.
First, the hexagon outline was created using Adobe Illustrator. This was to ensure that the look and design matched what was already created, using a software designed to create this type of look (as filters and blurring was. used to get the desired effects). Next, we used Adobe After Effects in order to animate the icons. After Effects was used as it was a software that certain team members were already familiar with. Adobe Animate or other softwares could have been used, but the team decided it would be more efficient to use a familiar software rather than try to learn a new. After Effects also provides easier control and access to composition effects that Animate doesn't have.
To create each icon, first a base template was created that would have the effects applied to the hexagon outline. From there, we could create individual After Effects files for each (de)buff with necessary composition settings such as duration and what files were used. Each item had a 0.5 second buffer at the start and end of the animation for a fade-in and fade-out effect, meaning that the overall duration of the animation is 1 second longer than the duration of the associated effect in game. Below is a screenshot of one of the After Effects compositions that were created.
Next, we needed to be able to display the icons in game. For an animation such as this, we need it to be a sequence of images, that are then packed into sprite sheets with an associated atlas file. Adobe Media Encoder was used to export each After Effects Project into a PNG Sequence. Doing this turns every individual frame of the composition into a png image (and we use png in order to get a transparent background). Packing and creating the atlas files was a little more difficult. According to the libGDX TexturePacker GitHub Wiki to pack an animation, we can put an underscore after the name with a number and the atlas will be packed correctly for this (by changing the index rather than creating a new texture per image). Media Encoder automatically numbers each image according to its frame, so adding an underscore to the end of the file name allows us to automate this process. An example of the Adobe Media Encoder window is provided below.
With the PNG Sequence created, we used the TexturePacker() method provided in the libGDX libraries to pack all the frames and create the corresponding atlas file. Each item has its own atlas file and series of sprite sheets. Examples of the animations are provided below in .gif format.
