Pengenalan kepada Stage.js

Stage.js adalah perpustakaan JavaScript yang ringan dan terbuka untuk pembangunan permainan HTML5 2D HTML5. Ia menggunakan model seperti DOM untuk memanipulasi kanvas dan menguruskan kitaran rendering aplikasi itu sendiri. Tutorial ini akan memperkenalkan ciri teras Stage.js untuk membantu anda memulakan dengan mudah.

mata utama

Stage.js adalah perpustakaan JavaScript yang ringan dan terbuka untuk pembangunan permainan HTML5 2D HTML5, yang menggunakan model seperti DOM untuk mengendalikan kanvas dan secara bebas menguruskan kitaran rendering aplikasi anda.
Perpustakaan menyediakan pelbagai ciri termasuk kedudukan nod (menentukan bagaimana nod melekat pada nod induk mereka), peristiwa tetikus dan sentuhan untuk kemas kini interaktif, animasi Tween untuk peralihan lancar, dan paparan grafik dan animasi untuk paparan grafik dan koleksi tekstur animasi.
stage.js mudah digunakan dan intuitif, dan sesuai untuk pemaju yang ingin membuat aplikasi web atau permainan interaktif tanpa pengekodan kompleks atau pengetahuan luas grafik web. Ia boleh dipasang menggunakan NPM (Pengurus Pakej Node) dan terima kasih kepada reka bentuk responsifnya, ia serasi dengan platform desktop dan mudah alih.

Pemasangan dan gunakan

Pertama, muat turun Perpustakaan Stage.js. Anda boleh mendapatkan versi terkini dari repositori GitHub (yang mengandungi beberapa contoh pemula). Anda juga boleh memuatkannya terus dari CDN jika anda lebih suka. Selepas memasukkan fail teras, anda mesti menambah fail JavaScript anda sendiri, tetapi berhati -hati untuk tidak memasukkan fail aplikasi anda sebelum perpustakaan

.

Membuat aplikasi di stage.js dicapai dengan lulus fungsi panggil balik ke

<code class="language-html">
</code>

. Perpustakaan akan memuatkan semua komponen yang diperlukan. Akhirnya, ia akan memanggil fungsi panggil balik dan menjadikan semuanya ke skrin. Setiap aplikasi yang anda buat akan mempunyai pokok dan panggung akan berada di akar pokok itu. Semua elemen lain, seperti imej atau rentetan, akan menjadi nod mereka. Semasa setiap kitaran rendering, apabila nod dikemas kini, pokok aplikasi akan direkodkan semula.

Stage()

kedudukan nod (pinning)

kedudukan nod menentukan bagaimana nod dilampirkan pada nod induknya. Terdapat banyak pilihan yang boleh anda tetapkan menggunakan kedudukan nod. Sebahagian daripada mereka adalah saiz, kedudukan, penjajaran, dan transformasi. Berikut adalah contoh mudah dan penjelasannya.

kita mula -mula menentukan saiz viewport. Kami melampirkan roda imej.png dirujuk sebagai "roda" ke panggung. Selepas itu, kami menggunakan "mengendalikan" untuk menetapkan kedudukan awal imej atau nod ini. "Mengendalikan" pada mana -mana nod, meletakkan dirinya pada offset yang ditentukan oleh titik penjajaran pada nod induknya. Kedua -dua "mengendalikan" dan "menyelaraskan" ditentukan sebagai unit relatif. Sebagai contoh, 0 adalah sudut kiri atas dan 1 adalah sudut kanan bawah. Kod di atas memposisikan roda di tengah viewport.

<code class="language-javascript">Stage(function (stage) {
    stage.viewbox(700, 700);
    Stage.image('wheel')
        .appendTo(stage)
        .pin('handle', 0.5);
});

Stage({
    name: 'wheel',
    image: 'wheel.png'
});</code>

Untuk meletakkan imej pada jarak mendatar tertentu dari pusat, anda boleh menggunakan "offsetx" seperti yang ditunjukkan di bawah:

<code class="language-html">
</code>

Sila ambil perhatian bahawa jarak di atas bukan 300 piksel, tetapi 3/14 kali saiz viewport. Anda juga boleh menetapkan nilai lain untuk nod seperti skala, condong, dan putaran. Untuk skala dalam arah tertentu (seperti mendatar), anda boleh menggunakan Scalex. Coretan kod berikut skala roda secara mendatar sebanyak 1.4 kali.

<code class="language-javascript">Stage(function (stage) {
    stage.viewbox(700, 700);
    Stage.image('wheel')
        .appendTo(stage)
        .pin('handle', 0.5);
});

Stage({
    name: 'wheel',
    image: 'wheel.png'
});</code>

putaran, zum, dan kecondongan akan menjadi pusat nod sebagai titik putaran secara lalai. Anda juga boleh menetapkan titik putaran yang berbeza untuk nod menggunakan kaedah berikut:

<code class="language-javascript">Stage.image('wheel')
    .appendTo(stage)
    .pin({
        handle: 0.5,
        offsetX: 300
    });</code>

