firhans jan: 2016

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.

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:

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 =

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.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 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 .

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.

firhans jan

Kamis, 15 Desember 2016

Tugas 3

Selasa, 08 November 2016

Makalah Softskill (Profil Perusahaan)

Senin, 10 Oktober 2016

Profile : PT. IDEA Vision Solusindo

Senin, 11 Juli 2016

Arcade Physic

Arcade Physic

Tugas 2: contoh cloud computing dan cara kerja.

Universitas Gunadarma

Laporkan Penyalahgunaan