2D Toolkit Forum

2D Toolkit => Support => Topic started by: LordYabo on October 23, 2013, 08:01:43 pm

Title: How to add UI elements to existing tk2dcamera scene?
Post by: LordYabo on October 23, 2013, 08:01:43 pm

I have a really simple scene with one sprite and one tk2dcamera (set to pixel meter of 1:1).
I am now trying to add a button to the screen.
The manual says to add the tk2duimanager to my tk2dcamera.  I did.
I run the game, I do not see my button.
I do see a UIManager objects while running the game and it has nothing attached for the camera field.

How do I get my button to show?

Title: Re: How to add UI elements to existing tk2dcamera scene?
Post by: unikronsoftware on October 23, 2013, 08:25:58 pm

As it says in the manual, the provided GUI prefabs are designed for a sprite collection ortho size = 1. If you want to use it on a tk2dCamera with ppm = 1, then you'll have to rescale all the sprites and components in the GUI prefabs, or build your own prefabs based on those.

Alternatively, you can have a second GUI camera and have it with ortho size = 1 if you want to use the provided prefabs without having to mess about creating your own.

ps. The button is probably really really small in the tk2dCamera...

Title: Re: How to add UI elements to existing tk2dcamera scene?
Post by: LordYabo on October 23, 2013, 09:59:18 pm

Thanks, I got the button part to show by doing the ppm to the sprite collection (and adjusting the Z to be within the range of my camera).  Now just the font on the button isn't showing.

Is that somewhere else?

Title: Re: How to add UI elements to existing tk2dcamera scene?
Post by: unikronsoftware on October 23, 2013, 10:27:26 pm

Push it further back? The text is in front of the button sprite for ordering.

Title: Re: How to add UI elements to existing tk2dcamera scene?
Post by: LordYabo on October 24, 2013, 01:58:29 am

Hmmm... tried that.  Doesn't matter if Z is 2, 3, or 135 still no text.

I can interact with the button, it clicks and makes a noise and such, just no text.

I can't even see in the inspector where I change the text on the button!

Title: Re: How to add UI elements to existing tk2dcamera scene?
Post by: unikronsoftware on October 24, 2013, 10:18:28 am

I'm not sure what the issue is as I can't see how its set up. Please post some pics to help explain the issue.

Title: Re: How to add UI elements to existing tk2dcamera scene?
Post by: LordYabo on October 24, 2013, 06:15:11 pm

Sure thing:

Here is the designer view with the button properties in the inspector:
(https://dl.dropboxusercontent.com/u/16000827/1.jpg)

Here is the camera setup:
(https://dl.dropboxusercontent.com/u/16000827/2.jpg)

Here is the game running, with the UI manager in the inspector:
(https://dl.dropboxusercontent.com/u/16000827/3.jpg)

Here is me clicking on the button, it responds to clicks and makes sound, i just can't see the text on the button
(https://dl.dropboxusercontent.com/u/16000827/4.jpg)

Title: Re: How to add UI elements to existing tk2dcamera scene?
Post by: unikronsoftware on October 25, 2013, 10:24:51 am

How bizarre. Is there a text mesh if you expand the BasicButton item in the hierarchy window?
Is your tk2dCamera perspective?

Title: Re: How to add UI elements to existing tk2dcamera scene?
Post by: LordYabo on October 25, 2013, 04:45:52 pm

Yes, it is orthographic.

Yes there is a text mesh under the button graphic:
(https://dl.dropboxusercontent.com/u/16000827/5.jpg)

Do I have to resize that too?

Title: Re: How to add UI elements to existing tk2dcamera scene?
Post by: unikronsoftware on October 25, 2013, 05:38:20 pm

Oh sorry I missed you saying it was 1 ppm. Select the text, and click the "1:1" button, it should resize the text mesh.
If you don't want to mess with all this, a second camera would make things a whole lot easier.

Title: Re: How to add UI elements to existing tk2dcamera scene?
Post by: LordYabo on October 25, 2013, 09:04:36 pm

Well, i'm seeing something now, but it ain't english!

Is that Atlas0 material correct, or shouldn't that be the font texture?
Right now I'm seeing weird shapes that are coming from that atlas0 material.

(https://dl.dropboxusercontent.com/u/16000827/6.jpg)

Title: Re: How to add UI elements to existing tk2dcamera scene?
Post by: unikronsoftware on October 25, 2013, 09:59:51 pm

You will have to do this - I'm just cutting and pasting from my post on the Unity forums. There was an issue in older versions of tk2d, where reference to the font is broken. This usually happens during an upgrade (we narrowed it down to Unity trying to compile the font file as a c# script, and have worked around this, but if its already broken it will need to be fixed by hand).

1. Open up the sprite collection (TK2DROOT/tk2dUI_demo/Assets/SpriteCollection/UIDemoSpriteCollection, and if it isn't this skin, check TK2DROOT/tk2dUI_demo/Assets/Dark/UIDemoDark).
2. Under the "Fonts" category on the left bar, you should see "Empty" there - this indicates that Unity has somehow lost a reference to the font. Click on it (there may be more than one depending on the collection you opened).
3. Note that the BM Font slot will be Empty. This will need to be filled up again - the easy way to find it is, click "Font Texture". The thing that should go into the BM Font slot should be right next to the texture in the project window. Drag that into the slot.
4. Repeat for the other broken fonts. not necessary in this case, as UIDemoSpriteCollection only has one font
5. Commit.

That's it - the references need to be dragged back in again, commit, and once thats done the text should all fix itself.

Title: Re: How to add UI elements to existing tk2dcamera scene?
Post by: LordYabo on November 05, 2013, 06:23:35 pm

Yes, that did it, thanks.

I had to drag the OldSansBlack text file into that sprite collection and commit it.  I had recently upgraded both tk2d and unity.

I still couldn't see anything, so I selected the text of the button and clicked the 1:1 button, and then I could see the text.