Week 10 Reflection – Presentation Sheet Layouts, and Creating all Pixel Art for Second Sprint

23/11/20

GAM701

Attended version control refresher lesson, that happened at the beginning of the day. This was really useful to refresh my knowledge of Sourcetree, and also gain some confidence as this week I’ll be doing lots more implementation into the engine as its the final week of the second sprint.

In the afternoon, I attended the lecture, which was shorter than usual to allow us more time for work.

I took this time to create the plan for the week:

Transcribed version:

Monday: – Attend lectures – Do GART work

Tuesday: – Attend lectures

Wednesday: – Focus on GAM701 work; character animations

Thursday: – GAM701 work

Friday: – GAM701 work – Try to have all character animations finished

GART702

Afterwards, I researched flower symbolism and emotions in order to finalise all the research for my character.

Flowers and Their Meanings – Flower Symbolism | Interflora – Learnt about daffodils having a connection to happiness. According to this website, they represent ‘rebirth, new beginnings, and good fortune.’ I originally wanted to use sunflowers for the happiness sprite, however, I felt that was too obvious a flower to use. Daffodils, I believe, suit my character a lot more as she has begun anew as a florist after her kingdom was destroyed, as I wrote in her character background sheet. (Flowers and Their Meanings – Flower Symbolism | Interflora, n.d.)

The Language of Flowers | Archives | Aggie Horticulture (tamu.edu) – Learnt about purple hyacinths and their meaning: ‘I am sorry, please forgive me, sorrow’. I believe that the colour suits the theme of sadness well. To extend this further, I wanted to make my character hold some withered flowers to further communicate her sadness, and also suggest that her sadness has caused them to wither. (Martin Anderson, 2020)

Hyacinth Purple Sensation 14-15cm | J Parker Dutch Bulbs (jparkers.co.uk) – normal hyacinths, so I can understand how they look before withering. (Hyacinth Purple Sensation 14-15cm | J Parker Dutch Bulbs, n.d.)

Hyacinth, Hyacinthus cultivar. Dead and faded flower head lying on Stock Photo – Alamy – reference image for dried hyacinths for sadness, dead flowers will convey this very clearly. (Flowerphotos, n.d.)

Petunia Flower Meaning – Flower Meaning As I have mentioned previously, I have decided to use these flowers for the angry sprite. (Petunia Flower Meaning – Flower Meaning, n.d.)

After completing this research, I decided to work on layouts for my character. I wanted to make sure I created some work to get critique on tomorrow during the GART lectures. As I was still tired from working hard on the weekend, and struggling a bit with the line art, I thought it would be best to focus on some work I could do lots of quickly.

To define the layout of my presentation sheets further I arranged the posed silhouettes I had done previously according to the rough designs I created last week.

Layout 1
Layout 1, with a dividing line.
Layout 2
Layout 3
Layout 4
Layout 5
Layout 6

I am quite proud of the variety of these sheets, and I personally really like the 6th one I created. To me, it feels the most complete and themed towards her. However, I know that once I have drawn the lineart and added the clothing, wings, and details that some layouts will work better than others.

References:

Interflora.co.uk. n.d. Flowers And Their Meanings – Flower Symbolism | Interflora. [online] Available at: <https://www.interflora.co.uk/content/flower-meanings/#:~:text=Pink%20Rose,thank%20you%20and%20congratulations%20bouquets.%20.> [Accessed 23 November 2020].

Martin Anderson, T., 2020. The Language Of Flowers | Archives | Aggie Horticulture. [online] Aggie-horticulture.tamu.edu. Available at: <https://aggie-horticulture.tamu.edu/archives/parsons/publications/flowers/flowers.html> [Accessed 23 November 2020].

Jparkers.co.uk. n.d. Hyacinth Purple Sensation 14-15Cm | J Parker Dutch Bulbs. [online] Available at: <https://www.jparkers.co.uk/10-purple-sensation-1415cm-1007078c> [Accessed 23 November 2020].

