Playmaker Forum

PlayMaker Help & Tips => PlayMaker Help => Topic started by: markfrancombe on July 12, 2013, 06:41:43 PM

Title: SOLVED!! Centering gui elements, whatever screensize.
Post by: markfrancombe on July 12, 2013, 06:41:43 PM
Seems simple but I cant make a robust system.
I have a centered cursor (no problem there, is automatic when you set cursor, and click lock cursor)

Now Im displaying text, when the cursow rolls over an item you can interact with. Im useng gui label. and got it lined up, but if a resize the window, the cursor remains centered but the text moves.

I tried:
GuilLayout Begin Begin Area (default settings)
GuiLayout Begin Centered
Gui Label (that contains my stuff)
Gui Layout end centered
GuiLayout  End Area

But its still moving if I resize...

What am I getting wrong here...?

OR?????
Can I somehow LOCK some gui to the cursor? The Cursor is locked anyway! I cant use guiFollow, cos.. er wheres the game object of the cursor? but something else?

Thanks

Mark
Title: Re: Centering gui elements, whatever screensize.
Post by: jeanfabre on July 15, 2013, 02:55:34 AM
Hi,

 Have you tried "GUILayoutBeginAreaFollowObject", where the object is following your mouse?

bye,

 Jean
Title: Re: Centering gui elements, whatever screensize.
Post by: markfrancombe on July 19, 2013, 06:07:28 PM
No I havent... I just figured there would be a way of locking stuff to center.. but OK.. feels like a workaround, but sure my Cursor IS Centered, so it should work!

...FEW MINUTES LATER...

Hmm.. please see attatched... Why is this not showing up? In previous implementation, I specifically had to type screen coords in, (which changed depending on screensize) Here I specify Cursor, and keep rest at default, thinking Cursor will be counted as 0,0.

Possibly my text is Waaaaay off screen, but not sure!


Mark
Title: MORE centering issues...
Post by: markfrancombe on July 22, 2013, 07:38:23 PM
OK cant get to the bottom of this!

Firstly, a NORMAL gui label shows up, t center it on the screen I set 0.5 for left, and 0.5 for top, and set to normalised.
I WOULD THINK this should be enough, arnt i setting it to start its text block at those normalised coordinates?
Anyway? It looks OK, but then if I tweaked the screen size around, so does the text, NOT centered on my mouse (which is locked to the center using Set mouse cursor)

SO I try something. How about I Get MouseX and Y and see what they are? For some reason, X is ok. 0.5 but Y is 0.5253724 (or close) When I resize the screen X (0.5) stays as it is, but Y is variable? Why is this? Is not Lock Cursor (in the set cursor Action) supposed to lock the cursor?

I then try anyway to set the offsets of the gui label using these mouse X and Y, but that gives similar results to just setting manually.. still moves!

I tried the GUILayoutBeginAreaFollowObject thing as you suggested, but never see any text... as I said in my last post, either the text is Waaaay off the screen somewhere, or ive done something wrong!

Mark


Title: Re: Centering gui elements, whatever screensize.
Post by: markfrancombe on July 24, 2013, 11:22:59 AM
Still need help with this...
Title: Re: Centering gui elements, whatever screensize.
Post by: Bqlqzs on July 24, 2013, 11:59:53 AM
Hello

If you want fixed element on screen after you resize the screen, :

Actions: (All actions need Every Frame on, that work realtime)

Get Screen Height/Width
(store the values in float) example: screen width=600

Float Divide
(Width/Height) example: 600/2 you get the actual screen center value =300

Float Subtract
(the Width/Height float) example: if your panel are 160width, You subtract 80 from (Height/Width 300)

After you get : actual you get (max screen) / 2 (center) - (panel Half) = full centered panel at realtime


You can align from center
Title: Re: Centering gui elements, whatever screensize.
Post by: markfrancombe on August 02, 2013, 05:39:31 AM
gonna try this, thanks...
Title: Re: Centering gui elements, whatever screensize.
Post by: markfrancombe on August 05, 2013, 05:36:53 PM
One more question,
Gui Label has Left Top Width Height.. for setting position, how do I turn what you gave me above, into these? Or Do I just set them all to 0, and the the Gui Label START from the center??
Plus you mean that I have to do all this TWICE, once for height and once for Width?

