Nekonesia032 Blog: Membuat game Platformer dengan Flash MX

Game tersebut sering Anda mainkan seperti Sonic, Mario, Rayman, dan Megaman itu adalah termasuk genre platformer atau bisa disebut side-scrolling game. Dimana kalian akan melompat, menghindar rintangan dan semacamnya. Dengan Macromedia Flash MX, Kita bisa membuat game apa saja yang kita mau, Terutama beberapa genre apapun seperti RPG, racing, puzzle, dan rail shooter.

Oke, Sekarang kita akan membuat game platform sederhana dengan Flash MX (6.0). Selain itu Anda dapat membuatnya pada Flash versi setelahnya (Maksimal versi CS6 karena game yang akan kembangkan merupakan Bahasa ActionScript 2.0).

Buka Flash MX (6.0), buatlah file baru dengan 550 x 400 px dan Pastikan Frame Rate-nya 30 FPS.Tambahkan Layer baru sebanyak 4 layer dan namai setiap layer masing-masing (mulai dari char, ground_map, background, dan restartbox).

Setelah itu masih berada di layer : char pada Timeline, Import file sprites yang Anda impor. Spritesnya boleh dari hasil karya sendiri atau hasil download dari situs pixel art yang bebas berlisensi. Contoh saya meng-impor file sprite karakter Hayase Yuuka dari Blue Archive hasil buatanku sendiri.

Gambar 03.contoh fan-sprites Hayase Yuuka (Blue Archive)

NB : Untuk membuat sprites pixel sendiri, Anda dapat menggambarnya lewat software seperti Photoshop atau Aseprite, Atau yang gratis gunakan software LibreSprite atau Microsoft Paint (bawaan Windows). dan Pastikan spritesnya harus format .PNG dengan transparan.

Gambar 04.menggambar sprite pada LibreSprite

Setelah di-impor, Pilih gambar sprite tersebut dengan Arrow Tool (V) dan pisahkan dengan Edit > Break Apart (Ctrl + B). Lalu seleksi bagian sprite yang sudah dipisahkan dengan Break Apart.

Setelah itu, Jadikan seleksi sprites tersebut menjadi symbol dengan nama 'player, titik registrasinya di bawah tengah dan Behavior : Movie Clip. Lalu klik OK.

Klik 2 kali pada movie clip tersebut atau bisa menekan Ctrl + E, maka kita akan memasuki mode edit symbol : player. Setelah memasuki mode edit symbol masukan 2 keyframe kosong (blank keyframe) pada Frame 2 dan 3 di Timeline : Layer1 dengan Insert > Blank Keyframe (F7).

Gambar 07.memasuki mode edit symbol : movie clip

Gambar 08.memasukan 2 keyframe kosong pada Frame 2 dan 3.

Sekarang kita akan keluar dari mode edit symbol dengan cara klik Scene1 (atau tekan Ctrl + E lagi).

Gambar 09.Kembali ke mode scene.

Sekarang kita akan keluar dari mode edit symbol dengan cara klik Scene1 (atau tekan Ctrl + E lagi). Lalu kita akan memindakan spritesnya untuk animasi lari dan lompat seleksi sprite tersebut dan tekan Ctrl + X, Lalu masuk ke mode edit symbol lagi pada movie clip bernama 'player

Gambar 10.Menyeleksi sprite dan pindahkan.

Pada edit symbol : player, pergi ke Frame 2 dan tempelkan dengan Ctrl + V, Lalu kita pisahkan tiga sprite lari tersebut dengan arrow tool (V). pilih satu sprite lari yang pertama dan jadikan simbol dengan nama 'run dan Behavior : Movie Clip. Setelah itu pindahkan 2 sprite lari dan klik dua kali pada movie clip : run. maka akan masuk mode edit symbol : run.

Gambar 11.memisahkan seleksi sprite.

Gambar 12.Mengubah sprite lari menjadi symbol.

Gambar 13.Memasuki mode edit symbol : run.

Pada symbol : run, Masukkan keyframe kosong pada frame 2 dan 3 kemudian tempelkan sprite lari yang sudah di-cut pada Frame 2, Untuk bisa melihat perkiraan posisi animasi gunakan Onion Skin agar Frame 1 dapat dilihat (Lihat gambar 14). Lalu pilih sprites lari 2 dan tekan Ctrl + G, Lalu posisikan pada transparan sprite lari pertama. Lakukan hal yang sama pada sprite lari ketiga pada Frame3 di symbol run(Lihat gambar 15)

Gambar 14.Gunakan onion skin.

Gambar 15.Memindahkan posisi sprite pada Frame 2

Sekarang kita kembali ke edit symbol : player, Pindahkan sprite lari ke posisi yang pas pada Frame1 (karena onion skin diaktifkan). dan sekarang kita pergi ke Frame3 dan pindahkan sprite lompat ke Frame3 di symbol : player.

Kemudian pilih Frame1 dan tekan F9 untuk muncul Actions panel. Pada panel Action : Frame, ketik perintah stop(); .

Kita kembali ke Scene1 dan pilih layer ground_map. Pada layer : ground_map, Kita akan membuat tanah dengan cara menggunakan Rectangle tool dan jadikan symbol bernama 'ground dan behavior : Movie Clip, Namun titik registrasi harus berada di atas tengah.

Pada panel Properties, berinama instance pada 2 movie clip dengan nama 'ground dan 'player,

Setelah itu pilih movie clip 'player dan tekan F9, Pada Panel Actions : Movie Clip, ketik listing program ini sebagai berikut :

