Menganimasikan Menu Permainan dan Transisi Layar di HTML5: Panduan untuk Pengembang Flash

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Pengembangan HTML5 dan Flash mungkin memiliki banyak kesamaan, tetapi sebagai pengembang Flash, saya masih menganggapnya sebagai tugas monumental untuk mempelajari kembali keterampilan lama saya di HTML5. Dalam tutorial ini, saya akan menunjukkan cara saya membuat menu animasi dan transisi layar untuk permainan shoot-'em-up HTML5.

Pratinjau Hasil Akhir

Lihatlah hasil yang akan kita kerjakan:

Klik untuk mencoba demonya

Perhatikan latar belakang bergulir, kapal-kapal yang muncul dan memutar kedua sisi setiap item menu, dan bagaimana layar memudar menjadi hitam ketika Anda memilih sebuah opsi.

Perkenalan

HTML5 dan JavaScript mirip dengan ActionScript dalam banyak hal; ada banyak tumpang tindih dalam sintaks, event listener, dan metode. Namun ada beberapa perbedaan yang sangat jelas yang akan saya bahas dalam tutorial ini:

Menggambar Bentuk
Menggambar Gambar
Menggunakan Interval
Menganimasikan
Event Mouse
Menambahkan Dukungan untuk Banyak Browser

Yang perlu dicatat adalah bahwa tutorial ini terutama menggunakan gambar yang dapat diunduh dengan sumber atau Anda dapat menggunakan gambar Anda sendiri jika Anda mau (Anda perlu mengetahui lebar dan tingginya).

Langkah 1: Menyiapkan

Hal pertama yang perlu kita lakukan adalah menambahkan elemen canvas di dalam body file HTML, jadi buatlah yang disebut ShootEmUp.html dan masukkan yang berikut:

<!DOCTYPE html>
<html>
  <head>
		<title>Shoot 'Em Up</title>
	</head>
	<body>
		<canvas id="myCanvas" width="480" height="320">
			<p>Your browser does not support HTML5!</p>
		</canvas>
	</body>

</html>

Baris yang disorot memasukkan elemen kanvas, yang akan menampilkan menu sebenarnya. Lihat tutorial ini untuk panduan ke canvas dari awal.

Sudah hampir waktunya untuk memulai pengkodean JavaScript! Kita memiliki dua opsi ke mana kode itu bisa pergi; Ini dapat ditulis di dalam HTML dalam tag script atau dapat ditulis dalam file eksternal. Untuk menjaga hal-hal sederhana, saya akan menulis semua kode di bawah elemen <canvas>. Tetapi jangan ragu untuk menggunakan file eksternal jika Anda lebih suka; ingatlah untuk memberinya sumber.

<script type="text/javascript">
// Javascript Goes Here
</script>

Langkah kita selanjutnya adalah membuat empat variabel untuk mereferensikan elemen canvas dengan mudah.

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var width = canvas.getAttribute('width');
var height = canvas.getAttribute('height');

Pertama-tama kita mereferensikan variabel myCanvas dan mengaturnya untuk mengarah ke elemen canvas HTML. Variabel lain bernama context diciptakan untuk mendapatkan dimensi canvas (2D). Mirip dengan Flash, kita membuat dua variabel terakhir, width dan height, untuk menyederhanakan proses mengakses lebar dan tinggi properti canvas.

Langkah 2: Memuat dan Menggambar Gambar

Seperti dalam ActionScript kita akan membuat instance gambar kita.

var bgImage = new Image();
var logoImage = new Image();
var playImage = new Image();
var instructImage = new Image();
var settingsImage = new Image();
var creditsImage = new Image();
var shipImage = new Image();

Kita kehilangan bagian kode yang penting untuk setiap instance - path sumber! Saya menyimpan semua gambar dalam folder 'Images' dalam direktori yang sama dengan file HTML, jadi:

shipImage.src = "Images/ship.png";	
bgImage.src = "Images/Background.png";
logoImage.src = "Images/logo.png";
playImage.src = "Images/play.png";
instructImage.src = "Images/instructions.png";
settingsImage.src = "Images/settings.png";
creditsImage.src = "Images/credits.png";

Sebelum kita menggambar gambar ke canvas, mari buat empat array untuk menahan posisi dan ukuran tombol (playImage, instructImage, settingsImage, creditsImage). Array ini nantinya akan digunakan untuk membuat fungsi mouse over.

