02 Tworzenie graﬁcznego inferface’u użytkownika niskiego poziomu w j2me

Studenkie Koło Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009

Tworzenie graﬁcznego inferface’u użytkownika
niskiego poziomu

Marcin Stachniuk
mstachniuk@gmail.com

Politechnika Wrocławska
Wydział Elektroniki
Studenckie Koło Naukowe Informatyki Systemów Autonomicznych
i Adaptacyjnych ISA2

5 listopad 2009

Marcin Stachniuk Tworzenie GUI niskiego poziomu 1/44


Plan prezentacji

1 Podstawy rysowania

2 Obsługa klawiszy i ekranu dotykowego

3 Ulepszony Canvas

4 Sprite

5 TiledLayer

6 Podsumowanie



Plan prezentacji



3 Ulepszony Canvas

4 Sprite

5 TiledLayer

6 Podsumowanie



Displayable

Display.setCurrent(Displayable nextDisplayable) - ustawienie co ma
być wyswietlane na ekranie



Canvas
Canvas
Klasa bazowa do pisania aplikacji wykorzystujących GUI
niskopoziomowe (low-level).
O Canvas’ie należy myśleć jak o przestrzeni po której możemy
malować.



Canvas - możliwości

Metody:
boolean isDoubleBuﬀered() - test czy Canvas jest podwójnie
buforowany
repaint() - zgłoszenie konieczności odmalowania ekranu
serviceRepaints() - wymuszenie odmalowania
setFullScreenMode(boolean mode) - ustawienie pełnego
ekranu (od MIDP 2.0)
protected abstract void paint(Graphics g) - abstrakcyjna
metoda, w której odbywa się rysowanie



Graphics

Graphics
Klasa służąca do rysowania prymitywów, obrazków i tekstów.

Metody:
setColor(int RGB) / setColor(int red, int green, int blue) -
ustawienie aktualnego koloru
drawLine(int x1, int y1, int x2, int y2) - malowanie linii
drawRect(int x, int y, int width, int height) - malowanie
prostokąta
ﬁllRect(int x, int y, int width, int height) - malowanie
wypełnionego prostokąta



Graphics

Malowanie tekstu:
setFont(Font font) - ustawienie czcionki
drawString(String str, int x, int y, int anchor) - wydrukowanie
napisu
drawChar(char character, int x, int y, int anchor) -
wydrukowanie znaku



Graphics - anchor

Wyrównanie textu w poziomie:
LEFT - do lewej
HCENTER - wyśrodkowane
RIGHT - do prawej
Wyrównanie textu w pionie:
TOP - do góry
BASELINE - wyśrodkowanie do lini bazowej
BOTTOM - do dołu



Image

Metody:
static Image createImage(String name) - wczytywanie orazka
z pliku
int getHeight() - pobranie wysokości obrazka
int getWidth() - pobranie szerokości obrazka

Wyświetlanie za pomocą klasy Graphics:
drawImage(Image img, int x, int y, int anchor) - malowanie
obrazka



Szkielet aplikacji cz. 1 I