Alamy. n.d. Stock Photo – Hyacinth, Hyacinthus Cultivar. Dead And Faded Flower Head Lying On Rusty Metal Sheet With Two Individual Flowers Lying At Side. [online] Available at: <https://www.alamy.com/hyacinth-hyacinthus-cultivar-dead-and-faded-flower-head-lying-on-rusty-image62281415.html> [Accessed 23 November 2020].

Flower Meaning. n.d. Petunia Flower Meaning – Flower Meaning. [online] Available at: <https://www.flowermeaning.com/petunia/> [Accessed 23 November 2020].

24/11/20

GART702

Today, while attending lectures, I worked on clarifying the flower choices I had made. In the critique I received last week, some people were confused about the crossed arms pose for the sad pose. This, I believe, was an issue because I had not drawn the bouquets in the hands of the character yet, so the positioning may have felt off.

Quick concept sheet I made showing the flower choices I had made, and the reasoning behind this.

I showed these and the new layouts to the class. A lot of people really liked Layout 1, without the dividing line, so this is one I will look closely at refining in future.

GAM701

After this, I moved on to continuing my character work for the game. I created the tutorial character who will show the player how to fight at the beginning of the game by working from the base of the main character design and then altering it.

This is how it turned out:

Tutorial character first iteration.

I thought she was missing something, so gave her some laces on her boots which felt like it completed the design!

Tutorial character with laces on her boots added.

I received positive feedback from my teammates so I implemented this into the engine and then I started work on the run cycle of the main character. This was quite tricky as I have never animated a run cycle and they are quite a challenge to get right!

I found a few resources to help me:

