Dokańczamy projekt

No więc tak jak obiecałem dokończymy poprzedni projekt. Do zrobienia został jeszcze tylko ruch przeciwnika oraz wykrywanie kolizji.

Zrobimy to wszystko w jednej funkcji, oczywiście ładniej wyglądałby kod gdybyśmy rozdzielili to na 2 funkcje, ale jako, że jestem leniwy zrobiłem wszystko w jednym. Dodatkowo po wykryciu kolizji z graczem odbijamy przeciwnika i w pionie i w poziomie (to też z lenistwa :P ). Po odbiciu od krawędzi bocznych zmieniamy tylko wartość Y na przeciwną, a po odbiciu od krawędzi dolnej oraz górnej zmieniamy tylko wartość X na przeciwną.

Ok, kod odpowiadający za zarządzanie ruchem przeciwnika oraz obsługę kolizji wygląda następująco:


private void ruchPrzeciwnika() {
boolean kolizjaZGraczem, kolizjaPionowa, kolizjaPozioma; // kolizjaPionowa = kolizja z gorna lub dolna krawedzia ekranu; kolizjaPionowa = kolizja ze sciana

kolizjaZGraczem = this.przeciwnik.collidesWith(gracz, true);

kolizjaPionowa = (this.przeciwnik.getY() < 0 || this.przeciwnik.getY() + this.przeciwnik.getHeight() > this.getHeight());
kolizjaPozioma = (this.przeciwnik.getX() < 0 || this.przeciwnik.getX() + this.przeciwnik.getWidth() > this.getWidth());


if (kolizjaZGraczem || kolizjaPionowa || kolizjaPozioma) { // jesli nastapila jakakolwiek kolizja musimy zmienic kierunek
if (kolizjaZGraczem) { // przy kolizji z graczem dla ulatwienia odbijamy kwadrat w te strone z ktorej przyszedl ^^
switch (kierunek) {
case 3:
kierunek = 7;
break;
case 1:
kierunek = 9;
break;
case 7:
kierunek = 3;
break;
case 9:
kierunek = 1;
break;
default:
kierunek = 7;
}
} else if (kolizjaPionowa) {
switch (kierunek) {
case 3:
kierunek = 9;
break;
case 1:
kierunek = 7;
break;
case 7:
kierunek = 1;
break;
case 9:
kierunek = 3;
break;
default:
kierunek = 7;
}
} else if (kolizjaPozioma) {
switch (kierunek) {
case 3:
kierunek = 1;
break;
case 1:
kierunek = 3;
break;
case 7:
kierunek = 9;
break;
case 9:
kierunek = 7;
break;
default:
kierunek = 7;
}
}
}
if (kierunek == 1) {
eX -= 2;
eY += 2;
} else if (kierunek == 3) {
eX += 2;
eY += 2;
} else if (kierunek == 7) {
eX -= 2;
eY -= 2;
} else if (kierunek == 9) {
eX += 2;
eY -= 2;
}
}


Teraz wystarczy tylko wywołać napisaną właśnie funkcję w funkcji run() naszej klasy clsCanvas (gdzieś przed lm.paint()).

Aha... zapomniałem, do naszej klasy dodałem jeszcze jedną zmienną typu int o nazwie "kierunek" z wartością domyślną "3".

private int kierunek = 3;

Będzie ona odpowiedzialna właśnie za kierunek poruszania się naszego "przeciwnika". Wartość tej zmiennej odpowiada układowi klawiatury numerycznej. Czyli domyślna wartość "3" oznacza, że ruch będzie wykonywany w kierunku prawego dolnego rogu itd.

Jeszcze jedna uwaga, dobrze jest od czasu do czasu używać skrótu klawiszowego ALT + SHIFT + F, aby kod w edytorze był czytelniejszy.

Albo i jeszcze jedna uwaga, kod, który zaprezentowałem nie jest bezbłędny. Zawiera on również kilka ułatwień zmniejszających realistyczność ruchu. A wszystko to z lenistwa. Chodziło tylko o zaprezentowanie kilku podstawowych pojęć dotyczących programowania gier, więc nie musi on być idealny.:P

