This two-part course is designed to help students with very little or no computing background learn the basics of building simple interactive applications. Our language of choice, Python, is an easy-to learn, high-level computer language that is used in many of the computational courses offered on Coursera. To make learning Python easy, we have developed a new browser-based programming environment that makes developing interactive applications in Python simple. These applications will involve windows whose contents are graphical and respond to buttons, the keyboard and the mouse. In part 2 of this course, we will introduce more elements of programming (such as list, dictionaries, and loops) and then use these elements to create games such as Blackjack. Part 1 of this class will culminate in building a version of the classic arcade game "Asteroids". Upon completing this course, you will be able to write small, but interesting Python programs. The next course in the specialization will begin to introduce a more principled approach to writing programs and solving computational problems that will allow you to write larger and more complex programs.
Sprite Animation
Loading...
来自 Rice University 的课程
An Introduction to Interactive Programming in Python (Part 2)
650 个评分
从本节课中
Week 8 - Sets and animation
Learn about sets in Python, compute collisions between sprites, animate sprites
与讲师见面
Joe WarrenProfessor
Computer Science
Scott RixnerProfessor
Computer Science
John GreinerLecturer
Department of Computer Science
Stephen WongLecturer
Computer Science
[MUSIC]
Well welcome to the lecture.
At this point you should be moving pretty far into doing your rice rocks
slash asteroids mini project.
In this lecture I'm going to just show you one kind of optional piece that you
can add to your game that will improve the visual quality of it quite substantially.
I'm going to show you how to animation inside simple GUI.
It's really fairly simple, we're just going to provide you with a tiled image,
and you have to actually move the image drawing the various sub images
appropriately.
And it adds actually quite a lot of visual impact inside your game.
So I kind of explain it at a high level and then we go and
we'll look at two example pieces of code that will help you if you decide to
implement animations inside your mini project.
So let's talk about how a computer game actually animates things.
So you've done animation before if you're like most kids.
You had a book, you were bored, you started drawing,
kind of a little small stick figure in the corner on one of the pages.
You drew it on the next page, and the next page, and the next page,
and then you flip through it, and the figure appeared to move.
So, this kind of perception of motion comes from what's called the persistence
of vision.
That if your eye actually sees a sequence of kind of discontinuous images, but
they actually appear in very fast sequence your mind perceives continuous motion.
This is how movies work.
A movie projector projects 24 frames still images a second, but when your eye sees it
and your mind processes it, everything appears to be moving continuously.
So in a video game,
what you're going to have is you're going to have something like this.
We have a tiled image here.
This is actually 64 images of an asteroid, and it's pictures of an asteroid tumbling.
Actually got a lot of them here we can kind of scroll out and
scroll all the way back, and you can see there's lots.
And the way we're going to actually animate this asteroid tumbling is,
we're going to go through and draw this image, then this image, then this image,
then this image all on top of each other, and that's not as hard as you might think.
So for example here we could kind of take this image.
Okay, we need to know its center, and we need to know its size,
that's what the red box is.
And then we want to draw this image, there's its center and its size.
When you want to draw this image center and
its size, and I think you get the hint here.
So the nice thing, all the image sizes for the asteroids are the same.
We can kind of look at the, we basically can look at the image and
actually figure out what the size of each of the said image is.
And we need to note the center, now the center is not too hard.
In this case, this is a horizontally tiled image,
so all the vertical positions are the same.
So what is this distance here, the distance from here to here?
Well it's the same as the distance from here to here,
which is the same as the distance from here to here.
And that's just really the horizontal component of this subimage size.
So we have to do a little bit of math to kind of figure out how
to compute the centers of each of these sub images, and
draw them in quick succession inside the draw handler.
So I'm going to show you two example pieces of code that will do that,
and they'll kind of do two different animations.
So let's go take a look at those.
Okay, let's look at the first example,
where I'm going to make this asteroid tumble.
Let's just run the code to start with, so
you can kind of see an example of what we might be expecting to see.
So here I've actually constructed an animation where we're kind of striding
through the image drawing each of the sub images in a very slow rate.
So we kind of see this, kind of choppy ticking motion.
So you can notice that actually image is a .png so
we see kind of a blue background around our asteroid.
Now how do I actually achieve this effect?
Well, let's go through just briefly glance at the code.
So, the first thing I'm going to point out here is I've actually got some information
attached to the rock.
I'm not using the image info class, I'm going to let you kind of work with that,
be a little bit of me to chew on there.
The critical thing notice is that I've loaded the image in here
I have the center, okay, and I have the size.
Each of the sub images is 128 by 128 pixels, that means the center is at 64,
64, and most importantly there are 64 of these images.
So what I've done is I've wrote a little piece of code here in the draw handler
that actually kind of does an animation,
and it's going to use a global variable time.
Now when you implement animation inside your game, you're going to use
the sprite class, you're going to set the animated flag to be true.
And you're going to have to use the two fields age and lifespan, to kind of
control the animation inside your implementation of the last mini project.
So you're going to have to take this and kind of work with it a little bit, and
kind of integrate it into the sprite class.
So here I have a time, and what I'm doing is in the draw handler I'm updating
the time every time I draw a frame.
So I'm updating the time really slowly here, but
notice I'm drawing about 60 times a second on my computer here.
So what I'm really doing is I just if you think, do this 60 times 0.3 it's about 2.
So really every second I'm kind of drawing about two images of our sprite.
So, how do I actually make this work?
Well, I go through and I take the time and I do some modular arithmetic, modulo 64 so
my number that I'm coming back with is always in the range from zero to 64.
And I do one thing a little kind of tricky here because this number is a fractional
number I don't want to have to actually index by a fraction,
I want to index by a whole number.
So I'm going to do integer division by one and
that takes the whole whole part of the number.
So, this gives me the index inside the tile image, and
now I do my computation of where the center should be.
It's the same thing before, we start at the center of the first sub image.
We add in the index times,
well this is the size of the rock in the horizontal direction.
And notice that the position of the vertical direction stays unchanged.
So when we're done we've actually got the current rock center.
We've got the rock center for the where we want to draw it on screen.
We might as well not draw it at the same place so that it appears it's moving.
So we're kind of ready to go here, so let's just do one thing,
let's go through and actually change the value of time.
So what I'm going to do next is I'm going to change this to where time is 1.
So every time we draw we stride through this animated asteroid image.
So I'm going to go through and make time equal one, and so
let's see what happens and wow!
Our asteroid is tumbling very very fast probably not a very realistic animation.
So this particular tile image has the property that if we kind of draw it at
kind of one draw per frame it's going to animate much too fast.
So we could go back and ask the artist to make us more frames in between so
we get a longer tiled image, or we can basically have it much shorter animation.
Or we could go through and
kind of slow it down by kind of adjusting this time variable.
So what can I do here is like I can maybe change this to 0.2.
So if we go through and
do that what you can see now is it's actually tumbling a little slower.
So at 0.2 every five frames time goes up by one so
every frame we're kind of flipping forward to the next image.
So this is really, if we do five frames,
takes five ticks to do a single frame and there's 60 ticks in a second,
we're kind of doing 12 frames a second in our animation.
And that's actually slow enough,
your eye can actually perceive this kind of jumpiness in there.
If we sped this up a little bit, maybe take it to 0.1,
let me actually 0.4 I think it'll start to look continuous.
Yeah it's going to start looking continuous here but
the problem is our asteroid is tumbling way too fast.
So fundamentally if we're going to try to animate this tumbling asteroid,
we don't have enough enough art here.
We need more frames in our animation to get a really good
realistic looking animation of a tumbling asteroid.
Okay let's look at another example.
So let's look at a second example of doing animation.
So here I have a kind of slightly modified program, it's loading in a second image so
let's just take a quick peek at the image to get started.
So it's a very nice tiled image of an explosion.
This explosion was actually computed by a computer program, so if you go and
watch movies a lot, there's a lot of work on computer animation,
where people use physical simulations to build things that look really cool,
and they can look very realistic too.
So, the way this image is laid out its tiled again, and
notice here that we have to kind of figure out what order to draw the images in.
So we have two possibilities.
We can draw left to right and then top to bottom, or top to bottom and
then left to right.
And I think if you look at the image it's pretty clear we draw left to right,
then top to bottom.
So we have to work out a little piece of arithmetic to kind of figure out as we're
kind of cycling through this image which particular sub image to draw.
The other thing to note here is that this image has a lot of detail,
the jumps between each of the sub images is not too much.
And in fact because this was created by a computer this is actually,
image was created to be drawn at exactly 60 frames a second.
So kind of our clock arithmetic will be a lot easier in there.
So let's go back now and look at the code we have.
So we kind of load the image here, we have its size,
each of the sub images is 100 by 100, their centers are at 50, 50.
The most important thing here is actually have the size of this image, it's 9 by 9.
So there's 9 images horizontally, 9 images vertically.
So here's what I've been saying, the very similar code we have, we have a timer.
The only thing you'll notice here is our timer is always being updated by one.
So we're actually going through every frame, we're kind of striding through and
drawing the next image inside our sub images inside our image.
And that's because this image was created exactly to be drawn
at 60 frames per second.
The only piece of code that's kind of tricky right here, and
this again is using remainders, and modular arithmetic, and integer division,
is to actually go through and compute.
Given the time, kind of what the horizontal index and
what the vertical index is and that's stored in this tuple here in this pair.
And then we have to go through and actually find the center of the image.
So, we're striding through this image very quickly we're going center here,
center here, center here, center here, center here, all the way down,
then jump back to here.
Centers through here, jump back to here, and so forth.
So it's not too complicated.
I think it's something that given what we've done in the class,
you should be able to work out fairly easily.
The reality is all the things we're giving you are actually horizontally tiled
images, so you don't even have to do this math.
I just want to kind of give you a little peak of what you might want to
do if you actually had a kind of 2D tall image you wanted to animate.
So let's just run it.
What you can see here we have a very nice explosion actually.
And notice it kind of has it's kind of the right time here.
So again, this was actually Computed using a physics simulation so
that we would actually see kind of a nice realistic explosion if we animated it
exactly at one frame per second.
So that should give you kind of enough ideas to go out and
add animation to your game if you want.
You don't have to, I don't think it's that hard if you've got some time.
You'll probably allow maybe an hour or two hours to kind of put this in.
One piece of advice if your code is working, before you put in animation
absolutely save it, grab a copy of it so you can always turn it in.
If it turns out that putting in animation doesn't work out very well,
this is kind of always a good piece of advice to programmers.
If you got something working and it kind of satisfy the requirements, set it aside,
grab it, hold on to it.
That way if you kind of put in some extra bells and whistles
you don't get stuck in a situation where you make a bunch of changes and
then you can't recreate something with kind of basic functionality.
All right, so I'll be out on the forums kind of monitoring
questions about this and other topics related to your last mini projects.
So go about, take a crack at it.
I think you'll find that if you put animations in,
especially kind of an animated explosion, it'll make your game look really nice.
