Lisätietoa

Valokuvan lataus

Valokuvat ladataan seuraavalla rakenteella.

PImage kuva;
void setup () {
kuva = loadImage("tiedosto.png");
}
void draw () {
image(kuva,x,y,a,b);
}

 

PImage kuva;

Kuva-muuttujan määrittely. Määrittely tehdään heti ohjelman alussa eli kuva-muuttuja on ns. globaalimuuttuja eli voimassa kaikissa aliohjelmissa.

loadImage(”tiedosto.png”);

Komennolla kuva ladataan tietokoneen muistiin kuva-muuttujalle. Fyysisesti kuvan pitää sijaita samassa kansiossa kuin ohjelma on tallennettu. Ladattava kuva pitää kirjoittaa täydellisenä lainausmerkkien sisään. Tiedostotyyppeinä voit käyttää png-, gif- tai jpg-kuvia.

image(kuva,x,y,a,b);

Komento näyttää muistissa olevan kuvan ikkunassa

kuva

Kuva-muuttuja, jossa ladattu kuva sijaitsee

x

Kuvan vasemman yläreunan vaakasuuntainen koordinaatti

y

Kuvan vasemman yläreunan pystysuuntainen koordinaatti

a

Kuvan leveys a pikseleinä

b

Kuvan korkeus b pikseleinä.




Voit käyttää seuraavia kuvaformaatteja: GIF, JPEG ja PNG.

Esimerkki: avaruusaluksen liikuttelu

Voidaanko kuvaa liikutella nuolinäppäimillä? Kyllä voi. Katsotaan asiaa esimerkin avulla.

// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017
PImage alus1; // Kuva-muuttuja
int a = 0; // Aluksen vaakakoordinaatti
int b = 0; // Aluksen pystykoordinaatti
void setup () {
size(600,600); // Ikkunan koko
frameRate(100); // Ikkunan päivitysnopeus
alus1 = loadImage("alus1.png"); // Sijoitetaan kuva-muuttujalle kuva
}

void draw () {
translate(width/2,height/2); // Origo (0,0) keskelle ikkunaa
background(255); // taustan väri valkea
// Aluksen liikuttelu nuolinäppäimillä
if (keyPressed == true){ // Jos on näppäintä painettu
if (keyCode == RIGHT) { // Jos painetaan nuoli oikealle
if (a < 200) { // Jos oikeaa reunaa ei ole vielä saavutettu
a++; // niin kasvata laskuria eli liiku oikealle
}
}
if (keyCode == LEFT) { // Jos painetaan nuoli vasemalle
if (a > -300) { // Jos vasenta reunaa ei ole vielä saavutettu
a--; // niin pienennä laskuria eli liiku vasemmalle
}
}
if (keyCode == DOWN) { // Jos painetaan nuoli alas
if (b < 200) { // Jos alareunaa ei ole vielä saavutettu
b++; // niin kasvata laskuria eli liiku alas
}
}
if (keyCode == UP) { // Jos painetaan nuoli ylös
if (b > -300) { // Jos yläreunaa ei ole vielä saavutettu
b--; // niin pienennä laskuria eli liiku ylös
}
}
}
image(alus1,a,b,100,100); // Näytetään kuva
}


Ohjelman suoritus näyttää tältä.




Tallenna tarvittavat kuvatiedostot samaan kansioon kuin olet tallentanut ohjelmankin. Ohjelma on pde-loppuinen. Kuvat ovat png-loppuisia. Kuvien piirtelyyn hyvä ohjelma on Inkscape. Jos tarvitset apua piirto-ohjelman käyttöön, niin apua saat e-Opin kirjasta: Bitti2 - Inkscape harjoituskirja.


Esimerkissä tarvittava kuva: Avaruusalus

Copyright: e-Oppi Oy. Kun tallennat valokuvan, paina ensin kuvan alareunassa olevaa lataa-linkkiä. Paina vasta sitten hiiren oikeaa painiketta kuvan päällä ja valitse avautuvasta valikosta "Tallenna kuva nimellä". Tallenna kuva samaan paikkaan kuin olet tallentanut ohjelmakoodinkin.

