How to move object smoothly

Question

I've been searching for a solution but still can't get it to work. I don't know what's wrong. I want to move my object smoothly just like this:

https://youtu.be/vc1pJ8XdZa0?t=153

but mine is always "teleporting" when moving. Here's part of my code

#Player
playerImg = pygame.image.load('yin.png')
playerX = 0
playerY = 0
playerX_move = playerY_move = 0
playerMoveUnit = 5

def player(x,y):
    screen.blit(playerImg,(x,y))

#Game Loop
running =True
while running:
    screen.blit(background,(-100,-80))

    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
        if event.type == pygame.KEYDOWN:
            if event.key == pygame.K_LEFT:
                playerX_move-=playerMoveUnit
            if event.key == pygame.K_RIGHT:
                playerX_move+=playerMoveUnit
            if event.key == pygame.K_DOWN:
                playerY_move+=playerMoveUnit
            if event.key == pygame.K_UP:
                playerY_move-=playerMoveUnit
        if event.type == pygame.KEYUP:
            if event.key == pygame.K_LEFT:
                playerX_move+=playerMoveUnit
            if event.key == pygame.K_RIGHT:
                playerX_move-=playerMoveUnit
            if event.key == pygame.K_DOWN:
                playerY_move-=playerMoveUnit
            if event.key == pygame.K_UP:
                playerY_move+=playerMoveUnit

    playerX+=playerX_move
    playerY+=playerY_move

    #Check boundary
    if playerX <=-10:
        playerX = -10
    elif playerX >=(length-70):
        playerX = length-70
    if playerY <= -20:
        playerY = -20
    elif playerY >=(width-105):
        playerY = width-105

    player(playerX,playerY)

    pygame.display.update()

Answer 1

just reduce your "playerMoveUnit"

Answer 2

Use pygame.time.Clock() and .tick() to control the flops per second. The framerate argument the .tick() will delay to keep the game running slower than the given ticks per second. For instance:

clock = pygame.time.Clock()
FPS = 60

running =True
while running:
    clock.tick(FPS)

    # [...]

---

Furthermore I recommend to use pygame.key.get_pressed() rather than the keyboard events for the movement of the player. pygame.key.get_pressed() returns a sequence of boolean values representing the state of every key.
Get and evaluate the states of the keys in every frame and move the player accordingly:

clock = pygame.time.Clock()
FPS = 60
running =True
while running:
    clock.tick(FPS)

    screen.blit(background,(-100,-80))

    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    keys = pygame.key.get_pressed()
    if keys[pygame.K_LEFT]:
        playerX -= playerMoveUnit
    if keys[pygame.K_RIGHT]:
        playerX += playerMoveUnit
    if keys[pygame.K_UP]:
        playerY -= playerMoveUnit
    if keys[pygame.K_DOWN]:
        playerY += playerMoveUnit

    #Check boundary
    if playerX <=-10:
        playerX = -10
    elif playerX >=(length-70):
        playerX = length-70
    if playerY <= -20:
        playerY = -20
    elif playerY >=(width-105):
        playerY = width-105

    player(playerX,playerY)

    pygame.display.update()

Answer 3

I notice that you do not have a clock.tick(...) in your code. That is needed to limit the frame rate.

You need to put it into your main while loop.

Somewhere at the top of the code you want to set a constant that controls your framerate. You'll also need a clock to call tick() on People commonly use a frame rate of 60, so you would want something like this near the top of your code:

FPS = 60

clock = pygame.time.Clock()

Then at the end of your while loop you need a clock.tick(FPS). I tend to put it just before the screen update like this:

while running:
    ....
    clock.tick(FPS)
    pygame.display.update()

FPS stands for Frames Per Second. The tick() call remembers the time that you last called it and does not return until an amount of time equal to 1/FPS has passed since the previous call. Putting it after the computation and just before the update() in the while loop ensures the screen updates occur as close as possible to those even 1/FPS time periods. You can find the docs here.

If your game logic per pass does not take very much time, without this limit your game will run very fast (as you discovered). A different issue but just as bad is, if the amount of computing taken each frame varies, then without imposing a constant frame rate the animation would not be smooth since each frame would display for different amounts of time.

Something like this was likely in the tutorial you were working with, but you may have missed it or not realized what it was for and left it out.

Edit:

After you said you had tried this and it still was not working, I looked at it a bit more. There are two other issues I see, though one may be intentional, I am not sure.

You have playerX_move, playerY_move and playerMoveUnit which together appear to be intended to control your speed. It appears that playerMoveUnit is supposed to be the absolute amount and that playerX_move and playerY_move are intended to be that applied to the X and Y directions. That would mean that you would assign playerMoveUnit to either playerX_move or playerY_move depending on the key press, like this:

if event.type == pygame.KEYDOWN:
    if event.key == pygame.K_LEFT:
        playerX_move = playerMoveUnit

However you are using += or -= instead. This means that each pass you will be increasing your speed by playerMoveUnit. That makes playerMoveUnit an acceleration not a speed and will result in your object moving very fast very quickly. This is likely the cause of the teleporting behaviour, it is just moving VERY fast.

The other issue I want to point out is that on the KEYDOWN you start the object moving in the desired direction, and on KEYUP you don't stop it by setting the speed to 0. Instead you start the speed going the other way. That is likely not the behaviour that you want. Your code will cause it to move one way when the key is pressed and then start moving in reverse when it is released and not stop till it hits the edge or another key is pressed. You likely want something like this instead:

if event.type == pygame.KEYUP:
    if event.key == pygame.K_LEFT:
        playerX_move = 0

By the way this would be cleaner if you structured the as a class so you could group all the player related information together.

I just noticed that @JohnnyMopp had a comment on your question that pointed out the += -= thing. Though I had not noticed it, he added that before I edited my answer to include that fix.

Answer 4

You are not using sprites, but single image. You need to load multiple images in order to get smooth movement, in this case for player, if you are following this tutorial, you need 9 images for "left" and 9 for "right" movement. Loading can be done e.g. this way:

go_right = []
go_left = []
for i in range(1,10):
    sprite_r = pg.image.load("R{}.png".format(i))
    sprite_l = pg.image.load("L{}.png".format(i))
    go_right.append(sprite_r)
    go_left.append(sprite_l)

Then, in Player class define methods for left and right: def go_left(self):

    self.left = True
    self.right = False
    self.x -= self.v

def go_right(self):

    self.right = True
    self.left = False
    self.x += self.v

Now, in redraw() or whatever you called it, set FPS to 27 for example(for divisibility reason):

clock.tick(27)
if player.right:
        window.blit(go_right[player.walk_count//3], (player.x, player.y))
        player.walk_count += 1

    elif player.left:
        window.blit(go_left[player.walk_count//3], (player.x, player.y))
        player.walk_count += 1

    else:
        player.stand()
        window.blit(char, (player.x, player.y))

This if's are responsible for displaying appropriate images from the list (loaded at the beginning)

And at the end, in the main_loop you need to handle the events (left and right arrows e.g.):

if keys[pg.K_RIGHT]:
    if player.x < win_width - get_player_width: # or constant number
        player.go_right()

elif keys[pg.K_LEFT]:       
    if player.x > 0:
        player.go_left()

You will probably need to adjust some of the code but I made it following the given tutorial. I hope this will work for you

EDIT:

After additional info from the comments I managed to run your code, as others already suggested putting clock.tick(FPS) in main_loop solves the issue. Do not forget clock = pygame.time.Clock() line before the loop. Additionally, if you want smoother and animated movement apply the code I provided above