LowLevel01.java
1 public class LowLevel01 extends MIDlet implements Runnable {
2
3 private LowLevelCanvas canvas;
4
5 public void startApp() {
6 canvas = new LowLevelCanvas();
7 Display display = Display.getDisplay(this);
8 display.setCurrent(canvas);
9 Thread thread = new Thread(this);
10 thread.start();
11 }




LowLevel01.java
1 public void run() {
2 while(!canvas.isEndGame()) {
3 try {
4 canvas.think();
5 canvas.repaint();
6 canvas.serviceRepaints();
7 Thread.sleep(100);
8 } catch (InterruptedException ex) {
9 ex.printStackTrace();
10 }
11 }
12 destroyApp(false);
13 notifyDestroyed();
14 }




LowLevelCanvas.java
1 public class LowLevelCanvas extends Canvas {
2 private boolean endGame = false;
3
4 public LowLevelCanvas() {
5 init();
6 }
7
8 private void init() {
9 }
10
11 public void think() {
12 }
13
14 public void paint(Graphics g) {
15 }
16 public boolean isEndGame() {
17 return endGame;
18 }
19 }



Podstawy rysowania - demo

LowLevel01.zip LowLevel02.zip



Plan prezentacji



3 Ulepszony Canvas

4 Sprite

5 TiledLayer

6 Podsumowanie



Obsługa klawiszy

Metody:
keyPressed(int keyCode) - naciśnięto klawisz
keyReleased(int keyCode) - puszczono klawisz
keyRepeated(int keyCode) - powtórzono klawisz

Kody klawiszy
KEY NUM0, KEY NUM1, KEY NUM2, KEY NUM3,
KEY NUM4, KEY NUM5, KEY NUM6, KEY NUM7,
KEY NUM8, KEY NUM9, KEY STAR, KEY POUND

Akcje gry
UP, DOWN, LEFT, RIGHT, FIRE, GAME A, GAME B, GAME C,
GAME D



Obsługa klawiszy - przykład I

1 protected void keyPressed(int keyCode) {
2 switch (getGameAction(keyCode)) {
3 case Canvas.LEFT:
4 // naciśnięto w lewo
5 break;
6
7 case Canvas.RIGHT:
8 // naciśnięto w prawo
9 break;
10 }
11 }

LowLevel03.zip



Obsługa ekranu dotykowego

Metody:
boolean hasPointerEvents() - test czy telefon obsługuje ekran
dotykowy
boolean hasPointerMotionEvents() - test czy telefon wspiera
przesuwanie po ekranie dotykowym
pointerPressed(int x, int y) - obsługa ”wciśnięcia” ekranu
pointerReleased(int x, int y) - obsługa ”puszczenia” ekranu
pointerDragged(int x, int y) - obsługa ”przesuwania”
wskaźnikiem po ekranie



Plan prezentacji



3 Ulepszony Canvas

4 Sprite

5 TiledLayer

6 Podsumowanie



GameCanvas

GameCanvas
Rozszerzenie klasy Canvas, wpomagajace pisanie gier. Umożliwia
zastosowanie podwójnego buffora przy malowaniu i statusu
wciśniętych klawiszy.

Metody:
Graphics getGraphics() - uzyskanie dostępu do buffora
ekranowego
flushGraphics() - podmiana wyświetlanego buffora,
odświeżenie ekranu
int getKeyStates() - pobranie statusu klawiatury



GameCanvas - Szkielet aplikacji cz. 1 I

LowLevel04.java
1 public void run() {
2 while(!canvas.isEndGame()) {
3 canvas.inputKeys();
4 canvas.think();
5 canvas.paint();
6 }
7 destroyApp(false);
8 notifyDestroyed();
9 }



GameCanvas - Szkielet aplikacji cz. 2 I
LowLevelGameCanvas.java
1 public LowLevelGameCanvas() {
2 super(true);
3 init();
4 }
5
6 void paint() {
7 Graphics g = getGraphics();
8
9 flushGraphics();
10 }
11
12 void inputKeys() {
13 }
14
15 void think() {
16 }

LowLevel04.zip



GameCanvas - demo

LowLevel05.zip



Plan prezentacji



3 Ulepszony Canvas

4 Sprite

5 TiledLayer

6 Podsumowanie



Sprite

http://java.sun.com/javame/reference/apis/jsr118/javax/microedition/lcdui/game/Sprite.html



Sprite - podstawowe właściwości

Metody:
int getHeight() - pobranie wysokości
int getWidth() - pobranie szerokości
int getX() - pobranie współrzędnej X
int getY() - pobranie współrzędnej Y
setPosition(int x, int y) - ustawienie pozycji
move(int dx, int dy) - przesuniecie o dany wektor
paint(Graphics g) - namalowanie Sprite’a
setVisible(boolean visible) - ustawienie widoczności
boolean isVisible() - sprawdzenie widoczności



Sprite - możliwość animacji

Konstruktor:
Sprite(Image image, int frameWidth, int frameHeight)
Metody:
setFrameSequence(int[] sequence) - ustawienie sekwencji
kolejnych klatek animacji
nextFrame() - następna klatka
prevFrame() - poprzednia klatka
int getFrame() - pobranie numeru aktualnej klatki
setFrame(int sequenceIndex) - ustawienie aktualnej klatki
animacji



Sprite - możliwość transformacji

Transformacje:
TRANS MIRROR, TRANS MIRROR ROT180,
TRANS MIRROR ROT270, TRANS MIRROR ROT90,
TRANS NONE, TRANS ROT180, TRANS ROT270,
TRANS ROT90

http://java.sun.com/javame/reference/apis/jsr118/javax/microedition/lcdui/game/Sprite.html



Sprite - demo

LowLevel06.zip



Sprite - wykrywanie kolizji

Metody:
boolean collidesWith(Image image, int x, int y, boolean
pixelLevel) - test kolizji z obrazkiem
boolean collidesWith(Sprite s, boolean pixelLevel) - test kolizji
z innym Sprite’m
deﬁneCollisionRectangle(int x, int y, int width, int height) -
deﬁnicja obszaru kolizyjnego



Sprite - wykrywanie kolizji - demo

LowLevel07.zip



Plan prezentacji



3 Ulepszony Canvas

4 Sprite

5 TiledLayer

6 Podsumowanie



TiledLayer

http://java.sun.com/javame/reference/apis/jsr118/javax/microedition/lcdui/game/TiledLayer.html



TiledLayer

Konstruktor:
TiledLayer(int columns, int rows, Image image, int tileWidth,
int tileHeight) - tworzenie nowego TiledLayer’a
Metody:
ﬁllCells(int col, int row, int numCols, int numRows, int
tileIndex) - częściowe wypełnianie wartościami
setCell(int col, int row, int tileIndex) - ustawienie wartości
danej komórki
getAnimatedTile(int animatedTileIndex) - utworzenie
animawonego kafelka
setAnimatedTile(int animatedTileIndex, int staticTileIndex) -
ustawienie numeru kafelka, który będzie teraz aktualny



TiledLayer - demo

LowLevel08.zip



Jak to wszystko wykorzystać?

Sprite: boolean collidesWith(TiledLayer t, boolean pixelLevel) -
sprawdzanie kolizji Sprite’a z TiledLayer’em



Sprite i TiledLayer - demo

LowLevel09.zip



GameBuilder



Plan prezentacji



3 Ulepszony Canvas

4 Sprite

5 TiledLayer

6 Podsumowanie



Czego się dzisiaj nauczyliśmy?

Działanie Canvas’u i GameCanvas’u
Malowanie po ekranie za pomocą Graphics
Obsługa klawiszy
Działanie klas Sprite i TiledLayer
Jak można pisać pierwsze gry



Pytania

?



Kolejne spotkanie

Temat: Tworzenie GUI wysokiego poziomu
Prowadzenie: Marcin Majak
Data: 12.11.2009, godzina: 17.00
Gdzie: sala 23 C-3



Więcej informacji

Kontakt z autorem:
mstachniuk@gmail.com
Strona koła naukowego ISA2
http://autonom.ict.pwr.wroc.pl/
Strona warsztatów:
http://autonom.ict.pwr.wroc.pl/∼mstachniuk
Adres tego dokumentu:
http://autonom.ict.pwr.wroc.pl/∼mstachniuk/files/warsztaty2009/03-lowlevel-2009.11.05.pdf
Pliki z kodami źródłowymi wykorzystywanymi w prezentacji:
http://autonom.ict.pwr.wroc.pl/∼mstachniuk/files/warsztaty2009/LowLevelAll.zip
Tworzenie GUI niskiego poziomu
http://midlety.net/site/praktyka/LowLevelGUI.html
MID Profile - dokumentacja Javadoc
http://java.sun.com/javame/reference/apis/jsr118/
Creating 2D Action Games with the Game API
http://developers.sun.com/mobility/midp/articles/game/
Working with the TiledLayer Class
http://www.dbarnes.com/midlet/tiledlayer/
Getting Started With the MIDP 2.0 Game API
http://developers.sun.com/mobility/midp/articles/gameapi/
GameCanvas - czyli dalej rysujemy po ekranie
http://4programmers.net/Java/J2ME/GameCanvas - czyli dalej rysujemy po ekranie
NetBeans
http://www.netbeans.org/


02 Tworzenie graﬁcznego inferface’u użytkownika niskiego poziomu w j2me

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (18)

More from MarcinStachniuk

More from MarcinStachniuk (20)

02 Tworzenie graﬁcznego inferface’u użytkownika niskiego poziomu w j2me