滑らかなカメラ

CoddyのPygameジャーニー「サウンドとゲームの手応え」セクションの一部。レッスン 17/23。

この道路ゲームでは、カメラはプレイヤーに固定されています。プレイヤーが何をしても画面の中央にとどまり、世界のほうがその下を滑るように動きます。動作はしますが、動き出すたび、止まるたびに画面全体がガクッと揺れます。

円と同じイージングでカメラを追従させましょう。目標位置は、プレイヤーが画面中央に来る位置です。

camera_x += (player.centerx - 240 - camera_x) * 0.1
camera_x = max(0, min(camera_x, WORLD_WIDTH - 480))

プレイヤーはこれまでどおり動き、滑らかに動くのは画面だけです。プレイヤーが走り始めると、カメラは少し遅れて追いかけるため、プレイヤーは中央より前に進みます。プレイヤーが止まると、カメラは追いつくように滑らかに動き、再びプレイヤーが中央に来る位置で落ち着きます。2行目は引き続き、カメラが世界の範囲内に収まるようにします。

世界はこれまでどおり -int(camera_x) の位置に描画します。camera_x は小数になりました。int() によって描画位置は整数ピクセルに保たれ、変数には次のフレームのために正確な値が保持されます。

スライドして現れるメニューパネル、減っていく体力バー、増えていくスコア。新しい値へ変化するものなら、どれも同じようにイージングできます。

チャレンジ

中級

カメラが滑らかに追従するようにします。camera_x = player.centerx - 240を、各フレームでcamera_xをplayer.centerx - 240に向かって10分の1だけ移動させる行に置き換えてください。値を制限する行はそのままにしてください。

自分で試してみよう

import pygame

pygame.init()
screen = pygame.display.set_mode((480, 360))
pygame.display.set_caption("Long Road")
clock = pygame.time.Clock()

WORLD_WIDTH = 1440
player = pygame.Rect(220, 240, 40, 40)
camera_x = 0

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

    keys = pygame.key.get_pressed()
    if keys[pygame.K_LEFT]:
        player.x -= 6
    if keys[pygame.K_RIGHT]:
        player.x += 6
    player.left = max(player.left, 0)
    player.right = min(player.right, WORLD_WIDTH)

    camera_x = player.centerx - 240
    camera_x = max(0, min(camera_x, WORLD_WIDTH - 480))

    screen.fill((30, 30, 46))
    pygame.draw.rect(screen, (80, 80, 100), (0, 280, 480, 80))
    for post_x in range(0, WORLD_WIDTH, 120):
        pygame.draw.rect(screen, (80, 160, 255), (post_x - int(camera_x), 220, 20, 60))
    pygame.draw.rect(screen, (90, 200, 120), player.move(-int(camera_x), 0))
    pygame.display.flip()
    clock.tick(60)

pygame.quit()