onClipEvent (load) {

// Stop animasi timeline char

stop();

// Inisialisasi variabel

ground = _root.ground;

grav = 0;

gravity = 1;

speed = 10;

maxJump = -13;

touchingGround = false;

// Variabel untuk animasi

isMoving = false;

facingRight = true;

lastDirection = "right";

jumpAnimating = false;

walkTimer = 0;

walkFrameDelay = 5;

currentWalkFrame = 1;

// Variabel untuk mengontrol suara lompat

canPlayJumpSound = true;

// Set posisi awal ke spawn point

this._x = spawnX;

this._y = spawnY;

// Fungsi untuk respawn karakter (didefinisikan di dalam load)

this.respawn = function() {

// Kembalikan ke posisi spawn

this._x = spawnX;

this._y = spawnY;

// Reset gravitasi dan status lompat

grav = 0;

jumpAnimating = false;

touchingGround = false;

canPlayJumpSound = true;

// Reset animasi ke idle

this.gotoAndStop(1);

// Reset walk animation

walkTimer = 0;

currentWalkFrame = 1;

};

}

onClipEvent (enterFrame) {

// Fisika gerakan

this._y += grav;

grav += gravity;

// Reset status animasi

isMoving = false;

// Hit test dengan ground

while (ground.hitTest(this._x, this._y, true)) {

this._y -= gravity;

grav = 0;

}

if (ground.hitTest(this._x, this._y+5, true)) {

touchingGround = true;

jumpAnimating = false;

// Reset kemampuan memainkan suara lompat saat menyentuh tanah

canPlayJumpSound = true;

} else {

touchingGround = false;

}

// Kontrol keyboard

if (Key.isDown(Key.RIGHT)) {

this._x += speed;

isMoving = true;

facingRight = true;

this._xscale = 100;

}

if (Key.isDown(Key.LEFT)) {

this._x -= speed;

isMoving = true;

facingRight = false;

this._xscale = -100;

}

if (Key.isDown(Key.SPACE) && touchingGround) {

grav = maxJump;

jumpAnimating = true;

this.gotoAndStop(3); // Frame lompat

// Memainkan suara lompat jika tersedia dan dapat dimainkan

if (canPlayJumpSound && _root.sound1 != undefined) {

// Set start point ke 0.1 detik (100 milidetik)

_root.sound1.start(0.1);

canPlayJumpSound = false; // Mencegah suara terulang saat masih di udara

}

// Deteksi tabrakan dengan restartbox

if (_root.restartbox.hitTest(this._x, this._y, true)) {

// Respawn ke posisi awal

this.respawn();

}

// Deteksi tabrakan dengan ground untuk mencegah menembus dinding

if (ground.hitTest(this._x+(this._width/2), this._y-(this._height/2), true)) {

this._x -= speed;

}

if (ground.hitTest(this._x-(this._width/2), this._y-(this._height/2), true)) {

this._x += speed;

}

if (ground.hitTest(this._x, this._y-(this._height), true)) {

grav = 3;

}

// LOGIKA ANIMASI

// Jika di udara (melompat)

if (!touchingGround && jumpAnimating) {

this.gotoAndStop(3);

}

// Jika di tanah dan bergerak

else if (touchingGround && isMoving) {

walkTimer++;

if (walkTimer >= walkFrameDelay) {

walkTimer = 0;

// Toggle antara frame 1 dan 2 untuk animasi berjalan

if (currentWalkFrame == 1) {

currentWalkFrame = 2;

} else {

currentWalkFrame = 1;

}

this.gotoAndStop(currentWalkFrame);

}

// Jika di tanah dan diam

else if (touchingGround && !isMoving) {

this.gotoAndStop(1); // Frame idle

walkTimer = 0;

}

Sekarang coba tes game tersebut dengan menekan Ctrl + Enter.

Sepertinya sudah lumayan. Sekarang pilih layer 'background dan import file gambar, latar belakang dan rintangan. contoh Saya mengimpor gambar seperti ini.

Setelah itu ubah warna latar belakang pada Flash dengan klik pada warna biru gelap pada permukaan tanah background.

Sekarang kita akan mengedit symbol : ground dengan klik 2 kali dan tambahkan kotak seperti ini, Lalu kembali ke Scene1.

Masih ground keadaan seleksi pilih Alpha pada Color dan juga opasitas-nya 0%, Sekarang kita tes lagi dengan tekan Ctrl + Enter.

Setelah itu kita membuat objek yang berfungsi respawn player dengan cara buat kotak bewarna merah dan jadikan simbol movie clip bernama 'restartbox dan berinama instance pada movie clip dengan nama yang sama. Lalu tambahkan script pada instance player (yang ditandai warna hitam) :

onClipEvent (load) {

// Stop animasi timeline char

stop();

// Inisialisasi variabel

ground = _root.ground;

grav = 0;

gravity = 1;

speed = 10;

maxJump = -13;

touchingGround = false;

// Variabel untuk animasi

isMoving = false;

facingRight = true;

lastDirection = "right";

jumpAnimating = false;

walkTimer = 0;

walkFrameDelay = 5;

currentWalkFrame = 1;

// Variabel untuk mengontrol suara lompat

canPlayJumpSound = true;

// Posisi respawn awal

spawnX = (isiposisiX);

spawnY = (isiposisiY);

Jadi untuk tanda hitam tersebut ada dimana jika player terkena restartbox, Maka player akan respawn dari posisi awal permainan. kira-kira posisinya seperti ini. Setelah itu , Jangan lupa opasitas instance 'restartbox 0%. Lalu test game tersebut.