00:00:00
hey guys today I'm going to show you
00:00:02
exactly how I made the perfect RPG
00:00:04
cutscene system for my game reality box
00:00:08
dialogue and cutscene systems are a huge
00:00:10
part of any story-driven game but
00:00:12
surprisingly it's also an aspect of game
00:00:15
design that is often overlooked and
00:00:17
thrown in as an afterthought my game has
00:00:19
changed quite a lot over the course of
00:00:21
this year and I mean a lot to be honest
00:00:24
I'm still very early on in the planning
00:00:26
and design phase and there are a lot of
00:00:28
aspects of the game that I'm still
00:00:29
feeling feeling unsure about I mean a
00:00:31
few months ago the game was a 2d
00:00:33
platformer with a completely different
00:00:35
name and now it's a top down RPG
00:00:37
needless to say we're still finding the
00:00:39
vision but one thing has been crystal
00:00:41
clear to me from the very beginning the
00:00:43
core idea that spawned whatever this
00:00:45
game I end up making is its story and
00:00:48
with that I'm going to need a damn good
00:00:50
cutscene system so I'm going to show you
00:00:52
my whole process on how I prototype a
00:00:54
system like this and hopefully along the
00:00:56
way I can teach you some of the steps
00:00:58
you'll need to make your own great cut
00:01:00
scene system but first hey I'm apox Fox
00:01:03
and I make game design related videos
00:01:05
every week if you learn something new in
00:01:07
this video and want to see more consider
00:01:09
subscribing I'd really appreciate it
00:01:11
let's Jump Right In the first thing I
00:01:12
did was create a very minimal UI design
00:01:15
for the text box you don't really need
00:01:17
to dive into the art stuff right away
00:01:20
but it is a good idea to have a general
00:01:22
concept of how you want your UI to be
00:01:25
laid out on screen for me there are
00:01:27
three key Focus points on screen during
00:01:29
any dialogue sequence you have the
00:01:31
dialogue box obviously this is where the
00:01:34
text will display then I wanted to add
00:01:36
dialogue portraits so the characters
00:01:37
could have different Expressions during
00:01:39
the scene and finally the rest of the
00:01:41
screen above is dedicated to any action
00:01:44
or movement that occurs while the
00:01:46
dialogue is happening for now this is
00:01:48
all just standin art to get the system
00:01:50
up and running but we will eventually
00:01:52
get to animating all this and making it
00:01:54
look more legit I should also note that
00:01:56
before doing anything else I also wrote
00:01:59
down a small design document that has
00:02:01
everything I'll need for this system to
00:02:03
work it's definitely smart to write down
00:02:05
all your ideas before diving into a big
00:02:07
project like this it'll just give you a
00:02:09
better understanding of how to tackle
00:02:11
each step going forward one thing I will
00:02:14
always recommend as a huge timesaver for
00:02:16
any Game Dev project is to repurpose old
00:02:19
code from previous games I've actually
00:02:22
made a ton of simplified dialog systems
00:02:24
in the past so instead of remaking
00:02:26
everything from scratch I have a very
00:02:28
basic starting point to build on don't
00:02:31
worry though I'll do my best to explain
00:02:32
how all this works it might get a bit
00:02:35
complicated so I'll try to keep things
00:02:37
as simple as possible but you know bear
00:02:40
with me there are three main scripts
00:02:42
that handle the entire cutscene the way
00:02:44
these three scripts interact with each
00:02:46
other is really the key to understanding
00:02:48
how this system functions the first and
00:02:51
most Baseline script to understand is
00:02:53
the dialog line script this is a
00:02:56
serialized script so instead of actually
00:02:58
putting this on a game object or or
00:03:00
having to work somewhere in the
00:03:01
background the script is primarily used
00:03:03
by other scripts as a variable the
00:03:06
simplest way I can describe it is that a
00:03:08
single instance of the dialog line
00:03:10
script is a new line of dialogue it
00:03:13
holds the data for what text should be
00:03:15
displayed on screen you can enter a
00:03:17
character's name and portrait to be
00:03:19
displayed and eventually it'll trigger
00:03:21
events like characters moving on screen
00:03:24
and animations within the scene more on
00:03:26
this later the next script is the
00:03:28
dialogue activator script this code is
00:03:30
for making a list of those dialogue
00:03:32
lines and personalizing them to make a
00:03:34
cut scene believe it or not it's also
00:03:36
what's used to activate a cut scene the
00:03:38
idea is that you put a dialogue
00:03:40
activator on a game object within a
00:03:42
scene for example it could be a
00:03:44
character you want to talk to or a part
00:03:46
of the room where a cut scene will take
00:03:48
place then you fill out all the data
00:03:50
that you want to happen within the scene
00:03:52
by filling out a list of dialogue lines
00:03:55
and Trigger the scene to happen with
00:03:56
either a collider Trigger or player
00:03:59
input in simpler terms this script is
00:04:01
used to make the entire cutscene and
00:04:04
Trigger when it's going to happen and
00:04:05
finally we have the cutscene system
00:04:08
scripts which is probably the most
00:04:09
complicated of them all don't worry
00:04:11
though if you've been following along so
00:04:13
far this shouldn't be too bad the cuts
00:04:15
scene system script handles everything
00:04:17
that happens within the cutscene it
00:04:19
takes the dialogue lines from the
00:04:21
dialogue activator and moves through
00:04:23
them one by one based on player input
00:04:26
unlike the dialogue activator script
00:04:28
there's only one cut cut scene system
00:04:30
script in the entire game and every time
00:04:32
a new dialogue activator is triggered it
00:04:35
collects the cutscene data from the
00:04:37
activator and displays it on screen so
00:04:39
as a quick recap dialog lines are a
00:04:42
single line of dialogue dialogue
00:04:44
activators hold every single line in a
00:04:46
scene and makes a list out of them and
00:04:48
the cutscene system controls what lines
00:04:51
are displayed on screen and when for
00:04:53
some of you this might be all you need
00:04:55
for your dialogue system to work you can
00:04:57
write the dialogue you want choose what
00:04:59
character speaking give them a new
00:05:01
facial expression as a baseline it's
00:05:03
pretty versatile but my goal today isn't
00:05:06
just to make a solid dialogue system I'm
00:05:08
trying to make the best cutscene system
00:05:10
I possibly can with every option I could
00:05:13
ever need for my game that's what
00:05:15
systems are good for Game Dev is very
00:05:17
tedious so in order to avoid doing the
00:05:20
same task over and over and over again
00:05:23
you can just build a system that does it
00:05:25
for you you might be frontloading your
00:05:27
work at the beginning of your project
00:05:28
but it makes things so much easier later
00:05:30
on now that we have the basic functions
00:05:33
of the system up and running I decided
00:05:35
to spend some more time making art not
00:05:37
going to lie I don't think it's
00:05:38
necessary or even a good idea to be
00:05:40
making art for incomplete systems like
00:05:43
this I guess it's just how my brain
00:05:44
works and I really like making art so I
00:05:47
did it anyways I like the idea of having
00:05:49
animations for when the characters are
00:05:51
talking so after drawing up some new
00:05:52
portraits I made a bunch of expressions
00:05:55
and made their mouths move setting up
00:05:57
the animator was very simple and the
00:05:59
logic behind this is that the animation
00:06:02
only plays when the text is scrolling on
00:06:04
screen I think the result turned out
00:06:06
pretty cool then I started working on
00:06:08
the Sprite movement system I thought
00:06:10
this was going to be intimidating since
00:06:11
I've never done something like this
00:06:13
before but it was actually surprisingly
00:06:15
easy I made a new serializable script
00:06:18
for the actors in the scene and this
00:06:20
script will basically control where a
00:06:22
character is at all times where they
00:06:25
should start and end if they should be
00:06:27
the last moving character during that
00:06:29
line and stuff like that if I ever
00:06:31
wanted to add things like Sprite emotes
00:06:33
and unique animations this is where they
00:06:35
would go I also made some simple walking
00:06:38
animations using blend trees to animate
00:06:40
the characters based on the direction
00:06:42
they are moving in code this movement
00:06:44
system works great alongside the
00:06:46
dialogue lines now we have an option to
00:06:48
choose whether a line is a text event or
00:06:51
a movement event and after filling out a
00:06:53
few parameters there's already a lot of
00:06:55
flexibility I do think there's a lot
00:06:57
that could be improved here in the
00:06:58
future but since this is only a
00:07:00
prototype I think this system works just
00:07:02
fine and the final big key point I
00:07:05
wanted to hit before doing all the fun
00:07:07
polish stuff is dialogue trees if
00:07:09
there's one thing this system is sorely
00:07:11
missing it's being interactable for the
00:07:13
player so I got to work on making a
00:07:16
system for dialogue options so here's
00:07:18
how it works if you haven't picked up on
00:07:20
it already the dialogue lines in the
00:07:22
activator are kind of our bread and
00:07:24
butter for the whole system when we
00:07:26
write out a Cuts scene we're making a
00:07:27
list of lines and each line gets
00:07:30
assigned a number in our dialogue tree
00:07:32
right now it's very linear you start at
00:07:34
line one and every time the player
00:07:36
clicks we move down the list one time in
00:07:39
order to make choices we need to make
00:07:41
things less linear which means having
00:07:43
the option to skip lines entirely you
00:07:46
might think a dialog tree looks like
00:07:47
this a straight line that splits at
00:07:49
certain points and converges later that
00:07:52
makes sense but that's not actually
00:07:54
what's happening behind the scenes
00:07:55
instead there's actually one straight
00:07:57
line where every point is is numbered
00:08:00
like before and the way we navigate
00:08:01
different options is by simply skipping
00:08:04
ahead so if you make a choice on line
00:08:06
three one option might move you to line
00:08:08
four but choosing the other would move
00:08:10
you to line seven instead it's a bit
00:08:13
complicated but it's actually the same
00:08:14
logic used in those old Choose Your Own
00:08:17
Adventure books obviously a book can
00:08:19
only have a set number of pages so the
00:08:21
only way to give the player a choice for
00:08:23
where the story goes next is to skip
00:08:25
forward or backward finally I feel like
00:08:28
now I have a strong enough foundation
00:08:30
for what this system will be built upon
00:08:32
now it's time to speedrun some of the
00:08:34
fun bonus stuff first I added some
00:08:36
emotes for portraits to add more life to
00:08:39
the screen I also added a screen Shake
00:08:41
effect that you can toggle on or off
00:08:43
then I threw in some sound effects for
00:08:45
when the characters are talking I maybe
00:08:47
had a bit too much fun with the sound
00:08:49
effects
00:08:59
I also spent some time making a song for
00:09:01
this test dialogue system which you're
00:09:04
probably Hearing in the background right
00:09:06
now and a bunch of other small polish
00:09:08
things that I think go a long way and
00:09:10
without further Ado let's finally take a
00:09:12
look at a test run of a full scene so to
00:09:15
set the stage a little bit our
00:09:17
characters just found out that for the
00:09:19
next 10 weeks they will be participating
00:09:21
in a death game gray doesn't believe any
00:09:24
of this death game stuff is real and he
00:09:26
won't hear otherwise while Tula is
00:09:28
adamant that the death game is in fact
00:09:30
real and that they should start taking
00:09:32
things more seriously we are playing as
00:09:35
the protagonist June bug and depending
00:09:37
on her choices she'll choose which side
00:09:39
she aligns with make sense all right
00:09:41
enjoy the
00:09:45
[Music]
00:09:58
show up
00:10:39
[Music]
00:11:06
[Music]
00:11:29
e
00:11:39
[Music]
00:12:18
so there you have it our cut scene
00:12:19
system is looking pretty good one more
00:12:22
time let's just do a quick recap so that
00:12:24
you guys can try to build this system
00:12:26
for yourselves the cutscene system finds
00:12:28
the data from the dialogue activators
00:12:31
and displays them on screen dialog
00:12:33
activators are a list of dialogue lines
00:12:35
that create a cutscene and dialog lines
00:12:38
can be customized to let you display
00:12:40
texts choose character Expressions move
00:12:42
Sprites across the screen and give the
00:12:44
player decisions that affect the story
00:12:46
if you break your system down into
00:12:48
smaller pieces like that you'll have a
00:12:50
damn good cutscene system in no time a
00:12:52
couple closing thoughts this prototype
00:12:54
took about a month and a half to get
00:12:56
where we are now and there are some
00:12:58
things that I would probably change for
00:13:00
when I work on the next system for one I
00:13:02
think things would have probably gone a
00:13:04
lot faster if I made stronger deadlines
00:13:07
and planned ahead more there were a lot
00:13:09
of moments where I get stuck trying to
00:13:11
improve something over and over and over
00:13:13
again only to realize that a week had
00:13:15
gone by without making any progress I
00:13:17
also think that starting so early with
00:13:19
art is something that won't work for
00:13:21
everybody I realized that I use art as a
00:13:23
way to procrastinate on things that I
00:13:25
actually should be getting done so next
00:13:27
time I'll probably save that for the the
00:13:29
very end all in all though I am super
00:13:31
proud of the result we landed on and I
00:13:34
can't wait to start using this system to
00:13:35
build the rest of this story I'll have
00:13:38
more updates on reality box sometime in
00:13:40
the future but in the meantime
00:13:41
definitely consider subscribing for more
00:13:43
game design videos every week we also
00:13:45
have a Discord server full of cool
00:13:47
developers so if you have any questions
00:13:50
or want to join the link is in the
00:13:52
description I appreciate you guys go
00:13:54
make something cool see you later peace
