Questions about CSS Coding

You can use a custom script as long as it inherits from CharacterSelectionScreen

public class MyCustomCharacterSelectScreen : CharacterSelectionScreen {

}

from there you're free to override any of the methods used within CharacterSelectionScreen as you see fit.

You'll find character selection in the OnCharacterSelectionAllowed method. In there, you can follow the comments for each block of code. I'd recommend just copying the method and pasting it in your custom select screen, replacing virtual with override.

public override void OnCharacterSelectionAllowed(int character Index, int player) {

}

But in short, I'd change the this.GoToNextScreen() to some new method that is something like this.StartCostumeSelection() if you're having the user select costume on the same screen, or otherwise if its on a new screen then just alter the Next Screen to be the costume select screen. Most typically, you'd be on the same screen, so it's just best to update/add an if check that doesn't go to next screen until the costume has been selected.

In terms of handling costume selection, there's no one way to do that, but I'd recommend starting with displaying a panel that renders an option for each costume type in an array for the selected character. Then making it so directional changes change the highlighted option, and pressing Button1 selects that outfit array. Then you can store which outfit was selected and use that to help set the player character and its set costume option.

I'm interested in having a costume selection screen like MrPonton suggested. Would be cool to see a tutorial writeup since costume selection screen are a very common feature in fighting games. Could even add the modified CSS script and any other scripts needed to support it to the community scripts as a template to help get people started with it.

I'd be willing to commission MrPonton or someone else for taking the time to setup the scripts needed to make this work. Just PM me or reply here if interested.

I was also trying to figure this out, have you made any progress @GriffinSTatum?
Was looking at the DefaultCharacterSelectionScreen and saw a color change code but it gives errors when uncommented.

We just need a demo menu to help us all get started

Nice keep us posted with your progress

Thanks @StriderSpinel. I'll try it out in a blank ufe project and see if it works. I'll keep you all posted with results.

So, I've been trying to work out my own solution to this, and I think I'm close, but I'm a bit stuck.

So for starters, I decided to build a new CSS from the ground up, and so far I've gotten to the point where the game will recognize a character is selected. With how I've set up the CSS, each of the small portraits contain two sets of lists: A list containing alternate costumes, and lists inside of those lists containing each variation of those costumes. The reason I did it like this is to support an idea that came to me while looking at GriffinSTatum's solution. I realized that, so long as the individual models aren't too large, in theory I could make copies of the base character, and just replace each prefab with the corresponding costume, and since they would all pull from the same movelist, it wouldn't take up too much info to just copy the character info files.

So at this point I'm able to create the list of costumes, then create sublists that contain the different costume palettes, and within the sub list are character info files. Where I'm stuck at is actually displaying this list in game. What I want to do is have the player cycle through a list of costumes when selecting a character. Then when the costume is selected, they would then select the color. Once, they do that, the corresponding info file will be applied to the player who selected it.

So I think I'm closer to figuring this out, I just need to know one more bit of info and I should be good. I want to set the character data to the corresponding player when they've finalized their selection. I would like to know if there's a way to use UFE.SetPlayer1(CharacterInfo player1) for this. I want to get the character info data from the menu object, and apply it to P1, for example, however I get error when trying to do so. Is there a different function to use, or am I not using this one right?

Tried that. I got errors when I tried to use it.

So I managed to find a way to get my own Costume Selection to work, I had to hard code it though. I made quite a few changes, so I'll compile all the stuff I did and post it here as well as the reasonings why I made the changes. But for now, here's a video of it working in my project. I was dropping frames, probably because I was running Unity, OBS and a moving background for my CSS.

https://www.youtube.com/watch?v=GOeUg6a … ffinSTatum

Here was my process in getting it to work. I had to use my own method because it made the most sense to me, hopefully anyone reading this can use something from this for themselves, although since it's hardcoded it won't be specifically applicable to anyone else's project.

I completely avoided that way of implementing the costumes, so I never had to deal with the AbstractInputController, fortunately.

The first extension I made was in CharacterInfo.cs. I added

