- 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.