|
Bab 1
PENDAHULUAN
1. Latar Belakang Masalah
Teknologi komputer dewasa ini sudah sangat berkembang pesat
diberbagai bi-dang, baik ilmu pengetahuan, pekerjaan, seni, dll. Pemanfaatan
teknologi inidi-rasakan tidak hanya oleh orang dewasa, melainkan juga
anak-anak. Pekerjaan manusia yang dikerjakan sendiri oleh manusia (manual)
sudah banyak digantik-an oleh komputer. Dengan begitu semua dapat dikerjakan
lebih mudah, praktis dan hemat waktu.
Game engine Enchant.Js merupakan game
engine berbasis web yang bersi-fat open source sehingga penggunanya dapat bebas
menggunakan game engnie tersebut sesuai dengan kebutuhan. Dengan sifatnya open
source masih sangat disayangkan karena penggunaanya masih banyak belum
diketahui loleh banyak orang.
Oleh sebab itu penulis ingin membuat
buku Pengenalan Game Engine En-chant.Js yang dapat
menarik minat pembaca dan membantu pengguna game engine Turbulenz agar dapat
menggunakannya.
Rumusan masalah dalam buku ini terdiri dari hal - hal
seperti berikut :
1. Apakah sebenarnya game
engine Enchant.js itu?
2. Bagaimana langkah pertama yang harus dilakukan untuk menggunakan game
engine Enchant.js
5
3. Batasan Masalah
Batasan masalah dalam penulisan buku ini meliputi hal
- hal sebagai berikut :
1. Pengenalan game engine
Enchant.js
2. Instalasi game engine
Enchant.js
3. Penggunaan dasar game
engine Enchant.js bagi pemula
4. Tujuan Masalah
Tujuan dari permasalahan yang ada dalam buku ini
adalah:
1. Untuk menarik minat
pembaca tentang game engine
Enchant.js.
2. Untuk membantu pengguna
game engine Enchant.js dalam
penggunaanya.
5. Metode Penelitian
Metode yang kami gunakan adalah deskriptif, kajian pustaka dilakukan dengan
mencari literature di internet dan dokumen panduan game engine Enchant.js.
6. Sistematika Penulisan
Dalam Penulisan buku ini untuk mempermudah pemahaman pembaca, penulis
membuat sistematika penulisan sebagai berikut :
Bab 1 : Pendahuluan
Dalam bab ini diuraikan latar belakang masalah, batasan masalah, metode
pe-nelitian, selanjutnya tujuan penulisan dan terakhir sistematika penulisan
yang memberikan uraian dan gambaran dalam penulisan ini.
Bab 2 : Pengenalan
Enchant.js Menjelaskan tentang Enchant.js sebagai game engine berbasis web
yang bersifat open source.
Bab 3 : Instalasi Enchant.js
Menjelaskan tentang bagaimana langkah langkah yangharus
dilakukan untuk linstalasi game engine Enchant.js pada komputer.
Bab 4 : Penggunaan Enchant.js
Penggunaan dasar dalam game engine Enchant.js akan dijelaskan dalam bab
ini.
Bab 5 : Penutup
Pada bab ini akan berisi
kesimpulan dan saran terhadap buku ini
Bab 2
PENGENALAN Enchant.js
Pengenalan Enchant
Enchant.js adalah perpustakaan untuk mengembangkan game di Javascript. En-chant.js kerangka permainan di HTML5 + JavaScript. Game menggunakan enchant.js dapat diposting ke situs. Sejak permainan ini berjalan secara inde-penden, dalam div tunggal, mereka dapat diposting pada halaman web lain dan masih berfungsi sempurna.
Metode dasar untuk membuat game ini didasarkan dari yang telah dite-tapkan kode, yang, bersama dengan le data yang diperlukan untuk aplikasi dan perpustakaan yang mengandung enchant.js, disimpan dan upload dalam satu folder.
Pro Menggunakan enchant.js:
Memiliki sistem adegan gra k 2D dengan Flash-seperti sederhana API.
Ini cross-platform. Permainan Anda akan bekerja pada iOS, Android, dan desktop browser.
Ini ringan.
Ada banyak plugin yang tersedia untuk membantu Anda membuat jenis tertentu permainan, seperti visual novel atau RPG.
Ini gratis dan open-source!
B. Kontra Menggunakan enchant.js:
1. Ini tidak memiliki perangkat tur-orientasi terkait.
Ini belum mendukung multi-touch.
8
BAB 2. PENGENALAN ENCHANT.JS
|
9
|
Karena kerangka itu asal Jepang, ada kurangnya sumber daya dalam ba-hasa Inggris. (Tapi tutorial ini membantu untuk mengubah itu!)
Dukungan cross-platform adalah apa yang membuat enchant.js berdiri keluar dari kerangka permainan HTML5 lainnya. Sementara itu tidak memiliki be-berapa tur, versi saat ini cukup fungsional untuk membuat game kerja yang lengkap.
JavaScript
JavaScript adalah bahasa pemrograman berbasis java yang merupakan inter-face pembantu dalam pemrograman web. JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explo-rer (IE),Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.
Penulisan JavaScript
Kode JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh di tag <head> yang dibuka dengan tag <script type="text/javascript">.
<script type="text/javascript"> alert("Halo Dunia!");
</script>
Kode JavaScript juga bisa diletakkan di le tersendiri yang berekstensi .js (singkatan dari JavaScript). Untuk memanggil kode JavaScript yang terdapat di le sendiri, di bagian awal <head> harus ditentukan dahulu nama le .js yang dimaksud Smenggunakan contoh kode seperti berikut:
<script type="text/javascript" src="alamat.js"> </script>
Penulisan Skrip di Head
Skrip ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau dipanggil berdasarkan trigger pada event tertentu.] Peletakkan skrip di head akan menjamin skrip dimuat terlebih dahulu sebelum dipanggil.
BAB 2. PENGENALAN ENCHANT.JS
|
10
|
<html>
<head>
<script type="text/javascript">
...
</script>
</head>
</html>
Penulisan Skrip di body
Skrip ini dieksekusi ketika halaman dimuat sampai di bagian <body>. Keti-ka menempatkan skrip pada bagian <body> berarti antara isi dan JavaScript dijadikan satu bagian.
<html>
<head>
</head>
<body>
<script type="text/javascript">
...
</script>
</body>
</html>
Jumlah JavaScript di <head> dan <body> yang ditempatkan pada doku-men tidak terbatas.
Penulisan Skrip di Ekternal
Terkadang ada yang menginginkan menjalankan JavaScript yang sama dalam beberapa kali pada halaman yang berbeda, tetapi tidak mau disibukkan jika harus menulis ulang script yang diinginkan di setiap halaman. Maka JavaScript dapat ditulis di le secara eksternal. Jadi, antara dokumen HTML dan Java-Script dipisahkan, kemudian berkas tersebut dipanggil dari dokument HTML. Berkas JavaScript tersebut disimpan dengan ekstensi .js.
JavaScript : js/xxx.js document.write("pesan ini tampil ketika halaman di-load");
Untuk menggunakan eksternal JavaScript (.js) dipakai atribut "src" pada tag <script> pada halaman HTML-nya.
BAB 2. PENGENALAN ENCHANT.JS
|
11
|
<html>
<head>
</head>
<body>
<script src="xxx.js"> </script>
<p>Script di atas berada di berkas "xx.js" (eksternal) </p> </body>
</html>
HTML 5
HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (Wor-ld Wide Web Consortium, W3C) untuk mende nisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 me-rupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web.
API Baru di HTML 5
Untuk menambah keluwesan pemformatan, pada HTML5 telah dispesi kasikan pengkodean application programming interfaces (APIs). Antarmuka document object model (DOM) yang ada dikembangkan dan tur de facto didokumenta-sikan. Beberapa APIs terbaru pada HTML5 antara lain :
Elemen canvas, sebagai mode untuk menggambar object dua dimensi (2D). Lihat spesi kasi 1.0 untuk canvas 2D.
Timed media playback
Media penyimpanan luring (aplikasi web luring). Lihat Web Storage
Penyuntingan dokumen
Drag and Drop
BAB 2. PENGENALAN ENCHANT.JS
|
12
|
Cross-document messaging
Manajemen sejarah kunjungan penjelajah web
Tipe MIME dan penanggung jawab protokol registrasi.
Tidak semua teknologi di atas dimasukkan pada spesi kasi HTML5 W3C, meski teknologi tersebut telah termaktub dalam spesi kasi milik WHATWG HTML.[20] Beberapa teknologi yang juga terkait namun tidak dijadikan bagian dalam spe-si kasi HTML5 W3C dan WHATWG HTML5 adalah :
Geolocation
Web SQL Database, media penyimpanan database lokal.
ˆAPI Database terindeks, mode penyimpanan hierarkis key-value (Web-SimpleDB).
Web Speech API.
Pengorganisasian Game
Membuat game di enchant.js melibatkan menyatukan beberapa unsur. Unsur-unsur ini, dan penjelasan mereka, tercantum di bawah ini.
Game Objek
Objek permainan mengawasi permainan, sistem berjalan, dan fungsi dasar per-mainan. Semua permainan berjalan frum dalam objek permainan.Setiap objek permainan menciptakan adegan objek default dengan nama rootScene.
Beberapa permainan dapat dibuat pada satu halaman web, dan dalam hal ini, satu-satunya hal yang disimpan pada halaman adalah objek permainan dan nomor masing-masing game.
Adegan Objek
Benda adegan adalah kumpulan dikelompokkan benda yang terlihat pada saat yang sama. Benda adegan ini digunakan untuk mengelola visibilitas obyek No-de, yang merupakan elemen dapat ditampilkan, atau primitif, yang membuat permainan. Misalnya, ketika permainan memiliki layar Mulai, mengubah la-yar dari layar Start untuk layar di mana permainan ini benar-benar bermain dilakukan dengan beralih keluar benda Scene.
BAB 2. PENGENALAN ENCHANT.JS
|
13
|
Game dapat berisi baik benda Tema tunggal atau beberapa objek Scene. Dalam permainan yang sangat sederhana, mengubah keluar gambar dan men-ciptakan transisi dapat dicapai dengan menambahkan dan menghapus elemen dari rootScene tersebut.
Juga, benda Tema dapat ditumpuk ke dalam lapisan, dan dikelola seperti itu. Misalnya, dalam shooting game, atau game apa saja di mana ada skor yang ditampilkan pada layar, objek adegan yang berisi skor ditempatkan di depan objek adegan yang berisi adegan sebenarnya di mana permainan yang sedang dimainkan.
Node Objek
Benda simpul adalah elemen visual yang membuat permainan. Pada kenyataan-nya, permainan menggunakan benda yang mewarisi fungsi benda Node murni. (Di bawah digunakan sebagai Node-jenis benda.) Contoh Node-jenis benda me-liputi:
Sprite objek: Obyek yang menampilkan gambar atau gambar
Label objek: Obyek yang menampilkan teks
Peta objek: Obyek yang menampilkan peta permainan
Siklushidup Game
Permainan memiliki siklus hidup. Dalam sebuah permainan, yang dimulai se-telah enchant.js diinisialisasi, banyak proses yang berbeda dijalankan. Jika pengguna menavigasi ke halaman diernet, atau menutup browser, permain-an berakhir, tapi ada banyak cara untuk permainan sampai akhir yang dapat direkayasa selama pengembangan.
Misalnya, permainan di atas layar dapat ditampilkan (menunjukkan skor akhir), atau pemain dapat kembali ke menu, dll Ada banyak permainan yang tidak benar-benar berakhir, karena mereka kembali ke layar menu saat pertan-dingan sudah selesai.
Dalam essance, di game dibuat dengan enchant.js, akhir dari permainan tidak penting, itulah sebabnya kami akan melanjutkan ke bagian penting dari pekerjaan dalam sebuah permainan, mulai dari inisialisasi permainan.
Inisialisasi Enchant.js
Ketika permainan enchant.js menginisialisasi, hal-hal berikut terjadi:
1. Enchant.js diinisialisasi
BAB 2. PENGENALAN ENCHANT.JS
|
14
|
Objek permainan diciptakan
Objek permainan diinisialisasi
Unsur yang membentuk objek yang dimuat
Memulai permainan-kode diatur
Permainan dimulai
Permainan menunggu preloading untuk menyelesaikan, dan kemudian ber-lanjut
Kode game awal dieksekusi Dalam contoh di atas, preloading elemen sa-ngat penting.
Sebuah implementasi sederhana dari preloading ditampilkan di bawah ini:
enchant();
var game = new Game(320, 320);
game.preload('preload1.gif', 'preload2.wav');
game.onload = function () {
// Game code is written here
};
game.start();
Enchant.js diinisialisasi
Pertama, enchant.js diinisialisasi. Hal ini membuat sehingga terlepas dari di mana pada halaman mereka ditempatkan, enchant.js objek dan variabel dapat digunakan.
2. Permainan objek diciptakan
(baris ke 3)Objek permainan, seperti dijelaskan di atas, memainkan peran sen-tral untuk permainan itu sendiri, dan melaksanakan apa yang terjadi di layar. Ketika objek permainan diinisialisasi, resolusi layar diatur. Dalam contoh ini, objek permainan yang berisi layar permainan resolusi 320 pixel dan lebar 320 piksel tinggi dibuat. 3. Permainan objek yang diinisialisasi (baris 4-7) Berikut pengaturan awal untuk objek game ditetapkan. Pengaturan awal ini mengan-dung de nisi untuk pengaturan seperti fps (frame per detik) dan sebagainya.
BAB 2. PENGENALAN ENCHANT.JS
|
15
|
3. Permainan objek yang diinisialisasi
(baris 4-7) Berikut pengaturan awal untuk objek game ditetapkan. Pengaturan awal ini mengandung de nisi untuk pengaturan seperti fps (frame per detik) dan sebagainya.
4. Elemen yang membentuk objek yang dimuat
(baris 4) ini dijelaskan secara lebih rinci dalam Melaksanakan Obyek Element Preloading.
5. Mulai game-kode diatur
(baris 5-7) Kode untuk permainan itu sendiri diatur tepat setelah pertandingan dimulai. Pada dasarnya, ini menciptakan adegan pertama, menu mulai, dll
6. Permainan dimulai / preloading
(baris 8) Perintah untuk permainan untuk memulai dikeluarkan di sini. Tidak bahwa sistem telah secara khusus menunggu sampai sekarang (hal maju sebagai normal), tetapi ini adalah di mana program permainan itu sendiri sebenarnya dimulai. Hal ini terjadi oleh game.onload dipanggil. Jika tidak ada kode telah ditulis untuk permainan, pengolahan permainan berhenti di sini. Berikutnya datang tahap preloading, dan sistem akan menunggu untuk ini untuk menyele-saikan sebelum mengeksekusi kode game.
7. Kode permainan awal dieksekusi
Setelah preloading selesai dan permainan dimulai, pengolahan permainan dimu-lai lagi. Pada saat ini, unsur-unsur ditetapkan dari garis 5-7 atas ke game.onload dieksekusi. Pada dasarnya, itu adalah pada titik ini bahwa kode untuk perma-inan pengguna digunakan, jadi kita akan mulai menulis kode ini.
Jika permainan yang sudah sangat besar, kode untuk awal permainan (misal-nya kode untuk layar menu) dapat ditulis secara terpisah dari kode permainan utama, dan kemudian disebut pada saat ini.
State Changes and Events
Sebuah permainan yang dibuat di js mempesona berisi beberapa negara. Hal yang disebut Events terjadi tergantung pada negara-negara. Dengan mende -nisikan kode tertentu untuk diproses ketika mereka ovents terjadi, permainan dibuat.
Berikut adalah peristiwa utama:
BAB 2. PENGENALAN ENCHANT.JS
|
16
|
ENTER_FRAME: Terjadi ketika sebuah frame mulai
A_BUTTON_DOWN: Terjadi ketika tombol ditekan A
B_BUTTON_DOWN: Terjadi ketika tombol ditekan B
DOWN_BUTTON_DOWN: Terjadi ketika tombol kursor ke bawah di-tekan
LEFT_BUTTON_DOWN: Terjadi ketika tombol kursor kiri ditekan
RIGHT_BUTTON_DOWN: Terjadi ketika tombol kursor kanan ditekan
UP_BUTTON_DOWN:Terjadi ketika tombol kursor up ditekan
Untuk informasi lebih rinci mengenai peristiwa lainnya tipe tertentu, bacalah dokumentasi enchant.js resmi.
Template Dasar
enchant();
window.onload = function () {
var game = new Game(320, 320);
game.onload = function () {
// Anything written here is processed
};
game.start();
}
Basic Gambar
Membuat dan Menghapus Scene
Di sini kita akan membuat sebuah adegan. Membuat Tema melibatkan berikut:
Creating the Scene
Adding Node objects
alling pushScene()
BAB 2. PENGENALAN ENCHANT.JS
|
17
|
Hanya ada 3 langkah. Ketika pushScene () disebut, Tema yang ditampilkan pada layar.
var scene = new Scene();
game.pushScene(scene);
// an example of adding a Node object
scene.addChild(sprite);
Jika hanya ada satu adegan ditampilkan, dapat dihapus dengan popScene
().
1. game.popScene();
Menampilkan Gambar
Untuk menggunakan gambar, kita menggunakan subjek Sprite.
var sprite = new Sprite(64, 64);
sprite.image = game.assets['chara0.gif'];
scene.addChild(sprite);
Dalam rangka untuk menempatkan layar gambar, itu harus telah dimuat sebelumnya.
window.onload = function () {
enchant();
var game = new Game(320, 320); game.preload('chara0.gif');
game.onload = function() {
var scene = new Scene();
var sprite = new Sprite(32, 32);
sprite.image = game.assets['chara0.gif'];
scene.addChild(sprite);
game.pushScene(scene);
};
game.start();
};
BAB 2. PENGENALAN ENCHANT.JS
|
18
|
Menghapus Gambar
Gambar dapat ditampilkan dengan menggunakan metode Tema addChild (), dan dapat dihapus dengan menggunakan metode removeChild().
// Erases a sprite from the screen
game.rootScene.removeChild(sprite)
Menampilkan Teks
Untuk menampilkan teks pada layar, gunakan Label.
var label = new Label("test");
scene.addChild(label) window.onload = function () {
enchant();
var game = new Game(320, 320); game.onload = function () {
var scene = new Scene();
var label = new Label("test"); scene.addChild(label); ga-me.pushScene(scene);
};
game.start();
}
Memutar Suara
Untuk memutar suara, kita menggunakan metode Suara objek play().
1. game.assets['audio.wav'].play();
Sejak objek suara tidak Nod, tidak perlu untuk mendaftarkan mereka ke ebuah scene, seperti Sprite atau Label. Namun, seperti elemen lain yang digu-nakan dalam permainan, mereka harus dimuat sebelum mereka dipanggil.
BAB 2. PENGENALAN ENCHANT.JS
|
19
|
enchant();
window.onload = function () {
var game = new Game(320, 320);
game.preload('jump.wav');
game.onload = function() {
game.assets['jump.wav'].play();
};
game.start();
};
Dasar (Manipulasi)
Loading Elements
Untuk memuat elemen selama di sebuah game, metode permainan objek load() yang digunakan. Metode load dapat digunakan untuk memuat gambar, suara, atau le lain yang diperlukan.
game.load('image le.png' function () {
// Code written here is executed after loading is complete });
Metode load() hanya dapat memuat satu le. Oleh karena itu, ketika loading beberapa le, perlu untuk memanggil metode load() untuk setiap le yang akan diambil. Jika Anda memuat dalam beberapa le, itu jauh lebih mudah untuk preload mereka sebagai gantinya.
Proses Frame
Pengolahan bingkai dilakukan dengan menggunakan ENTER_FRAME. Dengan setiap frame maju, ENTER_FRAME akan terjadi, sehingga setiap metode ter-daftar terjadi ketika peristiwa yang terjadi akan kembali pada setiap awal frame.
game.addEventListener('enterframe', function () {
// Write code to be processed every frame here
});
BAB 2. PENGENALAN ENCHANT.JS
|
20
|
// Sample which moves an image to the right
enchant();
window.onload = function () {
var game = new Game(320, 320);
game.preload('chara0.gif');
game.onload = function() {
var scene = new Scene();
var sprite = new Sprite(32, 32);
sprite.image = game.assets['chara0.gif'];
scene.addChild(sprite);
game.addEventListener('enterframe', function() {
sprite.x += 1;
});
game.pushScene(scene);
};
game.start();
};
Proses Taps (klik)
TOUCH_START dan TOUCH_END Acara dipicu ketika pemain menyentuh (klik) layar). (Catatan: Tapping layar pada ponsel pintar dan mengklik layar pada komputer diperlakukan sebagai hal yang sama di enchant.js.) Ketika pe-main tekan atau klik pada objek Node ditampilkan, TOUCH_START untuk objek Node adalah dispached segera pada titik waktu di mana layar disentuh atau tombol mouse diklik. Akibatnya, TOUCH_END terjadi pada titik wak-tu ketika pemain berhenti menyentuh objek Node, atau ketika tombol mouse dilepaskan.
Metode dan kode lain dapat didaftarkan untuk objek Node tertentu. Node ini dapat digunakan untuk membuat interaktivitas serta animasi.
Registrasi metode tertentu yang ingin dijalankan ketika sebuah objek disen-tuh atau dilepaskan, untuk hal pendengar bahwa objek tertentu.
BAB 2. PENGENALAN ENCHANT.JS
|
21
|
sprite.addEventListener('touchend', function() {
// Code written here will be executed when the the user stops touching (or lets up the mouse button from) the sprite
});
// This sample shows an image that will move to the right when clicked
enchant();
window.onload = function () {
var game = new Game(320, 320);
game.preload('chara0.gif');
game.onload = function() {
var scene = new Scene();
var sprite = new Sprite(32, 32);
sprite.image = game.assets['chara0.gif'];
scene.addChild(sprite);
sprite.addEventListener('touchstart', function() {
sprite.x += 1;
});
game.pushScene(scene);
};
game.start();
};
Maps(Peta)
A Note on Maps(Catatan pada Peta)
Peta fungsionalitas yang disediakan oleh enchant.js dapat digunakan untuk de-ngan mudah membuat peta untuk 2D RPG!.Untuk menggunakan fungsi peta berikut ini harus dipersiapkan terlebih dahulu:
ˆ Tile Set
BAB 2. PENGENALAN ENCHANT.JS
|
22
|
Gambar 2.1: Animasi
ˆ Peta data
Ubin set dasarnya lembar animasi yang berisi semua ubin yang akan digunakan pada peta, diletakkan dalam kotak dengan setiap sel ukuran yang sama.
Data peta menentukan bagaimana ubin ini harus ditata, satu ubin pada setiap waktu. Data ini disusun dalam array JavaScript.
BAB 2. PENGENALAN ENCHANT.JS
|
23
|
var baseMap = [
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0],
[ 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
Membuat Maps(Peta)
Untuk membuat sebuah peta, digunakan sebuah objek peta.
BAB 2. PENGENALAN ENCHANT.JS
|
24
|
// Create a Map and draw it on-screen
var map = new Map(16, 16);
map.image = game.assets['map0.gif'];
var baseMap = [
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0],
[ 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
map.loadData(baseMap);
scene.addChild(map);
Dalam kode diatas, berikut ini yang akan terjadi:
Objek Peta dibuat
Menyusun ubin pada gambar diteruskan ke properti gambar Peta objek
Data peta Array dilewatkan ke metode Peta objek LoadData
BAB 2. PENGENALAN ENCHANT.JS
|
25
|
4. Persiapan untuk objek Peta selesai
Dari sini, karena persiapan untuk menarik objek Peta selesai, itu akan ditam-pilkan pada layar dengan menambahkannya ke scene dengan addChild ().
Kendala Deteksi di Maps(Peta)
Untuk memeriksa apakah tempat tertentu di peta mengandung kendala, metode Map objek hitTest() dapat digunakan.
Deteksi kendala menggunakan hitTest () tergantung pada kemampuan untuk membaca properti collisionData dari objek Peta yang bersangkutan. Properti tabrakan data berisi data peta yang menunjukkan jika ada kendala bagi setiap sel (dide nisikan oleh baik 0 atau 1).
BAB 2. PENGENALAN ENCHANT.JS
|
26
|
// Obstacle Detection on Maps
var map = new Map(16, 16);
map.image = game.assets['map0.gif'];
var baseMap = [
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0],
[ 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0],
[ 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
map.loadData(baseMap);
var colMap = [
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
BAB 2. PENGENALAN ENCHANT.JS
|
27
|
Sprites
Moving Sprites
Animasi bergerak dapat dicapai dengan memodi kasi sifat animasi objek x dan y .
// x and y positions are speci ed on the Sprite's properties
sprite.x = 100; sprite.y = 20;
Animasi objek X dan y selalu berisi lokasi Sprite saat ini, sehingga dapat digunakan seperti ini:
// Move the Sprite to the left by 10
sprite.x -= 10;
Dengan cara ini, itu mungkin untuk memindahkan animasi relatif terhadap lokasi saat ini.
Memutar Animasi dan Ukuran
Memutar animasi dapat dicapai dengan metode animasi objek rotate().
// Rotate the Sprite by 120 degrees
sprite.rotate(120);
Anda mungkin bisa memberitahu dari kode, bahwa unit pengukuran yang digunakan untuk sudut rotasi dalam derajat. Tentu, sudut saat objek animasi selalu dapat diperoleh dari properti rotasi objek animasi.
// View a Sprite's current angle of rotation
console.log(sprite.rotation);
Sekala animasi dapat dicapai dengan metode objek animasi scale()
// Double the width of a Sprite sprite.scale(2, 1);
Tentu untuk mengetahui faktor skala saat dari animasi, objek animasi scaleX dan ScaleY dapat dirujuk.
// View the Sprite's current scale factor
console.log(sprite.scaleX);
console.log(sprite.scaleY);
Transparansi Animasi
Untuk mengubah transparansi dari Sprite, menggunakan properti opacity Sprite objek.
BAB 2. PENGENALAN ENCHANT.JS
|
28
|
// To give the sprite an opacity of 50%
sprite.opacity = 0.5;
Nilai properti opacity harus antara 1 dan 0 Sepenuhnya buram (terlihat) adalah 0, dan benar-benar transparan adalah 1.
Animasi dengan menggunakan kanvas
Unsur kanvas HTML5-ditetapkan dapat digunakan sebagai elemen Animasi gambar (apa yang muncul di layar) di tempat gambar yang sebenarnya. Keti-ka elemen Canvas digunakan dengan cara ini, terlebih dahulu harus disiapkan sebagai objek Permukaan.
// use a Canvas element as a Sprite's drawing element
var surface = new Surface(320, 320);
sprite.image = surface;
Jika permukaan objek digunakan oleh Animasi, dapat digunakan dengan menunjuk sebagai properti gambar animasi.
Sejak beberapa metode menggunakan elemen Canvas yang didukung untuk permukaan objek, silahkan cek Dokumentasi enchant.js resmi untuk informasi lebih lanjut.
Mendeteksi tabrakan di Animasi
Apakah suatu animasi yang diberikan telah bertabrakan (atau menyentuh) ani-masi lain dapat ditentukan dengan berpotongan dengan metode intersect() dan within().
Metode berpotongan mendeteksi jika daerah satu animasi yang bertabrakan atau kontak dengan sesuatu yang lain. Catatan, jika Anda membuat animasi 64Ö 64 ukuran, tetapi kemudian menggunakan 30 gambar Ö 30-berukuran untuk animasi, daerah asli animasi dari 64 Ö 64 akan digunakan untuk deteksi, jadi hati-hati.
// Detect if sprite collides with sprite2
if(sprite.intersect(sprite2)) {
alert("hit!"); }
Metode within() mendeteksi tabrakan berdasarkan jarak dari titik pusat dari sprite dan titik pusat dari objek lain.
BAB 2. PENGENALAN ENCHANT.JS
|
29
|
// if the distance between the center point of sprite and sprite2 is 40 or less, the alert is displayed
if(sprite.within(sprite2, 40)) { alert("hit!"); }
Label
Merubah Color dan Font
Mengganti warna teks Label dicapai dengan properti warna Label objek.
// Change the label color to red
label.color = '#f00';
Setiap nilai warna yang valid dalam CSS dapat digunakan.
Sebagai contoh:
# 123
# 123456
hitam
semua nilai warna valid.
Mengubah font Label dilakukan dengan menggunakan properti font Label objek.
// Change the Label's font
label.font = "8px cursive";
Apa nilai properti Font CSS dapat digunakan.
(Peringatan:. Font properti di CSS berbeda dengan properti font-family Ketika mendeklarasikan properti font, minimal font-size dan font-family harus dinyatakan untuk bekerja dengan baik.
Moving Label
Moving label dicapai dengan mengubah label objek x dan y
// Display the Label at position 100,20 (x,y)
label.x = 100;
label.y = 20;
Tentu posisi saat label selalu dipertahankan dalam label x dan y.
// Move a Label to the left by 10
label.x -= 10;
BAB 2. PENGENALAN ENCHANT.JS
|
30
|
Dengan cara ini, Label dapat dipindahkan relatif terhadap posisi mereka saat ini.
Mengubah Label Transparansi
Label transparansi dapat dikontrol dengan properti opacity label objek.
// Make the label 50% transparent
label.opacity = 0.5;
Dia menilai properti opacity harus antara 1 dan 0 Sepenuhnya buram (ter-lihat) adalah 0, dan benar-benar transparan adalah 1.
Miscellaneous
Mengubah Scene Warna Latar Belakang
Sebuah latar belakang Adegan ditentukan oleh properti background warna Scene objek.
// Change a Scene's background color to red
scene.backgroundColor = 'red';
Setiap nilai warna yang valid dalam CSS dapat digunakan.
Mengubah Game FPS
Dalam rangka untuk mengubah fps permainan, memodi kasikan properti fps Game objek.
// Make the game run at 30 frames per second
game.fps = 30;
Perhatikan bahwa properti ini hanya terpanggil ketika game.start() dijalank-an, dan harus diubah sebelum metode yang disebut untuk berlaku. Mengubah fps dari permainan setelah telah dimulai tidak mungkin.
Skala Layar Game
Untuk mengubah faktor skala layar permainan, memodi kasi properti skala Ga-me objek.
// Enlarge the game screen by a factor of 2
game.scale = 2;
BAB 2. PENGENALAN ENCHANT.JS
|
31
|
Perhatikan bahwa properti ini hanya terpanggil ketika game.start() dijalank-an, dan harus diubah sebelum metode yang disebut untuk berlaku. Mengubah fps dari permainan setelah telah dimulai tidak mungkin.
Mengubah Scene Selama Game Berjalan
Untuk mengubah layar ditampilkan ketika loading, memodi kasi properti me-muat adegan Game objek.
// Change the screen shown when loading
game.loadingScene = myscene;
Pemuatan adegan harus ditentukan sebelum game mengeksekusi start ().
Preloading Elements
Dalam enchant.js, elemen dapat dimuat sebelum game mengeksekusi start ().
// Preload elements
game.preload('data1.jpg', 'data2.png', 'data3.wav');
Seperti ditunjukkan di atas, beberapa elemen dapat dimuat dengan mema-sukkan koma di antara mereka. Hal ini juga memungkinkan untuk memuat satu elemen juga.
Plugins
Melekat enchant.js beberapa modul (plugin) yang menambahkan fungsionalitas tambahan untuk perpustakaan utama.
Cara Penggunaannya
<script src="js/enchant.js" />
<script src="js/nineleap.enchant.js" /> <script src="js/twitter.enchant.js" />
Semua plugin ini harus dimuat setelah perpustakaan utama, enchant.js di-muat. Semua perpustakaan dengan dependensi harus dimuat setelah perpus-takaan mereka bergantung pada yang dimuat. Berhati-hatilah dari urutan di mana Anda memuat plugin saat menggunakan gl.enchant.js atau plugin yang berinteraksi dengan 9leap.
Jika sebuah plugin gagal untuk memuat kesalahan berikut akan ditampilkan (v0.6.0):
superclass is not de ned.
BAB 2. PENGENALAN ENCHANT.JS
|
32
|
Plugins Namespace
Ruang nama untuk plugin yang terkandung dalam objek enchant. Sebagai con-toh, semua kelas termasuk dalam gl.enchant.js dide nisikan dalam lokasi seperti:
enchant.gl.Shader enchant.gl.Sprite3D
Dalam namespace Plugin, untuk item yang berisi properti aset, aset tersebut dimuat. Misalnya, dalam kode berikut diambil dari nineleap.enchant.js, aset start.png danend.png dimuat.
enchant.nineleap = { assets: ['start.png', 'end.png'] };
Dalam kode permainan, fungsi pertama yang berjalan adalah enchant();. Di sini, semua kelas yang dide nisikan oleh namespace yang diekspor secara global. Secara khusus, berikut ini terjadi:
var Core = enchant.Core; var Sprite = enchant.Sprite;
var Entity = enchant.Entity; ... (and so on)
var Core = enchant.gl.Core; // Overwrites the Core class with a new de nition var Shader = enchant.gl.Shader;
var Sprite3D = enchant.gl.Sprite3D;
... (and so on - this is where plugins get exported)
Dengan dide nisikan dalam namespace global, kelas Plugin menjadi bergu-na. (ex. var game = new Core(320, 320);)
Plugins baru dibuat dan diperbarui sering, jadi silakan memeriksa dokumen-tasi untuk informasi yang paling up-to-date pada pelaksanaannya.
Plugins List
Saat repositori wise9 / enchant.js berisi plugin berikut. Daftar ini disusun mencerminkan hirarki plugin.
avatar
nineleap o twitter
o memory o socket
ui
widget
box2d
BAB 2. PENGENALAN ENCHANT.JS
|
33
|
gl
o bone.gl o collada.gl o mmd.gl o physics.gl
o primitive.gl
extendMap
O cial repositori Plugin postingan terletak di wise9 / enchant.js-contrib. Plu-gins kode oleh masyarakat yang diposting di sini.
Bagian berikutnya memberikan ringkasan tentang berbagai plugin resmi. Penjelasan rinci dan contoh kode keduanya dapat ditemukan dalam dokumentasi resmi dan kode sumber dari plugin yang sesuai.
1. avatar.enchant.js
Ini adalah perpustakaan karakter animasi yang dibuat dari perpustakaan elemen gambar yang dibuat oleh EIU.
Berikut adalah kelas yang disiapkan oleh plugin ini:
Character image class
Enemy Character image class
Scenery image class
Penggunaan elemen gambar avatar.enchant.js dibatasi untuk free game dibuat dengan enchant.js (nirlaba game tidak dapat menggunakan perpustakaan ini), tapi dapat digunakan tanpa memperoleh izin dari EIU atau menampilkan se-suatu yang istimewa di layar. Perlu diketahui bahwa plugin ini didukung oleh server API.
2. nineleap.enchant.js
Plugin ini mengelola komunikasi dengan dev permainan publik dan berbagi situs 9leap jika permainan diupload ke situs. Plugin ini memiliki plugin yang bergantung padanya (twitter, memori), dan mendukung fungsi-fungsi berikut:
Communication with the 9leap Score Ranking API
Display of the Game Start and Game Over splash screens
start.png dan end.png gambar harus disimpan dalam direktori yang sama hirarki sebagai le html yang menyebut permainan. Jangan ragu untuk menggunakan gambar sampel termasuk dalam images/ direktori.
BAB 2. PENGENALAN ENCHANT.JS
|
34
|
3. twitter.enchant.js
Tergantung Plugin: nineleap.enchant.js
Jika pengguna log in ke 9leap dengan informasi akun Twitter mereka, plugin ini memperoleh info akun yang relevan dari Twitter.
Informasi berikut dapat diperoleh (untuk pengguna yang login):
User information
Recent tweets
Info on users the user is following
Misalnya, ini dapat digunakan untuk membuat game di mana pengikut Anda di twitter muncul sebagai chracters dalam RPG.
4. memory.enchant.js
Tergantung Plugin: nineleap.enchant.js.
9leap mendukung penghematan data khusus untuk pengguna yang login dengan akun Twitter.
Informasi berikut dapat diperoleh dengan plugin ini:
Individual user data
Data shared by all users
Menyimpan data fungsi dapat dilakukan dengan cookies atau localStorage, teta-pi metode seperti menghubungkan ke akun Twitter, menabung untuk repositori dari permainan individu, dan referensi repositori umum data pengguna bersama juga dapat digunakan.
5. ui.enchant.js
Perpustakaan ini berisi de nisi untuk User Interface kelas elemen yang dapat digunakan dalam game. Kelas berikut termasuk:
D-pad (Pad)
Analog Keypad (APad)
Button (Button)
Font image [like spritesheets for text] (MutableText)
Score label (ScoreLabel)
Time label (TimeLabel)
BAB 2. PENGENALAN ENCHANT.JS
|
35
|
Life label (LifeLabel)
Bar (Bar)
Elemen-elemen gambar utama untuk perpustakaan ini (pad.png, apad.png, icon0.png, font0.png) harus berada di struktur direktori yang sama dengan le html yang menyebut permainan. Jangan ragu untuk menggunakan le gambar sampel terletak di images/ folder.
6. gl.enchant.js
Plugin ini menambahkan dukungan untuk menggambar menggunakan WebGL. Shader, quaternions, sumber cahaya, kamera, dan sebagainya termasuk, dan API intuitif didukung. Perpustakaan lain dengan fungsi serupa, seperti Three.js juga ada. Berikut ini contoh kelas yang didukung:
Sprite3D (corresponds to the Sprite class)
Scene3D (Corresponds to the Scene class)
Camera3D (Camera class)
Light3D (Lighting class)
Meskipun beberapa submodul ada untuk menyediakan fungsionalitas tambah-an, perpustakaan inti gl.enchant.js dapat digunakan dengan sendirinya untuk banyak hal yang berbeda.
bone.gl.enchant.js Plugin ini mende nisikan kelas mendukung skinning animation
collada.gl.enchant.js Plugin ini untuk memuat data model 3D yang me-lalui format le Collada.
mmd.gl.enchant.js Plugin ini memungkinkan pembacaan data anima-si melalui PMD dan format le VMD untuk MMD (Miku Miku Dance) alat animasi, dikembangkan di Jepang.
widget.enchant.js Plugin mendukung penggunaan berbagai elemen User Interface.
BAB 2. PENGENALAN ENCHANT.JS
|
36
|
7. tl.enhanct.js
fungsi tl.enchant.js telah digabungkan dengan enchant.js. Di bawah ini adalah kelas termasuk:
Timeline class
Action class
Easing class
Misalnya untuk membuat karakter utama (contoh pemain atau kelas Sprite) pindah ke (160.160) lebih dari 30 frame:
player.tl.moveBy(160, 160, 30); // Move to (160,160) over 30 frames
Untuk menampilkan "Game Over" peringatan setelah 300 frame:
game.rootScene.tl.delay(30).then(function(){ alert("Game Over"); });
Hal ini juga memungkinkan untuk menentukan berdasarkan waktu animasi bukan animasi berbasis frame. Bahkan jika gambar layar tertinggal, item terse-but akan berakhir di mana ia seharusnya dalam jumlah waktu yang ditentukan.
player.tl.setTimeBased(); player.tl.moveBy(160, 160, 1000); // -> Move to (160x160) over 1000ms
|
|
Tidak ada komentar:
Posting Komentar