How to move the image?
Many people who are unfamiliar with programming and graphics have difficulty figuring out how to move images on the screen. If you do not understand all concepts, it may cause confusion.
First of all, we have to realize that only pixels on the screen
Pygame has a display object Surface. This is basically an image visible on the screen, and the image consists of pixels. The main method to change these pixels is to call the blit () function. This will copy pixels from one image to another (this has already been explained in pygame learning two).
This is the first thing to understand. When you copy an image to the screen, you are only changing the color of the pixels on the screen. No pixels are added or moved, we just change the color of pixels that already exist on the screen. These images displayed on the screen are also Surface in pygame, but they are never connected to the display Surface. When they turn white on the screen, they will be copied to the monitor, but we still have the only copy of the original file.
With this brief description. In fact, we don't move anything at all. We just adjusted the image to a new location. But before drawing the image to a new location, we need to "erase" the old image. Otherwise, the image will be visible in two places on the screen. By quickly erasing the image and redrawing the image at a new location, we realized the "illusion" of motion.
We may already have problems here. Like, how do we "erase" the image before drawing it to a new location?
Let's take a step back.
Maybe the concept of pixels and images is still a bit strange to us? Good news, in the following content, we will use the code to do everything we want without using pixels. We will create a small python list of 6 numbers and imagine that it represents some wonderful graphics that we can see on the screen.
So let's start by creating a list of screens and fill it with beautiful scenery of 1s and 2s.
1 >>>screen= [1、2、2、2、1] 2 >>>print(screen) 3 [1、1、2、2、2、1]
Now, we have created the background. We will create a powerful hero represented by the number 8. Let's stick him in the middle of the map and see what it looks like.
1 >>>screen[3] = 8 2 >>>print(screen) 3 [1、1、2、8、2、1]
If you use pygame for some graphics programming, it may have reached its limit. There are some pretty things on the screen, but it cannot be moved anywhere. Maybe now our screen is just a list of numbers, so it ’s easier to see how to move him
Move the hero number 8
before we start moving the character. We need to reserve a place for him. In the previous step, when we drew him, we just chose an arbitrary location.
1 >>> playerpos = 3 2 >>> screen[playerpos] = 8 3 >>> print screen 4 [1, 1, 2, 8, 2, 1]
It is now easy to transfer him to a new position. We simply change the value of playerpos and then draw it on the screen again.
>>> playerpos = playerpos - 1 >>> screen[playerpos] = 8 >>> print screen [1, 1, 8, 8, 2, 1]
Okay, now we can see two heroes. One is in the original position and the other is in the new position. This is why we need to "erase" the old position before attracting the hero to the new position. To erase him, we need to change the value in the list back to the value before the hero appeared. This means that we need to track the values on the screen before the hero replaces them. We can do this in many ways, but the easiest way is usually to keep a separate copy of the initial screen background. This means we need to make some changes to our little game.
To create a map, all
we have to do is create a separate list, which we will call the background. We will create the background so that it looks the same as the original screen, 1 and 2 respectively. Then, we copy each item from the background to the screen.
1 >>> background = [1, 1, 2, 2, 2, 1 ] 2 >>> screen = [0] * 6 # Before creating a new empty screen 3 >>> for i in range (6 ): 4 ... screen [i] = background [i] 5 >>> print screen 6 [1, 1, 2, 2, 2, 1 ] 7 >>> playerpos = 3 8 >>> screen [playerpos] = 8 9 >>> print screen 10 [1, 1, 2, 8, 2, 1]
Make the hero move (2)
This time you can easily move the hero. First, we will delete the old post of the hero. For this, we copy the correct value of the background to the screen. Then we will draw the character in the new position on the screen
1 >>> print screen 2 [1, 1, 2, 8, 2, 1] 3 >>> screen[playerpos] = background[playerpos] 4 >>> playerpos = playerpos - 1 5 >>> screen[playerpos] = 8 6 >>> print screen 7 [1, 1, 8, 2, 2, 1]
Now we see that after moving Hero 8, the original value has not changed. This is the so-called erase effect.
Definition: "blit" In the
next part, we will convert the program from the use list to use the real graphics on the screen. When displaying graphics, the term blit is often used.
BLIT: Basically, blit means copying graphics from one image to another. A more formal definition is to copy the data array to the bitmap array target. You can think of blit as "allocating" pixels. Just like setting the value in the above screen list, bilt will assign the color of the pixels in the image, that is, replace all the above values with pixels.
Other graphics libraries will use the word bitblt or blt, but they are talking about the same thing. It basically copies memory from one place to another. In fact, it is a bit more advanced than copying memory directly, because it needs to deal with things such as pixel format, clipping, and scan line spacing.
Moving from a list to a screen move is
to use the list codes we saw above as examples and make it very simple to use them with pygame. We pretend to have loaded some beautiful graphics and named them "terrain1", "terrain2" and "hero". Before we assign the numbers to the list, now drag the graph to the screen. One difference is that now we need a two-dimensional coordinate instead of using the position as a single index (0 to 5), because there is no way to determine the position by an index on the plane. We assume that each graphic in the game is 10 pixels wide.
1 >>> background = [terrain1, terrain1, terrain2, terrain2, terrain2, terrain1] 2 >>> screen = create_graphics_screen() 3 >>> for i in range(6): 4 ... screen.blit(background[i], (i*10, 0)) 5 >>> playerpos = 3 6 >>> screen.blit(playerimage, (playerpos*10, 0))
1 >>> screen.blit（background [playerpos]，（playerpos * 10，0）） 2 >>> playerpos = playerpos-1 3 >>> screen.blit（playerimage，（playerpos * 10，0））
Through this code, we show how to display a simple background with a hero image. Then, we have moved the hero appropriately to the left by a space. The first thing we have to do is to find a cleaner way to represent the background and player position. Then maybe a smoother, real animation.
Screen coordinates
To place the object on the screen, we need to tell the blit () function where to place the image. In pygame, we always pass the position as (X, Y) coordinates. This represents the number x of pixels from the left, and the number y of pixels placed down the image. The upper left corner of the surface is the coordinates (0, 0). Moving slightly to the right will be (10, 0), then moving right and down will be (10, 10).
Pygame comes with a convenient container to store these coordinates, it is Rect. Rect basically represents a rectangular area in these coordinates. It has an upper left corner (that is, the coordinate value of the upper left corner) and a size (length and width). Rect comes with many convenient methods that can help you move and position them. In the next example, we will use Rect to indicate the position of the object.
You also need to know that many functions in pygame require Rect parameters. All these functions can also accept simple tuples containing 4 elements (left, top, width, height). In addition, the blit () function can accept Rect as its position parameter, it just uses the upper left corner coordinate point of Rect as the actual position.
Changing the background
In all the previous sections, we have always stored the background as a list of different types. This is a good way to create tile-based games, but we want smooth scrolling. To make the operation easier, we changed the background to a single image covering the entire screen. In this way, when we want to "erase" objects (before redrawing them), we only need to color the part of the erased background to the screen.
Also note that in the end, when we finish drawing to the screen, we call pygame.display.update (), which will display everything we draw on the screen.
Smooth motion
To make certain objects appear to move smoothly, we only want to move a few pixels at a time. This is the code to make the object move smoothly on the screen. Based on what we already know, this should look simple.
. 1 >>> Screen = create_screen () 2 >>> Player = load_player_image () . 3 >>> background = load_background_image () . 4 >>> screen.blit (background, (0, 0)) # draw the background 5 >>> = position player.get_rect () . 6 >>> screen.blit (Player, position) # draw players . 7 >>> the pygame.display.update () # show all . 8 >>> for X in Range (100): # animation 100 frames playback 9 ... screen.blit (background, position, position) 10Position.move position = ... (2, 0) # mobile player . 11 ... screen.blit (Player, position) # draw the new player 12 is ... the pygame.display.update () # show all 13 ... pygame.time.delay (100) # the program stops 1/10 seconds
This is all the code needed to smoothly animate objects on the screen. We can even use beautiful background characters.
At the end of the above loop, we also called pygame.time.delay (). This will slow down our program a little bit, otherwise it may run fast and may not be visible to the naked eye.