Czas zacząć coś robić ;D

Dla tych którzy przeczytali (i zrozumieli :D) lekturkę z poprzedniego postu strona ta będzie już raczej zbędna ... ;D Pozostałych zapraszam do czytania.;]

Zajmijmy się wreszcie czymś konkretnym... a mianowicie wyświetlaniem sprite'ów (sprite jest klasą ułatwiającą zarządzanie obiektami graficznymi; pozwala m.in. na animowanie obiektów, sprawdzanie kolizji itd.) oraz poruszaniem nimi.

Ok, napiszmy banalny projekcik. Na ekranie umieścimy 2 kwadraty, jeden będzie poruszany przez gracza, drugi będzie po prostu latał po ekranie i odbijał się od ścian oraz od gracza. Dzięki tej prostej grze będziemy mieli już podstawowe pojęcie o tworzeniu, wyświetlaniu, poruszaniu sprite'ami oraz obsługiwaniu kolizji między nimi.

Zaczynamy od utworzenia standardowego szablonu (który pokazywałem gdzieś we wcześniejszym poście).

Następnie bierzemy się za narysowanie dwóch różnokolorowych grafik kwadratów (małe kwadraty namalowane w pierwszym lepszym edytorze; ja narysowałem 2 kwadraty o wymiarach 32x32 px i nazwałem następująco - "p.png" oraz "e.png"). Nasze graficzki zapisujemy w folderze "/Moje dokumenty/NetBeansProjects/Nazwa utworzonego projektu/src/".

Teraz możemy przejść do edycji pliku clsCanvas.

Na początek potrzebujemy zadeklarować kilka zmiennych.


private Sprite gracz, przeciwnik; // obiekty typu sprite do zarzadzania naszymi "bohaterami" :D:D
private Image graczImg, przeciwnikImg; // obrazki z kwadratami
private LayerManager lm; // do zarządzania rysowanymi na ekranie warstwami
private int pX, pY; // aktualna pozycja gracza
private int eX, eY; // aktualna pozycja przeciwnika


Teraz czas utworzyć wszystkie niezbędne obiekty. Robimy to w konstruktorze klasy clsCanvas (czyli tam gdzie pisze "public clsCanvas(Midlet m)" :P).


graczImg = Image.createImage("/p.png"); // przypisujemy narysowany obrazek do zmiennej
przeciwnikImg = Image.createImage("/e.png"); // to samo co wyzej

gracz = new Sprite(graczImg, graczImg.getWidth(), graczImg.getHeight()); // tworzymy obiekt typu sprite przypisujac mu narysowana graficzke jako pierwszy parametr
przeciwnik = new Sprite(przeciwnikImg, przeciwnikImg.getWidth(), przeciwnikImg.getHeight()); // drugi oraz trzeci parametr to jak sie mozna domyslec szerokosc i wysokosc sprite'a :P

pX = (this.getWidth() / 2) - (gracz.getWidth() / 2); // ustawmy naszego gracza na srodku ekranu
pY = (this.getHeight() / 2) - (gracz.getHeight() / 2);

eX = 0; // a przeciwnika w gornym lewym rogu
eY = 0;

lm = new LayerManager(); // utworzenie obiektu zarzadzajacego warstwami
lm.append(gracz); // dodajemy nowe warstwy
lm.append(przeciwnik);

this.setFullScreenMode(true); // wyswietlenie gry na pelnym ekranie telefonu


No dobra, przydałoby się teraz w końcu coś wyświetlić. Przejdźmy do procedury run() klasy clsCanvas oraz dodajmy następujący kod przed wywołaniem flushGraphics().


this.gracz.setPosition(pX, pY); // ustawienie gracza w pozycji pX, pY
this.przeciwnik.setPosition(eX, eY); // ustawienie przeciwnika w pozycji eX, eY

this.lm.paint(g, 0, 0); // przekazanie wszystkich warstw do pamieci


Teraz możemy w końcu nacisnąć magiczny przycisk F6 i zobaczyć, że nasze kwadraty rzeczywiście znajdują się na ekranie... ;D

