1 (edited by YumChaGames 2015-05-11 22:45:17)

Topic: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

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

Here's a basic implementation of how to get 3D characters on your select screen.  There's two parts to this, the prefab creation part and the coding part.  All coding is done to the CharacterSelectionScript.cs file, which is available in all versions.  So this should be possible on Basic and Pro versions as well as Source.

This method works for both Mecanim and Legacy, and they can even work together (I've tested with all 4 default characters).

Prefab Creation
Before coding anything, you'll need to create new prefabs for each of your characters.  We'll be instantiating these when a character is highlighted.  We are using our own prefabs as it will be more effort/work to deal with the HitBoxesScript.cs file attached to the default prefabs.  Also, in order to get the 2P character to mirror properly, we'll need to use our own Animation Controller (if using Mecanim).

  • Create a duplicate of the character's prefab.

  • Rename the duplicate to something appropriate (e.g. Mike_Select).

  • On this new prefab, remove the HitBoxesScript component.

Next step is dependent on animation type (NOTE: you're checking for either Animation or Animator components).

If Legacy (prefab has Animation component)

  • Drag the idle clip into the Animation and Animations fields.  Ensure Player Automatically is ticked.
    Ensure you're selecting the correct idle clip by looking for it in the Character's Basic Moves list.

If Mecanim (prefab has Animator component)

  • Ensure the Avatar is set correctly (look for it in the Character's MoveSet).

  • In your Project, create an Animator Controller, rename to something appropriate (e.g. Mike Controller) and drag it into the Controller slot.

  • Highlight the Animator Controller, then open the Animator Unity window.  Double check you are looking at the right Controller by looking at the bottom right corner of this window (it should say something like UFE/Characters/Mike Controller.controller)

  • Drag into the Animator window the idle clip for this character.  To ensure you're using the right clip, select it from the Character's Basic Moves.  This idle clip should be orange to signify it's the default clip.

  • In the Animator window, right click the clip and select copy.  Then right click anywhere in the window and choose paste.

  • Select the copied clip, and in the Inspector rename to Idle Mirror (or similar) and check Mirror.

  • Back in the Animator window, create a new Parameter and call it "mirror" (all lowercase and no quotes).

  • Finally, right click Any State and select Make Transition and then click the Idle Mirror clip.  This creates a transition to the Mirror clip from any point.

  • Click the transition arrow, and in the Inspector change the condition to be mirror == true.
    Then adjust the blend time to be 0 (drag the blue bits until there's no angled blue bit between the clips.

That's the prefab creation step.  You'll later need to add these to the CharacterSelectionScript component, but we'll need to create the variable for that first.

Coding CharacterSelectionScript.cs
Open CharacterSelectionScript.cs, and add the following variables to the beginning of the class:

    // 3D Select stuff
    // Our reference to the current 3D instance; we'll be destroy the previous as we create a new one
    private GameObject p1SelectInstance;
    private GameObject p2SelectInstance;
    public Vector3 p1SelectPosition = new Vector3(-6,0,0);
    public Vector3 p2SelectPosition = new Vector3(6,0,0);

    public GameObject[] characterPrefabs;

    // this is our last known hover, when it's changed we update the 3D instance
    private int p1LastHover;
    private int p2LastHover;

Then add in this function:

    // Show 3D instance of character when highlighted
    public void OnCharacterHighlighted (int player, int characterIndex) {
        if (player == 1) {
            if (p1SelectInstance != null) {
                Destroy(p1SelectInstance);
            }
            
            p1SelectInstance = (GameObject) Instantiate(characterPrefabs[characterIndex]);
            p1SelectInstance.transform.position = p1SelectPosition;

        } else {
            if (p2SelectInstance != null) {
                Destroy(p2SelectInstance);
            }
            
            p2SelectInstance = (GameObject) Instantiate(characterPrefabs[characterIndex]);
            p2SelectInstance.transform.position = p2SelectPosition;

            Animator myAnimator = p2SelectInstance.GetComponent<Animator>();
            if (myAnimator != null) {
                // Mecanim, mirror via Animator...
                myAnimator.SetBool("mirror", true);
            } else {
                p2SelectInstance.transform.localScale = new Vector3(p2SelectInstance.transform.localScale.x * -1, p2SelectInstance.transform.localScale.y, p2SelectInstance.transform.localScale.z);
            }

            p2SelectInstance.transform.localEulerAngles = new Vector3(p2SelectInstance.transform.localRotation.x, -90, p2SelectInstance.transform.localRotation.z);

        }
    }

Then inside the Start() function, after this line:

if (UFE.config.characters.Length >= 4) p2HoverIndex = 3;

add:

        // highlight 1P
        OnCharacterHighlighted(1, p1HoverIndex);

Then inside DoFixedUpdate(), look for this:

        // Select Character
        if (!p1AxisHeld && UFE.config.player1Character == null){
            p1HoverIndex = CharacterMenuSelection(p1HoverIndex, p1InputController, p1InputController.horizontalAxis, p1InputController.verticalAxis);

and below add:

            if (p1HoverIndex != p1LastHover) {
                OnCharacterHighlighted(1, p1HoverIndex);
                p1LastHover = p1HoverIndex;
            }

Then look for:

        if (!p2AxisHeld && UFE.config.player2Character == null){
            p2HoverIndex = CharacterMenuSelection(p2HoverIndex, p2InputController, p2InputController.horizontalAxis, p2InputController.verticalAxis);

and below add:

            if (p2HoverIndex != p2LastHover) {
                OnCharacterHighlighted(2, p2HoverIndex);
                p2LastHover = p2HoverIndex;
            }

Then look for the function StageStageSelect() and change to the below:

    void StartStageSelect(){
        Destroy(p1SelectInstance);
        Destroy(p2SelectInstance);
        UFE.StartStageSelect(0);
    }

Finally, look for this:

        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);
        }

and comment out that whole section since we don't need it now.  There's more you could comment out too, but this is the minimum required to get it all working.

Integration
With coding and prefab creation out of the way, you need to put them together.  First, we need to set things up:

  • In the Hierarchy, select the Main Camera and change the position to (0,4,-10) and zero out the rotation.  Apply this to the prefab too, to avoid accidental resets.

  • In the Project view, find the CharacterSelectScreen prefab, and remove the background texture from the GUITexture.

  • Then add the Prefabs you created earlier into the Character Prefabs slots.  Ensure the order is the same as you have in Global Options | Characters.

That should work now.  Let me know if you get stuck.

Notes:

  • You can create your own 3D "stage" to place your characters on.  Adjust the p1SelectPosition p2SelectPosition accordingly.

  • If the idle animation doesn't loop, you need to check the loop option in the Inspector for the clip (either in Project view or Animator).

  • Try adding a selected animation to your character (like a win pose) and triggering that when the character is selected.

Share

Thumbs up +7 Thumbs down

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

I followed the instructions for this tutorial but it doesn't seem to work. Not only does no 3D character show up on the character select screen, but the 3D character is displayed in the scene once the match begins.

Share

Thumbs up +1 Thumbs down

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

Hmm, 5 people gave thumbs up and no one spotted that I forgot to add Destroy() for each instance tongue.  I just fired up the project I used to create this tutorial, and that code is definitely there.  I guess I forgot to add it to this tutorial.  I've edited the above post now to reflect the fix. 

Below is the function and the changes you'll need to make:

    void StartStageSelect(){
        Destroy(p1SelectInstance);
        Destroy(p2SelectInstance);
        UFE.StartStageSelect(0);
    }

Now, regarding it not working... are you sure the 3D characters are in the character select scene?  Is is possible your current character select screen is rendering in front of the 3D characters?  Check the Scene view during the character select while playing the game, see if you can see the 3D instances...

Share

Thumbs up Thumbs down

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

I had to make some slight adjustments to the camera in order for the 3D models to show up. So everything looks fine now. Thanks!

Share

Thumbs up +1 Thumbs down

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

With this new update would this go into CharaccterSelectionScreen.cs or DefaultCharacterSelectionScreen.cs

Share

Thumbs up Thumbs down

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

Oh, that's actually a good question.  I don't have the time to try it now myself, so sorry I can't be help at the moment.  I'll probably get a chance to revisit this in a few weeks.

My gut says it should all go in CharacterSelectScreen.cs (or your versions of it), but Im' not 100%.

Share

Thumbs up Thumbs down

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

Alright thanks, let me know when you know smile

Share

Thumbs up Thumbs down

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

Does this work for UFE1.6?

Share

Thumbs up +1 Thumbs down

9 (edited by roswell108 2015-07-04 09:28:47)

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

kronos2kool wrote:

Does this work for UFE1.6?

In DefaultCharacterSelectionScreen, add the variables from the first post.

Add the function from the first post, but below the

if (p2SelectInstance != null) {
    Destroy(p2SelectInstance);
}

add in a check for story mode (does not select a player 2)

if (UFE.gameMode == GameMode.StoryMode) {
    return;
}

Then in the public override void SetHoverIndex (int player, int characterIndex)

Comment

if (this.portraitPlayer1 != null){
    this.portraitPlayer1.sprite = Sprite.Create(
        character.profilePictureBig,
        new Rect(0f, 0f, character.profilePictureBig.width, character.profilePictureBig.height),
        new Vector2(0.5f * character.profilePictureBig.width, 0.5f * character.profilePictureBig.height)
    );
}

Add

if (p1HoverIndex != p1LastHover) {
    OnCharacterHighlighted(1, p1HoverIndex);
    p1LastHover = p1HoverIndex;
}

Repeat for player 2 (using the code from the first post)

In the first line of public override void OnShow () add

UFE.canvas.worldCamera = Camera.main;
UFE.canvas.renderMode = RenderMode.ScreenSpaceCamera;

then, just below base.OnShow(); add

OnCharacterHighlighted(1, p1HoverIndex);

Below this function, add the new function

public override void OnHide (){
    Destroy (p1SelectInstance);
    Destroy (p2SelectInstance);
    UFE.canvas.renderMode = RenderMode.ScreenSpaceOverlay;
    UFE.canvas.worldCamera = null;
    base.OnHide ();
}

If you have a project built in 1.5 and want to update to 1.6 through the asset store, don't. Either start a new project and merge the old one into it or import 1.6 to an empty project and update 1.5 manually.

Share

Thumbs up +1 Thumbs down

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

where do i redo the code for player 2

Share

Thumbs up Thumbs down

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

I followed this closely. but i made some mistake somewhere (or everywhere)
i get compiler errors a ton of them

Eternal Rift Studios
    Current Projects:
         Destined Soels
Always happy to help when possible. If its something pretty minor ill just help you out. But i do commissions as well. Hit me up if you need a commission.

Share

Thumbs up Thumbs down

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

YumCha can you update this tutorial im completely lost as to how to do this with later versions because some the code you reference is no longer there and i dont understand where to put certain part of the code

Eternal Rift Studios
    Current Projects:
         Destined Soels
Always happy to help when possible. If its something pretty minor ill just help you out. But i do commissions as well. Hit me up if you need a commission.

Share

Thumbs up Thumbs down

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

the new ufe already has this included you just need to change it

14 (edited by xFTLxKingPhoenix 2016-06-09 13:00:07)

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

Yea I saw that. but the only problem is i got so far in my production using the last version. that I dont want to upgrade yet.

also i am trying to learn how to code so eventually i can make stuff like this from scratch. so thats why im asking

Edit:

Basically i want to do as much as i possibly can on my own without using the assign and use options.

Eternal Rift Studios
    Current Projects:
         Destined Soels
Always happy to help when possible. If its something pretty minor ill just help you out. But i do commissions as well. Hit me up if you need a commission.

Share

Thumbs up Thumbs down

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

Just one question. Is the animation supposed to loop or to play only once?

Share

Thumbs up Thumbs down

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

Meractus wrote:

Just one question. Is the animation supposed to loop or to play only once?

Should loop automatically, note that this tutorial was for an older version of UFE. Latest versions come with this mod included in a separate prefab smile

Share

Thumbs up Thumbs down

17 (edited by Meractus 2016-08-05 11:22:43)

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

Twrmois wrote:
Meractus wrote:

Just one question. Is the animation supposed to loop or to play only once?

Should loop automatically, note that this tutorial was for an older version of UFE. Latest versions come with this mod included in a separate prefab :)

Thank you for your response. My project is on 1.6 and I don't want to update just yet. Too much work done already.

EDIT: I realised I forgot to set the animation wrap mode to loop. It's working =D

Share

Thumbs up Thumbs down

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

Hi, can we get an updated tutorial for 2018 I don't even see this line of code (if (UFE.config.characters.Length >= 4) p2HoverIndex = 3;) in the script. Just trying to make my games. not a coder though. help

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

3d character selection is apart of ufe out of the box now

Eternal Rift Studios
    Current Projects:
         Destined Soels
Always happy to help when possible. If its something pretty minor ill just help you out. But i do commissions as well. Hit me up if you need a commission.

Share

Thumbs up Thumbs down

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

xFTLxKingPhoenix what do you mean? i see one or two buttons relating to game objects but please tell me where and how to do it with the straight outta the box options. :-)

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

xFTLxKingPhoenix your right!!! i found it. thanks for saying that. Made me look extra hard until i found it.

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

no problem

Eternal Rift Studios
    Current Projects:
         Destined Soels
Always happy to help when possible. If its something pretty minor ill just help you out. But i do commissions as well. Hit me up if you need a commission.

Share

Thumbs up +1 Thumbs down

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

my game is run properly in unity editor but when I build "Apk" for Android that game sometime stuck on the "Character Selection" and some time on the "loading" screen.
Here is the link of my apk:  "https://drive.google.com/open?id=1WMsif8ewU5p

Share

Thumbs up Thumbs down

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

How to make this work in UFE 2? I cant seem to figure that out, any help will be appreciated? also is it possible to make this work from outside of the main script using my own custom script? thank you!

Share

Thumbs up Thumbs down

Re: [Tutorial] 3D Character Select Screen (Basic/Pro/Source)

In defaultCharacterSelectionScreen.cs there is a display mode option.
https://i.imgur.com/GOZWyKi.png

You can 100% write your own custom script to handle this.

Share

Thumbs up Thumbs down