TrixelCreative
patreon
Restitched: Dev Diary | The Craftbook
🕑 Added 2021-09-15 22:24:51 +0000 UTCThe Craftbook is the central user interface (UI) for Restitched. It will follow you through both regular gameplay and level creation. It serves as the very spacious inventory for our plush friend Stuffy - with the ability to hold loads of assets for both dress-up and world-building!
Creating the Craftbook was no simple task. It took months of both conceptual design, and further tweaks. A piece of user interface as complex and important as the Craftbook has to be user-friendly, visually appealing, and feasible to program and set up in-engine.
It's important that Restitched follows a cohesive and on-brand design scheme throughout the game and in promotional material. You may have noticed a few subtle changes to the design scheme via images posted on our social media. These were our ways of 'testing the water' - leading up to a more hefty and noticeable redesign in early 2021. In this redesign we chose to remake the logo, promotional media, and set more solid guidelines for the way imagery is used when representing Restitched.
These Craftbook changes behind the scenes were the reflection of in-game assets that were undergoing the 'reiteration' process we mentioned earlier. We were tinkering behind the scenes to redesign pieces of the UI, making it more user-friendly, cohesive, and unique.
Initial Concepts
The first concepts for the Craftbook included UI that was very separated and 'makeshift'. It was sort of an 'organized chaos' vibe, which was very playful and loose, but still thought to be practical and useful. We liked the idea of tabs at the top to play off the 'craft book' theme - an element inspired by other UI like the PS3's XMB menu, Minecraft, and other tab-based UI setups.
We decided that we wanted to keep the Craftbook visible on-screen at all times in order to allow instant access, as well as not obscure the gameplay area so much.
Moving on from this, we wanted to try something that was more unique and space-saving for whatever may be on the screen in your scene. We tried to rearrange the Craftbook to fit at the top of the screen horizontally. This was great on paper, but not so much once it was executed. It wasn't so controller-friendly either... so we ditched it!
To further our identity, you can see we began to separate sections of the Craftbook below. The slider at the bottom is to change pages within a section. As seen, we implemented the search section early on, as we always knew we wanted that feature. Shown to the left is a settings page concept for when a player is adjusting things in their own created level. The icons for materials were originally designed to change the outline style based on whether they had a soft or hard bevel, but this was later scrapped as it wasn't clear enough.
The image below demonstrates the first implementation of this new design in-engine (left), and a concept of how it might look when playing local co-op/multiplayer (right).
While the split Craftbook design lingered for some time, we eventually merged it again for the sake of presentation and efficiency. Moreover, as we continued to test this design, it became increasingly evident that it looked messy during gameplay.
The merging of the segments also made programming it a bit easier - having it all contained into one element (as shown below). We got rid of the tabs at the top and made a panel on the side to maximize vertical real estate. The 'toolbar' area (page title and tool icons) were overlaid onto the rest of the Craftbook instead of being split apart.
Another concept (below) shows the first take on a 'Personal Color' page in the Craftbook. This also helped us to figure out what the buttons would look like, how icons fit together on a grid, and how selected things will be indicated to the player.
Shown below is the same iteration of the Craftbook shown above, but focusing on the search feature. These images also include in-depth looks at the idea of collapsing categories and filters.
The Final(?) Stretch
Below is a pitch made to the team displaying the concept of a fully expanded Craftbook spanning the right side of the display - allowing for more space efficiency. The merging of the chapter selection strip to the edge further inspired us to make this a static element throughout gameplay.
We loved this concept and implemented it into the game - though changing one major element. We decided to move the chapter strip to the left, allowing the Craftbook to collapse to the edge of the screen with a smooth animation. This 'minimize' effect is very useful for quickly maneuvering in and out of the Craftbook while creating. Additionally, the coloring and positioning of elements were further polished.
Below is a more refined and updated concept, demonstrating how color variations might look. You'll notice slight changes, such as the header title being on a colored paper strip, which was designed to complement both the popup text label and the chapter selection strip under the icons to the left.
Balancing optimization, design, and UX was no easy feat... but since the Craftbook is so important to the Restitched experience, we were not going to shy away from the challenge.
We hope this Dev Diary has been insightful! We always enjoy sharing glimpses into the development of certain features.
Thank you for your support, as always. Stay tuned for more!
Comments
Space Dragon
Looks amazing
Mark Hall
The โfinalโ design looks so sleek and polished already ๐คฉ brill work!
Kyle sharpe
Looks promising ๐
