[Intro] Hello fellow Scratchers – Welcome
back to episode 2 of my devlog, building an RPG, a role playing game, in Scratch. This project
is destined to be one huge, epic tutorial – so to ensure I get things right before the
official tutorials begin, I’m documenting my journey so you can join in the fun!
Last time I shared how I managed to get a working tile scrolling engine,
and began work on an awesome level editor, but there were problems, specifically gaps appearing
between tiles, gosh I mean, look at this tree! So stay tuned for a look at how this can be fixed,
and later on find out why collision detection in this project almost brought me to tears! Yeah it’s
true – Are you ready? Ok, let’s delve in. [Overlapping Tiles, and Tile Layering]
Well let’s start with these ugly tile edges. I knew when I picked this tileset that this
would be an opportunity to try something new – Many of the tiles are not full squares,
but instead have transparent, masked regions, that only look good when they are layered on
top of another full tile. The existing tile grid system I have here only supports a single layer,
but it’s no big deal to duplicate that up, and then have a way to set which layer I want to
edit in the editor. Here I am editing layer 1, the bottom layer. Once the grass is placed down, I can
switch to layer 2 using the number 2 key on my keyboard, and begin laying down the tree again.
Oh yes, this is much better, do you see how the grass shows
through around the edges of the tree – Perfect! Let me do the same for the raised area below.
Smooth out our layer 1, and then on layer 2, brush in the raised grass area again!
Super… I’m really liking that. And it doesn’t stop with these costumes,
we can also now bring in one of the larger structures like this awesome looking house… As
you can see the layering works great – Now I’ll just stop there as I don’t have a lot of room,
but what I wanted to show you was this. [Layer 3 – In front of the Player]
Although having two layers allows us to fix the issue with costumes overlapping.
We could take this further. What if we were walking behind this house? Shouldn’t this
high up roof appear layered in front of the player? The same goes for this tree right?
Well, watch this. I’ll remove the upper portion of the house from layer 2, and introduce the new
layer 3. If we assume our player is standing on layer 2, then everything we paint on layer 3 is
above them. And so it is – We can create this really fun illusion of depth. We can walk in
front of the house, but also behind it. So cool. The same applies to this tree. That makes the
level so much more immersive. [Auto Layer Assignment]
You might realise quite quickly that certain tile costumes will consistently need placing
on the same layers, so to speed up placement I added a feature to assign a default layer
to each tile type in the tile palette. See that the ground tiles are all on layer 1,
the tree tops layer 3 and the tree trunk layer 2. And you’ll love this, I can change
the default layer right within the editor, just my tapping the number keys! Cool stuff!
So, let’s see this in action. I can switch to auto layer mode, and lay down a tree.
To confirm it worked, we just check we can walk around it. What a cool feature!
[Auto Arranging Tiles or Prebuilt Assets] But, I can’t help but wish there was a way to
speed up tile placement, especially for these larger assets that are constructed from many,
many smaller tiles. It’s just so tedious – In our Mario tutorial we introduced tile auto arranging,
where tiles would automatically switch as we drew to make them fit together correctly. That’s
really cool, but for a tileset of this complexity it might be tricky. But because the tiles are
already laid out in the same order we want to lay them down, I came up with another idea to make
this work. I think your going to love this too! What I can do is hold down space before I start
drawing, and then as I move across, the selected tile in the tiles palette also switches in the
same direction I move. This way, in no time as all, I can lay down an entire house! Wow,
look at that! And it’s done it with all the correct layers too! So cool.
Also, if I move into some free space; See how I can press space and just move my mouse around.
Without drawing I can switch costume. This way I can pick out the exact costume I’m after without
having to click over in the palette to the right. This also works for more intricate structures. I
can choose when to move on to the next tile costume as I draw as it follows an
easy to predict pattern. Well, since we can change costume so easily now, we can even
work full screen without the need to have the palette visible – Now that is really useful!
And I can still pick to use any tile visible on the screen using the tile picker E key,
and then continue to work from there… So the building process is super optimised
now – which is fantastic news for us. Imagine how much faster we will be able to
put together and try our RPG worlds! Yeah! Of course there are still a few layering
combinations that are just not possible with 3 layers… So we need to just work around them for
the time being. Clever level design has always been a big part of tile based adventure games.
Man this is all looking so, so cool. I just can’t wait to make this into
a game!?! Are you as excited as me? Yeah! [Tile Colliders – 1. Either solid, or not]
Ok, guys – The editor is really shining, so I decided it was time to focus on the
actual player, and their movement in the game. Or more specifically,
where they can’t walk due to a tile collision. Because we are stamping costumes, we don’t have
the luxury of using scratch’s sprite touching blocks, instead we have to go off the tile
grid list contents. We know which tiles our player is touching, and we work from there.
The simplest approach would be to tag each tile costume with a straight forward “I am solid”,
“I am not solid” status. Then if the tile we touch is solid,
we stop the player, and if not… we can walk on… But, in this tile sheet that I chose, things are
not that clear cut. These tiles for example are certainly not fully solid, But they do have solid
edges it appears… Well that’s a bind. [2. Tile Edge Colliders]
So my next idea was to define which edges of each tile are solid. I coded up an AWESOME edge editor
right in the level editor, so I could quickly sketch on the solid edges per tile. And then got
to work scripting up the collision code… And no, it wasn’t quite as straight forward as I hoped,
but… I got there – and here we go… and I can tell you, things are working pretty sweet.
Well, for some time as least I kept this design… but problems have emerged.
Some of the tiles in this tileset don’t fit with my edge collision concept,
as the collision edges in the costume doesn’t align to the edge of the sprite at all. This,
was very upsetting, after all that hard work! And I was a little stumped as what best to do.
[3. Half Tiles] So I thought if the tiles
were designed with half tiles collisions in mind, maybe defining which quarters are solid and which
are not would be a better system. Yes, I had to recode it all… and No… it didn’t work out ☹.
I sadly forgot I’d need to factor in the cases where the collision edges were paper
thin. Rubbish! Never mind… [4. 12 Edges per tile?]
So what, back to edges? Perhaps we could use edges, but segment them into half edges… Oh MAN
THIS IS GETTING FAR TOO COMPLEX!!! [5. Collider Pins]
And then, I had a different idea. How about rather than edges we switch to 9 pins in each tile. Each
pin could be solid or not… And the rule is, that the players hitbox cannot pass through a pin. As
long as the hitbox is bigger than the distance between pins, then we can never pass through
a gap. Yeah, this was it! This was a system I was happy enough with, worked, and that was not
deathly hard to script. Thank goodness! [Outro]
And thank you for watching my dev-log, If you are excited to get started with the actual tutorial
then smash that like button now and let me know what you are most excited about in the comments
below the video. Don’t forget to subscribe to the channel too – I’m thinking we might begin
next week with a tutorial on the text engine as that will be super useful both for this RPG,
and many other projects besides. So yeah, subscribe and make sure to check that bell
icon too! In the meantime work on this RPG continues, and with the help of CrystalKeeper7
(do check out his YouTube channel) we’ve begun to expand and update our tileset too!
That’s it for today, I hope you have a great week ahead, and Scratch on guys!