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
// 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
Esimerkissä tarvittava kuva: Ammus
Esimerkissä tarvittava kuva: Meteoriitti
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’.
| 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.
| Komento | Processing | Esimerkki | Merkitys |
|---|---|---|---|
| \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.
| Komento | Esimerkki | Merkitys |
|---|---|---|
| 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.