semua dalam semua, elemen tetap membolehkan anda memindahkannya dan skala atau memutarnya.

peristiwa tetikus dan sentuh

Untuk mengemas kini nod dalam interaksi pengguna, anda boleh menggunakan pelbagai peristiwa tetikus dan sentuhan. Teruskan dengan contoh roda kami di atas, kami boleh menulis kod berikut:

<code class="language-javascript">Stage.image('wheel')
    .appendTo(stage)
    .pin({
        handle: 0.5,
        scaleX: 1.4
    });</code>

atau anda boleh menentukan peristiwa -peristiwa ini, seperti Stage.Mouse.CLICK = 'click';. Kod yang dikemas kini ialah:

<code class="language-javascript">node.pin({
    pivotX: x,
    pivotY: y
});</code>

Contoh lain ialah Stage.Mouse.MOVE = 'touchmove mousemove';.

Animasi Tween (tweening)

Animasi Tween menggunakan peralihan lancar ke nilai kedudukan nod. Ini menghalang perubahan mendadak dalam kedudukan atau saiz nod yang berkaitan. Sebagai contoh, kod di bawah berputar roda secara tiba -tiba di Pi Radians dan mengubah kedudukannya sebanyak 600 setiap kali ia mengklik.

<code class="language-javascript">var wheelNode = Stage.image('wheel').appendTo(stage);
wheelNode.pin({
    'handle': 0.5
});
wheelNode.on('click', function () {
    // 在此处对轮子执行某些操作。
});</code>

Walau bagaimanapun, menambah kaedah tween boleh melancarkan peralihan.

<code class="language-javascript">wheelNode.on(click, function () {
     // 在此处对轮子执行某些操作。
 });</code>

Beberapa pilihan tersedia, seperti kaedah pelonggaran, tempoh, dan kelewatan. Dalam kod di atas, saya telah menetapkan tempoh ke 3000 milisaat dan fungsi pelonggaran untuk melantun. Di samping itu, anda boleh menggunakan pelbagai fungsi pelonggaran seperti linear, quad, kubik, dan kuartal. Menetapkan kelewatan akan memulakan peralihan selepas kelewatan yang ditentukan. Jika tiada nod diperlukan selepas animasi selesai, anda boleh memanggil tween.remove(); untuk memadam nod. Untuk melakukan tindakan lain, anda boleh melaksanakan fungsi panggil balik menggunakan coretan kod berikut selepas animasi tween selesai:

<code class="language-javascript">var wheelRotation = Math.PI;
var wheelPosition = 300;

wheelNode.on('click', function () {
    wheelRotation = -wheelRotation;
    wheelPosition = -wheelPosition;
    this.pin({
        rotation: wheelRotation,
        offsetX: wheelPosition
    });
});</code>

Tekstur atlas

Tekstur digunakan oleh nod pokok untuk menarik grafik pada kanvas. Untuk memaparkan grafik pada kanvas, anda boleh menggunakan meja sprite, juga dikenali sebagai "galeri tekstur." Menetapkan nama atlas tekstur adalah pilihan. Jadual Sprite perlu mempunyai satu set tekstur yang dinamakan. Untuk menggunakannya dalam permohonan, kita boleh merujuknya dengan nama. Anda boleh menggunakan tatasusunan tekstur sebagai bingkai untuk membuat animasi. Animasi itu sendiri adalah nod. Berikut adalah contoh dengan pahlawan animasi:

<code class="language-javascript">wheelNode.on('click', function () {
    wheelRotation = -wheelRotation;
    wheelPosition = -wheelPosition;
    this.tween(3000)
        .pin({
            rotation: wheelRotation,
            offsetX: wheelPosition
        })
        .ease('bounce');
});</code>

Untuk menghidupkan pahlawan, anda memerlukan kod berikut. Untuk menjadikannya lebih cepat, anda boleh meningkatkan FPS:

<code class="language-javascript">tween.done(function () {
    // 在此处执行您的操作。
});</code>

anim Terdapat banyak kaedah lain, seperti gotoFrame(n), yang akan membawa anda terus ke bingkai n . Bergantung pada nilai n , anda juga boleh menggunakan untuk memindahkan bingkai moveFrame(n) n ke hadapan atau ke belakang.

Ringkasan

Dalam tutorial pengenalan ini, kami meliputi semua yang anda perlukan untuk memulakan dengan panggung.js. Konsep yang dibincangkan harus membantu anda membuat animasi aksara asas dan berinteraksi dengan pengguna menggunakan sprite. Anda boleh mengetahui lebih lanjut mengenai perpustakaan ini dari laman web rasmi. Saya juga mengesyorkan agar anda memuat turun fail dari halaman GitHub mereka. Demo yang dimasukkan ke dalam fail muat turun akan menjelaskan lagi isu tersebut.

(bahagian FAQ harus ditambah di sini, kandungannya sama dengan bahagian FAQ dalam teks input, tetapi boleh sedikit menulis dan menyesuaikan seperti yang diperlukan)

Atas ialah kandungan terperinci Pengenalan kepada Stage.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!