UI UI UI

So I started skinning my UI. There’s a good chance I’ll change it down the line, but I wanted to at least wrap my head around Unity’s UI system so I can plan ahead. I was hoping Unity had some sort of button grouping system, but so far as I can tell it doesn’t. (For all I know it does, and I just didn’t know what words to search for, but anyways…)

I created a small script that lets you set a selected colour to a button. Then using the OnClick in the inspector I can tell each button to set itself to selected and the rest of the related buttons to unselected. It’s still a bit tedious, but it gets the job done.

I can also use a MultiActor track group in Cinema Director to set the default selected buttons to selected state in the opening of the scene.

So here’s my progress. Forgive my terrible dialog. And timing. And the UI is still unfinished. http://www.johnalatouf.com/testing/Intro2.html

Opening

I have something going for the opening scene. It’s pretty rough, but it works. I’m a big fan of Cinema Director, so I’m going to use that. I’m also considering buying a license for Affinity Designer for Mac rather than getting an Illustrator license. It looks like it does most of what I would want, although I don’t think it has the same cutting tools. I might miss those.

Progress: http://johnalatouf.com/testing/Intro.html

You’ll have to forgive my terrible dialog writing abilities. I also updated my version of Unity which caused some minor problems in the UI. I was able to sort them out, although things aren’t aligned as nicely as they were before. I figured I’d just leave it until I get to skinning it properly.

I changed body fonts from Minimal to Generica. This one is a little better, but it seems Unity really cuts up the kerning and thickness of these fonts. I might still change them later.

UI Design

It seems I’ve acquired a summer cold so I’m taking it easy today. I have started looking at Cinema Director for Unity as a way to throw together cutscenes. In the meantime, I have mocked up some ideas for my UI. I know I can leave this to the end if I really want to, but I am a UI artist so I’m going to get that going now.

I’m debating getting a license for the whole creative cloud Adobe thing. I wish there was a smaller license that let you get Photoshop and Illustrator alone, since those are the only two things I want. I know I can just use Gimp and Inkscape, but I don’t like Inkscape. Illustrator is a magic miracle tool that doesn’t compare, and I need it to make pretty knot work patterns to fit my UI. Hmm.

So here are my mocks:

Customizer_face  Customizer_hair  Customizer_eyes

 

 

And here is my latest work with the game:

http://johnalatouf.com/testing/Customizer4.html

Splash Page and Continuing Unity

I updated the Splash page for my website, so now it displays both blogs. If I ever finish a comic, I’ll add comics to it as well.

My unity project now has a character creator and a basic conversation working. I’m rethinking my body font choice. It looks a little too thin in Unity, which is unfortunate, because it looks good in other media. You can move your player back and forth and direct with a mouse. When you enter the character’s space your player will stop moving and the character will turn to you and a conversation panel appears with a set of buttons.

Some issues:

  • I still can’t figure out why the hover isn’t working on the buttons. I suspect it has something to do with the ray cast, but I can’t see why. The ray cast that’s directing the player only detects things on one layer.
  • I need to model some proper background and see how it looks.
  • The outline on the shader is starting to do what I want, but it’s still in need of a great deal of tweaking. I removed the bit from the code that was making it stay the same width regardless of camera distance.
  • I really need to start designing the UI. It’s ugly and it bothers me.

Toolin’

I took a break from game work to update my portfolio and try my hand at a short comic. I’m back to working on The Ceresian.

I’ve got a character made and I’m trying to put together the interaction. I might need to use something from the asset store to set up cut scenes, but for now I’m trying to get some UI popups to happen when you enter a collider area.

I need to get into the habit of listing things I learn so that I can remember them:

  • Despite the Default layer in Unity being listed as layer 0, you have to set your layer mask to 1 to ensure your ray cast only hits things on the default layer.
  • Destroying things requires Destroy(object)
  • probably more stuff

And here’s today’s progress: http://johnalatouf.com/testing/Customizer3.html

To do:

  • Make outlines resize by distance from camera
  • Make UI look not garbage
  • Figure out cut scene conversations
  • make a background
  • Why aren’t the button highlights working? (this is probably some confusing ray cast problem caused by the player movement ray cast or something?)

Character Customizer

So I’m learning Unity still. I spent the better part of this week and last modelling and setting up a customizable character. I used Make Human to generate a generic human model and then tweaked it to make the body and a few extra heads for testing. I also made a series of hairs. I feel like the look I have with a modified version of Unity’s standard specular shader is actually pretty close to the toonish/shiny look I am going for.

Unity’s UI system is pretty cool, but the layout functionality is going to take some getting used to. It’s not very friendly to just dragging and dropping stuff into the scene, as it’s designed to adjust for screen size differences. I also haven’t put much thought into the UI’s look, other than choosing a neat title font and a bunch of thoughts I haven’t mocked up yet.

So here is my customizable lady character. You can spin her around with your arrow keys. Everything else is selectable with a mouse.

http://www.johnalatouf.com/testing/Customizer.html