(https://www.pinterest.co.uk/pin/203858320610642134/) (Run cycle • /r/animation | Animation walk cycle, Run cycle, Animation reference, n.d.)

https://iwanttobeananimator.wordpress.com/2017/02/15/ref_run-cycle_02/ (Porri, 2017)

(Colin, 2018)

Here is my progress for the day:

First iteration of the run, obviously needs working on, but a start!
Second iteration, a lot more successful than the last! She is still jittery, but the leg movements are more successful.

References:

Pinterest. n.d. Run Cycle • /R/Animation | Animation Walk Cycle, Run Cycle, Animation Reference. [online] Available at: <https://www.pinterest.co.uk/pin/203858320610642134/> [Accessed 24 November 2020].

Porri, C., 2017. Ref_Run Cycle. [online] I Want to be…an Animator. Available at: <https://iwanttobeananimator.wordpress.com/2017/02/15/ref_run-cycle_02/> [Accessed 24 November 2020].

Colin, M., 2018. Walk To Run Reference For Animation. Available at: <https://www.youtube.com/watch?v=k8DnMmq7ops> [Accessed 24 November 2020].

25/11/20

GAM701

I started off the day a lot more optimistic than the last few previous days and I am glad to finally be back to feeling better. Today I want to focus on finishing as many animations for the main character as possible. Once I have done this, it will serve as a template for the rest of the characters’ animations!

Today I was able to finish off the run and dash animations.

This is the finished run animation. She is less jittery and the animation is a lot smoother.
Dash animation, much more sped up than the other

After this, I created all three version of these animations too (neutral, angry, extreme). Here are some examples:

Dash, neutral version.
Run, neutral version.
Run, angry version.

Then I moved onto working on the attack animation. I gathered a few references to help guide me.

https://game.capcom.com/cfn/sfv/column/132209 (Character Animation: Ed | 初期&ボツ | 活動報告書 | CAPCOM:シャドルー格闘家研究所, 2018)

https://gamedev.stackexchange.com/questions/171297/workflow-for-authoring-hitbox-data-for-a-2d-fighting-platformer-game (Felsir, 2020)

Finished the first punch frame and then rested.

First frame of the attack animation.

References:

Game.capcom.com. 2018. Character Animation: Ed | 初期&ボツ | 活動報告書 | CAPCOM:シャドルー格闘家研究所. [online] Available at: <https://game.capcom.com/cfn/sfv/column/132209> [Accessed 25 December 2020].

Felsir, 2020. Workflow For Authoring Hitbox Data For A 2D Fighting/Platformer Game. [online] Game Development Stack Exchange. Available at: <https://gamedev.stackexchange.com/questions/171297/workflow-for-authoring-hitbox-data-for-a-2d-fighting-platformer-game> [Accessed 25 November 2020].

26/11/20

GAM701

Before attending the lecture, I read an article I was assigned by Matt to read. ‘Not A Boy, Not Yet a Gamer’ by Christopher J. Persaud (2019).

We were told to bring out thoughts about the following things to the lecture:

  1. What you thought were the key insights from the writing
  2. What you thought about the ideas presented
  3. Were there aspects of the writing that you disagreed with?
  4. What is the viewpoint of the writer of the article – do you think they had a particular position?

These are the notes I took:

  • I could relate to losing a game console and lots of games – In the article he mentions losing a gameboy on a bus in Paris, I lost my 3DS and loads of games on a train to Llandudno.
  • My interest in the article was piqued near the end when the author discussed the abuse he got as a member of the LGBTQ+ in this community. This struck a chord with me as previously he was discussing his enjoyment and excitement about e-sports, and then suddenly that viewpoint changed. He discusses growing out of it, and it felt like the rose-tinted glasses lifted as he discussed this.
  • Didn’t disagree with anything, thought it was a balanced article.

After attending the lecture, I continued working on the character animations. I created the second punch frame which would create the second attack. Here is what both the attacks look like together.

Both attack animations together.

After sending this to the team and getting approval, I also created the uppercut animation to create a full combo.

First iteration of the combo. I liked how this looked, however it is moving a bit too quickly to clearly see what is happening in it.
This is a slower version that I created to solve this problem. I added more duplicate frames of each stage of the animation to remedy this.

I was proud of how this turned out! I now only have 3 animations left: ultimate attack, knocked out, and revive.

I plan to finish these tomorrow!

References:

Magazine, L. (2019). Not a Boy, Not Yet a Gamer. In Magazine, L. Play (Logic #6). Logic Foundation, pp. 211-218. Available at: https://logicmag.io/play/ [Accessed 26 November 2020]

27/11/20

GAM701

Today I felt a lot more motivated and determined to do work, and I believe that is due to the fact I have 3 upcoming free days to focus solely on my work for the GAM701 game. There is a lot to be done for Monday at 7pm, but I am determined to get as much done as I can.

Unfortunately, this does mean that my progress for my GART702 work is stifled, and this is concerning to me as I am at a crucial part of the development of my character where what I am creating is hard to accomplish and will take a while on its own, without any other interferences.

Therefore, I want to make sure I do as much GAM701 work as soon as I can, so I can hopefully on Monday spend some time working on my character before Tuesday’s lectures. Although the deadline for my character is in January, I want to make the most of the Tuesday workshops to get feedback from Ady and my peers.

Today I worked on the Ultimate Attack animation first. For this animation I wanted the main character to hit the enemy with an overhead strike from a bat. However, as I was working on this, a teammate suggested I instead focus my time elsewhere

Advice given by my teammate.

I agreed that he made a valid argument, so I instead moved onto working on the knocked out and revive animations. To develop this, I looked at how River City Girls animated their defeated sprites. I found this video which displayed both characters being defeated at this timestamp:

(TenMoreMinutes, 2019)

I watched the footage slowed down and was able to create this knocked out animation.

Knocked out animation.

I wanted to make this sprite quite humourous, as our target audience isn’t strictly adults, so this silliness will appeal to younger audiences!

I took additional inspiration from how the characters in River City Girls also stand up again and I created this revive animation.

Revive animation.

With these both done, this means that the full animation set is done for the main character! I can now base all further character’s animations on this, which should speed up my workflow a lot.

After creating these I put all the animations, and the variations (eg neutral, angry, extreme) into the engine. This means that the main playable character and all her variations are completely finished!

Here is a gif of the full animation set:

Full main player character animation, including the now scrapped overhead bat move.

After this, I worked on finishing the secondary player character animations. Here is the finished result:

Secondary player character full animation.

For the design of the second player character I changed a few details so that she would be discernable from the other character, but not so much that they did not look related. This is because both player characters are sisters. We decided on this as a team not only for narrative purposes, but also because it speeds up the concepting and creation of this additional character as it is practically a re-skin.

After putting all the second character’s animations in engine I rested.

References:

TenMoreMinutes, 2019. River City Girls Let’s Play: Gut Punch Girlies – PART 1 – Tenmoreminutes. Available at: <https://www.youtube.com/watch?v=wugbxFZuofA> [Accessed 27 November 2020].

28/11/20

GAM701

To start the working day, I decided to create the UI that we needed for the game as this is essential and quick work that I can do. By doing work that is speedy and essential this would help me feel accomplished early on and push me on to creating the further characters!

I started by creating the loading icon for the game. I wanted this to have a clear narrative connection to the game, so I decided to make it into a motorcycle wheel to fit the girl biker girl narrative.

Loading icon I created using only two frames! I believe it works very well!

After this, I created the health bars for the game. I wanted the health bars for player characters and enemies to be discernable from each other, so I changed the colour of the health gauge to reflect this.

Full health bar for player characters. Green to communicate health and friendliness.
Enemy health bar. Red to communicate danger and negativity.
Empty health bar, used for all characters.
Health bar with character for reference of how it may look in game.

Lastly, I created the text box for the game. This was the UI that went through the most iterations to get right.

This is the first iteration of the text box, with an animated arrow to prompt the player to continue.

The continue arrow was received well, but the box needed more iteration. It was suggested that the box should be rectangular instead.

This was the second iteration.

This iteration was closer to what was needed, but to improve it my team suggested making it longer and changing the colour of it back to black.

This is the third iteration: a black text box with a white outline.

I decided to create one more iteration.

Forth iteration, this time with a red outline and arrow.

This final iteration was the chosen one by my team! I believe this was the strongest too, as the red reflects the gritty tone of our game and the setting of a neon bright red light district in Tōkyō.

I then moved on to creating one of the main antagonists for the game: The Ex-Boyfriend. His design was inspired by the Yankii style. This is a Japanese style that resembles the American rock’n’roll style. I first became aware of it in the game Yakuza 0, by SEGA, that I have mentioned in previous posts.

YAKUZA 0 Funny yanki substory - YouTube
Screenshot from the Yakuza 0 sidequest ‘Damned Yanki’. (stutter666, 2017)

After doing more research into the origins of this style, I found an interesting article. There was line, in particular, that stook out to me:

Highlighted passage from the article. (Buck, 2016)

I knew from this, I wanted the Ex-Boyfriend character to have a very comical large pompadour. This would show off his egotistical personality, while also making him quite easy to be hated.

An example of what the yankii style looked like from the above article. (Wikimedia)
This is the first iteration of the Ex-Boyfriend character, which, while I liked, I felt needed to be pushed even further!

I decided to exaggerate his pompadour even more!

The final iteration of the Ex-Boyfriend design, which I personally think is really successful!

As mentioned previously, I planned based his animations on the previous ones I had created for the main character sprites. This sped up the process as I did not have to do a lot of guessing work and I did not have to come up with completely new animations either.

I was able to finish his full animation cycle and get it into engine! Here is how it looks!

Ex-Boyfriend animation full.

After this I wanted to continue on to creating further characters, and I concepted a generic yakuza enemy, which I can create two other versions of by doing a re-skin eg changing of colours.

Generic Yakuza Enemy.

Once again, the design of this character was inspired by some of the designs of the characters in Yakuza 0, as the game is a big influence for me.

I also created a design for the mum character.

First iteration of the Mum character.

Her design is based on the older uniforms that female biker gangs would wear, as shown in my moodboards.

One of the character moodboards I created a few weeks back that particularly inspired the design of the Mum character.

One big inspiration for the design of her character is the outfits shown in this Japanese movie, Kamikaze Girls (2004).

Kamikaze Girls (2004)

While waiting for feedback from my team, I decided to move forward and start working on the environment for the game! Here is the progress I made before going to bed.

Progress on the background, daytime version.

I am particularly proud of the motorcycle I included with the title of our game on.

The bike I included based on the modified bikes that Bōsōzoku bikers used to drive.

This was a challenge for me to do, as I am very not used to creating industrial art, especially vehicles, but I am really happy with how it came out!

References:

stutter666, 2017. YAKUZA 0 Funny Yanki Substory. Available at: <https://www.youtube.com/watch?v=cAUp81s72CY> [Accessed 28 November 2020].

Buck, S., 2016. Meet the ‘yankii,’ the Japanese subculture that embraces American trashiness. [Blog] Timeline.com, Available at: <https://timeline.com/yankii-subculture-japan-american-c51808fa2172> [Accessed 28 November 2020].

Kamikaze Girls (Shimotsuma Story: Yankee Girl and Lolita Girl). 2004. [film] Directed by T. Nakashima. Japan: Shogakukan Inc. Available at: < https://www.youtube.com/watch?t=5024&v=jxSpBqdC1kA&feature=youtu.be> [Accessed 28 November 2020]

29/11/20

Today I continued working on the art for the game, and I aim to finish all art fully today. To start, I continued working on the designs of the generic enemies. The designs I sent previously were approved by my teammates, so I created 3 versions of this enemy in total.

I created the full animations for these characters, here is an example of the full enemy animations:

Generic enemy full animation sequence.

After putting these into engine, I then moved onto working on the mum character. In the first iteration of the character, I created her with ‘writing’ on her cloak, in reference to the designs of the biker girl outfits typically worn. These usually had the names of their gangs and their mottos.

However, I realised that this design was flawed as there was a possibility it could have been interpretated as mocking the Japanese writing system by creating this gibberish pattern. Additionally, I did not feel confident writing anything on the cloak of the Mum character, as the gangs we are representing in our game are fictional. To ensure there was not a possibility of any resemblance or relation to any real gangs I removed the ‘writing’.

Here is the final design:

Second, and final Mum character design.

To communicate to the player that the Mum character is older than most of the other characters I made her taller. Also, to fit the storyline of the game, I made the Mum’s scar less apparent, as she is meant to be a secret member of the girl biker gang which the daughters find out later.

Here is the full animation sequence for the Mum character.

Full Mum animation.

After finishing the animations for the Mum, I put them into the engine and then started working on the environments.

Using the references, I had gathered previously I was able to quickly create an environment. I decided to focus on completely flat 2D shapes in order to create a convincing background quickly. Although the final design is simpler than I had originally planned from the initial concepts I created last week, I believe that it is still very successful!

Finished design of the daytime background.

To add some life to the background, I added some simple animations. For the daytime version I added flies around the bin bag.

GIF of the daytime animation with a flashing ‘OPEN’ sign and flies on the rubbish bags.

To create the other backgrounds needed I used the Photoshop feature ‘Colour Lookup’ to change the colours of the piece to a evening and night time colour scheme. I had also previously used this technique during the last sprint when creating the backgrounds for ‘Mr. Fluffypaws.’

Evening version, colours edited in Photoshop.
Nighttime version, colours edited in Photoshop.

After I had done this, all I needed to do was take these PNGs into Aseprite again and add the neon lights and animation variations. Here is the final results of both backgrounds.

GIF of the evening environment, with flashing signs and lights of the lamp and the motorcycle.
GIF of the nighttime environment with twinkling stars, flashing signs and lights of the lamp and motorcycle.

I am very happy with how these turned out and I believe they are really successful! I implemented them into the engine, meaning that all the art for the game was now done! I am incredibly proud of myself for finishing everything and pushing myself hard! I had some well-earned sleep after finishing this!

Posts so far:

Week 1 Reflection

Week 2 Reflection

Week 3 Reflection

Week 4 Reflection

Week 5 Reflection

Week 6 Reflection

Week 7 Reflection

Week 8 Reflection

Week 9 Reflection

Week 10 Reflection

Week 11 Reflection

Week 12 Reflection

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s