Topic: BIGGER PORTRAIT FOR CHARACTER SELECTION SCREEN??

Hi! i was looking at the source for the character select screen and i think i came across the section for the big portraits, but i would like to have a more specifc info, as i want to make bigger portraits, like STREET FIGHTER 4 portraits, almost 720x500 wide.

http://vignette4.wikia.nocookie.net/streetfighter/images/3/38/SFIV-Select.jpg/revision/latest?cb=20111231222935

if (p1SelectedBig != null) {
            GUI.DrawTexture(SetResolution(new Rect(79, 112, 311, 496)), p1SelectedBig);
            GUI.skin.label.alignment = TextAnchor.UpperLeft;
            GUI.skin.label.fontSize = 30 * (Screen.height/720);
            GUI.Label(SetResolution(new Rect(178, 597, 250, 50)), UFE.config.characters[p1HoverIndex].characterName);
        }
        if (p2SelectedBig != null) {
            GUI.DrawTextureWithTexCoords(SetResolution(new Rect(902, 113, 311, 496)), p2SelectedBig, new Rect(0, 0, -1, 1));
            GUI.skin.label.alignment = TextAnchor.UpperRight;
            GUI.skin.label.fontSize = 30 * (Screen.height/720);
            GUI.Label(SetResolution(new Rect(860, 597, 250, 50)), UFE.config.characters[p2HoverIndex].characterName);

Thanks!

Me encontraste en un negro camino como un peregrino sin rumbo ni fe, pero la luz de tus ojos divinos cambió mi suerte por dicha y placer.

2 (edited by StriderSpinel 2015-02-18 23:31:23)

Re: BIGGER PORTRAIT FOR CHARACTER SELECTION SCREEN??

Hi! i got the scale and pos thing, but i was wondering, how can i send the big portraits to the back of the screen? so there's the background and then the portraits and then everything else, because right now they obstaculize everything.

Thanks!

http://s5.postimg.org/ax960cozb/select_screen.jpg

Me encontraste en un negro camino como un peregrino sin rumbo ni fe, pero la luz de tus ojos divinos cambió mi suerte por dicha y placer.

Re: BIGGER PORTRAIT FOR CHARACTER SELECTION SCREEN??

Hi StriderSpinel

It's very easy: Simply change the order of the objects in the OnGUI-function in your CharacterSelectionScript.cs.
All elements inside the OnGUI-function will be drawn from back to top in their order. So start with your background image, then add the big portrait images and then add the GUI-group containing the character-grid.

Keep in mind, that you have to create a seperate imagefile for the grid's outline. You can't include that in your background image. So place that thing in an extra PNG/JPG-file.

Here is a work-in-progress image of our selection-screen:

http://s21.postimg.org/6lemmw4w7/char_sel.jpg

hope that helps,
shubi

shubi's Website

Share

Thumbs up +3 Thumbs down

Re: BIGGER PORTRAIT FOR CHARACTER SELECTION SCREEN??

@shubi are those 3d models r portraits that u used

Share

Thumbs up Thumbs down

Re: BIGGER PORTRAIT FOR CHARACTER SELECTION SCREEN??

No, I used PNG-files. You can't use 3D-models infront of an interface created with OnGUI().
It's possible if you only use GUI-Textures or if you create a 2D/3D-mixed interface.

If you want to do so, here is a very helpful tutorial: http://www.41post.com/3255/programming/ … d-elements

Re: BIGGER PORTRAIT FOR CHARACTER SELECTION SCREEN??

I would try to chhange the order of the onGUI function , but I don't get in wich line do the function draw the background could you tell me wich line is?

Me encontraste en un negro camino como un peregrino sin rumbo ni fe, pero la luz de tus ojos divinos cambió mi suerte por dicha y placer.

7 (edited by shubi 2015-02-21 05:26:41)

Re: BIGGER PORTRAIT FOR CHARACTER SELECTION SCREEN??

StriderSpinel wrote:

I would try to chhange the order of the onGUI function , but I don't get in wich line do the function draw the background could you tell me wich line is?

The background image is created by a GUITexture component linked to the CharacterSelectScreen-Prefab.

To integrate the background image into your OnGUI, you have to do the following steps:
At first, select the CharacterSelectScreen-Prefab and delete the "GUITexture"-Component in the inspector window.

Now open the  CharacterSelectionScript.cs file and add the background.

1.) add a Texture2D-variable:

after 

public Texture2D p2Overlay;

add

public Texture2D BackgroundImage;



2.) add the background image:

after

void OnGUI(){
        GUI.skin = customSkin;

add

GUI.DrawTexture(new Rect(0,0,Screen.width,Screen.height), BackgroundImage,ScaleMode.StretchToFill);

3.) select the Prefab again and choose a background image inside the inspector window:

http://s10.postimg.org/ui9tw0bgp/sp04.jpg


Now you have your background image inside the OnGUI()-function and you can simply change the order of all the layers.
I don't know, if it is good to place such huge graphics inside the OnGUI(), but that's the way I did it for all our menu- and selectionscreens and it worked great.

shubi's Website

Share

Thumbs up +2 Thumbs down