var buttonX = [192,110,149,160];
var buttonY = [100,140,180,220];
var buttonWidth = [96,260,182,160];
var buttonHeight = [40,40,40,40];

Sekarang kita bisa menggambar gambar ke canvas; ini dapat dilakukan dalam fungsi onload untuk setiap gambar, tetapi fungsi onload tidak perlu dimasukkan - kita dapat menggunakan drawImage().

bgImage.onload = function(){
	context.drawImage(bgImage, 0, 0);
};
logoImage.onload = function(){
	context.drawImage(logoImage, 50, -10);
}
playImage.onload = function(){
	context.drawImage(playImage, buttonX[0], buttonY[0]);
}
instructImage.onload = function(){
	context.drawImage(instructImage, buttonX[1], buttonY[1]);
}
settingsImage.onload = function(){
	context.drawImage(settingsImage, buttonX[2], buttonY[2]);
}
creditsImage.onload = function(){
	context.drawImage(creditsImage, buttonX[3], buttonY[3]);
}

Jika diuji sekarang, Anda harus melihat gambar statis menu yang akan segera kita berikan nafas kehidupan. Pesawat itu tidak digambar dengan sisa gambar karena kita akan menggambarnya nanti di event mouse. Omong-omong, jika Anda belum melakukan ini sejauh ini, jaga variabel Anda dikelompokkan bersama di bagian atas dan melakukan hal yang sama dengan fungsi.

Langkah 3: Menganimasikan Melalui Interval

JavaScript tidak memiliki onEnterFrame() yang setara, tetapi kita dapat dengan mudah membuat sendiri melalui penggunaan interval (timer).

var frames = 30;
var timerId = 0;

timerId = setInterval(update, 1000/frames);

Anda mungkin bingung bagaimana interval bekerja sehingga saya akan menjelaskan secara singkat. Interval ini memanggil pembaruan fungsi update() setiap (1000/frames) milidetik untuk menciptakan tingkat penyegaran yang halus. Nilai frames mengontrol fps; jika frames adalah 25 maka browser akan berusaha untuk memanggil update() setiap (1000/25=) 40 milidetik.

Langkah jelas selanjutnya adalah membuat fungsi update()

function update() {
	clear();
	move();
	draw();
}

Tiga fungsi baru dipanggil. clear() digunakan untuk membersihkan canvas karena tidak seperti flash, canvas bekerja seperti menempelkan stiker di papan; gambar tidak dapat dipindahkan setelah mereka ditempatkan. Fungsi selanjutnya, move(), digunakan untuk mengubah nilai variabel yang digunakan dengan gambar. Akhirnya draw() dipanggil untuk menempatkan "stiker" itu.

funcion clear(){
	context.clearRect(0, 0, width, height);
}

Sederhananya, kode ini membersihkan segala sesuatu di dalam kotak persegi panjang yang merupakan ukuran canvas dan diambil dari (0,0), sudut kiri atas. Itu berarti membersihkan seluruh canvas yang terlihat.

Sebelum kita beralih ke fungsi berikutnya, dua variabel harus diperkenalkan. backgroundY akan menjadi variabel untuk posisi-y gambar latar belakang dan speed akan digunakan untuk mengurangi dari backgroundY setiap siklus pembaruan.

var backgroundY = 0;
var speed = 1;

Efek yang akan kita hasilkan adalah latar belakang yang bergulir terus menerus. Gambar ini terdiri dari dua gambar bintang yang identik, satu di atas yang lain, dalam gambar yang lebih besar (gambar menjadi dua kali tinggi canvas). Kita perlahan-lahan akan memindahkan gambar sampai setengah yang kedua benar-benar terlihat dan kemudian kita akan mengatur ulang posisi gambar kembali ke setengah yang pertama.

function move(){
	backgroundY -= speed;
	if(backgroundY == -1 * height){
		backgroundY = 0;
	}
}

Akhirnya kita memiliki fungsi draw(). Semua gambar akan digambar ulang, tetapi satu perubahan untuk diperhatikan adalah bahwa nilai y dari bgImage telah diganti dengan variabel backgroundY.

context.drawImage(bgImage, 0, backgroundY);
context.drawImage(logoImage, 50,-10);
context.drawImage(playImage, buttonX[0], buttonY[0]);
context.drawImage(instructImage, buttonX[1], buttonY[1]);
context.drawImage(settingsImage, buttonX[2], buttonY[2]);
context.drawImage(creditsImage, buttonX[3], buttonY[3]);

