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:
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!
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post