sobota, 28 czerwca 2008

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.;)

Brak komentarzy: