Sprint 5- Long and fun Ui/ mechanic design + music design + new skill unlocked?? 

After a long run of environment and character design, I finally got to work with the Ui. I am so excited to work on them as I know there will be bunch of drawings needed to be completed and I have the confidence to finish them nice and quickly 

I have researched some ideas for our Ui art, the concept will still remain cute/ childish/ crafty.

Dialogue box

First draft + Esi’s response

I had some stitches surrounding the box, creating a crafty aesthetic, some stitched cloth flowers and glass beads as decoration around the name box. I was planning to design a font for each character and a logo of  the mini game they are representing (e.g. Makenah- braids for hair braids , Ines- brush for painting), but Esi thought font design might be unnecessary, we will see

I wanted the dialog box to remain pink ,matching with the simple, serious version dialog box at the opening of our game. 

Esi decided to withdraw the font, but I still want to specify characters by narrative Ui. Esi suggested to change the dialogue box to blue/green when interacting with Ines. But I think the color contrast between blue/green and pink is too strong for the big area of the dialogue box + I need to redraw most of the elements but we were running out of time, so I suggested to have the color of the name box as characters’ signature color 

Colored/ second draft

Esi found the dialogue box is too big, it was almost covering up half of the screen, so I am reducing the width of them (2 stitches width)

Final:

Before VS After

Setting & UI (Button and doodles)

This UI was first done by Esi for testing, I am going to design the buttons also adding some doodles onto the note sheet, as if Karima was haaing fun drawing

For the buttons, Esi liked to have them pink. I was thinking I have already done handcraft element for the dialogue, so I am going to have those buttons with hair related design. Since the buttons are small, I reviewed to make it simple, I added a little hair clip at the top of it 

For the doodles they are “bad’ drawings and storytelling, some of them are Karimah’s self reflection/ inner thoughts. The whole concept is Karimah wip on her papers

Doodle 1 Her parents arguing, that was what Karimah often heard but could not see, so she imagined it and drew it out. She could not understand some of the “adult words” so they remain as symbols
Doodle 2 Karimah herself she felt helpless towards the quarrel between of her parents, she was seating in front of her paracosm (cardboard sheets) crying
Doodle 3 Karimah and Makenah. She feel helpless towards her parents
while she has no one to talk to. Makenah is her imaginary best friend,
and her role model at the same time. She wish she can be happy as
Makenah and do not have to worry about anything
Doodle 4 A tulip, presenting out nature theme

Doodle 5 Karimah’s hair plan, she is going to do this hair style next, rather for herself or or Makenah, presenting our hair braiding theme

Doodle 6 Paper cuts, presenting our craft theme

Doodle 7 Random shapes drawing

Doolde 8 Cute scissors

Doodle 9 Daisy flower with different facial expressions on each petal

Doodle 10 Hair plan for Ines

After arranging the the designs , the setting menu looks like this now

So as the diary paper

Setting logo

We also need to change our setting logo, the size of it was 512×512 pixels, I was trying to make it playful so I added a smiley face in the middle of cogwheel

Visual

Music Design

After making the theme song of “Karimah’s Parascom”, I got familiar with MuseScore, I am making a new song for our opening. The opening was about a day in Karimah’s life, she heard their parents arguing in the living room again. Karimah gets scared whenever this happens, she is scared to go out from her room or even speak.

Story about inner world reminds me of movie inside out, I find their theme song atmosphere matches our concept, it is giving clam, curious aesthetic. I wanted to recreate this atmosphere for my opening but sadder.

I have tried to add bass for our theme song but it did not turn out good as I wrote the melody first, I withdrew them at last. For this opening, I was trying to think of the bass first then the melody in order to make the sound richer.
I had electric piano and marimba for the bass, they sounds “negative” and are representing the conflict between Karimah’s parents

Crotales plays as the melody of this song and the other is the second/ auto, they are representing Karimah’s innocence.

Crotales:

Vibraphone:

All together/ full version

The contrast between parents’ conflict (negative) and child’s innocence (positive) was what I was trying to recreate through music.

Mechanic/ origami animal design + new role unlocked??

We had crafted animal for our environment, but we think it would be nice if there are accessible animals allow players to “drag and drop” with them. I first plan to design some simple illustration, but I thought it would e interesting to have these animals moving, so I decided to make mini GIFs instead of illustration.

It was my first time making animation with clip studio paint, so I searched up how to access with their animation tool from their official website. I elaborated a few points that I need to pay attention while making the animation

  1. I need to create an animation folder for each cel, so that I can include color and shadow layer into them
  2. The plan I bought allows maximum 24 slides of animation, I need to manage the detail on each cel to prevent from over draw
  3. Whenever I change the name of the animation folder, the cel disappears from the timeline, I need to add the folders back to the timeline every time I rename them, to make sure I am not missing/ disarranging the cel

I was making a swan origami, and I wanted it to move like it is nodding/ swimming. I first tested with a circle. Esi thought it was moving too fast so I slowed it down from 10 fps to 6 fps, and I think 6 fps works the best for small animation like this, I decided to have rest of my animation works 6 fps

10 fps version
6 fps version
Making process
The GIF

I am also making an origami cat, this time, I would like it’s head and tail moving.

First attempt: It was quite bad as it’s tail did not look its, more like something floating on it’s body, the problem is I should not be lazy, I have to have all it’s tummy copied to each cel in order to cover it’s tail
Second attempt/ final: Problem solved!

The GIF


Reflection: I was an effective I have done music, many tiny illustrations in this sprint and even learnt a new skill- 2D animation. I felt guilty for withdrawing the programmer position at the very beginning of this project, but since I have this new skill, I was planning to make a small animation/ effect for our game’s ending. I always wish to bring new thing to this project and I am happy that I am able to contribute more than before (sprints before this)

Back to sprint 4____________Next sprint