Like PokoPunk part 2

Diposting2014-12-13Diperbarui2022-01-27
Flashpunk | tutorial

Hai pada tulisan kali ini saya ingin melanjutkan tulisan saya yang sebelumnya, maaf atas terlalu lama untuk membuat tutorial ini, padahal udah berusaha untuk selalu memposting tulisan setiap minggu sekali, tetapi karena kemaren ada GDG jadi tulisan ini agak telat untuk keluar.

Sebelumnya saya ingin memberitahukan ini adalah tutorial part membuat game seperti pokopang dari :

  1. membuat-game-ala-pokopunk-part1
  2. memasukan gambar dan mengatur posisi
  3. Logica dari pokopang

Dan untuk melanjuti pada artikel sebelumnya, kali ini kita akan membahas bagaimana membuat game kita terlihat seperti pokopang untuk posisi dan warna yang ada. Pertama kita akan merubah script untuk class hexa sehingga bisa di ubah warnanya. Ok sekarang buka class hexa dan ubah menjadi seperti ini : 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
package actor
{
    import flash.display.BitmapData;
    import net.flashpunk.Entity;
    import net.flashpunk.Graphic;
    import net.flashpunk.graphics.Image;
    import net.flashpunk.Mask;
    import net.flashpunk.FP;
 
    public class Hexa extends Entity
    {
        private var img : Image = new Image(new BitmapData(32, 32, false, 0xFFFFFF));
 
        public function Hexa(numimg:int)
        {
            graphic = img;
 
            switch(numimg)
            {
                case 0:
                    img.color = 0xFF0000;
                    break;
                case 1:
                    img.color = 0x00FF00;
                    break;
                case 2:
                    img.color = 0x0000FF;
                    break;
                case 3:
                    img.color = 0xFF00FF;
                    break;
                default:
                    img.color = 0xFFCC00;
                    break;
            }
            setHitbox(32, 32);
        }
 
        override public function update():void
        {
            super.update();
        }
 
    }
 
}

Pada line 14, saya menambahkan int untuk indikator pengubah warna yang kita inginkan. Pada line 18 ~ 35 saya membuat switch untuk memilih pilihan warna sesuai indikator yang kita buat di line 14. pada line 37 saya membuat hitbox untuk hexa yang akan digunakan indikator hexa bisa bersentuhan dengan yang lain(hexa yang lain ataupun mouse kursor).

Setelah kita selesai merubah hexa class, saatnya kita membuat array holder dan menampilkan hexa seperti game pokopang.Saatnya mengubah file Gamestage.as menjadi seperti ini :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
package room
{
    import actor.Hexa;
    import net.flashpunk.Entity;
    import net.flashpunk.World;
    import net.flashpunk.FP;
 
    public class GameStage extends World
    {
        private var arHolder : Array =new Array();
        public function GameStage()
        {
            for (var kolom:int = 0; kolom < 7; kolom++)
            {
                arHolder[kolom] = new Array();
                for (var baris:int = 0; baris < 7; baris++)
                {
                    var newInt : int = FP.rand(6);
                    arHolder[kolom][baris] = newInt;
                }
            }
 
            for (var thisX:int = 0; thisX < 7; thisX++)
            {
                for (var thisY:int = 0; thisY < 7; thisY++)
                {
                    var ranInt :int = arHolder[thisX][thisY];
                    var newHex : Hexa = new Hexa(ranInt);
                    add(newHex);
                    newHex.x = ((thisX + 3) * 40) + 40;
                    newHex.y = ((thisY+3) * 40)+10;
                }
            }
        }
    }
}

Ok sekarang saya akan membahas apa yang udah saya tulis diatas, pertama cek line 13 hingga 21, saya membuat looping for untuk array holder game dan memudahkan saya dalam pencarian nilai yang akan dibandingkan. pada line 24 hingga 33 saya membuat dan menampilkan hexa dan merubah gambar hexa sesuai dengan warna yang kita buat diawal. Setelah selesai saatnya mencoba apa yang sudah kita buat.

Pos and color

Ok saat ini sudah terlihat posisinya rapih, tetapi masih ada yang kurang dengan game pokopang yang asli. Sebagai acuan cek gambar di bawah

pokopang image

Posisi yang kita buat kurang naik turun dan saatnya merubah posisi biar terlihat sama 🙂. Ubah class hexa pada line 32 menjadi seperti ini

1
2
3
4
5
6
7
8
if (thisX % 2 != 1)
{
    newHex.y = ((thisY+3) * 40)+10;
}
else
{
    newHex.y = ((thisY+3) * 40)-10;
}

Coba compile ulang dah lihat perubahanya. Bagi kalian ingin melalukan pengechekan bisa melakukan download file disini