Uji sekarang dan kagumi latar belakang pengguliran yang mulus.

Langkah 4: Memeriksa Posisi Mouse

Satu hal yang tidak dimiliki HTML5 canvas adalah dukungan untuk listener event gambar, yang berarti kita tidak bisa hanya menulis playImage.mouseover = function(){}. Sebagai gantinya, kita harus mendapatkan posisi mouse relatif terhadap canvas dan mencari tahu apakah itu dia atas dari satu objek.

var mouseX;
var mouseY;

canvas.addEventListener("mousemove", checkPos);

Kedua variabel yang diperkenalkan akan digunakan untuk mendapatkan posisi mouse saat ini. Kita menambahkan listener event, seperti dalam ActionScript, yang memanggil fungsi checkPos() setiap kali mouse bergerak.

function checkPos(mouseEvent){
	mouseX = mouseEvent.pageX - this.offsetLeft;
	mouseY = mouseEvent.pageY - this.offsetTop;
}

Jika Anda memberi tahu nilai mouseX dan mouseY setiap kali Anda menggerakkan mouse, Anda akan mendapatkan posisi yang benar. Tetapi ada satu masalah: tidak semua browser desktop modern mendukung metode ini. Untuk mengatasi masalah ini kita dapat menggunakan hack kecil sebagai gantinya:

if(mouseEvent.pageX || mouseEvent.pageY == 0){
	mouseX = mouseEvent.pageX - this.offsetLeft;
	mouseY = mouseEvent.pageY - this.offsetTop;
}else if(mouseEvent.offsetX || mouseEvent.offsetY == 0){
	mouseX = mouseEvent.offsetX;
	mouseY = mouseEvent.offsetY;
}

Ini memeriksa apakah browser menggunakan properti "pages" atau "offset" untuk mengembalikan posisi mouse, dan menyesuaikan nilainya (jika perlu) untuk mendapatkan posisi mouse relatif terhadap canvas.

Sekarang ingat instance pesawat kita, tetapi tidak menggambarnya? Kita akan mengambil gambar statis itu, memutarnya dan membuatnya muncul setiap kali kita mengarahkan mouse ke tombol!

var shipX = [0,0];
var shipY = [0,0];
var shipWidth = 35;
var shipHeight = 40;

var shipVisible = false;
var shipSize = shipWidth;
var shipRotate = 0;

Empat variabel pertama adalah sama seperti sebelumnya (kita memiliki dua posisi karena akan ada dua pesawat). Variabel shipVisible akan ditetapkan true ketika mouse berada di atas tombol. Sedangkan untuk shipSize dan shipRotate, mereka akan digunakan untuk menskalakan pesawat secara vertikal dan mengubah posisinya untuk memberikan ilusi bahwa ia berputar. Perlu diingat bahwa skala gambar dari kanan ke kiri.

for(i = 0; i < buttonX.length; i++){
	if(mouseX > buttonX[i] && mouseX < buttonX[i] + buttonWidth[i]){
		if(mouseY > buttonY[i] && mouseY < buttonY[i] + buttonHeight[i]){
			
		}
	}else{
		
	}
}

Tambahkan kode dalam fungsi checkPos(). Pertama kita melakukan perulangan tombol-tombol yang ada (saya menemukan nilainya menggunakan buttonX.length). Berikutnya kita membandingkan mouseX untuk melihat apakah itu lebih besar dari tombol buttonX saat ini dan kurang dari buttonX + buttonWidth - yaitu dalam batas horizontal tombol. Kita kemudian mengulangi proses di pernyataan if lainnya untuk nilai-nilai Y. Jika ini semua true, maka mouse harus berada di atas tombol, jadi aturlah shipVisible menjadi true:

shipVisible = true;

Dan di dalam pernyataan else kosong menetapkannya menjadi false; itu kemudian akan dipanggil kapan pun Anda mengeluarkan mouse dari sebuah tombol:

shipVisible = false;

Di bawah shipVisible = true kita akan menetapkan nilai awal untuk shipX dan shipY, dan melakukan semua penskalaan dalam fungsi move dan draw.

shipX[0] = buttonX[i] - (shipWidth/2) - 2;
shipY[0] = buttonY[i] + 2;
shipX[1] = buttonX[i] + buttonWidth[i] + (shipWidth/2); 
shipY[1] = buttonY[i] + 2;

