top of page
Search
Writer's pictureSam

Capstone 2019 Dev Blog 3 - User Experience, Ahoy


UI Prototyping

At the beginning of the week, we had a design meeting to discuss our tasks for the week. The week previous I did some looking into different Unity UI, so something I was looking for in the meeting was the UI I was gonna start experimenting with this week. So something that we ended up discussing is an inventory that pops up either horizontally or vertically, in a way that does not cover the screen. This is so the user can drag items on to the screen to interact with the world without going through a cumbersome screen. Using that as a starting point, I started laying out the UI in a way so that I could get an idea of how it looks. And I almost got carried away with trying to get the inventory coding to work before I realized that I just need to get the animations done first. The animations took almost no time compared to the complicated set up I was originally going for.

Infinite Scrolling.... Oh god

Speaking about a time sink... the infinite scrolling challenged me. In my brain, I wanted everything to be working at once. I wanted items that move when you drag, items infinitely scroll when you move them, and for it to scroll without moving the camera. I felt this left my work flow obstructed and wrong, until I decided to break down the steps to do them one at a time.

1. Items move by dragging.

This was fairly simple, all I had to do was get the position of the mouse when it was clicked. I check to see if it moves from its last position, and if it does, I move all the item slots.


2. Items teleport from the right side to the left, and vice versa, when off-screen. This part was a little more funky, it seemed that I did something wrong when I first implemented it. When I clicked and dragged, the item slots appearing on the other side were starting to be on top of each other. When I investigated this issue, I found that the spacing between the items on the far left and far right were off. After adjusting this, I tested, and got the results I was looking for!

3. Halting Camera Rotation?

This was a part of what I wanted to, but decided to halt for a few reasons. The first reason being I didn't want to interfere with how the camera rotates normally. The second was that I had already worked enough to prototype this new inventory UI, so I wanted to hold back before putting more work into it and see how the team feels.


2nd Half of Tutorial!

Lastly, I worked on part of the tutorial alongside another designer, Josh and UI artist Amila. We had worked on the tutorial last week too, but it was not the best of our work, so here we are: tutorial 2.0 and it is much better. I took a lot more time to focus on two things, specific details on what the player is doing and how those details are leading the player along.


I spent the most time on a puzzle that sort of mimics one in the game's previous demo, but made it a little easier to feel tutorial-like. This one is about finding a date on circled on a whiskey bottle, and combining that information with a note which shows three significant numbers being changed (three numbers found on the whiskey bottle, to be exact). I had two very obvious pieces of information on both objects so that no matter which you find first, there is a clear direction of what you are looking for next: an important skill in puzzle games I feel.


5 views0 comments

留言


bottom of page