[Music]
hey everyone welcome to mix and jam a
channel about game development
experimentation today's project is based
on the Super Smash Brothers series the
first smash brothers game introduced a
character select screen that has been
used for every entry in the series in
this screen you have tokens you can
position on the top of the character you
want to play with my goal for this
project was to build a similar screen
using unity so here are the steps I
needed to follow first I needed to
create the grid of characters I also
needed to make a cursor that detects the
elements of the grid
I needed to prepare the player slots on
the lower portion of the screen and also
I have to add the token behavior so
first thing was to create an empty game
object on my campus and use the grid
layout group in this way every element
that's a child of it gets organized in a
grid I've used a screen shot of the game
as reference so I can position things
correctly I started creating the layout
of the character cell on the parent
image I've added a mask so every visual
would stay inside of it after that I
added images for the character artwork
rectangle on the lower part and also the
border then I saved all the character
cell as a prefab so to generate the
characters have decided to use
scriptable objects creating scriptable
objects is just like creating a custom
class but it separates each class as an
asset file there's a great video from
Brad keys explaining more about that
in my case the scriptable object has a
strength for name and a sprite for the
character artwork as you can see with
scriptable objects I can easily create
new characters on the project and set
the parameters
next thing was to create the main script
in this one I created a list of the
characters scriptable object I can
populate that list by simply dragging
the scriptable object I want into the
list so when the application runs I go
through all the characters and run a
function that instantiates the character
self inside of the grid it also changes
their name and sprite based on the
scriptable object it's receiving you can
see that the artwork is not properly
centered so using the sprite editor I
adjusted the pivot of the image to
indicate its proper center even doing
that it didn't change much that's
because a pivot on a texture works
differently than a pivot on a UI image
the texture pivot is indicated by their
pixel position but the UI pivot is
indicated by a scale from 0 to 1 so I
had to convert the pixel pivot values on
the UI scale after doing that the
artwork aligned correctly so I created
some more characters and added them to
the list to see how everything was going
the last two renders were looking kind
of far away
so on the scriptable object I added a
soom parameter and on the main script I
multiplied the size of the artwork
rectangle by that value now it was time
to make the moving cursor I created a
new image and did a simple movement
script for it after that I created a new
script for the cursor that would
indicate what it was pointing to in this
script I used the canvas graphic ray
Kassar and a new pointer event data I
just needed to say that the pointer
event data position was the same as the
sir and do a raycast that will return a
list of dates results I checked to see
if there was any result and printed the
name of the first ray cast result to see
if it was working when it was working I
just needed to set the raycast result as
a current character in the cursor
detection script then I started working
on the player slot layout first thing
was to create an object with the
horizontal layout group to organize the
slots on the slaw layout I added an
image for the artwork and text for the
character named player nickname and
player number now I just needed to show
the current selected character in the
correct player slot on the main script I
did a function that receives a player
int to indicate what slot it's referring
and a character type that would set all
of the slot information on the cursor
detection script I just needed to call
that function that displays the slot
information that is on the main script
for the token object I created an image
that has a script that makes the token
follow the cursor
whenever the bowl hash token is
activated I also used that bowl to make
it only detect
grid characters when it's activated now
I just wanted to do some polish I added
do tween to work on some animations in
the original game whenever you selected
character the slot gets moved a bit down
to replicate that I've used a dupe punch
position from dirt swing to slightly
punch the slot down when confirmed then
I started to recreate the animated
border that the original game has when
the cell is activated for its animation
I've used do tweens blue color and
looped between I also recreative the
slot graphics like the base image the
border and the lower bar for the menu I
recreative the back button image and
icon the exact no
and that diagonal image that stays on
the top at this point I remember that
there was also the character icon on the
player slot so I added that to the
scriptable object and added the sprite
change on the main script in the game
when you move the cursor between
characters they do this swipe animation
the way I recreated that was by using
the doot swing sequence where I
basically sent the current image for the
left and when that's complete I change
the sprite and make it come from the
right side then I decided to make the
grid have less elements to make it look
more like the beginning of smash
ultimate where you still have to unlock
the characters I also changed the visual
of the token and cursor the last thing
was just to create an image that would
stay behind the grid and will be exactly
its size and this is how it turned out
this project was very fun to make and
was also a very interesting challenge
[Music]
you can find a link for the project
repository on the description let me
know in the comments section if you have
any suggestions for things I should take
a look at I would love to hear ideas
from everyone if you like this video
please remember to share it and
subscribe if you have it I'll be
bringing more content like this in the
future until the next one
[Music]
you