Bab 1
Pendahuluan
1.1 Latar Belakang.
Arcade adalah sistem fisika real digunakan dengan Phaser dan
menyediakan sistem fisika dasar yang memungkinkan untuk tabrakan, percepatan,
kecepatan dan sebagainya. Jika Anda sudah menggunakan Phaser, maka kemungkinan Anda
akan terbiasa dengan sistem fisika Arcade. Phaser memiliki 3 sistem fisika yang
tersedia salah satunya adalah arcade physich. Bila menggunakan sistem Arcade
Fisika, yang HitBox untuk sprite akan selalu menjadi Loncat persegi panjang
sederhana. dalam beberapa game Arcade Physic biasanya adalah game yang
membutuhkan dasar- dasar fisika dalam proses pembuatannya. dalam hal ini,
kalian dapat menggunakan Arcade Physich dalam pembuatan game yang memerlukan
skill seperti pada skill diatas.
Dewasa ini, perkembangan game yang menggunakan sistem pada
phaser dan menjadikan game arcade physic sangatlah beragam dan digunakan untuk
semua kalangan. tidak hanya untuk game remaja hingga dewasa game anak anak juga
dapat menggunakan arcade physic dalam proses pembuatannya. dalam
perkembangannya pula, anak-anak muda sangatlah menyukai game fisik yang sangat
real daripada hanya game 2d yang tidak nyata. atau game yang dapat mengasah
kemampuan seseorang dalam menyelesaikan suatu misi permainan didalamnya. Video
game dapat memberikan stimulus positif terhadap anak apabila apa yang anak-anak
mainkan sesuai dengan usia dan tujuan dalam mengembangkan kemampuan motorik
anak tersebut. Game dapat membuat seorang anak berfikir secara tidak langsung
dengan suatu kejadian yang akan menimpanya atau seorang anak lebih respect
terhadap suatu hal akibat dari permainan game yang ia mainkan. banyak hal
positif yang bisa didapatkan para orang tua pada anaknya jika memang seorang
anak tersebut memainkan permainan yang berbobot atau sesuai dengan usianya yang
masih sangat produktif.
Pada buku kali ini, kami akan membahas secara terperinci
mengenai beberapa game yang menggunakan sistem arcade physic pada phaser dan
juga kami akan memberikan contoh-contoh game yang telah dibuat pada makalah
ini. mengenai kodingan tentang arcade physic hingga hasil dari game yang dapat
dimainkan oleh anak-anak. sasaran dalam game ini adalah memberikan efek
tampilan yang lebih nyata pada sebuah permainan baik itu pada versi mobile atau
dekstop.
1.1.1 Mengapa menggunakan arcade Physic dalam pembuatan game.
Meskipun telah banyak hasil yang lebih memuaskan
dibandingkan dengan menggunakan arcade physic tetapi perkembangannya arcade
physic amsih sangat diminati para pembuat industri game untuk membuat game
lebih hidup atau lebih baik dari segi tampilan dan hasilnya.
1.1.1.1 Dasar Teori.
Dasar teori yang ditulis dalam pembuatan makalah ini di
dapat dari pencarian internet dan blog-blog terkait yang akan dituliskan secara
rinci pada daftar pustaka.
1.1.1.2 Estimasi fungsi pada arcade physic.
Estimasi fungi ini memastikan bahwa penggunaan rumus rumus
yang dipakai dalam pembuatan game menggunakan arcade physic ini berjalan sesuai
yang diinginkan oleh pembuat dan juga dapat membantu mempermudah dalam
pembuatan gamabr lebih halus dan tajam pada hasil yang akan di tampilkannya.
dan data statistik yang dipergunakan nantinya telah memiliki keaslian data
tersebut.
1.2 Rumusan Masalah.
Dalam makalah kali ini dijelaskan mengenai arcade physic dan
juga bagaimana pembuatan game yang menggunakan sistem tersebut mulai dari awal
hingga game dapat digunakan oleh seorang pengguna dan tidak terjadi masalah
yang berarti pada proses debug.
1.3 Tujuan Penulisan .
Dengan memilih tema diatas dan menyusun buku ini diharapkan
agar para pembaca mampu memahami atau hanay sekedar mengenal mengenai Arcade
Physic tersebut. serta teknik-teknik dalam menggunakan sistem tersebut di dalam
pharse. sekaligus, buku ini dibuat untuk memenuhi tugas perkuliahan penulis,
dengan mata kuliah Softskill di jurusan Teknik Informatika.
Bab 2
KONSEP DASAR
ARCADE PHYSIC.
Arcade adalah sistem fisika real digunakan dengan Phaser dan
menyediakan sistem fisika dasar yang memungkinkan untuk tabrakan, percepatan,
kecepatan dan sebagainya. Jika Anda sudah menggunakan Phaser, maka kemungkinan
Anda akan terbiasa dengan sistem fisika Arcade. Phaser memiliki 3 sistem fisika
yang tersedia salah satunya adalah arcade physich. Bila menggunakan sistem
Arcade Fisika, yang HitBox untuk sprite akan selalu menjadi Loncat persegi
panjang sederhana. dalam beberapa game Arcade Physic biasanya adalah game yang
membutuhkan dasar- dasar fisika dalam proses pembuatannya. dalam hal ini,
kalian dapat menggunakan Arcade Physich dalam pembuatan game yang memerlukan
skill seperti pada skill diatas.
2.1 ARCADE PHYSIC
The Arcade Fisika dunia. Mengandung benturan terkait,
tumpang tindih dan gerak metode Arcade Fisika.
2.1.0.3 PARAMETER
Nama
|
Mengetik
|
Deskripsi
|
game
|
Phaser.Game
|
referensi untuk contoh permainan
saat ini.
|
2.1.0.4 kelas-kelas
Tubuh, TilemapCollision
2.1.0.5 Properti Umum
·
[statis] BOTTOM_TOP: Nomor
Sebuah konstan digunakan untuk nilai sortDirection. Gunakan
ini jika dunia permainan Anda sempit tapi tinggi dan gulungan dari bawah ke
atas (yaitu Komando
atau vertikal bergulir menembak-em-up)
·
[statis] LEFT_RIGHT: Nomor
Sebuah konstan digunakan untuk nilai sortDirection. Gunakan
ini jika dunia permainan Anda lebar tapi pendek dan gulungan dari kiri ke kanan
(yaitu Mario)
·
[statis] right_left: Nomor
Sebuah konstan digunakan untuk nilai sortDirection. Gunakan
ini jika dunia permainan Anda lebar tapi pendek dan gulungan dari kanan ke kiri
(yaitu Mario mundur)
·
[statis] SORT_NONE: Nomor
Sebuah konstan digunakan untuk nilai sortDirection. Gunakan
ini jika Anda tidak ingin melakukan pra-tabrakan menyortir sama sekali, atau
secara manual akan mengurutkan Grup Anda.
·
[statis] TOP_BOTTOM: Nomor
Sebuah konstan digunakan untuk nilai sortDirection. Gunakan
ini jika dunia permainan Anda sempit tapi tinggi dan gulungan dari atas ke
bawah (yaitu Dig Dug)
·
batas: Phaser.
Rectangle Batas-batas dalam mana dunia fisika ada. Default
untuk mencocokkan batas dunia.
·
checkCollision: Object
Mengatur properti checkCollision untuk mengontrol yang batas
tabrakan diproses. Misalnya checkCollision.down = berarti palsu Perairan tidak
bisa berbenturan dengan World.bounds.bottom.Sebuah benda mengandung
diperbolehkan bendera tabrakan.
·
forceX: boolean
Jika World.separate benar akan selalu memisahkan pada sumbu
X sebelum Y. Jika tidak, akan memeriksa total gravitasi pertama.
·
permainan: Phaser.
Game referensi lokal untuk game
·
gravitasi: Phaser.Point
Dunia pengaturan gravitasi. Default ke x: 0, y: 0, atau
tidak ada gravitasi
·
isPaused: boolean
Jika true yang Body.preUpdate metode akan dilewati,
menghentikan semua gerak untuk semua badan. Perhatikan bahwa metode lain
seperti collide akan tetap bekerja, jadi hati-hati untuk tidak memanggil mereka
pada tubuh berhenti
·
maxLevels: Nomor
Digunakan oleh Quadtree untuk mengatur jumlah maksimum
tingkat iterasi
·
maxObjects: Nomor
Digunakan oleh Quadtree untuk mengatur jumlah maksimum obyek
per quad.
·
OVERLAP_BIAS: Nomor
Sebuah nilai tambah terhadap nilai-nilai delta selama
pemeriksaan tabrakan.
·
Quadtree: Phaser.QuadTree Dunia
Quadtree.
·
skipQuadTree: boolean
Jika benar Quadtree tidak akan digunakan untuk tabrakan
apapun. QuadTrees besar jika objek yang baik tersebar dalam permainan Anda,
jika tidak mereka adalah hit kinerja. Jika Anda mengaktifkan ini Anda dapat
menonaktifkan pada per tubuh secara via Body.skipQuadTree
·
sortDirection: Nomor
Digunakan ketika bertabrakan Sprite vs Group, atau Grup vs
Group, ini mendefinisikan arah semacam itu didasarkan pada. Default adalah
Phaser.Physics.Arcade.LEFT_RIGHT.
2.1.0.6 Metode publik
·
accelerateToObject (DisplayObject,
tujuan, kecepatan, xSpeedMax, ySpeedMax) → {jumlah} Menetapkan acceleration.x /
y properti pada objek layar sehingga akan bergerak menuju target pada kecepatan
tertentu (dalam piksel per sq detik.) Anda harus memberikan nilai kecepatan
maksimum, di luar yang objek layar tidak akan pergi lebih cepat . Catatan:
Objek display tidak terus melacak target.Jika target perubahan lokasi selama
transit objek layar tidak akan mengubah jalurnya. Catatan: Objek display tidak
berhenti bergerak setelah mencapai koordinat tujuan.
·
bertabrakan (Object1, Object2,
collideCallback, processCallback, callbackContext)→ {boolean} Cek untuk
tumbukan antara dua benda permainan. Anda dapat melakukan Sprite vs Sprite,
Sprite vs Group, Grup vs Group, Sprite vs Tilemap Layer atau Grup vs tabrakan
Lapisan Tilemap. Kedua parameter pertama dan kedua dapat array obyek, jenis
yang berbeda. Jika dua array berlalu, isi parameter pertama akan diuji terhadap
semua isi dari 2 parameter. Objek yang juga secara otomatis dipisahkan. Jika
Anda tidak memerlukan pemisahan kemudian menggunakan ArcadePhysics.overlap
gantinya. Sebuah processCallback opsional dapat disediakan. Jika diberikan
fungsi ini akan dipanggil ketika dua sprite ditemukan bertabrakan. Hal ini
disebut sebelum pemisahan apapun terjadi, memberikan Anda kesempatan untuk
melakukan pemeriksaan tambahan. Jika fungsi mengembalikan benar maka tabrakan
dan pemisahan dilakukan. Jika ia mengembalikan palsu itu dilewati. The
collideCallback merupakan fungsi opsional yang hanya dipanggil jika dua sprite
bertabrakan. Jika processCallback telah ditetapkan maka perlu untuk kembali
benar untuk collideCallback untuk dipanggil.
·
computeVelocity (axis, tubuh,
kecepatan, percepatan, drag, max) → {jumlah} Sebuah fungsi tween seperti yang
berubah
·
distanceBetween (sumber, target) →
{jumlah} Cari jarak antara dua benda display (seperti Sprite).
·
distanceToPointer (DisplayObject,
pointer) → {jumlah} Cari jarak antara benda display (seperti Sprite) dan
Pointer a. Jika tidak ada Pointer diberi Input.activePointer digunakan.
perhitungan dibuat dari benda-benda display x / y koordinat. Ini mungkin
top-kiri jika anchor-nya belum berubah. Jika Anda perlu menghitung dari pusat
objek display bukannya menggunakan metode distanceBetweenCenters () Jarak ke
Pointer dikembalikan dalam ruang layar, bukan ruang dunia
·
distanceToXY (DisplayObject, x, y) →
{jumlah} Cari jarak antara benda display (seperti Sprite) dan diberikan
koordinat x / y. perhitungan dibuat dari benda-benda display x / y koordinat.
Ini mungkin top-kiri jika anchor-nya belum berubah. Jika Anda perlu menghitung
dari pusat objek display bukannya menggunakan metode distanceBetweenCenters ()
·
mengaktifkan (objek, anak-anak) Ini
akan membuat tubuh Arcade Fisika pada objek permainan diberikan atau array dari
objek permainan. Sebuah permainan objek hanya dapat memiliki 1 fisika tubuh
aktif pada satu waktu, dan tidak dapat diubah sampai objek dihancurkan.
·
enableBody (objek) Menciptakan
sebuah badan Arcade Fisika pada objek permainan yang diberikan. Sebuah
permainan objek hanya dapat memiliki 1 fisika tubuh aktif pada satu waktu, dan
tidak dapat diubah sampai tubuh nulled. Bila Anda menambahkan sebuah badan
Arcade Fisika untuk sebuah objek maka secara otomatis akan menambahkan objek ke
Grup induknya berbagai hash.
·
getObjectsAtLocation (x, y,
kelompok, callback, callbackContext, callbackArg) → {Array. <
PIXI.DisplayObject >} Mengingat Group dan lokasi ini akan memeriksa untuk
melihat anak-anak Kelompok tumpang tindih dengan koordinat. Setiap anak akan
dikirim ke callback diberikan untuk diproses lebih lanjut.Perhatikan bahwa
anak-anak tidak diperiksa untuk pesanan mendalam, tetapi hanya jika mereka
tumpang tindih koordinat atau tidak.
·
berpotongan (body1, body2) →
{boolean} Periksa persimpangan terhadap dua tubuh.
·
moveToObject (DisplayObject, tujuan,
kecepatan, maxTime) → {jumlah} Memindahkan objek display yang diberikan
terhadap objek tujuan pada kecepatan yang stabil. Jika Anda menentukan maxTime
maka akan menyesuaikan kecepatan (Timpa apa yang ditetapkan) sehingga tiba di
tujuan dalam jumlah detik. Timing adalah perkiraan karena cara browser timer
bekerja. Memungkinkan untuk varians + - 50ms. Catatan: Objek display tidak
terus melacak target.Jika target perubahan lokasi selama transit objek layar
tidak akan mengubah jalurnya. Catatan: Objek display tidak berhenti bergerak
setelah mencapai koordinat tujuan. Catatan: Apakah tidak memperhitungkan
percepatan akun, maxVelocity atau drag (jika Anda telah menetapkan hambatan
atau percepatan terlalu tinggi objek ini mungkin tidak bergerak sama sekali)
·
tumpang tindih (Object1, Object2,
overlapCallback, processCallback,callbackContext) → {boolean} Cek untuk tumpang
tindih antara dua benda permainan. Benda-benda dapat Sprite, Grup atau
Emiten.Anda dapat melakukan Sprite vs Sprite, Sprite vs Group dan Kelompok vs
cek Grup tumpang tindih.Tidak seperti berbenturan objek yang tidak secara
otomatis dipisahkan atau telah setiap fisika terapan, mereka hanya menguji
hasil tumpang tindih. Kedua parameter pertama dan kedua dapat array obyek,
jenis yang berbeda. Jika dua array berlalu, isi parameter pertama akan diuji
terhadap semua isi dari 2 parameter. CATATAN: Fungsi ini tidak rekursif, dan
tidak akan menguji terhadap anak dari objek berlalu (yaitu Grup dalam Grup).
·
setBounds (x, y, lebar, tinggi)
Update ukuran dunia fisika.
·
semacam (kelompok, sortDirection)
Metode ini akan mengurutkan Grup hash array yang. Jika Grup memiliki
physicsSortDirection mengaturnya akan menggunakan arah semacam didefinisikan.
Sebaliknya jika parameter sortDirection tidak terdefinisi, atau
Group.physicsSortDirection adalah null, ia akan menggunakan
Phaser.Physics.Arcade.sortDirection. Dengan mengubah Group.physicsSortDirection
Anda dapat menyesuaikan setiap kelompok untuk menyortir dalam urutan yang
berbeda.
·
sortLeftRight (a, b) → {bilangan
bulat} Fungsi Urutkan untuk menyortir dua tubuh berdasarkan pada KIRI ke arah
semacam KANAN. Ini disebut secara otomatis oleh World.sort
·
sortTopBottom (a, b) → {bilangan
bulat} Fungsi Urutkan untuk menyortir dua tubuh berdasarkan pada TOP ke arah
semacam BOTTOM. Ini disebut secara otomatis oleh World.sort
·
updateMotion (The) Disebut secara
otomatis oleh tubuh Fisika, itu update semua nilai gerak terkait pada tubuh
kecuali World.isPaused adalah true .
·
velocityFromAngle (angle, kecepatan,
point) → { Phaser.Point } Mengingat sudut (dalam derajat) dan kecepatan
menghitung kecepatan dan mengembalikannya sebagai objek Point, atau set ke
objek titik tertentu. Salah satu cara untuk menggunakan ini adalah:
velocityFromAngle (angle, 200, sprite.velocity) yang akan menetapkan
nilai-nilai langsung ke kecepatan sprite dan tidak membuat objek titik baru.
·
velocityFromRotation (rotasi,
kecepatan, point) → { Phaser.Point } Mengingat rotasi (dalam radian) dan
kecepatan menghitung kecepatan dan mengembalikannya sebagai objek Point, atau
set ke objek titik tertentu. Salah satu cara untuk menggunakan ini adalah:
velocityFromRotation (rotasi, 200, sprite.velocity) yang akan menetapkan
nilai-nilai langsung ke kecepatan sprite dan tidak membuat objek titik baru.
2.1.0.7 Pengembalian
Phaser.Point
code:
/** * @author Richard Davey <rich@photonstorm.com> *
@copyright 2015 Photon Storm Ltd. * @license {@link
https://github.com/photonstorm/phaser/blob/
master/license.txt|MIT License} */
/** * The Physics Body is linked to a single Sprite. All
physics operations should be performed against the body rather than * the
Sprite itself. For example you
can set the velocity, acceleration, bounce values etc all on
the Body. * * @class Phaser.Physics.Arcade.Body * @constructor * @param
{Phaser.Sprite} sprite -
The Sprite object this physics body belongs to. */
Phaser.Physics.Arcade.Body = function (sprite) {
/** * @property {Phaser.Sprite} sprite - Reference to the
parent Sprite. */ this.sprite = sprite;
/** * @property {Phaser.Game} game - Local reference to
game. */ this.game = sprite.game;
/** * @property {number} type - The type of physics system
this body belongs to. */ this.type = Phaser.Physics.ARCADE;
/** * @property {boolean} enable - A disabled body won't be
checked for any form of collision or overlap or have its pre/post updates run.
* @default */
this.enable = true;
/** * @property {Phaser.Point} offset - The offset of the
Physics Body from the Sprite x/y position. */ this.offset = new Phaser.Point();
/** * @property {Phaser.Point} position - The position of
the physics body. * @readonly */ this.position = new Phaser.Point(sprite.x,
sprite.y);
/** * @property {Phaser.Point} prev - The previous position
of the physics body. * @readonly */ this.prev = new Phaser.Point(this.position.x,
this.position.y);
/** * @property {boolean} allowRotation - Allow this Body to
be rotated? (via angularVelocity, etc) * @default */ this.allowRotation = true;
/** * An Arcade Physics Body can have angularVelocity and
angularAcceleration. Please understand that the collision Body * itself never
rotates, it is always
axis-aligned. However these values are passed up to the
parent Sprite and updates its rotation. * @property {number} rotation */
this.rotation = sprite.rotation;
/** * @property {number} preRotation - The previous rotation
of the physics body. * @readonly */ this.preRotation = sprite.rotation;
/** * @property {number} width - The calculated width of the
physics body. * @readonly */ this.width = sprite.width;
/** * @property {number} height - The calculated height of
the physics body. * @readonly */ this.height = sprite.height;
/** * @property {number} sourceWidth - The un-scaled
original size. * @readonly */ this.sourceWidth = sprite.width;
/** * @property {number} sourceHeight - The un-scaled
original size. * @readonly */ this.sourceHeight = sprite.height;
if (sprite.texture) { this.sourceWidth =
sprite.texture.frame.width; this.sourceHeight = sprite.texture.frame.height; }
/** * @property {number} halfWidth - The calculated width /
2 of the physics body. * @readonly */ this.halfWidth = Math.abs(sprite.width /
2);
/** * @property {number} halfHeight - The calculated height
/ 2 of the physics body. * @readonly */ this.halfHeight =
Math.abs(sprite.height / 2);
/** * @property {Phaser.Point} center - The center
coordinate of the Physics Body. * @readonly */ this.center = new
Phaser.Point(sprite.x + this.halfWidth,
sprite.y + this.halfHeight);
/** * @property {Phaser.Point} velocity - The velocity, or
rate of change in speed of the Body. Measured in pixels per second. */
this.velocity = new
Phaser.Point();
/** * @property {Phaser.Point} newVelocity - The new
velocity. Calculated during the Body.preUpdate and applied to its position. *
@readonly */
this.newVelocity = new Phaser.Point(0, 0);
/** * @property {Phaser.Point} deltaMax - The Sprite
position is updated based on the delta x/y values. You can set a cap on those
(both +-) using deltaMax. */
this.deltaMax = new Phaser.Point(0, 0);
/** * @property {Phaser.Point} acceleration - The
acceleration is the rate of change of the velocity. Measured in pixels per
second squared. */ this.acceleration =
new Phaser.Point();
/** * @property {Phaser.Point} drag - The drag applied to
the motion of the Body. */ this.drag = new Phaser.Point();
/** * @property {boolean} allowGravity - Allow this Body to
be influenced by gravity? Either world or local. * @default */
this.allowGravity = true;
/** * @property {Phaser.Point} gravity - A local gravity
applied to this Body. If non-zero this over rides any world gravity, unless
Body.allowGravity is set to
false. */ this.gravity = new Phaser.Point(0, 0);
/** * @property {Phaser.Point} bounce - The elasticity of
the Body when colliding. bounce.x/y = 1 means full rebound, bounce.x/y = 0.5
means 50% rebound
velocity. */ this.bounce = new Phaser.Point();
/** * @property {Phaser.Point} maxVelocity - The maximum
velocity in pixels per second sq. that the Body can reach. * @default */
this.maxVelocity = new
Phaser.Point(10000, 10000);
/** * @property {Phaser.Point} friction - The amount of
movement that will occur if another object 'rides' this one. */ this.friction =
new Phaser.Point(1, 0);
/** * @property {number} angularVelocity - The angular
velocity controls the rotation speed of the Body. It is measured in radians per
second. * @default */ t
his.angularVelocity = 0;
/** * @property {number} angularAcceleration - The angular
acceleration is the rate of change of the angular velocity. Measured in radians
per second squared.
* @default */ this.angularAcceleration = 0;
/** * @property {number} angularDrag - The drag applied
during the rotation of the Body. * @default */ this.angularDrag = 0;
/** * @property {number} maxAngular - The maximum angular
velocity in radians per second that the Body can reach. * @default */
this.maxAngular = 1000;
/** * @property {number} mass - The mass of the Body. When
two bodies collide their mass is used in the calculation to determine the
exchange of velocity. *
@default */ this.mass = 1;
/** * @property {number} angle - The angle of the Body in
radians, as calculated by its angularVelocity. * @readonly */ this.angle = 0;
/** * @property {number} speed - The speed of the Body as
calculated by its velocity. * @readonly */ this.speed = 0;
/** * @property {number} facing - A const reference to the
direction the Body is traveling or facing. * @default */ this.facing =
Phaser.NONE;
/** * @property {boolean} immovable - An immovable Body will
not receive any impacts from other bodies. * @default */ this.immovable =
false;
/** * If you have a Body that is being moved around the
world via a tween or a Group motion, but its local x/y position never *
actually changes, then you should
set
Body.moves = false. Otherwise it will most likely fly off
the screen. * If you want the physics system to move the body around, then set
moves to true. * @pr
operty {boolean} moves - Set to true to allow the Physics
system to move this Body, otherwise false to move it manually. * @default */
this.moves = true;
/** * This flag allows you to disable the custom x
separation that takes place by Physics.Arcade.separate. * Used in combination
with your own collision
processHandler you can create whatever type of collision
response you need. * @property {boolean} customSeparateX - Use a custom
separation system or the
built-in one? * @default */ this.customSeparateX = false;
/** * This flag allows you to disable the custom y
separation that takes place by Physics.Arcade.separate. * Used in combination
with your own collision
processHandler you can create whatever type of collision
response you need. * @property {boolean} customSeparateY - Use a custom
separation system or the
built-in one? * @default */ this.customSeparateY = false;
/** * When this body collides with another, the amount of
overlap is stored here. * @property {number} overlapX - The amount of
horizontal overlap during the
collision. */ this.overlapX = 0;
/** * When this body collides with another, the amount of
overlap is stored here. * @property {number} overlapY - The amount of vertical
overlap during the
collision. */ this.overlapY = 0;
/** * If a body is overlapping with another body, but
neither of them are moving (maybe they spawned on-top of each other?) this is
set to true. * @property
{boolean} embedded - Body embed value. */ this.embedded =
false;
/** * A Body can be set to collide against the World bounds
automatically and rebound back into the World if this is set to true. Otherwise
it will leave the World.
*
@property {boolean} collideWorldBounds - Should the Body
collide with the World bounds? */ this.collideWorldBounds = false;
/** * Set the checkCollision properties to control which
directions collision is processed for this Body. * For example
checkCollision.up = false means it won't
collide when the collision happened while moving up. *
@property {object} checkCollision - An object containing allowed collision. */
this.checkCollision = {
none: false, any: true, up: true, down: true, left: true,
right: true };
/** * This object is populated with boolean values when the
Body collides with another. * touching.up = true means the collision happened
to the top of this Body
for example. * @property {object} touching - An object
containing touching results. */ this.touching = { none: true, up: false, down:
false, left: false, right: false
};
/** * This object is populated with previous touching values
from the bodies previous collision. * @property {object} wasTouching - An
object containing
previous touching results. */ this.wasTouching = { none:
true, up: false, down: false, left: false, right: false };
/** * This object is populated with boolean values when the
Body collides with the World bounds or a Tile. * For example if blocked.up is
true then the Body
cannot move up. * @property {object} blocked - An object
containing on which faces this Body is blocked from moving, if any. */
this.blocked = { up: false,
down: false, left: false, right: false };
/** * If this is an especially small or fast moving object
then it can sometimes skip over tilemap collisions if it moves through a tile
in a step. * Set this padding
value to add extra padding to its bounds. tilePadding.x
applied to its width, y to its height. * @property {Phaser.Point} tilePadding -
Extra padding to be added to
this sprite's dimensions when checking for tile collision.
*/ this.tilePadding = new Phaser.Point();
/** * @property {boolean} dirty - If this Body in a
preUpdate (true) or postUpdate (false) state? */ this.dirty = false;
/** * @property {boolean} skipQuadTree - If true and you
collide this Sprite against a Group, it will disable the collision check from
using a QuadTree. */
this.skipQuadTree = false;
/** * If true the Body will check itself against the
Sprite.getBounds() dimensions and adjust its width and height accordingly. * If
false it will compare its
dimensions against the Sprite scale instead, and adjust its
width height if the scale has changed. * Typically you would need to enable
syncBounds if your sprite is
the child of a responsive display object such as a
FlexLayer, * or in any situation where the Sprite scale doesn't change, but its
parents scale is effecting the
dimensions regardless. * @property {boolean} syncBounds *
@default */ this.syncBounds = false;
/** * @property {boolean} _reset - Internal cache var. *
@private */ this._reset = true;
/** * @property {number} _sx - Internal cache var. *
@private */ this._sx = sprite.scale.x;
/** * @property {number} _sy - Internal cache var. *
@private */ this._sy = sprite.scale.y;
/** * @property {number} _dx - Internal cache var. * @private
*/ this._dx = 0;
/** * @property {number} _dy - Internal cache var. *
@private */ this._dy = 0;
};
Phaser.Physics.Arcade.Body.prototype = {
/** * Internal method. * * @method
Phaser.Physics.Arcade.Body#updateBounds * @protected */ updateBounds: function ()
{
if (this.syncBounds) { var b = this.sprite.getBounds();
b.ceilAll();
if (b.width !== this.width || b.height !== this.height) {
this.width = b.width; this.height = b.height; this._reset = true; } } else {
var asx =
Math.abs(this.sprite.scale.x); var asy =
Math.abs(this.sprite.scale.y);
if (asx !== this._sx || asy !== this._sy) { this.width =
this.sourceWidth * asx; this.height = this.sourceHeight * asy; this._sx = asx;
this._sy = asy; this._reset = true;
} }
if (this._reset) { this.halfWidth = Math.floor(this.width /
2); this.halfHeight = Math.floor(this.height / 2);
this.center.setTo(this.position.x + this.halfWidth,
this.position.y + this.halfHeight); }
},
/** * Internal method. * * @method
Phaser.Physics.Arcade.Body#preUpdate * @protected */ preUpdate: function () {
if (!this.enable || this.game.physics.arcade.isPaused) {
return; }
this.dirty = true;
// Store and reset collision flags this.wasTouching.none =
this.touching.none; this.wasTouching.up = this.touching.up;
this.wasTouching.down =
this.touching.down; this.wasTouching.left =
this.touching.left; this.wasTouching.right = this.touching.right;
this.touching.none = true; this.touching.up = false;
this.touching.down = false; this.touching.left = false; this.touching.right =
false;
this.blocked.up = false; this.blocked.down = false;
this.blocked.left = false; this.blocked.right = false;
this.embedded = false;
this.updateBounds();
this.position.x = (this.sprite.world.x -
(this.sprite.anchor.x * this.width)) + this.offset.x; this.position.y = (this.sprite.world.y
- (this.sprite.anchor.y * this.height)) +
this.offset.y; this.rotation = this.sprite.angle;
this.preRotation = this.rotation;
if (this._reset || this.sprite.fresh) { this.prev.x =
this.position.x; this.prev.y = this.position.y; }
if (this.moves) {
this.game.physics.arcade.updateMotion(this);
this.newVelocity.set(this.velocity.x *
this.game.time.physicsElapsed, this.velocity.y *
this.game.time.physicsElapsed);
this.position.x += this.newVelocity.x; this.position.y +=
this.newVelocity.y;
if (this.position.x !== this.prev.x || this.position.y !==
this.prev.y) { this.speed = Math.sqrt(this.velocity.x * this.velocity.x +
this.velocity.y * this.velocity.y);
this.angle = Math.atan2(this.velocity.y, this.velocity.x); }
// Now the State update will throw collision checks at the
Body // And finally we'll integrate the new position back to the Sprite in
postUpdate
if (this.collideWorldBounds) { this.checkWorldBounds(); } }
this._dx = this.deltaX(); this._dy = this.deltaY();
this._reset = false;
},
/** * Internal method. * * @method
Phaser.Physics.Arcade.Body#postUpdate * @protected */ postUpdate: function () {
// Only allow postUpdate to be called once per frame if
(!this.enable || !this.dirty) { return; }
this.dirty = false;
if (this.deltaX() < 0) { this.facing = Phaser.LEFT; }
else if (this.deltaX() > 0) { this.facing = Phaser.RIGHT; }
if (this.deltaY() < 0) { this.facing = Phaser.UP; } else
if (this.deltaY() > 0) { this.facing = Phaser.DOWN; }
if (this.moves) { this._dx = this.deltaX(); this._dy = this.deltaY();
if (this.deltaMax.x !== 0 && this._dx !== 0) { if
(this._dx < 0 && this._dx < -this.deltaMax.x) { this._dx =
-this.deltaMax.x; } else if (this._dx > 0 && this._dx >
this.deltaMax.x) { this._dx = this.deltaMax.x; } }
if (this.deltaMax.y !== 0 && this._dy !== 0) { if
(this._dy < 0 && this._dy < -this.deltaMax.y) { this._dy =
-this.deltaMax.y; } else if (this._dy > 0 && this._dy >
this.deltaMax.y) { this._dy = this.deltaMax.y; } }
this.sprite.position.x += this._dx; this.sprite.position.y
+= this._dy; this._reset = true; }
this.center.setTo(this.position.x + this.halfWidth,
this.position.y + this.halfHeight);
if (this.allowRotation) { this.sprite.angle +=
this.deltaZ(); }
this.prev.x = this.position.x; this.prev.y =
this.position.y;
},
/** * Removes this bodys reference to its parent sprite,
freeing it up for gc. * * @method Phaser.Physics.Arcade.Body#destroy */
destroy: function () {
if (this.sprite.parent && this.sprite.parent
instanceof Phaser.Group) { this.sprite.parent.removeFromHash(this.sprite); }
this.sprite.body = null; this.sprite = null;
},
/** * Internal method. * * @method
Phaser.Physics.Arcade.Body#checkWorldBounds * @protected */ checkWorldBounds:
function () {
var pos = this.position; var bounds =
this.game.physics.arcade.bounds; var check =
this.game.physics.arcade.checkCollision;
if (pos.x < bounds.x && check.left) { pos.x =
bounds.x; this.velocity.x *= -this.bounce.x; this.blocked.left = true; } else
if (this.right > bounds.right &&
check.right) { pos.x = bounds.right - this.width; this.velocity.x
*= -this.bounce.x; this.blocked.right = true; }
if (pos.y < bounds.y && check.up) { pos.y =
bounds.y; this.velocity.y *= -this.bounce.y; this.blocked.up = true; } else if
(this.bottom > bounds.bottom &&
check.down) { pos.y = bounds.bottom - this.height;
this.velocity.y *= -this.bounce.y; this.blocked.down = true; }
},
/** * You can modify the size of the physics Body to be any
dimension you need. * So it could be smaller or larger than the parent Sprite.
You can also control the
x and y offset, which * is the position of the Body relative
to the top-left of the Sprite. * * @method Phaser.Physics.Arcade.Body#setSize *
@param {number}
width - The width of the Body. * @param {number} height -
The height of the Body. * @param {number} [offsetX] - The X offset of the Body
from the Sprite
position. * @param {number} [offsetY] - The Y offset of the
Body from the Sprite position. */ setSize: function (width, height, offsetX,
offsetY) {
if (offsetX === undefined) { offsetX = this.offset.x; } if
(offsetY === undefined) { offsetY = this.offset.y; }
this.sourceWidth = width; this.sourceHeight = height;
this.width = this.sourceWidth * this._sx; this.height = this.sourceHeight *
this._sy; this.halfWidth =
Math.floor(this.width / 2); this.halfHeight = Math.floor(this.height
/ 2); this.offset.setTo(offsetX, offsetY);
this.center.setTo(this.position.x + this.halfWidth,
this.position.y + this.halfHeight);
},
/** * Resets all Body values (velocity, acceleration,
rotation, etc) * * @method Phaser.Physics.Arcade.Body#reset * @param {number} x
- The new x position
of the Body. * @param {number} y - The new y position of the
Body. */ reset: function (x, y) {
this.velocity.set(0); this.acceleration.set(0);
this.speed = 0; this.angularVelocity = 0; this.angularAcceleration
= 0;
this.position.x = (x - (this.sprite.anchor.x * this.width))
+ this.offset.x; this.position.y = (y - (this.sprite.anchor.y * this.height)) +
this.offset.y;
this.prev.x = this.position.x; this.prev.y =
this.position.y;
this.rotation = this.sprite.angle; this.preRotation =
this.rotation;
this._sx = this.sprite.scale.x; this._sy =
this.sprite.scale.y;
this.center.setTo(this.position.x + this.halfWidth,
this.position.y + this.halfHeight);
},
/** * Tests if a world point lies within this Body. * * @method
Phaser.Physics.Arcade.Body#hitTest * @param {number} x - The world x coordinate
to test. *
@param {number} y - The world y coordinate to test. *
@return {boolean} True if the given coordinates are inside this Body, otherwise
false. */ hitTest: function
(x, y) { return Phaser.Rectangle.contains(this, x, y); },
/** * Returns true if the bottom of this Body is in contact
with either the world bounds or a tile. * * @method
Phaser.Physics.Arcade.Body#onFloor * @return
{boolean} True if in contact with either the world bounds or
a tile. */ onFloor: function () { return this.blocked.down; },
/** * Returns true if either side of this Body is in contact
with either the world bounds or a tile. * * @method
Phaser.Physics.Arcade.Body#onWall * @return
{boolean} True if in contact with either the world bounds or
a tile. */ onWall: function () { return (this.blocked.left ||
this.blocked.right); },
/** * Returns the absolute delta x value. * * @method
Phaser.Physics.Arcade.Body#deltaAbsX * @return {number} The absolute delta
value. */ deltaAbsX:
function () { return (this.deltaX() > 0 ? this.deltaX() :
-this.deltaX()); },
/** * Returns the absolute delta y value. * * @method
Phaser.Physics.Arcade.Body#deltaAbsY * @return {number} The absolute delta
value. */ deltaAbsY:
function () { return (this.deltaY() > 0 ? this.deltaY() :
-this.deltaY()); },
/** * Returns the delta x value. The difference between
Body.x now and in the previous step. * * @method
Phaser.Physics.Arcade.Body#deltaX * @return
{number} The delta value. Positive if the motion was to the
right, negative if to the left. */ deltaX: function () { return this.position.x
- this.prev.x; },
/** * Returns the delta y value. The difference between
Body.y now and in the previous step. * * @method Phaser.Physics.Arcade.Body#deltaY
* @return
{number} The delta value. Positive if the motion was
downwards, negative if upwards. */ deltaY: function () { return this.position.y
- this.prev.y; },
/** * Returns the delta z value. The difference between
Body.rotation now and in the previous step. * * @method
Phaser.Physics.Arcade.Body#deltaZ * @return
{number} The delta value. Positive if the motion was
clockwise, negative if anti-clockwise. */ deltaZ: function () { return
this.rotation - this.preRotation; }
};
/** * @name Phaser.Physics.Arcade.Body#bottom * @property
{number} bottom - The bottom value of this Body (same as Body.y + Body.height)
* @readonly
*/
Object.defineProperty(Phaser.Physics.Arcade.Body.prototype, "bottom",
{
get: function () { return this.position.y + this.height; }
});
/** * @name Phaser.Physics.Arcade.Body#right * @property
{number} right - The right value of this Body (same as Body.x + Body.width) *
@readonly */
Object.defineProperty(Phaser.Physics.Arcade.Body.prototype,
"right", {
get: function () { return this.position.x + this.width; }
});
/** * @name Phaser.Physics.Arcade.Body#x * @property
{number} x - The x position. */
Object.defineProperty(Phaser.Physics.Arcade.Body.prototype, "x", {
get: function () { return this.position.x; },
set: function (value) {
this.position.x = value; }
});
/** * @name Phaser.Physics.Arcade.Body#y * @property
{number} y - The y position. */
Object.defineProperty(Phaser.Physics.Arcade.Body.prototype, "y", {
get: function () { return this.position.y; },
set: function (value) {
this.position.y = value;
}
});
/** * Render Sprite Body. * * @method
Phaser.Physics.Arcade.Body#render * @param {object} context - The context to
render to. * @param
{Phaser.Physics.Arcade.Body} body - The Body to render the
info of. * @param {string} [color='rgba(0,255,0,0.4)'] - color of the debug
info to be rendered.
(format is css color string). * @param {boolean}
[filled=true] - Render the objected as a filled (default, true) or a stroked
(false) */
Phaser.Physics.Arcade.Body.render = function (context, body,
color, filled) {
if (filled === undefined) { filled = true; }
color = color || 'rgba(0,255,0,0.4)';
if (filled) { context.fillStyle = color;
context.fillRect(body.position.x - body.game.camera.x, body.position.y -
body.game.camera.y, body.width, body.height); }
else { context.strokeStyle = color;
context.strokeRect(body.position.x - body.game.camera.x, body.position.y -
body.game.camera.y, body.width, body.height); }
};
/** * Render Sprite Body Physics Data as text. * * @method
Phaser.Physics.Arcade.Body#renderBodyInfo * @param {Phaser.Physics.Arcade.Body}
body - The
Body to render the info of. * @param {number} x - X position
of the debug info to be rendered. * @param {number} y - Y position of the debug
info to be
rendered. * @param {string} [color='rgb(255,255,255)'] -
color of the debug info to be rendered. (format is css color string). */
Phaser.Physics.Arcade.Body.renderBodyInfo = function (debug,
body) {
debug.line('x: ' + body.x.toFixed(2), 'y: ' +
body.y.toFixed(2), 'width: ' + body.width, 'height: ' + body.height);
debug.line('velocity x: ' +
body.velocity.x.toFixed(2), 'y: ' +
body.velocity.y.toFixed(2), 'deltaX: ' + body._dx.toFixed(2), 'deltaY: ' +
body._dy.toFixed(2)); debug.line('acceleration x: ' +
body.acceleration.x.toFixed(2), 'y: ' +
body.acceleration.y.toFixed(2), 'speed: ' + body.speed.toFixed(2), 'angle: ' +
body.angle.toFixed(2)); debug.line('gravity x:
' + body.gravity.x, 'y: ' + body.gravity.y, 'bounce x: ' +
body.bounce.x.toFixed(2), 'y: ' + body.bounce.y.toFixed(2));
debug.line('touching left: ' + body.touching.left,
'right: ' + body.touching.right, 'up: ' + body.touching.up,
'down: ' + body.touching.down); debug.line('blocked left: ' +
body.blocked.left, 'right: ' +
body.blocked.right, 'up: ' + body.blocked.up, 'down: ' +
body.blocked.down);
};
Phaser.Physics.Arcade.Body.prototype.constructor =
Phaser.Physics.Arcade.Body;
2.2 ARCADE PHYSIC BODY
Fisika Tubuh terhubung dengan Sprite tunggal. Semua operasi
fisika harus dilakukan terhadap tubuh daripada Sprite itu sendiri. Misalnya
Anda dapat mengatur kecepatan, akselerasi, nilai-nilai bounce dll semua pada
tubuh
2.2.0.8 PARAMETER
Nama
|
Mengetik
|
Deskripsi
|
sprite
|
Phaser.Sprite
|
Sprite keberatan tubuh fisika ini
milik
|
2.2.0.9 Properti Umum
·
akselerasi: Phaser.
Point percepatan adalah laju perubahan kecepatan. Diukur
dalam pixel per detik kuadrat.
·
allowGravity: boolean
Izinkan tubuh ini dipengaruhi oleh gravitasi? Baik dunia
atau lokal. Nilai default • benar
·
allowRotation: boolean
Izinkan Tubuh ini akan diputar? (Via angularVelocity, dll)
Nilai default • benar
·
[baca] angle: Nomor
Sudut Tubuh dalam radian, yang dihitung oleh angularVelocity
nya.
·
angularAcceleration: Nomor
Percepatan sudut adalah laju perubahan kecepatan sudut.
Diukur dalam radian per detik kuadrat.
·
angularDrag: Nomor
drag diterapkan selama rotasi Tubuh.
·
angularVelocity: Nomor
Kecepatan sudut mengontrol kecepatan rotasi dari tubuh. Hal
ini diukur dalam radian per detik.
·
diblokir: Object
Objek ini diisi dengan nilai boolean ketika tubuh
bertabrakan dengan batas Dunia atau Tile a.Sebagai contoh jika blocked.up benar
maka tubuh tidak bisa bergerak ke atas. Sebuah benda yang mengandung yang
menghadapi Tubuh ini diblokir dari bergerak, jika ada.
·
[baca] bottom: Nomor
Nilai bawah tubuh ini (sama seperti Body.y + Body.height)
·
bounce: Phaser.
Point Elastisitas tubuh ketika bertabrakan. bounce.x / y = 1
berarti Rebound penuh, bounce.x / y = 0,5 berarti kecepatan Rebound 50%.
·
[baca] pusat: Phaser.
Point pusat koordinat Tubuh Fisika.
·
checkCollision: Object
Mengatur properti checkCollision untuk mengontrol arah yang
tabrakan diproses untuk Tubuh ini.Misalnya checkCollision.up = false berarti
tidak akan bertabrakan ketika tabrakan terjadi saat bergerak naik. Sebuah benda
mengandung diperbolehkan tabrakan.
·
collideWorldBounds: boolean
Tubuh dapat diatur untuk berbenturan melawan batas Dunia
otomatis dan rebound kembali ke dunia jika ini diatur ke benar. Jika tidak,
akan meninggalkan dunia. Harus Tubuh berbenturan dengan batas-batas Dunia?
·
customSeparateX: boolean
Bendera ini memungkinkan Anda untuk menonaktifkan x
pemisahan kustom yang berlangsung dengan Physics.Arcade.separate. Digunakan
dalam kombinasi dengan tabrakan Anda sendiri processHandler Anda dapat membuat
apapun jenis respon tabrakan yang Anda butuhkan.Menggunakan sistem pemisahan
kustom atau satu built-in?
·
customSeparateY: boolean
Bendera ini memungkinkan Anda untuk menonaktifkan kebiasaan
y pemisahan yang terjadi oleh Physics.Arcade.separate. Digunakan dalam
kombinasi dengan tabrakan Anda sendiri processHandler Anda dapat membuat apapun
jenis respon tabrakan yang Anda butuhkan.Menggunakan sistem pemisahan kustom
atau satu built-in?
·
deltaMax: Phaser.
Point Posisi Sprite diperbarui berdasarkan nilai delta x /
y. Anda dapat menetapkan batas pada mereka (kedua + -) menggunakan deltaMax.
·
kotor: boolean
Jika tubuh ini dalam preUpdate a (true) atau postUpdate
(palsu) negara?
·
tarik: Phaser.
Point drag diterapkan pada gerakan tubuh.
·
tertanam: boolean
Jika tubuh adalah tumpang tindih dengan lembaga lain, tapi
tak satu pun dari mereka yang bergerak (mungkin mereka menelurkan on-atas satu
sama lain?) Ini diatur ke benar. nilai embed tubuh.
·
mengaktifkan: boolean
Tubuh cacat tidak akan diperiksa untuk segala bentuk
benturan atau tumpang tindih atau pre-nya / update posting dijalankan. Nilai
default benar
·
menghadap: Nomor
Sebuah referensi const untuk arah Tubuh yang bepergian atau
menghadapi.
·
gesekan: Phaser.
Point Jumlah gerakan yang akan terjadi jika benda lain
'naik' yang satu ini.
·
permainan: Phaser.
Game referensi lokal untuk game.
·
gravitasi: Phaser.
Point Sebuah gravitasi lokal diterapkan untuk tubuh ini.
Jika non-zero lebih ini naik setiap gravitasi dunia, kecuali Body.allowGravity
diatur ke false.
·
[baca] halfHeight: Nomor
dihitung ketinggian / 2 tubuh fisika.
·
[baca] lebar separuh: Nomor
dihitung lebar / 2 tubuh fisika.
·
[baca] height: jumlah Ketinggian
dihitung dari tubuh fisika.
·
bergerak: boolean
Sebuah Badan bergerak tidak akan menerima dampak dari badan
lainnya
·
mass: jumlah
Massa Tubuh. Ketika dua badan bertabrakan massa mereka
digunakan dalam perhitungan untuk menentukan pertukaran kecepatan. Nilai
default
·
maxAngular: Nomor
Kecepatan sudut maksimum dalam radian per detik bahwa tubuh
dapat mencapai. Nilai default 1000
·
maxVelocity: Phaser.
Point Kecepatan maksimum dalam pixel per sq kedua. Bahwa
tubuh dapat mencapai.
·
bergerak: boolean
Jika Anda memiliki tubuh yang sedang bergerak di seluruh
dunia melalui tween atau gerakan Group, tapi lokal posisi x / y-nya tidak
pernah benar-benar berubah, maka Anda harus mengatur Body.moves = false. Jika
tidak, akan kemungkinan besar terbang dari layar. Jika Anda ingin sistem fisika
untuk memindahkan tubuh sekitar, kemudian mengatur bergerak ke benar. Set true
untuk memungkinkan sistem Fisika untuk memindahkan tubuh ini, jika tidak salah
untuk bergerak secara manual. Nilai default benar
·
[baca] newVelocity: Phaser
Point Kecepatan baru. Dihitung selama Body.preUpdate dan
diterapkan untuk posisinya.
·
offset: Phaser.
Point Offset Tubuh Fisika dari Sprite x / y posisi.
·
overlapX: Nomor
Ketika tubuh ini bertabrakan dengan yang lain, jumlah
tumpang tindih disimpan di sini. Jumlah tumpang tindih horisontal selama
tabrakan.
·
overlapY: Nomor
Ketika tubuh ini bertabrakan dengan yang lain, jumlah
tumpang tindih disimpan di sini. Jumlah tumpang tindih vertikal selama
tabrakan.
·
[baca] posisi: Phaser.
Point Posisi tubuh fisika.
·
rotasi: Nomor
Sebuah Fisika Tubuh Arcade dapat memiliki angularVelocity
dan angularAcceleration. Harap mengerti bahwa tabrakan Tubuh itu sendiri tidak
pernah berputar, selalu sumbu-blok. Namun nilai ini berlalu hingga Sprite
orangtua dan update rotasi.
·
syncBounds: boolean
Jika benar Tubuh akan memeriksa sendiri terhadap
Sprite.getBounds () dimensi dan menyesuaikan lebar dan tinggi sesuai. Jika
palsu itu akan membandingkan dimensi terhadap skala Sprite sebaliknya, dan
menyesuaikan ketinggian lebarnya jika skala telah berubah. Biasanya Anda akan
harus mengaktifkan syncBounds jika sprite Anda adalah anak dari objek layar
responsif seperti FlexLayer, atau dalam situasi di mana skala Sprite tidak
berubah, tetapi skala orangtuanya yang mempengaruhi dimensi terlepas.
·
tilePadding: Phaser.
Point Jika ini adalah sebuah objek bergerak terutama kecil
atau cepat maka kadang-kadang dapat melewatkan tilemap tabrakan jika bergerak
melalui ubin di langkah. Menetapkan nilai ini padding untuk menambahkan
bantalan ekstra untuk batas nya. tilePadding.x diterapkan untuk lebarnya, y ke
puncaknya. Ekstra padding untuk ditambahkan ke dimensi ini sprite ketika
memeriksa tabrakan genteng.
·
menyentuh: Object
Objek ini diisi dengan nilai boolean ketika tubuh
bertabrakan dengan yang lain. touching.up = true berarti tabrakan terjadi ke
atas tubuh ini misalnya. Sebuah benda yang mengandung hasil menyentuh.
·
wasTouching: Object
Objek ini diisi dengan nilai menyentuh sebelumnya dari tubuh
tabrakan sebelumnya. Sebuah benda yang mengandung hasil menyentuh sebelumnya.
2.2.0.10 Metode publik
·
<intern> checkWorldBounds ()
metode internal. Intern: Anggota ini bersifat internal (dilindungi) dan dapat
dimodifikasi atau dihapus di masa depan.
·
deltaAbsX () → {jumlah}
Mengembalikan mutlak delta x nilai.
·
deltaAbsY () → {jumlah}
Mengembalikan mutlak nilai delta y.
·
deltax () → {jumlah} Mengembalikan
delta x nilai. Perbedaan antara Body.x sekarang dan pada langkah sebelumnya.
·
deltaY () → {jumlah} Mengembalikan
nilai delta y. Perbedaan antara Body.y sekarang dan pada langkah sebelumnya.
·
deltaZ () → {jumlah} Mengembalikan
nilai z delta. Perbedaan antara Body.rotation sekarang dan pada langkah
sebelumnya.
·
menghancurkan () Menghapus referensi
bodys ini untuk sprite induknya, membebaskan untuk gc.
·
hitTest (x, y) → {boolean} Tes jika
titik dunia terletak di dalam tubuh ini.
·
onFloor () → {boolean} Mengembalikan
nilai true jika bagian bawah tubuh ini berhubungan dengan baik batas dunia atau
ubin.
·
onWall () → {boolean} Mengembalikan
nilai true jika kedua sisi tubuh ini berada dalam kontak dengan baik batas
dunia atau ubin.
·
render (konteks, tubuh, warna,
diisi) Membuat Sprite Tubuh
·
renderBodyInfo (body, x, y, warna)
Render Fisika Sprite Tubuh data sebagai teks.
·
ulang (x, y) Mereset semua nilai
Tubuh (kecepatan, percepatan, rotasi, dll)
·
setSize (lebar, tinggi, offsetx,
offsetY) Anda dapat mengubah ukuran tubuh fisika menjadi dimensi yang Anda
butuhkan. Sehingga bisa lebih kecil atau lebih besar dari Sprite tua. Anda juga
dapat mengontrol x dan y offset, yang merupakan posisi tubuh relatif terhadap
kiri atas Sprite.
2.3 PERCEPATAN .
Dalam fisika, percepatan adalah tingkat di mana kecepatan
benda berubah terhadap waktu. Percepatan merupakan suatu vektor yang menunjuk
ke arah yang sama dengan perubahan kecepatan. Ini adalah besaran vektor karena
mempunyai besaran dan arah.
Lawan dari percepatan adalah perlambatan. Percepatan
disertai dengan gaya, seperti yang dijelaskan oleh Hukum Kedua Newton. Gaya
sebagai vektor adalah produk dari massa benda yang dipercepat dan percepatan
(vektor), atau F=ma . Satuan SI percepatan adalah meter per detik kuadrat (
m/s2 ) .
Keadaan suatu benda dapat digambarkan secara grafis dengan
membuat grafik posisi benda dari waktu ke waktu. Jarak sebagai sumbu x terhadap
waktu grafik dapat digunakan untuk membuat grafik lain yang menunjukkan
perubahan dalam kecepatan dari waktu ke waktu. Karena percepatan merupakan
kecepatan dalam m/s dibagi dengan waktu, kita selanjutnya dapat menurunkan
grafik percepatan dari posisi grafik kecepatan benda atau posisi.
Grafik posisi benda dari waktu ke waktu mirip dengan
keadaanan mobil. Pada awalnya, posisi objek berubah perlahan-lahan karena
perubahan kecepatan. Di tengah, kecepatan konstan dan posisi perubahan pada
tingkat yang konstan. Saat melambat menjelang akhir, posisi berubah lebih
lambat.
Kecepatan bertambah di awal karena di awal benda mempercepat
kecepatannya, kemudian tetap konstan di tengah sebelum melambat menjelang
akhir. Untuk melakukan hal ini, kita juga dapat merencanakan kemiringan grafik
kecepatan terhadap waktu.
Benda k tersebut meningkatkan kecepatan dan mengubah posisi
perlahan pada awalnya sehingga menunjukkan bahwa benda meningkat pada
percepatan konstan. Di tengah, ketika benda berubah posisi pada kecepatan
konstan, percepatan adalah 0. Hal ini karena benda tidak lagi mengubah
kecepatan dan berkeadaan dengan laju yang konstan. Menjelang akhir keadaan,
benda melambat.
Grafik kecepatan yang berubah dalam selang waktu t
menunjukan adanya percepatan gerak benda Kata kunci:
1. Percepatan adalah tingkat di mana kecepatan benda berubah
terhadap waktu.
2. Percepatan adalah vektor yang menunjuk ke arah yang sama
dengan perubahan kecepatan, meskipun mungkin tidak selalu berada dalam arah
gerakannya.
3. Karena percepatan kecepatan dalam m / s dibagi dengan
waktu, kita dapat memperoleh grafik percepatan dari grafik kecepatan benda.
2.4 TUMBUKAN .
Salah satu peristiwa yang berhubungan erat dengan momentum
dan impuls adalah tumbukan. Tumbukan merupakan peristiwa tabrakan antara dua
benda karena adanya gerakan. Dalam tumbukan, dua benda dapat sama-sama
bergerak, dapat juga satu benda bergerak dan benda lainnya tidak bergerak.
Selain itu, arah gerak dua benda dapat searah dan dapat berlawanan arah.
2.4.1 Sifat kekekalan energy.
alam interaksi benda-benda yang bergerak. Dua hukum tersebut
adalah hukum kekalan momentum dan hukum kekekalan energi mekanik. Hukum
kekekalan momentum dapat ditulis sebagai berikut. m1v1+m2v2=m1v1’+m2v2’ Rumus
hukum kekekalan energi mekanik sebagai berikut. Ep1+Ek1=Ep2+Ek2
Pada peristiwa tumbukan, ketinggian benda adalah sama
h1=h2=h1’=h2’. Hal ini menyebabkan energi potensial tidak berperan, sehingga
hanya energi kinetik saja yang mempunyai peran dalam suatu tumbukan. Hubungan
antara momentum dan energi kinetik dapat dirumuskan sebagai berikut.
Ek=1/2mv2atauEk=p2/2m
2.4.2 Jenis-jenis tumbukan.
Berdasarkan sifat benda, tumbukan mempunyai jenis yang
berbeda-beda. Sebelum anda mempelajari jenis-jenis tumbukan, anda harus
memahami nilai koefisien restitusi (e) dari suatu benda. Koefisien restitusi
(e) , yaitu nilai yang menunjukkan tingkat kelentingan benda dalam peristiwa
tumbukan. Koefisien restitusi dirumuskan sebagai berikut.
Keterangan:
v1 =kecepatan gerak benda 1 sebelum tumbukan ( m/s )
v2 =kecepatan gerak benda 2 sebelum tumbukan ( m/s )
v1’ =kecepatan gerak benda 1 sesudah tumbukan ( m/s )
v2’ =kecepatan gerak benda 1 sesudah tumbukan ( m/s )
Jenis-jenis tumbukan antara lain tumbukan lenting sempurna,
tumbukan lenting sebagian dan tumbukan tak lenting sama sekali.
2.4.2.1 Tumbukan Lenting sempurna.
Pada tumbukan lenting sempurna, berlaku hukum kekekalan
momentum dan hukum kekekalan energi mekanik. Pada tumbukan lenting sempurna,
kecepatan benda setelah tumbukan dapat diketahui melalui persamaan-persamaan
berikut.
Momentum sebelum tumbukan= momentum sesudah tumbukan
m1v1+m2v2=m1v1’+m2v2’
2.4.2.2 Tumbukan lenting sebagian.
Pada tumbukan lenting sebagian, kecepatan gerak benda akan
berkurang. Besarnya koefisien restitusi dirumuskan sebagai berikut.
Momentum sebelum tumbukan= momentum sesudah tumbukan
m1v1+m2v2=m1v1’+m2v2’
2.4.2.3 Tumbukan tak lenting sama sekali.
Tumbukan tak lenting sama sekali mempunyai perbedaan dengan
dua tumbukan lainnya. Perbedaanya terletak pada massa total dan kecepatan benda
setelah bertumbukan serta arahnya. Rumus tumbukan tak lenting sama sekali
sebagai berikut. Momentum sebelum tumbukan= momentum sesudah tumbukan
m1v1+m2v2=m1v1’+m2v2’
2.5 KELAJUAN DAN PERINDAHAN .
Dalam Fisika, dikenal konsep kelajuan, perpindahan, dan
kecepatan. Konsep tersebut lahir dari penggambaran sebuah benda dalam geraknya.
Kelajuan dapat didefenisikan sebagai perbandingan antara jarak total yang
ditempuh sebuah benda ketika bergerak terhadap waktu total yang dibutukan dalam
menempuh jarak tersebut. Dalam persamaan matematis dapat ditulis: Kelajuan
rata-rata = jarak total / waktu total
Dalam SI, satuan kelajuan adalah meter per sekon ( m/s ) ,
atau bisa juga dengan feet per sekon ( ft/s ) . Satuan lain yang sering
digunakan adalah mil/jam ( mi/j ) . Secara internasional satuan yang lebih
dikenal adalah km per jam ( km/j ) .
Misalnya, dalam suatu gerak telah menempuh sejauh 200 km
dalam waktu 5 jam, kelajuan rata-rata dalam gerak tersebut dapat ditentukan
dengan ( 200km )/( 5j ) = 40km/j . Pada dasarnya, kelajuan rata-rata hanya
sekedar nilai yang tidak menceritakan tentang rincian perjalanan dalam gerak
tersebut. Kita dapat saja bergerak dengan kelajuan tetap 40 km/j selama 5 jam,
atau bisa juga lebih cepat dari nilai itu, atau bisa saja lebih lambat atau
bahkan berhenti pada waktu yang lain.
Perpindahan didefenisikan sebagai perubahan kedudukan suatu
benda karena terjadinya perubahan waktu. Penting untuk diketahui, perpindahan
hanya bergantung pada kedudukan awal dan kedudukan akhir dari benda, dan tidak
bergantung pada lintasan gerak yang ditempuh oleh benda tersebut. Sebagai
contoh, suatu benda sedang berpindah dari kedudukan awalnya Xa menuju kedudukan
Xb , maka perpindahan yang dilakukan oleh benda tersebut dapat kita rumuskan:
Perpindahan = kedudukan akhir – kedudukan awal = Xb–Xa
Bab 3
PERANGKAT LUNAK .
3.1 PHYSIC EDITOR.
kompleks: kami menyebutnya objek dinamis. Masalah yang ingin
dipecahkan adalah sebagai berikut: kita lihat gambar di sebelah kanan, saya
ingin membuat sebuah botol yang bisa memegang benda di dalamnya. Pada awalnya,
saya menggunakan alat menggambar untuk menggambar poin bentuk saya atas gambar
botol, dan saya melaporkan nilai-nilai dalam permainan saya. Untuk setiap
titik, saya harus mengkonversi dari unit pixel ke unit dunia tentu saja.
Membosankan. Oh, dan coba tebak? Ini tidak bekerja! Memang, mesin fisika
biasanya hanya bekerja dengan poligon cembung! Pada membusuk bentuk menjadi
beberapa poligon cembung dengan tangan ... Lebih dari membosankan.
Dan tentu saja, setiap kali saya ingin melakukan sedikit
perubahan, saya harus pergi ke proses yang sama. Saya kira Anda mengerti
mengapa alat otomatis tersebut dapat berguna: mengkonversi unit pixel ke unit
dunia, terurai bentuk menjadi beberapa poligon cembung, dan memungkinkan Anda
menguji hasilnya langsung! fitur
·
Otomatis terurai bentuk cekung ke
dalam poligon cembung
·
Otomatis melacak gambar Anda jika
diperlukan
·
Mendukung beberapa garis besar untuk
satu tubuh
·
Mendukung poligon dan lingkaran
bentuk
·
Referensi titik lokasi dapat diubah
·
Visual jaringan dikonfigurasi dengan
opsi snap-to-grid
·
Built-in tabrakan tester! Lemparkan
bola di tubuh Anda untuk menguji itu
·
Loader disediakan untuk kerangka
permainan LibGDX
·
Sederhana ekspor Format (JSON),
untuk membiarkan Anda membuat loader Anda sendiri untuk setiap kerangka dalam
bahasa apapun.
Berikut adalah tutorial untuk Anda quicky dan berjalan. Ini
menunjukkan cara membuat sebuah proyek, bagaimana menambahkan sebuah badan
baru, dan bagaimana menentukan bentuk tabrakan nya. Kualitas video tidak
mengagumkan sekali (maaf tentang itu), jadi jangan melihat itu untuk menghargai
pengalaman pengguna dari aplikasi tapi hanya untuk mempelajari
perintah-perintah dasar.
3.1.1 Poligon dan lingkaran .
Ada dua jenis bentuk yang dapat dibuat: poligon dan
lingkaran. Untuk membuat bentuk poligon, yang harus Anda lakukan adalah untuk
mengaktifkan modus penciptaan, dan untuk klik mana saja di layar.Setiap klik
akan menambah titik untuk poligon, dan ketika Anda ingin menutupnya, klik pada
titik pertama.Untuk membuat bentuk lingkaran, Anda perlu menahan CTRL atau C
kunci, dan kemudian klik sekali untuk menentukan pusat bentuk, dan kedua
kalinya untuk menentukan jari-jarinya.
3.1.2 Shortcut keyboard.
Beberapa cara pintas keyboard yang ada untuk membuat lebih
mudah:
·
TAB untuk beralih antara penciptaan,
edisi dan uji mode,
·
BACKSPACE untuk menghapus titik yang
dipilih,
·
ENTER untuk menyisipkan poin baru
antara orang-orang yang dipilih,
·
ESC untuk membatalkan penciptaan
bentuk sebelum Anda menutupnya.
3.1.3 Auto-trace .
Aplikasi ini mendukung fitur auto-jejak yang dapat membantu
Anda dalam banyak kesempatan dengan sedikit latihan. algoritma auto-trace
umumnya jauh lebih tepat daripada tangan Anda, tetapi dengan beberapa langkah
perbaikan, Anda dapat membuat bentuk kompleks sangat cepat. fitur auto-trace
hanya tersedia bila tidak ada bentuk yang ada ditetapkan sebelumnya, dan jika
gambar terkait untuk tubuh Anda. Ia bekerja pada channel alpha gambar, dan
mengambil 4 parameter.
Toleransi Hull mendefinisikan bagaimana tepatnya Anda ingin
kontur gambar Anda harus diikuti (nilai yang lebih tinggi berarti presisi yang
lebih rendah). Toleransi Alpha berkisar antara 0 dan 255 dan mendefinisikan
batas alpha antara pixel yang solid dan pixel kosong. Ketika diaktifkan,
multi-bagian deteksi akan mencoba untuk melacak beberapa bentuk, dan deteksi
lubang akan mencoba untuk mendeteksi lubang di gambar.Keberhasilan dua opsi
terakhir tidak dijamin.
3.1.4 Titik acuan.
Fisika Editor, Anda mendefinisikan tubuh untuk setiap
gambar, dan tubuh ini terbuat dari beberapaperlengkapan. Sebuah perlengkapan
pada dasarnya adalah sebuah bentuk (poligon atau lingkaran) terkait dengan
beberapa parameter, seperti kepadatan dan gesekan nya. Sebuah badan terletak di
dunia dengan satu titik, disebut titik referensi. Perlengkapan yang ditempatkan
di sekitar titik acuan ini. Perhatikan bahwa titik acuan ini tidak ada
hubungannya dengan pusat massanya. Memang, titik rotasi tubuh Anda adalah pusat
massanya.
Titik referensi tidak berdampak pada simulasi fisika. Itu
hanya titik kenyamanan untuk mendapatkan posisi tubuh Anda relatif ke titik
referensi ini. Itu saja untuk teori fisika mesin. Secara default, titik
referensi dari tubuh adalah di sudut kiri bawah gambar yang terkait. Ini
berarti bahwa ketika Anda akan memposisikan tubuh dalam dunia game,
perlengkapan yang semua akan berada di sebelah kanan lokasi. Anda dapat
memindahkan titik acuan ini di Fisika Tubuh Editor dalam mode edisi: itu adalah
salib merah dengan lingkaran.
3.1.5 Loader dan permainan objek.
Catatan: potongan kode berikut ini diambil dari proyek
loader-libgdx-demo . Mereka ditulis di Jawa, dan target kerangka permainan
LibGDX. Namun, mereka harus mudah dipahami, dan mudah untuk port ke bahasa
lain. Ada dua hal penting ketika Anda ingin menggunakan file proyek Anda dalam
permainan Anda:
1.
melampirkan perlengkapan untuk tubuh
Anda
2.
menggambar gambar yang terkait di
tempat yang tepat.
Di mesin fisika, tubuh model: mereka tidak berhubungan
dengan bagaimana Anda akan membuat mereka di layar sama sekali. Lihat saya
tutorial tentang pemisahan antara model dan membuat mengerti. Langkah pertama
adalah mudah, loader disediakan melakukan segala sesuatu untuk Anda. Perhatikan
bahwa pada baris 7, posisi sesuai posisi dunia dari titik referensi tubuh. Di
sini kita mengaturnya pada koordinat dunia (0,0).
private void createBottle()
{ // 0. Create a loader for the file saved from the editor.
BodyEditorLoader loader = new BodyEditorLoader(Gdx.files.internal("data/test.json"));
// 1. Create a BodyDef, as usual. BodyDef bd = new
BodyDef(); bd.position.set(0, 0); bd.type = BodyType.DynamicBody;
// 2. Create a FixtureDef, as usual. FixtureDef fd = new
FixtureDef(); fd.density = 1; fd.friction = 0.5f; fd.restitution = 0.3f;
// 3. Create a Body, as usual. bottleModel =
world.createBody(bd);
// 4. Create the body fixture automatically by using the
loader. loader.attachFixture(bottleModel, "test01", fd,
BOTTLE_WIDTH); }
Sekarang mendukung sprite lingkaran. Juga, Andreas Loew,
pencipta PhysicsEditor. Jika Anda pernah menciptakan permainan fisika, misalnya
dengan mesin permainan favorit saya, AndEngine , dan ingin menghasilkan tubuh
poligonal, Anda mungkin melakukan sesuatu yang mengisap waktu besar. Sesuatu
seperti mendefinisikan simpul Anda dalam kode. Ini adalah
1.
Kotor
2.
benar-benar menyakitkan Inilah
sebabnya mengapa kita melihat sekeliling dan menemukan PhysicsEditor ,
sederhana untuk menggunakan alat untuk membuat output yang menjelaskan definisi
fisik. Sementara integrasi iOS tampaknya bekerja baik dari editor ke dalam
kode, hanya memberikan AndEngine Eksportir-format, tapi tidak ada alat untuk
mengintegrasikan kembali ke dalam mesin. Sampai hari ini. Kami hanya
menerbitkan (belum resmi) AndEngine PhyisicsEditor Ekstensi danContoh AndEngine
PhysicsEditor Ekstensi . kemampuan Berikut adalah apa itu mampu:
·
Definisi (beberapa) badan
·
Definisi (beberapa) perlengkapan
·
Definisi bentuk poligon
·
Definisi bentuk lingkaran
·
Definisi kepadatan, gesekan dan elastisitas
·
Definisi badan dinamis dan
non-dinamis
·
Definisi sensor dan non-sensor
perlengkapan
·
tabrakan filtering
·
Otomatis pengaturan data pengguna
yang tubuh
3.1.6 Bagaimana cara menggunakannya.
Untuk bagian ini saya menganggap Anda sudah tahu dasar-dasar
sangat pembangunan AndEngine. Mari kita mulai dari awal.
Pertama, download PhysicsEditor . Membukanya dan mengimpor
sprite pilihan Anda. Aku memilih bintang dari proyek contoh:
Sekarang, menggambar representasi fisik Anda. Anda mungkin
ingin menggunakan pelacak Shape untuk itu (ikon tongkat):Sekarang membuat
pengaturan Anda di sebelah kanan
dan push 'mempublikasikan sebagai'. Simpan XML Anda di suatu
tempat. Selanjutnya, saatnya untuk mendapatkan sumber. Clone repositori
menggunakan sesuatu seperti git clone
git://github.com/ANDLABS-Git/AndEngine-PhysicsEditor-Extension.git . Mengimpor
sumber. Sekarang, pastikan Anda juga memiliki AndEngine dan
AndEnginePhysicsBox2DExtension di ruang kerja Anda. Anda mungkin harus
memperbarui dependensi ini.
Sekarang dalam proyek Anda, membuat
PhysicsEditorLoader-objek baru dengan menggunakan konstruktor default: final
PhysicsEditorLoader loader = new PhysicsEditorLoader(); Menggunakannya untuk
memuat apa pun yang Anda inginkan: try { loader.load(this, mPhysicsWorld,
"xml/", "star.xml", star, true, true); } catch (IOException
e) { //... } Parameter yang disediakan adalah Context, yang PhysicsWorld Anda
ingin melampirkan tubuh Anda untuk, path basis, jalan menuju definisi khusus
Anda, IAreaShape (misalnya Sprite) Anda ingin definisi Anda harus terhubung ke,
apakah Anda ingin objek Anda posisi diperbarui dan apakah Anda ingin rotasi
objek untuk diperbarui.
Dan hanya itu. Ada beberapa kasus penggunaan lainnya
tertutup seperti menggambar garis untuk debugging atau memuat beberapa
definisi, tapi itu tidak lebih dari sekitar lima keystrokes pekerjaan tambahan.
Anda dapat lihat di contoh untuk melihat apa yang saya maksud (dalam kasus Anda
ingin tahu). Hal ini dimungkinkan untuk menggunakan PhysicsEditor sebagai alat
untuk penciptaan tingkat. Bahkan, memungkinkan Anda untuk benar-benar 'menarik'
tingkat Anda dalam perangkat grafis pilihan Anda.
Harap diingat bahwa meskipun ukuran maksimum dari suatu
IAreaShape di AndEngine adalah 2048 piksel, sehingga Anda mungkin ingin menggunakan
beberapa sprite untuk mencapai tingkat yang besar. Juga, memori rendah pada
perangkat mobile, tergantung perangkat yang Anda targetkan, Anda mungkin ingin
untuk berpikir tentang menggunakan metode yang berbeda dari ini.
Harap diingat bahwa ini adalah rilis awal yang mungkin masih
mengandung beberapa bug dan kebutuhan beberapa refactoring. Silahkan untuk
meninggalkan masalah apapun Anda menemukan dalam proyek pelacak isu. Sejauh
ini, kami telah menguji empat proyek sampel pada perangkat berikut:
·
Samsung Galaxy Y (2.3.6)
·
Nexus One (2.3.6)
·
Galaxy Nexus (4.0.4)
3.2 Phaser .
adalah open source kerangka kerja HTML5 permainan cepat,
gratis dan menyenangkan. Ini menggunakan membangun kebiasaan Pixi.js untuk
WebGL dan Canvas rendering di desktop dan browser web mobile. Permainan dapat
dikompilasi untuk iOS, Android dan aplikasi desktop melalui alat pihak ke-3
seperti Cocoon, Cordova dan Electron.Seiring dengan komunitas open source yang
fantastis Phaser secara aktif dikembangkan dan dikelola oleh Photon Badai
Terbatas .
Sebagai hasil dari dukungan yang cepat dan pengembang ramah
API Phaser saat ini salah satu yang paling membintangi kerangka permainan di
GitHub.Ribuan pengembang di seluruh dunia menggunakannya. Dari indies dan
lembaga digital multi-nasional untuk sekolah-sekolah dan universitas. Setiap
menciptakan permainan yang luar biasa mereka sendiri.Kerangka Phaser
menyediakan Anda dengan satu set alat yang akan mempercepat pembangunan dan
membantu menangani tugas-tugas generik yang dibutuhkan untuk menyelesaikan
permainan, sehingga Anda dapat fokus pada ide permainan itu sendiri.
Beberapa software resmi memiliki Panduan Memulai yang
mencakup semua yang Anda butuhkan untuk mulai mengembangkan permainan dengan
Phaser. Dari menyiapkan web server, untuk memilih sebuah IDE dan coding game
pertama Anda. Silakan mulai di sini tidak peduli apa dev game-pengalaman Anda,
sebelum menyelam ke API.
Single sumber daya Phaser terbesar adalah situs web Phaser .
Memiliki ratusan tutorial terdaftar dan yang segar ditambahkan setiap minggu.
Terus datang kembali untuk melihat apa yang baru!
Menggunakan Phaser dengan naskah? Periksa seri besar ini
Permainan Dari Scratch tutorial.
3.2.1 Contoh Source code pada Phaser Interphase.
Interfase adalah sebuah buku baru untuk Phaser pengembang
dari semua tingkat keahlian. kalian dapat menemukan ” pembuatan game “ panduan
dan tutorial.
3.2.1.1 Phaser Editor - Sebuah lengkap Phaser Editor.
Phaser Editor adalah merek baru berbasis editor Eclipse yang
menawarkan banyak built-in alat khusus untuk pengembang phaser. fitur berguna
termasuk kode Pintar auto-completion, built-in web server, pencarian
dokumentasi, manajemen aset, tekstur atlas pencipta, sprite pencipta audio,
preview aset dan banyak lagi.
3.2.1.2 Game Mechanic Explorer.
The Permainan Mechanic Explorer adalah cara interaktif yang
bagus untuk belajar bagaimana mengembangkan permainan mekanik yang ada di
Phaser. Layak mengeksplorasi setelah Anda punya Anda lingkungan dev set-up.
3.2.1.3 Editor perkasa - Game Editor Visual.
MightyEditor adalah Phaser visual yang permainan Editor
berbasis browser. Membuat peta Anda dengan mudah, objek posisi dan membaginya
dalam hitungan detik. Hal ini juga ekspor ke kode Phaser asli. Baik untuk
tingkat cepat pengaturan-up dan adegan.
3.2.2 Menggunakan phaser.
Phaser disediakan siap disusun dalam build folder dari
repositori. Ada kedua versi plain dan diminimalkan. Versi plain untuk digunakan
selama pengembangan dan versi minified untuk produksi.
3.2.2.1 Membangun Custom
Phaser termasuk berdasarkan mendengus membangun sistem yang
memungkinkan Anda untuk menghapus banyak fitur tambahan yang Anda mungkin tidak
memerlukan, menghemat ratusan KB dalam proses. Jangan gunakan Suara apapun
dalam permainan Anda? Maka Anda sekarang dapat mengecualikan seluruh sistem
suara. Tidak perlu dukungan Keyboard? Yang dapat dilucuti keluar juga. Sebagai
hasil dari pekerjaan ini minimum ukuran membangun dari Phaser kini hanya 80KB
minified dan gzip.
3.2.2.2 Browserify / CJS
Phaser tidak pernah ditulis untuk menjadi modular. Semuanya
ada di bawah satu namespace global tunggal, dan Anda tidak dapat require bagian
itu yang dipilih ke dalam membangun. Ia mengharapkan 3 vars global yang ada
dalam rangka untuk bekerja dengan baik: Phaser , PIXI dan p2 . Berikut ini
adalah salah satu cara untuk melakukan hal ini:
Jika Anda membangun sebuah versi khusus dari Phaser (lihat
di atas) akan membagi libs inti 3 keluar ke file mereka sendiri, yang
memungkinkan Anda untuk meminta mereka seperti di atas. Mereka menghargai ini
hanya band-bantuan dan bukan penggunaan yang tepat dari modul,itu hanya tidak
pernah dibangun untuk digunakan dengan cara ini. Anda mencoba untuk
menyesuaikan pasak persegi di lubang browserify berbentuk bulat, sehingga
kompromi harus dibuat. Jangan membuka masalah GitHub tentang hal itu. Mereka
tidak mengubah Phaser pada tahap hidupnya. Penuh pembangunan berbasis modul
sedang dilakukan di Lazer.
3.2.2.3 Webpack
Mulai dari Phaser 2.4.5 kita sekarang termasuk membangun
kustom untuk Webpack.
Anda perlu menambahkan p2 sebagai dependensi.
3.2.2.4 Webpack Config
selain itu, telah banyak game yang berhasil dibuat di phaser
ini. dan beberapa persyaratan yang mesti dipenuhi sebelum mencoba
mendownloadnya adalah sPhaser membutuhkan web browser yang mendukung tag kanvas
. Ini termasuk Internet Explorer 9 +, Firefox, Chrome, Safari dan Opera di
desktop. iOS Safari, Android Browser dan Chrome untuk Android yang didukung
pada ponsel.Sementara Phaser melakukan yang terbaik untuk memastikan pengalaman
cross-platform yang konsisten, selalu sadar browser dan perangkat keterbatasan.
Hal ini sangat penting berkaitan dengan memori dan GPU keterbatasan pada
ponsel, dan kompatibilitas HTML5 browser lawas.
3.2.2.5 IE9
Jika Anda perlu untuk mendukung IE9 / Android 2.x dan
penggunaan P2 fisika maka Anda harus menggunakan polyfill di resources/IE9
Polyfill folder. Jika Anda tidak menggunakan P2 (atau tidak peduli IE9!) Anda
dapat melewatkan ini.
3.2.2.6 JavaScript dan naskah
Phaser dikembangkan dalam JavaScript. Kami telah membuat
asumsi tentang bagaimana Anda ingin kode dan berhati-hati untuk tidak
memaksakan struktur yang ketat pada Anda. Anda tidak akan menemukan Phaser
dibagi menjadi modul, membutuhkan langkah membangun, atau membuat Anda
menggunakan pendekatan OOP class / warisan. Itu tidak berarti Anda tidak dapat
melakukannya, itu hanya berarti kami tidak memaksa Anda untuk. Itu pilihanmu.
Jika Anda kode dengan naskah ada file definisi yang komprehensif
dalam typescript folder. Mereka adalah untuk naskah 1.4 +.
3.2.2.7 Road Map
Mayoritas pembangunan Phaser sekarang mengambil tempat di
Lazer proyek (Phaser 3). Phaser 2 cabang masih akan didukung dan masalah tetap,
namun fitur roadmap telah bermigrasi.
3.2.2.8 Lazer
Lazer adalah generasi berikutnya dari kerangka Phaser
permainan, dan sebelumnya disebut Phaser 3. Menggunakan basis sepenuhnya ES6
itu penyaji agnostik, memungkinkan untuk DOM, SVG, kanvas dan WebGL rendering,
di desktop dan browser web mobile.Lazer dalam pengembangan aktif tapi belum
siap untuk penggunaan produksi. beberapa contoh game yang telah dibuat
menggunakan phaser
Bab 4
Contoh Kasus Pada Arcade Physic.
Dalam contoh kali ini kita akan menuju proses membangun
sebuah game mobile HTML5 yang menggunakan Orientasi Perangkat dan Getaran API
untuk meningkatkan gameplay dan dibangun menggunakan Phaser kerangka. Juga
pengetahuan JavaScript dasar dianjurkan untuk mendapatkan hasil maksimal dari
tutorial ini.
4.1 Permainan 2D labirin dengan orientasi perangkat.
Pada akhir tutorial anda akan mendapatkan permainan yang
telah berfungsi sempurna. seperti pada gambar dan berikut langkah-langkah
pengerjaannya.
4.1.1 Kerangka Phaser.
desktop dan game HTML5 mobile.Hal ini cukup baru, tapi berkembang
pesat berkat komunitas yang bersemangat terlibat dalam proses pembangunan.
Kerangka Phaser menyediakan Anda dengan satu set alat yang akan mempercepat
pembangunan dan membantu menangani tugas-tugas generik yang dibutuhkan untuk
menyelesaikan permainan, sehingga Anda dapat fokus pada ide permainan itu
sendiri.
4.1.2 Mengawali dengan pembuatan projek.
Struktur folder cukup mudah: titik awal adalah index.html
file di mana kita menginisialisasi kerangka dan mendirikan sebuah
<canvas> untuk membuat game.
Anda dapat membuka file indeks di browser favorit Anda untuk
memulai permainan dan mencobanya. Ada juga tiga folder di direktori:
4.1.3 Menyiapkan Kanvas .
Pada contoh ini kami akan merender permainan kami pada
kanvas, tapi kami tidak akan melakukannya secara manual, ini akan diurus oleh
framework. Mari kita mengaturnya: titik awal kita adalah index.html file dengan
konten berikut. Anda dapat membuat ini sendiri jika Anda ingin mengikuti
bersama:
Sejauh ini kita memiliki website HTML sederhana dengan beberapa
konten dasar dalam<head> bagian: charset, judul, CSS styling dan masuknya
file JavaScript. The <body> berisi inisialisasi dari kerangka Phaser dan
definisi negara permainan.
Baris di atas akan menginisialisasi contoh Phaser - argumen
yang lebar kanvas, ketinggian Canvas, metode render (kami menggunakan CANVAS ,
tetapi ada juga WEBGL dan AUTOpilihan yang tersedia) dan opsional ID wadah DOM
kami ingin menempatkan kanvas di. Jika tidak ada yang ditentukan dalam argumen
terakhir atau unsur ini tidak ditemukan, kanvas akan ditambahkan ke
<body> tag.
Tanpa kerangka, untuk menambahkan elemen Canvas ke halaman,
Anda harus menulis sesuatu seperti ini di dalam <body> tag: <canvas
id='game' width='320' height='480'></canvas> <Canvas id =
'permainan' width = '320' height = '480'> </ canvas>
Yang penting untuk diingat adalah bahwa kerangka adalah
menyiapkan metode membantu untuk mempercepat banyak hal seperti manipulasi
gambar atau manajemen aset, yang akan menjadi jauh lebih sulit untuk dilakukan
secara manual.
Kembali ke permainan: garis bawah adalah menambahkan negara
baru yang disebut Boot ke permainan:
Nilai pertama adalah nama negara dan yang kedua adalah objek
yang kita ingin menetapkan untuk itu. The start Metode mulai negara diberikan
dan membuatnya aktif.Mari kita lihat apa negara sebenarnya.
4.1.4 Mengelola Negara Permainan.
Negara-negara di Phaser merupakan bagian yang terpisah dari
logika permainan, dalam kasus ini, memuat mereka dari file JavaScript
independen untuk pemeliharaan yang lebih baik. Negara dasar yang digunakan
dalam game ini adalah: Boot , Preloader ,MainMenu , Howto dan Game . Boot akan
mengurus menginisialisasi beberapa pengaturan,Preloader akan memuat semua aset
seperti grafis dan audio, MainMenu adalah menu dengan tombol start, How to menunjukkan
"cara bermain" petunjuk dan Game negara memungkinkan Anda benar-benar
bermain game. Mari kita cepat pergi walaupun isi dari negara. Boot.js The Boot
negara adalah yang pertama dalam permainan.
Ball utama objek didefinisikan dan kami menambahkan dua
variabel disebut _WIDTH dan_HEIGHT yang lebar dan tinggi dari Canvas permainan
- mereka akan membantu kita memposisikan elemen pada layar. Kami memuat dua
gambar pertama yang akan digunakan nanti dalam Preload negara untuk menunjukkan
kemajuan memuat semua aset lainnya. The create fungsi memegang beberapa
konfigurasi dasar: kami sedang menyiapkan scaling dan keselarasan dari kanvas,
dan pindah ke Preload negara ketika semuanya sudah siap. Preloader.js The
Preloader negara mengurus memuat semua aset:
Ada gambar tunggal, spritesheets dan file audio dimuat oleh
framework. Dalam keadaan ini preloadBar menunjukkan kemajuan di layar. kemajuan
yang aset dimuat divisualisasikan oleh kerangka dengan menggunakan satu gambar.
Dengan setiap aset dimuat Anda dapat melihat lebih dari preloadBar image: dari
0% sampai 100%, diperbarui setiap frame. Setelah semua aset tersebut dimuat,
MainMenu negara diluncurkan. MainMenu.js The MainMenu negara menunjukkan menu
utama dari permainan, di mana Anda dapat mulai bermain dengan mengklik tombol.
Untuk membuat tombol baru ada add.button metode dengan
daftar berikut argumen opsional:
Howto negara menunjukkan petunjuk gameplay pada layar
sebelum memulai permainan. Setelah mengklik layar permainan yang sebenarnya
diluncurkan. Game.js The Game negara dari Game.js file di mana semua keajaiban
terjadi. Semua inisialisasi adalah dalam create() function (diluncurkan sekali
pada awal permainan).
Setelah itu beberapa fungsi akan membutuhkan kode lebih
lanjut untuk mengendalikan - kami akan menulis fungsi sendiri untuk menangani
tugas-tugas yang lebih rumit. Secara khusus, mencatat update() function
(dieksekusi pada setiap frame), yang update hal-hal seperti posisi bola. Create
dan update fungsi yang kerangka khusus, sementara yang lain akan kreasi kita
sendiri:
4.1.5 Menambahkan bola dan geraknya.
Pertama, menuju ke create() fungsi, menginisialisasi objek
bola itu sendiri dan menetapkan beberapa properti untuk itu:
Penambahkan sprite di tempat tertentu pada layar dan
menggunakan 'ball' gambar dari aset grafis yang dimuat. juga menetapkan jangkar
untuk setiap perhitungan fisika ke tengah bola, memungkinkan mesin fisika
Arcade (yang menangani semua fisika untuk gerakan bola), dan pengaturan ukuran
tubuh untuk mendeteksi tabrakan. The bounce properti digunakan untuk mengatur
bounciness bola ketika hits hambatan.
4.1.6 Mengontrol Bola.
Untuk memiliki bola yang dapat dilemparkan sekitar di area
bermain, tetapi juga penting untuk dapat benar-benar memindahkannya! Sekarang
kita akan menambahkan kemampuan untuk mengontrol bola dengan keyboard pada
perangkat desktop, dan kemudian kami akan pindah ke pelaksanaan Perangkat
Orientasi API. Mari kita fokus pada keyboard pertama dengan menambahkan berikut
ke create() fungsi:
Seperti yang Anda lihat ada fungsi Phaser khusus yang
disebut createCursorKeys() , yang akan memberi kita sebuah objek dengan event
handler untuk empat tombol panah untuk bermain dengan: atas, bawah, kiri dan
kanan. Selanjutnya kita akan menambahkan kode berikut ke update() fungsi,
sehingga akan dipecat pada setiap frame. The this.keys objek akan diperiksa
terhadap masukan pemain, sehingga bola bisa bereaksi sesuai dengan kekuatan
yang telah ditetapkan:
Dengan begitu kita dapat memeriksa kunci yang ditekan pada
frame yang diberikan dan menerapkan gaya didefinisikan bola, sehingga
meningkatkan kecepatan dalam arah yang benar.
4.1.7 Menerapkan Perangkat Berorientasi API.
Mungkin bagian yang paling menarik dari permainan ini adalah
penggunaannya dari API Perangkat Orientasi untuk kontrol pada perangkat mobile.
Berkat ini Anda dapat memainkan game dengan memiringkan perangkat ke arah yang
Anda ingin bola untuk roll. Berikut kode dari create() fungsi bertanggung jawab
untuk ini:
Tambahkan pendengar acara ke "deviceorientation"
acara dan mengikathandleOrientation fungsi yang terlihat seperti ini:
Semakin Anda memiringkan perangkat, lebih banyak kekuatan
diterapkan untuk bola, oleh karena itu lebih cepat bergerak (kecepatan yang
lebih tinggi). seperti dibawah ini
4.1.8 Menambahkan Lubang.
Tujuan utama dalam permainan ini adalah untuk memindahkan
bola dari posisi awal ke posisi akhir: sebuah lubang di tanah. Pelaksanaan
terlihat sangat mirip dengan bagian di mana kita buat bola, dan itu juga
menambahkan dalam create() fungsi kami Game World:
Perbedaannya adalah bahwa lubang tidak akan bergerak ketika
kita memukul bolanya dan akan memiliki tabrakan yang dapat dihitung.
4.1.9 Membangun Blok Labirin.
Untuk membuat permainan lebih keras dan lebih menarik kita
akan menambahkan beberapa kendala antara bola dan pintu keluar. Kita bisa
menggunakan editor tingkat, tetapi demi tutorial ini mari kita membuat sesuatu
pada kita sendiri. Untuk menahan informasi blok kita akan menggunakan array
data tingkat: untuk setiap blok kami akan menyimpan posisi atas dan kiri mutlak
dalam piksel ( x dan y ) dan jenis blok - horizontal atau vertikal ( t dengan
'w' lebar nilai yang berarti dan 'h' yang berarti tinggi). Kemudian, untuk
memuat tingkat kami akan mengurai data dan menunjukkan blok khusus untuk
tingkat itu. Dalam initLevels fungsi yang kita miliki:
Setiap elemen array menyimpan koleksi blok dengan x dan y
posisi dan t nilai untuk setiap. Setelah levelData , tapi masih dalam
initLevels fungsi, kami menambahkan blok ke dalam sebuah array dalam for
lingkaran menggunakan beberapa metode kerangka khusus:
Pertama, add.group() digunakan untuk membuat grup baru dari
item. Kemudian ARCADEtipe tubuh diatur untuk kelompok yang mengaktifkan
perhitungan fisika. ThenewLevel.create metode menciptakan item baru dalam
kelompok dengan mulai posisi kiri dan atas, dan gambar sendiri. Jika Anda tidak
ingin loop melalui daftar item lagi untuk menambahkan properti ke setiap satu
eksplisit, Anda dapat menggunakan setAll pada kelompok untuk menerapkannya ke
semua item dalam kelompok itu.
Objek disimpan dalam this.levels array, yang secara default
tidak terlihat. Untuk memuat tingkat tertentu, kita pastikan tingkat sebelumnya
yang tersembunyi, dan menunjukkan satu arus:
permainan ini memberikan pemain sebuah tantangan - sekarang
dia harus roll bola di area bermain dan membimbing melalui labirin dibangun
dari blok. Ini hanya sebuah contoh loading tingkat, dan hanya ada 5 dari mereka
hanya untuk menampilkan ide, tetapi Anda dapat bekerja pada perluasan yang Anda
sendiri.
4.1.10 Tabrakan.
Pada titik ini kita punya bola yang dikendalikan oleh
pemain, lubang untuk mencapai dan rintangan menghalangi jalan. Ada masalah
meskipun - permainan kami tidak memiliki tabrakan belum, jadi tidak ada yang
terjadi ketika bola menyentuh blok - itu hanya melewati. Mari kita
memperbaikinya! Kabar baiknya adalah bahwa kerangka akan mengurus menghitung
tabrakan, kita hanya harus menentukan objek bertabrakan diupdate() fungsi:
Ini akan memberitahu kerangka untuk menjalankan
wallCollision fungsi ketika bola menyentuh salah satu dinding. Kita dapat
menggunakan wallCollision fungsi untuk menambahkan fungsi yang kita inginkan
seperti bermain suara bounce dan melaksanakan Getaran API.
4.1.11 Menambahkan Suara.
Di antara aset preloaded ada track audio (dalam berbagai
format untuk kompatibilitas browser), yang dapat kita gunakan sekarang. Ini
harus didefinisikan dalam create()Fungsi pertama:
Jika status audio yang benar (sehingga suara dalam permainan
diaktifkan), kita bisa memainkannya di wallCollision fungsi:
Itu semua dalam membuat permainan suara dengan mudah dengan
Phaser.
4.1.12 Menerapkan getaran API.
Ketika object tabrakan bekerja seperti yang diharapkan mari
kita tambahkan beberapa efek khusus dengan bantuan dari Getaran API.
Cara terbaik untuk menggunakannya dalam kasus kami adalah
untuk bergetar telepon setiap kali bola menyentuh dinding - dalam wallCollision
fungsi:
Jika vibrate metode ini didukung oleh browser dan tersedia
dalam window.navigatorobjek, bergetar telepon untuk 100 milidetik. dan berhasil
dijalankan.
4.1.13 Menambahkan waktu yang telah berlalu.
Untuk meningkatkan replayability dan memberikan pemain
pilihan untuk bersaing satu sama lain kita akan menyimpan waktu berlalu -
pemain kemudian dapat mencoba untuk memperbaiki permainan waktu penyelesaian
terbaik mereka. Untuk melaksanakan ini kita harus membuat variabel untuk
menyimpan jumlah aktual detik berlalu dari awal permainan, dan untuk
menunjukkan untuk pemain dalam permainan. Mari kita mendefinisikan variabel
dalam create fungsi pertama:
Kemudian, tepat setelah itu, kita dapat menginisialisasi
objek teks yang diperlukan untuk menampilkan informasi ini kepada pengguna:
Kami mendefinisikan posisi atas dan kiri dari teks, konten
yang akan ditampilkan dan styling diterapkan ke teks. Kami telah ini dicetak di
layar, tapi itu akan baik untuk memperbarui nilai-nilai setiap detik:
Lingkaran ini, juga dalam create fungsi, akan mengeksekusi
updateCounter fungsi setiap detik dari awal permainan, sehingga kita dapat
menerapkan perubahan sesuai. Ini adalah bagaimana lengkap updateCounter fungsi
terlihat:
Seperti yang Anda lihat kita incrementing this.timer
variabel dan memperbarui isi teks objek dengan nilai saat ini pada setiap
iterasi, sehingga pemain melihat waktu yang telah berlalu.
4.1.14 Finishing Tingkat dan Permainan.
Bola bergulir di layar, timer bekerja dan memiliki lubang
dibuat bahwa kita harus mencapai. Sekarang mari kita mengatur kemungkinan untuk
benar-benar menyelesaikan level! Mengikuti garis di update() fungsi menambahkan
pendengar yang kebakaran ketika bola sampai ke lubang.
Ini bekerja sama dengan collide metode dijelaskan
sebelumnya. Ketika bola tumpang tindih dengan lubang (bukan bertabrakan), yang
finishLevel fungsi dijalankan:
Jika level yang saat itu sama dengan jumlah maksimum tingkat
(dalam hal ini 5), maka permainan selesai - Anda akan mendapatkan pesan selamat
bersama dengan jumlah detik berlalu melalui seluruh permainan, dan tombol untuk
menekan bahwa membawa Anda ke menu utama. Jika level yang saat itu lebih rendah
dari 5, semua variabel neccesary-reset dan tingkat berikutnya dimuat.
4.1.15 Ide untuk fitur baru .
Ini hanyalah sebuah demo yang bekerja dari permainan yang
bisa memiliki banyak fitur tambahan. Kita bisa misalnya menambah power-up untuk
mengumpulkan sepanjang jalan yang akan membuat gulungan bola kami lebih cepat,
menghentikan timer selama beberapa detik atau memberikan bola kekuasaan khusus
untuk pergi melalui rintangan.Ada juga ruang untuk perangkap yang akan
memperlambat bola ke bawah atau membuat lebih sulit untuk mencapai lubang. Anda
dapat membuat tingkat lebih kesulitan meningkat. Anda bahkan dapat menerapkan
prestasi, leaderboards dan medali untuk tindakan yang berbeda dalam permainan.
Ada kemungkinan tak terbatas - mereka hanya bergantung pada imajinasi Anda.
4.1.16 Ringkasan.
Tutorial ini akan membantu Anda menyelam ke pengembangan
game 2D dan menginspirasi Anda untuk membuat game yang mengagumkan pada Anda
sendiri. Anda dapat memainkan game demo Cyber Orb dan memeriksa nya kode sumber
di GitHub. HTML5 memberi kita alat baku, kerangka kerja yang dibangun di atas
itu semakin cepat dan lebih baik, jadi sekarang adalah waktu yang tepat masuk
ke pengembangan web game. Dalam tutorial ini kami menggunakan Phaser, tetapi
ada sejumlah kerangka kerja lainnya layak dipertimbangkan juga seperti ImpactJS
, Membangun 2 atau PlayCanvas - itu tergantung pada preferensi Anda,
keterampilan (atau ketiadaan), skala proyek, persyaratan dan aspek lainnya
coding. Anda harus memeriksa mereka semua dan memutuskan mana yang sesuai
dengan kebutuhan Anda yang terbaik.
contoh lain adalah game dibawah ini
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser
example', { preload: preload, create: create, update:
update, render: render });
function preload() {
game.load.spritesheet('gameboy', 'assets/sprites
gameboy_seize_color_40x60.png', 40, 60);
game.load.image('atari', 'assets
sprites/atari130xe.png');
}
var sprite; var sprite2; var sprite3;
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
game.stage.backgroundColor = '#124184';
// In this example the little Gameboy sprite can pass
through the top
bottom of the Atari sprite
// Because it's set to ignore collisions on its top/bottom
faces.
sprite = game.add.sprite(300, 200, 'atari'); sprite.name =
'atari';
game.physics.enable(sprite, Phaser.Physics.ARCADE);
sprite.body.collideWorldBounds = true;
sprite.body.checkCollision.up = false;
sprite.body.checkCollision.down =
false; sprite.body.immovable = true;
sprite2 = game.add.sprite(350, 400, 'gameboy', 2);
sprite2.name =
'gameboy';
game.physics.enable(sprite2, Phaser.Physics.ARCADE);
sprite2.body.collideWorldBounds = true;
sprite2.body.bounce.setTo(1, 1);
sprite3 = game.add.sprite(0, 210, 'gameboy', 4);
game.physics.enable(sprite3, Phaser.Physics.ARCADE);
sprite3.name = 'gameboy2'; sprite3.body.collideWorldBounds =
true;
sprite3.body.bounce.setTo(1, 1);
sprite2.body.velocity.y = -200; sprite3.body.velocity.x =
200;
}
function update() {
game.physics.arcade.collide(sprite, sprite2);
game.physics.arcade.collide(sprite, sprite3);
}
function render() {
game.debug.bodyInfo(sprite, 16, 24);
// game.debug.body(sprite); // game.debug.body(sprite2);
}
atau dapat juga membuatnya seperti yang satu ini jika
permainan yang akan anda buat sesuai maka ikutilah kodingan dibawah ni
4.1.17 Costum sprite vs group.
Vegetable = function (game) {
frame = game.rnd.between(0, 35);
// Just because we don't want a false chilli (frame 17) if
(frame === 17) {
frame = 1; }
var x = game.rnd.between(100, 770); var y =
game.rnd.between(0, 570);
Phaser.Image.call(this, game, x, y, 'veggies', frame);
};
Vegetable.prototype = Object.create(Phaser.Image.prototype);
Vegetable.prototype.constructor = Vegetable;
Chilli = function (game) {
var x = game.rnd.between(100, 770); var y =
game.rnd.between(0, 570);
Phaser.Sprite.call(this, game, x, y, 'veggies', 17);
game.physics.arcade.enable(this);
};
Chilli.prototype = Object.create(Phaser.Sprite.prototype);
Chilli.prototype.constructor = Chilli;
var game = new Phaser.Game(800, 600, Phaser.AUTO,
'phaser-example', {
preload: preload, create: create, update: update });
function preload() {
game.load.image('phaser', 'assets/sprites/phaser-dude.png');
game.load.spritesheet('veggies',
'assets/sprites/fruitnveg32wh37.png', 32,
32);
}
var sprite; var group; var cursors;
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
game.stage.backgroundColor = '#2d2d2d';
// This example will check Sprite vs. Group collision group
=
game.add.group();
for (var i = 0; i < 70; i++) { if (i < 50) { //
Vegetables don't have any
physics bodies group.add(new Vegetable(game)); } else { //
But a chilli has
a physics body
group.add(new Chilli(game)); } }
// Our player sprite = game.add.sprite(32, 200, 'phaser');
game.physics.arcade.enable(sprite);
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
game.physics.arcade.overlap(sprite, group, collisionHandler,
null, this);
sprite.body.velocity.x = 0;
sprite.body.velocity.y = 0;
if (cursors.left.isDown) { sprite.body.velocity.x = -200; }
else if
(cursors.right.isDown) { sprite.body.velocity.x = 200; }
if (cursors.up.isDown) { sprite.body.velocity.y = -200; }
else if
(cursors.down.isDown) { sprite.body.velocity.y = 200; }
}
function collisionHandler (player, chilli) {
// If the player collides with a chilli it gets eaten :)
chilli.kill();
}
jika kita ingin membuat efek object menjadi tidak beraturan
dan memenuhi
setiap canvas yang ada kita dapat menggunakannya memakai
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser
example', { preload: preload, create: create, update:
update, render: render
});
function preload() {
game.load.image('car', 'assets/sprites/car90.png');
game.load.image('baddie',
'assets/sprites/space-baddie.png');
}
var car; var aliens; var cursors; var spaceKey;
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
aliens = game.add.group(); aliens.enableBody = true;
for (var i = 0; i < 50; i++) { var s =
aliens.create(game.world.randomX,
game.world.randomY, 'baddie'); s.name = 'alien' + s;
s.body.collideWorldBounds = true;
s.body.bounce.setTo(0.8, 0.8); s.body.velocity.setTo(10 +
Math.random() *
40, 10 + Math.random() * 40); }
car = game.add.sprite(400, 300, 'car'); car.name = 'car';
car.anchor.set(0.5);
game.physics.enable(car, Phaser.Physics.ARCADE);
car.body.collideWorldBounds = true; car.body.bounce.set(0.8);
car.body.allowRotation = true; car.body.immovable = true;
cursors = game.input.keyboard.createCursorKeys();
spaceKey =
this.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
spaceKey.onDown.add(togglePause, this);
}
function togglePause() {
game.physics.arcade.isPaused =
(game.physics.arcade.isPaused) ? false :
true;
}
function update() {
game.physics.arcade.collide(car, aliens);
car.body.velocity.x = 0; car.body.velocity.y = 0;
car.body.angularVelocity =
0;
if (cursors.left.isDown) { car.body.angularVelocity = -200;
} else if
(cursors.right.isDown) { car.body.angularVelocity = 200; }
if (cursors.up.isDown) {
car.body.velocity.copyFrom(game.physics.arcade.velocityFromAngle(car.
ngle, 300)); }
}
function render() {
} selain itu, kita juga dapat membuat sebuah object dengan
pengendalian
gravitasi seperti gambar dibawah ini
var game = new Phaser.Game(800, 600, Phaser.AUTO,
'phaser-example', {
preload: preload, create: create, render: render });
function preload() {
game.load.image('ilkke', 'assets/sprites/ilkke.png');
}
var sprite1; var sprite2; var sprite3; var sprite4;
function create() {
game.stage.backgroundColor = '#2d2d2d';
game.physics.startSystem(Phaser.Physics.ARCADE);
// Set the world (global) gravity
game.physics.arcade.gravity.y = 100;
// Sprite 1 will use the World (global) gravity sprite1 =
game.add.sprite(100, 96, 'ilkke');
// Sprite 2 is set to ignore the global gravity and use its
own value sprite2 =
game.add.sprite(300, 96, 'ilkke');
// Sprite 3 will use both the world gravity and its own
gravityScale
modifier sprite3 = game.add.sprite(500, 96, 'ilkke');
// Sprite 4 will ignore all gravity sprite4 =
game.add.sprite(700, 96, 'ilkke');
// Enable physics on those sprites game.physics.enable( [
sprite1, sprite2,
sprite3, sprite4 ], Phaser.Physics.ARCADE);
sprite1.body.collideWorldBounds = true;
sprite1.body.bounce.y = 0.8;
sprite2.body.collideWorldBounds = true;
sprite2.body.bounce.y = 0.8;
sprite2.body.gravity.y = 200;
sprite3.body.collideWorldBounds = true;
sprite3.body.bounce.y = 0.8; sprite3.body.gravity.y = 50;
sprite4.body.allowGravity = false;
}
function render() {
game.debug.text('world gravity', sprite1.x - 32, 64);
game.debug.text('local
gravity', sprite2.x - 32, 64); game.debug.text('local / 2',
sprite3.x - 32, 64);
game.debug.text('no gravity', sprite4.x - 32, 64);
} Move Towards Object
var game = new Phaser.Game(800, 600, Phaser.AUTO,
'phaser-example', {
preload: preload, create: create, update: update });
function preload() {
game.load.image('ball', 'assets/sprites/shinyball.png');
}
var balls;
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
balls = game.add.group(); balls.enableBody = true;
for (var i = 0; i < 50; i++) { var ball =
balls.create(game.world.randomX,
game.world.randomY, 'ball'); }
}
function update() {
if (game.input.mousePointer.isDown) { // First is the
callback // Second is
the context in which the callback runs, in this case
game.physics.arcade
// Third is the parameter the callback expects - it is
always sent the Group
child as the first parameter
balls.forEach(game.physics.arcade.moveToPointer,
game.physics.arcade, false, 200);
}
else { balls.setAll('body.velocity.x', 0);
balls.setAll('body.velocity.y', 0); }
} Body Scale
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser
example', { preload: preload, create: create, update:
update, render: render
});
function preload() {
game.load.spritesheet('gameboy', 'assets/sprites
gameboy_seize_color_40x60.png', 40, 60);
}
var sprite; var sprite2;
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
game.stage.backgroundColor = '#124184';
// Here we're tweening the scale of the sprite, which
translates to the scale
of the Body as well.
// The collision will carry on working even against the
scaled body.
sprite = game.add.sprite(200, 300, 'gameboy', 2);
sprite.anchor.set(0.5); sprite.smoothed = false;
game.physics.enable(sprite, Phaser.Physics.ARCADE);
sprite.body.immovable = true;
sprite2 = game.add.sprite(600, 270, 'gameboy', 3);
game.physics.enable(sprite2, Phaser.Physics.ARCADE);
game.add.tween(sprite.scale).to( { x: 3, y: 3 }, 2000,
Phaser.Easing.Linear.None, true, 0, 1000, true);
}
function update() {
sprite2.body.velocity.x = -200;
game.physics.arcade.collide(sprite, sprite2);
}
function render() {
// game.debug.body(sprite);
// game.debug.body(sprite2);
} Direct Body Movement
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser
example', { preload: preload, create: create, update:
update, render: render
});
function preload() {
game.load.image('atari', 'assets/sprites/atari130xe.png');
game.load.image('mushroom', 'assets/sprites/mushroom2.png');
}
var sprite1; var sprite2;
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
game.stage.backgroundColor = '#2d2d2d';
sprite1 = game.add.sprite(300, 50, 'atari'); sprite2 =
game.add.sprite(400,
450, 'mushroom');
game.physics.arcade.enable([ sprite1, sprite2 ],
Phaser.Physics.ARCADE);
game.add.tween(sprite1.body).to( { y: 400 }, 3000,
Phaser.Easing.Linear.None, true);
}
function update() {
game.physics.arcade.overlap(sprite1, sprite2,
overlapHandler, null, this);
}
function overlapHandler (obj1, obj2) {
game.stage.backgroundColor = '#992d2d';
obj2.kill();
}
function render() {
game.debug.body(sprite1); game.debug.body(sprite2);
} Multi Angle to Pointer
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser
example', { preload: preload, create: create, update: update
});
function preload() { game.load.image('arrow',
'assets/sprites
longarrow.png'); }
var sprite1; var sprite2; var sprite3; var sprite4;
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
game.stage.backgroundColor = '#363636';
sprite1 = game.add.sprite(150, 150, 'arrow');
sprite1.anchor.setTo(0.1, 0.5);
sprite2 = game.add.sprite(200, 500, 'arrow');
sprite2.anchor.setTo(0.1, 0.5);
sprite3 = game.add.sprite(400, 200, 'arrow');
sprite3.anchor.setTo(0.1, 0.5);
sprite4 = game.add.sprite(600, 400, 'arrow');
sprite4.anchor.setTo(0.1, 0.5);
}
function update() {
// This will update the sprite.rotation so that it points to
the currently active
pointer // On a Desktop that is the mouse, on mobile the
most recent finger
press.
sprite1.rotation =
game.physics.arcade.angleToPointer(sprite1);
sprite2.rotation =
game.physics.arcade.angleToPointer(sprite2);
sprite3.rotation =
game.physics.arcade.angleToPointer(sprite3);
sprite4.rotation =
game.physics.arcade.angleToPointer(sprite4);
} Multiball
var game = new Phaser.Game(800, 600, Phaser.AUTO,
'phaser-example', {
preload: preload, create: create, update: update, render:
render });
function preload() {
game.load.image('atari', 'assets/sprites/atari130xe.png');
game.load.spritesheet('bullets', 'assets/sprites/balls.png',
17, 17);
}
var atari; var balls; var cursors;
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
game.stage.backgroundColor = '#2d2d2d';
balls = game.add.group();
balls.createMultiple(250, 'bullets', 0, false);
atari = game.add.sprite(300, 450, 'atari');
game.physics.arcade.gravity.y = 400;
// Enable physics on everything added to the world so far
(the true
parameter makes it recurse down into children)
game.physics.arcade.enable(game.world, true);
atari.body.allowGravity = 0; atari.body.immovable = true;
cursors = game.input.keyboard.createCursorKeys();
game.time.events.loop(150, fire, this);
game.add.text(16, 16, 'Left / Right to move', { font: '18px
Arial', fill: '#ffffff'
});
}
function fire() {
var ball = balls.getFirstExists(false);
if (ball) { ball.frame = game.rnd.integerInRange(0,6);
ball.exists = true;
ball.reset(game.world.randomX, 0);
ball.body.bounce.y = 0.8; }
}
function reflect(a, ball) {
if (ball.y > (atari.y + 5)) { return true; } else {
ball.body.velocity.x =
atari.body.velocity.x; ball.body.velocity.y *=
-(ball.body.bounce.y);
return false; }
}
function update() {
game.physics.arcade.collide(atari, balls, null, reflect,
this);
atari.body.velocity.x = 0;
if (cursors.left.isDown) { atari.body.velocity.x = -200; }
else if
(cursors.right.isDown) { atari.body.velocity.x = 200; }
balls.forEachAlive(checkBounds, this);
}
function checkBounds(ball) {
if (ball.y > 600) { ball.kill(); }
}
function render() {
} Platform Tight dijalankan menggunakan kursor pada keyboard
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-
example', { preload: preload, create: create, update:
update, render: render
});
function preload() {
game.load.spritesheet('dude',
'assets/games/starstruck/dude.png', 32, 48);
game.load.image('background',
'assets/games/starstruck/background2.png');
}
var player; var facing = 'left'; var jumpTimer = 0; var
cursors; var
jumpButton; var bg;
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
bg = game.add.tileSprite(0, 0, 800, 600, 'background');
game.physics.arcade.gravity.y = 300;
player = game.add.sprite(32, 320, 'dude');
game.physics.enable(player,
Phaser.Physics.ARCADE);
player.body.collideWorldBounds = true; player.body.gravity.y
= 1000;
player.body.maxVelocity.y = 500; player.body.setSize(20, 32,
5, 16);
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('turn', [4], 20, true);
player.animations.add('right', [5,
6, 7, 8], 10, true);
cursors = game.input.keyboard.createCursorKeys(); jumpButton
=
game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
}
function update() {
// game.physics.arcade.collide(player, layer);
player.body.velocity.x = 0;
if (cursors.left.isDown) { player.body.velocity.x = -150;
if (facing != 'left') { player.animations.play('left');
facing = 'left'; } } else if
(cursors.right.isDown) { player.body.velocity.x = 150;
if (facing != 'right') { player.animations.play('right');
facing = 'right'; } } else
{ if (facing != 'idle') { player.animations.stop();
if (facing == 'left') { player.frame = 0; } else {
player.frame = 5; }
facing = 'idle'; } } if (jumpButton.isDown &&
player.body.onFloor() &&
game.time.now > jumpTimer) { player.body.velocity.y =
-500; jumpTimer =
game.time.now + 750; }
}
function render () {
// game.debug.text(game.time.physicsElapsed, 32, 32); //
game.debug.body(player); game.debug.bodyInfo(player, 16,
24);
} Ship Trail memainkannya dengan cara mengklik mouse
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-
example', { preload: preload, create: create, update:
update, render: render
});
function preload() {
game.load.image('chunk', 'assets/sprites/chunk.png');
game.load.image('arrow',
'assets/sprites/asteroids_ship.png');
}
var sprite; var bmd;
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
// Click on the left or right of the game to shoot the space
ship in that
direction
game.stage.backgroundColor = '#124184';
bmd = game.add.bitmapData(800, 600); bmd.context.fillStyle =
'#ffffff';
var bg = game.add.sprite(0, 0, bmd);
game.physics.arcade.gravity.y = 100;
sprite = game.add.sprite(32, 450, 'arrow');
sprite.anchor.set(0.5);
game.physics.enable(sprite, Phaser.Physics.ARCADE);
sprite.body.collideWorldBounds = true;
sprite.body.bounce.set(0.8);
game.input.onDown.add(launch, this);
}
function launch() {
if (game.input.x < sprite.x) {
sprite.body.velocity.setTo(-200, -200); } else
{ sprite.body.velocity.setTo(200, -200); }
}
function update() {
sprite.rotation = sprite.body.angle;
bmd.context.fillRect(sprite.x, sprite.y, 2, 2);
bmd.dirty = true;
}
function render() {
game.debug.bodyInfo(sprite, 32, 32);
}
4.1.18 Shoot the point.
memainkan dengan cara mengikuti arah mouse yang sednga
digunakan
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-
example', { preload: preload, create: create, update:
update, render: render
});
function preload() {
game.load.image('arrow', 'assets/sprites/arrow.png');
game.load.image('bullet', 'assets/sprites/purple_ball.png');
}
var sprite; var bullets;
var fireRate = 100; var nextFire = 0;
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
game.stage.backgroundColor = '#313131';
bullets = game.add.group(); bullets.enableBody = true;
bullets.physicsBodyType = Phaser.Physics.ARCADE;
bullets.createMultiple(50, 'bullet');
bullets.setAll('checkWorldBounds',
true); bullets.setAll('outOfBoundsKill', true); sprite =
game.add.sprite(400,
300, 'arrow');
sprite.anchor.set(0.5);
game.physics.enable(sprite, Phaser.Physics.ARCADE);
sprite.body.allowRotation = false;
}
function update() {
sprite.rotation =
game.physics.arcade.angleToPointer(sprite);
if (game.input.activePointer.isDown) { fire(); }
}
function fire() {
if (game.time.now > nextFire &&
bullets.countDead() > 0) { nextFire =
game.time.now + fireRate;
var bullet = bullets.getFirstDead();
bullet.reset(sprite.x - 8, sprite.y - 8);
game.physics.arcade.moveToPointer(bullet, 300); }
}
function render() {
game.debug.text('Active Bullets: ' + bullets.countLiving() +
' / ' +
bullets.total, 32, 32); game.debug.spriteInfo(sprite, 32,
450);
}
4.1.19 Sort Direction Vertical.
menjalankan object dengan menggunakan navigasi keyboard
var game = new Phaser.Game(800, 600, Phaser.AUTO,
'phaser-example', {
preload: preload, create: create, update: update });
function preload() {
game.load.image('phaser', 'assets/sprites/phaser-dude.png');
game.load.spritesheet('veggies',
'assets/sprites/fruitnveg32wh37.png', 32,
32);
}
var sprite; var group; var cursors;
function create() {
game.world.setBounds(0, 0, 800, 3000);
game.physics.startSystem(Phaser.Physics.ARCADE);
game.stage.backgroundColor = '#2d2d2d';
sprite = game.add.sprite(400, 2900, 'phaser');
// game.physics.arcade.sortDirection =
Phaser.Physics.Arcade.TOP_BOTTOM;
game.physics.arcade.sortDirection
= Phaser.Physics.Arcade.BOTTOM_TOP;
game.physics.arcade.enable(sprite); group =
game.add.physicsGroup(Phaser.Physics.ARCADE);
for (var i = 0; i < 500; i++) { var c =
group.create(game.rnd.integerInRange(64, 800-64),
game.rnd.integerInRange(100, 2900), 'veggies',
game.rnd.integerInRange(0, 35)); c.name = 'veg' + i;
c.body.immovable =
true; }
for (var i = 0; i < 20; i++) { // Here we'll create some
chillis which the
player can pick-up. They are still part of the same Group.
var c =
group.create(game.rnd.integerInRange(64, 800-64),
game.rnd.integerInRange(0, 2000), 'veggies', 17);
c.body.immovable = true;
}
game.camera.follow(sprite);
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
game.physics.arcade.collide(sprite, group, collisionHandler,
null, this);
sprite.body.velocity.x = 0; sprite.body.velocity.y = 0;
if (cursors.left.isDown) { sprite.body.velocity.x = -200; }
else if
(cursors.right.isDown) { sprite.body.velocity.x = 200; }
if (cursors.up.isDown) { sprite.body.velocity.y = -200; }
else if
(cursors.down.isDown) { sprite.body.velocity.y = 200; }
}
function collisionHandler (player, veg) {
// If the player collides with the chillis then they get
eaten :) // The chilli
frame ID is 17
if (veg.frame === 17) { veg.kill(); }
}
4.1.20 Snake
// Snake by Patrick OReilly and Richard Davey // Twitter:
@pato_reilly Web: http://patricko.byethost9.com
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-
example', { preload: preload, create: create, update:
update,render : render
});
function preload() {
game.load.image('ball','assets/sprites/shinyball.png');
}
var snakeHead; //head of snake sprite var snakeSection = new
Array(); //
array of sprites that make the snake body sections var
snakePath = new
Array(); //arrary
of positions(points) that have to be stored for the path the
sections follow
var numSnakeSections = 30; //number of snake body sections
var
snakeSpacer = 6; /
parameter that sets the spacing between sections
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
game.world.setBounds(0, 0, 800, 600);
cursors = game.input.keyboard.createCursorKeys();
snakeHead = game.add.sprite(400, 300, 'ball');
snakeHead.anchor.setTo(0.5, 0.5);
game.physics.enable(snakeHead, Phaser.Physics.ARCADE); //
Init
snakeSection array for (var i = 1; i <=
numSnakeSections-1; i++) {
snakeSection[i] =
game.add.sprite(400, 300, 'ball');
snakeSection[i].anchor.setTo(0.5, 0.5); }
// Init snakePath array for (var i = 0; i <=
numSnakeSections * snakeSpacer;
i++) {
snakePath[i] = new Phaser.Point(400, 300); }
}
function update() {
snakeHead.body.velocity.setTo(0, 0);
snakeHead.body.angularVelocity = 0;
if (cursors.up.isDown) {
snakeHead.body.velocity.copyFrom(game.physics.arcade.velocityFromAngl
e(snakeHead.angle, 300));
// Everytime the snake head moves, insert the new location
at the start of the
array, // and knock the last position off the end
var part = snakePath.pop();
part.setTo(snakeHead.x, snakeHead.y);
snakePath.unshift(part);
for (var i = 1; i <= numSnakeSections - 1; i++) {
snakeSection[i].x =
(snakePath[i * snakeSpacer]).x; snakeSection[i].y =
(snakePath[i *
snakeSpacer]).y; } }
if (cursors.left.isDown) { snakeHead.body.angularVelocity =
-300; } else if
(cursors.right.isDown) { snakeHead.body.angularVelocity =
300; }
}
function render() {
game.debug.spriteInfo(snakeHead, 32, 32);
}
4.1.21 One way collision.
var game = new Phaser.Game(800, 600, Phaser.CANVAS,
'phaser-example', {
preload: preload, create: create, update: update, render:
render });
function preload() {
game.load.spritesheet('gameboy', 'assets/sprites/
gameboy_seize_color_40x60.png', 40, 60);
game.load.image('atari', 'assets/
sprites/atari130xe.png');
}
var sprite; var sprite2; var sprite3;
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
game.stage.backgroundColor = '#124184';
// In this example the little Gameboy sprite can pass
through the top/bottom
of the Atari sprite // Because it's set to ignore collisions
on its top/bottom
faces.
sprite = game.add.sprite(300, 200, 'atari'); sprite.name =
'atari';
game.physics.enable(sprite, Phaser.Physics.ARCADE);
sprite.body.collideWorldBounds = true;
sprite.body.checkCollision.up = false;
sprite.body.checkCollision.down =
false; sprite.body.immovable = true;
sprite2 = game.add.sprite(350, 400, 'gameboy', 2);
sprite2.name =
'gameboy';
game.physics.enable(sprite2, Phaser.Physics.ARCADE);
sprite2.body.collideWorldBounds = true;
sprite2.body.bounce.setTo(1, 1);
sprite3 = game.add.sprite(0, 210, 'gameboy', 4);
game.physics.enable(sprite3, Phaser.Physics.ARCADE);
sprite3.name = 'gameboy2'; sprite3.body.collideWorldBounds =
true;
sprite3.body.bounce.setTo(1, 1);
sprite2.body.velocity.y = -200; sprite3.body.velocity.x =
200;
}
function update() {
game.physics.arcade.collide(sprite, sprite2);
game.physics.arcade.collide(sprite, sprite3);
}
function render() {
game.debug.bodyInfo(sprite, 16, 24);
// game.debug.body(sprite); // game.debug.body(sprite2);
}
4.1.22 Launcher Follow World.
// mods by Patrick OReilly // twitter: @pato_reilly
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-
example', { preload: preload, create: create, update:
update, render: render
});
function preload() {
game.load.image('background','assets/misc/starfield.jpg');
game.load.image('player','assets/sprites/phaser-dude.png');
game.load.image('analog', 'assets/tests
fusia.png'); game.load.image('arrow',
'assets/sprites/longarrow2.png'); }
var myTween; var player; var cursors; var arrow; var
catchFlag = false; var
launchVelocity = 0; var launched;
function create() { game.world.setBounds(0, 0, 5000, 600);
game.add.tileSprite(0, 0, 5000, 600, 'background'); var
graphics =
game.add.graphics(0,0);
graphics.beginFill(0x049e0c); graphics.drawRect(395, 400,
10, 250);
analog = game.add.sprite(400, 400, 'analog'); analog.width =
8;
analog.rotation = 220;
analog.alpha = 0; analog.anchor.setTo(0.5, 0.0); arrow =
game.add.sprite(400, 400, 'arrow'); arrow.anchor.setTo(0.1,
0.5);
arrow.alpha = 0;
player = game.add.sprite(150, 320, 'player');
player.anchor.setTo(0.5, 0.5);
game.physics.enable(player, Phaser.Physics.ARCADE);
player.body.collideWorldBounds = true;
player.body.bounce.set(0.9);
player.body.drag.set(20, 0);
// Enable input. player.inputEnabled = true;
player.input.start(0, true);
player.events.onInputDown.add(set);
player.events.onInputUp.add(launch);
// this tween is
to make the camera return to left side of world when done
launching // so it
is not used until then myTween = game.add.tween(player).to({x:
150},
5000,
Phaser.Easing.Linear.None); myTween.onComplete.add(reappear,
this);
game.camera.follow(player, Phaser.Camera.FOLLOW_TOPDOWN); }
function reappear() { launched = false; player.alpha = 1; }
function set(player,pointer) {
//disallow launching until reset if (!launched) { catchFlag
= true;
game.camera.follow(null); player.body.moves = false;
player.body.gravity.set(0);
player.body.velocity.set(0); } }
function launch() { if (catchFlag) { catchFlag = false;
launched = true;
game.camera.follow(player, Phaser.Camera.FOLLOW_TOPDOWN);
arrow.alpha = 0;
analog.alpha = 0; Xvector = (arrow.x - player.x) * 3;
Yvector = (arrow.y - player.y) * 3; player.body.moves = true;
player.body.gravity.setTo(0, 180);
player.body.velocity.setTo(Xvector, Yvector); } }
function update() {
arrow.rotation = game.physics.arcade.angleBetween(arrow,
player); // Track the player sprite to the mouse if (catchFlag) { distance =
game.physics.arcade.distanceToPointer(arrow); theta =
game.physics.arcade.angleToPointer(arrow); // Govern the distance the sprite is
dragged away from
launch post if (distance > 300) { distance = 300;
adjacentX = Math.cos(theta) * distance; oppositeY = Math.sin(theta) * distance;
player.x = 400 + adjacentX;
player.y = 400 + oppositeY; analog.height = distance; } else
{ player.x = game.input.activePointer.worldX; player.y =
game.input.activePointer.worldY;
analog.height = distance; } arrow.alpha = 1; analog.alpha =
0.5; analog.rotation = arrow.rotation - Math.PI/2; launchVelocity =
analog.height; } //check sprite
motion and if done, return camera to left side of world var
tweening = myTween.isRunning;
if (!tweening && launched && (player.x >=
game.world.width-20 || player.body.deltaX() == 0)) {
player.body.velocity.setTo(0, 0); player.alpha = 0;
player.body.moves = false; player.x = 150; player.y = 320;
myTween.start(); }
}
function render() {
game.debug.text("Drag the sprite and release to
launch", 32, 32, 'rgb(0,255,0)'); game.debug.cameraInfo(game.camera, 32,
64); game.debug.spriteCoords(player,
32, 150); game.debug.text("Launch Velocity: " +
parseInt(launchVelocity), 550, 32, 'rgb(0,255,0)');
baik saja dalam beberapa kasus, tetapi mengambil sprite
berikut misalnya:
pisang diperlakukan sebagai persegi panjang di Arcade - dan
juga berperilaku seperti satu. Pisang menumpuk seperti kotak. Dengan
menggunakan P2 Fisika dan program PhysicsEditor, Anda dapat membuat bentuk
tabrakan jauh lebih akurat yang hanya akan menyebabkan tabrakan ketika harus
ada tabrakan. Dan lihat bagaimana baik pisang menumpuk.
4.1.23 Jadi mengapa adalah sistem fisika Arcade default di
Phaser jika P2 fisika yang lebih baik?
Semua yang fungsi tambahan datang pada biaya kinerja. Sejak
fisika jauh lebih kompleks, dibutuhkan kekuatan pemrosesan lebih banyak, dan
ini dapat terutama terlihat ketika menjalankan game pada perangkat mobile. Jadi
jika permainan Anda akan bekerja dengan Arcade fisika, Anda mungkin harus
menggunakan itu, tapi untuk game yang lebih kompleks (seperti demo gila kita akan
membangun) Anda dapat menggunakan P2 fisika.
4.1.24 Sebelum Memulai.
Aku akan menunjukkan kepada Anda bagaimana membangun sebuah
permainan gila (atau mungkin menyebutnya simulasi akan lebih akurat)
menggunakan P2 fisika dan PhysicsEditor di Phaser. Aku tidak akan melalui salah
satu Phaser dasar mengatur atau langkah-langkah struktur. Game ini akan
menggunakan struktur dasar, yang dirancang untuk game Phaser yang dapat Anda
gunakan di hampir setiap proyek. Jika Anda ingin mengikuti dan kode Anda dapat men-download
template (serta preview gratis saya Mobile Development untuk Web Developer saja
yang berjalan melalui pengaturan proyek Phaser) di bawah ini: Download Template
& Bonus Phaser Konten Anda juga bisa mendapatkan kode sumber lengkap dari
Github . Ini berisi beberapa folder untuk tahap differnt dari tutorial.
4.1.25 Menciptakan bentuk tabrakan untuk P2 Fisika.
Phaser tidak memiliki cara untuk secara otomatis menciptakan
bentuk tabrakan akurat seperti pada gambar di atas. Anda harus menentukan
bentuk tabrakan dengan menyediakan permainan Phaser kami dengan file JSON yang
terlihat seperti ini:
{ "betty": [ { "shape": [ 1, 63 , 8, 54
, 11, 63 , 2, 73 ] } ,
{ "shape": [ 67, 56 , 54, 64 , 57, 56 , 67, 51 ] }
,
{ "shape": [ 14, 77 , 24, 83 , 19, 93 , 12, 94 ] }
, … ],
"banana": [ … ], … }
Mudah! Ya benar ... jika Anda mengalami serangan jantung
Mini melihat itu maka jangan khawatir. Ini adalah apa yang PhysicsEditor untuk
dan itu akan membuat hidup Anda jauh lebih mudah. PhysicsEditor memungkinkan
Anda untuk menentukan bentuk tabrakan dan kemudian mengekspornya ke format yang
sesuai yang Anda butuhkan. Dalam kasus Phaser, yaitu JSON, tapi PhysicsEditor
bekerja untuk sekelompok kerangka permainan yang berbeda. Mari kita berjalan
melalui bagaimana melakukan itu sekarang.
4.1.26 Download PhysicsEditor.
Anda bisa ambil PhysicsEditor dan mulai percobaan gratis
Anda di mana Anda akan memiliki akses ke semua fitur-fiturnya.
4.1.27 Impor Sprite Anda.
Setelah Anda download dan diinstal PhyscisEditor Anda harus
disambut dengan layar yang terlihat seperti ini:
Anda akan menggunakan sprite berikut untuk permainan -
men-download dan letakkan di dalam folder aset:
Mulailah dengan menambahkan sprite. Anda dapat drag dan drop
sprite pada panel sebelah kiri atau gunakan toolbar. Sepanjang toolbar atas,
Anda akan melihat tombol Add sprite. Klik ini dan memuat sprite yang ingin Anda
gunakan. Mulailah dengan betty.png - sprite karakter.
4.1.28 Melacak Sprite Anda.
Toolbar atas sprite Anda berisi ikon tongkat sihir. Klik.
Alat ini membuat super cepat dan mudah untuk menciptakan bentuk tabrakan yang
sesuai. Yang harus Anda lakukan adalah klik tongkat dan Anda akan melihat layar
seperti ini:
Anda dapat mengubah toleransi untuk efek berapa banyak
vertexes digunakan, semakin rendah toleransi, semakin vertexes dan lebih akurat
bentuk. Tetapi lebih akurasi berarti juga lebih kompleks yang menghasilkan
perhitungan yang lebih untuk CPU! Semuanya selalu datang pada biaya.
Bentuk kiri memiliki terlalu banyak simpul. Bentuk di tengah-tengah
gambar harus ok. Bentuk yang tepat tidak cocok terlalu baik - tetapi masih
mungkin memberikan tabrakan cukup baik. Ingat: Pemain tidak melihat poligon -
ia hanya melihat reaksi pada hit. Dan jika kinerja yang dipertaruhkan lebih
baik untuk pergi dengan akurasi kurang dari frame yang lebih sedikit per detik.
Klik Ok untuk menerima bentuk ditelusuri.
Anda juga dapat men-tweak poligon:
·
Tekan tombol mouse pada titik untuk
memindahkannya
·
Klik dua kali vertex untuk
menghapusnya
·
klik ganda dekat jalur untuk
memasukkan titik baru
4.1.29 Mempublikasikan Sprite Anda .
Saat ini, tidak ada eksportir khusus untuk Phaser di
PhysicsEditor, tapi itu tidak masalah karena kita hanya perlu untuk mengekspor
hasilnya dalam format JSON. Mengatur Lime + Corona (JSON) eksportir untuk saat
ini:
Akhirnya menekan tombol mempublikasikan sepanjang toolbar
atas dan menyimpan hasilnya ke folder game aset Anda, namasprite_physics.json
berkas Juga, pastikan Anda menyertakan salinan sprite yang sama Anda dimuat ke
PhysicsEditor di folder aset Anda juga, karena kita perlu memuat kedua file ini
ke dalam permainan.
4.1.30 Memuat Sprite ke Phaser.
Ok, sekarang saatnya untuk melompat ke Phaser! Apa yang akan
kita lakukan pertama adalah memuat sprite dan berkas JSON kita buat ke Phaser.
Tambahkan kode berikut untuk Anda preload metode di
preload.js:
preload:
function(){ this.game.load.image("betty",
"assets/betty.png");
this.game.load.physics("sprite_physics",
"assets/sprite_physics.json"); },
Pastikan ketika Anda memuat sprite memiliki nama yang sama
seperti dalam PhysicsEditor (yang seharusnya hanya menjadi nama file).
4.1.31 Memuat Negara Main .
Jika Anda menggunakan template yang saya berikan sebelumnya,
penting untuk mengubah kode berikut di preload.js:
create: function() { this.game.state.start("GameTitle");
}
untuk
create: function() {
this.game.state.start("Main"); }
Karena Anda tidak menciptakan layar judul, Anda ingin
permainan untuk meluncurkan tepat ke negara utama. Jika Anda tidak membuat
perubahan ini, maka Anda hanya akan melihat layar kosong.
4.1.32 Mengatur P2 Fisika dan Properti Awal.
Sebelum Anda melompat ke dalam hal-hal menyenangkan, Anda
perlu menyiapkan beberapa hal dasar pertama seperti yang memungkinkan sistem P2
Fisika dan beberapa properti lainnya. Tambahkan kode berikut untuk Anda create
metode di main.js:
create: function() { var me = this;
// Set the background colour to blue
me.game.stage.backgroundColor = '#ccddff';
// Start the P2 Physics Engine
me.game.physics.startSystem(Phaser.Physics.P2JS);
// Set the gravity
me.game.physics.p2.gravity.y = 1000;
// Create a random generator var seed = Date.now();
me.random = new Phaser.RandomDataGenerator([seed]); },
Pada kode di atas Anda mengatur warna permainan latar
belakang, memungkinkan mesin P2 Fisika, mengubah gravitasi standar
permainan.Kode juga menginisialisasi RandomDataGenerator untuk menghasilkan
angka acak kemudian dalam permainan. Nilai gravitasi 1000 cukup tinggi - tapi
itu baik untuk permainan ini karena akan lebih arcade gaya dan kurang realistis.
4.1.33 Buat Roof.
Pada langkah berikutnya, Anda akan membuat fungsi ayun tali
untuk pemain Anda, tapi sebelum Anda dapat melakukan itu, Anda perlu sesuatu
untuk tali untuk melampirkan. Jadi Anda akan menambahkan sprite atap yang
mengisi seluruh lebar dari permainan.
4.1.33.1 Buat Sprite Roof menggunakan Bitmap data.
Daripada menggunakan gambar untuk sprite, Anda akan
menggunakan BitmapData . Hal ini memungkinkan Anda untuk menggambar sprite
pemrograman daripada memasok gambar. Keuntungan dari ini adalah bahwa Anda
dapat membuat sprite menjadi bentuk atau ukuran apa pun yang Anda butuhkan
untuk tergantung pada lebar permainan.
Menambahkan fungsi berikut ke file main.js Anda:
createBlock: function() { var me = this;
// Define a block using bitmap data rather than an image
sprite
var blockShape = me.game.add.bitmapData(me.game.world.width,
200);
// Fill the block with black color blockShape.ctx.rect(0, 0,
me.game.world.width, 200);
blockShape.ctx.fillStyle = '000'; blockShape.ctx.fill();
// Create a new sprite using the bitmap data me.block =
me.game.add.sprite(0, 0, blockShape);
// Enable P2 Physics and set the block not to move
me.game.physics.p2.enable
(me.block); me.block.body.static = true;
me.block.anchor.setTo(0, 0); },
Kode di atas menciptakan BitmapData objek yang selebar
permainan dan tinggi 200 piksel. Ini kemudian menarik persegi panjang hitam
yang mengisi seluruh ruang yang. Setelah objek yang didefinisikan, Anda dapat
menggunakannya untuk menambahkan sprite untuk permainan kami daripada kunci
untuk sumber daya seperti Anda biasanya akan menggunakan.
Setelah Anda menambahkan sprite, Anda mengaktifkan P2 fisika
pada objek dan set ke static sehingga tidak bergerak (jika Betty kita miskin
akan mendapatkan hancur oleh atap).
Setelah fungsi yang didefinisikan, Anda harus menyebutnya
dari bagian bawah Anda create metode seperti ini:
me.createBlock();
permainan Anda sekarang harus terlihat seperti ini:
Jika Anda hanya melihat layar hitam, periksa konsol
javascript. Anda mungkin melihat sesuatu seperti ini:
Gagal sumber daya beban: URL yang diminta tidak ditemukan di
server ini. XMLHttpRequest tidak dapat memuat berkas:
///.../phaser-physics-editor-and-p2-physics/02-betty-dropping/assets/sprite_physics.json.
Permintaan asal lintas hanya didukung untuk HTTP. NETWORK_ERR: XMLHttpRequest
Exception 101: Terjadi kesalahan jaringan dalam permintaan sinkron.
Hal ini terjadi jika Anda mencoba untuk membuka file
index.html langsung di Safari atau Chrome. Browser melindungi komputer Anda
dari akses asynchronous ke sistem file Anda. Ini saat ini dilakukan di
pre-loader ketika mencoba untuk memuat data Editor fisika.
Untuk mendapatkan demo berjalan Anda memiliki 2 pilihan
sederhana
·
Gunakan Firefox - versi saat ini
memungkinkan loading data dari file: // url
·
Meng-upload data ke web server
Cara lain akan menghapus preloader. Load file json
menggunakan <script> dan menambahkan data langsung ke PhaserChache . Anda
dapat melakukannya dengan menggunakan addPhysicsData() . Lihat dokumentasi
Phaser Cache . Ini mungkin baik untuk demo - tetapi untuk preloading permainan
nyata dianjurkan.
4.1.34 Buat Rope Swinging Effect untuk player kami.
Sekarang Anda akan memanfaatkan sprite yang telah
ditambahkan ke permainan - memungkinkan dia untuk ayunan di sekitar dari atap.
Ini akan menggunakan pegas yang merupakan fitur keren yang tersedia di P2
fisika. Anda juga akan menarik garis menggunakan Bitmap data lagi untuk
mewakili mana musim semi adalah (Anda tidak dapat melihatnya secara default).
4.1.35 Tambahkan Player untuk Game.
Hal pertama yang pertama, Anda perlu menambahkan sprite Anda
ke layar. Mari kita melakukannya dengan menambahkan createPlayerfungsi untuk
file main.js:
createPlayer: function() { var me = this;
// Add the player to the game me.player = me.game.add.sprite(200,
400, 'betty');
// Enable physics, use "true" to enable debug
drawing me.game.physics.p2.enable([me.player], false);
// Get rid of current bounding box
me.player.body.clearShapes();
// Add our PhysicsEditor bounding shape
me.player.body.loadPolygon("sprite_physics", "betty"); },
Anda menambahkan sprite Anda seperti Anda biasanya akan dan
memungkinkan P2 fisika di atasnya. Dengan melewati di benar sebagai parameter
kedua Anda dapat mengaktifkan men-debug gambar bentuk. Bagian penting adalah
bahwa meskipun Anda mengosongkan kotak berlari yang ada dan kemudian beban di
custom didefinisikan daerah tabrakan kami menggunakan metode loadPolygon.
Sekali lagi, Anda sekarang harus memanggil fungsi dari
bagian bawah Anda create metode:
me.createplayer();
Memulai permainan - Anda sekarang akan melihat Betty
menjatuhkan ke lantai. Keadaan saat permainan yang tersedia di folder
02-betty-menjatuhkan. Sekarang Anda akan melihat berikut ini - klik untuk
mengaktifkan:
4.1.36 Buat Musim Semi Antara Player dan Roof.
Sekarang Anda akan membuat Spring antara Betty dan atap, dan
juga menarik garis untuk mewakili musim semi itu. Untuk melakukan itu, Anda
akan menambahkan berikut createRope fungsi untuk file main.js:
createRope: function() { var me = this;
// Add bitmap data to draw the rope
me.ropeBitmapData = game.add.bitmapData(me.game.world.width,
me.game.world.height);
me.ropeBitmapData.ctx.beginPath();
me.ropeBitmapData.ctx.lineWidth = "4";
me.ropeBitmapData.ctx.strokeStyle = "#ffffff";
me.ropeBitmapData.ctx.stroke();
// Create a new sprite using the bitmap data
me.line = game.add.sprite(0, 0, me.ropeBitmapData);
// Keep track of where the rope is anchored
me.ropeAnchorX = (me.block.world.x + 500);
me.ropeAnchorY = (me.block.world.y + me.block.height);
// Create a spring between the player and block to act as
the rope
me.rope = me.game.physics.p2.createSpring( me.block,
// sprite 1 me.player,
// sprite 2 300,
// length of the rope 10,
// stiffness 3,
// damping
[-(me.block.world.x + 500), -(me.block.world.y +
me.block.height)] );
// Draw a line from the player to the block to visually
represent the spring
me.line = new Phaser.Line(me.player.x, me.player.y,
(me.block.world.x + 500), (me.block.world.y + me.block.height));
},
Anda harus cukup akrab dengan sebagian besar dari apa yang
Anda lakukan di sini, satu-satunya hal yang benar-benar baru adalah beberapa
baris terakhir. Anda sedang menciptakan sebuah mata air menggunakan
createSpring metode, dan Anda melakukan ini dengan lewat di dua sprite yang
ingin Anda terhubung dengan pegas. Parameter lain memberi Anda kontrol atas
perilaku musim semi ini: restLength , stiffness , dan damping . Anda dapat
melakukan percobaan dengan nilai yang berbeda kemudian.
Setelah Anda telah disediakan parameter tersebut Anda juga
kemudian memasok koordinat dunia untuk mana ia harus menghubungkan kedua ujung
musim semi. parameter ini opsional tapi karena Anda ingin mengizinkan pemain
untuk berpindah-pindah tempat tali menempel Anda harus menentukan ini khusus.
Apa yang Anda lakukan untuk nilai-nilai ini adalah mendapatkan x dan y
koordinat atap dan kemudian menambahkan kepada mereka. Anda ingin tali untuk
mulai 500 piksel dari kiri sehingga Anda harus menambahkan 500 , dan Anda ingin
tali untuk memulai di bagian bawah blok vertikal sehingga menambah
me.block.height .
Hal yang aneh di sini adalah bahwa aku meniadakan
nilai-nilai ini, ini hanya karena perbedaan dalam cara P2 dan Phaser koordinat
menangani, untuk beberapa alasan P2 menggunakan nilai terbalik. The
createSpring Metode ini cukup satu kompleks, jadi jika Anda ingin Anda dapat
melihat dokumentasi lengkap di sini . Setelah kita membuat musim semi, kami
juga hanya menarik garis sepanjang koordinat yang sama sehingga kita bisa
melihat apa yang terjadi.Ingatlah untuk memanggil fungsi ini dari akhir membuat
metode Anda juga:
me.createRope();
Sekarang Anda akan melihat berikut ini - klik untuk
mengaktifkan: Betty menggantung di udara - tapi tidak ada tali!?!?!?
4.1.37 Update Baris Rope
Pemain akan terus bergerak, jadi untuk tali untuk
menampilkan dengan benar, Anda akan harus memperbaruinya. Untuk melakukan itu,
pertama membuat drawRope fungsi dalam main.js:
drawRope: function()
{
var me = this;
// Change the bitmap data to reflect the new rope position
me.ropeBitmapData.clear();
me.ropeBitmapData.ctx.beginPath();
me.ropeBitmapData.ctx.beginPath();
me.ropeBitmapData.ctx.moveTo(me.player.x, me.player.y);
me.ropeBitmapData.ctx.lineTo(me.ropeAnchorX,
me.ropeAnchorY);
me.ropeBitmapData.ctx.lineWidth = 4;
me.ropeBitmapData.ctx.stroke();
me.ropeBitmapData.ctx.closePath();
me.ropeBitmapData.render(); },
Ini akan mengetahui posisi pemain saat ini dan memperbarui
tali sesuai, dan titik anchor di atap juga akan berubah ketika me.ropeAnchorX
danme.ropeAnchorY nilai mengubah (yang kita akan menangani segera).
Daripada menelepon ini dari create metode, Anda harus
menyebutnya dari update metode:
update: function()
{
var me = this;
//Update the position of the rope
me.drawRope(); },
4.1.38 Memungkinkan Rope yang akan Dipindahkan.
Pada titik ini, efek tali akan bekerja cukup baik, tapi
sekarang Anda masih perlu untuk memungkinkan pemain untuk mengubah posisi
tali.Anda akan melakukan hal ini dengan memungkinkan pemain untuk klik mana
saja di atap sprite dan memindahkan posisi tali jangkar ke sana.
Pertama, Anda harus memodifikasi createBlock metode untuk
mencerminkan berikut:
createBlock: function()
{
var me = this;
// Define our block using bitmap data rather than an image
sprite
var blockShape = me.game.add.bitmapData(me.game.world.width,
200);
blockShape.ctx.rect(0, 0, me.game.world.width, 200);
blockShape.ctx.fillStyle = '000'; blockShape.ctx.fill();
// Create a new sprite using the bitmap data
me.block = me.game.add.sprite(0, 0, blockShape);
// Enable P2 Physics and set the block not to move
me.game.physics.p2.enable(me.block);
me.block.body.static = true; me.block.anchor.setTo(0, 0);
// Enable clicking on the block and trigger a function when
it is clicked
me.block.inputEnabled = true;
me.block.events.onInputDown.add(me.changeRope, this);
},
Sekarang Anda telah mengaktifkan masukan di atap sprite, dan
ketika kami mendeteksi bahwa pengguna telah mengklik suatu tempat di atasnya
kita sebut changeRope fungsi. Ini akan melewati kedua sprite diklik dan
koordinat di mana klik terjadi untuk fungsi ini. Jadi sekarang, Anda harus
membuat yang changeRope fungsi dengan menambahkan berikut ke main.js:
changeRope: function(sprite, pointer)
{
var me = this;
//Remove last spring
me.game.physics.p2.removeSpring(me.rope);
//Create new spring at pointer x and y
me.rope = me.game.physics.p2.createSpring(me.block,
me.player, 200, 10, 3, [-pointer.x, -pointer.y]);
me.ropeAnchorX = pointer.x; me.ropeAnchorY = pointer.y
},
Fungsi ini pertama menghilangkan musim semi Anda sudah telah
menambahkan, dan kemudian menciptakan yang baru menggunakan koordinat di mana
pengguna diklik. Anda juga memperbarui ropeAnchorX dan ropeAnchorY poin
sehingga drawRope fungsi tahu apa yang harus dilakukan. Fungsi tali ayun
sekarang harus lengkap, dan harus terlihat seperti pada gambar di bawah.
Keadaan saat proyek ini tersedia dalam 03-betty-menggantung Sekarang Anda akan
melihat berikut ini - klik untuk mengaktifkan:
4.1.39 Tambahkan lebih banyak benda tabrakan.
Sekarang Anda akan menambahkan beberapa sprite buah untuk melihat
bahwa bentuk tabrakan kami didefinisikan pada sprite kami dalam tindakan.
4.1.40 Menelusuri sprite baru.
Menambahkan objek baru berikut ke folder aset dan melacak
mereka menggunakan PhysicsEditor.
Gunakan nilai toleransi tertulis di bawah sprite:
Anda dapat menempatkan mereka semua dalam proyek
PhysicsEditor yang sama dan beralih di antara mereka menggunakan panel sebelah
kiri. Setelah menyiapkan sprite, tekan mempublikasikan untuk memperbarui aset /
sprite_physics.json
4.1.41 Memuat sprite baru
Preload.js Update:
preload: function()
{
this.game.load.image("betty",
"assets/betty.png");
this.game.load.image("pineapple",
"assets/pineapple.png");
this.game.load.image("banana",
"assets/banana.png");
this.game.load.image("cherries",
"assets/cherries.png");
this.game.load.physics("sprite_physics",
"assets/sprite_physics.json"); },
4.1.42 Buat Group untuk Objek.
Pertama membuat fungsi untuk membuat objek permainan baru.
Anda akan kembali menggunakan kode ini untuk objek lain.
Tambahkan fungsi ini untuk main.js:
createObjects: function(objectName)
{
var me = this;
// Create a group to hold the collision shapes
var objects = game.add.group();
objects.enableBody = true;
objects.physicsBodyType = Phaser.Physics.P2JS;
objects.createMultiple(40, objectName);
objects.forEach(function(child){ child.body.clearShapes();
child.body.loadPolygon('sprite_physics', objectName);
}, me);
return objects;
},
Ini menciptakan dan mengembalikan sekelompok sprite dan
menempel tubuh fisika untuk masing-masing. Tambahkan baris berikut untuk create
metode di main.js untuk membuat pisang:
// Create a bunch of bananas me.bananas =
me.createObjects("banana");
// This is required so that the groups will collide with the
world bounds me.game.physics.p2.updateBoundsCollisionGroup();
Satu-satunya hal yang luar biasa di sini adalah baris
terakhir di mana Anda menelepon updateBoundsCollisionGroup , ini penting untuk
menambah sehingga benda Anda menambahkan ke layar tidak hanya jatuh langsung
dari layar. Anda ingin mereka menumpuk di bagian bawah sehingga Anda dapat
lebih baik melihat efek area tabrakan adalah memiliki.
4.1.43 Buat Fungsi untuk Menelurkan Objects.
Menambahkan fungsi berikut ke file main.js:
spawnObject: function()
{ var me = this; //
Spawn a new banana on the left and give it a random velocity
var object = me.bananas.getFirstDead();
object.lifespan = 6000;
},
getFirstDead mengambil objek pertama dari kelompok yang saat
ini tidak di layar. Anda menetapkan lifespan 6 detik sehingga pisang secara
otomatis akan dihapus setelah waktu itu. Saat ini tidak ada cek jika permainan
habis pisang - jadi pastikan untuk tidak mengatur umur terlalu tinggi
. Tambahkan 2 lebih banyak fungsi untuk main.js:
spawnObjectLeft: function()
{ var me = this; //
Spawn new object var object = me.spawnObject();
// Set object's position and velocity
object.reset(1, 600);
object.body.velocity.x = me.random.integerInRange(100, 800);
object.body.velocity.y = -me.random.integerInRange(1000,
1500);
},
spawnObjectRight: function()
{ var me = this;
// Spawn new object var object = me.spawnObject();
// Set object's position and velocity
object.reset(me.game.world.width, 600);
object.body.velocity.x = -me.random.integerInRange(100,
800);
object.body.velocity.y = -me.random.integerInRange(1000, 1500);
},
Fungsi ini menelurkan sebuah objek baru dan reset posisi -
untuk ke kiri / kanan dari layar. Setelah itu kecepatan random bertujuan layar
diatur.
4.1.44 Panggil Fungsi Bibit.
Semua yang tersisa lakukan sekarang adalah memanggil
fungsi-fungsi bertelur tersebut, dan untuk itu kita akan membuat timer yang
memanggil mereka setiap 600ms.
Cukup tambahkan kode berikut ke bagian bawah Anda create
metode:
// Spawn bananas every 600ms me.timer =
game.time.events.loop(600, function() { me.spawnObjectRight();
me.spawnObjectLeft(); });
Setiap kode yang ada di dalam blok ini akan dijalankan
setiap 0,6 detik (yang berarti banyak pisang menyenangkan). Keadaan saat proyek
tersedia di dalam folder 04-menambahkan-benda. Sekarang Anda akan melihat
berikut ini - klik untuk mengaktifkan:
4.1.45 Buat Tabrakan.
kelompok tabrakan memungkinkan Anda untuk menentukan objek
yang bertabrakan dengan yang objek lain.
4.1.46 Membuat Tabrakan Grup.
Tambahkan kode berikut untuk create di mail.js, sebelum
membuat pemain dan blok:
// Create collision groups
me.playerCollisionGroup =
me.game.physics.p2.createCollisionGroup();
me.blockCollisionGroup =
me.game.physics.p2.createCollisionGroup();
me.bananasCollisionGroup =
me.game.physics.p2.createCollisionGroup();
me.cherriesCollisionGroup =
me.game.physics.p2.createCollisionGroup();
me.pineapplesCollisionGroup =
me.game.physics.p2.createCollisionGroup();
// Create the ceiling …
Anda akan menggunakan bananasCollisionGroup pertama, yang
lain akan digunakan kemudian.
Ada 2 fungsi untuk mengatur kelompok tabrakan dan tabrakan
pada objek: setCollisionGroup() menetapkan kelompok tabrakan tubuh milik
collides() mendefinisikan dengan yang tabrakan kelompok tubuh akan bertabrakan
Semuanya harus bekerja sekarang tapi kami masih perlu mengatur kelompok
tabrakan dengan benar, sehingga Anda harus memodifikasi semua fungsi ini di
main.js untuk mencerminkan berikut.
Membuat pemain berbenturan dengan semua benda tabrakan:
createPlayer: function()
{ …
// Define the players collision group and make it collide
with the block and fruits
me.player.body.setCollisionGroup(me.playerCollisionGroup);
me.player.body.collides([ me.blockCollisionGroup,
me.bananasCollisionGroup, me.cherriesCollisionGroup,
me.pineapplesCollisionGroup ]);
},
Membuat blok langit-langit bertabrakan dengan pemain
createBlock: function()
{ …
// Enable the blocks collisions
me.block.body.setCollisionGroup(me.blockCollisionGroup);
me.block.body.collides([me.playerCollisionGroup]);
},
Membuat pisang bertabrakan dengan pemain dan dengan pisang
lainnya
spawnObject: function()
{
… // Bananas collide with bananas and the player
object.body.setCollisionGroup(me.bananasCollisionGroup);
object.body.collides([me.bananasCollisionGroup,
me.playerCollisionGroup]);
return object; },
Sekarang Anda akan melihat berikut ini - klik untuk
mengaktifkan: Keadaan saat ini tersedia sebagai 05-tabrakan.
4.1.47 Menambahkan objek baru ke permainan
Pisang - ok - tapi bagaimana benda-benda lain? Mulailah
dengan membuat grup dari objek baru di create di main.js:
// Create a bunch of fruit me.bananas =
me.createObjects("banana");
me.pineapples = me.createObjects("pineapple");
me.cherries = me.createObjects("cherries");
Sekarang saatnya untuk bertelur jenis buah yang baru.
spawnObject: function() { var me = this;
// Create random object var objectToSpawn =
me.random.integerInRange(1,3);
if(objectToSpawn == 1){ var object =
me.bananas.getFirstDead();
object.body.setCollisionGroup(me.bananasCollisionGroup);
} else if (objectToSpawn == 2)
{ var object = me.pineapples.getFirstDead();
object.body.setCollisionGroup(me.pineapplesCollisionGroup);
} else { var object = me.cherries.getFirstDead();
object.body.setCollisionGroup(me.cherriesCollisionGroup);
} // set the lifespan object.lifespan = 6000;
// Fruits collide with fruit and the player
object.body.collides([ me.blockCollisionGroup, me.playerCollisionGroup,
me.bananasCollisionGroup,
me.cherriesCollisionGroup, me.pineapplesCollisionGroup ]);
return object; },
kode mengambil nomor acak dan menumbuhkan suatu objek sesuai
dengan nomor tersebut. Setiap objek diinisialisasi dengan kelompok tabrakan
nya. Anda bisa
memindahkan object.body.collides ke masing-masing if
pernyataan. Misalnya jika Anda ingin memiliki tabrakan antara pisang dan ceri
menghapus
me.cherriesCollisionGroup dari pisang dan
me.bananasCollisionGroup dari ceri. Memuat permainan dan melihat benda-benda
baru dalam tindakan.
Saat ini, semua benda berperilaku dengan cara yang sama.
Anda bisa menambahkan bahan ke objek untuk mengubah mental dan berat. Anda
mungkin akan terkejut
apa yang terjadi ketika Anda mengubah massa suatu benda: Itu
tidak mengubah jalur penerbangan dari objek! P2 fisika tidak menghitung
hambatan udara -
sehingga semua benda dipengaruhi oleh gravitasi yang sama.
Jika Anda ingin keberatan untuk memiliki jalan yang berbeda
Anda bisa mengatur skala gravitasi untuk setiap:
if(objectToSpawn == 1)
{ var object = me.bananas.getFirstDead();
object.body.setCollisionGroup(me.bananasCollisionGroup);
} else if (objectToSpawn == 2){ var object =
me.pineapples.getFirstDead();
object.body.setCollisionGroup(me.pineapplesCollisionGroup);
object.body.data.gravityScale = 1.5;
} else { var object = me.cherries.getFirstDead();
object.body.setCollisionGroup(me.cherriesCollisionGroup);
object.body.data.gravityScale = 0.5; }
Keadaan saat ini tersedia dalam folder 06-lebih-objek.
Sekarang Anda akan melihat berikut ini - klik untuk mengaktifkan:
4.1.47 Buat Mekanisme Scoring.
Akhirnya, Anda akan menambahkan mekanisme penilaian yang
sederhana ke permainan. Anda akan membuat counter yang akan menambahkan setiap
kali pemain terkena salah satu objek. Anda harus menambahkan handler tabrakan
yang akan kenaikan skor ketika pemain terkena, tetapi untuk melakukan itu Anda
harus terlebih dahulu mengaktifkan peristiwa dampak dengan menambahkan kode
berikut ke create metode:
// Enable collision callbacks
me.game.physics.p2.setImpactEvents(true);
Ini akan memungkinkan Anda untuk mendeteksi tabrakan, tetapi
juga operasi yang sangat mahal, sehingga tidak diaktifkan secara default.
Sebelum Anda dapat melacak mencetak pemain, Anda akan perlu
untuk membuat label skor pada layar. Menambahkan fungsi berikut untukmain.js:
createScore: function()
{ var me = this;
var scoreFont = "100px Arial";
me.scoreLabel = me.game.add.text((me.game.world.centerX),
100, "0", {font: scoreFont, fill: "#fff"});
me.scoreLabel.anchor.setTo(0.5, 0.5);
me.scoreLabel.align = 'center'; },
dan menyebutnya dari menciptakan metode Anda dengan
menambahkan: me.createScore();
Sekarang mari kita membuat fungsi baru di main.js untuk
kenaikan mencetak pengguna:
playerCollision: function()
{ var me = this;
if(!me.hitCooldown) { me.hitCooldown = true;
me.timesHit++; me.scoreLabel.text = me.timesHit;
me.game.time.events.add(1000, function()
{ me.hitCooldown = false; },
me); }
},
Fungsi ini dipicu setiap kali tabrakan terjadi, dan ketika
itu terjadi itu akan kenaikan skor dan memperbarui label skor. Satu-satunya
masalah adalah bahwa
meskipun tabrakan dapat dipicu beberapa kali jika bagian
yang berbeda dari sprite yang sama saling bertabrakan. Untuk menghindari hal
ini menambahkan
cooldown yang berlangsung 1 detik selama mana pemain kebal.
Fungsi ini juga menggunakan variabeltimesHit, yang Anda tambahkan ke metode
membuat dengan
menambahkan:
me.timesHit = 0;
Update metode bertabrakan dalam fungsi createPlayer untuk
memanggil fungsi baru ini setiap kali tabrakan terjadi:
me.player.body.collides([ me.bananasCollisionGroup,
me.cherriesCollisionGroup, me.pineapplesCollisionGroup ], me.playerCollision,
me);
Anda dapat membuat fungsi tabrakan berbeda untuk setiap
jenis tabrakan. Hal ini berguna untuk bermain suara yang berbeda, menambahkan
nilai yang berbeda dll
Permainan ini sekarang selesai dan akan terlihat seperti
ini: Keadaan saat ini tersedia dalam folder 07 gol. Sekarang Anda akan melihat
berikut ini - klik untuk
mengaktifkan:
4.1.48 Ringkasan.
"Permainan" yang kami buat di sini cukup gila,
tapi saya pikir itu menunjukkan konsep kedua fisika P2 dan bagaimana
menggunakan program PhysicsEditor untuk menentukan bentuk tabrakan akurat
benar-benar baik. Mungkin dari sini Anda bisa ...
• Menciptakan lebih banyak bentuk dan musuh dengan
PhysicsEditor
• Bermain-main lagi dengan sifat fisik dari sprite dan mata
air
• Membuat dunia permainan besar dan memungkinkan pemain
untuk ayunan sekitar seperti Spiderman
Tentu saja itu hal yang indah tentang permainan: kreativitas
Anda adalah batas dan dengan mesin P2 fisika dan PhysicsEditor, batas-batas
dapat didorong lebih jauh
Bab 5
Kesimpulan dan saran
5.1 kesimpulan
Arcade adalah sistem fisika real digunakan dengan Phaser dan
menyediakan sistem fisika dasar yang memungkinkan untuk tabrakan, percepatan,
kecepatan dan sebagainya. Jika Anda sudah menggunakan Phaser, maka kemungkinan
Anda akan terbiasa dengan sistem fisika Arcade. Phaser memiliki 3 sistem fisika
yang tersedia salah satunya adalah arcade physich. Bila menggunakan sistem
Arcade Fisika, yang HitBox untuk sprite akan selalu menjadi Loncat persegi
panjang sederhana. dalam beberapa game Arcade Physic biasanya adalah game yang
membutuhkan dasar- dasar fisika dalam proses pembuatannya. dalam hal ini,
kalian dapat menggunakan
Arcade Physich dalam pembuatan game yang memerlukan skill
seperti pada skill diatas.Meskipun telah banyak hasil yang lebih memuaskan
dibandingkan dengan menggunakan arcade physic tetapi perkembangannya arcade
physic masih sangat diminati para pembuat industri game untuk membuat game
lebih hidup atau lebih baik dari segi tampilan dan hasilnya. selain itu dalam
menggunakan arcade physich dalam pembuatan suatu game kita dapat berkreasi
dengan apa yang kita inginkan menggunakan javascript sederhana yang tersedia di
dalam platform platform open source pada internet. untuk menggunakan Arcade
Physic inipun cukup mudah. kita dapat mengaplikasikannya dengan software phaser
yang telah dibahas sebelumnya.
Phaser adalah open source kerangka kerja HTML5 permainan
cepat, gratis dan menyenangkan. Ini menggunakan membangun kebiasaan Pixi.js
untuk WebGL dan Canvas rendering di desktop dan browser web mobile. Permainan dapat
dikompilasi untuk iOS, Android dan aplikasi desktop melalui alat pihak ke-3
seperti Cocoon, Cordova dan Electron.Seiring dengan komunitas open source yang
fantastis Phaser secara aktif dikembangkan dan dikelola oleh Photon Badai
Terbatas .
Sebagai hasil dari dukungan yang cepat dan pengembang ramah
API Phaser saat ini salah satu yang paling membintangi kerangka permainan di
GitHub.Ribuan pengembang di seluruh dunia menggunakannya. Dari indies dan
lembaga digital multi-nasional untuk sekolah-sekolah dan universitas. Setiap
menciptakan permainan yang luar biasa mereka sendiri.Kerangka Phaser
menyediakan Anda dengan satu set alat yang akan mempercepat pembangunan dan
membantu menangani tugas-tugas generik yang dibutuhkan untuk menyelesaikan
permainan, sehingga Anda dapat fokus pada ide permainan itu sendiri.
Beberapa software resmi memiliki Panduan Memulai yang
mencakup semua yang Anda butuhkan untuk mulai mengembangkan permainan dengan
Phaser. Dari menyiapkan web server, untuk memilih sebuah IDE dan coding game
pertama Anda. Silakan mulai di sini tidak peduli apa dev game-pengalaman Anda,
sebelum menyelam ke API.
Single sumber daya Phaser terbesar adalah situs web Phaser .
Memiliki ratusan tutorial terdaftar dan yang segar ditambahkan setiap minggu.
Terus datang kembali untuk melihat apa yang baru!Menggunakan Phaser dengan
naskah? Periksa seri besar ini Permainan Dari Scratch tutorial.
Game tidak hanya sebagai sarana hiburan semata, kita sebagai
pembuat dapat membuat game edukasi yang dapat meningkatkan saraf otak anak atau
pun motorik anak dan membantu anak dalam menyelesaikan dan bertanggung jawab
dalam game yang sedang ia mainkan. unsur unsur dalam pembuatan game tersebut
tidaklah boleh tertinggal agar suatu game dapat bermanfaat tidak hanya sekedar
hiburan dan menghilangkan kepenatan.
5.2 Saran
Dalam pembuatan buku penulis menyadari masih mempunyai
kekurangan dalam hal materi tentang physic editor, penulisan yang kurang baik,
dan makalah ini dapat terus ditambahkan contoh-contoh pembuatan game menggunakan
Arcade pHysic dan tidak hanya memakai satu software untuk menjalankannya.
penulis berharap buku ini dapat bermanfaat untuk orang sekitar dan informasi
yang disampaikan sampai kepada pembaca.
