Ikkunatapahtumien käsittely

Pelin olessa käynnissä pelaaja haluaa vaikuttaa pelin toimintaan. Tämän voi toteuttaa ikkunatapahtumilla. Ikkunatapahtumat ovat erilaisia tilanteita, joita ikkunaille voi tapahtua. Yleisiä ikkunatapahtumia ovat mm. ikkunan avautuminen ja sulkeutuminen tai näppäimen painaminen ikkunan olessa aktiivinen. Jotta ikkuna tietää mitä sen kuuluu tehdä, kun sille tapahtuu jotain, pitää sille kertoa se ohjelman koodissa. Pygletissä ikkunatapahtumia lisätään kutakuinkin näin:

@ikkuna.event          
def ikkunatapahtuma():
	# Tästä alkaa sinun koodisi (muista rivin sisennys)

@ikkuna.event kertoo, että kyseessä on ikkunatapahtuma.
def ikkunatapahtuma(): kertoo, mikä tapahtuma on kyseessä
Sen jälkeen tuleva sisennetty koodi kertoo mitä tapahtuman tapahtuessa tulee tehdä.

Huom! ikkuna voi olla sinulla toisen niminen. Sen sijaan pygletissä ikkunatapahtumat ovat ennalta nimettyjä.

Jo tuttu ikkunatapahtuma on_draw()

Olemme jo hyödyntäneet yhtä ikkunatapahtumista, nimittäin on_draw:ta, jolla saadaan piirrettyä näytölle asioita. on_draw:ta kutsuessa on hyvä tyhjentää ikkuna aina ennen uusien asioiden piirtämistä kahdesta syystä.

Ikkunassa saattaa olla ennen ensimmäistä piirtokertaa jotain ikkunan käsittelystä johtuvaa sotkua.
Lisäksi tulevaisuudessa jos haluamme, että ikkunassa olevat asiat muuttuvat, kannattaa aina tyhjentää kaikki vanha ikkunasta ennen kuin piirtää siihen uudet asiat.

Laita komento ikkuna.clear() ensimmäiseksi ikkunatapahtumaan:

@ikkuna.event
def on_draw():
	ikkuna.clear()
	# Tästä alkavat muut piirrettävät asiat (muista rivin sisennys)

Jatketaan edellisen osan ohjelmaa

Viime kerralla teimme ikkunnan, johon piirrettiin ympyrä. Voimme jatkaa ohjelmaa lisäämällä ikkunalle ikkunatapahtumia.

Väriä vaihtava ympyrä

Lisää koodiin ikkunan luomisen jälkeen ja ennen pyglet.app.run:ia ikkunatapahtuma on_key_press. Tämä on englantia ja tarkoittaa näppäintä painaessa, ja se käsittelee ikkunan näppäinten painallukset. Lisää seuraavat rivit koodiisi:

@ikkuna.event
def on_key_press(merkki, muuntaja):
	# Tästä alkaa sinun koodisi (muista rivin sisennys)

on_key_press:stä on hyvä huomata, että se ottaa vastaan parametrejä: suluissa olevat merkki ja muuntaja. Parametrit kertovat lisätietoja painetusta näppäimestä. Tässä osassa emme kuitenkaan pureudu parametreihin sen kummemmin. Saatat kuitenkin itse jo keksiä miten saamme parametreistä selville painetun napin.

Tämän tapahtuman sisällä voimme vaikuttaa ympyrään, kuten vaihtaa ympyrän väriä. Ympyrän värin saa vaihdettua punaiseksi seuraavasti:

ympyrä.color = 255, 0, 0

Voimme lisätä koodin ikkunatapahtumaan:

@ikkuna.event
def on_key_press(merkki, muuntaja):
	ympyrä.color = 255, 0, 0

Nyt käynnistäessä pelin voimme huomata, että mitä tahansa näppäintä painamalla ympyrän väri vaihtuu!

Nyt kuitenkin ympyrän väri jää punaiseksi, mikä on vähän tylsää.

