Tutoriály Pygame
Pomoc! Jak mám pohnout s tím obrázkem?

Revize 1.2, 20. srpna 2002

Krušné časy zažívá spousta lidí, kteří jsou nováčky v programování a v grafice, když chtějí pohnout s obrázkem na obrazovce. Bez porozumění celkovému konceptu to může být dost neprůhledné. Nejste první člověk, který se zde zastavil, vynasnažím se co možná nejlépe podat věci krok za krokem. Na konci si dokonce zkusíme metody, které zefektivní naši animaci.

Nebudeme učit programovat v Pythonu, jen představíme něco ze základů pygame.

Jen pixely na obrazovce

V pygame je display Plocha (Surface). To je v základě obrázek, který je viditelný na obrazovce. Obrázek je sestaven z pixelů. Hlavním způsobem, jak změnit tyto pixely, je volání funkce blit(). Ta kopíruje pixely z jednoho obrázku na druhý.

To je první na pochopení. Když vykreslíte (blit) něco na obrazovku, jednoduše měníte barvy pixelů na obrazovce. Pixely se nepřidávají ani neposouvají, jen měníme barvu těch pixelů, které jsou na obrazovce. Vykreslené obrázky na obrazovce jsou také v pygame Plochy, ale nejsou žádným způsobem propojeny s Plochou displeje. Když se vykreslují na obrazovce, kopírují se na display, ale vy pořád máte jedinečnou kopii originálu.

S tímto stručným popisem snad již porozumíte, co je potřeba k "posunu" obrázku. Ve skutečnosti s ničím neposunujeme. Jednoduše vykreslíme obrázek v nové pozici. Předtím, než to uděláme, musíme "smazat" ten starý. Jinak bude obrázek vidět na obrazovce na dvou místech. Iluzi pohybu dosahujeme rychlým výmazem obrázku a jeho překreslením na nové místo.

Ve zbytku tohoto tutoriálu rozdělíme tento proces na jednodušší kroky. Dokonce si ozřejmíme nejlepší způsoby jak dosáhnout pohybu několika obrázků po obrazovce. Asi máte již spousty otázek. Jako třeba: jak "vymazat" obrázek předtím, než ho namalujeme v nové pozici? Možná jste stále totálně mimo? Doufejme, že zbytek tohoto tutoriálu vám věci přiblíží více.

Udělejme krok zpátky

Je koncept pixelů a obrázků vám stále trochu cizí? Mám pro vás dobrou zprávu, několik příštích odstavců se budeme zabývat kódem, který bude dělat vše co potřebujeme, jen nebude používat pixely. Vytvoříme malý pythonýrský seznam ze 6 čísel a budeme si představovat, že znázorňují nějakou fantastickou grafiku na obrazovce. Asi bude pro dosti překvapující, jak přesně to bude znázorňovat, co budeme dělat později se skutečnou grafikou.

>>> obrazovka = [1, 1, 2, 2, 2, 1]
>>> print obrazovka
[1, 1, 2, 2, 2, 1]
      

>>> obrazovka[3] = 8
>>> print obrazovka
[1, 1, 2, 8, 2, 1]
 
      

Hýbeme s hrdinou

>>> poziceHrdiny = 3
>>> obrazovka[poziceHrdiny] = 8
>>> print obrazovka
[1, 1, 2, 8, 2, 1]
      

>>> poziceHrdiny = poziceHrdiny - 1
>>> obrazovka[poziceHrdiny] = 8
>>> print obrazovka
[1, 1, 8, 8, 2, 1]
      

Vytváříme mapu

>>> pozadi = [1, 1, 2, 2, 2, 1]
>>> obrazovka = [0]*6                     # nová prázdná obrazovka
>>> for i in range(6):
...    obrazovka[i] = pozadi[i]
>>> print obrazovka
[1, 1, 2, 2, 2, 1]
>>> poziceHrdiny = 3
>>> obrazovka[poziceHrdiny] = 8
>>>> print obrazovka
[1, 1, 2, 8, 2, 1]
 
      

Hýbeme s hrdinou (podruhé)

>>> print obrazovka
[1, 1, 2, 8, 2, 1]
>>> obrazovka[poziceHrdiny] = pozadi[poziceHrdiny]
>>> poziceHrdiny = poziceHrdiny - 1
>>> obrazovka[poziceHrdiny] = 8
>>> print obrazovka
[1, 1, 8, 2, 2, 1]
      

>>> obrazovka[poziceHrdiny] = pozadi[poziceHrdiny]
>>> poziceHrdiny = poziceHrdiny - 1
>>> obrazovka[poziceHrdiny] = 8
>>> print obrazovka
[1, 8, 2, 2, 2, 1]
      