public Texture2D profilePictureCostume;

after

public Texture2D profilePictureBig;

Then I went over to CharacterEditorWindow.cs and added

EditorGUIUtility.labelWidth = 180;
EditorGUILayout.LabelField("Portrait Costume Big:");
characterInfo.profilePictureCostume = Texture2D)EditorGUILayout.ObjectField(characterInfo.profilePictureCostume, typeof(Texture2D), false);
EditorGUILayout.Space();

after

EditorGUIUtility.labelWidth = 180;
EditorGUILayout.LabelField("Portrait Big:");
characterInfo.profilePictureBig = (Texture2D) EditorGUILayout.ObjectField(characterInfo.profilePictureBig, typeof(Texture2D), false);
EditorGUILayout.Space();

This allowed me to add the Texture for the selection(such as the one below) to the character file.

Before we get into the Character Selection Screen, I want to explain that I had a Character.asset file for each individual costume, plus an additional character file for the Character Selection Screen. I have a total of 73 Character.asset files while my CSS holds 35 total characters.

For this method as well, you will need to know how many costumes each character has and which value that specific character takes on the CSS.

To make it simple, I will use my first character, Medaka. She is the first selectable character on the CSS, and her index value is 0.

In DefaultCharacterSelectionScreenEditor.cs I added the lines

EditorGUILayout.PropertyField(this.serializedObject.FindProperty("costumePlayer1"));        EditorGUILayout.PropertyField(this.serializedObject.FindProperty("costumePlayer2"));

after

EditorGUILayout.PropertyField(this.serializedObject.FindProperty("portraitPlayer1"));            EditorGUILayout.PropertyField(this.serializedObject.FindProperty("portraitPlayer2"));

Now in DefaultCharacterSelectionScreen.cs, add

public Image costumePlayer1;
public Image costumePlayer2;

after

public Image portraitPlayer1;
public Image portraitPlayer2;

Scroll down and then once you find:

if (this.displayMode == DisplayMode.CharacterPortrait){
                        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)
        );
    }
}

Update the code so it looks like the following:

if (this.displayMode == DisplayMode.CharacterPortrait){
                        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)
                            );
                        }
                        if (this.costumePlayer1 != null)
                        {
                            this.costumePlayer1.sprite = Sprite.Create(
                                character.profilePictureCostume,
                                new Rect(0f, 0f, character.profilePictureCostume.width, character.profilePictureCostume.height),
                                new Vector2(0.5f * character.profilePictureCostume.width, 0.5f * character.profilePictureCostume.height)
                            );
                        }
                    }

You will do the same for the player 2 version of the Code a little further down:

if (this.displayMode == DisplayMode.CharacterPortrait){
                        if (this.portraitPlayer2 != null){
                            this.portraitPlayer2.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)
                            );
                        }
                        if (this.costumePlayer2 != null)
                        {
                            this.costumePlayer2.sprite = Sprite.Create(
                                character.profilePictureCostume,
                                new Rect(0f, 0f, character.profilePictureCostume.width, character.profilePictureCostume.height),
                                new Vector2(0.5f * character.profilePictureCostume.width, 0.5f * character.profilePictureCostume.height)
                            );
                        }
                    }

