ADVANCED TYPOGRAPHY TASK 3 : TYPE EXPLORATION AND APPLICATION
03.06.2022 - 01.07.2022 | Week 10 - Week 14
Ng Wai Fern | 0354966
Advanced Typography | Bachelor of Design in Creative Media
Task 3
LECTURES NOTES :
All lecture notes are completed in TASK 1 : EXERCISE 1 & 2
INSTRUCTIONS :
TASK 3 : TYPE EXPLORATION AND APPLICATION
For this task we are required to design a typeface that solve a problem in the area of our interest or explore the use of typeface in our area of interest. The end outcome would be a designed font and its application in the form that it is intending to provide a solution for or an exploratory process that solves a problem or adds value to an existing use. The applications can be animation, 3D, print, ambient, projection, movie title/game title or use of different material etc.
Research and ideation
Idea proposal
Fig 1.1 Proposal (week 10)
We were asked to propose ideas for our task based on our interests and how we gonna use the typeface. I have propose 3 ideas, Bubble bobble, Monkey magic and font inspired by dogs. After presenting my ideas, I have choose Idea #1, bubble bobble.
Explanation of chosen idea
Fig 1.2 Chosen idea (week 10)
Fig 1.3 Bubble bobble game
The idea I have chosen was Bubble bobble. I was inspired by Puzzle bobble or known as Bust-a-move, a series from Bubble bobble was a game developed by Taito. I decided to develop a typeface based on the game title because the font use through out the game doesn't really reflect the game (bubble element) in my opinion. This game is part of my childhood and I want to create a typeface that reflect the game's bubble element.
Research
Fig 1.5 8 bit font
During my presentation, Mr. Vinod suggested that I could try designing the font in 8 bit style. Before I start my digitalisation process, I observed some 8 bit font as references. After having some idea on how a pixel font should be, I watch some Youtube tutorial on how to create pixel art. I found this tutorial very helpful for what I wanted to do.
Fig 1.6 Pixel art tutorial by Cary Hawkins
Digitalisation and exploration
Fig 1.7 letter A progress
Fig 1.9 letter A- J progress (week 11)
Fig 1.9 shows the progress of letter A - J. I used COCOGOOSE font as a reference to design the font. After some try and error, I was able to find the balance for some letter because some letter have curves and different width.
In week 11, Mr. Vinod mentioned that the typeface with outline might be a bit difficult to read. I tried by filling in with colour but the details like letter B lost its details so I decided to stick with just outline.
Fig 2.1 letter with colour fill progress (week 12)
Fig 2.2 letter and number progress (week 12)
Fig 2.2 shows the progress for the letter and number. After putting them together, I realized some letter are too wide and some look a little off.
Fig 2 .3 number 7 refinement
Fig 2.4 letter M refinement
Fig 2.5 letter W refinement
Generating the font in Font Forge
Fig 2.6 import font into Font Forge
I started by importing the font (SVG file) into Font Forge. I searched for tutorials to fix the kerning and scaling as some of the letters were to wide and some are placed higher than another. This tutorial was quite helpful.
Fig 2.7 Font Forge tutorial by Michael Harmon
Fig 2.8 Font Forge progress
After solving the issue, then appear another problem. A rectangle appear for the spacing between letter.
Fig 2.9 Spacing problem
After some Google search, I was able to find the solution through a forum, https://www.dafont.com/forum/read/165638/having-trouble-with-unicode-for-whitespace-glyph-fontforge
Fig 3.1 Create spacing for space key
Fig 3.2 Space key problem solve
After refining and solving the problem. The font is ready to be generated.
Link to download font file : Bubble bobble font
Applications
Application #1 - Video/game play
For my application, I have decided to recreate the game play of Bubble Bobble. In week 12, Mr. Vinod mentioned that I might want to rethink how I want to showcase my font besides using it as game text. After some thought, I have decided to showcase the font as game title, text and effects. Before I start my application, I watch back the gameplay of the game to get the elements that needed to be created for the animation.
Fig 3.3 Bust-a-move game play
For the game background, I have found a website ( https://www.spriters-resource.com/pc_computer/bustamovepuzzlebobble/sheet/106197/ ) that provided the game background. To make it similar to the original, I used the background provided by the website. For the other elements, I have try to recreate them after watching the video.
Fig 3.4 creating game items for the video progress #1
Fig 3.5 creating game items for the video progress #2
Fig 3.6 creating game items for the video progress #3
Fig 3.7 creating game items for the video progress #4
Fig 3.8 creating game title
For the game title, I have redesign it with the font that was design. I tried recreate the game title with different styles ( with outline and without outline). The one on the left is the final version as it is similar to the original game title.
Fig 3.9 Bubble bobble title screen progress
Fig 4.1 Bubble bobble loading screen progress
Fig 4.2 Bubble bobble game animation progress
Fig 4.3 Bubble bobble game menu progress
Fig 4.4 Bubble bobble ranking screen progress
After creating the element, I imported them into after effects. I created each scene in different composition.
Fig 4.5 Bubble bobble video progress
After each scene is completed, I put them together in Adobe premiere pro and added some sound effects.
Fig 4.6 Final Bubble bobble animation
In week 12, Mr. Vinod mentioned that I might want to rethink how I want to showcase my font besides using it as game text. I have decided to design a game poster and packaging to complement the other applications.
Fig 4.7 Bubble Bobble poster
Fig 4.8 Bubble bobble game packaging
Fig 4.9 Bubble bobble poster mockup
FINAL SUBMISSION :
Link to download font file : Bubble bobble font
Fig 5.1 Bubble bobble - final type design
Fig 5.2 Bubble bobble - final type display poster
Fig 5.3 Bubble bobble - final poster
Fig 5.4 Bubble bobble - final poster mockup
Fig 5.5 Bubble bobble - final game packaging
Fig 5.6 Bubble bobble - final animation
Fig 5.7 Bubble bobble final animation - loading screen (JPEG)
Fig 5.8 Bubble bobble final animation - loading screen (MP4)
Fig 5.10 Bubble bobble final animation - menu screen (MP4)
Fig 5.11 Bubble bobble final animation - game play screen (JPEG)
Fig 5.12 Bubble bobble final animation - game play screen (MP4)
Fig 5.14 Bubble bobble final animation - ranking screen (MP4)
Fig 5.15 Final Task 3 : Type exploration and application - PDF
Hours spent : 60 hours
FEEDBACK
Week 10
Specific feedback :
- The font design can be used in loading/game level. It will be difficult to read if it is use as dialog/text
- Can try go for 8 bit style
Week 11:
Specific feedback:
- Try fill in with colour. It might be difficult to read with a thick outline
Week 12
Specific feedback :
- Might want to rethink on how to showcase the font
Week 13
Specific feedback :
- Change the background colour of the game packaging so it can stand out
REFLECTION
Experience
For this task, it was a fun and interesting experience. I get to design something I liked and I get to try something different from my usual work. This task was good for me because I'll be able to use this new type design in my some of my future works. The hardest part of this task was generating the font in Font Forge as I have not much knowledge in using Font Forge and also racing against time before the due date.
Observations
Throughout this task, I was able to learn from other classmates during the feedback session. Through this task, I was able to observe the size of the font when designing them. Besides that, I was able to observe the element of the game and incorporate them into the font design. I was able to learn about the texture and colour from observing the references.
Findings
Through this task, I found out that pixel font can have variety of look in terms of its width and height when pixels are placed in different parts. It is fun as I get to figure out how I want to place the pixels however it is very time consuming to figure out the perfect balance. Pixel/8 bit font are not easy as it is easy to create an imbalance look. It may look easy but it is not. Lastly, through this task, I was able to learn how to use Font Forge. It is quite complicated at first as I am not familiar with it but after a few try and error, I am able to learn what to do and what not to do.
FURTHER READING
Fig 5.6 Thinking with Type by Ellen Lupton
This book provides clear guidance on how letters, words, and paragraphs should be aligned, spaced, ordered, and shaped. The book covers typography essentials, from typefaces and type families, to kerning, tracking, and using a grid.
Comments
Post a Comment