Untuk shipX pertama, yang kita inginkan hanya di sebelah kiri tombol, kita atur nilainya ke (X dari tombol saat ini - setengah dari lebar pesawat), dan saya memindahkannya lebih dari 2 piksel ke kiri untuk membuatnya terlihat lebih baik. Proses serupa diulang untuk shipY pertama. Untuk shipX kedua kita posisikan di (X tombol saat ini + lebar tombolnya + setengah lebar pesawat), dan kemudian kita menetapkan Y seperti sebelumnya.

Bagian yang rumit datang sekarang. Kita harus menskala pesawat dan memindahkannya untuk mengkompensasi penskalaan. Dalam fungsi move() menulis pernyataan if ini.

if(shipSize == shipWidth){
	shipRotate = -1;
}
if(shipSize == 0){
	shipRotate = 1;
}
shipSize += shipRotate;

Kode mulai mengurangkan nilai shipSize, yang akan digunakan untuk skala gambar ketika kita menggambarnya; setelah mencapai nol, proses akan berbalik sampai skala penuh lagi.

Sekarang kita bisa pindah ke fungsi draw(). Di bawah semua metode draw lainnya tambahkan pernyataan if berikut.

if(shipVisible == true){
	context.drawImage(shipImage, shipX[0] - (shipSize/2), shipY[0], shipSize, shipHeight);
	context.drawImage(shipImage, shipX[1] - (shipSize/2), shipY[1], shipSize, shipHeight);
}

Pesawat-pesawat sedang digambar secara normal dengan pengecualian posisi X dikompensasikan dengan mengurangi separuh dari skala saat ini.

Langkah 5: Memeriksa Klik Mouse

Tambahkan listener event lain untuk mouseup dan buat variabel baru untuk interval kedua yang akan kita buat.

var fadeId = 0;
canvas.addEventListener("mouseup", checkClick);

Membuat fungsi checkClick().

function checkClick(mouseEvent){
	for(i = 0; i < buttonX.length; i++){
		if(mouseX > buttonX[i] && mouseX < buttonX[i] + buttonWidth[i]){
			if(mouseY > buttonY[i] && mouseY < buttonY[i] + buttonHeight[i]){
				
			}
		}
	}
}

Seperti sebelumnya, kita memeriksa apakah posisi mouse sudah benar. Sekarang kita perlu membuat interval baru, dan menghentikan interval dan listener event lainnya.

fadeId = setInterval("fadeOut()", 1000/frames);
clearInterval(timerId);
canvas.removeEventListener("mousemove", checkPos);
canvas.removeEventListener("mouseup", checkClick);

Tidak ada yang baru di sini kecuali bahwa kita perlu membuat fungsi yang disebut fadeOut(). Kita juga perlu membuat variabel lain yang disebut time.

var time = 0.0;

function fadeOut(){
	context.fillStyle = "rgba(0,0,0, 0.2)";
	context.fillRect (0, 0, width, height);
	time += 0.1;
	if(time >= 2){
		clearInterval(fadeId);
		time = 0;
		timerId = setInterval("update()", 1000/frames);
		canvas.addEventListener("mousemove", checkPos);
		canvas.addEventListener("mouseup", checkClick);
	}
}

Ini memiliki beberapa metode baru, tetapi cukup sederhana. Karena kita menghentikan semua listener event dan interval lainnya menu kita benar-benar statis. Jadi kita secara berulang menggambar kotak hitam transparan di atas menu - tanpa mengosongkannya - untuk memberikan ilusi memudar.

Variabel time meningkat setiap kali fungsi dipanggil dan setelah mencapai nilai tertentu (setelah 20 "frame" telah berlalu, dalam hal ini) kita menghapus interval saat ini. Di sini saya mengatur ulang menunya, tetapi ini adalah tempat Anda akan menggambar bagian baru dari menu.

Satu hal terakhir yang perlu diperhatikan adalah ketika Anda menggambar bentuk pada canvas, fillStyle diatur dengan nilai rgb (red, green, blue). Ketika Anda ingin menggambar bentuk transparan, Anda menggunakan rgba (red,green,blue,alpha).

Saya harap itu sedikit mengungkap proses pembelajaran untuk beralih dari pemrograman AS3 sederhana ke pemrograman canvas sederhana. Posting komentar jika ada pertanyaan!