1. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009 Tworzenie gracznego inferfaceu uytkownikaniskiego poziomu Marcin Stachniuk mstachniuk@gmail.comPolitechnika Wrocawska Wydzia Elektroniki Studenckie Koo Naukowe Informatyki Systemw Autonomicznych i Adaptacyjnych ISA25 listopad 2009Marcin StachniukTworzenie GUI niskiego poziomu1/44

2. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Plan prezentacji1 Podstawy rysowania2 Obsuga klawiszy i ekranu dotykowego3 Ulepszony Canvas4 Sprite5 TiledLayer6 PodsumowanieMarcin Stachniuk Tworzenie GUI niskiego poziomu2/44 3. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Plan prezentacji1 Podstawy rysowania2 Obsuga klawiszy i ekranu dotykowego3 Ulepszony Canvas4 Sprite5 TiledLayer6 PodsumowanieMarcin Stachniuk Tworzenie GUI niskiego poziomu3/44 4. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009DisplayableDisplay.setCurrent(Displayable nextDisplayable) - ustawienie co maby wyswietlane na ekranieMarcin StachniukTworzenie GUI niskiego poziomu4/44 5. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009CanvasCanvasKlasa bazowa do pisania aplikacji wykorzystujcych GUIniskopoziomowe (low-level).O Canvasie naley myle jak o przestrzeni po ktrej moemymalowa.Marcin StachniukTworzenie GUI niskiego poziomu5/44 6. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Canvas - moliwociMetody:boolean isDoubleBuered() - test czy Canvas jest podwjniebuforowanyrepaint() - zgoszenie koniecznoci odmalowania ekranuserviceRepaints() - wymuszenie odmalowaniasetFullScreenMode(boolean mode) - ustawienie penegoekranu (od MIDP 2.0)protected abstract void paint(Graphics g) - abstrakcyjnametoda, w ktrej odbywa si rysowanieMarcin StachniukTworzenie GUI niskiego poziomu6/44 7. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009GraphicsGraphicsKlasa suca do rysowania prymityww, obrazkw i tekstw.Metody:setColor(int RGB) / setColor(int red, int green, int blue) -ustawienie aktualnego kolorudrawLine(int x1, int y1, int x2, int y2) - malowanie liniidrawRect(int x, int y, int width, int height) - malowanieprostoktallRect(int x, int y, int width, int height) - malowaniewypenionego prostoktaMarcin StachniukTworzenie GUI niskiego poziomu7/44 8. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009GraphicsMalowanie tekstu:setFont(Font font) - ustawienie czcionkidrawString(String str, int x, int y, int anchor) - wydrukowanienapisudrawChar(char character, int x, int y, int anchor) -wydrukowanie znakuMarcin StachniukTworzenie GUI niskiego poziomu8/44 9. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Graphics - anchorWyrwnanie textu w poziomie:LEFT - do lewejHCENTER - wyrodkowaneRIGHT - do prawejWyrwnanie textu w pionie:TOP - do gryBASELINE - wyrodkowanie do lini bazowejBOTTOM - do douMarcin StachniukTworzenie GUI niskiego poziomu9/44 10. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009ImageMetody:static Image createImage(String name) - wczytywanie orazkaz plikuint getHeight() - pobranie wysokoci obrazkaint getWidth() - pobranie szerokoci obrazkaWywietlanie za pomoc klasy Graphics:drawImage(Image img, int x, int y, int anchor) - malowanieobrazkaMarcin Stachniuk Tworzenie GUI niskiego poziomu10/44 11. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Szkielet aplikacji cz. 1 I LowLevel01.java 1 public class LowLevel01 extends MIDlet implements Runnable { 2 3 private LowLevelCanvas canvas; 4 5 public void startApp() { 6canvas = new LowLevelCanvas(); 7Display display = Display.getDisplay(this); 8display.setCurrent(canvas); 9Thread thread = new Thread(this);10thread.start();11 } Marcin Stachniuk Tworzenie GUI niskiego poziomu11/44 12. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Szkielet aplikacji cz. 2 I LowLevel01.java 1public void run() { 2while(!canvas.isEndGame()) { 3try { 4canvas.think(); 5canvas.repaint(); 6canvas.serviceRepaints(); 7Thread.sleep(100); 8} catch (InterruptedException ex) { 9ex.printStackTrace();10}11}12destroyApp(false);13notifyDestroyed();14} Marcin Stachniuk Tworzenie GUI niskiego poziomu12/44 13. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Szkielet aplikacji cz. 3 I 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 }1011 public void think() {12 }1314 public void paint(Graphics g) {15 }16 public boolean isEndGame() {17 return endGame;18 }19 } Marcin Stachniuk Tworzenie GUI niskiego poziomu13/44 14. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Podstawy rysowania - demo LowLevel01.zip LowLevel02.zipMarcin Stachniuk Tworzenie GUI niskiego poziomu14/44 15. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Plan prezentacji1 Podstawy rysowania2 Obsuga klawiszy i ekranu dotykowego3 Ulepszony Canvas4 Sprite5 TiledLayer6 PodsumowanieMarcin StachniukTworzenie GUI niskiego poziomu15/44 16. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Obsuga klawiszyMetody:keyPressed(int keyCode) - nacinito klawiszkeyReleased(int keyCode) - puszczono klawiszkeyRepeated(int keyCode) - powtrzono klawiszKody klawiszyKEY NUM0, KEY NUM1, KEY NUM2, KEY NUM3,KEY NUM4, KEY NUM5, KEY NUM6, KEY NUM7,KEY NUM8, KEY NUM9, KEY STAR, KEY POUNDAkcje gryUP, DOWN, LEFT, RIGHT, FIRE, GAME A, GAME B, GAME C,GAME DMarcin Stachniuk Tworzenie GUI niskiego poziomu16/44 17. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Obsuga klawiszy - przykad I 1protected void keyPressed(int keyCode) { 2switch (getGameAction(keyCode)) { 3case Canvas.LEFT: 4// nacinito w lewo 5break; 6 7 case Canvas.RIGHT: 8 // nacinito w prawo 9 break;10}11}LowLevel03.zip Marcin Stachniuk Tworzenie GUI niskiego poziomu17/44 18. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Obsuga ekranu dotykowegoMetody:boolean hasPointerEvents() - test czy telefon obsuguje ekrandotykowyboolean hasPointerMotionEvents() - test czy telefon wspieraprzesuwanie po ekranie dotykowympointerPressed(int x, int y) - obsuga wcinicia ekranupointerReleased(int x, int y) - obsuga puszczenia ekranupointerDragged(int x, int y) - obsuga przesuwaniawskanikiem po ekranieMarcin Stachniuk Tworzenie GUI niskiego poziomu18/44 19. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Plan prezentacji1 Podstawy rysowania2 Obsuga klawiszy i ekranu dotykowego3 Ulepszony Canvas4 Sprite5 TiledLayer6 PodsumowanieMarcin StachniukTworzenie GUI niskiego poziomu19/44 20. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009GameCanvasGameCanvasRozszerzenie klasy Canvas, wpomagajace pisanie gier. Umoliwiazastosowanie podwjnego buora przy malowaniu i statusuwcinitych klawiszy.Metody:Graphics getGraphics() - uzyskanie dostpu do buoraekranowegoushGraphics() - podmiana wywietlanego buora,odwieenie ekranuint getKeyStates() - pobranie statusu klawiaturyMarcin Stachniuk Tworzenie GUI niskiego poziomu20/44 21. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009GameCanvas - Szkielet aplikacji cz. 1 I LowLevel04.java 1public void run() { 2while(!canvas.isEndGame()) { 3canvas.inputKeys(); 4canvas.think(); 5canvas.paint(); 6} 7destroyApp(false); 8notifyDestroyed(); 9} Marcin Stachniuk Tworzenie GUI niskiego poziomu21/44 22. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009GameCanvas - Szkielet aplikacji cz. 2 I LowLevelGameCanvas.java 1public LowLevelGameCanvas() { 2super(true); 3init(); 4} 5 6void paint() { 7Graphics g = getGraphics(); 8 9flushGraphics();10}1112void inputKeys() {13}1415void think() {16}LowLevel04.zip Marcin Stachniuk Tworzenie GUI niskiego poziomu22/44 23. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009GameCanvas - demo LowLevel05.zipMarcin Stachniuk Tworzenie GUI niskiego poziomu23/44 24. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Plan prezentacji1 Podstawy rysowania2 Obsuga klawiszy i ekranu dotykowego3 Ulepszony Canvas4 Sprite5 TiledLayer6 PodsumowanieMarcin StachniukTworzenie GUI niskiego poziomu24/44 25. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Spritehttp://java.sun.com/javame/reference/apis/jsr118/javax/microedition/lcdui/game/Sprite.html Marcin StachniukTworzenie GUI niskiego poziomu25/44 26. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Sprite - podstawowe waciwociMetody:int getHeight() - pobranie wysokociint getWidth() - pobranie szerokociint getX() - pobranie wsprzdnej Xint getY() - pobranie wsprzdnej YsetPosition(int x, int y) - ustawienie pozycjimove(int dx, int dy) - przesuniecie o dany wektorpaint(Graphics g) - namalowanie SpriteasetVisible(boolean visible) - ustawienie widocznociboolean isVisible() - sprawdzenie widocznociMarcin Stachniuk Tworzenie GUI niskiego poziomu26/44 27. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Sprite - moliwo animacjiKonstruktor:Sprite(Image image, int frameWidth, int frameHeight)Metody:setFrameSequence(int[] sequence) - ustawienie sekwencjikolejnych klatek animacjinextFrame() - nastpna klatkaprevFrame() - poprzednia klatkaint getFrame() - pobranie numeru aktualnej klatkisetFrame(int sequenceIndex) - ustawienie aktualnej klatkianimacjiMarcin Stachniuk Tworzenie GUI niskiego poziomu27/44 28. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Sprite - moliwo transformacjiTransformacje:TRANS MIRROR, TRANS MIRROR ROT180,TRANS MIRROR ROT270, TRANS MIRROR ROT90,TRANS NONE, TRANS ROT180, TRANS ROT270,TRANS ROT90http://java.sun.com/javame/reference/apis/jsr118/javax/microedition/lcdui/game/Sprite.htmlMarcin Stachniuk Tworzenie GUI niskiego poziomu28/44 29. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Sprite - demo LowLevel06.zipMarcin Stachniuk Tworzenie GUI niskiego poziomu29/44 30. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Sprite - wykrywanie kolizjiMetody: boolean collidesWith(Image image, int x, int y, boolean pixelLevel) - test kolizji z obrazkiem boolean collidesWith(Sprite s, boolean pixelLevel) - test kolizji z innym Spritem deneCollisionRectangle(int x, int y, int width, int height) - denicja obszaru kolizyjnego Marcin Stachniuk Tworzenie GUI niskiego poziomu30/44 31. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Sprite - wykrywanie kolizji - demo LowLevel07.zipMarcin Stachniuk Tworzenie GUI niskiego poziomu31/44 32. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Plan prezentacji1 Podstawy rysowania2 Obsuga klawiszy i ekranu dotykowego3 Ulepszony Canvas4 Sprite5 TiledLayer6 PodsumowanieMarcin StachniukTworzenie GUI niskiego poziomu32/44 33. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME5 listopad 2009TiledLayerhttp://java.sun.com/javame/reference/apis/jsr118/javax/microedition/lcdui/game/TiledLayer.htmlMarcin StachniukTworzenie GUI niskiego poziomu33/44 34. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME5 listopad 2009TiledLayerhttp://java.sun.com/javame/reference/apis/jsr118/javax/microedition/lcdui/game/TiledLayer.htmlMarcin StachniukTworzenie GUI niskiego poziomu34/44 35. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009TiledLayerKonstruktor:TiledLayer(int columns, int rows, Image image, int tileWidth,int tileHeight) - tworzenie nowego TiledLayeraMetody:llCells(int col, int row, int numCols, int numRows, inttileIndex) - czciowe wypenianie wartociamisetCell(int col, int row, int tileIndex) - ustawienie wartocidanej komrkigetAnimatedTile(int animatedTileIndex) - utworzenieanimawonego kafelkasetAnimatedTile(int animatedTileIndex, int staticTileIndex) -ustawienie numeru kafelka, ktry bdzie teraz aktualnyMarcin Stachniuk Tworzenie GUI niskiego poziomu35/44 36. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009TiledLayer - demo LowLevel08.zipMarcin Stachniuk Tworzenie GUI niskiego poziomu36/44 37. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Jak to wszystko wykorzysta?Sprite: boolean collidesWith(TiledLayer t, boolean pixelLevel) -sprawdzanie kolizji Spritea z TiledLayeremMarcin Stachniuk Tworzenie GUI niskiego poziomu37/44 38. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Sprite i TiledLayer - demo LowLevel09.zipMarcin Stachniuk Tworzenie GUI niskiego poziomu38/44 39. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009GameBuilderMarcin Stachniuk Tworzenie GUI niskiego poziomu39/44 40. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Plan prezentacji1 Podstawy rysowania2 Obsuga klawiszy i ekranu dotykowego3 Ulepszony Canvas4 Sprite5 TiledLayer6 PodsumowanieMarcin StachniukTworzenie GUI niskiego poziomu40/44 41. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Czego si dzisiaj nauczylimy?Dziaanie Canvasu i GameCanvasuMalowanie po ekranie za pomoc GraphicsObsuga klawiszyDziaanie klas Sprite i TiledLayerJak mona pisa pierwsze gryMarcin Stachniuk Tworzenie GUI niskiego poziomu41/44 42. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Pytania?Marcin Stachniuk Tworzenie GUI niskiego poziomu42/44 43. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Kolejne spotkanieTemat: Tworzenie GUI wysokiego poziomuProwadzenie: Marcin MajakData: 12.11.2009, godzina: 17.00Gdzie: sala 23 C-3Marcin Stachniuk Tworzenie GUI niskiego poziomu43/44 44. Studenkie Koo Naukowe ISA2 Warsztaty programistyczne J2ME 5 listopad 2009Wicej informacjiKontakt z autorem:mstachniuk@gmail.comStrona koa naukowego ISA2http://autonom.ict.pwr.wroc.pl/Strona warsztatw:http://autonom.ict.pwr.wroc.pl/mstachniukAdres tego dokumentu:http://autonom.ict.pwr.wroc.pl/mstachniuk/les/warsztaty2009/03-lowlevel-2009.11.05.pdfPliki z kodami rdowymi wykorzystywanymi w prezentacji:http://autonom.ict.pwr.wroc.pl/mstachniuk/les/warsztaty2009/LowLevelAll.zipTworzenie GUI niskiego poziomuhttp://midlety.net/site/praktyka/LowLevelGUI.htmlMID Prole - dokumentacja Javadochttp://java.sun.com/javame/reference/apis/jsr118/Creating 2D Action Games with the Game APIhttp://developers.sun.com/mobility/midp/articles/game/Working with the TiledLayer Classhttp://www.dbarnes.com/midlet/tiledlayer/Getting Started With the MIDP 2.0 Game APIhttp://developers.sun.com/mobility/midp/articles/gameapi/GameCanvas - czyli dalej rysujemy po ekraniehttp://4programmers.net/Java/J2ME/GameCanvas - czyli dalej rysujemy po ekranieNetBeanshttp://www.netbeans.org/Marcin StachniukTworzenie GUI niskiego poziomu 44/44