Okay, welcome to day two of the how to make Hollow Knight workshop. Today's going to be fun. We're going to be taking the art we worked on yesterday and we're going to be putting it inside Unity. There's a lot of Hollow Knight tutorials out there. My hope My hope is that we figure out the efficient way to do this and maybe even the correct way to do this because there's a lot of methods a lot of people including myself in the past we've recommended blurring our artwork for the background and that's not how I don't think that's how how Team Cherry does it. Um making color changes as things move into the background to create that parallax effect. I don't think that's how Hollow Knight is doing it. I think they're using Unity and shaders to do it. I'm going to show you how to do that. And by the way, we're working within the confines of this game kit here. This is my easy 2D platformer game kit. The link is in the description. It's totally free. I just want you guys to have it so that you can create something
like this. Um but what we did was yesterday we worked on this artwork here. Just out from a piece of paper, took this from a piece of paper. Pen and paper is what I'm trying to say here.
[laughter]
We just have a pen and a paper here. There's no special tools is what I'm saying. And I scanned that in with my phone aka took a picture and brought it into Photoshop here. Let's see. Where's the my Where's my artwork? Hold on a sec. I want to show you the artwork. Uh but click that link in the description if you guys are interested in downloading the game kit. Um I use that game kit to make a game for PewDiePie in just 14 days. It's recently been updated. I updated it last week. Here's the artwork finalized. So, I did all this yesterday, right? I took a lot of the artwork and sort of mashed it together and and copied and pasted and used kind of like a cloning techniques to get things like this. That's just this.
Sort of stacked up like that. Uh this is a sort of mashing this and this together. Same with this here. They're not perfect, but they're we did them pretty quick in a couple hours. Okay, so what we're going to do is go inside of Unity and we're going to first create our blockout. Okay, let me try and explain this game kit so it makes sense to you. There's this beautiful It's kind of like a little folder structure almost of different parallax layers, okay? It's called parallax layers. And each layer is on a different Z axis. See that? As we go down, it slowly goes further and further away. Okay, that's what creates a parallax effect. Right now there is nothing in these little folders. But once I start dragging artwork into these folders, it's automatically going to create a parallax. And the camera we're using, not orthographic mode, but we're using perspective mode for this. And perspective mode is automatically going to create that parallaxing. We're also using a specific shader and
it's included in the game kit. Okay, it's included in the game kit. Hold on, let me let me read the chat here. You'll have to know how to draw first. Yeah. All right, um finish Twisted Tower already. No, we're not going to do that. Um It's mine. It's my precious. It's my own. I'll finish it when I want. If we take a look at our parallax layers here, they're going back in the Z axis, right? And there is a a specific shader. It's called I've called it default with fog. It's the sprite default, but it has fog and then it's also going to have uh Z information. A Z buffer. And that Z buffer determines how far away it is from the camera and then it can then write uh the the blur effect onto the camera. I'm going to show you how all that looks in just a second. There is nothing in the parallax layers
except for these block out colliders. See these? They're just squares. And they're 4x4 squares and they're snapping perfectly. Look at this. And they snap perfectly to the 1x1 grid. Okay? So, you can see the grid here. If I turn on Y, you can see the grid here. This is beautiful. This is exactly what we want. I don't want weird floating point values when when placing my artwork and or I want when placing my block out. With the with the artwork, it's fine. The artwork is going to be free flow. It's all just sprites anyway. It's not actually colliders. The block out is colliders. This is so important to remember. Even if you're not creating a tile-based game, it's probably best to create a tile-based game at least on the collider side, on the block out side. And this is even true with 3D games for me. I like to use a nice precise block out before I set dress.
So, this is what I've got for our scene. Okay? Very straightforward. Just like a Hollow Knight scene, right? That's about it. So, now that we know that we like our block out. And by the way, you're probably wondering how the camera works. Uh, it's a Cinemachine camera and it has this thing called a camera confiner. Again, this is included in the description in the game kit. Um, this right here, this collider here, that's our polygon collider, right? And that is going to confine our camera as long as we set it up here. Okay? We have this confiner 2D. You just drag in the polygon collider and it will lock it in. Okay?
Is it even legal to recreate Hollow Knight? Of course it is. What? Of course it is. It's totally legal. You can You're allowed to recreate whatever you want. You just can't sell it. So, we're doing this for for the
purposes of learning how they did it, right? All right, let's hit play here. And again, you'll see that the camera can find her stops. See that? The camera just stops moving. There we go. It just stops. Okay. Eddie School, how you doing? Very good. Very good. Find the stones. Welcome. Welcome. Welcome. How you doing, buddy? It's good to see everybody. Fox Eye, always good to see you. Okay, so let's start throwing in our artwork. The way we're going to do this is we're going to start with the We're going to start with the ground. Okay, so let's go ahead and throw in our ground. Now, I want to create different prefabs out of all this. So, I'm going to have my ground medium here. And I'm going to drag it into my art here. Okay? Now, you notice it dragged in the whole PSD. The whole PSB. That includes all this stuff, right?
That's actually okay. Because I want to create prefabs out of all this stuff. So, I'm going to go to prefab unpack completely. And then I'm going to go to my prefab folder here. Where is it? There it is. And I'm going to create a new folder called Hollow Knight art pieces. Right? That's about it. And I'm just going to drag each one in. And I want to be able to use these over and over and over again. And remember, guys, there's no colliders on this stuff. There's no functionality. Now, I may end up creating functionality for, let's say, the leaves so that we can like cut them. But this is about it. So, I'm just dragging each one into this folder here, so we have prefabs that we can use over and over and over again. And you might be thinking, "Well, what's what's the point, Tom? Let's just use sprites. You don't need prefabs." Well, what if I want the What if I want the moss to sort of wiggle, right? And blow in the wind or something, which I might want to do. I
kind of wish Hollow Knight did that. Um I could do that in the prefab, and then all of them are going to move. So, I have all this. That looks good. It's definitely sized really big. Okay, so the first step here is to get everything sized perfectly. So, what I'm going to do here is I'm going to take just my character, and I'm going to move him where my player is. Look how big that is. That's huge. So, instead of changing the size of the prefabs, I want the prefabs to be a nice, clean scale of 1 1 1. So, what I'm going to do, I'm actually going to go to my art here, and I'm going to change its pixels per unit to something like 300. That looks good. Maybe even 350. The idea is um
that I don't really have to do any scaling here, that it's just going to look good. Let's hit play and see how that looks. Okay, good. I like that. And the reason it's blurry is cuz it has the wrong sprite material on it. Okay, welcome, welcome, welcome. Come on in, everybody. Jen Jen Gray says um "What are prefabs?" Prefabs are things that anytime you have a game object in Unity that's reused multiple times, you want it to be a prefab. And it's basically going going the same DNA all the time. So, if I were to change this to red, that's one way to change it to red. Or, I could go inside of its prefab and change it to red, and now all of them are going to change to red. So, that's why I want that to be a prefab, because I might want to change it and have it globally applied, right? Okay, so let's keep going here. We're going to put this little fella. He's still a little big, honestly.
So, I'm going to do 380. I guess we could do 400, honestly. I don't see the huge problem with that. Okay. So, let's put that here. Just like that.
[snorts]
Uh the order and layers all wrong. So, let's select this here. These need to be zero. And these are our prefabs, right? And so, when we make changes to this, it's going to apply to everything in the scene. So, all of these Hollow Knight art pieces, I need to make sure I change the material to be the correct one, which is going to be sprite fog. There it is. Drag it in here. Boop. There we go. Uh I believe there's one other thing we need to do here. I'm not sure. Let's double-check something here. No, I think we're okay. I think we're okay. Uh that is set to zero. That is set to zero. That's the block out collider. So, if we hit play here, our buddy he's
still a little big, but that actually looks about the size of how he looks in Unity, or I'm sorry, in the game. So, I think we're actually okay. He's a little big still. We I He's He's too big. And and we're going to just zoom in. So, let's set him to 500. Hit apply. There we go. Let's take a look. Yep, and then we'll zoom the camera in. Okay? That's what we want. We want him to be about the exact same height as the character that's playing right now. And by the way, those of you who are curious, uh I always sort of create a reference sprite at the very beginning. So, when I created this game kit, what I did was I went to my sprites, created a square here, and I wanted the player and you'll notice the square is exactly the same size as the grid, right? Cuz that's one unit high, one unit wide. I wanted the player
to be about the same size as one box. And in fact, I believe his capsule collider is. No, that's scaled up. So, he's about 1 and 1/2. Okay, anyway, um so kind of breaking some rules there, honestly, but we're okay. Cuz usually you want him to be about two. Okay, you ready to start bringing some art in? Well, let's go ahead and open up our our project here or our our uh Photoshop file here, and let's be thinking, "Okay, what color in in in Hollow Knight in Moss Grotto, which is the first level in Silk Song, what color is the sky?" That's our first question. The color of the sky is like a navyish blue. So, the way we're going to achieve this is actually going to go to our camera, and we're going to change it to navy blue here. Something like that for now, okay?
But, there's one more step. We want to This is particular to Hollow Knight because Hollow Knight is this moody, foggy game. We're going to go to rendering, go to lighting here, and because we now have this sprite that has a shader whose fog is applied, meaning as I go further and further away from the camera, fog gets applied to our two-dimensional sprites. Because of that, we want our fog to match the sky color. So that it blends into the sky and just disappears. All the artwork will blend into the sky and just disappear. So we're going to go to our lighting tab, go to environment, go to our fog here, paste that. And now it's going to be perfectly blending into that blue fog. And that blue sky. You'll notice I have a very tight narrow start and end point for the fog. We can adjust this later, but and it's
set to linear mode, not exponential, so that I have very tight control over how deep I I want a scene to go. So starting point is at eight, which is right where the player is, and then it goes to 15. Okay, let's throw in the ground. You guys ready? And I'm going to make I'm going to put money down. I'll I'll put this I'll put $300 down. And if I lose, I get the money. If I win, I get the money as well. Uh $300 down. And I'm going to bet that this is the the initial placement of the art is going to make everything's going to look horrible. It's going to look terrible. And this is This is absolutely always the case with me. Whenever I do my my beautiful 2D art in Photoshop and then I bring it into Unity, the first time I lay it out, it looks horrible. And there's a lot of these little mini variables and a lot of them are like subconscious things that you can't really understand.
Even me, like I don't fully understand why it doesn't work, but you just got to play with it and then it will start working. Okay, so let's go to the first layer, right? Which is parallax layer one. Parallax layer one is on the Z of one, so it's right there. This is going going behind the player. And then this is parallax layer zero, which is on Z zero. And so we're going to put all of our art not in the block out folder here, but in the art folder here. Okay? Why do I have separate folders? Because I want to be able to hide all of these sprites when I hit play. So when I hit play now, there's nothing there except the colliders. Does that make sense? Okay. Hope that was helpful. I want to I want to Sorry to Sorry to keep ranting here, but I want to try and
explain why we want to use Actually you're going to see it in action. There's a reason There's a reason why I want clean colliders and then I want to set dress on top of that. And it it's going to make sense. It's going to be apparent when we start doing it. So let's go ahead and just do a ground medium here and put it in the art. There it is. So we can just start placing our art. I'm going to disable the um snapping and hopefully you can see right away why we don't want these to have colliders on them. Because I might want to do this, right? I might want to do that. I might want to do this. But I still want it to be a clean collision on the ground. Okay?
Let's do that. Now I can just copy and paste. I can flip. Right? I can do that. So if I hit play here, now all I see is this. Does that make sense? Okay, so let's just do small pieces and long pieces here. We're going to do one here. Okay, one there. I don't love this one. This long one here. I like this large one. Let's take a look at this. I think this large one is going to be my favorite one. Yeah, cuz it kind of fades out and goes really long. Yeah, that's my favorite one for sure. Makes it really easy to use. So, we just place these here. If I want it to be in front, I can just drag it down. There we go. Now it's in front.
See that? Okay. So, those look pretty good. I'm kind of tempted to use that one again and flip it. So, we're going to be kind of strategic here and see what we can create. These I'm going to bring down here. Flip it. Okay, we're just going to create our surfaces here. Bring that one down forward. Yep, there we go. Yep, yep, yep, yep. I'm just going to use those. I really like these. I knew I was going to like these. Uh bring this up. There we go. Let's hit play and take a look. So far, so good. So guys, I'm not actually colliding with that ground, am I? I'm colliding with the block out.
That makes sense? Okay, here we go. I really like these pieces here. So, I'm going to make an edit. I love this piece. It's my favorite piece. I'm going to take it and I'm going to blend portions of it off. And make this longer because I I like how tall it is. It's really useful and so I'm going to make my other ones really tall as well. Actually, let's see here. Ah, man, it's tough. Cuz I like that one, too. We're okay. We're okay. Let's do this. Let's just get a little bit creative here. And just see what happens when we start sort of stacking pieces here.
Okay, that's good. I'm going to put bushes in front of that on this layer. Um it'll make sense, I promise. Okay, so let's take this one here.
[sighs and gasps]
Let's see. Yeah, I'm going to take this one and bring it down. So, a lot of people, including me, I used to do all of this in Photoshop, weirdly enough. And then I would export it as one giant PNG. Which makes zero sense. I had like a a version to having a bunch of game objects in a scene. But this is just the way making games is. Everything's a tiny little piece. Um okay, so let's keep going. And I think creating this ground is actually going to be maybe the hardest part because it can look really uh tiled if you're not careful. Flip that. I'm going to try and swap this out, actually. With the small one.
So, we don't have a a tiled look, right? Okay, let's keep going. Flip. I'm just going to sort of extend it all the way to there, right? If I wanted to, I could just do this. Right? Okay, just sort of cleanly place that there. I'm going to place this here, maybe another one here. If I wanted to, I could really scale it up. You just want to be very careful. Cuz like then I can start making things look really uh cheap if you just scale everything up like that. But, let's hit play and take a look. Good enough for me, man. We're going to solve all of that ugliness by putting bushes
on this exact same layer. So, do you remember I had this giant uh cluster of bushes here? It's called bush cluster. I could put this here. Now, for some reason it's not appearing in front of the ground, and I don't know why. Why? Why would that happen? We're going to have to figure this out. I'm going to hide the block out. I could do it like this. That's so weird. Why can't Why is that not working? We got an issue, guys. Some reason I can still see the block out. That I shouldn't see the block out. Wait, wait, wait, wait. What's that?
I don't know why that's happening. We got ourselves a little issue, guys. Oh. For some reason, this parallax layer here got duplicated. Oh my goodness, it did. Okay, let's let's take this and fix it. Look at this, guys. We have two parallax layers for some reason. How did that happen? So weird. Okay, something happened. It got copied and pasted. Very strange. But let's go ahead and bring the It's my mistake, I guess. I'm going to bring these uh ground pieces here. Bring them into here, and then I can delete this. Um okay. So now, where was I?
We can hide the block out, right? By doing this. But we can still see our ground pieces, right? I could take that bush cluster, put it right here, drag it on over, and now I can put this bush cluster in front to [clears throat] hide all of our mistakes. Right? You could flip it, so it doesn't look too looped, right? This is what This is my theory is this is exactly how Hollow Knight did it. Now, what they might do is they might even do a tiled um How do you set it to be this tile size, though? Yeah. I'm not sure, but you could do tiled even. And then you could copy and paste, and you just have a bunch of them. But I don't want to do that cuz I don't understand what's going on there to be
honest with you. Okay? And if it looks weird right there, right? Just put it below the other one. So you kind of have to trust your mind's eye a little bit. That one can go behind. There we go. That one looks good in front. Set it to flip. Let's hit play and take a look. Okay, it's not perfect, but I'm okay with it. Once we get some parallax and lighting and remove this ugly color here, it might look good. We'll need to zoom in as well, but we're going to trust our gut here and keep moving forward. That one can go on the behind everything.
Yeah, these clusters are super valuable. They make it really easy. Okay.
[sighs]
Now, um what I want to do is at least feel how this bush cluster feels on the first parallax layer. So I believe it's parallax layer -1. Is it parallax layer number -1? Let's see here. Yeah, this one's going to go in front. So hopefully we can see the parallaxing occurring. Where is it? Oh, I need to set the Z to zero. It got automatically set to one. There we go. Notice how it's already blurred? See that? And it's bigger, too. Right? And that's exactly what we want. It's bigger, too. And
the reason it's bigger is cuz it's on a Z axis. Right? I'm going to set all of these to darker. Like this. So, notice you guys notice how the controls are super simple. And it's basically this little template. And I can just drag and drop and everything sort of works out. So, right away, we already have these darker colors occurring. I don't love the way that looks. But, at bare minimum bare minimum, we know it's working. Let's keep pasting. And what I'm going to do is probably place a bunch of bushes. And not using these clusters cuz these clusters can make things look really ugly really fast. Let's see here.
So, I can make these a little bit darker. I kind of like it like that. That's not bad.
[clears throat]
Now, these clusters right here that are hiding the ground they don't move at all. So, we want to kind of hide those. Um but I think we're okay with this here. I'm going to put these a little closer. There we go. Make sure you set the Z. Yeah, so I want this to basically be black. There we go. Okay. So, that's set to zero. Make it basically black. Here's our bush. And this bush is really where we're going to make things look less repeated.
It's one single bush, right? And I believe we have a second bush, which is called bush shadowed. Yeah. So, this one is for being like behind. So, like right here, I could put right there. And now it's got a shadow, right? This one I could do the same thing. I could quickly just swap this out with bush shadowed, and there we go. Boom. Now it has a shadow to look to it. Okay, so let's see how that feels. Okay, that's much better. Okay, we're getting there. We're getting there. I'm just going to paste a bunch of bushes, guys. Flipping their X axis as much as I can to make it not feel so repeated.
You got to be real strategic with these bushes cuz they can look really ugly really fast. Let's see. Yeah, the foreground ones we're going to have to fix those up, too, cuz they look really repeated. But, I don't mind the repeated ones here, I don't think. Let's zoom in the camera. I know that we're going to need it zoomed in. The camera in Hollow Knight is actually pretty close to the character.
I don't know if this is an optimization nightmare or not. As long as that they're pretty self-contained scenes, I don't think it's a problem. Okay. Um Oh, I was going to zoom in.
Let's Let's see here. Let's go to our Cine Machine camera and zoom in. Okay, I can't zoom in anymore. Which means I'm going to need to make the Cine Machine camera field of view closer. There we go. That feels much more like Hollow Knight. Yeah,
[music]
and it looks better, too. I hate this music. Stop. Yeah, okay. So, we're going to do 40 45. This is what the field of view is going to be. Let's hit play again. Yeah. That looks good, and you can imagine what that's going to look like with all of these placed. So, I'm going to do something a little bit uh cheating here, but not really. It's just
efficient. Take these. I'm going to move that one below. There we go. We may even change some of these manually to be a little bit darker than others. So, for example, these closer up, I can just go a little bit darker, so it feels a little bit more like it's blending. See that? So, we'll see. Okay. Uh same approach here. I'm I'm fine with just taking these and pasting them over here. You got to be careful, though, that a dark one isn't behind one. Right? So, I'm going to drag this one and bring it down like this. This one I can go a little bit darker. And if I wanted to, I could make a prefab out of this, right? Okay, so let's see how that looks on the right side. Pretty good.
The foreground I need to move up and make it a little bit darker, honestly. So, let's make the foreground Well, I have these bush clusters here. I could do another set on layer -3 and set it to black, like this. There we go. That way we're going to get like a another layer of parallaxing. These clusters are actually really helpful. Look, I can rotate them like this, so they feel a little bit more unique and varied. That's totally fine. Look at that. Right? And hopefully things are going to look start looking more organic. Let's see. Oh, yes. Lots of layers. I'm going to bring that uh left side of that this up more.
Frames per second is really good, like really, really good. Usually when I'm playing like Twisted Tower, it's like 120. Right now, it's at 800 frames per second. So, it's it's doing just fine. Um let's bring the this right over here. All of these pieces I'm going to grab some over here. I just bring them over here. Yeah, you can imagine creating a prefab out of these. Make it darker. Bring that forward. There we go. Let's take a look. So, we're seeing a few gaps in there. Um like right there. So, I could bring this
right here, this one. I can create two of them. Flip it so they don't look too similar. You want to make sure they go up pretty high here. There we go. Yeah, I never saw him was giant sprites. I did all of it in in uh Hang on one sec. I kind of don't like this layer here. So, I may delete it. Um it might it or it just feels a little bit uh unnecessary. I don't know.
I'm going to set all those uh brightnesses to equal values. So, all of these just going to set them like this. Maybe just go a maybe a little bit darker. Yeah. Let's try that. That looks better. We need some distinction there. So, that is much better. Um I kind of wish the size was different. So what I could do is if I wanted to I could set this to -4. Right? Bring the Y up. So that it's just bigger. I just think that might be too much. No, I kind of like it. We're going to set that to -4
and bring it up. This one I'm going to set to -2 and 1/2. Bring it up. Right? And then hit play. I just want to get a really nice parallax and size variation. Yeah. That looks good. I just want to make sure we don't get any weird Okay. I need a uh I need a special little prefab. I'm going to create one right now. It's going to be called a black fader. It's going to be super simple. Just like that. And the edges will be fade out as well. It's almost like a little half circle. Frankly, let's just do that.
That's fine the way it is. I'm going to use I'm actually just going to do this right here. So it's going to be white. This is going to be interesting. Watch this. Um I'm going to have this white gradient here. And it's going to have nothing special about it. And I'm going to call this white gradient. And this white gradient I can use in the various layers to hide and also create fog. So it's for hiding things and also creating fog. So I'm going to go ahead and bring that in. Okay, there it is, white gradient. I'm going to bring that into layer zero. It's so important to keep your layers named properly because you can get so lost. Duplicate that one out. And then we're going to create a prefab out of this white gradient. We're going to have a white gradient. And then we're also going to have
um we're also going to have a a black gradient as well. So this is our white gradient. I'm going to duplicate this and call this black gradient. Do you guys see how I'm getting a lot of mileage out of very few assets? That's the goal. So I have my white gradient here and you can see what I could do with it.
[snorts]
I could bring it into my artwork here and create like fog. So I think it might actually be advantageous to to do what I was saying, which is fade it out on both sides. Like this. Just so you can use it as um honestly, let's just do this. Watch. I'm going to do this. I'm going to fill this white circle in and blur it and that's all we need. Let's make it white. obviously. Let's do a blur and I'm going to call this white gradient. And it [clears throat] should just import in into Unity here.
Okay, it lost it, which is fine. Let's go back to our white gradient here. There it is. I'm going to make sure I apply this to the prefab. Look what I can do with this. Um it's a little big. So here's what we'll do. Let's make it smaller. I don't why it's so big. Save it. Should shrink. And by the way, if you're curious how to get this game kit we're working with, just download it below. It's totally free. It's totally free. Where did the white gradient go? What in the world? Oh, jeez. It should show up right here, but it's not. White gradient. So, we need to make sure we go to our sprite editor. If you If you lose it, um There we go. If you If you lose access to it, you might have to go into the sprite editor. There we go. Hit apply. And now it should show up. There it is.
Okay. So, we have this white gradient, right? So, you can imagine how we could use this. You could use it to create depth, right? Separate out certain layers with fog. But, you could also use it as a black gradient to hide things as well. So, it's super advantageous for us. I'm going to use a yellowish color for fog, right? Reduce the opacity. And I'm going to call this fog. So, I have a white gradient. I have a black gradient, and then I have a fog gradient. Oh, we already got one. Sorry. We already got one. Okay. So, watch this. I can just put this here to create separation between each layer. And if I don't like this color, um I can
change it really quick by just changing the prefab. So, this is going to create a nice atmosphere for us, but also separate out our layers, so they don't look so They They looked really like they were blending in with each other. So let's go to our fog gradient here. I'm going to go a little bit less saturated, maybe a little bit more green. Save it. Let's hit play and take a look. Yep, that looks good. Awesome. You can see down there, you might want a black one, right? In front of this. So I could create a shadowed effect using my black gradient in front of these. Or maybe these. Okay, so I'm going to go to parallax layer one here. Go to my black gradient and these are going to be all the way in the front, right? Where did it go? What the F? Oh, it's missing its sprite. Hang on. Go to our white gradient here. Burp, there it is. So watch this. If I wanted it to look shadowed, I could put a shadow here.
And you'll notice that in Hollow Knight that sometimes there's like areas that are very shadowed and you're it looks and it could be lit. It may use 2D lighting. Um or they're just using little circles to create this gradient effect. Right? Like this. All right. So you have to hit play a lot so you can see the parallaxing occurs. See how that? That looks pretty good actually. Maybe we'll tweak it a little bit, but overall pretty good. Yep, that's what we want. And if you want to hide a layer, you just hide it right here. Right? So now I can see my gradients. Maybe hide that one as well. And I can just hide
what's beneath it, right?
Yep. I don't think this is a terrible approach. I really don't. As long as my theory is as long as scenes are well organized that it's totally fine. Let's open this up here and take a look. Good. And then this one as well. Good. Let's take a look. Yep. So, that ends a little abruptly. So, we need to add more over there. These are fine. I don't love that, but yeah. That's that's a little ugly right there.
[sighs]
So, let's go ahead and hide here and hide here.
This is a little ugly, too. Oops, no. Wrong one. Hide. Hide. There we go. Yeah, so this one right here is a little weird. I can't select it. Hang on. There we go. There we go. Something like that. And it's ending abruptly. I'm curious which one it is. And also don't want to see the uh the blockout here. I don't want to be able to select it or see it. So, this right here is ending abruptly. So, that's the second parallax layer coming forward. So, it's parallax layer -1. So, yeah. Let's go ahead and grab some bushes here. All this stuff. Yep. Grab those and bring it over here.
Right? Just like that. That should work. Let's take a look. Okay, we need to move it over a little bit. There we go. Cut these out. Don't need all those. Hit play and take a look. Okay, so that's bothering me. But other than that, we're pretty good here. I can even put some fog in front of um the black. So, this right here, I could go Well, you know what? I want to do this, right? I want to put Give me a sec here. These bush clusters here. I'm going to hide those. Yeah, this I could put uh fog in front of the shadows here. Like this.
Now, I don't know exactly what Team Cherry would think about this approach. I have no idea. But I know for me in uh you know, making a level in in 3D is way more complicated than this. So, this doesn't bother me at all. This is a pretty clean approach, in my opinion. So, yeah, we have some fog in front of the shadows there. Which doesn't bother me. Okay, so it's fine. It's not perfect, but it's fine. Let's fix that there. That one, bring it over here, boom, fixed that one.
And then there's like one over here that's bugging me.
[whistles]
Cluster here, cluster here, and cluster here, flip. Let's take a look. I don't hate that. I don't love that. So, let's just go to the second-to-last layer here and just bring it up. And I think that'll solve it. Let's take a look. You can imagine why it would be advantageous to have small scenes so that you you could uh so the parallax wasn't uh so far off on the right and left sides. Cuz you can you can design it all you want, but until you see it in parallax, it's hard to know for sure how it's going to look with the parallax occurring. Does that make sense? Thomas, what was your first game engine?
Flash. Uh okay. Okay. So, we How we feeling, guys? Does feel pretty good? I feel like we're we're we're getting close, for sure. I think the foreground could be a little bit higher right here and here. We could rotate it as well. Yeah, these clusters are super valuable. They really are. Um Yeah, really valuable clusters. That is weird-looking. So, we're going to make sure that that's not. So, nature by the way, nature is it grows in clusters.
So, doing this looks a lot better than than making it evenly spaced. Evenly spaced nature never looks good. It's kind of haunting or or or gross. Like there's a phobia of evenly spaced holes. Um that's because nature should not be evenly spaced. Nature grows in groups. Everything grows in clusters. Cool. That looks great, man. I'm going to change my character's color cuz it's driving me crazy. Um absolutely driving me crazy. I want him to be the same color as Why why do I even care about this? Well, I do. It's driving me crazy. I've found that if you want to make something beautiful,
it's good not to let it throw you off. And if something's throwing you off and it's making your your brain hurt while you're working on it, get rid of it. So, for example, if you're listening to dubstep while making a game like this and it's hurting you, throw on some classical music. If for some reason having a red character is throwing it off or an orange character, make sure you turn it red. So, now we have this red character, which hopefully will fit in better with our world because that's the the color of our our Hollow Knight character as well. Okay, it looks pretty good to me. I'm happy with it. Uh Uh, let's move into the background. So, weirdly enough, there's not much we need to do here. Except just lay out our art. So, having everything in these layers, these
parallax layers, is so advantageous. Because we can reuse all of our artwork. So, this bush cluster here, uh, in the in our game art prefabs, we're just going to throw that in there. Watch. Boom. Now, it's going to be behind the player. See that? Now, you might be thinking, "Oh, Thomas, I can't see." Well, hold on. It's going to slowly fade to that blue the further back I go. So, for example, I'll set this to zero. I'll put that there. We need to make sure that we reset this value here. Um, watch what happens as we go further and further back. It's going to slowly fade to blue. See that? And get blurrier and blurrier.
And that's because, why? Let's take a look. As we go further and further back, it's absorbing um, the fog. For some reason, I can't see the fog in play mode in in editor mode, and I don't know why. It's really weird. Um, but yeah, it's absorbing the fog. The Unity fog, right? Now, you're probably thinking, "Man, there's not a big separation of the background and the foreground." Well, that's because um, we need to throw on a solid gradient behind the player. And this is, I believe, how Hollow Knight does it. So, here's what I'm going to do. I'm going to have all of my artwork in one scene. All I need to do is this. All right, all of my artwork is going to be in one one file.
So, I'm going to do like an orange color here. Okay, so that's that. And then I'm going [snorts] to do like a blue a vibrant blue color. I don't know if this is the way they did it, but I think it is. So, we'll see. So, this is going to be called our background overlay. And it's just this little sliver. I'm going to take this little sliver. And I'm just going to copy the bush cluster, honestly. And inside of the player, inside of the camera, I'm sorry. Uh No, inside of the player controller in the player art, actually, I'll just put it right here. I'll zero out its position, right? And he's going to be just right here. And this is going to be our
background overlay like this. And I'm going to set it to tiled. I just don't know why the tiling isn't working for Unity. It's something's wrong. Well, it's doing it. There we go. I don't know why it's doing that, actually. It says, "Sprite tiling may not appear correctly because the sprite used is not generated with full rect." So, let's do something like this. Pretty wide. Um zero out its position. Set it to 0.5, so it's just behind the player, right? Like that. Um and we're getting some weird I'm I'm actually not going to do a tiling. I'm just going to do um simple. Yeah, we just need it simple. That's fine. And um we're going to lower its opacity like this. Ah. I don't think you can because it's set to
[sighs]
sprite fog. And sprite fog uses c- alpha cutout. Yeah, this right here. Here we go. Okay, good. All right. So, that's what we've got and it's going to be in front of the background. See that now? Does that make sense? So, if I go pretty hard here, it's going to cover everything. So, that's the advantage of having this one little layer behind the player. We want to make sure it's at -1 though. So, the player is always in front of it. Does that make sense? So, we set that at -1. I'm going to make sure that this is called background overlay. I'm going to apply it to the player, the entire player prefab, so that we always have it with us, right? It's much bigger
than the actual game view because I want it to look great with ultra wide. Where's ultra wide? Well, I could just show you here. Right? Like this. And the the white there is actually the blockout. So, we're getting some weird blurs. What is that from? Why does it look so weird? I'm not sure why it looks weird. I think it's because the uh the the the blur is not adaptive to the the pixel screen pixel size. So, that's a whole other problem. Um yeah. But, if I set it like this, it looks good. Uh 1340 by 2160. Yep, there we go. Okay. So far, so good. Um I'm going to make it more saturated.
More contrasty. See what happens. Yep, that's better. That looks like Hollow Knight. Okay. So, you can imagine the value here. Why isn't that blurring? Why aren't those blurring in the background? I'm unsure. Let's see here. They're not blurring as they go back, and I I'm not sure why. Also, does it help to go darker? It might. Which means what you can do is make the fog like this. And slowly these bush clusters will fade to complete black. They should fade to complete black.
But, they're not for some reason. Like, if I do this, something's wrong. What about eight? There we go. Okay.
[sighs]
So, what we need to do is we need to set the end value to be of the fog to be something like 10. There we go. All right, let's do that. And we'll do like a navy blue. Set it to 10. And let's see how this looks. Okay, that's a little gloomy. We'll adjust the values in a sec, okay? We'll adjust the values in a sec, but for now let's go ahead and set up our background. So, what I'm going to do is just start placing some bush clusters on this layer here. And I'm just going to do the bushes for now. I don't really care um
about all the other assets. Well, we're going to do like a second layer of um set dressing in a sec.
[snorts]
I hope that Z-fighting isn't present in play mode. I hate that. I wish Unity would just say, "Okay, I'm making a 2D game, so I don't need to worry about it." I'm just going to pick one over the other. I hope it does. Let's see. It does. Okay, good. Yeah, those bushes don't look great. Um it's a nice sort of background layer. But um and I don't like these either. Those look that looks cheap. Yeah, those look cheap. Okay. Um these can probably go here if I'm being honest. There we go. Yeah, put those back way
back there, and then we can cover them with a cleaner layer of um bushes. And I need a little bit more of a blur, man. Okay, let's go to our bushes here. We have a bush right here. There we go. Now I can take this one. I don't know what it's conflicting with. Uh Parallax layer two is set to two and this is set to three. Uh yes, I need to set this to zero. Okay, these need to be set to zero. There we go. Okay, much better. That looks much better. Okay, good. And I'm going to take these bushes here. These right here. And just create a nice clean layout here. There we go.
Put that one in front right here. And you want to be very careful with your bushes. Cuz they can look really bad really fast if you're not careful. Flip. Let's take a look. So, we'll move those down below. I think the parallax is a little strong there to be honest. We got too many bushes, my friends. I can tell you that. Kind of feel like this needs to be set to two. That to one and then
how about 1.5? Oh, yeah. We actually have this. That's what it where it needs to go. And then these can go here. Let's hit play and take a look. That's much better. Okay. So you can imagine why this would be valuable to um have all this art as non-destructive cuz I might want to change some of these bushes. Like the bush clusters are they're looking a little weird. You know. No, stuff doesn't get brighter towards the back. We're going to use a an overlay filter for that. Things should blend into the fog. Okay. I wish the background got blurry. Let's
take a look and see what's going on with the post processing. Go to our global volume. This is our how our blur is handled. So valuable. I don't know why the background doesn't get blurry. Let's see. I don't know if the background's going to get blurry for us, guys. We may have an issue here where the background doesn't get blurry. Yeah, I don't know if the background's going to get blurry for us. It should. We have an issue here.
It stinks.
caution I got to think here guys. Sorry. Well, dang.
[sighs]
It's not a narrow focus. It's only one way or the other. So, the background isn't blur for some reason. So, we're going to have to figure that out.
Yeah, the background isn't getting blurry and I don't know why. Stinks. Stinks. So, these bush clusters we're going to delete. I need it I need to figure something out really quick. That actually looks pretty good. There's part of me that feels like we need to get rid of this layer here. No. No, we're okay. What am I What am I doing? Let me think here. We don't need this many bushes for one. That's ridiculous. Just a few bushes is all we need.
This though feels ugly. You just need a little bit of layering here. Guys, you can imagine how hard it was to make that game. I mean, just with this level of control, it's just crazy. Okay. I don't know if the background's blurring or not. It might be. I can't quite tell. Where did the background overlay go? Yeah, that's what we want.
Yeah, we need that background overlay much thicker. And then we want the blue to be way less saturated. Let's take a look. And we might need to even set it to multiply. And we'll do we'll do a uh Now that looks good. We're going to do a uh uh uh light around around the player here. Sorry, I'm just thinking about that background, guys, why it's why it's not blurring. It's really driving me crazy. Um
[sighs]
But I think we're okay for now. Okay. Um We we're going to have to figure that out. Let's go a little bit darker here.
Hit play. Okay, and we're going to adjust all these values, I promise. Okay. Let's add in the white sphere that is around In fact, I would argue this should just be a sphere that we can use. That's what we're going to do. So, we're going to change that white gradient word to be white sphere. So, this is going to be a white sphere that we're going to blur. Like this. We're going to call it white How about white circle? Save it. And go to Unity here. You're going to see all my fog get screwed up, that's okay. Cuz I want to be getting as much
out of my assets as I can. That's called white circle, that's good. Okay, there's our all of our fog. For some reason, we lost something. Oh, it's the it's the uh black gradient here. We're going to make sure that this is set to one by one. Yeah. So, the rotation is zero. Go down like this. I'm going to apply to all here. I'm going to have to delete all this black gradient stuff cuz it's something's wrong. Yeah, something's wrong with the black gradients.
[sighs]
I know. I know. Let's go to our fog gradient here. We're going to set it to 00011111. Good. So, let's get our fog looking good here. Here we go. Yeah, we want to stretch it.
So, we're going to go to zero and then it's going to be that. Hit apply all. There we go. We're just going to go to each one and clean it up. Actually, let's revert them all. There we go. We'll do the same with the black radiance. There's our fog. I don't even know if we need the black radiant right now now that we have enough layers. Yeah, we probably need some right there in front of that layer, but other than that we're good. All right, let's go ahead and bring in some of the uh black gradient into this here. So, there's our fog. I'm going to swap this with the black. Actually, no. Let's delete that. I know I'm not making sense, guys. Give me a second. I'm just trying to think here. There we go.
There we go. Just trying to blend that in a little bit more. There we go. Blend. Blend. Blend. Let's take a look. Good. It's better. Kind of feel like that third layer we don't need. All right. Or that third layer we can just go darker. This right here? All these bushes here I could just go darker. Hit play and take a look. So, kind of what I'm doing right now, guys, I'm trying to find establish a uh uh a rhythm or a system that works for me. And so, I'm just kind of experimenting
here. That looks a lot better. Yeah, you might be right about the foreground parallax being too much. I'm going to do -3 and then -2. And then -1 is there. Yeah, let's take a look. Feels better. Uh-huh. Uh-huh. Okay. So far, so good. Um Golly, that that this layer right here is bothering me so much. I believe it's this one here. Let's take a look. That layer really is bothering me. I
don't know if I need that. What is that? Got fog. What the heck is that? It's our fog put in the art. This layer here -1 is bothering me so much and I can't put my finger on it. I think it's just because it might be that gradient of black that I just don't like and then we just need to go darker.
I think it's the uh
I think we need fog between each layer. Give me a sec to figure this out, guys. We're going to figure it out.
[snorts]
May need to be black. Feels better. It does. Just crank up that. It does feel better, doesn't it? Yeah. Okay, that's all we're going to do for now with that with the fog gradient here. Just make sure I change it to the black gradient here. There we go. Hit play just double-check. Yeah, it's just I want it to blend a little bit more, and I think that's That's good. Where is it at? Let's see. Yeah. Okay. And then that that second layer, I I wonder if I even need this. You know?
And I just if I just set that to black, that might be all we need, guys. You know? So, if I set this black right here, and just do that, I wonder if it's just automatically works for us. It just might be moving a little too much. Where'd the other one go? Thought I had another one. Oh, Thomas, you dummy. And then do this. There we go. I'm going to figure this out. I'm going to figure out why this is bothering me. Something about it is bothering me.
And I don't know what it is. I think it might be the the amount of parallax. I think that could be what's going on. Um that feels really good to me, actually. So, what I'm going to do here is I'm going to set parallax layer -3. That's the closest it's going to be. But, this is going to be -1.5. This one is going to be negative one, and then this one is going to be negative point five. So, we just have less parallax occurring. Okay, that's good. And then this one these bush clusters here we do that. Put it right there. And then what I'm going to do is go to this one here. And you'll notice I have these big clusters of bushes right here. These I think I might put those.
I don't even know if I need that black gradient anymore. Give me a sec, guys. I'm going to put these up here. On the negative one because it's only at .5, right? Zero those out. I know I'm not making sense, guys. I'm just thinking and then I'll explain what I'm doing here in a sec. Make these darker. There we go. Let's take a look. Ah, that feels so much better. I think one of you said it in the chat. But I will say I I kind of want this to be just full like that. Yeah. That looks better. It's not perfect. And I wonder if I didn't need to delete this. Hmm. Hmm.
That looks better. I'm thinking, guys. I'm thinking. And then we'll just move it up. So, my theory is move everything up. So, it's tighter. Not that layer. So, it's just the foreground that needs to be moved up. This is tough. That looks so much better without all
that junk here. All this junk here, there's just too much of it. We're going to clean it up. Make it bright, too. Yeah, okay. I knew it. Okay. So, it's busy and what we're going to do is scale it up. Yes, okay. Thank god. Um I'm sorry, guys. I just need to Give me just a minute, okay? There was something off and I think I got it. I think I got it. It was just too repetitive. And also, it was it was blending too much. Okay, that looks a little bit better, but it's already getting busy again. I think we need to just rotate it, maybe.
This is a really difficult really really difficult to do this. Maybe we just need variations in color. That does look better. Drop it down a little bit. Okay.
[clears throat]
It's tough, you know. You can't have too much. Yeah, you really don't want too much. Drop down. There we go.
[sighs]
Brightness. Okay. Like I said, they grow in clusters. So, you can't have them doing those weird shapes. Doesn't work like that. So, you have to move them closer together like this.
Yep. What a strange thing. The brain just says, "Nope, I don't like it." Okay, there we go. We're getting there. That one's too high on the left side. Yeah. Yeah.
Honestly, we just need that one there. Do that. Take a look. Yeah, that's better. We'll just put something there. And look, if you put if you take this and you put it back down below on layer one like this put it below everything. Um like that. I believe the background will just fade
underneath. What a strange way of making a level. But that yeah, that feels that doesn't feel horrible. We'll probably put a little bit of a green piece there. Do that. Take a look. Yeah, that's not bad. Okay. And we'll create more detailing in the foreground once we get the background done. Um Yeah. It's better. Yeah, we could break the pattern for sure by just bringing in more of our props. Or our our uh you're right, our um
Let's just fill that gap in and then let's move on to the background here. Yeah, okay, we're good. Okay, we're making progress. Uh There's just a a repetition about that clump [snorts] piece that's driving me crazy and I can't put a finger on it. I have to sit here and think, guys. Sorry.
Okay. So, that vignette is good. It's crazy. I can't get the background to blur, which is such a shame. Okay, watch this. This right here is irritating. So, I'm going to fix this by scaling these up and going darker. My theory is is that scaling them up and going darker will naturally make it not feel so flat. Okay, I could be wrong. But, we're going to go into Photoshop here and see if we can solve that very frustrating flat look.
It does look very flat. And then, we'll do a little drop shadow here. Like that. So, now we have this sort of hopefully simulating depth. Didn't do it. Didn't help. Something about those bushes is driving me up the wall. Something about those bushes is driving me up the wall. I can't put a finger on it. I guess it's not horrible. Let's let's keep moving forward. It it also
Something is wrong with it.
[laughter]
Something's wrong with it and I don't know what it is. Um it's really frustrating. Okay, let's move forward though. Uh let's go ahead and throw in some background elements. Go to parallax layer two. So there's this which let's double check and make sure all those bush clusters look good. They don't look good because I think what we want to do is take these bushes here. I'm kind of tempted to make a bush cluster prefab.
I've got to think here, how to do this. I don't love the way the bush clusters look in the background. Um let's double check. I prefer the way those look. So, I'm going to create a prefab that is a nice clean bush cluster.
Let's see how that looks in play mode. That looks good. Okay. I I think I've got this, guys. I think that the the bush cluster in in Photoshop is gross. I don't think I like it. Um I I would rather maybe even do this whole bush cluster concept in unit in Unity and not in Photoshop cuz I just think that bush cluster looks like trash. That looks so much better. This right here. Look at this. That looks so professional. This looks like garbage. This looks amateurish.
I'm going to take these and I'm going to use those in the foreground. Those just look really amateurish. Okay. Uh so, let's do this here. Okay. This is going to be our bush cluster. That one. This is our bush cluster. We're just going to slowly finalize it here. What is that? Honestly, I have a I have an idea. It might be a terrible idea, but I have this idea of putting parallax within parallax
to make these bushes look really unique and full of depth cuz right now things look really flat. So, here's an example. That looks pretty flat, doesn't it? Am I allowed to make this have more of a 2.5D look? So, I'm going to disable the ability to grab the player. I'm going to grab all this. What is that? I'm going to grab all this. I'm going to make this called bush cluster. Not birch cluster, bush cluster. I'm going to zero out its position within the context of this light. Why is it doing that? Oh, there it is. Okay. Uh I'm going to move it over to the center of this. And the way you could do that is stick it inside of one of the bushes here. Zero out its position,
rotation, and scale, and then do this. Uh rotation zero 111, and then take all those bushes and put it inside the bush cluster. So, now we have this cluster, right? And so, what I'm going to do is I'm actually going to back things up and move things probably forward just a little bit. So, that we have a little bit of room for parallaxing. I wonder if that's a good idea. Cuz it's all 3D anyway. It just looks 2D. I feel like we can maybe get away with this as long as we're not interfering with other layers. I think we're okay. Yeah, that creates a little subtle parallax, which I don't hate. I wonder if we can create a bush cluster
out of this. That has much more control, but also has parallaxing. It might work, guys. What do you think? Yeah, I kind of love that. Let's create a bush cluster out of this. We're going to call this bush cluster one. I just feel like we have to be much more intentional here with our bush clusters. Unfortunately, right? Um I don't think we can just use these crappy bush clusters here. These ones right here are are just trash. They're so ugly. Whereas that one feels so much more professional. So, I'm going to take this bush cluster here, drop it down to here. And then I can put couple here, one
here. I don't want to use spare bushes like that cuz it's really it really annoying. So, I need to create multiple bush cluster types. This is ugly, this is ugly. And then I can set the scale to -1. I can rotate them. Yeah. Let's take a look and see. Yeah, that has a lot more depth to it and it feels more professional. Okay. Right. Okay, I think we're okay there. Let's try out this approach with creating multiple bush cluster types. So, I can take this here.
Do this and just start tweaking it. So, it doesn't feel so repetitive, right? I'm learning so much today. It's pretty cool. I think that one needs to go in front. Okay. So, this is going to be called bush cluster two. And I'm fine with it just being a prefab variant. And then I can just do this. Let me set it to positive one. Put one here. Put one there.
Let's see how it feels. So, that's weird. I don't know why that's happening. That's really frustrating. Why would that be happening? Getting some Z fighting as well. I think it's because they're using that blur filter. I'm not quite sure, honestly. Yeah, I think it's it might have to do with the I don't know, guys. That's a kind of a weird thing. Getting some Z fighting there as well. I'm learning. That la- top one right there is bothering me. And there we go. I'm going to apply all. Here we go.
[sighs]
Okay. Okay. It's getting to the point where I'm starting to see just blurs. I can't quite see if this is any good or not. It's hard to know at this point. I don't know if I really hate that as much as I thought I did. But, I'm going to try to put those clusters up front. Okay. And then you can what you can do with the clusters is you can just tweak them, you know, you can say okay, I've got my prefab. Now I can just adjust accordingly. And make it not look so repetitive.
You can flip them. Right, you can do that. You delete some. So I think that's the benefit of having those clusters is you can edit them. But they you can quickly place them. But you can also quickly edit them. Right? So there's bush cluster two. Same over here, right? Here we go. Having a rigged character makes the jumping feel weird. Well, yeah. We're not even on the character yet.
I'm going to remove, let's see here. Okay. So far so good. Just double checking some stuff here. Uh it doesn't feel horrible, you know. I'm feeling pretty good about it. But how does the how does it look without the player art? Yeah, it's feeling like Hollow Knight. Good. Okay. Um Let's get rid of the shading on this. This bush cluster might be great. And all I need is just no shading. You know? No, it's it's baked in.
It's baked in. So, why don't we do this? I'm going to do something crazy here. I'm going to take this bush cluster here. And I'm just going to try really quick. I'm going to put it inside of this one. And I'm just going to see what happens here. I'm going to disable the sprite render. I just want to see what it looks like. Okay, so that's what it looks like. What is that? Why did it do that? What is that thing? Let's see how the foreground looks. Yeah, the foreground looks better. Yep. Cuz you're getting a lot more depth there. It looks 3D. Okay, we need that. Delicious. So, here's what we're going to do. I'm going to rename this bush cluster to bush cluster foreground.
I'm going to go inside of it. Paste this bush cluster. I'm going to break it apart, actually. Prefab unpack. And put all these inside. These need to go right here. There we go. So, this is our foreground bush cluster. This sprite render I'm going to remove. The problem is we have this weird I don't know what that is. I don't know where that came from. I have no idea. I think that might be this. The background overlay for some reason. Um it looks like the background overlay is a prefab, which is hilarious. It's actually the bush prefab. I remember we did that actually. Yeah, so let's delete that and add a sprite render to it. All right, we're almost there, guys. What was it? It was the background overlay. There we
go. Good. Okay. Uh save it. No, we need to set it to Oh, we might have a problem, guys. This background overlay is causing that glitch. I turn it off. Let's see what happens here. Yeah, that's looking better already.
[sighs]
Okay. It feels so 3D now. But we're getting some weird like clipping and stuff. And you could see it here. Okay, that's good. All right, so we were looking at it backwards. So we If we
look at it forwards, it's just we're getting some weird Z fighting on certain spots. And I wonder what that is. I don't love that. I might need to adjust the shader. Ah, yes. I think I know what's going on here, guys. I've got it. I figured it out. If we go to our sprite Yes, okay. So, the background overlay is causing problems. And the reason why is cuz this right here, the alpha cut off, there it is. Okay, we need to set it to 0.5. Thank you, Lord. We figured it out. Okay, I was get I was getting really worried. Okay, good. So, why is it that
Okay. Let's think this through. These all need to be darker than each other. Some of them are clipping. That one. That one. That one I feel like needs to be darker. If we just tweak this, um this singular prefab, it kind of solves all of our prefabs for us. That's why I like having this as one prefab. Um because I can go in and clean it. If I If there's parts of it that just aren't working for me, I can just clean it really quick, and then they should fix themselves. I don't know what's going on here, though. So, they're interacting with each other like this. And my theory is if we just set them all to white, it's at least better
than the alternative. Yeah, okay. So, we need the shader We need the shader to go darker the closer we get. We're going to figure get out. I promise you. I do like how that looks though. It looks so much better now. It feels very 3D. Yep, the foreground ones and the background ones needed to just have clean white. Okay, very good. I just want them to get darker when they get closer. Are they lit?
They're not lit. So, I think all we could do bare minimum is for each and I'm figuring out the process here, guys. There's a I'm I'm trying to get it down to a science so that I can replicate it. Um Okay, that's going to be negative one. Okay, okay, I got it. I got it. I got it. I got it. Hang tight. Hang tight. I have to think this through. We got all these foreground bush clusters that are interfering with each other and it could be that we just needed bring things closer again like we had it, you know?
Like this. It doesn't bother me too much. They just need to get darker and darker. Otherwise, it gets really confusing. Okay. Almost there. Okay, so here's what we'll do. These were going to go black. But we can't. Okay.
Foreground bush cluster, we need to set them all to a darker color. Like that. And we're going to see how this looks. Okay, we're getting there. All right. Okay. So that's our foreground bush cluster, right? Um and that's going to be used on parallax layer -1. Okay, so we're going to create a foreground bush cluster. I need a script. Yeah, okay. I need a script. A tool that will in editor mode or in play mode, it will adjust the sprite so that they're darker in the front. I'd rather do that
than have to do it manually. So I'm going to need a script that will change those to be darker depending on if they're uh if they if the Z axis starts to go um Yeah, if the Z axis starts to go negative, it needs to change any sprite to a darker value. Okay. So, let's create a script that will do that on start. So, let's go to our parallax layers here. I'm going to create a new script. I'm going to call this um Z uh parallax layer tinter.
Some reason I didn't get the script that I thought I would. There we go. Parallax layer tinter. And we could do a shader, you're right. Um I could I could ask Grock. Or not Grock, Claude to do that. Um Yeah, we could we could see if the shader could do that. Let me let me open up the shader and see if we can get it to happen.
So, the value of Z is -2 or -3. Yeah, let's do -2 should be black. Let's see if it works. I doubt it, but we'll see. Yeah, I like the idea of it happening naturally and slowly becoming more and more black. As we get closer to the camera, like this. Like these all should be black. And be happening naturally. You know. Okay, so this the shader is being adjusted by Claude right now.
Use world Z position to the object to darken. The Z range maps 1 to -2. So, brightness decreases. Okay. I'm going to save that and see what happens. Oh, it did it. Okay. Thank you. Who was that? Um who was that? That was a It mauled. Now we have the shader automatically doing it thanks to Claude. There we go. So, it's getting darker and darker and darker. I will say though that the um I kind of wish it was occurring not so aggressively or exponentially.
But I don't mind that. Let's see here. These guys This is parallax layer -1. If I were to do -1.5, it would be a much darker. Right? And then this one is Yeah, that could work. Yeah, I actually kind of like that. So, see how it's happening naturally now, guys? And that's just cuz of a quick shader tweak from Claude. And that looks pretty good. And then we can have another layer right there. Okay, guys, we're almost there. This was definitely worth the the time. Um So, I'm going to actually put this uh I know I'm I know I'm rambling. I just
have to be thinking here. I'm going to put these here and zero out there. What? That's -2. Okay. Then these are going to be -2. Zero. Let me think here. Okay. Give me a sec. Give me a sec. Okay. Okay. I'm going to revert back to what we were doing. -2, then this is going to be -1. Okay. So, it's nice and smooth. That's zero. -1. Yep, and then there's the -3. I guess we could just move up
these and call it a day, you know. And then move down these. And if you're thinking, "Man, Thomas, you're taking forever." I'm trying to figure out the right process here. Uh to get this working properly.
[snorts]
I mean, you can imagine what would happen if we stretched it like this. You'd get a nice even distribution, right? Actually, it looks really good. So, instead of stretching it like that, what we're going to do is do it like this. This is the benefit of having the shader handle the the darkness values. So, basically, all the shader's doing is it's saying, "Okay, hey, dude. Uh if the moment RZ starts getting negative, we're going to start going darker." And that's just a It's simulating what happens to depth. The further something gets away from the camera, it
blends into the fog. And the the closer it gets, it can become placed into shadow, right? So, that's what we're trying to achieve here. All right. Let's take a look and see if that created a cooler effect here. Let's see. Yes, plenty of depth now. The black is being um evenly distributed. Ooh, this is tough. This is one of the harder projects I've done.
I kind of wish the the parallax layer was a little bit more aggressive in scale. Uh what if we could change the camera to do that? Hm. I wish they were just bigger. But I think we're okay. I might be getting too picky at this point, guys. Maybe maybe not. Let's see how it looks. Yeah. That's good, and I think honestly we could do the same with these. I'm not worried about the Z-fighting anymore. As long as they don't as long as it doesn't go in front of the actual, you
know, um ground, we're okay. So, I'm going to I'm going to push these back. And we're should be good here. Let's try that. So, yeah, you can see now it's very There's a ton of uh depth. Look at that. Feels really good. Yeah, so what it's trying to do is it's trying to basically look like the light is coming from the player, and it's being cast, but not all the way to the foreground elements. That's kind of what the light is trying to do. Um but what we also need to keep in mind is when things go into the background, they get they blend into the fog. Okay, now let's go ahead and add this
background overlay back. This background overlay might be causing problems with with the For example, this right here. I'm not getting a blur effect anymore, which is driving me crazy. And so I may have to look into that after the stream. Um Okay, anyway. What are we doing? Oh, yeah. So if I if I delete the background overlay, what happens? Is that causing issues? No, we're not getting a blur in the background anymore and I do not know why. But let's go ahead and um get our our background elements working. So what what Hollow Knight does is I believe they because the background is so blurry, they can get away with doing stuff like this.
You know? That looks great. That's what we needed to do. Y'all, I think Hollow Knight is 2.5D. I think it's 2.5D. Cuz this is awesome. It really is effective to see it this way. Okay, this is where the magic happens. I just realized that this is what it's going to be. I may just need one background layer where I do all all sorts of shenanigans like this. See that?
That's where the magic happens. Let's look at our stats here. Yeah, our frame rate is still ridiculously high. Yeah. Now, I don't think it should be necessarily become shadowed um like that. I think it should just blend into nothingness. But, that's awesome. That's awesome. I'm going to keep all of these bush clusters here on the last layer. That's going to be parallax layer five. This is our background layer. So, I'm going to make sure that all of these clusters are back there. I don't know what that is. That's a layer two. Let's see. Yeah, that's great.
Can you guys hear me? All right, so we have this sort of background. And then we have all these bush clusters here which I don't know why those are in separate parallax layers. Hm, let's see here. I don't need that one or No, that's on parallax layer five. Okay, I see. I see. These all need to be moved to parallax layer one, I believe. Yes, okay. Oh my goodness, that depth is so magical. It suddenly just brings the whole game to life. Oh, I love that. That is so so valuable. Um We'll set them to zero though. They need to be at zero Z. There we go. They were moving too much.
Okay. Oh my goodness. So valuable. Okay. Put this one here. I'm so glad I made this prefab. Cuz you can create so many cool effects with it. And we'll do a bunch of different ones like this. But you can imagine we can increase the depth here of the fog. So set it to something like 20. There we go. Look at that. Isn't that cool? So you basically create these sort of cones, right? And then we'll make the fog blend in with the
Here we go. The sky. Here we go. I'm going to take that. That's going to be our color. Um Let's double check something here. Oh yeah, we need to set it to 20. Yep. And then we'll set the sky um to the for for the camera to be that same color. So now all blends in and just goes into nothingness, right? All right. Let's move our camera a little bit. It's too high. I need to set it to zero, maybe. And then this polygon camera collider maybe needs to be higher, I don't know. Cuz I don't know why it's not allowing me to go higher. Let's see.
Nope. There we go. 1.17. That feels so much better. Thank you, Lord. Okay. Um Now. Now. This is such a delicate process. I am really surprised by how delicate this whole thing is. Very delicate process. You really have to have a strong understanding of what you're doing or you can get really, really confused. I can't imagine trying to do this without doing it in perspective mode, you know?
Um Check that out. And then we'll create foreground elements that sort of frame it in. I just wish that would blur, you know? It would look so much better blurred. Bush cluster. And then if I go to my parallax layer -3 and zero it out it should turn dark. Yeah, there we go. Yeah. Man, that's so cool. Okay. We'll put that on parallax layer -2 here. Just start framing in the foreground. Hopefully it'll work. You always want to figure out visually what you're after and then you want to backtrack and
figure out okay, how do I do this fast? With shaders and with systems. Right? You always want to think about ways to get that look and feel to occur quickly. Okay. I'm just trying to get a feel for it, guys. I'm not going to keep this. Yeah, those need to be shrunk. Shrunken. All of these. Set to 1111. Here we go.
See how big they are in Yeah, that's good. Okay.
[whistles]
And they could probably be right here. Honestly. Yeah. Just sort of wrapping the scene. Let's see how that looks. I I do not envy Team Cherry at all. This is nuts. I hate this. This is a wild process.
Can you imagine set dressing an entire scene? I mean, my goodness. No. Let me take this, paste it again.
And then we're going to take all these bush clusters and scale them up a little bit. Then we'll zero out their position. We're not going to do global, we're going to do local. No. Center. There we go. Position it like this, rotate it. And then zero out of Z. There we go. Okay. Now
[sighs]
Now I really want that background to blur. But let's do the uh background overlay here. Right? Um we're going to keep it as is. Cuz we don't need it to blur. Okay, good.
Just like that. And then we also need um it to be I believe behind the player. There we go. And we're just going to do a single color for now. Set this to white. Saturate it. See what happens here.
Set it to -1. Okay, so we've got our background overlay. Right?
[snorts]
But now we also need the background glow. Which is going to be the white circle. Set it to 3 by 3. We need to make sure that white circle isn't cutting off at the top there. Good. Okay. Set it to white. We're still getting a little bit of a cut. Uh we'll do 2,000 by 2,000. There we go. Hit apply. There we go. It's still cutting off and I don't know why. Let's see.
There's our white glow. Apply. Should load Oh, shoot. That really sucks. You got to be careful, dude. We are in a bug. Revert. Crap.
[sighs]
I'm not even going to react to it. Not even going to react. Just going to pretend that didn't even happen.
What the F happened to everything? Where did all the sprites go? I'm going to re-import it. Going to get hub and see what's going on. I think I can potentially resolve this by discarding some stuff on GitHub. Mhm. Okay.
Discard the metadata. Let it re-import. Okay. There we go. Okay. So, we're close. We just have to reassign everything. Um which is fine. So, we're going to go inside of each one. So, rule there, guys, is to be very careful when you have Sprite Editor open and you make it save saving if you you're saving stuff to a PSB. You got to be really, really careful. All right. Big chunk. Dragon big chunk. Okay. And we're going to use that big chunk in a minute.
Man, this is so frustrating. Ah, yes. 500. Okay, so we got an issue here. I believe that's correct. Okay, that's correct. Thank God. Okay, we're good. We're good. Oh, man, you got to be so careful with that kind of stuff. Um bush shadowed. That's wild.
Good. There's our character. All right, guys. We're going to finish this up tomorrow. I got to run. Daddy duty. Be sure to download that game kit below, okay? That game kit's going to help you create a platformer. Okay? I'm going to resolve these issues. I'll see you guys tomorrow. Hopefully integrating some animation.
Auto-generated captions from YouTube — names and numbers may be misheard.
Thomas Brush · 2026
Thomas Brush · 2026
Comments