BAB IV
PENGGUNAAN TURBULENZ
4.1. Penggunaan Dasar Turbulenz
.
Turbulenz adalah game engine HTML5 dan server-side API dalam JavaScript dan TypeScript untuk membuat/membangun dan mendistribusikan game 2D dan 3D yang berjalan di platform yang mendukung fitur HML5 seperti browser modern tanpa bantuan plugin.
4.1.1. Isi Pedoman Ini
.
Tujuan dalam pedoman ini adalah untuk mengenalkan pengembang dengan SDK, supaya pengembang dapat dengan cepat untuk memulai membuat game yang bagus untuk platform Turbelenz. Kami memberikan ringkasan pengenalan beberapa konsep dan tools yang penting dan menjelaskan proses menulis, membuat, dan menjalankan aplikasi Turbulenz yang sederhana.
Untuk mempelajari dasar bagaimana untuk memakai API Turbulenz, bacalah bagian selanjutnya. Jika Anda hanya ingin mengetahui bagaimana menggunakan dasar API JavaScript Turbulenz, seperti bagaimana membuat gambar di layar, Anda bisa melewati bagian ini dan pindah untuk mencari jalan terbaik untuk menyusun aplikasi Turbulenz.
Sampai di titik ini Anda harus melakuan setidaknya *satu* dari di bawah ini:
• Telah menginstall SDK terbaru dari https://hub.turbulenz.com dan menjalankannya dengan langkah penginstalan yang dijelaskan di sini.
• Menyalin repository git open source Turbelenz dari http://github.com/turbulenz/turbulenz_engine dan menjalankan langkah penginstalan yang ada di README.rst.
4.1.2. Memulai denga API Turbulenz
.
Untuk mencoba API Turbulenz hanya dibutuhkan teks editor dan browser seperti Google Chrome atau Mozilla Firefox. Dimulai dengan membuat file baru dengan ekstensi .html seperti turbulenz_example.html Taruh file ini di root direktori Turbelenz. Dalam file tersebut, tambahkan tag HTML dasar seperti berikut:
<html>
Tag <canvas> adalah tempat dimana Turbulenz akan menggambar game. Aggap saja ini merupakan window game, dalam kasus ini kita akan membuat 640x480 pixel. Untuk memuat library Turbulenz bisa dilakukan dengan memasukan script di dalam HTML sebelum kode game Anda dieksekusi.
Untuk memulai menggunakan core dari TurbulenzEngine dan library GraphicsDevice library unttuk merubah warna background elemen canvas. Tambahkan tag script di bawah ini setelah komentar “Script includes go here”:
<script src="jslib/debug.js"></script> <script src="jslib/webgl/turbulenzengine.js"></script> <script src="jslib/webgl/graphicsdevice.js"></script>
Untuk membuat inisialisasi WebGLTurbulenzEngine dan passing reference elemen <canvas> ke constructor dalam game:
TurbulenzEngine=WebGLTurbulenzEngine.create({
Vaiabel TurbulenzEngine akan mengizinkan Anda untuk membuat instance modul low-level seperti GraphicsDevice, SoundDevice, NetworkDevice, InputDevice and PhysicsDevice. Anda bisa berasumsi kehadiran dari TurbulenzEngine dan variabel debug karena hal tersebut secara otomatis ditambahkan oleh build tools Turbulenz ketika Anda mencoba untuk membuat aplikasi Turbulenz. Dalam contoh ini kita akan mendeklarasikan hal tersebut secara manuaI. Untuk membuat instance modul graphics, tambahkan code dibawah ini:
var graphicsDevice = TurbulenzEngine.createGraphicsDevice({});
Dalam pembuatan ini mempunyai opsi construct (An object literal with properties). Dalam contoh ini, kita hanya menggunakan objek kosong, hal ini menandakan pembuatan objek tanpa opsi. Sekarang graphicsDevice sudah dibuat dan elemen <canvas> bisa ditambahkan dengan warna.
Sekarang menginisialisasi array warna untuk warna background:
var r=1.0, g=1.0, b=0.0, a=1.0; var bgColor = [r,g,b,a];
bgColor adalah vektor 4-dimensi [red, green, blue, alpha], dimana setiap vektor tersebut mempunyai nilai dari 0.0 to 1.0. Dalam contoh ini, warnanya akan menjadi kuning.
Mendeklarasi funngsi update, ini akan bertindak sebagai game loop:
function update() {
Mendeklarasikan function dan mem-passing-nya melalui function setInterval TurbulenzEngine akan mengakibatkan function dipanggil secara terus-menerus setiap interval waktu dalam millisecond. Dalam contoh ini dibuat 1/60 detik atau 60 frame-per-detik (fps). Sekarang menambahkan kode di bawah ini ke dalam function update untuk mengupdate elemen <canvas>, dimana akan diupdate setuiap frame:
if(graphicsDevice.beginFrame())
Ini akan menyiapkan frame dengan memanggil beginFrame and jika berhasil akan menghapus laya dengan bgColor, kemudian menyelesaikan frame. Sekarang Anda sudah mempunyai function yang akan membersihkan layar dengan warna kuning pada 60fps. Untuk menjalankan code JavaScript di browser, buka saja file html-nya langsung untuk dilihat di browser. Jika ada code yang dirubah, refresh halaman tersebut. Anda akan melihat kotak berwarna kuning, dimana kotak tersebut merupakan window game Anda.
Sejauh ini, code Anda akan terlihat seperti ini:
<html>
Untuk menambah sedikit variasi, coba untuk merubah warna dengan merubah code pada function update. Tambahkan kode ini dibawah function beginFrame:
b += 0.01;
Jika And me-refresh halaman di browser, Anda akan melihat canvas akan merubah warna secara terus menerus dari kuning hingga menjadi putih. Hal berikutnya adalah menggambar kotak sederhana menggunakan API Draw2D.
Include library Draw2D dengan menambahkan script di bawah include yang lain:
<script src="jslib/draw2d.js"></script>
Setelah membuat GraphicsDevice, Anda dapat membuat module Draw2D:
var draw2D=Draw2D.create({
Setelah membuat array bgColor, buat kotak:
var x1 = 50;
Ini akan membuat kotak dengan koordinat (x1, y1) dan (x2, y2) dimana (0, 0) adalah koordinat pojok kiri atas dari layar. Kotak ini akan mulai pada 50px pojok dari canvas dan akan diberi warna merah. Untuk menggambar kotak ini dengan Draw2D, tambahkan code di bawah ini diantara update loop clear() dan endFrame():
draw2D.begin();
Jika Anda me-refresh halaman, Anda akan melihat kotak berwarna merah. Function draw2D.draw merupakan cara mudah untuk hanya menggambar objek. Tetapi untuk fleksibilitas dan kontrol, menggambar sprite jauh lebih baik. Membuat sprite sederhana dengan menggunakan Draw2DSprite function, lakukan hal ini di bawah deklarasi drawObject:
var sprite=Draw2DSprite.create({
Hal ini merupakan property awal (initial properties) dari sprite. Untuk menggaambarnya, gunakan function drawSprite dan taruh setelah function draw2D.draw:
draw2D.drawSprite(sprite);
Reload browser, Anda akan melihat permata putih di tengah layar. Nilai Sprite bisa dirubah dengan method seperti getColor & setColor. Posisi sprite busa dirubah dnegan mengakses property secara langsung pada objek sprite. Masukkan nilai di bawah ini untuk memutar sprite:
var PI2 = Math.PI * 2; var rotateAngle = Math.PI / 32;
Untuk memutar sprite, tambahkan code di bawah ini pada update setelah code yang merubah warna background:
sprite.rotation += rotateAngle; sprite.rotation %= PI2; //Wrap rotation at PI * 2
Reload browser, dan Anda akan melihat sprite berputar.
Code Anda akan terlihat seperti ini sekarang:
<html>
Langkah selanjutnya adalah memulai menggunakan asset seperti gambar untuk membuat sprite lebih menarik. Untuk melakukan ini, Anda harus meng-hosting file di web server. Banyak sekali cara untuk itu, jika Anda mempunyai Python, Anda bisa memlulai basic web server dengan command-line dengan perintah di bawah ini:
# For Python 2.7 use
Jalankan perintah tersebut dari direktori yang sama dengan file .html Anda dan pergi ke 127.0.0.1:8000 atau localhost:8000 di browser Anda. Anda akan melihat daftar file di direktori tersebut. Click file .html tersebut untuk melihat file. File tersebut akan berjalan sama seperti sebelumnya. Sekarang Anda bisa mulai memuat file gambar sebagai tekstur dari sprite. Mulailah dengan membuat tekstur menggunakan GraphicsDevice setelah pembuatan sprite:
var texture = graphicsDevice.createTexture({
Dalam membuat tekstur file src bisa png, jpg, dds or tga. Anda dapat mengetes browser And mendukung atau tidak dengan menggunakan function graphicsDevice.isSupported. Memanggil createTexture akan menyebabkan JavaScript untuk meminta gambar. Function onload akan dipanggil ketika gambar sudah diterima dan akan mengembalikan tekstur objek jika berhasil atau null jika gagal. Passing tekstur yang telah dimuat di sprite dan menyeting textureRectangle untuk mengunakan lebar dan panjang dari tekstur akan mengijinkan code untuk memulai menggambar. Jika Anda hanya melihat sprite putih, periksalah catatan di bawah:
Catatan
Draw2D membutuhkan tekstur yang mempunyai dimensi “power-of-2” sepertI, 16x16, 64x32, 128x512, dan lain-lain serta mempunyai mipmaps yang dinyalakan di contoh ini. File contoh memenuhi kebutuhan ini. Jika Anda menggunakan gambar Anda maka Anda harus yakiin.
Catatan
Jika Anda mencoba untuk meng-host file file Anda di server yang berbeda, server tersebut harus mengijinkan CORS. corsproxy.com akan mengijinkan Anda untuk mengetes dengan gambar sepeti contoh http://www.corsproxy.com/www.website.com/img/name.png, jika tidak Anda harus host file Anda di server Anda sendiri.
Untuk menggunakan gambar transparan, Anda harus mengganti bagaimana gambar itu di-render. Dalam contoh ini, pindahkan panggilan drawSprite ke draw2D.begin dan end dan set the draw mode ke “additive” dimana hal ini akan membuat warna gelap transparan untuk particle_spark. Code-nya akan terlihat sepertti ini:
draw2D.begin(); // Opaque
Catatan
Jika gambar sudah mempunyai alpha transparency, set mode-nya ke ‘alpha’ untuk menggunakan channel alpha.
Anda bisa mengganti ukuran sprite dengan berbagai cara. Merubah skala merupakan salah satunya. Setelah deklarasi rotationAngle, defisinikan variabel di bawah ini:
var scale = [1,1];
Di function update tambahkan code di bawah ini:
scale[0] = scale[1]=Math.cos(sprite.rotation) + 2;
Ini akan mengecilkan dan membesarkan sprite antara 1.0 dan 2.0 dengan memanipulasi skala.
File Anda akan terlihat seperti ini:
<html>
Pada titik ini, Anda sudah bisa menggunakan dasar mrnggambar API untuk memanipulasi elemen <canvas> menggunakan Turbulenz Engine! Untuk informasi API yang lain, lihat link di bawah:
• Low-level API, 2D Physics API, 3D Physics API
• High-level API • Turbulenz Services API
• Protolib API
4.1.3. Menulis Game Turbulenz
.
Setelah Anda familiar dengan bagaimana API Turbulenz digunakan, Anda busa memulai membuat game. Untuk membantu Anda mengenal struktur aplikasi pertama Anda, Turbulenz menyediakan banyak tools, contoh dan fitur untuk mendukung browser lama maupun baru menjadi lebih mudah. Hal ini tercipta dalam bentuk file/API servers, code/asset processing tools, build configurations dan masih banyak lagi.
Bagian ini akan mulai memperkenalkan Anda kepada tools dan menjelaskan beberapa penggunaan terminologi Turbulenz saat menjelaskan aplikasi. Code yang pada Turbulenz engine bisa dijalankan di beberapa konfigurasi.
• Mode : Hanya menggunakan in-built features pada browser. Ini dinamakan canvas
• Canvas : mode (tertulis setelah tag HTML <canvas> dimana browser modern menampilkan fitur rendering yang cepat). Sama seperti kemampuan accelerated graphics, browser modern sering mengijinkan akses ke daerah fungsionalitas low-leberl seperti memutar suara, even input dan masih banyak lagi. Di canvas mode, Turbulenz Engine akan memilih API mana yang tersedia dan mengunakan fitur mana yang paling cocok untuk menyediakan fungsionalitas pada game. Game yang menggunakan mode ini membutuhkan browser modern dan tidak membutuhkan ekstensi apapun.
• Dengan Ekstensi Browser: Untuk menyediakan game dengan set yang telah ditetapkan dan karakteristik performa yang pada browser yang lebih luas, Turbulenz menyediakan plugin binary kecil yang menampilkan beberapa fungsionalitas untuk JavaScript. Game menargetkan konfigurasi ini akan membuat user untuk menginstall ekstensi ini. Menggunakan plugin akan menjamin game akan mendukung penuh browser dengan berbagai sistem operasi. Ekstensi turbulenz untuk browser termasuk dukungan asli untuk beberapa fitur yang belum tersedia di browser (seperti simulasi fisika atau render ke beberapa buffer warna). Termasuk juga adalah mesin JavaScript yang dipilih dan dioptimalkan untuk eksekusi kode game. Ini berarti bahwa kode permainan akan memiliki karakteristik kinerja yang lebih dapat diprediksi namun tetap memiliki akses penuh ke semua API dan data, seperti kode yang mendorong sisa halaman HTML.
Kumpulan fungsionalitas built-in dalam browser modern terus meningkat, dan mode canvas sekarang menjadi pilihan yang layak bagi banyak game. Mayoritas dari kode yang membentuk Turbulenz Engine dibagi antara konfigurasi, dan kesamaan game biasanya dibuat konfigurasi baik tanpa perubahan kode. Kami menyarankan bahwa pengembang mengetes dan membandingkan kinerja dua konfigurasi dari tahap awal. Tergantung pada dukungan yang diberikan oleh browser, mungkin masih ada keterbatasan dalam mode canvas. Namun kesenjangan semakin menyempit sepanjang waktu.
Catatan
EXPERIMENTAL Dikenalkan di SDK 0.25.0 Turbulenz telah menambah support untuk menuis game di TypeScript. Compiler TypeScript mengijinkan pengembang untuk menulis code dalam syntax sama dengan JavaScript dengan tambahan type checking dan code verification untuk membantu developer untuk mengembangkan aplikasi besar. Informasi mengenai TypeScript bisa ditemukan di sini.
4.1.4. Mode Build
.
SDK Turbulenz berisi dengan build tools yang menjalankan code game sebelum code dieksekusi. Tool-tool ini melakukan beberapa function optimisasi, dan juga secara otomatis membuat code html yang tepat untuk memuat dan menjalankan game. Tools mendukung beberapa mode build:
plugin
Versi rilis dari game (cocok untuk deployment), menggunakan plugin ekstension browser untuk meyediakan akses low-level. Tool maketzjs digunakan untuk mem-bundle code JavaScript dan semua library ke dalam satu file .tzjs. File yang Turbulenz Engine bisa muat dengan satu request ke server. Code akan dieksekusi oleh JavaScript Engine yang tertanam di plugin browser.
canvas
Equivalen dengan plugin, tetapi plugin extension browser tidak digunakan. Melainkan library platform yang membuat fungsionalitas ke browser. Dalam mode ini, code masih di-bundle dalam satu fule dan bisa dipadatkan seperti pada plugin mode. Tetapi code yang di-bundle dalam format file .js.
canvas-debug
Digunakan untuk debugging selama proses development. Dalam mode ini sangat sedikit transformasi code JavaScript. Perintah (menggunakan tool makehtml) file template .js, dan secara optional sebuah file .html sebagai input dan menghasilkan file .html yang memuat game. Dalam mode ini, code selalu berjalan menggunakan JavaScript engine, mengijinkan tools standar web development bisa digunakan untuk mendebug code (lihat Debugging).
4.1.5. The Local Development Server
.
Di dalam SDK Turbulenz SDK terdapat server kecil (dikenal juga sebagai local development server) yang bertujuan agar dapat dijalankan di komputer pengembang. Local development server ini bisa menyediakan file, men-simulasikan service online Turbulenz, me-record code game dan data serta me-manage dan men-deploy project project game.
Walaupun terkadang game bisa dijalankan secara langsung dengan membuka file game secara langsung, kami menyarankan pengembang untuk menggunakan local development server untuk menjalankan dan mengetes game selama development. Kebanyakan browser mengharuskan aplikasi dijalankan menggunakan server, khusunya dalam mode canvas.
4.2. Membuat Aplikasi Turbulenz
.
4.2.1. Contoh Sederhana
.
Dengan local server yang berjalan:
1. Buat folder seperti C:\dev\myfirstapp atau /Users/*USERNAME*/Development/myfirstapp untuk aplikasinya.
2. Copy (JANGAN DIPINDAHKAN) folder jslib dari direktori SDK yang telah di-install ke foder aplikasi Anda. Hal ini diperlukan untuk proses build berjalan.
3. Buka browser dan buka http://127.0.0.1:8070. Gunakan tombol plus di pojok kiri halaman untuk membuat project baru dan isi textbox ‘Game Directory’ dengan path direkrori yang telah dibuat pada step 1. Klik ‘CONFIRM’ pada box drop down. Tambahkan judul seperti “My First App”. Sisanya biarkan saja default.
Catatan
Pada filed game directory, Anda harus mengisi full path-nya. Jangan menggunakan ~/ untuk mengganti /Users/*USERNAME*/ Sekarang pasti sudah ada file manifest.yaml di dalam direktori aplikasi Anda.
4. Buat file baru myfirstapp.js di dalam direktori aplikasi Anda dengan isi seperti di bawah ini:
TurbulenzEngine.onload=functiononloadFn()
5. Buka direktori Environment Turbulenz dengan command prompt dan pindahkan direktori ke folder baru Anda. Masukan perintah di bawah ini untuk mem-build halaman html yang bisa menjalankan aplikasi Anda pada mode canvas-debug:
makehtml--modecanvas-debug-t.myfirstapp.js-omyfirstapp.canvas.debug.html
File myfirstapp.canvas.debug.html pasti sudah terbuat dalam direktori yang sekarang.
Catatan
Pada Linux, SDK hanya mendukung untuk menjalankan dalam mode canvas saja. Use the command for canvas-debug below in order to run the app on Linux browsers.
6. Kembali ke browser Anda, klik tombol Play. Halaman web harus membuat file myfirstapp.debug.html. Klik file ini untuk mrmbuka dan menjalankan apllikasi. Anda akan melihat halaman development HTML default yang berisi instance aplikasi Anda (untuk saat ini hanya area kosong).
Cobalah untuk merubah value yang di pass melalui gd.clear dalam code (komponennya merepresentasikan Merah, Hijau, Biru, dan Alpha). Jalankan kembali langkah build (5) dan klik reload di browser.
Contoh ini menunjukan tool makehtml yang sedang digunakan untuk membangun aplikasi dalam mode canvas-debug seperti di atas. Mode lainnya seperti ini.
plugin
Untuk plugin (dan mode canvas), code .tzjs di-build menggunakan tool maketzjs , lalu makehtml digunakan untuk mrmbuat halaman HTML untuk memuat dan menjalankannya:
Maketzjs –mode plugin –t . –o myfirstapp.tzjsmyfirstapp.js
canvas
Proses ini sama seperti dalaam kasus plugin, tapi bundle-nya dibuat pada file .js (jadi browsernya akan memuatnya secara langsung):
Maketzjs –mode canvas –t . -omyfirstapp.canvas.jsmyfirstapp.js
Aplikasi ini secara sederhana membersihkan layar setiap frame. Jalankan perintah di atas dengan flag -h untuk melihat opsi yang tersedia.
4.2.2. Explanation of Simple Example
.
Mesin mengharuskan bahwa permainan menentukan titik masuk dan menetapkan ke TurbulenzEngine.onload, untuk dipanggil pada saat waktu buka. Secara umum permainan akan menggunakan fungsi titik masuk ini untuk melakukan beberapa inisialisasi dan jadwal operasi asynchronous (seperti update layar dan pemuatan) sebelum kembali kontrol ke browser.
Obyek global mesin Turbulenz mengekspos API tingkat rendah dari fungsi mesin. Berikut kode menggunakannya untuk membuat sebuah GraphicsDevice (melalui panggilan grafis API yang dibuat), sebelum mendefinisikan fungsi centang. Berikutnya, TurbulenzEngine digunakan lagi, kali ini untuk jadwal fungsi centang baru ditetapkan untuk dipanggil 60 kali per detik.
Detik menggunakan GraphicsDevice (melalui variabel gd dibuat dalam lingkup entry point onloadFn) untuk membersihkan buffer kembali dan menampilkannya ke jendela browser.
4.2.3. Penggunaan JavaScript Libraries
.
Kode dalam file js lain dapat diimpor menggunakan markup dipahami oleh Turbulenz membangun alat. Mayoritas Turbulenz mesin terdiri dari kode perpustakaan JavaScript, yang terkandung dalam direktori jslib yang dapat diimpor dengan cara ini. Ketika memulai sebuah proyek baru kami menyarankan pengembang mengambil salinan direktori ini dan segera menyerahkan versi berubah ke sistem kontrol revisi mereka.
1. Copy folder jslib dari instalasi jalan ke C: \ dev \ myfirstapp (atau lokasi yang Anda pilih untuk contoh sederhana di atas).
2. Tambahkan dua baris berikut ke atas myfirstapp.js:
/*{{ javascript("jslib/camera.js") }}*/
3. Dalam onloadFn, sebelum fungsi centang didefinisikan, membuat objek Kamera dan objek Lantai, sebagai berikut:
var md = TurbulenzEngine.createMathDevice({});
4. Dalam onloadFn, SEBELUM fungsi fungsi centang didefinisikan, MEMBUAT objek Kamera Dan objek Lantai, sebagai berikut:
camera.updateViewMatrix();
5. Menjalankan ulang perintah di atas untuk membangun html (dan .tzjs) file dan membukanya di browser.
Kode perpustakaan JavaScript direferensikan menggunakan teknik di atas ditangani dalam satu dari dua cara, tergantung pada modus membangun. Dalam modus kanvas-debug, html diciptakan oleh makehtml mengandung <script> tag yang menyebabkan kode yang akan dimuat langsung ke dalam halaman. Ketika menggunakan plugin dan kanvas mode, file js di rubah menjadi satu file mandiri yang dapat dimuat dengan satu permintaan ke server.
4.2.4. Penutupan
.
Meskipun JavaScript adalah sampah yang dikumpulkan bahasa, penting untuk melakukan operasi pemadaman tertentu secara manual. Secara khusus, API online harus secara eksplisit shutdown untuk memberitahu server bahwa sesi game finishing. Shutdown yang eksplisit juga membantu untuk menjamin bahwa benda-benda yang hancur dalam urutan yang benar.
Kode permainan dapat mengatur properti onunload objek TurbulenzEngine ke callback yang akan dipanggil saat mesin akan segera ditutup. Permainan harus menggunakan mekanisme ini untuk shutdown perpustakaan dan berusaha untuk menghapus referensi. Sebagai contoh, callback penutupan untuk aplikasi sederhana di atas mungkin terlihat seperti:
TurbulenzEngine.onunload = function gameOnunloadFn ()
Untuk menggunakan ini dalam contoh, menempatkan kode sebelum TurbulenzEngine.setInterval
4.2.5. pemuatan
.
Kami selanjutnya memperluas sampel di atas untuk menunjukkan membangun shader CgFX dan loading untuk digunakan pada saat runtime.
1. Jalankan perintah berikut dari prompt lingkungan dalam direktori proyek Anda untuk membangun sebuah shader CgFX ke file JSON
*INSTALLDIR*/tools/bin/*PLATFORM*/cgfx2json \
2. Memperluas set dari termasuk di bagian atas file terlihat seperti ini
/*{{ javascript("jslib/camera.js") }}*/
3. Tambahkan kode berikut setelah lantai dibuat:
var shader = null;
Kode ini melakukan beberapa hal. Ini pertama mendefinisikan variabel teknik dan shader yang akan ditetapkan kemudian setelah shader telah dimuat. Berikutnya menciptakan objek RequestHandler yang digunakan untuk memuat shader (perhatikan callback onload yang mem-parsing data shader dan menciptakan shader runtime dari itu).
Akhirnya, tingkat rendah VertexBuffer, Semantik dan TechniqueParameters objek diciptakan dalam persiapan untuk rendering saat shader dimuat.
4. Tambahkan kode berikut dalam membuat lingkaran, segera setelah panggilan untuk floor.render ():
if (technique)
Setelah shader telah dimuat dan callback onload telah menciptakannya, teknik tidak akan lagi nol dan isi ifstatement akan dipanggil. Kode menghitung sudut rotasi berdasarkan waktu saat ini, menghitung matriks pandangan dunia-proyeksi yang cocok berdasarkan matriks proyeksi dari kamera, menetapkan teknik shader dimuat dan parameter dan kemudian membuat buffer vertex shader menggunakan itu.
5. Membangun kode ini dan kembali file HTML yang dihasilkan di browser Anda. Anda akan melihat sebuah kubus berputar muncul dalam adegan.
catatan
Untuk singkatnya kode ini tidak mengandung pengecekan error. Kode produksi harus memeriksa setidaknya setiap objek dibuat dengan benar dan bahwa permintaan shader berhasil.
4.3. debugging
.
4.3.1. Pemeriksaan Kesalahan
.
Hal ini sangat dianjurkan bahwa pengembang memeriksa kembali nilai-nilai dari panggilan ke Turbulenz mesin API, terutama selama penciptaan benda-tingkat tinggi seperti GraphicsDevice dan SoundDevice mana kegagalan untuk membuat objek dapat menunjukkan bahwa browser tidak mendukung API yang diperlukan , atau mesin klien tidak memiliki kemampuan yang dibutuhkan.
Properti onerror dari objek TurbulenzEngine dapat diatur untuk callback yang ditetapkan pengguna yang akan dipanggil saat mesin mendeteksi masalah. Hal ini dapat menangkap bug seperti argumen yang tidak valid dilewatkan ke API, dan jadi kami merekomendasikan bahwa ini diatur selama pengembangan:
TurbulenzEngine.onerror = function gameErrorFn (msg)
catatan Dalam modus kanvas, memeriksa mesin Turbulenz kesalahan sering dihilangkan untuk alasan kinerja. Kami merekomendasikan bahwa pengembang secara teratur menjalankan kedua plugin dan kanvas versi permainan mereka untuk menangkap sebanyak coding kesalahan mungkin.
4.3.2. Browser Debugging Alat
.
Turbulenz merekomendasikan Chrome menggunakan kanvas membangun sebagai debugging dan pengujian lingkungan, meskipun perlu bereksperimen dengan fitur debugging yang ditawarkan oleh masing-masing browser utama. Perhatikan bahwa dalam beberapa kasus mode debug hanya tidak didukung pada browser tertentu.
Sebuah debug lingkungan kerja harus memungkinkan Anda untuk mengatur breakpoints, langkah melalui kode dan melihat nilai-nilai variabel.
Lihat bagian Debugging Permainan Kode untuk lebih jelasnya.
4.4. Assets
.
Ada banyak masalah yang berkaitan dengan pengolahan dan pemuatan aset yang dapat memiliki efek pada kinerja dan beban kali. Aset Bagian berkaitan dengan ini secara lebih rinci, meliputi topik-topik seperti caching dan praktik terbaik untuk jaringan pipa aset.
4.4.1. Konversi aset untuk JSON
.
The Turbulenz SDK dilengkapi dengan serangkaian alat untuk mengkonversi berbagai jenis aset ke file JSON. Browser modern telah dioptimalkan dukungan asli untuk parsing JSON, dan itu adalah sepele untuk menambahkan data kustom ke file JSON. Browser umumnya juga mendukung format gambar seperti PNG dan JPEG untuk digunakan dalam tekstur. Gambar dikompresi didukung penuh ketika menjalankan dengan ekstensi browser Turbulenz, tapi dalam mode kanvas mungkin memerlukan dekompresi manual dalam JavaScript.
Turbulenz tools disediakan sebagai seperangkat mandiri program baris perintah. Hal ini memungkinkan pengembang untuk dengan mudah mengintegrasikan mereka ke dalam pipa yang ada atau membungkus mereka dalam skrip kustom mereka sendiri.
Beberapa contoh alat yang berguna untuk pembuatan aset meliputi:
• dae2json: Mengkonversi data diformat Collada ke dalam format JSON dipahami oleh TurbulenzEngine. Dapat diperintahkan untuk mengambil hanya tipe data tertentu, misalnya animasi atau fisika data, memberikan pengembang kontrol penuh atas bagaimana data dibagi dan pada frekuensi apa yang harus dimuat. Output dari alat ini dipahami oleh objek Scene dan dapat dikirimkan langsung ke sana pada saat runtime. Bendera-j dapat digunakan untuk memaksa alat ini untuk menulis JSON dalam format manusia-ramah (tapi kurang optimal). Lihat deskripsi lengkap atau memanggil alat dengan bendera h untuk melihat set lengkap pilihan.
• cgfx2json: Membaca dalam file .cgfx, ekstrak program, teknik dan parameter dan ke format yang digunakan dengan metode rendah levelcreateShader. Dengan demikian, tidak ada transformasi data diperlukan saat runtime untuk membuat shader dari objek ini.
Daftar lengkap alat dan deskripsi mereka diberikan dalam Bagian Tools.
4.4.2. Loading
.
Pada runtime, aset dimuat ke dalam permainan dengan mengirimkan permintaan ke server (menggunakan fungsi TurbulenzEngine.request). Permintaan ini dilakukan asynchronously, dengan data atau kesalahan kode yang dilewatkan ke aplikasi melalui callback.
Untuk mempermudah proses pembuatan permintaan tersebut, penanganan kesalahan dan berurusan dengan perbedaan halus antara browser, mesin Turbulenz memberikan beberapa objek tingkat tinggi seperti RequestHandler. Objek seperti Scene Object melaksanakan fungsi yang pengembang dapat menemukan berguna untuk loading dan mengelola aset pada saat runtime.
Sampel scene_loading dan aplikasi sampleapp di SDK menyediakan contoh aset pembebanan.
4.4.3. Pertimbangan Optimasi
.
Caching
Mekanisme caching Browser dapat memiliki efek besar pada beban kali untuk data yang di-cache berhasil. Server HTTP dapat memberikan petunjuk untuk browser untuk memberitahu bagaimana yang data dapat di-cache dan untuk berapa lama (Meskipun browser bebas untuk mengabaikan Ulasan ini dan berpotensi menggunakan kriteria lain untuk keputusan make caching).
Turbulenz server Pertimbangkan direktori staticmax untuk Mengandung data yang berubah sangat jarang. Jika proyek permainan Anda berisi staticmax direktori maka data diambil dari itu akan disajikan dengan header HTTP yang memberitahu browser bahwa hal itu dapat cache untuk jangka waktu yang panjang.
Ini berarti bahwa perubahan data di direktori staticmax tidak dapat tercermin dalam permainan Anda sampai cache browser membersihkan. Untuk menghindari situasi ini sebaiknya pengkodean hash dari isi data ke dalam nama aset yang dibangun pada disk. Ketika isi perubahan, nama file dari aset tidak akan lagi Muncul di cache browser dan karena itu akan dimuat ulang.
Pemetaan Tabel
Sejak strategi seperti ini dapat membuat sangat sulit, untuk melacak file yang sesuai dengan file sumber tertentu, Turbulenz merekomendasikan penggunaan tabel pemetaan, dihasilkan ketika aset yang dibangun. Tabel pemetaan ini dimuat (uncached) oleh permainan yang akan digunakan untuk mencari file staticmax sesuai dengan file sumber yang diberikan. Dengan cara ini, permainan dapat mengacu pada aset kode sumber asmyshader.cgfx dan loader kode tersebut dapat meminta versi terbaru dari server, mudah-mudahan menggunakan caching secara optimal.
Tabel pemetaan didukung oleh Turbulenz API yang berhubungan dengan pembebanan. Lihat Aset bagian dan Membuat Tabel Pemetaan untuk informasi lebih lanjut.
Arsip
Jumlah permintaan individu browser juga dapat memiliki pengaruh pada waktu loading. Setiap permintaan membawa data biaya overhead karena protokol HTTP, dan bisa ada latency signifikan yang terkait dengan permintaan individu. Menurut pengelompokan data saat itu harus dimuat dapat membantu mengurangi jumlah permintaan individu membuat permainan Anda ke server. Lihat bagian Tambah Aset ke Arsip untuk satu metode pengelompokan data. Lihat Pertimbangan untuk Asset Melayani untuk diskusi lebih lanjut tentang topik ini.
4.5. TypeScropt
.
Ditambahkan SDK 0.25.0
.
Aplikasi bangunan di naskah yang menggunakan definisi jenis yang ditentukan oleh Turbulenz perpustakaan membutuhkan alat tambahan beberapa Asalkan luar SDK.
Termasuk dalam SDK:
• / tslib - Pelaksanaan sumber naskah dari perpustakaan dan layanan Turbulenz.
• / jslib-modular - Generated pengelompokan modular tertentu Turbulenz Ulasan perpustakaan mereka dengan definisi naskah. Ulasan ini memungkinkan pengembang untuk membangun aplikasi terhadap naskah Ulasan jslib komponen tertentu mereka.
Tidak termasuk dalam SDK:
• naskah compiler
• IDE / editor dengan sintaks naskah / auto-completion
Peringatan
Naskah tidak cocok untuk setiap proyek. Lihatlah pro dan kontra di sini dan pastikan Anda memahami apa yang dilakukannya dengan visitingtypescriptlang.org
4.5.1. Instalasi
.
Untuk mengkompilasi aplikasi ditulis dalam naskah untuk Turbulenz Anda memerlukan compiler naskah. Anda akan membutuhkan perintah TSC menjadi callable dari lingkungan Turbulenz.
Catatan
Naskah compiler termasuk dalam lingkungan Turbulenz sebagai bagian dari repositori open source.
1. Instal naskah dari petunjuk tentang download typescriptlang.org
2. Mulai lingkungan Turbulenz pada platform Anda.
3. Periksa compiler dengan menjalankan perintah berikut di root directory Turbulenz SDK:
tsctslib / debug.ts
Perintah ini akan menghasilkan JavaScript untuk objek kamera dalam direktori yang sama (tslib). Jika compiler bekerja, perintah harus lengkap dengan tidak ada kesalahan dan Anda dapat menghapus file output setelah membacanya.
4.5.2. IDE / Editor Pengaturan
.
Naskah yang paling menguntungkan bila dikombinasikan dengan lingkungan pengembangan. Berbagai tingkat dukungan yang tersedia untuk mengikuti IDE / Editor:
• Visual Studio
• Teks Sublime
• Emacs
• Vim
Informasi lebih lanjut dapat ditemukan di sini
Visual Studio 2012/2013
Dukungan naskah yang paling lengkap untuk Visual Studio 2012/2013.
Sublime Text 2
Jika Anda menggunakan Sublime Text 2 sebagai IDE default, ada sejumlah proyek naskah untuk Sublime pada berbagai tahap perkembangan. The sintaks dapat didownload dari halaman Microsoft atau mudah diinstal dari Sublime Paket Kontrol
1. Ikuti petunjuk untuk menginstal kontrol paket
2. Dari Command Palette (Biasanya CTRL + SHIFT + P) jenis dan pilih "Paket Control: Install Package"
3. Dari daftar paket pilih "naskah" File
4. Membuka ts sekarang harus sintaks disorot (Mungkin memerlukan reopening Teks Sublime)
4.5.3. Kompilasi
.
Catatan
Perintah yang ditentukan dalam bagian ini ditulis untuk digunakan dengan TSC versi 0.9.1. Untuk perintah terbaru, melihat informasi proyek terbaru
Dasar penyusunan
Untuk mengkompilasi file ts untuk JavaScript cukup ketik:
tsc filename.ts
Ini akan filename.js output dan kesalahan akan tercantum pada baris perintah. File output JavaScript akan berlokasi di direktori yang sama dengan file sumber. Untuk menentukan nama file yang berbeda / lokasi, gunakan perintah -out misalnya
tsc --out new_dir/new_filename.js filename.ts
Kompilasi aplikasi naskah terhadap Turbulenz
Untuk membangun aplikasi naskah yang menggunakan Turbulenz Anda akan membutuhkan deklarasi naskah terletak di jslib-modular dan implementasi dari jslib. Anda akan membutuhkan direktori berikut:
• jslib
• jslib-modular
Direktori jslib-modular memiliki kelompok definisi sebagai berikut
SDK 0.25.0
jslib-modular
• aabbtree.d.ts: pohon AABB digunakan oleh adegan
• base.d.ts: Deklarasi untuk meningkatkan lib.d.ts
• canvas.d.ts: pelaksanaan Turbulenz kanvas API
• debug.d.ts: Debug fungsi
• fontmanager.d.ts: Font render
• jsengine.d.ts: Mesin inti
• jsengine_base.d.ts: kelas bersama Fundamental di mesin tingkat tinggi
• jsengine_debug.d.ts debug ekstra fungsionalitas untuk mesin-tingkat tinggi
• jsengine_deferredrendering.d.ts: Penambahan untuk DeferredRendering
• jsengine_forwardrendering.d.ts: Penambahan untuk ForwardRendering
• jsengine_simplerendering.d.ts: Penambahan untuk SimpleRendering
• physics2d.d.ts: fisika 2d • servicedatatypes.d.ts: Referensi yang digunakan oleh layanan
• services.d.ts: Turbulenz layanan online API
• turbulenz.d.ts: Tingkat rendah Platform API (Plugin mesin API)
• tzdraw2d.d.ts: fungsi render 2d
• utilities.d.ts: fungsi tingkat rendah bersama
• vmath.d.ts: implementasi perpustakaan Turbulenz Math
• webgl.d.ts: deklarasi tambahan untuk GraphicsDevice Menambahkan SDK 0.26.0 jlib-modular capturedevices.d.ts: Deklarasi untuk CaptureDevice yang Menambahkan SDK 0.27.0 jlib-modular
• spatialgrid.d.ts: pelaksanaan SpacialGrid
• svg.d.ts: SVG render deklarasi
Menambahkan SDK 0.26.0
jlib-modular
• capturedevices.d.ts: Deklarasi untuk CaptureDevice
Menambahkan SDK 0.27.0
jlib-modular
• spatialgrid.d.ts: pelaksanaan SpacialGrid
• svg.d.ts: SVG render deklarasi
Menambahkan SDK 0.28.0
jlib-modular
• particle system.d.ts: Komponen Sistem Partikel GPU Dengan
menggunakan metode ini Anda akan menghasilkan file JavaScript untuk aplikasi Anda, yang dapat Anda gunakan dalam hubungannya dengan jslib. Untuk menjelaskan bagaimana untuk melakukan hal ini, kita akan mengkonversi SampleApp untuk naskah dan mengkombinasikannya dengan deklarasi jslib-modular. Anda akan perlu untuk memulai dengan melakukan hal berikut:
1. Buat folder baru di SDK_DIR / apps / sampleapp / tsscripts
2. Salin file berikut untuk struktur folder
• SDK_DIR / apps / sampleapp / scripts / sampleappmain.js -> SDK_DIR / apps / sampleapp / tsscripts / sampleappmain.ts (Catatan: Jauhkan isi dari file asli, tapi mengubah ekstensi)
• SDK_DIR / apps / sampleapp / scripts / sampleappmain.js -> SDK_DIR / apps / sampleapp / scripts / sampleappmain.js.bk (CATATAN: Membuat cadangan dari file asli)
• SDK_DIR / sampel / scripts / motion.d.ts -> SDK_DIR / apps / sampleapp / scripts / motion.d.ts
• SDK_DIR / sampel / scripts / sceneloader.d.ts -> SDK_DIR / apps / sampleapp / scripts / sceneloader.d.ts
3. Tambahkan referensi berikut ke file naskah. Mereka harus ditentukan setelah deklarasi global, tapi sebelum fungsi theTurbulenzEngine.onload
/// <reference path="../../../jslib-modular/turbulenz.d.ts" />
Selain itu, Anda akan perlu menambahkan referensi untuk gerak dan sceneloader, yang merupakan bagian dari direktori script:
/// <reference path="../scripts/motion.d.ts" />
catatan
Deklarasi dalam contoh ini membutuhkan file deklarasi tambahan. Jika Anda memindahkan lokasi jslib-modular, pastikan untuk menyertakan semua file.
catatan
Dalam Visual Studio, IDE akan memperingatkan Anda yang kelas tidak dapat menemukan referensi untuk dan menggarisbawahi mereka dalam merah. Jika Anda menjalankan compiler naskah langsung, maka akan daftar mereka dalam output. Setelah semua referensi telah puas, tidak akan ada pesan tambahan.
4. Untuk membangun sampel, jalankan perintah
tsc --out apps/sampleapp/scripts/sampleappmain.js apps/sampleapp/tsscripts/sampleappmain.ts
Outputnya adalah sama dengan file sampleappmain.js asli, tetapi format yang sedikit berbeda. Perintah ini akan menimpa sampleappmain.js asli Jika Anda ingin menjalankan versi rilis, Anda harus membangun kembali app.
5. Jalankan aplikasi dari server lokal dan membuka debugger. Kode sumber untuk sampleapp harus output naskah yang dihasilkan. Anda dapat breakpoint dan melangkah melalui kode seperti JavaScript biasa di debug membangun.
6. Ini adalah yang paling dasar dari konversi, tapi sekarang Anda dapat mulai menambahkan naskah kode tertentu untuk aplikasi.
4.6. Membangun kembali Aplikasi
.
Kadang-kadang ketika belajar bagaimana menggunakan Turbulenz fitur yang Anda mungkin ingin mencoba mengubah aplikasi yang sudah ada untuk mencoba fungsi baru atau argumen yang berbeda. Tergantung mana file (s) Anda mengubah Anda ada file tertentu Anda mungkin atau mungkin tidak harus membangun kembali. Perubahan pola file memerlukan pembangunan kembali sebagai berikut:
• scripts/*.js -> *.canvas.js, *.tzjs
• templates/*.js -> *.canvas.js, *.tzjs, *.canvas.debug.html. *.canvas.release.html, *.release.html
• templates/*.html -> *.canvas.debug.html. *.canvas.release.html, *.release.html
• jslib/*.js -> *.canvas.js, *.tzjs, *.canvas.debug.html. *.canvas.release.html, *.release.html
TypeScript:
• tsscripts/*.ts -> scripts/*.js (Sometimes templates/*.js)
Menambahkan script tambahan untuk salah satu sampel / apps mungkin akan perlu template diperbarui dan membangun kembali lengkap. Berikut daftar perintah yang diperlukan untuk sampel dan aplikasi masing-masing.
4.6.1. Sampel
.
Dalam sampel sebagian besar contoh kode terletak di file template, maka Anda mungkin akan perlu untuk membangun kembali semua konfigurasi untuk sebagian besar perubahan:
Catatan
Perintah harus dijalankan dengan Turbulenz Lingkungan diaktifkan dari SDK / direktori sampel
Variabel Asumsi:
• SAMPLENAME - Nama sampel untuk membangun kembali misalnya 2dcanvas, animasi dll • TYPESCRIPTNAME - Nama file naskah tertentu yang ingin membangun kembali misalnya debugphysics, morph, sceneloader dll
• JSLIBMODULARDEP - Nama setiap file jslib-modular sampel tergantung pada misalnya jsengine_base, turbulenz, physics2d dll Umumnya sampel daftar apa yang mereka butuhkan dalam template berkas. Lihat jslib-modular.
• OTHERDEP - Setiap file lain yang membutuhkan sampel.
• SAMPLESCRIPT - Ini adalah skrip bersama bahwa sampel memerlukan untuk menjalankan misalnya morph, gerak, sceneloader dll
• [file.ts ..] - Mengacu pada daftar file. Anda harus mengganti ini dengan file yang Anda butuhkan. Tidak termasuk [dan ..].
Naskah Hanya:
Untuk membangun kembali script helper sampel (bersama di sampel), Anda harus tahu dependensi mereka dan melibatkan mereka melalui file deklarasi. Sampel menggunakan jslib dan jslib-modular untuk file naskah mereka. Jika tidak semua dependensi terpenuhi, perintah akan menampilkan kesalahan dan TYPESCRIPTNAME.d.ts tidak akan dihasilkan.
tsc --outDir scripts -d tsscripts/TYPESCRIPTNAME.ts [../jslib-modular/JSLIBMODULARDEP.d.ts ..] [OTHERDEP.d.ts ..]
Untuk membangun kembali sampel template (per sampel), Anda harus tahu apa yang menggunakan sampel dan termasuk dependensi melalui * .d.ts file dalam jslib-modular. File SAMPLESCRIPT akan mencakup hal-hal seperti script bersama yang perlu sampel.
tsc--outDirtemplatestsscripts/templates/SAMPLENAME.ts[../jslib-modular/JSLIBMODULARDEP.d.ts..][scripts/SAMPLESCRIPT.d.ts..][OTHERDEP.d.ts..]
Setelah diperbarui JavaScript telah dihasilkan, Anda harus membangun kembali file JavaScript yang diperlukan.
catatan
Beberapa sampel mungkin memerlukan perpustakaan didefinisikan eksternal seperti jQuery. Ini dapat ditemukan di sini: https: //github.com/borisyankov/DefinitelyTyped
JavaScript:
Canvas-Debug
makehtml --mode canvas-debug -t templates -t . -o SAMPLENAME.canvas.debug.html SAMPLENAME.js SAMPLENAME.html
Canvas-Release
maketzjs --mode canvas -t templates -t . -o SAMPLENAME.canvas.js SAMPLENAME.js -u ../external/uglifyjs/bin/uglifyjs
Plugin-Release
maketzjs --mode plugin -t templates -t . -o SAMPLENAME.tzjs SAMPLENAME.js -u ../external/uglifyjs/bin/uglifyjs
catatan
Untuk membangun kembali tanpa pemadatan output, melakukan perintah yang sama tanpa pilihan UglifyJS.
5.6.2. Apps
Aplikasi yang terstruktur sedikit berbeda dari Sampel karena mayoritas kode terletak di file script, bukan template utama. Untuk itu, membuat perubahan sederhana biasanya membutuhkan kurang untuk membangun kembali demi konfigurasi pengujian men-debug:
catatan
Perintah harus dijalankan dengan Turbulenz Lingkungan diaktifkan dari SDK / apps / direktori APPNAME
Variabel Asumsi:
• APPNAME – Nama dari aplikasi yang Anda buat seperti multiworm, sampleapp dan lain-lain.
• APPFILE – Nama file apapun yang mendukung pembuatan aplikasi seperti appscene, wormapp etc.
• TYPESCRIPTNAME – Nama dari file TypeScript spesifik jika ingin membuat ulang seperti sampleappmain, inputapp, wormapp.
• JSLIBMODULARDEP – Nama dari setiap file jslib-modular seperti jsengine_base, turbulenz, physics2d. Lihat jslib-modular.
• OTHERDEP – File apapun yang dibutuhkan sample.
• [file.ts ..] – Menunjukan daftar file-file. Anda harus mengganti ini dengan nama yang Anda inginkan. Jangan memasukan [ and ..].
Naskah Hanya:
Untuk membangun kembali script aplikasi, Anda harus tahu dependensi mereka dan referensi mereka baik melalui * .d.ts file definisi atau melalui ts * langsung.
Untuk menghasilkan file dan definisi JavaScript dikombinasikan:
tsc --out scripts/APPNAME.js -d [tsscripts/APPNAME/APPFILE.ts ..] [../../jslib-modular/JSLIBMODULARDEP.d.ts ..] [OTHERDEP.d.ts ..]
catatan
Ini tidak harus menyertakan file APPNAME_entry.ts, yang digunakan untuk menghasilkan template.
Untuk menghasilkan template dari APPNAME_entry.ts berkas:
tsc --out templates/APPNAME.js tsscripts/APPNAME/APPNAME_entry.ts scripts/APPNAME.d.ts [../../jslib-modular/JSLIBMODULARDEP.d.ts ..] [OTHERDEP.d.ts ..]
catatan
Untuk setiap file jslib-modular Anda menambahkan Anda harus memastikan file template memiliki setiap definisi yang diperlukan:
/*{{ javascript("jslib/LIBNAME.js") }}*/
catatan Beberapa sampel mungkin memerlukan perpustakaan didefinisikan eksternal seperti jQuery. Ini dapat ditemukan di sini: https: //github.com/borisyankov/DefinitelyTyped
JavaScript:
Canvas-Debug
makehtml --mode canvas-debug -t templates -t . -o APPNAME.canvas.debug.html APPNAME.js APPNAME.html
Canvas-Release
maketzjs --mode canvas -t templates -t . -o APPNAME.canvas.js APPNAME.js -u ../../external/uglifyjs/bin/uglifyjs
Plugin-Release
maketzjs --mode plugin -t templates -t . -o APPNAME.tzjs APPNAME.js -u ../../external/uglifyjs/bin/uglifyjs
catatan
Untuk membangun kembali tanpa pemadatan output, melakukan perintah yang sama tanpa pilihan UglifyJS.
catatan
Aplikasi yang menggunakan template default harus menghilangkan APPNAME.html untuk setiap perintah makehtml.
4.6 Tools
.
4.6.1 Viewer
.
4.6.1 Penggunaan
.
Syntax
http://x.x.x.x:8070/viewer/game/asset.json
Memungkinkan untuk melihat objek aset game dengan satu set alat yang berbeda untuk debugging mereka.
• Untuk mendapatkan kontrol dari tampilan objek, klik pada penampil.
• Gunakan panah Keyboard atau 'W' / 'S' kunci (maju / mundur) dan 'A' / 'D' (kiri / kanan) untuk memindahkan kamera.
• Gunakan mouse untuk mengontrol sudut pandang kamera.
• Untuk mendapatkan kontrol atas kursor mouse kembali, tekan Escape.
4.6.2.Options
.
• Pilih Wireframe
Membuat objek menggunakan model kawat-frame standar atau cetak biru gaya, untuk memvisualisasikan struktur desain yang mendasari objek aset.
• Pilih shader men-debug
Tergantung pada semantik geometri objek memiliki (normals, binormals, garis singgung), dapat memiliki shader men-debug yang berbeda tersedia untuk membuat itu, yang dapat digunakan untuk debug masalah tampilan objek.
• lampu Menggambar luasan
Menarik luasan lampu dimuat dalam adegan.
• Menggambar interpolators
Menarik animasi hirarki objek kerangka.
• Menggambar Skeleton
Untuk obyek berkulit, menarik kerangka objek.
• Menggambar hirarki adegan simpul
Menarik hirarki objek, jika seperti itu ada.
• Menggambar node buram luasan
Luasan dari node buram akan ditarik dalam warna hijau.
• Menggambar fisika geometri
Untuk objek yang memiliki kinematika, geometri mereka ditarik dengan warna biru, untuk objek dinamis - hijau, dan untuk statis - merah. \
• Luasan Menggambar fisika
Menarik luasan dari objek fisika.
• Daerah Menggambar luasan
Menarik subdivisi adegan di daerah.
• Portal Menggambar
Menampilkan portal di tempat kejadian.
• Menggambar kulit dalam mengikat menimbulkan
Untuk berkulit, objek animasi, akan menampilkan kulit di non-bergerak pose.
• Menggambar normals / garis singgung / binormals
Gambarkan normals / garis singgung / binormals pada setiap titik pada model.
• Skala kecepatan Animasi
Memungkinkan untuk mengontrol kecepatan animasi, untuk objek animasi.
• Skala kecepatan Gerakan
Memungkinkan untuk mengontrol kecepatan gerakan benda.
• Skala Normals
Skala ukuran normals / garis singgung / garis binormals.
4.6.2 Disassembler
.
4.6.2.1. Penggunaan
.
Syntax
http://x.x.x.x:8070/disassemble/game/asset.json
Disassembles dan menampilkan file aset JSON, dengan navigasi sederhana di pohon aset dan kedalaman parameterizable, dan lebar kamus dan daftar. Diberikan pohon JSON memiliki link, yang memungkinkan untuk membuka atau menutup cabang-cabang tertentu dari pohon. Dimana aset JSON lain yang direferensikan di pohon, mereka terkait dan dapat dibongkar juga hanya dengan mengklik pada link.
4.6.2.2. Options
.
• KEDALAMAN
Parameter mengendalikan kedalaman pohon untuk membuat (default = 2). Cabang-cabang bawah kedalaman tertentu akan ditampilkan sebagai runtuh, dengan opsi untuk memperluas mereka secara individu.
• LIST
Parameter untuk mengontrol daftar pemusnahan (default = 5).
• DICT
Parameter untuk mengontrol pemusnahan kamus (default = 5).
• Atur ulang
4.6.3. maketzjs
.
4.6.3.1. Sewa Penggunaan
.
Syntax
maketzjs [options] <input files>
Mengkonversi JavaScript fi le menjadi .tzjs fi le atau .canvas.js fi le, dengan kompresi opsional.
4.6.3.2. Options
.
Untuk set lengkap pilihan yang tersedia, lihat output dari maketzjs h.
--version
Menampilkan nomor versi dan keluar.
--help, -h
Tampilkan bantuan pesan dan keluar.
--verbose, -v
Verbose output.
--silent, -s
Berjalan diam.
--Output = OUTPUT, -o Output
Output file ke proses.
--templatedir = TEMPLATEDIRS, -t TEMPLATEDIRS
Direktori template (multiple diperbolehkan).
--dependency, -M
Output semua dependensi.
--MF = DEPENDENCYFILE
Output semua dependensi untuk DEPENDENCYFILE (membutuhkan -M fl ag).
--mode = MODE, -m MODE
Menghasilkan file untuk digunakan dalam mode run diberikan. Mode yang didukung meliputi: Plugin, kanvas.
--Hybrid
Start up plugin serta TurbulenzEngine berbasis kanvas. Plugin ini akan tersedia sebagai TurbulenzEnginePlugin. Hanya tersedia untuk modus kanvas.
--yui = YUI, -y YUI
Jalur ke kompresor YUI, pengaturan ini memungkinkan compactor
--closure = PENUTUPAN, -c PENUTUPAN
Path ke compiler Penutupan, pengaturan ini memungkinkan compactor
--uglifyjs = UGLIFYJS, u UGLIFYJS
Jalan ke aplikasi UglifyJS, pengaturan ini memungkinkan compactor
--ignore-input-ekstensi
Memungkinkan masukan fi les dengan ekstensi selain Js
--line-break = PANJANG, PANJANG -l
Panjang garis split.
--use-strict
Menegakkan "menggunakan ketat"; pernyataan. Ini menambah satu "menggunakan ketat"; baris di atas kode JavaScript.
--include-use-strict
Jangan menghapus "menggunakan ketat"; pernyataan. Secara default semua "menggunakan ketat"; pernyataan dikeluarkan dari output fi le.
--no-strip-debug
Jangan menghapus panggilan ke metode pada objek debug dan menonaktifkan penghapusan statis cabang berdasarkan debug variabel. Juga, memungkinkan kode untuk memasukkan jslib / debug.js (opsi ini diatur secara default karena alat ini hanya disebut dalam melepaskan mode, sehingga hanya berguna untuk pengembang yang ingin menonaktifkan perilaku ini di gurations rilis con fi).
--strip-namespace
Setiap nama variabel dispesifikasikan dengan fl ag ini akan memiliki semua mereka panggilan metode dilucuti dari kode yang dihasilkan. Itu objek debug dilucuti secara default untuk kedua plugin kanvas mode. Ini sesuai dengan ag -namespace fl pada alat strip-debug.
--strip-var
Setiap nama variabel dispesifikasikan dengan flag ini akan statis dievaluasi sebagai benar, dan sederhana jika berdasarkan laporan pada mereka akan memiliki cabang yang sesuai dilucuti dari kode yang dihasilkan. Ini sesuai dengan fl ag -D pada itu alat strip-debug. Secara default, debug variabel statis diatur ke benar kecuali -no-strip-debug spesifik ed.
--profile
Memungkinkan pengumpulan dan output dari profil informasi
Opsi yang belum diakui diasumsikan nama masukan files. Ini adalah dispesifikasikan relatif salah satu TEMPLATEDIRS jalur diberikan menggunakan opsi-t. Untuk informasi lebih lanjut tentang template lihat Template JavaScript Aplikasi.
4.6.3.3 Example
.
cd C:\Turbulenz\SDK\X.X.X\apps\sampleapp
Ketika hanya menghasilkan dependensi:
maketzjs --mode plugin -M --MF build/sampleapp.dep -t templates -t . -o sampleapp.tzjs sampleapp.js
Berikut XXX adalah versi SDK dan yuicompressor-XXXjar jalan ke kompresor YUI.
Catatan:
Saat membuat dependensi, alat ini akan menampilkan dependensi yang diperlukan untuk membangun target output, dalam untuk m:
maketzjs --mode plugin -M --MF build/sampleapp.dep -t templates -t . -o sampleapp.tzjs sampleapp.js
Sumber files terdaftar adalah mereka yang bila berubah, harus memicu kembali dari sasaran dari file. Jika salah satu dari ini files hilang, alat akan gagal untuk menghasilkan output file, daftar pertama ketergantungan gagal find kembali kesalahan.
Catatan:
Penggunaan alat seperti kompresor YUI atau UglifyJS untuk kompresi adalah opsional, tetapi dianjurkan. Perlu mengukur efek alat yang berbeda memiliki. Perhatikan bahwa YUI Compressor membutuhkan baik YUI dan Jawa diinstal dan con fi gurasi pada mesin Anda.
4.6.4. strip-debug
.
Alat ini melakukan penghapusan kode debug dalam rilis membangun. Ini biasanya akan dipanggil oleh maketzjs, sehingga sebagian besar pengembang tidak perlu menyebutnya langsung. Namun, pengembang dengan kode kustom membangun, khususnya di mana kode adalah pra-diproses sebelum dilewatkan ke maketzjs, mungkin ingin memanggil ini untuk memastikan bahwa debug kode tidak muncul di merilis versi permainan mereka.
Alat hanya bisa mengenali "sepenuhnya menyebutkan statusnya fi ed" panggilan, seperti yang dijelaskan dalam men-debug api.
0.25.0 :
Sejak SDK 0.25.0 alat ini juga mendukung menghapus if-else klausa yang dapat statis diselesaikan berdasarkan pengguna dispesifikasikan nama variabel. Kondisi bagian dari klausul if-else hanya dapat berisi referensi langsung ke khusus identifikasi (Dispesifikasikan dengan -D flag), dan unary! operator. Sebagai contoh
if (debug)
4.6.4.1. Penggunaan
.
Syntax
strip-debug [<options>] [<infile>]
Membaca dari stdin, atau dalam fi le dan menghapus semua panggilan ke metode pada objek global (debug objek secara default). Jika tidak ada Output fi le adalah dispesifikasikan, output ditulis ke stdout.
4.6.4.2. Options
.
Jalankan strip-debug -h untuk daftar lengkap dari semua pilihan.
-h, --help
Bantuan teks untuk alat
-o <outfile>
Menulis kode dilucuti tujuan tertentu
--ignore-errors
Secara default, alat akan menghentikan eksekusi dengan kesalahan jika ada kesalahan sintaks dalam kode. Ini flag menimpa bahwa perilaku yang memungkinkan membangun untuk terus bahkan jika kesalahan sintaks ditemukan. Perhatikan bahwa karena tidak mungkin untuk mengurai dan andal menghapus panggilan dari kode dengan kesalahan sintaks, alat hanya akan menyalin masukan file verbatim ke output.
--namespace <name.space>
Mengatur nama objek atau namespace yang panggilan metode harus dilucuti. Secara default ini hanya debug, tapi bisa mengacu pada setiap objek yang dapat diakses melalui lingkup global. misalnya mystudio.utilities.debug.
-D <Variable> [= false]
Menginstruksikan alat untuk menganggap bahwa <variabel> yang benar (atau salah jika = false suf fi x diberikan) di mana-mana, dan menghapus bagian yang tepat jika-lain klausa.
Ditambahkan di SDK 0.25.0
4.6.5. makehtml
.
4.6.5.1 Penggunaan
.
Sintaks
makehtml [options] <.js input> [.html input]
Mengkonversi Js fi le dan, opsional, beberapa kode HTML template ke dalam halaman HTML penuh yang dapat digunakan untuk memuat dan menjalankan Kode dibangun dengan alat maketzjs.
4.6.5.2. Options
.
--version
Tampilkan nomor versi dan keluar.
--membantu, -h
Tampilkan bantuan pesan dan keluar.
--verbose, -v
Verbose output.
--silent, -s
Berjalan diam.
--Output = OUTPUT, -o OUTPUT
Output file ke proses.
--templatedir = TEMPLATEDIRS, -t TEMPLATEDIRS
Direktori template (multiple diperbolehkan).
--dependency, -M
Output semua dependensi.
--MF = DEPENDENCYFILE
Output semua dependensi untuk DEPENDENCYFILE (membutuhkan -M fl ag).
--mode = MODE, -m MODE
Menghasilkan halaman HTML untuk digunakan dalam mode run diberikan. Mode yang didukung meliputi: Plugin, kanvas, canvasdebug.
--Hybrid
Start up plugin serta TurbulenzEngine berbasis kanvas. Plugin ini akan tersedia sebagai TurbulenzEnginePlugin. Tersedia hanya untuk mode kanvas, kanvas-debug.
--code = CODEFILE, -C CODEFILE
Menghasilkan halaman HTML yang beban dan menjalankan kode di CODEFILE (yang tidak diperlukan ada saat ini Alat dijalankan). Kode HTML akan referensi CODEFILE dengan path relatif dari OUTPUT (lihat opsi -o).
--dump-default-template, -D
Menulis template default untuk OUTPUT fi le. Hal ini dimaksudkan sebagai dasar untuk membuat halaman HTML kustom. Di umum, tidak diharapkan bahwa ini akan diperlukan.
--Use-strict
Menegakkan "menggunakan ketat"; pernyataan. Ini menambah satu "menggunakan ketat"; baris di atas kode JavaScript.
--include-use-strict
Jangan menghapus "menggunakan ketat"; pernyataan. Secara default semua "menggunakan ketat"; pernyataan dikeluarkan dari output fi le.
--profile
Memungkinkan pengumpulan dan output dari profil informasi.
Untuk menghasilkan halaman HTML permainan, Anda harus menyediakan setidaknya masukan kode JavaScript dan output file. Untuk beberapa konfigurasi (yaitu Plugin dan kanvas), lokasi final kode dibangun dengan maketzjs juga akan diminta. Masukan files dengan ekstensi html diasumsikan template yang baik dapat memperpanjang atau mengganti template default.
Masukan files diberikan relatif ke direktori template.
Untuk informasi lebih lanjut tentang template lihat Template JavaScript Aplikasi.
4.6.5.3 Example
.
cd C:\Turbulenz\SDK\X.X.X\apps\sampleapp
Saat membuat dependensi:
makehtml --mode Plugin t template t. -M --MF Membangun / sampleapp.dep -o sampleapp.release.html
4.6.6 json2json
.
4.6.6.1 Penggunaan
.
Sintaks
json2json [options] source.json [ ... ] target.json
Gabung JSON aset fi les.
4.6.6.2 Options
.
--version
Tampilkan nomor versi program dan keluar.
--help, h
Tampilkan bantuan pesan dan keluar.
--verbose, v
Verbose output.
--silent, -s
Berjalan diam.
--metrics, -m
Menghasilkan metrik aset.
4.6.6.3 Example
.
json2json -v -m source1.json source2.json target.json
4.6.7. json2tar
.
4.6.7.1. Penggunaan
.
Sintaks
json2tar [options] -i input.json -o output.tar
Menghasilkan TAR fi le untuk aset biner dirujuk dari aset JSON.
4.6.7.2. Options
.
--version
Tampilkan nomor versi program dan keluar.
--help, h
Tampilkan bantuan pesan dan keluar.
--verbose, v
Verbose output.
--silent, -s
Berjalan diam.
--Input = INPUT, -i INPUT
Masukan JSON fi le untuk memproses.
--Output = OUTPUT, -o OUTPUT
Output TAR fi le untuk menghasilkan.
--assets = PATH, -a PATH
Jalur akar aset yang berisi semua aset direferensikan oleh JSON file.
-M
Dependensi output.
--MF = DEPENDENCY_FILE
Dependensi output ke file.
4.6.7.3. Example
.
json2tar -v -i samples/models/duck.dae.json -o samples/models/duck.tar -a assets
4.6.8 json2stats
.
4.6.8.1 Penggunaan
.
Sintaks
json2stats [options] asset.json [ ... ]
Laporan metrik pada JSON aset files.
Metrik adalah:
• keys: jumlah byte yang digunakan oleh kunci.
• Punctuation (punctn): jumlah byte yang digunakan oleh JSON tanda baca, termasuk '[] {} ",:'.
• values: jumlah byte yang digunakan oleh nilai-nilai. Untuk uncompact JSON fi les ini juga akan mencakup ruang putih.
• k%: Persentase ukuran total yang digunakan oleh kunci.
• p%: Persentase ukuran total yang digunakan oleh tanda baca.
• v%: Persentase ukuran total yang digunakan oleh nilai-nilai (dan spasi).
• # kunci: jumlah total kunci. • unik: jumlah kunci unik. • Total: ukuran total aset dalam byte.
• gzip: ukuran aset setelah kompresi gzip.
• rasio: ukuran gzip sebagai persentase dari total ukuran terkompresi.
4.6.8.2. Options
--version
Tampilkan nomor versi program dan keluar.
--help, -h
Tampilkan bantuan pesan dan keluar.
--verbose, -v
Verbose output.
--silent, -s
Berjalan diam.
--metrics, -m
Metrik aset keluaran
--header, -H
Menghasilkan kolom header
Alat saat ini mengasumsikan aset JSON kompak tanpa spasi tambahan.
4.6.8.3. Example
.
json2stats -v -H samples/models/*.json
Outputs:
+-------------------------+----------------------+---------------+------------------------+
.
4.7.9 xml2json
4.7.9.1 Penggunaan
Sintaks
xml2json [options] -i input.xml -o output.json
Mengkonversi aset XML menjadi aset JSON terstruktur.
4.7.9.2 Pilihan
--version
Menampilkan nomor versi program dan keluar.
--help, -h
Menampilkan pesan help dan exit
--verbose, v
Verbose output.
--silent, -s
Berjalan diam
--metrics, -m
Metrik aset keluaran
--input = INPUT, INPUT -i
Memasukkan file XML ke proses
--Output = OUTPUT, OUTPUT -o
Output JSON file proses
4.7.9.3 Aset Pilihan Pembangkit
--json-indent=SIZE, -j SIZE
JSON keluaran cukup cetak ukuran indent, defaultnya 0.
--namespace, -n
Menjaga xmlns XML namespace di kunci aset JSON.
--convert-types, -c
Mencoba untuk mengkonversi nilai ke int, mengapung dan daftar.
4.7.9.4 Contoh
xml2json -v -j 2 -c -i asset.xml -o asset.json
4.7.10 json2txt
4.7.10.1 Penggunaan
Sintaks
json2txt [options] -i input.json [-o output.html]
Mengkonversi aset XML menjadi aset JSON terstruktur
4.7.10.2 Pilihan
--help, -h
Tampilkan bantuan pesan dan keluar.
--version
Tampilkan nomor versi program dan keluar.
--verbose, -v
Verbose output.
--silent, -s
Berjalan diam.
--input=INPUT, -i INPUT
Masukan JSON berkas untuk memproses.
--output=OUTPUT, -o OUTPUT
File output untuk menghasilkan (opsional). Jika tidak ditentukan, output yang ditampilkan pada terminal. Jika ditentukan, bendera -html atau -txt dapat digunakan (secara default akan menampilkan sebagai teks biasa).
--path=PATH, -p PATH
Jalan dari simpul yang diperlukan untuk output dalam struktur pohon aset JSON. Dukungan untuk wildcard diaktifkan.
--listcull=NUMBER, -l NUMBER
Pemusnahan parameter untuk menentukan panjang maksimum dari daftar yang akan ditampilkan. NOMOR = 0 menampilkan semua isi (standarnya 3).
--dictcull=NUMBER, -c NUMBER
Pemusnahan parameter untuk menentukan panjang maksimum dari kamus yang akan ditampilkan. NOMOR = 0 menampilkan semua isi (standarnya 3).
--depth=NUMBER, -d NUMBER
Parameter dari kedalaman kamus dan daftar render (default 2).
--html
Output data dalam format HTML.
--txt
Output dalam format teks biasa (default)
--color
Memungkinkan output teks berwarna.
4.7.10.3 Contoh
json2txt -i samples/models/duck.dae.json -o duck.txt --txt
BAB V
PENUTUP
5.1 Kesimpulan
.
Dalam penulisan buku ini telah ditulis beberapa penulisan seperti pengenalan, proses instalasi dan penggunaan dasar game engine Turbulenz yang dapat meunjang pengguna Turbulenz agar lebih baik lagi.
5.2 Saran
.
Penulis menyadari bahwa dalam penulisan buku ini masih banyak kekurangan seperti kurangnya contoh penggunaan ataupun informasi lain terkait game engine Turbulenz. Penulis menyarankan kepada pembaca agar berkenan memberikan saran terhadap penggunaan game engine Turbulenz agar lebih diperdalam lagi terutama dari segi contoh sempel program yang dibuat dengan game engine Turbulenz agar para pembaca menjadi tertarik untuk menggunakan dan pengguna lebih terbantu.
.
DAFTAR PUSTAKA
[1] Turbulenz,2014,Turbulenz Documentation, [pdf], (https://hub.turbulenz.com/#downloads , diakses tanggal 2 Mei 2015)
