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).
Senin, 15 Juni 2015
Tugas T2 : Bab 3
BAB III
INSTALASI TURBULENZ
Turbulenz SDK termasuk juga perpustakaan, alat, dokumentasi dan contoh untuk mulai menggunakan Turbulenz. SDK termasuk isi dari repositori open source Turbulenz Mesin dengan contoh pre-built dan mesin Installer Turbulenz untuk browser dan platform yang tidak mendukung fitur yang diperlukan.
Opsional, Anda dapat menemukan mesin Installer Turbulenz untuk setiap SDK terletak di hub.turbulenz.com/#downloads.
Mendukung
Dokumentasi terbaru dapat ditemukan secara online di http://docs.turbulenz.com
Jika Anda mengalami kesulitan dengan Turbulenz Teknologi, langkah-langkah berikut akan membawa Anda ke situs dukungan:
1. Masuk ke Turbulenz Hub di https://hub.turbulenz.com.
2. Tekan tombol 'Dukungan' pada halaman arahan. Ini dengan secara otomatis login Anda ke layanan dukungan.
3. Lihatlah dasar pengetahuan atau membuat permintaan dukungan.
Untuk bantuan lainnya menggunakan situs dukungan lihat bagian dukungan.
3.1. Langkah-langkah instalasi
.
Windows XP / Vista / 7
Turbulenz SDK untuk Windows tersedia dari https://hub.turbulenz.com sebagai download sebuah installer exe self-extracting. Ini berisi alat-alat, sampel dan komponen mesin yang dibutuhkan untuk mengembangkan aplikasi Turbulenz.
Perangkat lunak berikut harus diinstal sebelum menginstal Turbulenz SDK:
Penting
• Python 2.7.3+ -
http://www.python.org/download/releases
Gambar 2.4 Menginstall Python
Gambar 2.5. Instalasi Python Telah Selesai
Catatan :
Hal ini tidak mungkin untuk menggunakan Python 3.x dengan alat Turbulenz.
Direkomendasikan
• Microsoft Visual Studio 2008 - Digunakan untuk mengkompilasi kecepatan-up untuk lingkungan python jika tersedia pada platform.
• PDF reader - Diperlukan untuk membaca dokumentasi dalam format PDF.
Setelah menginstal perangkat lunak penting dan direkomendasikan, menginstal SDK:
1. Kunjungi https://hub.turbulenz.com dan masuk
2. Download SDK X.X.X untuk Windows
3. Jalankan TurbulenzSDK-X.X.X.exe
4. Ikuti instruksi
Gambar 2.6. Website Untuk Mendownload SDK Turbulenz
Gambar 2.7. Setup Turubulenz SDK
Gambar 2.8. Memilih Lokasi Instalasi Python
Gambar 2.9. Persetujuan Lisensi
Gambar 2.10. Pemilihan Folder Tujuan Instalasi Turubulenz SDK
Gambar 2.11. Pemilihan Start Menu Folder
Gambar 2.12. Siap Untuk Menginstall
Gambar 2.13. Proses Menginstall Turbulenz SDK
Gambar 2.14. Instalasi Turbulenz Engine
Gambar 2.13. Proses Instalasi Turbulenz Engine Telah Selesai
Catatan
Kinerja dari setiap modul Python berpotensi menjadi lebih lambat jika kecepatan maksimum tidak dapat dikompilasi. Disarankan agar Anda menginstal Visual Studio sebelum menginstal Turbulenz SDK, sehingga kecepatan maksimum dapat dikonfigurasi dalam lingkungan. Jika Anda menggunakan versi 64bit, Python Anda harus telah terinstal versi 64bit dari kompiler Visual Studio.
Mac OS X 10.7 (dan di atas)
The Turbulenz SDK untuk Mac OS X sekarang tersedia untuk pengembang dalam versi beta dari https://hub.turbulenz.com sebagai shell script self-extracting. Ini berisi alat-alat, sampel dan komponen mesin yang dibutuhkan untuk mengembangkan aplikasi Turbulenz.
Perangkat lunak berikut harus diinstal sebelum menginstal Turbulenz SDK:
Penting
• Python 2.7.3+ -
http://www.python.org/download/releases
Catatan
Hal ini tidak mungkin untuk menggunakan Python 3.x dengan alat Turbulenz.
• Cg Toolkit - http://developer.nvidia.com/cg-toolkit - Diperlukan untuk mengkompilasi shader menggunakan alat cgfx2json.
• Alat Xcode Command Line untuk Xcode (Februari 2012 atau lebih baru)
Catatan
Jika Anda belum memiliki Xcode yang sudah diinstal, hanya alat baris perintah yang diperlukan (download secara signifikan dapat lebih kecil dari installer Xcode yang sudah penuh). Jika Anda sudah memiliki Xcode yang sudah diinstal, langsung ke "Download" panel preferensi di Xcode dan di bawah "komponen" tab Anda dapat memilih untuk menginstal "Tools Command Line".
Setelah menginstal perangkat lunak penting, menginstal SDK:
1. Kunjungi https://hub.turbulenz.com dan masuk
2. Download SDK X.X.X untuk Mac
3. Buka terminal di directory yang sama sebagai SDK installer dan ketik:
4. chmod a+x TurbulenzSDK-X.X.X.run
5. ./TurbulenzSDK-X.X.X.run
6. Ikuti instruksi
Linux (BETA)
Sebuah rilis dari Turbulenz SDK untuk Linux tersedia dari https://hub.turbulenz.com sebagai shell script self-extracting. Ini berisi alat-alat, sampel dan komponen mesin yang dibutuhkan untuk mengembangkan aplikasi Turbulenz. Tidak bahwa versi Linux dari browser plugin tidak dirilis. Pengembang harus menggunakan mode 'kanvas' ketika berjalan di Linux.
Rilis ini hanya diuji terhadap Ubuntu 12.04 (64bit), meskipun umpan balik dari pengembang menggunakan rilis terbaru lainnya dari distro lain dipersilahkan.
Perangkat lunak berikut harus diinstal sebelum menginstal Turbulenz SDK. Kami menyarankan menginstal melalui manajer paket Anda:
penting
Python 2.7.3+ (incl. File pembangunan)
Di Linux, paket pengembangan Python (perpustakaan dan file header) harus diinstal. Pada Ubuntu, ini bisa dilakukan dengan perintah berikut:
sudo apt-get install python-dev
Disarankan agar Anda menginstal virtualenv dan setuptools untuk Python dari Anda untuk manajer paket distribusi Anda. Pada Ubuntu:
sudo apt-get install python-virtualenv python-setuptools
Catatan : Ini tidak berlaku untuk penggunaan Python 3.X dengan Turbulenz tools.
• GCC (termasuk g ++)
Ini harus dipasang sebelum menjalankan script sehingga Python dapat mengkompilasi modul tertentu.
• Cg Toolkit 3.0+
cgfx2json alat dalam SDK mengandalkan perpustakaan ini sedang dipasang. Entah menginstal dari manajer paket Anda atau kunjungi http://developer.nvidia.com/cg-toolkit untuk men-download versi terbaru. Pastikan Anda memiliki konfigurasi yang benar untuk sistem anda (32/64-bit).
Setelah menginstal perangkat lunak penting dan direkomendasikan, menginstal SDK:
1. Kunjungi https://hub.turbulenz.com dan masuk
2. Download SDK X.X.X untuk Linux
3. Buka terminal di direktori yang sama seperti installer SDK dan ketik:
4. chmod a + x TurbulenzSDK-X.X.X.linux.run
5. ./TurbulenzSDK-X.X.X.linux.run
6. Ikuti petunjuk
3.2. Menjalankan Turbulenz SDK
.
(Lihat Platform yang didukung dan Browser untuk daftar platform yang didukung dan persyaratan)
Jalankan Lingkungan:
Lingkungan ini memungkinkan Anda untuk menjalankan alat yang disediakan dengan SDK.
Windows:
Ada jalan pintas dalam menu start akan memulai command prompt di dalam lingkungan virtual SDK. Start Menu -> Programs -> Turbulenz -> SDK XXX -> Run Lingkungan XXX
Catatan
Direktori mulai dari lingkungan adalah direktori SDK yang diinstal. Mac / Linux: Di jendela terminal, masukkan
cd *SDKINSTALLDIR*
Mac /Linux:
Dalam terminal masukkan
cd *SDKINSTALLDIR*
Anda harus melihat '(env)' tag di depan prompt Anda.
Anda sekarang siap untuk menjalankan alat.
Jalankan Server Lokal:
Windows:
Shortcut ini di menu awal akan memungkinkan Anda untuk memulai server pengembangan untuk menguji permainan Anda pada mesin atau pada jaringan lokal.
Mac / Linux: Di jendela terminal, masukkan
*SDKINSTALLDIR*/start_local.sh
catatan
Ketika Anda menjalankan Server Lokal untuk pertama kalinya, beberapa firewall mungkin akan meminta Anda untuk memungkinkan python atau python.exe untuk mendengarkan pada port. Anda akan perlu untuk memberikan izin untuk menjalankan server.
3.3. Memverifikasi Install
.
Alat Turbulenz menggunakan lingkungan virtual Python dengan paket python yang diperlukan (menghindari kebutuhan untuk menginstal paket ke dalam folder default sistem Python).
Untuk memverifikasi instalasi:
• Jalankan Server Lokal (dijelaskan di atas) dan memastikan bahwa tidak ada kesalahan. Pada Windows memastikan bahwa browser terbuka untuk menampilkan halaman depan server pembangunan.
• Jalankan Turbulenz Lingkungan (dijelaskan di atas). String (env) diawali dengan command prompt yang menunjukkan bahwa lingkungan telah berhasil diaktifkan.
• Dari lingkungan ini command prompt, ketik:
dae2json
Opsi baris perintah untuk perintah dae2json harus ditampilkan. Jika Anda melihat pesan kesalahan sebaliknya, lingkungan belum terpasang dengan benar.
2.4. Menjalankan Sampel
.
Dengan server pengembangan berjalan lokal, buka browser Anda dan arahkan ke http://127.0.0.1:8070.
Klik proyek Sampel, dan kemudian klik tombol Play untuk menampilkan daftar sampel yang tersedia. Ada beberapa file HTML yang tersedia untuk setiap sampel, sesuai dengan membangun konfigurasi yang berbeda. Mengklik pada nama file HTML akan membuka dan menjalankan sampel yang sesuai.
Tugas T1 : Sampul, Kata pengantar, Bab 1 dan Bab 2
Kata Pengantar
Puji dan syukur Penulis panjatkan kepada Allah SWT yang telah memberikan nikmat serta karunia-Nya sehingga Penulis dapat menyelesaikan penulisan buku ini dengan baik. Judul penulisan buku yang dibuat adalah “Pengenalan Game Engine Turublenz”. Tujuan dari pembuatan penulisan buku ini yaitu sebagai buku petunjuk untuk pengguna software game engine Turbulenz terutama bagi pengguna yang masih dalam tingkat pemula agar lebih tertarik dan terbantu dalam penggunaan software game engine Turbulenz.
Penulis menyadari bahwa tanpa adanya bimbingan dan dukungan penuh dari semua pihak, maka penulisan buku ini tidak akan berjalan dengan lancar. Oleh karena itu, pada kesempatan ini penulis meminta izin untuk menyampaikan ucapan terima kasih kepada bapak Dr. rer. nat. I Made Wiryana, SKom, SSi, MAppSc., selaku dosen matakuliah softskill pengantar teknologi game yang telah memberikan pengarahan dan bimibingan dalam pembuatan penulisan buku ini.
Serta semua pihak yang telah banyak membantu terwujudnya penulisan buku ini. Akhir kata semoga penulisan buku ini dapat memberikan manfaat bagi semua pihak yang bersangkutan, bagi Penulis pada khususnya dan bagi para pembaca pada umumnya.
Depok, 12 Juni 2015
Penulis
.
BAB I
PENDAHULUAN
1.1 Latar Belakang Masalah
.
Teknologi komputer dewasa ini sudah sangat berkembang pesat diberbagai bidang, baik ilmu pengetahuan, pekerjaan, seni, dll. Pemanfaatan teknologi inidirasakan tidak hanya oleh orang dewasa, melainkan juga anak-anak. Pekerjaanmanusia yang dikerjakan sendiri oleh manusia (manual) sudah banyak digantikanoleh komputer. Dengan begitu semua dapat dikerjakan lebih mudah, praktis dan hemat waktu.
Game engine Turbulenz merupakan game engine berbasis web yang bersifat 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 Turbulenz” yang dapat menarik minat pembaca dan membantu pengguna game engine Turbulenz agar dapat menggunakannya.
1.2 Rumusan Masalah
.
Rumusan masalah dalam buku ini terdiri dari hal - hal seperti berikut :
• Apakah sebenarnya game engine Turbulenz itu?
• Bagaimana langkah pertama yang harus dilakukan untuk menggunakan game engine Turbulenz
1.3 Batasan Masalah
.
Batasan masalah dalam penulisan buku ini meliputi hal - hal sebagai berikut :
1. Pengenalan game engine turbulenz
2. Instalasi game engine Turbulenz
3. Penggunaan dasar game engine Turbulenz bagi pemula
1.4 Tujuan Masalah
.
Tujuan dari permasalahan yang ada dalam buku ini adalah:
• Untuk menarik minat pembaca tentang game engine Turbulenz.
• Untuk membantu pengguna game engine Turbulenz dalam penggunaanya.
1.5 Metode Penelitian
.
Metode yang kami gunakan adalah deskriptif, kajian pustaka dilakukan dengan mencari literature di internet dan dokumen panduan game engine Turbulenz.
1.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 penelitian, selanjutnya tujuan penulisan dan terakhir sistematika penulisan yang memberikan uraian dan gambaran dalam penulisan ini.
Bab 2 : Pengenalan
Turubulenz Menjelaskan tentang Turbulenz sebagai game engine berbasis web yang bersifat open source.
Bab 3 : Instalasi Turbulenz
Menjelaskan tentang bagaimana langkah – langkah yangharus dilakukan untuk instalasi game engine Turbulenz pada komputer.
Bab 4 : Penggunaan Turbulenz
Penggunaan dasar dalam game engine Turbulenz akan dijelaskan dalam bab ini.
Bab 5 : Penutup
Pada bab ini akan berisi kesimpulan dan saran terhadap buku ini.
.
.
BAB II
PENGENALAN TURBULENZ
2.1. Pengenalan Turbulenz
.
Turbulenz adalah game engine HTML5 dan diadopsi oleh server-side API yang tersedia dalam JavaScript dan naskah dimana fungsinya untuk membangun dan mendistribusikan objek 2D dan 3D game yang berjalan pada platform yang mendukung fitur HTML5 seperti browser terkini tanpa memerlukan plugin. Game engine The Turbulenz menyediakan solusi untuk pengembangan game untuk kualitas generasi berikutnya yang dapat dimainkan langsung di browser. Teknologi ini diselenggarakan di dua kondisi utama yaitu:
• Runtime: dieksekusi pada mesin pengguna akhir
• Offline: digunakan hanya selama pengembangan game Bagian ini memberikan gambaran dua daerah ini fungsi serta beberapa rekomendasi dan pedoman untuk mengembangkan game pada browser.
2.2. Runtime API
.
Runtime dapat dikategorikan menjadi dua jenis kode yaitu:
• API tingkat rendah: Sebuah set antarmuka menyediakan akses ke fungsionalitas tingkat rendah. API pada tingkat ini mirip dalam fungsi ke API terkenal seperti OpenGL, OpenAL, dll Fungsi ini disediakan baik oleh ekstensi browser Turbulenz (kode asli), atau dengan pembungkus tipis di atas antarmuka yang disediakan oleh browser (seperti sebagai WebGL, WebAudio, dll). Dalam kasus kedua, Turbulenz API akan menentukan interface browser menyediakan dan dinamis memilih yang paling tepat.
• API Tingkat tinggi: Dimana koleksi perpustakaan dari JavaScript yang dibangun di atas pemodelan API tingkat rendah yang menyediakan para pengembang dapat mengembangkannya dengan fitur seperti Adegan grafik, Sistem Bahan dan optimimalisasi Renderer, dll
2.2.1. Tingkat rendah API
.
Antarmuka terdiri dari beberapa modul yang disebut Device, yang memberikan:
• Antarmuka yang efisien di atas perpustakaan stabil dan fleksibel yang ada, misalnya Bullet, OpenAL atau WebGL.
• Antarmuka yang efisien di atas akses hardware tingkat rendah, misalnya mekanisme masukan atau operasi vektor matematika. Perangkat ini tidak terbatas pada jenis tertentu dari permainan, termasuk dalam kategori yang cukup kuat dan cukup fleksibel untuk menutupi kebutuhan permainan generasi berikutnya. Objek perangkat biasanya dibuat sekaligus dengan melewati parameter objek untuk membuat fungsi pada obyek global theTurbulenzEngine. Setelah dibuat mereka nantinya bisa diambil dengan memanggil fungsi get dengan sesuai. Misalnya, createGraphicsDevice dan getGraphicsDevice.
Alat Grafik:
• Sederhana, dimana shader berbasis API.
o Shader mungkin berisi beberapa Teknik, baik tunggal atau multi-pass.
o Setelah Teknik shader diatur pada Device, parameter yang diperlukan oleh kode program dapat diperbarui oleh objek Technique Parameter.
o TechniqueParameter memiliki beberapa referensi Tekstur, TechniqueParameterBuffers atau nilai-nilai lainnya.
o Beberapa TechniqueParameters dapat diatur pada perangkat sekaligus.
• Vertex buffer, Indeks buffer dan Tekstur dapat dibuat, diperbarui dan menghancurkan dinamis.
• Multiple Streams Vertex buffer dapat digunakan pada waktu yang sama.
• Dukungan untuk 1D, 2D, 3D dan tekstur cube.
o Setiap format piksel didukung oleh perangkat keras.
• Asynchronous pemuatan sumber daya.
o Beberapa file dapat didownload dengan cepat, kode JavaScript akan dijalankan ketika sumber daya yang tersedia untuk penggunaan yang telah disetujui.
• Beberapa format file gambar.
o DDS, JPG, PNG dan TGA.
• Dukungan untuk ekstensi arsip yang berisi beberapa file gambar.
o fleksibilitas lebih baik untuk penggunaan bandwidth secara optimal.
• query Occlusion. o Jumlah piksel yang diberikan dapat dilihat untuk bagian dari rendering.
o Tersedia dalam modus Plugin saja.
• dukungan Fullscreen (platform yang didukung).
• Ambil fitur screenshot.
• dukungan playback video.
o WebM, MP4.
o Render video sebagai tekstur.
o kontrol Putar bermain, pause, stop, melanjutkan, mundur. MathDevice
• Jenis Matematika:
o Vector2 Vector3, Vector4
o Matrix33, Matrix34, Matrix43, Matrix44
o angka empat, QuatPos
o AABB
• Format Penyimpanan dioptimalkan berdasarkan dukungan yang tersedia
• operasi Dioptimalkan mendukung parameter tujuan, mengurangi alokasi objek.
• Array ke / dari Matematika utilitas jenis konversi.
Alat Fisik:
3D
• Mudah digunakan simulasi fisika efisien.
o Dioptimalkan implementasi JavaScript.
o Dalam mode Plugin, ini adalah pembungkus ringan sekitar Bullet Fisika Perpustakaan.
- http://bulletphysics.org/wordpress/
• tubuh dan benda-benda tabrakan kaku.
o Plane, Box, Sphere, Kapsul, Cylinder, Cone, Segitiga Mesh, Convex Hull.
• Kendala. o Point ke Point, Engsel, Cone Twist, 6DOF, Slider.
• Ray dan pertanyaan menyapu cembung.
o Kembali titik terdekat dari dampak dan permukaan normal.
• representasi karakter.
o Untuk digunakan dengan 1/3 game orang.
o Termasuk properti untuk kecepatan, posisi, mendekam, tinggi melompat, kematian, di tanah.
• callback Kontak.
o Rigidbodies, karakter, benda tabrakan.
o Disebut pada presolve, menambahkan, diproses, dihapus.
o Filter tanggapan oleh topeng.
o Pemicu tanpa respon tabrakan.
Catatan Pengembang dapat melihat perilaku yang sedikit berbeda di plugin dan kanvas implementasi PhysicsDevice.
2D
• Efisien 2D dalam bidang fisika secara simulasi ditulis secara khusus untuk JavaScript.
• Bentuk.
o Lingkaran, Kotak, Rectangle, Regular Polygon, Custom Polygon.
o Buat bentuk sebagai sensor.
o Bentuk pengelompokan dan masker interaksi.
• Tabrakan.
o Sapu & Prune, Box Tree Broadphases.
o Perlengkapan untuk Raytest, ttd Jarak, Intersection, Berisi Point, Sapu Test.
• Simulasi dunia.
o Beberapa kelompok simulasi.
o gravitasi pilihan.
o iterasi simulasi dipersonalisasi.
• simulasi objek yang kaku.
o Dinamis, Statis, benda kinematik.
• Bahan.
o Elastisitas, Static / Dinamis / Gesekan bergulir, Density.
• Arbiter.
o Kontak pengelompokan.
o Informasi kontak: Posisi, Penetrasi, Normal / Tangent Impulse
• Kendala.
o Point to Point, Jarak, Weld, Angle, motor, Line, Pulley, Custom Kendala.
• Debug rendering.
o kaku Badan, Kendala, Dunia, Lines, Curves, Rectangles, Lingkaran, Spiral, Linear / Spiral Springs.
o Mengaktifkan dan menonaktifkan rendering jenis.
o Scaling untuk Draw2D viewport.
Alat Suara:
• Mudah digunakan wrapper efisien fitur audio hardware.
o Memanfaatkan Web Audio, <Audio> tag, OpenAL tergantung pada dukungan platform yang.
• sumber suara 3D. o Posisi, Arah, Velocity, Gain, Pitch, loop.
• ditiru 3D suara untuk pembuatan stereo.
• file suara Asynchronous pemuatan.
o Beberapa file sumber daya dapat didownload dengan cepat, kode JavaScript akan diberitahu ketika sumber daya yang tersedia untuk penggunaan.
• Uncompress audio yang dinamis.
• Beberapa format file suara:
o OGG, WAV, MP3.
• permintaan didukung untuk kemampuan platform.
o Muat format audio yang terbaik untuk platform.
• Efek / Filter dukungan:
o Reverb, Echo, Low Pass
Catatan: Ketersediaan antarmuka tergantung pada platform.
Alat Jaringan:
• Bi-directional, full-duplex saluran komunikasi, lebih soket TCP.
o Memanfaatkan Browser dukungan WebSocket.
o pelaksanaan asli Efisien WebSockets untuk platform tanpa dukungan.
- http://en.wikipedia.org/wiki/WebSocket
- http://dev.w3.org/html5/websockets/
• jabat tangan HTTP-kompatibel sehingga server HTTP dapat berbagi HTTP mereka default dan HTTPS port (80 dan 443) dengan server WebSocket.
• Dukungan untuk koneksi yang aman sebagai bagian dari standar.
• Dukungan untuk kompresi data dengan ekstensi mengempis-frame. InputDevice
• Akses ke jenis masukan.
o Keyboard, Mouse, Xbox360 Pad, Joystick, Roda, Touch, Multi-touch
• sistem acara Asynchronous ketika perubahan negara.
o kode JavaScript diberitahu ketika input berubah.
o Acara untuk keydown, keyup, mousedown, mouseup, roda mouse, mousemove, Gunaka mouse, mouseenter, mouseleave, paddown, padup, fokus, blur, mouselocklost, touchstart, touchend, touchmove, touchmove, touchenter, touchleave, touchcancel. • fitur dari mouse tambahan:
o bersembunyi / menampilkan ikon Platform, mengunci / unlocking (platform yang didukung).
• Bahasa keymapping independen.
2.2.2. API Tingkat Tinggi
.
Ini tingkat lebih tinggi perpustakaan JavaScript dirancang untuk fleksibilitas dan kemudahan penggunaan. JavaScript bahasa itu sendiri menyediakan semua mekanisme refleksi diperlukan untuk debugging runtime dan tweaking, mendukung pembuatan kode dinamis dan serialisasi objek.
Hanya didokumentasikan benda, fungsi dan sifat harus digunakan. Item yang tidak berdokumen adalah rincian implementasi dan mungkin berubah di masa depan.
Adegan grafik:
• format file yang fleksibel JSON.
o Bisa menggambarkan baik seluruh adegan atau jerat individu.
• Asynchronous pemuatan referensi eksternal.
o Jika adegan berisi referensi ke jerat eksternal mereka semua dimuat secara paralel dan melekat ke adegan utama ketika siap.
o Dukungan untuk digunakan kembali optimal mesh yang sama di lokasi yang berbeda.
• sistem penyaji Pluggable.
o Hubungan antara geometri, efek dan bahan diselesaikan pada saat runtime.
o Mudah swap beberapa teknik render untuk aset yang sama.
• berbagi Geometri.
o informasi Geometri dapat optimal digunakan kembali di beberapa lokasi adegan dengan efek render yang berbeda.
• adegan Fleksibel node hirarki.
o Lights, geometri, Animasi, Fisika.
• query Visibilitas.
o Portal, frustum, Tumpang Tindih Box.
• Sortasi dan pengelompokan.
o node Terlihat diurutkan dan dikelompokkan untuk render optimal: Buram, Transparan, Decal.
• evaluasi malas update simpul.
Animasi
• animasi 3D untuk adegan geometri.
• Skeleton / Skinning animasi.
• Animasi pengendali.
o interpolasi, kelebihan beban Node, Referensi, Transisi, Blend, Mask, Pose, Kulit, GPU Kulit, Kupas Node.
o Controller dapat dikombinasikan untuk efek yang diinginkan.
• Dinamis memperbarui adegan data. Resource Manager
• Asynchronous dimana pemuatan menghindari duplikasi.
o lapisan remapping tambahan untuk memudahkan pengalihan URL.
• Menyediakan sumber daya default jika hilang.
o Permainan dapat memberikan sumber daya standar kustom untuk digunakan ketika salah satu yang diperlukan hilang atau masih loading.
• Beberapa manajer untuk kebutuhan individu.
o Animasi, Efek, Font, Shaders, Suara, Textures.
• Bandwidth dan perangkat keras skala dengan memilih aset yang berbeda dan efek tergantung pada mesin dan koneksi internet kinerja.
• Cache aset sisi klien untuk mengoptimalkan dan menggunakan kembali permintaan.
Permintaan Server
• HTTP & AJAX permintaan fungsi
o Otomatis coba lagi dan penanganan error.
o dukungan Cross-browser.
o terenkripsi dukungan API. Renderer tangguhan
• Unlimited jumlah lampu.
o Point, Spot, Directional, Ambient.
• Tekstur falloff cahaya berdasarkan.
o Memungkinkan adanya multi-warna lampu dan bayangan palsu murah, misalnya kipas di bawah sumber cahaya.
• Bahan dengan peta beberapa tekstur.
o warna specular dan intensitas, vektor normal, warna Cahaya, Alpha.
• efek pasca dicabut.
o Mudah untuk setup untuk penuh dalam efek pasca layar sebagai bagian dari shading akhir.
o Copy, Fade dalam, memodulasi, Bicolor, Blend.
• peta bayangan eksponensial.
o Reuse peta tekstur bayangan untuk menyimpan memori video.
o blur Gaussian untuk hasil yang halus.
o informasi mendalam Exponential untuk menghindari perdarahan ringan.
• kabut volumetrik.
• 4 jenis GPU yang mengulitinya.
• animasi UV.
• Modus Wireframe.
• Panggilan kembali untuk melewati tambahan.
o decal, transparansi, debug
• Tersedia dalam modus Plugin saja. Maju Renderer
• Unlimited jumlah lampu.
o Point, Spot, Directional, Ambient.
• Tekstur falloff cahaya berdasarkan.
o Memungkinkan multi-warna lampu dan bayangan palsu murah, misalnya kipas khas di bawah sumber cahaya.
• Bahan dengan peta beberapa tekstur.
o spekular dan intensitas, vektor normal, warna Cahaya, Alpha.
• efek pasca Pluggable.
o Mudah diatur untuk penuh efek pasca layar sebagai bagian dari shading tangguhan akhir.
o Copy, Fade dalam, memodulasi, Bicolor, Blend.
• peta bayangan eksponensial.
o Reuse peta tekstur bayangan untuk menyimpan memori video.
o blur Gaussian untuk hasil yang halus.
o informasi mendalam Exponential untuk menghindari perdarahan ringan.
• 4 GPU terintegrasi.
• animasi UV.
• Modus Wireframe.
• Callback untuk melewati tambahan.
o decals, transparansi, debug
Standar Renderer
• Satu titik dan cahaya ambient.
• Pixel berbasis pencahayaan.
• Bahan dengan peta beberapa tekstur.
o warna specular dan intensitas, vektor normal, warna Cahaya, Alpha.
• Optimzed untuk kecepatan dan kompatibilitas di berbagai hardware.
• 4 berat GPU menguliti.
• animasi UV.
• Modus Wireframe.
• Callback untuk melewati tambahan.
o decals, transparansi, debug Sederhana Renderer
• Satu titik dan cahaya ambient.
• pencahayaan Vertex berbasis.
• Bahan dengan peta beberapa tekstur.
o warna specular dan intensitas, vektor normal, warna Cahaya, Alpha.
• Optimzed untuk kecepatan dan kompatibilitas di berbagai hardware.
• 4 berat GPU menguliti.
• animasi UV.
• Modus Wireframe.
• Callback untuk melewati tambahan.
o decals, transparansi, debug 2D Rendering
Draw2D
• penyaji 2D sprite berbasis.
o Batch sprite untuk efisiensi.
• mode Menggambar:
o Menggambar: objek Menggambar literal, DrawRaw: Menggambar buffer data, DrawSprite: Menggambar referensi sprite.
• viewport Scalable.
o Masukan koordinat pemetaan.
• Urutkan mode.
o Segera, tangguhan, Tekstur.
• mode Blend.
o Buram, Additive, Alpha.
• dukungan Kustom shader.
• Render-to-sasaran dukungan.
• efek Tekstur.
o Distort, Gaussian Blur, Bloom, Warna, Grey Scale, Sepia, Negatif, Saturasi, Hue, Brightness, Contrast.
• data kinerja Recording. Canvas2D
• Pelaksanaan Percepatan kanvas 2D API.
• Berjalan pada WebGL / OpenGL tergantung pada platform.
• SVG rendering. • Teks render via FontManager.
• Untuk implementasi lengkap lihat spesifikasi elemen kanvas Keperluan
• Alokasi dan pengelolaan buffer grafis.
o Vertex buffer.
o Indeks buffer.
• API dikendalikan JavaScript profiling.
o waktu Per-fungsi akurasi milidetik.
o Rekam top-down atau pohon fungsi bottom-up.
o Hitung waktu yang dihabiskan oleh fungsi individu atau total yang dikeluarkan oleh sub-fungsi.
o Mengidentifikasi file sumber dan nomor baris dari daerah bermasalah.
• identifikasi penggunaan memori.
o Ambil hitungan obyek jenis objek dibangun.
o Ambil foto dan bandingkan fluktuasi memori.
• Enkripsi dan dekripsi dari permintaan server-side untuk format tzo.
• utilitas Debug dengan fungsi stripping untuk kinerja.
o menegaskan, log, batalkan.
o stacktrace Lengkap.
o Mendukung menambahkan fungsi kustom.
• Simulator Jaringan
o Mensimulasikan latency dan perilaku jaringan.
o Client-side manipulasi pesan sesi multiplayer.
o Mensimulasikan lonjakan lalu lintas jaringan.
2.2. Alat Offline
.
Alat Offline disediakan untuk memproses JavaScript dan HTML kode, dan untuk menghasilkan dan melayani aset diperlukan untuk runtime. Alat untuk pengolahan aset disediakan sebagai seperangkat mandiri alat baris perintah yang dapat dijalankan secara paralel ketika aset dependensi memungkinkan.
Beberapa format file yang diubah menjadi format JSON kustom didukung oleh kode runtime, yang lain disimpan sebagai-adalah dan hanya pengolahan tambahan disediakan.
Semua aset dan skrip yang dikompresi, dipadatkan dan unik menandai untuk transfer efisien antara server web dan browser. 7.2.1. Alat Alat kode yang ada untuk:
• Opsional menghapus kode debugging (seperti menegaskan)
• Concatenate dan kompak JavaScript dan semua perpustakaan direferensikan
• Menghasilkan file HTML yang akan digunakan untuk menjalankan aplikasi selama pengembangan Alat aset disediakan untuk menangani langkah-langkah berikut membangun:
• Konversi Collada file untuk JSON
• Konversi CgFX file untuk JSON
• Konversi file OBJ ke JSON
• kompresi PXT
• kompresi PNG
• generator Cubemap
• generator mipmap
• tingkat Tekstur yang detail, dimana akan menghapus tingkat mipmap dalam demand
2.3. Template dan Alat Membangun
.
Ketika mengembangkan aplikasi JavaScript untuk berjalan di Turbulenz Mesin ini berguna untuk membangun dan menguji semua konfigurasi. Konfigurasi pembangunan kanvas-debug dibentuk untuk menjalankan dalam browser dan memungkinkan penggunaan alat-alat browser debugging. Konfigurasi rilis (Plugin dan kanvas) beban dan menjalankan bundel kode, sering dipadatkan. Dalam kasus modus Plugin, kode JavaScript dijalankan di dalam mesin yang disediakan oleh ekstensi browser Turbulenz (untuk alasan kinerja dan kompatibilitas), membuat debugging jauh lebih sulit.
Kode pemadatan adalah optimasi penting untuk penyebaran dan dapat secara dramatis mengurangi ukuran kode yang perlu ditransfer dan diurai pada saat runtime. Turbulenz merekomendasikan alat UglifyJS digunakan dalam Plugin dan kanvas konfigurasi. Lihat rincian lebih lanjut maketzjsfor.
Alat maketzjs dan makehtml mendukung penggunaan template markup untuk memungkinkan satu set file sumber yang akan dengan mudah dibangun di konfigurasi. Template di app Template contoh mengikuti struktur di bawah ini:
/*{{ javascript("scripts/script1.js") }}*/
2.3.1. Menegaskan dan Kode Debug
.
Turbulenz JavaScript perpustakaan termasuk kode untuk memvalidasi parameter dan untuk menegaskan bahwa keadaan internal benar. Hal ini dimaksudkan untuk menangkap bug dan memperingatkan programmer masalah sedini mungkin dalam pelaksanaan pertandingan. Sejak debug kode tersebut memiliki biaya kinerja, harus dilucuti dari rilis membangun.
Fungsi Debug disediakan oleh objek debug, dan panggilan ke metode pada objek ini dilucuti dari kode dengan alat maketzjs otomatis.
Pengembang yang ingin memanfaatkan fungsi ini, dan pengembang dengan pipa kode disesuaikan harus menyadari perilaku kode debug, dan mungkin ingin menggunakannya di luar alat maketzjs, melalui jalur-debug.
Catatan :
Sebagai contoh, pengembang yang menjalankan compactor kode pada kode permainan sebelum melewati kode yang ke maketzjs dapat mangle penamaan objek men-debug sehingga mustahil untuk maketzjs untuk menemukan dan menghapus kode debug. Dalam hal ini, strip-men-debug harus dipanggil langsung saat buildingrelease dan konfigurasi kanvas, untuk memastikan bahwa kode debug dihapus sebelum pemadatan atau kebingungan berlangsung.
2.3.2. Generasi HTML
.
Banyak contoh yang diberikan di sini dan di bagian lain menggunakan template default untuk menghasilkan halaman HTML untuk loading dan aplikasi yang berjalan. Template ini dibangun ke dalam alat, tetapi sangat mungkin untuk memasukkan HTML Anda sendiri, menimpa bagian dari template default atau membuat HTML template sendiri dari awal.
Sejak Turbulenz game memiliki akses penuh ke browser JavaScript konteks, mereka dapat berinteraksi dengan DOM HTML dengan cara yang sama yang biasa kode JavaScript bisa. Meskipun hal ini tidak biasanya berguna untuk permainan dikerahkan, selama kontrol pengembangan HTML dapat digunakan untuk mengirim data ke permainan (seperti untuk tweaker parameter), atau untuk menampilkan data tentang pertandingan berjalan (seperti output teks kesalahan atau metrik log) .
Untuk menyesuaikan generasi HTML perlu memahami beberapa konsep template sederhana. Di sini kita secara singkat describeconditions, variabel, blok dan komentar, seperti yang diterapkan di mesin Jinja2 template, yang digunakan oleh alat Turbulenzz.
2.3.3. Warisan, Blok dan Template default
.
HTML template dapat mewarisi dari file HTML lainnya menggunakan deklarasi dalam bentuk:
/*{% extends "file.html" %}*/
Dalam hal ini file.html yang inline dan blok setiap dinyatakan di dalamnya dapat diganti oleh file anak. Untuk memasukkan template default, dibangun ke dalam perangkat, gunakan:
/*{% extends "default" %}*/
(default template dapat diperiksa menggunakan bendera dump-default-template pada alat makehtml):
makehtml --dump-default-template
Misalnya, untuk menambahkan beberapa elemen HTML ke bar di sebelah kiri HTML template default Anda dapat mengganti blok dengan cara sebagai berikut:
/*{% extends "default" %}*/
Blok didefinisikan oleh template default meliputi:
• tz_app_title mendefinisikan judul yang digunakan dalam jendela browser
• tz_app_title_name merupakan gelar di atas halaman
• tz_app_html_controls mendefinisikan elemen HTML untuk ditempatkan di margin sebelah kanan halaman
Lihat template default untuk daftar definitif blok yang dapat diganti. Hal ini juga memungkinkan untuk memperpanjang atau mewarisi dari template yang pada gilirannya mewarisi dari template lain (yang mungkin template default).
2.3.4. Syarat-syarat
.
Kondisi memungkinkan predikasi kode sederhana berdasarkan variabel template, menggunakan markup dari bentuk / * {% jika kondisi pengujian%} * /, diikuti oleh / * {% endif%} * /. Penggunaan utama untuk ini adalah untuk menentukan potongan kode yang harus dieksekusi hanya ketika berjalan di konfigurasi tertentu. Contohnya adalah:
• / * {% jika tz_development%} * / berarti kode permainan JavaScript disertakan menggunakan tag script memungkinkan untuk debugging mudah. Variabel ini benar maka bendera --mode untuk alat yang digunakan untuk menentukan modus kanvas-debug.
• / * {% jika% tz_canvas} * / berarti permainan berjalan menggunakan kanvas (non-plugin) versi mesin Turbulenz. Variabel ini benar di kanvas dan kanvas debug mode.
• / * {% jika tz_hybrid%} * / berarti permainan berjalan menggunakan kedua kanvas (non-plugin) versi mesin Turbulenz dan versi Plugin (tersedia sebagai TurbulenzEngine dan TurbulenzEnginePlugin masing-masing). Variabel ini adalah benar ketika opsi hybrid digunakan.
Ini dapat digunakan dalam JavaScript, atau kode HTML.
2.3.5. Variabel
.
Markup digunakan untuk ekspansi variabel / * {{variabel}} * /. Untuk alat Turbulenz kita mendefinisikan beberapa ekspansi variabel khusus untuk memungkinkan aplikasi yang akan dibangun.
Untuk kode JavaScript yang kami sediakan adalah sebagai berikut:
• javascript ini memungkinkan file JavaScript untuk dimasukkan atau direferensikan. Untuk perkembangan membangun, sebuah tag script HTML akan disertakan dengan referensi ke file JavaScript, sedangkan untuk rilis membangun file JavaScript akan inline dalam kode bundel.
Untuk kode HTML tidak menggunakan template default, kami menyediakan
• tz_engine_div - memperluas kode HTML membuat tag HTML yang tepat untuk mengatur kanvas atau instantiate plugin browser (tergantung pada modus membangun)
• tz_include_js - mengembang untuk satu set HTML <script> tag yang mencakup setiap file JS yang diperlukan dalam halaman.
• tz_startup_code - memperluas kode JavaScript dengan benar dijalankan mesin dan mengeksekusi fungsi theTurbulenzEngine.onload. Variabel ini harus digunakan dalam <script> tag.
2.3.6. Komentar
.
Komentar markup adalah / * {# komentar #} * / yang hanya memungkinkan komentar untuk ditempatkan ke dalam template yang tidak akan muncul dalam output kode dari alat. (Proses pemadatan di mode rilis menghapus komentar JavaScript).
2.4. Rekomendasi proyek permainan
.
Turbulenz membuat perangkat tidak memaksakan struktur nyata tentang bagaimana sebuah proyek permainan diatur atau dibangun. Namun kami merekomendasikan bahwa pengembang mengikuti panduan yang diberikan di sini.
2.4.1. Tata Letak Kode
.
Sejak HTML dapat merujuk ke Js file kode (dalam mode pembangunan), file-file js harus berada di direktori di bawah output HTML. Membangun sistem harus baik membangun html, .tzjs dan file js ke akar proyek, atau ke dalam direktori membangun dimana semua file tergantung akan disalin.
Kami menyarankan membangun output masuk ke akar proyek di mana ia dapat referensi sisa kode game dan aset, dengan struktur direktori berikut di bawah ini. Lihat templateapp untuk contoh.
script: Main kode permainan dan perpustakaan file.
template: Js permainan dan template html. File Js harus berisi entry point TurbulenzEngine.onload dan kemudian memanggil ke dalam kode di script.
jslib: Salinan direktori jslib dari SDK instalasi.
membangun: Menengah membangun file dan data ketergantungan.
Bila menggunakan kanvas-debug membangun modus, hanya kode minimal dihasilkan dari template akan tertanam ke dalam halaman HTML. Perubahan direktori script tidak akan memerlukan membangun kembali. (Plugin dan kanvas mode akan selalu membutuhkan membangun kembali kode bundel untuk setiap perubahan kode).
2.4.2. Tata Letak aset
.
Seperti dengan kode, sebaiknya menjaga sumber data aset di subdirektori dari root proyek.
aset / model: folder aset baku untuk model (sebelum konversi). yaitu .dae, Obj
aset / tekstur: Folder aset baku tekstur (sebelum konversi). yaitu tga, png, jpg, bmp
aset / shader: Folder baku aset untuk shader (sebelum konversi). yaitu .cgfx
Folder staticmax harus digunakan untuk output dari membangun aset untuk memaksimalkan efektivitas cache browser, seperti yang dijelaskan dalam Aset bagian.
Membangun sistem harus mempertahankan file 'mapping_table.json' untuk membantu kode runtime menemukan yang tepat unik bernama file understaticmax.
2.5. Coding
.
Berikut adalah beberapa rekomendasi khusus untuk pemrograman JavaScript menggunakan TurbulenzEngine. Pembangunan JavaScript Guidecontains lebih detail dan penjelasan dari beberapa prinsip-prinsip ini, serta pemrograman dan kinerja pedoman JavaScript umum.
2.5.1. Memberikan waktu kembali ke browser
.
Banyak operasi yang dilakukan oleh browser terjadi asynchronously, dan perlu untuk memastikan bahwa browser memiliki waktu yang cukup untuk menangani semua operasi ini dan acara.
Ketika kode JavaScript untuk permainan berjalan, tidak ada kode JavaScript lainnya dapat berjalan pada waktu yang sama. Ini berarti bahwa tugas yang panjang (misalnya mengkonversi format aset pada waktu beban) dapat memperkenalkan penundaan yang signifikan ke area lain dari halaman:
• UI Browser dan kontrol
• Tab lainnya berjalan pada browser
• JavaScript berjalan pada halaman yang sama
• Operasi lainnya JavaScript dilakukan oleh permainan Anda
Ekuivalen, permainan loop utama harus dijadwalkan akan dipanggil sekali per frame. Sebuah membangun seperti loop sementara tidak akan memberikan browser kesempatan untuk melaksanakan setiap pemuatan atau operasi rendering, dan kemungkinan akan menghasilkan eksekusi peramban menghentikan permainan.
Kode JavaScript hanya memberikan waktu kembali ke browser setelah semua fungsi telah kembali
Fungsi setInterval tersedia di objek TurbulenzEngine dapat digunakan untuk menjadwalkan callback dengan cara ini:
var intervalID; function executionLoopFn() { var currentTime = TurbulenzEngine.time;
executionLoopFn akan dipanggil sekali setiap 60 detik.
Catatan
Fungsi window.setInterval yang disediakan oleh browser umumnya memiliki resolusi terlalu rendah untuk game. TurbulenzEngine.setInterval memanfaatkan API lain atau ekstensi browser untuk memastikan callback terjadi interval yang jauh lebih halus dan lebih akurat.
Namun, karena fakta bahwa waktu eksekusi saham permainan lingkaran dengan operasi lain, adalah mustahil untuk menjamin waktu yang akurat dari callback setiap saat. Properti TurbulenzEngine.time memberikan resolusi tinggi informasi waktu. Permainan dapat menggunakan ini untuk menjaga pembaruan negara permainan dan animasi konsisten dengan harapan pemain.
Fungsi TurbulenzEngine.setTimeout mirip dengan setInterval, tapi jadwal panggilan balik satu-shot daripada doa diulang. Melewati batas waktu 0 sampai fungsi ini memberikan browser kesempatan untuk menangani operasi lainnya sementara meminta waktu eksekusi lanjut sesegera mungkin. Contoh di bawah agak dibikin, tapi menunjukkan bagaimana hal ini dapat digunakan untuk melakukan perhitungan yang panjang sementara tidak menyebabkan browser untuk membekukan atau menghentikan eksekusi dari permainan.
var fibCallback = function fibCallbackFn(value)
Catatan :
Ini cukup ekstrim, pada kenyataannya kita ingin menghitung lebih dari satu Fibonacci istilah untuk setiap loop.
2.5.2. Fungsi caching
.
Melihat ke atas metode pada objek memiliki biaya yang terkait dengan itu, setara dengan mencari properti lainnya. Waktu yang signifikan sering dapat diselamatkan oleh caching metode bukannya memaksa lookup baru di setiap penggunaan. Misalnya, untuk jumlah array 1.000 vektor implementasi pertama dapat mengambil form ini:
for (var i = 0; i < 1000; i += 1)
Dalam melaksanakan setiap langkah loop mesin JavaScript harus cek pertama bagi keberadaan fungsi v3Add pada VMathobject, kemudian mengambil dan memanggil fungsi yang dengan set ini dengan objek VMath.
Kita bisa menghindari pemeriksaan berulang yang tidak perlu untuk v3Add dengan cara berikut:
var v3Add = VMath.v3Add;
2.5.3. Pengetikan Array
.
Pengetikan array memungkinkan kode JavaScript untuk membuat dan buffer akses memori baku, dan menafsirkan data berbagai tipe primitif, asInt32 seperti, Float32, dll (lihat http://www.khronos.org/registry/typedarray/specs/latest/ untuk penuh detail). Banyak mesin JavaScript yang 'sadar' dari array diketik dan dapat menghasilkan dioptimalkan JIT dikompilasi kode untuk beroperasi pada mereka. Untuk alasan ini, kami merekomendasikan penggunaan untuk menyimpan array yang besar dari nilai jenis yang sama.
Kode bentuk berikut dapat digunakan untuk memeriksa dukungan berbagai diketik
var ArrayConstructor = Array;
Data dalam array diketik juga dapat dikirimkan ke beberapa API mesin untuk kinerja yang optimal. Misalnya, ketika pengaturan data pada aVertexBuffer, array diketik menggunakan jenis yang tepat (yaitu pencocokan format vertex) dapat dikirim ke hardware yang memiliki grafis dengan tidak ada jenis konversi, sedangkan Array JavaScript nilai memerlukan mesin untuk iterate melalui array dalam mengkonversi nilai ganda ke format yang sesuai. Lihat The IndexBuffer Obyek, The VertexBuffer Obyek dan The Tekstur Obyek untuk rincian format data yang optimal.
Turbulenz MathDevice membuat ekstensif menggunakan jenis Float32Array untuk vektor dan matriks benda.
Langganan:
Postingan (Atom)