Jan 6, 2017

Suzy Cube Update: January 6, 2017

#suzycube #gamedev #indiedev #madewithunity 

Happy new year everybody and welcome to my first update of 2017! Unfortunately, Monday was a holiday and I was sick for most of the week, so it's not, exactly a spectacular update but I'm back at it hoping this will be the year all of you get to play Suzy Cube for yourselves!
I vowed to concentrate on redesigning the level select screen this week, which hasn't been easy given that it's the game's most complex UI by far and UI design is not exactly my strong suit.

This Little Piggy

Before I get into my redesign of the level select screen, I want to talk about the golden piggy at the top of the post. I started modeling this little gall last week and decided to take a break from hitting my head against my keyboard yesterday to work on her material. She's golden and shiny! 

Piggy bank material test
As you can see from the big slot on her back, she's meant to look like a piggy bank. She also isn't meant to just sit there and spin, either, that was just to show off her shininess.

The idea is that if you encounter one of these, it'll freak out and start running away. If you can catch up and bop it, it'll plop out some big splash of coins! Another of those fun distraction/surprises meant to put a smile on a player's face.

What's on the Menu?

Now, on to the meat of my work this week, the level select menu. So, first of all, what's this redesign all about anyway? I'm not fundamentally changing the look of it or it's core functionality, so what's the point? I've got two major reasons: 1. To make interacting with the menu more intuitive on a touchscreen and 2. To make the menu easier to navigate using other input devices in the future. As an added bonus, this redesign should also allow me to work around a couple of persistent bugs found in the current menu.

So, what's the big change? Moving to a scrolling interface rather than a paged interface. The current menu setup uses distict page-like panels for each world. Buttons at the top of the screen allow players to move from page to page, but that's it. I'm currently rebuilding the menu using a scrolling panel containing the pages instead, which, in addition to the top navigation buttons, will also allow players to drag sideways from page to page, which is a much more natural behaviour on a touchscreen. This is what the scene looks like.

Long scrolling panel containing all world pages
As you can see, all five world pages now live side by side inside a scrollable panel. The navigation buttons at the top of the screen will retain their functionality, allowing players to jump to any desired page as well.

The functionality to jump to specific elements inside a scrolling view isn't something that's natively supported within Unity so I started by experimenting in a dedicated scene to try to get the desired behaviour without messing around the complex setup of the level select menu scene.

Dummy scene used to experiment with scrolling
As you might be able to tell, I also, briefly, considered placing all the levels in a line rather than two rows of three. However, I prefer how the 3x2 layout allows players to see all levels in a world on one screen.

Anywho, back to the scrolling. In this nice blank scene, I was able to experiment with ways of auto-centering on selected elements. When a button is selected, it sends a message up to a custom script on the scrolling panel to reposition itself to center on the button. All smoothly animated, of course.

Scrollview automatically re-centering on selected button
This functionality, obviously, is what will allow players to jump between pages in the new level select screen design but is also at the heart of what will also make navigating the screen easier using certain input devices, like controllers. It will now be possible to hop from page to page by simply selecting past the leftmost or rightmost level in a world.

Some other buttons have also been moved away from the sides of the screen to accommodate this.

Well, there you have it. I'm doing UI work, which I figure I'll be continuing well into next week as there are a number of other functionality tweaks I would like to implement while I'm at it. I hope you'll keep on checking in even if UI stuff isn't exactly the most exciting news to read about!

No comments:

Post a Comment