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 Class
Loading...
Из курса от партнера Rice University
An Introduction to Interactive Programming in Python (Part 2)
709 оценки
Из урока
Week 7 - Basic game physics, sprites
Understand the math of acceleration and friction, work with sprites, add sound to your game
Познакомьтесь с преподавателями
Joe WarrenProfessor
Computer Science
Scott RixnerProfessor
Computer Science
John GreinerLecturer
Department of Computer Science
Stephen WongLecturer
Computer Science
[MUSIC]
In this lecture, we're going to talk about sprites.
What's a sprite?
A sprite is a 2D image or
animation that we overlay on top of a game to add visual complexity.
Most realistic gaming systems have a sprite class structure built into them.
If you learn to do that, you've actually made a large stride towards building
visually interesting game.
In this lecture, I'm going to help you understand a sprite class that
we're providing for use in your game.
I'm going to show you how to load an image and actually build a sprite.
And then I'm going to go through and talk a little bit about some very primitive
render methods and update methods for this particular sprite class.
A lot of your tasks in both weeks seven and
eight will be to kind of flush out what I'm going to do here today.
So let's go to work.
Okay, let's talk about sprites and sprite sheets.
So a sprite is a 2D image or
an animation that's usually integrated into a larger scene.
In games, sprites are used to add visual complexity to a game.
Sprites were first developed in the 70s and the 80s,
and they just simply corresponded the 2D images that you could translate around
inside a particular display.
The process of moving around an image inside a display was very computationally
expensive.
And so people came with the idea of thinking, you know what we could do,
we could develop some special purpose graphics hardware that would
just be dedicated to drawing images.
No rotation, just translation.
Just moving the image around on the screen and speed up that process.
And so as a result of that hardware, people said, you know what we should do,
we should make lots of images.
And we can overlay all those images, and we can make games that look interesting.
So notice those early graphics displays couldn't even rotate an image,
it was just only translation.
Sprites have evolved over the last 25, 30 years to a point where now really just
the sprite is the term used to kind of a logical unit of kind of graphics for
organizing inside a game.
Here you can see down here, I've actually drawn a sprite sheet.
So this is a collection of sprites.
So I've got kind of three sprites corresponding to asteroids.
And I've got two sprites corresponding to a ship.
Here's a ship here.
Here's a ship with its thrusters on.
And I've got kind of two little copies of the missile here.
So a sprite sheet is really just a collection of sprites,
it's a collection of 2D images.
It differs from a tiled image in the fact that
we don't have to regularly space the images.
We can kind of lay the images out however we want.
As a result, we want to actually extract those images out.
We're not just going to need to have a size.
We're also going to need to know the center image.
What you're going to see when we start working with sprites here,
we're going to keep track of the center separately from the size.
It's not going to be the fact that the center is kind of half of the size.
For Spaceship and RiceRocks, we're not going to use sprites.
So you're not going to see something like this on the images you load.
We're going to load each of these images individually.
That gives us the ability to kind of add and subtract images without having to go
through and do some editing of the resulting sprite sheet.
Okay, before we move on to kind of work with sprites inside CodeSkulptor,
let's talk a little bit about color and transparency.
So up to now, our model for colors have been very simple.
Whenever we want to specify a color, we specify it as string, we say "White",
or "Black" or "Red".
You put that and maybe draw a polygon or draw a line, and
it made a white line, a black line or a red polygon.
It turns out there's a more flexible model for colors, it's called the RGB model.
And the idea is you think of a color as being a combination of red light,
green light, and blue light, and we kind of model the intensity as numbers.
These numbers are going to be in the range between 0 and 255.
So we can actually build a color string, an HTML color string,
that specifies any color in the RGB model.
And it's something of this form.
It's RGB parentheses red component, green component, blue component.
For example, 255, 0, 0 is equivalent to red.
If you want to learn more about this,
there's a really nice tutorial out here at this particular link.
Now when we're building games like Asteroids and Spaceship and
things like that, we need to be able to model more that say rectangular shapes and
lines and polygons.
We want to be able to model irregular shapes.
So how do you do this?
What primitive are we going to use?
If we just always have rectangular images, it seems like we're always going to have
kind of rectangular things moving around on the screen.
So the trick to do this is to incorporate transparency into our color space.
Here's an example.
So this is a little sprite.
This is kind of a picture of an asteroid.
And you can see it lies inside this rectangular image.
And the question that kind of is interesting to ask is what's the color
of this portion here of the image that's outside of the body of the asteroid?
Well, you might think it's white, I mean, it certainly looks white here.
Let's just do something really quick.
Let's grab this image.
See if I can grab it and move it over here.
And what do I see now?
Well, I still see the body of the asteroid here.
But notice inside this portion of the image outside the asteroid,
I see the text behind the image.
The image is on top.
I mean, the asteroid is clearly obscuring the text underneath.
But this portion of text right here, which is inside the rectangular image,
we don't see it.
We actually see the text.
So why do we see the text, it's because this portion of the image is transparent.
So we can augment this RGB model for
color by adding a fourth number, it's called alpha channel.
And this fourth number says, basically how transparent an object is.
So in this particular image, it's made of a collection of pixels, so
each pixel has an RGB color.
And additionally, it has an alpha value, and
that alpha value says how transparent a particular pixel is.
So inside the asteroid, alpha is 1, it says it's totally opaque.
Outside the asteroid, the alpha value 0,
it says that pixel value is totally transparent.
And you can actually do this inside CodeSkulptor.
There's an option for how to extend HTML color strings to transparency, its RGBA,
red intensity, green intensity, blue intensity, and
this is the alpha value here.
So this is red with half transparency.
So the artists that build the images for Spaceship and
RiceRocks actually built these inside Photoshop.
They drew the shapes, and then they went through and
set the background to be fully transparent.
You can use something like Photoshop, or
there is a free open source editor called GIMP, that is very similar to Photoshop.
There's a simpler one called Paint.NET.
You can use these and go through, for example, and edit the images we built, and
make your own images that again, have kind of a transparent background.
Kind of a popular choice of image format is PNG.
I recommend that, if you're going to go through and make your own images.
Okay, that's enough about transparency.
You don't really need to understand much except to notice we're going to use
transparency a lot in the images we're going to actually incorporate inside
Spaceship and RiceRocks.
Let's go on and work with this asteroid now,
see if we can kind of build a sprite based on this asteroid.
Okay, let's go through now and
work with our sprite class to build an asteroid sprite.
So here I've loaded in the CodeSkulptor a subset of the code that we've provided you
in the Spaceship template.
So before we talk about the sprite class,
I want to talk about an auxiliary class we've built to help organize
the information attached to all the images in Spaceship and RiceRocks.
To build a really good looking game, we're going to have to have lots of sprites, and
that means lots of images.
And to keep track of all that information,
we built a class to encapsulate all the image information relevant to each image.
This image info class contains kind of the center of where we're going to draw our
sprite.
The size of the sprite,
notice that these won't always have to be half of each other.
There's also a radius field that tells us kind of how big
the opaque portion of the sprite is.
Like for example, we want to figure out if the spaceship collides with the asteroid.
We don't want to see if the images overlap,
we want to see if the opaque portions overlap.
So we're going to use circles to do that, and
we're going to talk about how to do circles, circle collision in week eight.
We have two other fields, we're going to be life span, for example, a missile.
It's not going to exist forever, it's going to disappear after awhile.
So the life spans can tell us how long our sprite should exist.
And then we have a flag animated which will help us distinguish if you want to
draw an animated sprite.
We'll talk about that in week eight.
Here, we've kind of set the various fields.
Here we have some methods for accessing piece of the image info class.
So if we scroll down, you can see what we've done,
we've actually set up the information for an asteroid.
And we've gone through and loaded the corresponding image out of Google Storage.
This is for the blue asteroid.
So here do we get to the meat of the matter, this is the sprite class.
Our initializer for a sprite, it takes things like the position,
the velocity, its initial orientation, some angular velocity.
We can also give it an image as well as this image info here, and
then we have the option of giving it a sound.
Right now we're not going to give it any sound.
So we're going to go through here, and
we initialize all the various fields inside our sprite.
And we are going to focus on these two methods here.
There's a method called draw and a method called update.
Draw's going to actually draw the sprite, and update's going to tell
us how to update the sprite every time this is called inside the draw handler.
So here we see, we draw it, update it.
So let's go through and see if we can kind of flesh out the draw and
the update methods.
So our rock sprite actually does something interesting.
So you can see down here kind of the last thing I've done, I've gone through, and
I've actually created this, our rock sprite.
Its initial position is the center of the image, it has no velocity,
it has orientation of 0, its angular velocity is 0.
We've going to say we're going to use the asteroid image, and we have asteroid info.
So let's run this real quick, and what comes out is not very inspiring.
Here's our sprite, it's a red circle.
And we did that is kind of bar to kind of make sure things are running when we get
started.
And it's not surprising that we have a red circle because our draw method for
a sprite says take the radius of the circle that approximates it.
Draw it into position, and this is what we see.
So let's go through kind of a three step process to get this working
a little bit better.
So the first thing is let's go through and
see if we can actually get it to draw the image of the sprite.
So I'm going to comment out our draw circle.
Now let's see if we can put in another operation.
We're going to say draw_image, and what do we need to draw?
Well, we need to draw the image attached to the sprite, so that's self.image.
We need to draw, let's see, take the center of it.
So we're going to say self.image_center.
And then we're going to take self.image_size, and
what do we want to draw then, we want to draw the position of the sprite.
So we'll say self.pos, and we'll say self.image_size again.
And what should be the orientation of the sprite?
Well, we've got it, we've got it, it's self.angle,
so let's crank that up and see what happens.
Look at that, I caught an error before I ran it.
Canvas, all right, there it is.
We've drawn our asteroid sprite.
So let's go through now and modify update to make it do a few interesting things.
So these asteroids are supposed to be tumbling through space.
So let's make that image rotate.
So to do that, I'm going to need to modify the update method.
And I'm going to do is I'm going to change the orientation image,
it's self.angle here.
And we're going to change it using the angular velocity.
So this is pretty easy, I could say self.angle +=
self.angle_velocity, is that the right field again?
Make sure I get it.
Is angle velocity?
Okay, let's go down here to the initializer, and let's see,
the initial orientation is 0, that's fine.
But let's figure out a good value down here for the angular velocity.
So the angles and radians so that's 2pi, so that's 6.28.
So let's make it kind of maybe rotate kind of one revolution a second.
So they drop like 60 calls to draw in a second.
So if we made this 0.1, let this rotate about once a second.
So let's give that a crack and see what happens.
There it is.
Rotating very nicely.
Okay, let's finish off our example here.
Let's make the asteroid move.
So we know how to do that.
We did this from Pong.
We did this a fair bit.
I can say self.pos(0) += self.vel [0].
And I could say, self.pos [1] += self.vel [1].
And then we need to give it a reasonable velocity down here.
That is what this entry is, maybe like 0.3, maybe 0.4,
all right, let's give it a crack, and there it is.
Our asteroid is spinning and now moving along.
So this is a single asteroid, a single rock.
This is what you have to do for Spaceship.
When you get into week eight,
we're going to have to keep a collection of these rocks.
Okay, that should be enough to kind of get you going on working with sprites.
It's worth some time understanding the structure of the class.
You'll have to build some more methods for it.
But again, I think don't be daunted by the size of the code.
Just focus on the step by step description in the mini process,
development process, and I think you'll be able to tame the complexity.
Okay, I'll see you back in a little bit, and
we'll talk about your Spaceship project more.
Ознакомьтесь с нашим каталогом
Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.
Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.
© Coursera Inc., 2018 Все права защищены.
