UI

This week I'm taking a break because I'm mainly working on the UI and the game data hasn't changed much.

I tried to write once a month, but work took priority and I couldn't write...
I intended to talk about the background, but UI is a hot topic right now, so that's what I'm going to talk about.


I've been creating UI
In the past, when it came to games themselves, programmers simply added programs and created frameworks according to specifications, but now that designers specializing in UI have been born, I feel that the quality required has suddenly increased.


I'm in the process of making it, but when I counted the total number, there were so many that it seemed like I needed more, so it was a pain...
The programmers are also working hard, I appreciate it.

As expected, if you keep making it for a long time, your understanding will deepen, just like when you were drawing illustrations.
I had originally been paying attention to visibility and line-of-sight guidance, and I thought I had studied hard, but I still had a lot to learn.
I thought I only understood the basics, but now I'm able to look at other games at a deeper level.

Right now, I'm capturing various games and reviewing the reference points such as size for games in general in 1px increments.
There are ratios that are common to all games, so let's start from there.

There are two types of UI I'm currently creating:
・Change the temporary UI that is actually running to the actual UI
・Things that were not created but would be useful to have, new functions necessary to play the game


It's around here
The former is designed so that it does not require major changes to the existing system and is made to be positive
The replay display was simple but easy to understand.



・Display at the edge to indicate which operation is being replayed
・Display playback or recording with icon
・Display the playback time and indicate the current playback position with the seek bar
・Indicate slot position

This is the big change
It's a small display on the screen, but I think they were able to pack in a lot of things.
I don't really like stories based on the game's specifications, but I think it's okay to write about it since this is an article that will be viewed actively rather than passively on social networking sites.


・Display at the edge to indicate which operation is being replayed
This was in the middle when only the text was displayed
Following that, I placed it in the middle, but just to be sure, I looked into some other games and relocated it to the right edge etc.
It's pretty obvious, but I try to throw away my values and think from a perspective that I see for the first time.


・Display playback or recording with icon
This is a recently created idea for UI and production.
The operator can tell which is which, but the person watching the stream cannot instantly know which is which.
I use images, gauges, etc. to explain things that can be explained even if you are not operating the product or the language is different.
I purposely mentioned this because it is a general topic.
(It's a trivial thing if you just talk about the record function)


・Display the playback time and indicate the current playback position with the seek bar
This is an additional feature
With long replays, it was important to know when the playback ended.
Also, when I was researching set pieces, I was having trouble when the replays were too long or too short, so I wanted to be able to see them visually.
I was actually wondering whether to include the "current playback time/total time", but the number of characters would be too long and it didn't seem to be important for demand, so I decided against it.


・Indicate slot position
This itself was mentioned last time, but for now, let's talk about font size.
The numerical part is important so it is easy to see.
The "SLOT" part does not need to be readable immediately with the same wording every time, and is not important, so I made it small.
If all the font sizes are the same, you won't know what to look at, so differentiate by size and color.

It's plain, but the overall design looks like this.
For the latter new project, I am thinking about the UI from a design and program perspective, taking into consideration how the program will be assembled and when I will incorporate data.
・Design using only images
・Brush up while checking with the programmer and incorporating each other's opinions
・Incorporate it as in-game data
・Get programmed
This is the flow of
Both myself and pikixu are fighting gamers, so while playing existing games, we incorporate into E's Laf any inconveniences or points we would like to see improved.

I would like to go a little further into the design, but time is tight, so I will do the bare minimum of work.
Once I have a certain overall direction and the overall game in place, I would like to ask a professional to design the UI.

I think that in UI design, the work changes between the first half and the second half.
・Improved visibility and amount of information regarding the feel of the game
・Improve design quality

We have even created a layout design that takes into account the font size in the first half and the flow line that makes it easy to navigate.
Actually, I would like to write the second half of the design, but it would take too much time to get to that point...

First of all, let's get to the moving part...!
I'd like to improve the design after making it a proper function, but as I've been playing with it, there have been a few fine-tunings so far, so I feel like if I start playing with it too much now, it won't be finished.
It has become such a time-consuming job that the job of UI designer is now a specialty.


There are a lot of things left, but I want to create the bare minimum first and then go back to the characters and background.

Memo of things I want to do
・Background graying
Can be set from option items
In the end, the background used is one that is both "fast to load" and "high in visibility".

"Background with low memory" takes a lot of effort, but it's not that difficult to make it gray, so I'd like to do it if possible.
When selected, the entire background becomes close to gray.
If I make it completely gray, it will be bland and difficult to see, so I want to calm down the color tone and bring the brightness to the middle.
The snow stage is gray, but the white is strong, so I made it a little darker, and the Sisca stage was a little brighter, something like that.

I will continue to work hard on production