All language subtitles for 6.3 Basic damage states and effects

Hey, what's up, guys Nelson here.

Today we're going to be creating damage states

for objects and transforming this pristine

looking kei truck to a pile of scrap.

Let's get started.

You often find these effects on destructible objects

in shootem up pixel games

and you can break down objects

with your weapon of choice

In Metal Slug, you can shoot objects until they break

and get destroyed

like wooden boxes or cars or parts of buildings.

You'll know it can be destroyed if it flashes white

indicating its being damaged.

Usually objects will have a couple of states of damage to show its progress.

Healthy, scratched up

Subtitled by
-♪ online-courses.club ♪-
We compress knowledge for you!
https://t.me/joinchat/ailxpXoW3JVjYzQ1

really damaged, and completely destroyed

in RPGs like MapleStory the monsters usually have

an idle animation and another state when they're hit or being hurt

and another animation when they've been eliminated.

You can add as many states in between.

Today we're going to do just the 4 that I listed. After that,

After that, we'll add some animations

and effects to help transition between those states.

For this exercise you can try this on any kind of object or monster

you think can take a really good beating in a video game

We're going to be using the kei truck

I drew in Chapter 2 and destroying the heck out of it.

I'm sorry truck! You're going to take a little beating today :(

First thing I'm going to do

is draw all the different states of damage.

If this is a shoot-'em-up game,

I'd want bullet holes penetrating the truck

broken glass panels and dents in the frame.

Just some minor damage for now.

and a good reference for all

these would be pictures of war-torn vehicles that have been shot up

car crashes, and destroyed cars

since you can see how all the metal is being warped and damaged.

Just remember that bullet holes and scratches

Produce a shadow and will have their own depth to it.

The bullet will not only make a hole when it impacts

but kind of expanded metal around it as well.

So it'll make like a small highlight.

Okay, maybe this is a bit more than a little damaged.

The truck is going to have a bunch of dents in it

and start to break down a little, and you can see that

I made some of the tire's flat as well.

For the second state of damage

We would want the truck to look really destroyed

looking like literally on the verge of blowing up.

When I went in to transform and rotate the truck off to one side

the pixels start to get a little bit displaced

and that's because Photoshop has a hard time

recognizing where each pixel should go

and we have to manually fix that.

So we're going to destroy the truck even more

and at this point there's parts of the car blown out.

The tires are popped and the truck is tipping to one side.

The metal of the track is really warped and dented

with scratches all over

this whole process doesn't take too much time at all

because I'm just modifying and drawing over the truck I already have

For the final state

we're going to completely destroy the truck.

And literally reduce it to a pile of metal

and only some parts are recognizable as a truck.

So we wanted to have been blowing up

and I put a couple of gradient maps to make it look like

the truck has been burnt to a crisp.

For the gradient map. I chose darker blues and browns and put it on normal at 60%

and another gradient map that's purple and orange on overlay at 100%

And this will start to emulate the look of a burnt crispy truck.

The truck overall looks much darker than the original colors

after it's been blown up.

So we want to add back in some highlights to make it more believable

since they're in the same lighting situation.

A quick and easy way of doing that

is using the magic wand tool and selecting the areas

that are bouncing off light

in this case being the top plane of the truck.

Now that we're finished all the damage states,

we're going to need some transitions

so to transition between states

games like to use a white flash

to indicate an object being damaged

and depending on how powerful the weapon is

It can damage the vehicle slower or faster.

Sometimes skipping damage states

all together from healthy to being completely destroyed

like an impact from a rocket launcher.

So we're going to add a couple

flashes in between and make them all 1 frame long.

Just like how it's being shot by a machine gun.

So for every other frame, I'm going to make it completely white

And a really quick way to do this is the hue saturation slider

and dragging the brightness bar all the way up.

Then you would duplicate the 2 frame cycle you made

however much you like repeating that transition between each state.

By the end, it should look like this.

So now that we have our 4 states of damage on the truck

and we have a transition between each state.

Now this exercise is pretty much done.

I made an animation loop to show the concept of how it looks like

when it's in the game.

But if you're coding it for a game

you'd only want the still image of each state

and have the white flash activate when hit. For those of you

For those of you who are looking for a challenge

and want to make it more believable

We can take it a step further

by adding small animations for each state

with transitional animations in between to carry through.

First we'll do the animations for the regular truck.

Just bouncing up and down on 2s

moving up and down by 1 pixel.

We can easily select the top part of the truck

with the lasso tool and transform it

and we're going to repeat the cycle for 1 second.

Just like the length we had before.

We're also going to add an exhaust pipe

and have some light smoke

come out on a 3 frame Loop.

The key to smoke is to have it

slowly got bigger and fade out

and have it endlessly Loop.

So it looks like it's always coming out of the exhaust pipe.

For the next state we're going to have some darker smoke

come out of the exhaust pipe.

So we're going to duplicate the exhaust cycle

and move it over to the damaged state.

The engine is also starting to break down

because of all the gunshots.

So I want to add some smoke

coming out from behind the cabin area.

We're going to put that video group behind the truck.

So it looks like it's smoking from the back side.

For the smoke it's kinda like drawing really dark clouds

where the lowest part is the darkest

where the source of the damage is coming from.

For the third damage state

we're going to have the back of the truck to start leaking out

oil on a 3 frame loop.

I want to convey the motion of liquid falling down continuously

and have a couple speckles splashing out.

we'll also duplicate the smoke

we made in the previous state

and making it one step darker to show that it's starting to get dangerous

now. We need more smoke.

Subtitled by
-♪ online-courses.club ♪-
We compress knowledge for you!
https://t.me/joinchat/ailxpXoW3JVjYzQ1

For the final and most complex step, we're going to blow up

the truck to transition between damaged and completely destroyed.

Blowing it up will really sell a destroyed truck.

An exploding truck has a couple elements

and we're going to break it down together.

There's the impact when the explosion starts. The burst of light and energy

The burst of light and energy, the mushroom cloud of light and smoke

that follows up the explosion

the debris that flies out, the truck that flies up and drops down

and the wheels that fly off.

First thing we're going to animate

is that truck flying as it blows up

It's going to look kind of weird

since there's no explosion right now.

So just bear with me.

We're going to transform the truck and have it bursting up

and falling back down.

Because the truck is so heavy

ou want the explosion to have some weight to it

I'm going to set it on 4s first and start transforming it bit by bit.

When I rotate with a transform tool

the pixels are going to look really janky and out of place,

so I'll have to manually go back in and fix it.

By the end, it should look something like this

It's best if you play around

with the timing of your own and duration of each frame

to get the desired effect.

My truck starts off faster in the beginning

when it rises up because of the explosion

and slower falling back down.

Next up, we're going to work on the wheel of the truck flying off.

I'm going to copy the wheel over from the previous state of it being unhinged.

First I'm going to color match the wheel to look burnt and crispy

like the rest of the truck.

I want the wheel to bounce up and down

before settling on the ground in the end.

I find that creating the general motion of it first

and doing the in-betweens after is really helpful.

To make the tire bounce a bit more believable

It's going to hit the ground

and the tire is going to stretch out a little bit

since rubber is a stretchy and valuable material.

After that, it's going to bounce up one more time

and finally land on its side.

So you want frames to transition

from being the full wheel to lying on its side.

It's going to look something like this in the end,

but I still think I need to play around with the timing a little bit.

Next up we're going to work on the impact.

We want it to be a really quick burst of white light

with a bit of orange shadow.

It's going to look a little bit cartoonish.

So it's up to you. If you want to add this or another transition effect

with little stars or just a bright white flash.

I'm going to make a ball of light and have its edges reach the sides of the screen.

And I'm going to transform and make it bigger

the next frame before it disappears

when the actual explosion comes in.

Now we're going to work on the explosion.

This is probably the hardest aspect of it

and I recommend looking at references of explosions in slow motion

to understand how it moves.

It starts off as a burst

and fans outwards and upwards

kind of like an inverted cloud

where the light source is in the middle radiating outwards

as the clouds starts to get bigger, the shape changes.

And the colors start to get more saturated and darker

as it fans outwards.

Eventually, all that's left is going to be smoke

as it starts to dissipate.

As a blows up, the explosion is going to hang for a couple more frames

as the smoke expands.

And this will take a lot of practice and understanding to do.

I'm still not that good at it.

But I wanted to show you guys the process of how it's done.

There is also some debris that's flying out of the so it looks like

the truck is really breaking into pieces

later on I put the debris

on a separate video group from the explosion

so I can admit them separately falling onto the ground.

I also add the black smoke

from the previous damage state

to start appearing after the explosion occurs.

Playing back the animation it's looking pretty good

though the explosion could be slowed down

just a bit more. and more frames of the smoke expanding can be added in between.

The last thing we're going to do is add a fire

appearing in front of the truck after the explosion occurs

the fire is going to be on a 3 frame loop on 4s.

The key to making a pixelated fire

is to make it really wispy

and turn it into smaller particles as a rises to the top.

I always like to keep it at the same height

so I can repeat the loop over and over.

I work only in 1 color first

so I can get the shape of the silohette right before adding the other highlights of the fire

After I finish the fire,

I want to add some reflections of the fire onto the truck.

It's going to be flickering just a little bit.

by changing the opacity of the layers.

I just use an orange to add the highlights on the truck

and set the layer to 60% on color dodge to make it look brighter

With that I finished my damaged truck cycle.

I ended up doing a couple more edits with the timing afterwards,

but here's how it looks like now.

I'm really happy with how I turned out

though I still have a lot to learn with effects.

As a little something extra. I made a version with a health bar on top.

To kind of treated like an RPG monster that you're attacking.

So that concludes my knowledge of animating in Photoshop.

And this one in particular was a bit complex to understand

so I'll attach the Photoshop file in the class notes

so you guys can take a look at exactly what I did

and pick apart my file structure.

Timing and motion are some of the hardest things to convey

I'm still learning myself.

So I hope to learn new things in the future too

Making endless Loops full of little Idol objects

and flickering lights is really fun for me

and something I want to put in a video game someday.

I hope you enjoyed watching this chapter as it was one of my favorites to make

So in the next chapter

we're going to make a storefront together from different angles

See you in the next one and take care!