Definice: "blit" (vykreslení)

Přecházíme ze seznamu na obrazovku

>>> pozadi = [teren1, teren1, teren2, teren2, teren2, teren1]
>>> obrazovka = vytvorObrazovku()
>>> for i in range(6):
...    obrazovka.blit(pozadi[i], (i*10, 0)) # aby byly umístěny vedle sebe a nepřekrývaly se
>>> poziceHrdiny = 3
>>> obrazovka.blit(obrazekHrdiny, (poziceHrdiny*10, 0))
      

>>> obrazovka.blit(pozadi[poziceHrdiny], (poziceHrdiny*10, 0))
>>> poziceHrdiny = poziceHrdiny - 1
>>> obrazovka.blit(obrazekHrdiny, (poziceHrdiny*10, 0))
      

Souřadnice obrazovky

Měníme pozadí

Hladký pohyb

obrazovka = vytvorObrazovku()
hrdina = nahrajObrazekHrdiny()
pozadi = nahrajObrazekPozadi()

obrazovka.blit(pozadi, (0, 0))            #vykresli pozadí
pozice = hrdina.get_rect()
obrazovka.blit(hrdina, pozice)            #vykresli hrdinu
pygame.display.update()                   #vše to ukaž

for x in range(100):                      #animace 100 snímků
   obrazovka.blit(pozadi, pozice, pozice) #vymazat
   pozice = pozice.move(2, 0)             #posuň hrdinu
   obrazovka.blit(hrdina, pozice)         #vykresli nového hrdinu
   pygame.display.update()                #vše to ukaž
   pygame.time.delay(100)                 #zastav program na 1/10 sekundy

A co dál?

Tajemné funkce

hrdina = pygame.image.load('hrdina.jpg').convert()
pozadi = pygame.image.load('pozadi.jpg').convert()
      

obrazovka = pygame.display.set_mode((640, 480))
 
      

Ošetřujeme vstup

while 1:
   for udalost in pygame.event.get():
       if udalost.type in (QUIT, KEYDOWN):
           sys.exit()
   posun_a_vykresli_vsechny_objekty()
      

Pohyb více obrázků

class ObjektHry:
   def __init__(self, obrazek, vyska, rychlost):
       self.rychlost = rychlost
       self.obrazek = obrazek
       self.pozice = obrazek.get_rect().move(0, vyska)
   def posun(self):
       self.pozice = self.pozice.move(self.rychlost, 0)
       if self.pozice.right > 640:
           self.pozice.left = 0
      

Spojíme vše dohromady

import pygame, sys
from pygame.locals import *
pygame.init()

class ObjektHry:
   def __init__(self, obrazek, vyska, rychlost):
       self.rychlost = rychlost
       self.obrazek = obrazek
       self.pozice = obrazek.get_rect().move(0, vyska)
   def posun(self):
       self.pozice = self.pozice.move(self.rychlost, 0)
       if self.pozice.right > 640:
           self.pozice.left = 0

obrazovka = pygame.display.set_mode((640, 480))
hrdina = pygame.image.load('hrdina.jpg').convert()
pozadi = pygame.image.load('pozadi.jpg').convert()
obrazovka.blit(pozadi, (0, 0))
objekty = []

for x in range(10):                  
    o = ObjektHry(hrdina, x*40, x)
    objekty.append(o)

while 1:
   for udalost in pygame.event.get():
      if udalost.type in (QUIT, KEYDOWN):
           sys.exit()
   for o in objekty:
       obrazovka.blit(pozadi, o.pozice, o.pozice)
   for o in objekty:
       o.posun()
       obrazovka.blit(o.obrazek, o.pozice)
   pygame.display.update()
   pygame.time.delay(100)
 
      

Dál již po svých

Takže co bude další na vaší cestě k učení? Nejdříve si pohrajte trochu s tímto příkladem. Přepište kód do editoru a zkuste měnit nejrůznější věci. Hrajte si s ním, pouštějte ho a učte se.

Snad budete chtít pracovat na tom, abyste měli více než jeden typ objektu. Abyste nalezli způsob, jak čistě "smazat" objekt, když už ho nebudete vůbec potřebovat. Také změna volání display.update(), abyste mu mohli předávat seznam oblastí na obrazovce, které se změnily.

Jsou i další tutoriály v pygame, které zahrnují tuto tématiku. Takže když jste ready, pokračujte ve čtení. :-)

Nakonec vás pozývám do pygame mailing listu nebo irc s jakoukoliv otázkou k tomuto tématu. Vždycky tam někdo je, kdo vám podá pomocnou ruku.

A nakonec - hodně zábavy, od toho přeci hry jsou!