Unity 3D and Playmaker - Create a Character Selector UI - Part 1 of 2

In this tutorial using Unity 3D and Playmaker, I will make a character selector. This can be used for all types of selections of characters, players, weapons, etc... EXTREMELY USEFUL. Also check out How to Make a Bounce Game Series https://bit.ly/39HIYBU. 👉🏼 To Sign up for email updates on my la

Part 1 of this two-parter builds the UI for a character selector: three characters in a masked carousel, arrow buttons to page between them, and selected-state checkmarks. The same pattern works for picking rockets, weapons, or anything else. Part 2 wires up the actual selection and saves it with PlayerPrefs.

Step 1 — Canvas setup for mobile

Drop one character into the scene under an empty named Player, then create a UI Panel — Unity auto-creates the canvas, which gets named UI - Character Selector. Because this targets phones, configure the Canvas Scaler: Scale With Screen Size, a portrait reference resolution of 640 x 1136, and Screen Match Mode set to Expand. With that in place, everything you lay out in the canvas scales sensibly across device sizes.

Step 2 — The mask-and-content structure

The carousel is three nested objects: a Character Selector empty as the outer container; inside it a UI Image named Container Mask sized to roughly one character, with a Rect Mask 2D component added (it uses the image's rect as the mask — no other setup); and inside that an empty named Content that will hold every character and slide left and right. The mask shows only whatever slice of Content sits inside it.

Step 3 — Lay out the characters

Temporarily disable the mask so you can see everything. Add a UI Image named Char 1 with the first character sprite, leaving headroom above (for the selected checkmark) and space below (for a name button). Duplicate it twice for characters 2 and 3, spacing them exactly 200 pixels apart on X — that fixed spacing is the number the whole paging system depends on. Each character gets a Selected checkmark image in its top-right corner (same local position, 70, on all three) and a TextMesh Pro button below with the character's name — Mel, Ludwig, and Trisha in the video. Re-enable the mask, trim its width to about 220, and only one character shows.

Step 4 — Arrow buttons

Add a UI Button named Arrow Right inside Character Selector, delete its text, and drop the arrow sprite into its image. Duplicate it for Arrow Left and flip it by setting X scale to -1 — one sprite, both directions.

Step 5 — The paging FSM

On a Character Sel Manager (under a Game Manager empty), the FSM has a state per character plus move states between them. State char one starts by deactivating the left arrow — there's nothing to the left of character one. Each character state watches its arrows with UI Button On Click Events; clicking right fires a move right event into a state that uses Set Property on the Content rect transform, setting local position X to -200 (then -400 for the third character). Moving left sets it back to -200 or 0 and returns to the previous character state. The move-right state into character three also deactivates the right arrow, and the move states re-activate the opposite arrow as needed — a missed left-arrow reactivation was the one bug caught during testing. Color-coding states (green for characters, orange for right moves, purple for left) keeps the graph readable. No animation yet — positions snap — but the structure is ready for part 2, where button clicks select a character and PlayerPrefs remembers it between sessions.