Thanks so much for you help, but Im REAL surprised there aint a action for this!
 ;D

Mark

Title: Re: Centering gui elements, whatever screensize.
Post by: jeanfabre on August 06, 2013, 04:02:38 AM
Hi,

 We overlooked the set of official actions :) it's all there for this to be achieved.

Please find a scene showing a perfectly center label, screen size agnostic! Basically, it's just that:

GuiLayoutBeginArea
GuiLayoutBeginCentered
-- STUFF GOES HERE
GuiLayoutEndCentered
GuiLayoutEndArea

Bye,

 Jean
Title: Re: Centering gui elements, whatever screensize.
Post by: markfrancombe on August 11, 2013, 07:49:52 PM
Yeah, I tried that. Of course i didnt tell whole story  :P

What I need is for the gui label to start printing a tiny bit right of center.
Central is my cursor ( a dot) it becomes active when you roll over stuff you can interact with (a small circle) This is set elsewhere, an empty GO with global transitions, one for each state the cursor can be in.
So as the cursor becomes active, RIGHT next to it the text label of the appropriate action appears (Open Door?). It needs to NOT be totally centered (cos thats the cursors space) but slightly to the right.

Using the technique you suggested, if I adjust the position slightly using the GuiLayout begin area Left and Top.. It DOESNT remain centred if you resize the window.
Should it?

Mark
Title: Re: Centering gui elements, whatever screensize.
Post by: jeanfabre on August 12, 2013, 05:00:00 AM
Hi,

it should. not sure what happens here.

the other way, and likely the best way given what you are describing now is to use absolute positioning and GUI ( Not GUILAyout) actions

get the screen width and height
divide them by two, you have your center. do this on update to always be centered ( ONLY if you know the user can change the app size, else no need)

and use GUILabel and position it in pixels, then it will be ALWAYS centered, and you can add labels around, by simply defining offsets


also, simply use GUITexture, thea are a lot easier to position using screen relative position combined with inset offset. that's what I would do instead of using gui action purely.


bye,

 Jean
bye,

 Jean
Title: Re: Centering gui elements, whatever screensize.
Post by: markfrancombe on August 12, 2013, 05:17:58 AM

get the screen width and height
divide them by two, you have your center. do this on update to always be centered ( ONLY if you know the user can change the app size, else no need)

and use GUILabel and position it in pixels, then it will be ALWAYS centered, and you can add labels around, by simply defining offsets
Seems like that was what Bqlqzs was suggesting above, I had trouble with that too, but Ill give it a go again.
Quote
also, simply use GUITexture, thea are a lot easier to position using screen relative position combined with inset offset. that's what I would do instead of using gui action purely.
 Jean

HUH? Gui Texture only shows ... er... textures. Are you suggesting I make my labels as textures? But they write themselves... using HOTween string.
I actually was thinking of this, , and having a "Handwritten" look, but went away from it, I dont think you were suggesting that either, so... please elaborate?
Title: Re: Centering gui elements, whatever screensize.
Post by: jeanfabre on August 12, 2013, 07:26:45 AM
Hi,

 you can have text using GuiText, just like GuiTexture. Simply go to the unity menu "GameObject/Create/Gui Text"

and you'll have all you need to center on screen, AND having an offset based on that center, using Pixel Offset.

Bye,

Jean
Title: Re: Centering gui elements, whatever screensize.
Post by: markfrancombe on August 12, 2013, 05:26:21 PM
Hi,

 you can have text using GuiText, just like GuiTexture. Simply go to the unity menu "GameObject/Create/Gui Text"

and you'll have all you need to center on screen, AND having an offset based on that center, using Pixel Offset.

Sorry for being dense, but IM still not getting it. Are you saying that after finding the center position (screen height and width and halving it) I should add a gui text for my label?

OR.. Are you saying that I should lose ALL this centering calculation, add a gui text alone, and then use its controls to do all the adjustments?

Trying this latest... seems simple...

Mark
Title: Re: Centering gui elements, whatever screensize.
Post by: markfrancombe on August 12, 2013, 05:55:44 PM
UPDATE;

Ok I tried the adding a SetGuiText, it asked for a guitect component, I clicked, it added one. Set my text variable, Went to the GuiText Component and added my font (its dynamic so I leave all else blank).

