Pixelsoft Games Community

I just picked up Pixel UI from the Unity Asset store the other day and I wasn't sure where to begin with it. I first noticed that there were a bunch of UI control prefabs, which I assumed I had to drag into my scene, but later noticed the Pixel UI menu. Things started to make more sense after that, but I still find myself wondering if I need to do anything special to maintain the intended/correct look of the UI. For example, will it play nicely with an existing canvas or is it reliant on the Pixel UI canvas type/prefab? Do those canvas settings need to be left alone or will things start to get ugly if I try to allow scaling or something? Are auto-layout tools going to distort things?

Essentially, I just want to do things the right way, so if there are some DOs and DON'Ts you could provide, I think I'd be much more comfortable putting this asset to use.

I designed Pixel UI to be as minimal of a burden on the user as possible. There are a few things in Pixel UI that require a little setup by the user to get working, but the look and feel of Pixel UI is not one of those things. So, I would recommend using the Pixel UI menu for adding prefabs to your scene. There are lots of fun little treasure scripts included with Pixel UI that can easily be forgotten as they are not on the menu. If you want your components all to share a similar look and feel you can edit the materials that come with Pixel UI as all of the prefabs are already set to use those materials. But that only really affects color.

To answer your question about canvas settings to maintain the Pixel UI look, you are right in that altering canvas settings will be a big part of this. I've taken a screenshot of my game which is using an as yet un-released Pixel UI 2.0 (below), but the concept is still the same. Pixel UI 2.0 will be shipping with a UI Manager component that automates and simplifies management of panels in game. So to achieve the below look and feel I use 3 different canvas' to be honest. But the honest answer is it is up to you and your preference. No matter what Canvas you use, I personally always have the Canvas Scaler set to Constant Pixel Size, Scale Factor 3, Reference Pixels Per Unit 16. After that, I recommend that you utilize at least 2 different canvas'. Both Canvas' should be set to Screen Space - Overlay with Pixel Perfect mode enabled. The reason I recommend 2 is because you have one of those canvas' set to a sort order of 0 and that's your canvas where most of your UI elements will go. But then you have a second special Top level canvas where things like notifications, dialogue boxes, tooltips, and things of that sort go. That canvas I usually set to a sort order of 1000 to ensure it's always on top. I like to set my Canvas' to a width of 640 x 360 and follow retro rules of pixel perfect development. Even though my ideal resolution for my user is 1920x1080, I still set my canvas to 640x360 because I am zooming into the artwork 300%. And through the UI Manager I offer a setting to allow them to dial it back to 200% or even 100% if they really want (which is pretty teeny haha).

Awesome, thanks.

Another thing I was wondering about was changing the font across all elements. The '1' in the default font looks too much like a '7', and was afraid I'd have to go through the prefabs manually or something; I didn't want to go down that road. Is there an easy way of doing it? Maybe there's a font change example in the demo and I just missed it...I can refer to that if necessary.

I'm afraid your worst fears are confirmed. You would have to go through each and every prefab and manually change out the font.

Hehe, ok

I'm no stranger to writing editor scripts, so I can rig something up to do it for me; I just wanted to make sure that wasn't overkill.

Thanks again!