Now under the public override void OnShow(){ function, you will have to update the end of the function to look like this:

this.SetHoverIndex(1, Mathf.Clamp(this.defaultCharacterPlayer1, 0, this.selectableCharacters.Length - 1));
        if (UFE.gameMode == GameMode.StoryMode){
            if (this.namePlayer2 != null){
                this.namePlayer2.text = "???";
            }

            if (this.portraitPlayer2 != null){
                this.portraitPlayer2.gameObject.SetActive(false);
            }

            if (this.costumePlayer2 != null){
                this.costumePlayer2.gameObject.SetActive(false);
            }

            this.UpdateHud();
        }else{
            this.SetHoverIndex(2, Mathf.Clamp(this.defaultCharacterPlayer2, 0, this.selectableCharacters.Length - 1));

            if (this.portraitPlayer2 != null){
                this.portraitPlayer2.gameObject.SetActive(true);
            }

            if (this.costumePlayer2 != null)
            {
                this.costumePlayer2.gameObject.SetActive(true);
            }
        }

These lines of code allows us to have these options in the CSS Editor Window

Now in the final script we'll be editing, CharacterSelectionScreen.cs, under the OnCharacterSelectionAllowed(int characterIndex, int player) function, we will add the following code:

if (characterIndex == 0) //Medaka
                    {
                        if (player == 1)
                        {
                            UFE.SetPlayer1(null);
                            this.SetHoverIndex(1, 35);
                        }
                        else if (player == 2)
                        {
                            UFE.SetPlayer2(null);
                            this.SetHoverIndex(2, 35);
                        }
                    }

After

this.SetHoverIndex(player, characterIndex);
                    UFE3D.CharacterInfo character = this.selectableCharacters[characterIndex];
                    if (this.selectSound != null) UFE.PlaySound(this.selectSound);
                    if (character != null && character.selectionSound != null) UFE.PlaySound(character.selectionSound);

Now, as I said previously, this is hardcoded and character specific. The reason why I have Medaka's hover index set to 35 is because 35-40 are the values which I have set all 6 of Medaka's other character files at. You will have to replace the number 35 with whatever number your character's costume starts at.

You also need to make sure

UFE.SetPlayer(player, character);

is enclosed in an else statement, like so:

else
    UFE.SetPlayer(player, character);

This is to make sure that it doesn't automatically select the first costume that you set the hover index to.

Now under public void TryDeselectCharacter(int player), add

if (this.GetHoverIndex(player) >= 35 && this.GetHoverIndex(player) <= 40) //Medaka's Costumes
        {
            this.SetHoverIndex(player, 0);
        }

to the beginning of the function. This will place the player back to hovering Character 0(Medaka). Then at the end, alter the code to include an else statement:

else
    this.TrySelectCharacter(-1, player);

as we don't want the player to exit to the main menu immediately after exiting the costume selection process.

Finally, under public override void OnShow(), we will change the final line of the function

this.SetHoverIndex(2, this.GetMaxCharacterIndex());

to

this.SetHoverIndex(2, 34);

to ensure the second player is hovering the main CSS.

Now that we are all done with coding, we go over to the Unity Project and open up the CSS prefab. Duplicate the Portrait_Player1 and Portrait_Player2 GameObjects and rename them to Costume_Player1 and Costume_Player2 respectively.

Now drag those panels over into the CSS Editor window, so they populate the corresponding options:

Now you want to set up the button inputs manually. Get all the Character Buttons organized on the CSS as you want and manually set up the buttons. It is tedious, but worth it.

Now that you have the paths of the buttons all set up, you will do something similar with the costume selection. Move the Buttons for the costumes(in my case 35 and on) outside of the camera bounds, but still within the "Selectable Characters" GameObject's bounds. This will make it so the Player cursor doesn't hover randomly around the CSS when selecting costumes.

The process for setting up the costume buttons is fairly straight forward. Much like the regular CSS, you will want to manually set up the button mapping, this way it only loops within the specific character's costumes. Since Medaka's costume values are 35-40, I have set it up so they only cycle through those specific buttons.

Now at the beginning of the post I said that I set up character files dependent on the number of costumes a character had +1. This is more of an aesthetic thing, so you don't have to have the +1 if you really don't want to.

Essentially, in Character slot 0, I have this Medaka:

The only difference between this Medaka and Medaka in Character Slot 35 is the "Portrait Costume Big" sprite

This way, when hovering over slot 0, there is no "Costume Selection UI" on screen, as the sprite is completely transparent. Once the player selects on Character 0, it then sets the hover to 35 and presents the "Costume Selection UI".

The end result is the video I posted before.

I know this post is really long, but I hope this helps someone. If you have any other questions I'll try to answer them as best as possible.

I'm looking to load in characters to the character files, I can't quite figure it out. Since you've already done it, can you share what you did to get it to work? I'm getting some odd errors.