Mengenal Phaser Particle pada Phaser3

Diposting2023-01-12Diperbarui2023-01-12
html5 | phaser | tutorial

Halo,

balik lagi menulis blog dan memperkenalkan framework phaser untuk membuat game. Oh iya berbicara soal game, terkadang kita selalu di manjakan dengan tapilan yang keren. Mungkin salah satu efeknya seperti gambar ini.

Efek yang digunakan dalam gambar tersebut adalah particle effect. Pada tulisan kali ini saya ingin membahas tentang partikel yang merupakan bagian dari Gameobject.

catatan

ini adalah tutorial dengan text dari video youtube saya “Mengenal Phaser Particle pada Phaser3”. Jika mau liat videonya kalian bisa ke link youtube ini

Oh iya sebagai informasi, antara versi tulisan dan video mungkin tidak serupa, tapi memiliki tujuan sama, dan hasil akhir yang sama.

Penjelasan Singkat Particle

Dari dokumentasinya Phaser. Partikel/Particle adalah Game Objek simple yang di kontrol oleh Particle Emiter dan Manager, dan dirender oleh Manager.

Fungsinya membuat efek yang lebih baik, dan lebih ringan di banding menggunakan Game Object seperti Image, ataupun Sprites.

Koding

Kali ini saya ingin menunjukan mudahnya membuat partikel efek menggunakan phaser.

Contoh dari Phaser Example

Pertama kita akan mengacu kepada contoh Phaser Example lalu mengcopynya pada scene baru kita. Oh iya untuk contoh kali ini saya masih menggunakan Phaser vite yang pernah saya buat sebelumnya.

kita tambahkan code pada preloadScene yang sudah kita buat, dan juga kita akan ubah create functionnya untuk meload scene yang baru.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
preload(){
    //tambah code ini (kita mengambil code assets pada url lab phaser)
    this.load.atlas(
      "flares",
      "https://labs.phaser.io/assets/particles/flares.png",
      "https://labs.phaser.io/assets/particles/flares.json"
    );
}

create() {
    //this.scene.start("menu"); // kita komentar code menu terlebih dahulu
    this.scene.start("example-particle");
}

setelah itu buat Scene baru dan Saya namakan sebagai ParticleScene terus tulis code seperti dibawah ini

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import Phaser, { Scene } from "phaser";

export default class ParticleScene extends Phaser.Scene {
  constructor() {
    super("example-particle");
  }
  create() {
    var particles = this.add.particles("flares");

    var emitter = particles.createEmitter({
      frame: ["red", "blue", "green", "yellow"],
      x: 400,
      y: 300,
      speed: 200,
      lifespan: 3000,
      blendMode: "ADD",
    });
  }
}

Jika sudah mengcopy code diatas, dan pada saat kalian refresh browser kalian maka akan menampilkan sama seperti gambar ini.(versi kecil dari codingan di atas)

Contoh Particle yang lain

Selanjutnya saya ingin membuat partikel “bintang” yang setiap kita klik canvas akan menampilkan bintang.

Seperti sebelumnya kita akan memasukan assets bintang(kalian bisa mencari atau membuat assets bintangnya), dan meloadnya pada PreloadScene.

1
2
3
4
function preload(){
    //disini kita meload particlenya
    this.load.image("star", "assets/star.png");
}

selanjutnya kita tambahkan dari code yang sudah kita buat menjadi seperti bawah ini

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function create(){
    //deklarasi object particles (kumpulan particle)
    this.particles = this.add.particles("star").createEmitter(
	{
		gravityY:100,
		scale:{start:0.5, end:0.01},
		lifespan:500,
		angle:{min:0, max:360},
		x:100,
		y:100,
		speed: { min: -200, max: 200 },
		frequency :-1,
		rotate:{start:0, end:220},
	} );

    this.input.on("pointerdown", function(pointer){
		this.particles.setPosition(pointer.x, pointer.y);
		this.particles.explode(20,pointer.x, pointer.y);
    }.bind(this));
}

nah dari code yang kita buat saat kita klik di canvas akan menampilkan seperti di bawah ini. Kalian juga bisa mencobanya untuk klik pada canvas di bawah dan liat hasilnya

Penutup

Sebetulnya masih banyak sekali contoh yang bisa di buat dari game object partikel sendiri. Kalian bisa melihat seluruh contohnya di https://phaser.io/examples/v3/view/game-objects/particle-emitter/ dan bisa dilakukan experimen sendiri dari game object tersebut.

Semoga tutorial ini cukup jelas dan memberikan kalian pengetahuan lain soal phaser framework, dan ingin langsung mencobanya. 😁

Oh iya jika kalian mau cek sumber code dari game yang sudah kita buat, seperti biasa semua codenya ada github. Atau kalian bisa mendownloadnya pada tag release