- How do you make a game look good? That's of course a huge question. But in this video, we'll
attempt to answer it. And I'm not talking about how you create hyper realistic assets. In fact, the point of this
video is to show you that you don't need super high
quality triple A assets or an entire art team to
create good looking games. I mean, realism is cool, but is it really the right
choice for your game? A more stylized look can be just as good or even better for many games. So to get a better grasp of what makes a scene pleasing to the eye, we'll have a look at three things that hugely influenced the
aesthetic of your game. Composition, lighting, and colour. And while doing that, we'll
use some simple tricks to fix up the scene and
make it look a lot better. And while this scene is built for 2D, A lot of the stuff we're
going to be talking about applies to 3D as well. First of all, let's have a
quick look at lighting 3D scene specifically later in the video. But first, this video
is sponsored by Core. Core is the new free
game creation platform that lets you create,
share and play games. With Core, it's extremely
easy to make beautiful games with no prior game development experience. No coding is required and
you can either build games from scratch or remix
and reimagine content shared by other creators with
all the easy to use tools. Core gives you access to thousands of free high quality
music, sound and art assets which is both awesome for
prototyping, game jams, or quickly building solid
and good looking games. Core and Global Game Jam, will be hosting the Global
Game Jam x Core Game Jam on September 16 to October 7th. Everything is completely free. So I definitely encourage you to check out their upcoming events and visit coregames.com by
simply clicking the link in the description. So first off, let's
talk about composition. Meaning the placement and arrangement of elements in the scene. This is a very important
part of your scene, and I would argue the most important. Because even a beautiful
piece can fall apart if presented poorly. We use composition to guide the viewer to what's most important
and to balance the scene. Hopefully creating a
pleasing image to look at. In a game, this can be used to direct the players behaviour as well. As we can use composition
to draw attention to an important puzzle element, or a toy that will lead
us to the next stage. Of course, because of the
dynamic nature of video games, you can always control where the player is looking at all times. This is especially true
for first person games. But when used for specific purposes, like important narrative moments, it can be really effective at directing the players attention, while also creating a beautiful scene. So let's try it out. So I've created this small puzzle game just using basic shapes, and it's looking pretty bad. Besides that, it's not immediately
apparent what's going on. Why is the player? And what is the goal of the level? This particular level is pretty easy. The goal is to collect all coins and get to the other side of the level. Very simple. Most players would probably
figure this out pretty quickly. But in more complex puzzles, players might get confused because there's no focal
element in the scene. Now the first thing that I
noticed could be improved here is the camera placement. For now the puzzle is
centred on the screen. Everywhere the player has to go is roughly in the middle, so that's fine. But there's a lot of wasted
space and at the same time, everything feels kind of
zoomed in making it hard to figure out what to focus on. So let's simply give the
scene some breathing room. That's a lot better. Even though we just moved
the camera up a bit, it feels like we zoomed out, and we have a better
overview of the level. Plus now that we can see the ceiling, it's more clear that we
should move horizontally as we don't have to be concerned with what's above the player. But to be honest, my is
still having a hard time figuring out what to focus on. So at this point, it's a
good idea to ask ourselves which part of the scene is most important and should be the thing
the player sees first. In this case, I would probably
say the player character. So let's try making that a focal element. Now there's a few ways of making
something a focal element. Some direct influences of
focus are high contrast, saturation, size and movement. This of course only works if one of few elements have these. At the moment, there is a
lot of contrast in the scene, but it applies to everything. So nothing really stands out. Let's fix that. I will go ahead and make the environment, the coins and the bug stack, to tone down the overall
contrast of the scene. And just like that, it looks a lot better and your eye is immediately
drawn towards the player. And make him a bit bigger to emphasise the effect even more, great. Now, the key to solving the
puzzle is the box in the middle. But right now it kind of fits in with the rest of the environment. Of course, we could
just change its colour, but I like the aesthetic with few colours. Plus, giving it a separate
colour would probably make the solution too easy. Instead, we will use a so called
indirect focus influencer. In other words, we can
change the environment to make the bug stand out. Here, we could use guidelines to do this. Lines in the geometry of the scene that point in the direction of the thing we want to focus on. And after moving the camera, we got a lot of room at
the top of the scene. So that's probably a good place to start. I'll fill up the empty space with some slanted ceiling pieces that point to what the box. And right away, that's a lot better. We've created a nice frame
around the playing area while also drawing attention to the box. And we can emphasise this even more. Let's try adding some
lighting to the scene. I find that when working with lighting, it helps if I think of it
like I'm creating a narrative. In this case, we could
imagine that we just wandered into this
cave, and now some light is spilling in from the entrance. So I'll add light that shines some light from the entrance onto the box. But the scene still
feels a bit unbalanced. There's a lot going on the left side with the contrast and lighting. So I'll add a dim light on the right to balance things out a bit. This also guides the player
towards the exit of the level. And this is definitely a key takeaway. Players always go towards the light. Of course, right now the
coins are looking a bit off. At first glance, you
might not even realise that there are coins you can pick up. So let's fix that. As I mentioned earlier, movement has a huge influence on focus, especially when everything else
is static like in the scene. So I've gone ahead and
made this little script that makes the coins float up and down. And just like that, they clearly stand out as something you can interact with. Cool, the see now makes a lot more sense and actually feels a lot better to play even though we didn't
touch the gameplay at all. And I think the scene
looks a lot better as well. If you're going for a
gloomy grey scale look, you could just stop here. But I like colours. So let's add some. And choosing great colours, it's actually a lot harder
than you might think. A slight change in saturation or hue can make or break a colour combination. And there's tonnes of theory
about colour harmonies and how they influence
the look of the image. So if you're having a hard time
choosing colours that match, I really recommend to check out a tool like Adobe Colour which is free. This is a very cool web app that lets you create colour palettes based on a handful of
colour harmony rules. Just pick a base colour and see how the different
rules interact with it and where the resulting colours are placed on the colour wheel. Here are some of the
results that you can get with some of the basic ones. The first one, another case, picks colours in close proximity to your base colour. Using this colour harmony
ensures a common palette that is easy on the eyes. I've tried a few combinations using this, but I don't really think it fit. Next up is monochromatic. This works quite well for a
minimalistic game like mine. This also creates a calm image, which means that when using this, other factors such as shape and movement becomes much more important
in order to balance the image. As you can see, this works pretty well, but I want more colours, which leads us to the next one, triad. Here you get three colours that are equally distance on the wheel. This creates a strong and colourful image. It can be a bit hard to
control but when it works, it really works. Complimentary is the most commonly used because it works so well. As the name suggests, the
colours complement each other because they are on opposite
sides of the colour wheel more simultaneously bringing a lot of contrast to the image. However, using the two colours equally, often creates an unpleasant
image with too much contrast. So choose one and use the other sparingly. The rest of the options
are pretty self explanatory or just variations on
what we just talked about. But of course recommend
to try out all of them. And don't forget that the colours you get are just guidelines. You don't have to use all of them, you can change them or
remove them, it's up to you. Also a subtle feature
that I actually use a lot is to rearrange the colour boxes to see how two colours interact when they're next to each other. And a really cool thing is
that you can actually upload a picture and Adobe Colour is then going to extract
colours from the image. Just throw the image
into the app (murmurs), a five colour palette at your disposal. In fact, sometimes so just try with a bunch of cool images to see if I get something interesting. And I actually really liked
the combination of this one. So let's use these colours in the scene. I use most of the colours as they are but I think the orange
is a bit too saturated. So I'll try for something
less vibrant, say around here. Awesome. And as expected, they look
really great in the scene. Now at this point, the
scene looks pretty great, but I'll just add a few more
things to really make it pop. First I'll add a vignette
post processing effect to darken the edges of the screen. This is subtle enough that
most people won't notice but it really helps tie
everything together. Of course if you want to learn more about post-processing
which can be a huge step in making a game look good, we've created an entire video, on all the effects in the
new post-processing stack. As always, link for
that in the description. Also add some lights to the
coins to make them glow a bit. Again, really subtle but very effective. And I think the character movement is looking a bit stiff
compared to the floaty coins. So I'll add some animation to him as well. I've made a little script
that makes the player body lean towards the direction of movement. It's very simple, but it really helps the character feel more alive. Also add a simple jumping animation. And just like that, our
character looks much better and somehow feels smoother to control even though we didn't
change the movement at all. And with that, our scene is done. And I think it looks amazing. Let's compared to what we started with. Oh, I think the results
speak for themselves. So what did we do? First we move the camera and
change the environment colour, then we added slanted roof pieces to draw attention to the box, then we added lighting
and movement to the coins, then we added colour. And last but not least, we
made some finishing touches. Now while most of these
principles can be applied to 3D as well, there are
certain lighting techniques that are specific to 3D. Let's see if we can spice up
this scene using some of those. By the way, the temple is from the Cartoon Temple Building Kit, which is free on the Asset Store. The temple looks nice, but the lighting is very
boring and contrasty. So let's fix that. First off, I don't really like the way the shadows look in the scene. The light is coming directly at the temple and so most of the shadows are hidden. So I'll change the
direction of the sunlight so that more of the shadows
are visible to the camera. In general, if we want
to add drama to a scene, show more shadows. Now the parts that are
in the sun look great, but everything in the shadow just kind of fades into the background. A great trick to counteract
this is to use a rim or backlight coming from
the opposite direction of our main light source. In our case, the sun. So I'll add another light with a more blue or purple tint to make our environment pop against the background. I'll also add a bit of ambient light, light coming from all directions to smooth out the dark parts even more. So now that our base lighting is in place, we can start public our scene with lights that are
actually in the environment. For example, the blue symbol in the middle looks like it should be glowing. But its surroundings aren't
getting any light at the moment. So let's add some. That looks a lot better. But now the image feels a bit unbalanced because there's a lot
going on on the left side, and the right side is
just kind of in shadow. So let's spice up the right
side with another light. I'm just going to add a torch here. In general, it works really well to add physical light emitters to your
scene like lamps or torches, and besides lighting up the area, we've also added a bit of contrast by using two complementary
colours, orange and blue. This makes the scene look a
bit more dramatic and cold. And at this point, I would again stop to think about the narrative. I imagine this temple being kind of deep inside of a jungle, which
means that some green light should be spilling through the leaves and casting a green hue onto the temple. So let's fake that effect by
adding a touch of green light. You hardly notice it but it really brings out that jungle vibe. And that's it. We've created a beautifully lit scene that really draws the player in and makes environment
seemed more dramatic. And that's pretty much it for this video. If you enjoyed it, make sure to subscribe and ring that notification bell so you don't miss the next one. From here, I encourage you to try out some of these techniques in your own games and see how they fit. If you want to learn
more about composition, colours and lighting in 3D, I really recommend to check
out Andrew Price's videos on those topics. They'll of course be a link
to them in the description. Also, don't forget to check out Core, it's completely free,
just visit coregames.com or click the link in the description. On that, thanks for watching and I will see you in the next video. - [Announcer] Thanks for the
awesome Patreon supporters who donated in July and
especially thanks to Dante Sam Lost to Violence, Loved Forever, Niftylius, Scott McKee, Faisal Marafie, Replica Studios, Leo Lesetre,
Nubby Ninja, JAson Uritescu, Piano Sathornlak, Bobby
Reynolds, Donatien Gascoin, Marc-Antoine Gerard, Jacob
Sanford, Michail Korobopv, Naoki Iwasaki, Gregory
Pierce, Owen Cooper, TheMightyZeus, Alison the Fierce, Erasmus, I Love Brackeys, SiriusWolf,
Fred Mastro, Hassan Sher, Storm Daniels and Dennis Solomon. You guys rock.
