• Registered: 2014-06-20
  • Posts: 495
  • User Karma: 193

Topic: [Video] 1.6 UI Tutorial

[media]https://youtu.be/ZnbRpPUDJnU?list=PLlcO … xfFBPU2oHr[/media]

Music by audionautix.com.

Hi All,

Here's the 1.6 UI Tutorial.  What's in the video:

  • Some points about Unity's new UI and how we've integrated it in UFE 1.6;

  • How to create a basic filled image (for life bars and gauges), including a use-case for radial fills;

  • And some pointers for using Text UI elements in your GUI.

Although I explain enough about Unity's UI that newcomers to it can follow along, I assume some basic Unity knowledge (prefabs, Scene/Game/Inspector/Project windows etc) as I breeze through the simple stuff.

I also recommend people check out Unity's tutorials to get up to speed with version 5 and the UI system.

As always, if anything isn't clear please post below and I'll answer your questions.  Enjoy! smile

User Karma FAQ

Share

Thumbs up +1 Thumbs down

  • Registered: 2014-06-21
  • Posts: 51
  • User Karma: 8

Re: [Video] 1.6 UI Tutorial

What's up Yumcha, does UFE's new UI allow easier creation of more character slots? Say I want to have somewhere around 20 characters or even create a button where a player can navigate between various character selection screens when there're too many character slots for the screen resolution. Awesome tutorial by the way bro! smile

Share

Thumbs up Thumbs down

  • Registered: 2014-06-20
  • Posts: 495
  • User Karma: 193

Re: [Video] 1.6 UI Tutorial

Hmm, good question.  I was too focused on the battle UI for the video, that I didn't even consider that! smile

Have a look at the CharacterSelectionScreen prefab.  Inside the Selectable Characters GameObject you'll have Button_Character_X where X is the array ID.  Follow these steps:

  1. Duplicate more of these buttons (as many as you need)

  2. Reposition in the UI to fit your screen

  3. Change the OnClick() method in the Button component to suit

  4. Then add each of the Button_Character_X objects to the DefaultCharacterSelectionScreen.cs component in the CharacterSelectionScreen root GameObject (Characters array, in case it's not obvious)

To create a cycle list, probably best way is to copy how the Stage Select Screen handles that and apply it to the character select screen.  You'll need to mod the scripts, but all GUI scripts are available to mod in all versions of UFE.

User Karma FAQ

Share

Thumbs up Thumbs down

  • drraed
  • Experienced member
  • Offline
  • Registered: 2014-03-29
  • Posts: 79
  • User Karma: 2

Re: [Video] 1.6 UI Tutorial

YumChaGames wrote:

Hmm, good question.  I was too focused on the battle UI for the video, that I didn't even consider that! smile

Have a look at the CharacterSelectionScreen prefab.  Inside the Selectable Characters GameObject you'll have Button_Character_X where X is the array ID.  Follow these steps:

  1. Duplicate more of these buttons (as many as you need)

  2. Reposition in the UI to fit your screen

  3. Change the OnClick() method in the Button component to suit

  4. Then add each of the Button_Character_X objects to the DefaultCharacterSelectionScreen.cs component in the CharacterSelectionScreen root GameObject (Characters array, in case it's not obvious)

To create a cycle list, probably best way is to copy how the Stage Select Screen handles that and apply it to the character select screen.  You'll need to mod the scripts, but all GUI scripts are available to mod in all versions of UFE.

I did everything fine but got stuck in Creating the Cycle list. I have my characters avatars on the right spot but I can't select them.

Share

Thumbs up Thumbs down

  • Registered: 2014-06-20
  • Posts: 495
  • User Karma: 193

Re: [Video] 1.6 UI Tutorial

Did you want to use the cycle list, or have all your characters laid out in a grid to be selected from?  You should only use one of those methods, you should do both (it's confusing to the player...).

The cycle list was just another method for selecting characters (if you didn't want to layout a grid of characters).  I didn't list the steps, as it's fairly straight forward to just repurpose the Stage Select code into the Character Select script.  And besides, it's REALLY good (and fairly easy) practice for new coders wink.

If you're really stuck, I can give you some pointers on where to look... but spend at least a few days at it before asking for help.

And just do I haven't missed anything:  "character portraits in the right spot, but you can't select anything"; did you assign the array ID to each OnClick() function of the Button component of the portrait?  See image:

http://i.imgur.com/msomeJa.png

User Karma FAQ

Share

Thumbs up Thumbs down

6 Reply by drraed (edited by drraed 2015-05-23 07:20:06)

  • drraed
  • Experienced member
  • Offline
  • Registered: 2014-03-29
  • Posts: 79
  • User Karma: 2

Re: [Video] 1.6 UI Tutorial

I got the ID in place but it's the code bit I'm stuck with. I didn't mean select sorry. I can click with the mouse and select the character but I meant I couldn't highlight the new characters with the direction buttons/WASD
Honestly I am not a coder and will never be and don't even think of trying after 17 years. In the previous version was straight forward to add characters by edit the table/grid and it all worked but now it's just a an extra headache.

Share

Thumbs up Thumbs down

  • drraed
  • Experienced member
  • Offline
  • Registered: 2014-03-29
  • Posts: 79
  • User Karma: 2

Re: [Video] 1.6 UI Tutorial

Weird... I just re-arranged the avatars a bit differently and it works now without any code!!

Share

Thumbs up Thumbs down

  • Registered: 2015-05-03
  • Posts: 47
  • User Karma: 8

Re: [Video] 1.6 UI Tutorial

r

YumChaGames wrote:

Hmm, good question.  I was too focused on the battle UI for the video, that I didn't even consider that! smile

Have a look at the CharacterSelectionScreen prefab.  Inside the Selectable Characters GameObject you'll have Button_Character_X where X is the array ID.  Follow these steps:

  1. Duplicate more of these buttons (as many as you need)

  2. Reposition in the UI to fit your screen

  3. Change the OnClick() method in the Button component to suit

  4. Then add each of the Button_Character_X objects to the DefaultCharacterSelectionScreen.cs component in the CharacterSelectionScreen root GameObject (Characters array, in case it's not obvious)

To create a cycle list, probably best way is to copy how the Stage Select Screen handles that and apply it to the character select screen.  You'll need to mod the scripts, but all GUI scripts are available to mod in all versions of UFE.

Hey, YumCha Games, I was trying the character select prefab option, and I managed to get it looking like a grid of sixteen character slots. Just a couple of questions:

1.) Are the arrays that were supposed to be applied to the DefaultCharacterSelectionScreen.cs script supposed to be in a certain location? Like after the GameObject component?

2.) Is the cursor not supposed to move through the character slots with the question marks?

I wish I could upload an image, but it doesn't seem possible for me.

Share

Thumbs up Thumbs down

  • Registered: 2014-06-20
  • Posts: 495
  • User Karma: 193

Re: [Video] 1.6 UI Tutorial

mqiydaar wrote:

Hey, YumCha Games, I was trying the character select prefab option, and I managed to get it looking like a grid of sixteen character slots. Just a couple of questions:

1.) Are the arrays that were supposed to be applied to the DefaultCharacterSelectionScreen.cs script supposed to be in a certain location? Like after the GameObject component?

2.) Is the cursor not supposed to move through the character slots with the question marks?

I wish I could upload an image, but it doesn't seem possible for me.

1) Are you adding an array?  You don't need to, it's already there...

