Website powered by
Carly Meyerhardt
Game Developer
Home
Resume

Paper Themed UI Mockup

I had an idea for the UI Art of my current RPG project: The UI is like diegetic paper!
Oh how fun it would be to make paper sounds as the windows are opened and closed and "pages turned"... And the font would be handwriting... oh how fun!
But first, I had to create a mock up!

I made a quick Paper image in ArtRage. In addition to the Paper Image, I grabbed my concept image for an Elevation Map for use in the maps. I used Mask components for the maps and a ScrollRect component on the minimap content and all the windows to mock dragging the windows around. Lastly, I created a quick Toggle script to simulate opening and closing of windows.

The mock up. How dare you mock me. (I'm just kidding! :D)

The mock up. How dare you mock me. (I'm just kidding! :D)

Used a grid layout for the equipment pane mockup. Luckily the GridLayoutGroup component supports rotation for fun and quirky looks.

Used a grid layout for the equipment pane mockup. Luckily the GridLayoutGroup component supports rotation for fun and quirky looks.

VerticalLayoutGroup with HorizontalLayoutGroup children for each quest objective

VerticalLayoutGroup with HorizontalLayoutGroup children for each quest objective

And then I thought -- what if all of these pieces of paper belonged to a journal that the player opened for information?

And then I thought -- what if all of these pieces of paper belonged to a journal that the player opened for information?

And what if the player took the piece of paper out of the pocket of a the journal with a click?

And what if the player took the piece of paper out of the pocket of a the journal with a click?

Report