When I run it, I can see that the SetGuiText Action is getting my String OK. (the typed effect using Hotween) But nothing is being drawn on screen.

I suppose this is a GuiText thing rather than a PlayMaker thing, but not sure what my next move is?
Title: Re: Centering gui elements, whatever screensize.
Post by: markfrancombe on August 13, 2013, 10:25:03 AM
Have to just bump this, tried afew things.. but GUIText is not showing up on screen, Although the SetGuiText Playmaker component IS filling up with my string variable from HOTween string...
I see what you mean that the Inspector component has lots of piositioning options, its just not showing up..?

Any ideas? A demo perhaps?

Mark

Hi,

 you can have text using GuiText, just like GuiTexture. Simply go to the unity menu "GameObject/Create/Gui Text"

and you'll have all you need to center on screen, AND having an offset based on that center, using Pixel Offset.

Bye,

Jean
Title: Re: Centering gui elements, whatever screensize.
Post by: jeanfabre on August 14, 2013, 03:38:00 AM
Hi,

 ok, try the scene I attached. It works with hotween and has a crosshair set up with graphic and text.

 to operate the typewriter. simply select "Crosshair text" and in the playmaker component inspector, set the "target" string to something and then press "WRITE" and it will be animated.

 I think this is what you aim right?


bye,

Jean
Title: Re: Centering gui elements, whatever screensize.
Post by: markfrancombe on August 14, 2013, 06:16:56 AM
I think you forgot to attach your scene?
 :)
Title: Re: Centering gui elements, whatever screensize.
Post by: jeanfabre on August 14, 2013, 06:23:41 AM
d'oh...

updated.
Title: Re: Centering gui elements, whatever screensize.
Post by: markfrancombe on August 14, 2013, 07:01:25 AM
Thanks Jean!

This totally working as I want it in your example, I had to adjust the pixel offset on the GuiText component to get it exactly where I needed it, but it worked, and then DID stay in place when I adjusted screen shape.
So far so good.
This is so simerlar to mine, Im not sure where I made a mistake, one thing that is different is that my cursor is done with Set Mouse Cursor on a different FSM, as I am changing the cursor type when up, over, press and paused. This is simply a blank game object with these 4 versions all with global transitions. I set them in whatever FSM using Send Event.
But thats no different to yours really, just that you are using Gui Texture, which has some pixel adjusting. As The GuiText can be moved (as I tested above) I should be able to move that in line with my approach too?

Ill be back...
Hopefully with good news!
Title: Re: Centering gui elements, whatever screensize.
Post by: markfrancombe on August 14, 2013, 07:59:59 AM
Jean! It works! It really does! I Like Green Eggs and Ham!

but no cigar just yet..

One teensy tiny problem and a question.
My version of your thing, is on mouseOver on things (anything doors, guns, whatever) so when I rollOff I must remove the text from the screen, no problem, I just setGuiText again, but with nothing in the text field, On Idle I reset the variable from Hotween, and we should be good to go, however theres a tine flash of the text before beginning its tween again.
Heres a video so you can see what I mean.

https://www.dropbox.com/s/3cchzq9ojm7czd2/cursor%20blinking.mov

1 more question, just about the way you set up your example. You have an empty state on start that just take you to the thing... then an idle state when you are done.. I haven't got theses steps, it all happens on one state, am I moving too fast, should I add some empty states just to er... clear the air?

Mark
Title: Re: Centering gui elements, whatever screensize.
Post by: jeanfabre on August 14, 2013, 08:43:37 AM
Hi,

Yes, the blink is typical. You need to first set the gui text empty before you start tweening it. So simply add an intermediate state that first empty the text, and then move to the typewrite effect state.

 
Regards states: not really, that's up to you. This sample being an example, I made it so that on start it shows something straigth away, hence why I wired the start state to trigger the writing action, in a real world scenario, it's unlikely to happen. and you will somehow wait for another fsm to actually send the WRITE event.

And yes, I could have done it all into the start state, but I find that more and more I always leave the start state as clean as possible. I find it easier to expand and the START global transition doesn't get in the way then.

bye,

Jean
Title: Re: Centering gui elements, whatever screensize.
Post by: markfrancombe on August 15, 2013, 03:15:41 PM
YEP that did it! Cheers J!!!
Beers on me... again..
M