Web Teknologi 3 (MKB721C) Minggu 1 2 Page 1 MINGGU 12 Web Teknologi 3 (MKB721C) Pokok Bahasan: – Game API Tujuan Instruksional Khusus: –Siswa memahami.

Presentasi berjudul: "Web Teknologi 3 (MKB721C) Minggu 1 2 Page 1 MINGGU 12 Web Teknologi 3 (MKB721C) Pokok Bahasan: – Game API Tujuan Instruksional Khusus: –Siswa memahami."— Transcript presentasi:

1

2 Web Teknologi 3 (MKB721C) Minggu 1 2 Page 1 MINGGU 12 Web Teknologi 3 (MKB721C) Pokok Bahasan: – Game API Tujuan Instruksional Khusus: –Siswa memahami perbedaan GameCanvas & Canvas –Siswa memahami bagaimana penggunaan Game API

3 Agenda Game API GameCanvas & Canvas Mengendalikan animasi

4 Game API Java ME Game API Java ME dibangun dari class Canvas & class Graphics Class Game API: javax.microedition.lcdui.game Game API memberikan fungsi: 1.animation 2.key polling

5 Class pada lcdui.game 1.GameCanvas: memberikan dasar untuk game user interface termasuk off-screen graphics buffer dan membaca status key. 2.Layer: class abstrak yang menampilkan elemen-elemen visual pada game. Subclass layer harus mengiplementasi method paint(Graphics). 3.LayerManager: mengendalikan resource layer The LayerManager manages a series of Layers. 4.Sprite: elemen visual dasar yang dapat di render dengan 1 dari sejumlah frame yang tersimpan di image. Sprite menyediakan fungsi flipping & rotasi, serta perpindahan lokasi. 5.TiledLayer: elemen visual yang terbentuk dari grid sel yang dapat berisi image (potongan image). Biasanya digunakan di game 2D untuk membuat scrolling background.

6 GameCanvas vs Canvas 1.GameCanvas memiliki kendali penuh saat display di update sedangkan pada Canvas, harus menunggu system memanggil paint(). 2.GameCanvas dapat mengendalikan region yang di update (lebih flexibel).

7 Mengendalikan animasi dengan GameCanvas Penggunaan GameCanvas tidak sama dengan Canvas: –Untuk menggunakan Canvas, cukup dilakukan subclass (extends) dan mendefinisikan metod paint(). Untuk mengupdatenya, digunakan method repaint(). –Untuk menggunakan GameCanvas, cukup dilakukan subclass (extends). Untuk menggambar pada screen, digunakan method getGraphics() untuk mendapat handler Graphics. Saat ingin mengupdate screen, digunakan method flushGraphics(). Untuk mengupdate screen sebagian/spesifik digunakan method flushGraphics(int x, int y, int width, int height).

8 Pooling key GameCanvas memberikan method untuk membaca state key: Syntax: public int getKeyStates() FieldDescription DOWN_PRESSEDThe bit representing the DOWN key. FIRE_PRESSEDThe bit representing the FIRE key. GAME_A_PRESSEDThe bit representing the GAME_A key (may not be supported on all devices). GAME_B_PRESSEDThe bit representing the GAME_B key (may not be supported on all devices). GAME_C_PRESSEDThe bit representing the GAME_C key (may not be supported on all devices). GAME_D_PRESSEDThe bit representing the GAME_D key (may not be supported on all devices). LEFT_PRESSEDThe bit representing the LEFT key. RIGHT_PRESSEDThe bit representing the RIGHT key. UP_PRESSEDThe bit representing the UP key.

9 Property class Layer Layer memiliki property lokasi, ukuran dan visibility, yang dapat diakses dengan method sbb: Modifier and TypeMethod and Description intgetHeight() Gets the current height of this layer, in pixels. intgetWidth() Gets the current width of this layer, in pixels. intgetX() Gets the horizontal position of this Layer's upper-left corner in the painter's coordinate system. intgetY() Gets the vertical position of this Layer's upper-left corner in the painter's coordinate system. booleanisVisible() Gets the visibility of this Layer. voidmove(int dx, int dy) Moves this Layer by the specified horizontal and vertical distances. abstract voidpaint(Graphics g) Paints this Layer if it is visible. voidsetPosition(int x, int y) Sets this Layer's position such that its upper-left corner is located at (x,y) in the painter's coordinate system. voidsetVisible(boolean visible) Sets the visibility of this Layer.

10 Mengelola Layer dengan LayerManager LayerManager mmberikan indek untuk setiap Layer dengan urutan dari depan ke belakang. Posisi 0 adalah teratas/terdepan (disebut z-order) Untuk menambahkan layer (terbawah/terbelakang) digunakan method public void append(Layer l). Untuk menyisipkan layer digunakan method public void insert(Layer l, int index) Untuk mengambil suatu layer digunakan method Layer getLayerAt(int index) Untuk menghapus layer digunakan method void remove(Layer l) Untuk memposisikan view windows digunakan method public void setViewWindow(int x, int y, int width, int height) Untuk menggambarkan layer digunakan method public void paint(Graphics g, int x, int y)