Lisätään vielä toinen ikkunatapahtuma, jolla painamisen loppuessa väri vaihtuu takaisin valkoiseksi. Koodi näyttää kutakuinkin samalta kuin aikaisemmin, mutta tällä kertaa määritämme tapahtuman on_key_release:

@ikkuna.event
def on_key_release(merkki, muuntaja):
	ympyrä.color = 255, 255, 255

on_key_release on englantia ja tarkoittaa näppäimen painamisen loppuessa.

Tämän lisätessämme ohjelmaan voimme pelin aikana tehdä pallosta punaisen painamalla näppäintä pohjassa. Lopettaessa painamisen pallon väri vaihtuu takaisin alkuperäiseen valkoiseen väriin.

Ohjelma tähän mennessä

Tähän mennessä ohjelman pitäisi siis näyttää kokonaisuudessaan tältä:

import pyglet

ikkuna.pyglet.window.Window(width = 800, height = 600)
ympyrä = pyglet.shapes.Circle(x = 400, y = 300, radius = 100)

@ikkuna.event
def on_draw():
	ikkuna.clear()
	ympyrä.draw()

@ikkuna.event
def on_key_press(merkki, muuntaja):
	ympyrä.color = 255, 0, 0

@ikkuna.event
def on_key_release(merkki, muuntaja):
	ympyrä.color = 255, 255, 255

pyglet.app.run()

Tehtävät

a) Luo uusi python-ohjelma, jolla on ikkuna (leveys 800, korkeus 600) ja joka avautuu mustana.

b) Lisää ikkunaan ympyrä.

Jatka edellisen tehtävän ohjelmaa.

a) Lisää ikkunatapahtuma, joka tarkistaa painetaanko jotain nappia.

b) Muokkaa koodia niin, että napinpainallus muuttaa ympyrän värin punaiseksi.

Jatka edellisen tehtävän ohjelmaa.

a) Lisää ikkunatapahtuma, joka tarkistaa loppuuko jonkin napin painaminen.

b) Ohjelmoi napin väri muuttumaan valkoiseksi, kun napin painaminen loppuu.

Jatka edellisen tehtävän ohjelmaa.

Tällä hetkellä koodissa muutetaan ympyrä punaiseksi komennolla ympyrä.color = 255, 0, 0.

a) Muokkaa koodia niin, että nappia painaessa tapahtuukin komento ympyrä.color = 0, 255, 0. Mitä tapahtui?

b) Muokkaa koodia niin, että ympyrän väriksi tulee 0, 0, 255. Minkä värinen ympyrä nyt on?

(Haastavampi tehtävä)

Olet ehkä oppinut, että päävärit ovat punainen, sininen ja keltainen, ja että muut värit saa näitä värejä sekoittamalla. Lisäksi mitä useampaa väriä sekoittaa, sitä tummempia niistä tulee.

klassinen väriympyrä

Tietokoneella kuitenkin päävärit ovat punainen, vihreä ja sininen, ja kaikki muut värit saa näitä värejä sekoittamalla. Tietokoneen näyttö koostuu pienen pienistä valoista nimeltä pikseli. Tietokoneen näytöllä näkyvät värit ovatkin erilaisia yhdistelmiä punaista, sinistä ja vihreää valoa. Mitä enemmän värejä sekoittaa, sitä vaaleammaksi väri tulee. Siksi tietokoneen värejä kutsutaan valoväreiksi.

valoväriympyrä

a) Ympyrälle annetaan sen väri muodossa numero, numero, numero. Selvitä mikä numeroista kertoo punaisen valon, mikä vihreän valon ja mikä sinisen valon määrän.

b) 255, 0, 0 on kirkkain mahdollinen punainen. 255 on isoin määrä paljonko jonkin väristä valoa voi olla. 0 taas taas tarkoittaa, että tietynväristä valoa ei ole ollenkaan. Selvitä millaisella komennolla voidaan tehdä ympyrästä kirkkaanpunaisen sijaan tummanpunainen.

c) Muokkaa koodia niin, että ympyrä ei muutu nappia painamalla punaiseksi vaan keltaiseksi.

d) Muokkaa koodia niin, että ympyrä on aluksi punainen ja palaa napin painamisen loputtua punaiseksi.