Aha... zapomniałem o jednym... metody które wywołujemy mogą wywołać wyjątki, dlatego musimy je obsłużyć. W tej chwili powinniśmy mieć w edytorze podkreślone na czerwono linie i bardzo dobrze. Klikamy na żaróweczki z czerwonymi kropeczkami (^^) znajdujące się z lewej strony linii z błędami i z pokazanych opcji wybieramy pierwsze. Błędy powinny zniknąć.

No dobra, wyświetlać grafikę już umiemy... ale co z tego... nudno tak patrzeć na stojące w miejscu kwadraty... ;] No więc poruszmy je... ;D
Zacznijmy od tego sterowanego przez gracza.

Wewnątrz klasy clsCanvas dodajmy funkcję ruchGracza(), która będzie sprawdzać czy gracz przypadkiem nie chce zmienić pozycji naszego kwadrata... :D


public void ruchGracza(){
int klawisz = this.getKeyStates(); // sprawdzamy czy nacisnieto ktorys z przyciskow

if ((klawisz & LEFT_PRESSED) != 0){ // nacisnieto klawisz w lewo
pX-=2; // skoro gracz chce isc w lewo to musimy zmodyfikowac jego pozycje poprzez zmniejszenie wartosci X jego pozycji
}
else if ((klawisz & RIGHT_PRESSED) != 0){ // itd.
pX+=2;
}
else if ((klawisz & UP_PRESSED) != 0){ // itp.
pY-=2;
}
else if ((klawisz & DOWN_PRESSED) != 0){ /// ... :P
pY+=2;
}
}


Teraz wewnątrz procedury run() dodajmy wywołanie właśnie napisanej funkcji (gdzieś przed lm.paint()). Oraz dodatkowo żebyśmy nie rysowali po ekranie tylko się po nim przemieszczali dodajmy kod.:P


this.g.setColor(0xFFFFFF);
this.g.fillRect(0, 0, getWidth(), getHeight());


No i nasz kwadrat w końcu się poruszył... a na takiego sztywniaka wyglądał... ^^

Hmmm... zmęczyłem się już... więc ruchem przeciwnika oraz kolizjami zajmiemy się w następnym poście... ;] Cu.;)

Dzień 2 - podstawy programowania grafiki

Po poznaniu podstaw języka java możemy zabrać się za przygotowania do programowania gier. Przyda się nam ogólny, podstawowy szablon. Ostateczna wersja pliku clsCanvas ukazana na stronie jest dla nas trochę zbędna, dlatego możemy usunąć linie:

g.setColor(0xffffff);
//display the key code last pressed
g.drawString(Integer.toString(iKey), 2, 2, Graphics.TOP | Graphics.LEFT);

Ogólnie w szablonie zbędnych jest jeszcze 5 poprzednich linii, ale na początek gdy nie będziemy wyświetlać grafiki jako tła może zostać malowanie.;]

Na koniec "mała" lekturka... ;)) Niestety po angielsku... więc w następnych postach będę starał się częściowo tłumaczyć wykorzystywane pojęcia.

Zaczynamy pracę

Dobra, na początku potrzebujemy jakiegoś wygodnego środowiska programistycznego.
Ja osobiście polecam NetBeans... do ściągnięcia stąd (wersja Mobility).
Teraz musimy ściągnąć i zainstalować JDK (środowisko JAVY, bez którego nie uruchomimy żadnego projektu).
Ok, mamy wszystkie niezbędne rzeczy, więc możemy brać się za pisanie... :D Hmmm... tylko jak? :P No niestety bez podstaw języka JAVA się nie obejdzie. Kilka pożytecznych stron:
- midlety.net
- 4programmers.net
- java.oz.pl
Ok, taka wiedza na temat javy wystarczy nam na początek.;]

Start

No i zaczynamy.^^ Blog ten będzie moją drogą poprzez początki programowania gier na telefony komórkowe w języku JAVA. Więc jeżeli też chciałbyś pisać gry to ucz się razem ze mną... ;)