11 Ilustrasi LayerManager view window is set to 85 x 85 pixels and is located at (52, 11) lm = new LayerManager(); lm.setViewWindow(52, 11, w, h) rendered at (17, 17) lm.paint(g, 17, 17);

12 Menggunakan TiledLayer Buat suatu array matrik 2 dimensi (lebar x tinggi) untuk memetakan ‘tile’ yang akan digambar di layer. Penomoran tile dilakukan dari kiri ke kanan lalu baris dibawahnya. Untuk mengethui width & heightsuatu layer digunakan formula –Width = jumlah kolom X lebar ‘tile’ –Height = jumlah baris X tinggi ‘tile’

13 TiledLayer: Tiles

14 TiledLayer: Cells setAnimatedTile(-1, 7)

15 Membuat TiledLayer Untuk membuat objek TiledLayer digunakan Syntax: public TiledLayer(int columns, int rows, Image image, int tileWidth, int tileHeight) Contoh: String TLBGSRC = "background_tiles.png“; Image backgroundImage = Image.createImage(TLBGSRC); 12345 678910

16 Mengisi TiledLayer TLBG = new TiledLayer(8, 6, backgroundImage, 48, 48); TLBG.setPosition(0, 0); int[] map = { 0, 0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 0, 3, 3, 2, 0, 0, 0, 5, 0, 3, 3, 3, 2, 4, 1, 3, 2, 6, 6, 6, 6, 6, 6, 6, 6 }; for (int i = 0; i < map.length; i++) { int column = i % 8; int row = (i - column) / 8; TLBG.setCell(column, row, map[i]); } // sun-> index 8 mAnimatedIndex = TLBG.createAnimatedTile(8); TLBG.setCell(3, 0, mAnimatedIndex); lm.append(TLBG); TiledLayer Width = 8*48 = 384 Height = 6*48 = 288

17 Sprite frame

18 Sprite sequence

19 Referenced pixel

20 Menggunakan Spite S = new Sprite(spriteImage, 48, 48); S.setPosition((getWidth() - 48) / 2, 192); // public void setPosition(int x, int y) S.defineReferencePixel(24, 24); // void defineReferencePixel(int inp_x, int inp_y) lm.insert(S, 1); // public void insert(Layer l, int index) 48 192×48 pixels

21 Animasi Sprite Default sequence adalah 0,1,2,3 Contoh: int[] runningSequence = { 0, 1, 2 }; Image quatschImage = Image.createImage("/quatsch.png"); Sprite quatsch = new Sprite(quatschImage, 48, 48); quatsch.setFrameSequence(runningSequence); Atau loncat ke suatu frame dengan method: public void setFrame(int sequenceIndex) Sprite animation is all about frame sequences. 0 1 23

22 Sprite transformation

23 Transforming Sprite Transforming sprite dilakukan dengan method public void setTransform(int transform) Parameters: transform –TRANS_NONE –TRANS_ROT90 –TRANS_ROT180 –TRANS_ROT270 –TRANS_MIRROR –TRANS_MIRROR_ROT90 –TRANS_MIRROR_ROT180 –TRANS_MIRROR_ROT270 The reference pixel doesn’t move.

24 Mengubah reference point Untuk mengubah reference point digunakan method: public void defineReferencePixel(int x, int y) Efek mengubah reference point adalah titik reference tidak berubah saat transform mirror dilakukan. Method lain untuk mengubah reference point adalah: public void setRefPointPosition(int x, int y) Contoh: S.defineReferencePixel(24, 24); reference pixel to be at the center of the 48×48 frame

25 Handling collision Digunakan untuk menentukan apakah dua buah objek bertabrakan, contoh bullet dengan target. Teknik yang digunakan adalah: 1.Membandingkan rectangle dari satu sprite dengan sprite lain. Bila kedua sprite berpotongan, maka telah terjadi collision. Cara termudah tapi kurang akurat untuk bentuk yang non rectangular. 2.Membandingkan setiap piksel pada satu sprite dan sprite lain. Bila suatu titik pada satu sprite mengoverlap titip pada sprite lain, maka telah terjadii collision. Akurat namun membutuhkan komputasi yang berat.

26 Mendefinisikan collision Untuk mengubah collision rectangle digunakan method: public void defineCollisionRectangle(int x, int y, int width, int height); Sprite memiliki kemampuan mendeteksi collision dengan 1.Sprites 2.TiledLayers 3.Images Untuk metode pixel digunakan method: public final boolean collidesWith(Sprite s, boolean pixelLevel) public final boolean collidesWith(TiledLayer t, boolean pixelLevel) public final boolean collidesWith(Image image, int x, int y, boolean pixelLevel) Special effek 1.Backlight: public boolean flashBacklight(int duration) 2.Vibrate: public boolean vibrate(int duration)

27 Review & Latihan W12 Membuat game sederhana ch 14