Final boss - UQdeco2800/2021-studio-6 GitHub Wiki

Although the final boss could not be designed or implemented in sprint 2 due to the scope of work and time available. A mood board was created from discussions with the entire studio and within the designers in team 3 to allow for better visualisation for what it will eventually look like. this idea will be tested further in sprint 3 and implemented.

the moodboard can be seen in assets/wiki/finalbossmoodboard.png

Appearance

The Final boss was tested by couple of users to brainstorming the final boss appearance according to the general enemies that have been created. After that, we chosen a design that was a fish and octopus mixed shape creature from all of the testers. After that, we took inspiration from finding nemo angler fish. Therefore, we draw the initial boss head looks and then tested with the users. After we received the feedback from users and then we primarily converted the drawing into the pixel art.

We will be doing more user testing to finalise the boss look.

Level Graphics

Dock

Using inspiration pictures and the exisiting enemy colour scheme a blue/green grey toned palette was used to create the graphic. the graphic is based on a side view of a classic simple dock with the addition of cracks in the poles and spiderwebs to better suit the storyline of the game. This was tested by asking testers questions to gauge if they understand what the image is and wether it can be walked on in the game The initial dock tile can be seen here: https://github.com/UQdeco2800/2021-studio-6/blob/main/assets/wiki/docktile.png this was then changed to a top view tile of the same design that can be interacted/walked on by the player. this was done after critiques in week 9 explained this would be a more effective design.

Health Bar

the health bar uses a simple colour scheme of dark green and red which aligns with the colour scheme of the game and uses a red colour which is reminiscent of health shown commonly. the simple rectangular shape ensures users quickly understand what the image means and what it will display.This was tested by asking testers questions to ensure they understand what the image is and wether it suits the style of the rest of the game.

Sailboat

The sailboat is inspired by classic cartoon images of sailboats, a few of which have been sourced below. Additionally, a small sailboat in the epilogue was previously created, and inspiration was taken from that. The colour scheme includes a few shades of brown, beige and black for the outline. Piskel was used to create the graphics. The first creation of the boat graphic can be seen here: https://github.com/UQdeco2800/2021-studio-6/blob/main/assets/wiki/Sailboat_1.png

In the second version of this graphic, dynamic lighting was taken into consideration. Highlights are shown in the top right corner of the graphic, while shadows are seen in the bottom left corner. An anchor was added to the side of the boat. The second version of the sailboat can be seen here: https://github.com/UQdeco2800/2021-studio-6/blob/main/assets/wiki/Sailboat_2.png. It has been decided that this is the final version of the sailboat, as users have positive feedback to its design.

Light Beam

One of the attacks by the final boss is a beam of light that shoots from its eyes. Inspired by user testing, this beam of light will be red. The colour scheme includes multiple shades of red, and small lines of light red throughout the graphic. This graphic is entirely a pixel graphic made in Piskel. A link to the first version of this beam of light is seen here: https://github.com/UQdeco2800/2021-studio-6/blob/main/assets/wiki/light_beam_1.png

The second version of the light beam was well taken by users, and as such will be used as the final graphic. The final graphic can be seen here: https://github.com/UQdeco2800/2021-studio-6/blob/main/assets/wiki/light_beam_FINAL.png

In the final sprint, some more changes were made. It had come to our attention that the graphic did not span the full 32 pixel width, which would prove to be a problem when passed to the coders for the hit boxes. Therefore, the graphic stayed mostly the same, but was extended to fit the full 32 pixel width. Additionally, the animation was created for the light beam. This was also made in Piskel, drawn frame by frame. A small detail added to the animation is that the specks of light on either side of the light beam change from frame to frame, creating a more realistic animation. It consists of many frames (32), so that the animation will look pixellated but also not too jumpy - this well fits the style of the game. The final graphic and the animation can be seen in the sprite sheet, here: https://github.com/UQdeco2800/2021-studio-6/blob/main/source/core/assets/images/Final_Boss/laser.png

Tentacle

the tentacle was created to be fought against during the battle. It took inspiration from classical pixel art tentacle designs and used the colour scheme of the final boss sprite along with the overall colours of the game.

Programming

When designing the boss, we decided that it would be best for it to have stages, in which each stage is unique and changes the way the player must do things. The following image is some brainstorming for ideas related to the boss fight:

To implement this we treated each stage as a task and added it as a component to the boss entity. The boss entity is created in FinalBossFactory.java with the createDarkness(Entity target, Level4 gameArea) method. Within FinalBossFactory.java there are other methods as well:

createBossHead() - This creates the physical boss entity that the player must attack
createBeam() - This creates the beam that the boss head shoots at the player
createLightSpawner(Entity target, GameArea gameArea) - Creates the spawners used in stage 2

Stage 1

The first stage involves the boss head moving from left to right at the top of the screen. The player must throw rocks at it to deal damage, however, if the player stands in front of the boss for too long then the boss fires a beam that deals significant damage. To implement this a task was added to the darkness entity in FinalBossFactory.java, which is Stage1Task.java. This class has the following constructor and methods:

Stage1Task(int priority, Level4 gameArea, Entity darkness, Entity beam, Entity bossHead)
attack() - This method is what moves the boss head around and it also fires the beam at the player
start() - This method initiates the attack
update() - After a certain interval, the attack method is called again. This is how the boss head keeps moving around and the beam is always fired in a different locaiton
stop() - Stops the task
getPriority() - Returns the priority of the task

Stage 2

The second stage involves 4 different spawners, one in each corner of the map. Each spawner spawns a different enemy. In order to progress, the player must destroy all of them. To implement this, the Stage2Task.java class was created, which has the following constructor and methods:

Stage2Task(int priority, Level4 gameArea, Entity head, Entity target)
createSpawners() - Creates the spawners, placing them in the 4 corners of the map
start() - Starts the task, by calling createSpawners()
update() - After a certain interval, the spawners spawn their specific enemy. It also checks each time to see that it has not been destroyed, otherwise it stops spawning
stop() - Stops the task
getPriority() - Returns the priority

Stage 2

Stage 3

The third stage of the boss fight has not been implemented yet but it will be done in a similar fashion to stage 1 and 2. It will be the final stage and so therefore it will be the stage where the player must finally defeat the boss. Since stage 1 involves the actual boss and stage 2 is just some spawners, stage 3 should combine these two and so there should be various enemies spawning as well as the boss attacking the player.

Final Boss State diagram

The final boss laser beam logic was refactored to use the state machine pattern

Final boss State diagram

Also did the same for the bullet state

Final boss

User Testing

Boss

Dock

What is this image? - Something you can walk across like a bridge - It is a pier or a dock

(show game quickly to user) Does the image fit in with what I have shown you? - The colours definitely make sense and it’s the same type of art - I think so, I like the dark colours with other things shown in the game

Would you interact/walk on this image? - I would assume I could walk on it - Yes I assume it would take me from my current location to something else

Health bar

What do you think this is? - Some sort of bar to show levels - Some sort of points system

(health bar shown above final boss) How about now? - I think it’s a health bar - Oh it shows the health of that character

How effectively does this convey the health of the boss? - It does it well as the colours make sense for an enemy and to represent its life I think it does a good job, its simple and makes sense logically

Sailboat

User testing was conducted on the sailboat in order to improve the initial graphic, and feedback was received from peers and users. When presented to peers, their suggestions included adding highlights and shadows and fixing the corners of the boat, as the positioning of the pixels did not look correct. When presented to users, they also commented on adding shadow. Additionally, they suggested creating oars and an anchor to the side of the boat. This feedback will be taken into account when creating the second version of this graphic.

A second user testing was completed after adding shadows, fixing the corners of the sail and boat, and adding an anchor. Users much preferred this version, saying it looked more realistic and dimension was added with shadows. No new suggestions were given, therefore, the second sailboat will the final sailboat graphic.

Light Beam

Users were asked a simple question, "What colour do you associate with an attack that takes the form of a beam?". They were also told that the background for the level would be yellow. Sidenote, although this question seems convoluted, I did not want to lead them to an answer by referring to it as a 'light beam' attack. Five users were questioned - three answered red, and two answered blue. Users who answered red associated the beam with a laser beam, which is generally red. Interestingly, one user answered "blue if it's from the protagonist, and red if it's from the villain". Another user said that red symbolises "blood, power, and heat", and is fitting for an attack. Users who answered blue justified their answer with several light attacks in video games, tv shows and movies - despite this, these attacks are usually from the protagonist, and thus, does not make sense for our enemy. According to this feedback, red was chosen for the colour for this attack, as the light beam is coming from the final boss enemy.

A first draft of the light beam was shown to users for user testing. Users liked the difference of colour between the inside and outside of the beam. The position of the small, lighter red lines are also well positioned. An improvement was to add dark and light red pixels outside of the light beam, "a beam of light won't stay in one constant stream, especially if its fast". This advice will be taken for the next iteration of the graphic.

The second graphic was well accepted by users, they agreed with the pixels outside of the light beam, calling it 'realistic' and 'reminds me of anime or cartoon fighting scenes'. Due to this, this will be used as the final graphic for the light beam.

Tentacle

what would you say this image is depicting?

a octopus tentacle
some sort of tentacle

would you say this fits well in the game and with the final boss?

yes I would say its effective
yes I think the colours are good and it is a clear image

Final boss head

User testing was conducted on the final boss head in order to improve the initial graphic, and feedback was received from peers and users. When presented to peers, their suggestions included adding highlights and shadows and rotate the head a bit of downwards, as the positioning of the pixels did not look correct. When presented to users, they also commented on adding shadow and some colour correctness.

References

[1]‘Boat - Sail Boat Cartoon Transparent Background, HD Png Download - kindpng’. https://www.kindpng.com/imgv/ThbbmT_boat-sail-boat-cartoon-transparent-background-hd-png/ (accessed Sep. 25, 2021). [2]‘Sailboat cartoon vector image on VectorStock’, VectorStock. https://www.vectorstock.com/royalty-free-vector/sailboat-cartoon-vector-8633576 (accessed Sep. 25, 2021).