2) That is correct.  If you test the default implementation, it does not move through the ? slots.

If you've created the extra select portrait buttons correctly, then the script will use a ? image for any missing characters.

If you can upload an image to imgur, I would have a better idea of what your issue is...

User Karma FAQ

Share

Thumbs up Thumbs down

  • Registered: 2015-05-03
  • Posts: 47
  • User Karma: 8

Re: [Video] 1.6 UI Tutorial

YumChaGames wrote:
mqiydaar wrote:

Hey, YumCha Games, I was trying the character select prefab option, and I managed to get it looking like a grid of sixteen character slots. Just a couple of questions:

1.) Are the arrays that were supposed to be applied to the DefaultCharacterSelectionScreen.cs script supposed to be in a certain location? Like after the GameObject component?

2.) Is the cursor not supposed to move through the character slots with the question marks?

I wish I could upload an image, but it doesn't seem possible for me.

1) Are you adding an array?  You don't need to, it's already there...

2) That is correct.  If you test the default implementation, it does not move through the ? slots.

If you've created the extra select portrait buttons correctly, then the script will use a ? image for any missing characters.

If you can upload an image to imgur, I would have a better idea of what your issue is...


Yes, I was trying to add an array for the character select screen, but thank you for telling me they are already there.

Here's a video, though.

[media]https://www.youtube.com/watch?v=eX57xkHlbu0[/media]

Share

Thumbs up Thumbs down

  • Registered: 2015-05-03
  • Posts: 47
  • User Karma: 8

Re: [Video] 1.6 UI Tutorial

YumChaGames wrote:
mqiydaar wrote:

Hey, YumCha Games, I was trying the character select prefab option, and I managed to get it looking like a grid of sixteen character slots. Just a couple of questions:

1.) Are the arrays that were supposed to be applied to the DefaultCharacterSelectionScreen.cs script supposed to be in a certain location? Like after the GameObject component?

2.) Is the cursor not supposed to move through the character slots with the question marks?

I wish I could upload an image, but it doesn't seem possible for me.

1) Are you adding an array?  You don't need to, it's already there...

2) That is correct.  If you test the default implementation, it does not move through the ? slots.

If you've created the extra select portrait buttons correctly, then the script will use a ? image for any missing characters.

If you can upload an image to imgur, I would have a better idea of what your issue is...


Sorry about that, I fixed the first problem, but somehow after I did it, the characters' skin colors changed from their regular skin tone to black, with their eyeballs changed to blue.

Here's a video I uploaded.

[media]https://www.youtube.com/watch?v=9Qcexna … e=youtu.be[/media]

Share

Thumbs up Thumbs down

  • Registered: 2015-03-21
  • Posts: 44
  • User Karma: 1

Re: [Video] 1.6 UI Tutorial

Hi YumChaGames,

I have faced also same problem for character selection problem when i expand the grid/table.

I also have added 10 characters in 16 character's Slot.

I can select some characters only not all(10 characters).

I tried my best but i can't get solution for that.

I was followed your steps properly , I am sure that.

Share

Thumbs up Thumbs down

  • Registered: 2014-06-20
  • Posts: 495
  • User Karma: 193

Re: [Video] 1.6 UI Tutorial

Do you know which characters are not selectable?  Is it the last 2 characters by chance?

This is a picture of what I mean in step 4.  If you don't have each new portrait button assigned to the array here, then you will not be able to select them.  My screenshot shows a 12 character selection screen.

http://i.imgur.com/cPVCi1d.png

User Karma FAQ

Share

Thumbs up Thumbs down