EVENTED CHARACTER SELECTION

Creating a character selection menu using events and pictures

This guide is for RPGMaker VX Ace, but the concepts are portable to other makers such as MV.

The aim is to create a character selection menu something like this:


You'll want to modify this for your own game, unless you also have exactly 3 female and 3 male portraits to pick from. Hopefully I've broken it down enough in this article to be understandable.

Creating a map

Everything on that menu screen except for the character portrait and frame is a map event. You'll want to use your pixel art skills to create a set of key prompt images, something like these:


Create a blank map the same size as your screen, that's 17x13 tiles for a default game, 20x15 tiles for the 640x480 window above, or whatever fits your custom resolution.

Leave the map blank, and just place the events roughly around the center.
Use the "stepping" motion to automatically animate the key prompt tiles. This is just the same as animated fireplaces on normal maps.

The gender indicator events are using event pages to display the dim or bright image depending on the value of a switch. In Chromatic Aberration, the protagonist can have a male or female portrait and sprite. So I have Switch 10 "PC is male". The first page of the event is for the female state (lit image for the female icon, dim image for the male icon). The second page of the event uses the opposite version of the icon, with the condition "switch 10 is on".

If it fits your game better, use up/down for something else (like human/elf/robot).

Creating some portraits

Pictures can be any size. If you've got good art skills and time, this could be a place to show off drawings of your characters.

The faces above were created with the MV character generator, doubled in size, and put through some filters (GIMP's "oilify" and "canvas") to make the painting effect.

The actual menu event

This is an autorun event, or a common event.

First, initialize our variables.
Variable 10 is the portrait selected (there are 3 options)
Switch 10 is the gender selected (on = male)
In this case, the "default" selection is determined randomly.
Variables 2 and 3 are set to the coordinates of the center of the screen, where pictures will be displayed. 


Control Variables [0010: PC portrait] = Random No. (0...5)

Control Variables [0002: Scratch X] = 320

Control Variables [0003: Scratch Y] = 240

Conditional Branch: Variable [0010: PC portrait] > 2

  Control Switches [0010: male PC] = On

  Control Variables [0010: PC portrait] -= 3

Branch End


The rest of the event is a loop that runs until the player has confirmed a character selection.

At a high level: 

Loop

  # Display current portrait

  # Wait for a key input

  # Fix overflows

  # Confirm selections

: Repeat above

# Set character images


Display current portrait

This is a set of conditional branches to display the correct portrait using a show picture command. 

Conditional branch: Switch [0010: male PC] == ON

  Conditional branch: Variable [0010: PC portrait] == 0

    Show Picture: 2, 'male_a', Center (Variable [0002][0003], ...

  Branch End

  Conditional branch: Variable [0010: PC portrait] == 1

    Show Picture: 2, 'male_b', Center (Variable [0002][0003], ...

  Branch End

  Conditional branch: Variable [0010: PC portrait] == 2

    Show Picture: 2, 'male_c', Center (Variable [0002][0003], ...

  Branch End

Else

  Conditional branch: Variable [0010: PC portrait] == 0

    Show Picture: 2, 'female_a', Center (Variable [0002][0003], ...

  Branch End

  Conditional branch: Variable [0010: PC portrait] == 1

    Show Picture: 2, 'female_b', Center (Variable [0002][0003], ...

  Branch End

  Conditional branch: Variable [0010: PC portrait] == 2

    Show Picture: 2, 'female_c', Center (Variable [0002][0003], ...

  Branch End

Branch End

Wait: 20 frames


Using variables instead of fixed positions just makes it easier to move all the portraits at once if you decide later that the center of screen is not where you wanted them.

The wait 20 frames is there to slow down the picture changes, otherwise it's too hard to only register one key press.

Wait for a key input

This is a nested loop, which checks for key inputs. Any key input has a "break loop" command to return control to the outer loop. 


Loop

  Conditional branch: The down button is being pressed

    Conditional branch: Switch [0010: male PC] == ON

      Control Switches: [0010: male PC] = OFF

    Else

      Control Switches: [0010: male PC] = ON

    Branch End

    Break Loop

  Branch End

  Conditional branch: The up button is being pressed

    Conditional branch: Switch [0010: male PC] == ON

      Control Switches: [0010: male PC] = OFF

    Else

      Control Switches: [0010: male PC] = ON

    Branch End

    Break Loop

  Branch End

  Conditional branch: The left button is being pressed

    Control Variables: [0010: PC portrait] -= 1

    Break Loop

  Branch End

  Conditional branch: The right button is being pressed

    Control Variables: [0010: PC portrait] += 1

    Break Loop

  Branch End

  Conditional branch: The C button is being pressed

    Break Loop

  Branch End

  Wait: 1 frame(s)

: Repeat above


The wait 1 frame(s) command is absolutely critical. VX Ace only refreshes the screen and updates key inputs inside a wait command. If you don't have this command, the game will lock up as the loop spins forever.

Everything else is just updating variables and then breaking to the outer loop.

Fixing overflows

We only have 3 portraits, but the code above can set the variable out of range if you move left or right past the last portrait.
There are two common choices here: wrap around to the other end, or clamp the value so you can't move past the end.

In this case, we use the wrap option: 

Conditional branch: Variable [0010: PC portrait] < 0

  Control Variables: [0010: PC portrait] = 2

Branch End

Conditional branch: Variable [0010: PC portrait] > 2

  Control Variables: [0010: PC portrait] = 0

Branch End


The clamp option looks very similar: 

Conditional branch: Variable [0010: PC portrait] < 0

  Control Variables: [0010: PC portrait] = 0

Branch End

Conditional branch: Variable [0010: PC portrait] > 2

  Control Variables: [0010: PC portrait] = 2

Branch End


Either way, you're left with a valid selection.

Confirming Selection

If the player pressed the C button (which is mapped to Enter and Z by default), we want to confirm the choice. This is mostly in case the player was holding Z to fast-forward an intro. 


Conditional branch: The C button is being pressed

  Text - Normal, Bottom

    Use this portrait?

  Show Choices [Yes], [No]

  When [Yes]

    Break Loop

  When [No]

  Branch End

Branch End


Notice that the C button is still being pressed from the inner loop, because there was no wait command between the two conditions.
That stops being true after the show text command, which also displays graphics and checks for inputs.

Setting Character portraits

The final job is to set the character's face set and character sprite.
This needs the same conditions as for displaying the picture, but use the Change Actor Graphic command instead. (Under "System Settings" on the third tab)

If in your game you are actually choosing characters rather than an avatar for a single character, you could use the Change Party Member command instead to add the chosen Actor to your Party.

The whole thing...

Here is a stitched screenshot of the complete event from Chromatic Aberration.