Hi again folks, Andrew here with the fifth devlog on the game Typr, my brand new project.
For information on what Typr is you can check out the main page here on itch.io, it gives a good representation of what I'm trying to build and hopefully those extravagant devlogs will keep you around!
Links
Discord Server for Active Development: https://discord.gg/nArn9Mk
Facebook page: https://www.facebook.com/altraydigital/
Twitter: https://twitter.com/AltRayDigital
Email: altraydigital@gmail.com
Preface
This week I spent a lot of time on getting the UI up to shape and to be honest its shaping up to be a lot better than I expected!
Main Features
- Animation details
- Adjusted UI
Animation details
The best kind of UIs are those that are so intuitive that you don't need a separate tutorial showing you how to use it or navigate it. I ran into this problem with Typr very early on, I wasn't sure exactly what type of UI would benefit the game most. So after some thought I decided to go with a super simple one where I give the player only critical information that he needs to know. But, even after doing this and seeing positive results, the UI still didn't tell the player what he needs to do.
The solution was simple. This is a typing game, what do you see at the end of a text field when you type in it? A blinker. A blinker as big as the text font itself. It might seem as a trivial choice but it had a deep impact to the player since he will immediately spot the blinker blinking and subconsciously think that he needs to type something.
I've added this effect to both the actual game and the menu itself. The menu lacked some kind of animation when you navigate it from button to button, it still feels to me like it does lack something but with a blinker added at the end of the selections it does seem to have a bit more flair as well as it fitting in the theme of the game.
This wasn't the only design choice I made regarding the UI. On the in-game side of things, you might remember from past iterations of the game that I had a big old rectangle right in the middle of the screen showing if the current word is being correctly typed or not.
Well I'm happy to say that I've since moved from such barbaric practices and instead asked myself the question, where does the player look when they type the sentence or word on the screen? Do they look at the bottom of the screen? At the top? In the middle? No, they look straight at the word they have to type and then they type it, so I changed that ugly square into a diamond shape and programmed it so that it changes with the word that you have to write and always shows up directly above the word itself. So now the player won't have to look at a specific part of the screen to see if the word he typed was wrong or not, he simply needs to do what he was meant to do, type the word, and he will know in no time if he did it correctly or not.
UI Adjustments
The old UI was doing a lot of things wrong. The text was all over the place, the words didn't link up properly and the elements weren't aligned with the display. I've since changed that and the UI elements will now scale up or down and stay exactly in the same place no matter what display size or resolution the player uses.
Everything is now centered and intuitive and I've got to say, this, coupled with the changing backgrounds and text is really giving the game a bit of dynamism, something that it quite lacked before. I'll continue to improve on these aspects since I've yet to add a combo counter showing the player his current combo level when it comes to how many letters he correctly typed consecutively.
Conclusion
Well we've just completed week 5 of development! It all went by so fast and at times it was a bit hard especially when I hit a few walls back at the start but I'm really glad I've kept my commitment to use devlogs as a way to talk about the game. There are a lot of things I need to improve regarding the game's overall feel, one of them that I will focus on for next week is sound design!
This marked the end of the fifth week of development!
Thank you for reading and see you next time,
Andrew