Esimerkissä tarvittava kuva: Ammus

Copyright: e-Oppi Oy. Kun tallennat valokuvan, paina ensin kuvan alareunassa olevaa lataa-linkkiä. Paina vasta sitten hiiren oikeaa painiketta kuvan päällä ja valitse avautuvasta valikosta "Tallenna kuva nimellä". Tallenna kuva samaan paikkaan kuin olet tallentanut ohjelmakoodinkin.

Esimerkissä tarvittava kuva: Meteoriitti

Copyright: e-Oppi Oy. Kun tallennat valokuvan, paina ensin kuvan alareunassa olevaa lataa-linkkiä. Paina vasta sitten hiiren oikeaa painiketta kuvan päällä ja valitse avautuvasta valikosta "Tallenna kuva nimellä". Tallenna kuva samaan paikkaan kuin olet tallentanut ohjelmakoodinkin.

Näppäinkomennot

Kuinka monella tavalla kuvan liikuttelu voidaan toteuttaa? Kuvaa voidaan liikutella key- tai keyCode- komennoilla.


key-komennot

ASCII-merkkeillä voi ohjata näppäimistöltä kirjoittamalla ehdon muotoon: key == numero tai key ==’merkki’. Esimerkiksi a-kirjain on ASCII-taulukossa numero 97. Pienelle a-kirjaimelle ehdon voi kirjoittaa muotoon joko: key == 97 tai key == ’a’.

ASCII-TAULUKKO
33 ! 52 4 71 G 90 Z 109 m
34 " 53 5 72 H 91 [ 110 n
35 # 54 6 73 I 92 \ 111 o
36 $ 55 7 74 J 93 ] 112 p
37 % 56 8 75 K 94 ^ 113 q
38 & 57 9 76 L 95 _ 114 r
39 ' 58 : 77 M 96 ` 115 s
40 ( 59 ; 78 N 97 a 116 t
41 ) 60 < 79 O 98 b 117 u
42 * 61 = 80 P 99 c 118 v
43 + 62 > 81 Q 100 d 119 w
44 , 63 ? 82 R 101 e 120 x
45 - 64 @ 83 S 102 f 121 y
46 . 65 A 84 T 103 g 122 z
47 / 66 B 85 U 104 h 123 {
48 0 67 C 86 V 105 i 124 |
49 1 68 D 87 W 106 j 125 }
50 2 69 E 88 X 107 k 126 ~
51 3 70 F 89 Y 108 l 127  


Huomaa, että välilyönti on ASCII-merkki numero 32. Tämä voidaan kirjoittaa muotoon: key == 32. Näiden lisäksi seuraaville näppäimille on käytössä komennot.

KomentoProcessingEsimerkkiMerkitys
\b BACKSPACE key == "\b" tai key == BACKSPACE Askelpalautin
\t TAB key == "\t" tai key == TAB Tabulaattori
\n ENTER key == "\n" tai key == ENTER Enter (PC)
\r RETURN key == "\r" tai key == RETURN Return (Mac)
27 ESC key == 27 tai key == ESC Esc, Poistu
127 DELETE key == 127 tai key == DELETE Delete, Poista



keyCode-komennot

Osa näppäimistön painikkeista ohjataan KeyCode-komennoilla. Näitä ovat esimerkiksi nuolinäppäimet. Oheisessa taulukossa on esitetty keyCode-komennot.

KomentoEsimerkkiMerkitys
RIGHT keyCode==RIGHT Nuoli oikealle
LEFT keyCode==LEFT Nuoli vasemmalle
UP keyCode==UP Nuoli ylös
DOWN keyCode==DOWN Nuoli alas
CONTROL keyCode==CONTROL CTRL-painike
ALT keyCode==ALT ALT-painike
SHIFT keyCode==SHIFT Vaihto-painike

Ammukset

Lisätään mukaan ammuksia.

// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017
PImage alus1; // Kuva-muuttuja
PImage ammus1;
PImage ammus2;
int a = 0; // Aluksen vaakakoordinaatti
int b = 0; // Aluksen pystykoordinaatti
int ammus_x1 = 0; // 1. ammuksen vaakakoordinaatti
int ammus_y1 = 0; // 1. ammuksen pystykoordinaatti
int ammus_x2 = 0; // 2. ammuksen vaakakoordinaatti
int ammus_y2 = 0; // 2. ammuksen pystykoordinaatti
int laskuri1 = 0; // Liikuta 1. ammusta laskurilla
int laskuri2 = 0; // Liikuta 2. ammusta laskurilla
boolean tulta1 = false; // Ei vielä ammuttu 1. tykillä
boolean tulta2 = false; // Ei vielä ammuttu 2. tykillä
void setup () {
size(600,600); // ikkunan koko
frameRate(100); // Ikkunan päivitysnopeus
alus1 = loadImage("alus1.png"); // Sijoitetaan kuva-muuttujalle kuva
ammus1 = loadImage("ammus.png");
ammus2 = loadImage("ammus.png");
}
void draw () {
translate(width/2,height/2); // Origo (0,0) keskelle ikkunaa
background(0); // taustan väri musta
// Aluksen liikuttelu
if (keyPressed == true){ // Jos on näppäintä painettu
if (keyCode == RIGHT) { // Jos painetaan nuoli oikealle
if (a < 200) { // Jos oikeaa reunaa ei ole vielä saavutettu
a++; // niin kasvata laskuria eli liiku oikealle
}
}
if (keyCode == LEFT) { // Jos painetaan nuoli vasemalle
if (a > -300) { // Jos vasenta reunaa ei ole vielä saavutettu
a--; // niin pienennä laskuria eli liiku vasemmalle
}
}
if (keyCode == DOWN) { // Jos painetaan nuoli alas
if (b < 200) { // Jos alareunaa ei ole vielä saavutettu
b++; // niin kasvata laskuria eli liiku alas
}
}
if (keyCode == UP) { // Jos painetaan nuoli ylös
if (b > -300) { // Jos yläreunaa ei ole vielä saavutettu
b--; // niin pienennä laskuria eli liiku ylös
}
}
if (keyCode == CONTROL) { // Jos painetaan CTRL-painike
tulta1 = true; // 1. tykin ammus liikkeelle
laskuri1 = 0; // Aseta laskurille alkuarvo
ammus_x1 = a+15; // Aseta 1. ammuksen vaakakoordinaatti
ammus_y1 = b+20; // Aseta 1. ammuksen pystykoordinaatti
}
if (key == 32) { // Jos painetaan Välilyönti-painike
tulta2 = true; // 2. tykin ammus liikkeelle
laskuri2 = 0; // Aseta laskurille alkuarvo
ammus_x2 = a+66; // Aseta 2. ammuksen vaakakoordinaatti
ammus_y2 = b+20; // Aseta 2. ammuksen pystykoordinaatti
}
}
if (tulta1 == true) { // Jos 1. tykillä ammuttu
laskuri1--; // niin kasvata laskuria
image(ammus1,ammus_x1,ammus_y1+laskuri1,20,20); // Näytä 1. ammus
}
if (tulta2 == true) { // Jos 2. tykillä ammuttu
laskuri2--; // niin kasvata laskuria
image(ammus2,ammus_x2,ammus_y2+laskuri2,20,20); // Näytä 2. ammus
}
if (laskuri1 < -300) { // 1. ammuksen kantama saavutettu
tulta1 = false; // Tuhoa 1. ammus
}
if (laskuri2 < -300) { // 2. ammuksen kantama saavutettu
tulta2 = false; // Tuhoa 2. ammus
}
image(alus1,a,b,100,100); // Näytetään aluksen kuva
}


Seuraavaksi olisi meteoriittien lisääminen. Jolloin saisimme rakennettua kokonaisen pelin. Sen voit tehdä itse. Apua saat aikaisemmista peliesimerkeistä. Katso edellisen kappaleen lisämateriaalien esimerkki.