Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-26 22:52:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

Added Game core loop stepping support. Super-useful for debugging, and helped me track down the issue with jittery physics collision. Double-win!

Browse source
This commit is contained in:
photonstorm 2014-01-29 17:10:13 +00:00
parent d51a37211c
commit 651858372c
25 changed files with 1268 additions and 438 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
README.md
View file

@ -175,6 +175,9 @@ Updates:
* Body.bottom and Body.right are no longer rounded, so will give accurate sub-pixel values.
* Fixed lots of documentation in the Emitter class.
* The delta timer value used for physics calculations has had its cap limit modified from 1.0 to 0.05 in line with the core updates.
* Phaser.Math.min enhanced so you can now pass in either an array of numbers or lots of numbers as parameters to get the lowest.
* Phaser.Math.max added as the opposite of Math.min.
* Phaser.Math.minProperty and maxProperty added. Like Math.min/max but can be given a property an an array or list of objects to inspect.
Bug Fixes:

22
examples/camera/world sprite.js
View file

@ -1,5 +1,5 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update,render : render });
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
@ -9,7 +9,7 @@ function preload() {
}
var card;
var Keys = Phaser.Keyboard;
var cursors;
function create() {
@ -19,27 +19,28 @@ function create() {
card = game.add.sprite(200, 200, 'card');
card.body.velocity.x = 50;
card.scale.setTo(2, 2);
game.camera.follow(card);
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
if (game.input.keyboard.isDown(Keys.LEFT))
if (cursors.left.isDown)
{
card.x -= 4;
}
else if (game.input.keyboard.isDown(Keys.RIGHT))
else if (cursors.right.isDown)
{
card.x += 4;
}
if (game.input.keyboard.isDown(Keys.UP))
if (cursors.up.isDown)
{
card.y -= 4;
}
else if (game.input.keyboard.isDown(Keys.DOWN))
else if (cursors.down.isDown)
{
card.y += 4;
}
@ -48,7 +49,8 @@ function update() {
function render() {
game.debug.renderCameraInfo(game.camera, 32, 32);
game.debug.renderSpriteInfo(card, 32, 200);
game.debug.renderCameraInfo(game.camera, 500, 32);
game.debug.renderSpriteCoords(card, 32, 32);
// game.debug.renderPhysicsBody(card.body);
}

306
examples/wip/create map polygon.js
View file

@ -3,172 +3,232 @@ var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload:
function preload() {
game.load.tilemap('map', 'assets/tilemaps/maps/platform.json', null, Phaser.Tilemap.TILED_JSON);
game.load.image('platformer_tiles', 'assets/tilemaps/tiles/platformer_tiles.png');
game.load.spritesheet('gameboy', 'assets/sprites/gameboy_seize_color_40x60.png', 40, 60);
game.load.spritesheet('balls', 'assets/sprites/balls.png', 17, 17);
// game.load.tilemap('map', 'assets/tilemaps/maps/platform.json', null, Phaser.Tilemap.TILED_JSON);
// game.load.image('platformer_tiles', 'assets/tilemaps/tiles/platformer_tiles.png');
game.load.tilemap('map', 'assets/tilemaps/maps/features_test.json', null, Phaser.Tilemap.TILED_JSON);
game.load.image('ground_1x1', 'assets/tilemaps/tiles/ground_1x1.png');
game.load.image('walls_1x2', 'assets/tilemaps/tiles/walls_1x2.png');
game.load.image('tiles2', 'assets/tilemaps/tiles/tiles2.png');
}
var map;
var layer;
var sprite;
var sprite2;
var balls;
var mapLayer;
var polys = [];
var tiles = [];
var idx = 0;
var group = [];
function create() {
game.stage.backgroundColor = '#124184';
map = game.add.tilemap('map');
map.addTilesetImage('platformer_tiles');
map.setCollisionBetween(21, 53);
layer = map.createLayer('Tile Layer 1');
// map = game.add.tilemap('map');
// map.addTilesetImage('platformer_tiles');
// map.setCollisionBetween(21, 53);
// layer = map.createLayer('Tile Layer 1');
// layer.debug = true;
// var mapLayer = map.layers[0];
map = game.add.tilemap('map');
map.addTilesetImage('ground_1x1');
map.addTilesetImage('walls_1x2');
map.addTilesetImage('tiles2');
map.setCollisionBetween(1, 12);
layer = map.createLayer('Tile Layer 1');
mapLayer = map.layers[0];
tiles = getInterestingTiles();
console.log('found',tiles.length,'interesting tiles');
// group = [];
// var tile = getFirstUnscanned();
// console.log('starting from', tile);
// floodFill(tile);
// console.log('group collected, size', group.length);
// now scan the group
// scanEdges();
// var p = [];
// var direction = 'e';
// works great :)
while (getScannedLeft() > 0) {
// var x = 0;
// var y = 0;
// group = [];
// for (var y = 0, h = mapLayer.height; y < h; y++)
// {
// for (var x = 0, w = mapLayer.width; x < w; x++)
// {
// var tile = mapLayer.data[y][x];
var tile = getFirstUnscanned();
// if (tile)
// {
// if (tile.faceTop)
// tile.faceTop = false;
// tile.faceBottom = false;
// tile.faceLeft = false;
// tile.faceRight = false;
// }
// }
// }
console.log('starting from', tile);
// sprite = game.add.sprite(270, 100, 'gameboy', 0);
// sprite.name = 'red';
// sprite.body.collideWorldBounds = true;
// sprite.body.minBounceVelocity = 0.9;
// sprite.body.bounce.setTo(0.5, 0.9);
// sprite.body.friction = 0.5;
floodFill(tile);
console.log('group collected, size', group.length);
console.log('remaining: ', getScannedLeft());
}
}
function getFirstUnscanned() {
/*---------------------------------------------------------------------------
Returns an Object with the following properties:
intersects -Boolean indicating if an intersection exists.
start_inside -Boolean indicating if Point A is inside of the polygon.
end_inside -Boolean indicating if Point B is inside of the polygon.
intersections -Array of intersection Points along the polygon.
centroid -A Point indicating "center of mass" of the polygon.
"pArry" is an Array of Points.
----------------------------------------------------------------------------*/
function lineIntersectPoly(A : Point, B : Point, pArry:Array):Object {
var An:int=1;
var Bn:int=1;
var C:Point;
var D:Point;
var i:Point;
var cx:Number=0;
var cy:Number=0;
var result:Object = new Object();
var pa:Array=pArry.slice(); //Copy to prevent growing points when connecting ends.
pa.push(pa[0]); //Create line from last Point to beginning Point
result.intersects = false;
result.intersections=[];
result.start_inside=false;
result.end_inside=false;
var n:int=pa.length-1;
while(n > -1){
C=Point(pa[n]);
if(n > 0){
cx+=C.x;
cy+=C.y;
D=Point(pa[n-1])||Point(pa[0]);
i=lineIntersectLine(A,B,C,D);
if(i != null){
result.intersections.push(i);
}
if(lineIntersectLine(A,new Point(C.x+D.x,A.y),C,D) != null){
An++;
}
if(lineIntersectLine(B,new Point(C.x+D.x,B.y),C,D) != null){
Bn++;
}
for (var i = 0; i < tiles.length; i++)
{
if (!tiles[i].scanned)
{
return tiles[i];
}
n--;
}
if(An % 2 == 0){
result.start_inside=true;
}
if(Bn % 2 == 0){
result.end_inside=true;
}
result.centroid=new Point(cx/(pa.length-1),cy/(pa.length-1));
result.intersects = result.intersections.length > 0;
return result;
}
function getScannedLeft() {
var total = tiles.length;
for (var i = 0; i < tiles.length; i++)
{
if (tiles[i].scanned)
{
total--;
}
}
return total;
}
var current;
function scanEdges() {
var points = [];
var start = group[0];
// special case for when group.length = 1 should go here
}
function scanTop(origin) {
function launch() {
}
// sprite.body.velocity.x = -200;
// sprite.body.velocity.y = -200;
function floodFill(origin) {
sprite2.body.velocity.x = -200;
sprite2.body.velocity.y = -200;
if (origin.scanned === true)
{
return;
}
origin.scanned = true;
group.push(origin);
// console.log('ff origin', origin.x, origin.y);
var west = map.getTileLeft(0, origin.x, origin.y);
if (west && (west.faceTop || west.faceBottom || west.faceLeft || west.faceRight))
{
// console.log('west found', west);
floodFill(west);
}
var east = map.getTileRight(0, origin.x, origin.y);
if (east && (east.faceTop || east.faceBottom || east.faceLeft || east.faceRight))
{
// console.log('east found', east);
floodFill(east);
}
var north = map.getTileAbove(0, origin.x, origin.y);
if (north && (north.faceTop || north.faceBottom || north.faceLeft || north.faceRight))
{
// console.log('north found', north);
floodFill(north);
}
var south = map.getTileBelow(0, origin.x, origin.y);
if (south && (south.faceTop || south.faceBottom || south.faceLeft || south.faceRight))
{
// console.log('south found', south);
floodFill(south);
}
}
function getInterestingTiles() {
var tiles = [];
for (var y = 0, h = mapLayer.height; y < h; y++)
{
for (var x = 0, w = mapLayer.width; x < w; x++)
{
var tile = mapLayer.data[y][x];
if (tile && (tile.faceTop || tile.faceBottom || tile.faceLeft || tile.faceRight))
{
// reset the scanned status
tile.scanned = false;
tiles.push(tile);
}
}
}
return tiles;
}
function getTile() {
for (var y = 0, h = mapLayer.height; y < h; y++)
{
for (var x = 0, w = mapLayer.width; x < w; x++)
{
var tile = mapLayer.data[y][x];
if (tile && (tile.faceTop || tile.faceBottom || tile.faceLeft || tile.faceRight))
{
return tile;
}
}
}
}
function update() {
// game.physics.collide(balls, layer);
// game.physics.collide(sprite, layer);
// game.physics.collide(sprite2, layer);
// game.physics.collide(sprite, sprite2);
}
function render() {
// game.debug.renderBodyInfo(sprite2, 32, 32);
// game.debug.renderPhysicsBody(sprite2.body);
if (group)
{
game.context.fillStyle = 'rgba(255,0,0,0.7)';
// game.debug.renderText(sprite2.body.left, 32, 30);
// game.debug.renderText(sprite2.body.right, 32, 50);
// game.debug.renderText(sprite2.body.top, 32, 70);
// game.debug.renderText(sprite2.body.bottom, 32, 90);
// for (var i = 0; i < balls._container.length; i++)
// {
// }
// if (sprite)
// {
// // game.debug.renderBodyInfo(sprite, 20, 30);
// game.debug.renderBodyInfo(sprite2, 20, 230);
// }
for (var i = 0; i < group.length; i++)
{
game.context.fillRect(group[i].x * group[i].width, group[i].y * group[i].height, group[i].width, group[i].height);
}
}
}

3
examples/wip/index.php
View file

@ -77,6 +77,7 @@
<meta charset="UTF-8" />
<title>phaser</title>
<base href="../"></base>
<script src="_site/js/jquery-2.0.3.min.js" type="text/javascript"></script>
<?php
require('../../build/config.php');
@ -99,6 +100,8 @@
<div id="phaser-example"></div>
<input type="button" id="step" value="step" />
<h2>work in progress examples</h2>
<?php

163
examples/wip/line polygon.js Normal file
View file

@ -0,0 +1,163 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.spritesheet('balls', 'assets/sprites/balls.png', 17, 17);
}
var handle1;
var handle2;
var line;
var polygon;
function create() {
game.stage.backgroundColor = '#124184';
handle1 = game.add.sprite(100, 150, 'balls', 0);
handle1.inputEnabled = true;
handle1.input.enableDrag(true);
handle2 = game.add.sprite(400, 200, 'balls', 0);
handle2.inputEnabled = true;
handle2.input.enableDrag(true);
line = new Phaser.Line(handle1.x, handle1.y, handle2.x, handle2.y);
polygon = new SAT.Polygon(new SAT.Vector(300, 300), [new SAT.Vector(0, 50), new SAT.Vector(100, 50), new SAT.Vector(100, 0), new SAT.Vector(150, 0), new SAT.Vector(150, 150), new SAT.Vector(100, 150), new SAT.Vector(100, 100), new SAT.Vector(0, 100), new SAT.Vector(0, 50)]);
}
/*---------------------------------------------------------------------------
Returns an Object with the following properties:
intersects -Boolean indicating if an intersection exists.
start_inside -Boolean indicating if Point A is inside of the polygon.
end_inside -Boolean indicating if Point B is inside of the polygon.
intersections -Array of intersection Points along the polygon.
centroid -A Point indicating "center of mass" of the polygon.
"pArry" is an Array of Points.
----------------------------------------------------------------------------*/
function lineIntersectPoly(A, B, polygon) {
var An =1;
var Bn =1;
var C = {x: 0, y: 0};
var D = {x: 0, y: 0};
var i = {x: 0, y: 0};
var cx=0;
var cy=0;
var result = {};
var pa = [];
for (var pi = 0; pi < polygon.points.length; pi++)
{
pa.push({ x: polygon.points[pi].x + polygon.pos.x, y: polygon.points[pi].y + polygon.pos.y })
}
pa.push(pa[0]); //Create line from last Point to beginning Point
result.intersects = false;
result.intersections=[];
result.start_inside=false;
result.end_inside=false;
var n = pa.length-1;
while(n > -1){
C.x = pa[n].x;
C.y = pa[n].y;
if(n > 0){
cx+=C.x;
cy+=C.y;
D.x = pa[n-1].x || pa[0].x;
D.y = pa[n-1].y || pa[0].y;
i=Phaser.Line.intersectsPoints(A,B,C,D);
if(i != null){
result.intersections.push(i);
}
if(Phaser.Line.intersectsPoints(A,new Phaser.Point(C.x+D.x,A.y),C,D) != null){
An++;
}
if(Phaser.Line.intersectsPoints(B,new Phaser.Point(C.x+D.x,B.y),C,D) != null){
Bn++;
}
}
n--;
}
if(An % 2 == 0){
result.start_inside=true;
}
if(Bn % 2 == 0){
result.end_inside=true;
}
result.centroid=new Phaser.Point(cx/(pa.length-1),cy/(pa.length-1));
result.intersects = result.intersections.length > 0;
return result;
}
var c = 'rgb(255,255,255)';
var p = new Phaser.Point();
var result = {};
function update() {
line.fromSprite(handle1, handle2, true);
result = lineIntersectPoly(line.start, line.end, polygon);
handle1.frame = 0;
handle2.frame = 0;
if (result.intersects)
{
c = 'rgb(0,255,0)';
if (result.start_inside)
{
handle1.frame = 1;
}
if (result.end_inside)
{
handle2.frame = 1;
}
}
else
{
c = 'rgb(255,255,255)';
}
}
function render() {
game.debug.renderLine(line, c);
game.debug.renderLineInfo(line, 32, 32);
game.debug.renderPolygon(polygon);
if (result.intersects)
{
game.debug.renderText(result.intersects, 32, 100);
game.context.fillStyle = 'rgb(255,0,255)';
for (var i = 0; i < result.intersections.length; i++)
{
game.context.fillRect(result.intersections[i].x - 2, result.intersections[i].y - 2, 5, 5);
}
}
}

3
examples/wip/platform.js
View file

@ -15,6 +15,7 @@ var layer;
var sprite;
var sprite2;
var balls;
var cursors;
function create() {
@ -30,7 +31,7 @@ function create() {
layer.debug = true;
game.physics.gravity.y = 150;
// game.physics.gravity.y = 150;
/*
balls = game.add.group();

177
examples/wip/rabbit map.js Normal file
View file

@ -0,0 +1,177 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.tilemap('map', 'assets/tilemaps/maps/features_test.json', null, Phaser.Tilemap.TILED_JSON);
game.load.image('ground_1x1', 'assets/tilemaps/tiles/ground_1x1.png');
game.load.image('walls_1x2', 'assets/tilemaps/tiles/walls_1x2.png');
game.load.image('tiles2', 'assets/tilemaps/tiles/tiles2.png');
game.load.image('phaser', 'assets/sprites/shinyball.png');
// game.load.image('phaser', 'assets/sprites/atari130xe.png');
// game.load.image('phaser', 'assets/sprites/mushroom2.png');
}
var cursors;
var map;
var coins;
var layer;
var layer2;
var layer3;
var sprite;
function create() {
$('#step').click(function(){
game.step();
});
map = game.add.tilemap('map');
map.addTilesetImage('ground_1x1');
map.addTilesetImage('walls_1x2');
map.addTilesetImage('tiles2');
map.setCollisionBetween(1, 12);
layer = map.createLayer('Tile Layer 1');
// layer.debug = true;
layer.resizeWorld();
sprite = game.add.sprite(170, 450, 'phaser');
sprite.debug = true;
sprite.body.velocity.x = 200;
// sprite.anchor.setTo(0.5, 0.5);
// We'll set a lower max angular velocity here to keep it from going totally nuts
// sprite.body.maxAngular = 500;
// Apply a drag otherwise the sprite will just spin and never slow down
// sprite.body.angularDrag = 50;
// sprite.body.bounce.x = 0.8;
// sprite.body.bounce.y = 0.8;
// sprite.angle = 35;
game.camera.follow(sprite);
// game.input.onDown.add(getIt, this);
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
/*
if (cursors.left.isDown)
{
game.camera.x -= 1;
}
else if (cursors.right.isDown)
{
game.camera.x += 1;
}
if (cursors.up.isDown)
{
layer.scrollY -= 4;
}
else if (cursors.down.isDown)
{
layer.scrollY += 4;
}
*/
game.physics.collide(sprite, layer);
// sprite.body.velocity.x = 0;
// sprite.body.velocity.y = 0;
// sprite.body.angularVelocity = 0;
// sprite.body.acceleration.x = 0;
// sprite.body.angularAcceleration = 0;
/*
if (cursors.left.isDown)
{
// sprite.body.acceleration.x = -200;
sprite.body.angularVelocity = -300;
// sprite.body.angularAcceleration -= 200;
}
else if (cursors.right.isDown)
{
// sprite.body.acceleration.x = 200;
sprite.body.angularVelocity = 300;
// sprite.body.angularAcceleration += 200;
}
if (cursors.up.isDown)
{
game.physics.velocityFromAngle(sprite.angle, 300, sprite.body.velocity);
}
else
{
// game.physics.velocityFromAngle(sprite.angle, sprite.body.velocity, sprite.body.velocity);
}
*/
/*
sprite.body.velocity.x = 0;
sprite.body.velocity.y = 0;
sprite.angle = sprite.angle + 1;
*/
if (cursors.up.isDown)
{
sprite.body.velocity.y = -100;
}
else if (cursors.down.isDown)
{
sprite.body.velocity.y = 100;
}
if (cursors.left.isDown)
{
sprite.body.velocity.x = -100;
}
else if (cursors.right.isDown)
{
sprite.body.velocity.x = 100;
}
}
function render() {
// game.debug.renderSpriteBody(sprite);
// game.debug.renderSpriteBounds(sprite);
game.debug.renderPhysicsBody(sprite.body);
game.debug.renderBodyInfo(sprite, 32, 32);
// game.debug.renderText(sprite.deltaX, 32, 32);
// game.debug.renderText(sprite.deltaY, 32, 48);
// game.debug.renderText(sprite.body.deltaX(), 232, 32);
// game.debug.renderText(sprite.body.deltaY(), 232, 48);
// game.debug.renderText(sprite.body.left, 32, 32);
// game.debug.renderText(sprite.body.top, 32, 48);
// game.debug.renderSpriteCoords(sprite, 32, 320);
}

83
examples/wip/rect test.js Normal file
View file

@ -0,0 +1,83 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
}
var body;
var tile;
function create() {
body = { left: 386, top: 89, right: 412, bottom: 127 };
tile = { x: 416, y: 96, right: 448, bottom: 128 };
game.input.keyboard.addKeyCapture([Phaser.Keyboard.LEFT, Phaser.Keyboard.RIGHT, Phaser.Keyboard.UP, Phaser.Keyboard.DOWN]);
}
function tileIntersects (body, tile) {
if (body.width <= 0 || body.height <= 0 || tile.width <= 0 || tile.height <= 0)
{
// return false;
}
var test1 = body.right < tile.x;
var test2 = body.bottom < tile.y;
var test3 = body.left > tile.right;
var test4 = body.top > tile.bottom;
result = !(body.right < tile.x || body.bottom < tile.y || body.left > tile.right || body.top > tile.bottom);
// game.debug.renderText('intersects: ' + result, 32, 32);
// game.debug.renderText('test 1: ' + test1, 320, 60);
// game.debug.renderText('test 2: ' + test2, 320, 80);
// game.debug.renderText('test 3: ' + test3, 320, 100);
// game.debug.renderText('test 4: ' + test4, 320, 120);
return result;
}
function update() {
if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
{
body.left -= 1;
body.right -= 1;
}
if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
{
body.left += 1;
body.right += 1;
}
if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
{
body.top -= 1;
body.bottom -= 1;
}
if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN))
{
body.top += 1;
body.bottom += 1;
}
}
function render() {
var r = tileIntersects(body, tile);
game.context.fillStyle = 'rgb(255,0,0)';
game.context.fillRect(body.left, body.top, body.right-body.left,body.bottom-body.top);
game.context.fillStyle = 'rgb(0,255,0)';
game.context.fillRect(tile.x, tile.y, tile.right-tile.x,tile.bottom-tile.y);
}

85
examples/wip/sprite vs sprite.js
View file

@ -1,60 +1,95 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });
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');
game.load.image('backdrop', 'assets/pics/remember-me.jpg');
}
var sprite1;
var sprite2;
var cursors;
function create() {
game.world.setBounds(0, 0, 1920, 1200);
game.add.sprite(0, 0, 'backdrop');
game.stage.backgroundColor = '#2d2d2d';
// This will check Sprite vs. Sprite collision
sprite1 = game.add.sprite(50, 250, 'atari');
sprite1.name = 'atari';
sprite1.body.immovable = true;
sprite1.body.immovable = true;
sprite2 = game.add.sprite(0, 0, 'mushroom');
sprite2 = game.add.sprite(32, 32, 'mushroom');
sprite2.name = 'mushroom';
sprite2.body.setCircle(32);
game.camera.follow(sprite1);
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
sprite1.body.x = game.input.x; //uncoment for tests
if (sprite2.y > 400)
game.physics.collide(sprite1, sprite2);
if (cursors.left.isDown)
{
sprite2.x = 0;
sprite2.y = 0;
sprite1.body.x -= 4;
}
else if (cursors.right.isDown)
{
sprite1.body.x += 4;
}
if (cursors.up.isDown)
{
sprite1.body.y -= 4;
}
else if (cursors.down.isDown)
{
sprite1.body.y += 4;
}
/*
sprite1.x = game.input.x;
if (game.input.y > 300)
{
sprite1.y = game.input.y;
}
else
{
sprite1.y = 300;
}
if (sprite2.y > 600)
{
sprite2.body.x = 0;
sprite2.body.y = 0;
}
*/
sprite2.body.velocity.x = 100;
sprite2.body.velocity.y = 50;
// object1, object2, collideCallback, processCallback, callbackContext
game.physics.collide(sprite1, sprite2, collisionHandler, null, this);
}
function collisionHandler (obj1, obj2) {
game.stage.backgroundColor = '#992d2d';
console.log(obj1.name + ' collided with ' + obj2.name);
sprite2.body.velocity.x = 50;
sprite2.body.velocity.y = 100;
}
function render() {
game.debug.renderSpriteInfo(sprite1, 100, 400);
game.debug.renderSpriteBounds(sprite1);
game.debug.renderSpriteInfo(sprite2, 100, 100);
game.debug.renderSpriteBounds(sprite2);
game.debug.renderPhysicsBody(sprite1.body);
game.debug.renderPhysicsBody(sprite2.body);
}

43
examples/wip/tilemap.js
View file

@ -18,8 +18,8 @@ function preload() {
// game.load.tileset('tiles', 'assets/maps/ground_1x1.png', 32, 32);
// game.load.image('phaser', 'assets/sprites/phaser-ship.png');
// game.load.image('phaser', 'assets/sprites/mushroom2.png');
// game.load.image('phaser', 'assets/sprites/wabbit.png');
game.load.image('phaser', 'assets/sprites/arrow.png');
game.load.image('phaser', 'assets/sprites/wabbit.png');
// game.load.image('phaser', 'assets/sprites/arrow.png');
game.load.spritesheet('coin', 'assets/sprites/coin.png', 32, 32);
// game.load.image('phaser', 'assets/sprites/darkwing_crazy.png');
@ -60,7 +60,7 @@ function create() {
layer = map.createLayer('Tile Layer 1');
// layer.debug = true;
layer.debug = true;
layer.resizeWorld();
@ -73,13 +73,13 @@ function create() {
sprite = game.add.sprite(260, 100, 'phaser');
sprite.anchor.setTo(0.5, 0.5);
// sprite.anchor.setTo(0.5, 0.5);
// This adjusts the collision body size.
// 100x50 is the new width/height.
// 50, 25 is the X and Y offset of the newly sized box.
// In this case the box is 50px in and 25px down.
sprite.body.setSize(16, 16, 8, 8);
// sprite.body.setSize(16, 16, 8, 8);
// We'll set a lower max angular velocity here to keep it from going totally nuts
sprite.body.maxAngular = 500;
@ -97,9 +97,9 @@ function create() {
// sprite.angle = 35;
game.camera.follow(sprite);
// game.camera.follow(sprite);
game.input.onDown.add(getIt, this);
// game.input.onDown.add(getIt, this);
cursors = game.input.keyboard.createCursorKeys();
@ -143,6 +143,7 @@ function update() {
// sprite.body.acceleration.x = 0;
// sprite.body.angularAcceleration = 0;
/*
if (cursors.left.isDown)
{
// sprite.body.acceleration.x = -200;
@ -164,6 +165,7 @@ function update() {
{
// game.physics.velocityFromAngle(sprite.angle, sprite.body.velocity, sprite.body.velocity);
}
*/
@ -173,27 +175,25 @@ function update() {
sprite.body.velocity.y = 0;
sprite.angle = sprite.angle + 1;
*/
if (cursors.up.isDown)
{
sprite.body.velocity.y = -900;
sprite.body.velocity.y = -100;
}
else if (cursors.down.isDown)
{
sprite.body.velocity.y = 900;
sprite.body.velocity.y = 100;
}
if (cursors.left.isDown)
{
sprite.body.velocity.x = -900;
// sprite.scale.x = -1;
sprite.body.velocity.x = -100;
}
else if (cursors.right.isDown)
{
sprite.body.velocity.x = 900;
// sprite.scale.x = 1;
sprite.body.velocity.x = 100;
}
*/
}
@ -201,12 +201,17 @@ function update() {
function render() {
// game.debug.renderSpriteBody(sprite);
game.debug.renderSpriteBounds(sprite);
// game.debug.renderSpriteBounds(sprite);
game.debug.renderPhysicsBody(sprite.body);
// game.debug.renderText(sprite.x, 32, 32);
// game.debug.renderText(sprite.y, 32, 48);
// game.debug.renderText(sprite.deltaX, 32, 32);
// game.debug.renderText(sprite.deltaY, 32, 48);
// game.debug.renderText(sprite.body.deltaX(), 232, 32);
// game.debug.renderText(sprite.body.deltaY(), 232, 48);
// game.debug.renderText(layer.scrollX, 32, 32);
// game.debug.renderText(layer.scrollY, 32, 48);
// game.debug.renderText(sprite.body.left, 32, 32);
// game.debug.renderText(sprite.body.right, 32, 48);
game.debug.renderSpriteCoords(sprite, 32, 32);
}

3
examples/wip/world.js
View file

@ -17,6 +17,7 @@ function create() {
sprite = game.add.sprite(200, 250, 'gameboy', 4);
sprite.name = 'green';
sprite.body.collideWorldBounds = true;
// sprite.anchor.setTo(0.5, 0.5);
sprite.body.bounce.setTo(0.9, 0.9);
@ -33,6 +34,6 @@ function update() {
function render() {
game.debug.renderBodyInfo(sprite, 32, 32);
game.debug.renderPolygon(sprite.body.polygons);
game.debug.renderPhysicsBody(sprite.body);
}

4
examples/world/move around world.js
View file

@ -1,5 +1,5 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render : render });
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
@ -16,7 +16,7 @@ var d;
function create() {
// Modify the world and camera bounds
game.world.setBounds(-1000, -1000, 1000, 1000);
game.world.setBounds(-2000, -2000, 4000, 4000);
for (var i = 0; i < 100; i++)
{

12
src/core/Camera.js
View file

@ -207,28 +207,32 @@ Phaser.Camera.prototype = {
if (this.deadzone)
{
this._edge = this.target.bounds.x - this.deadzone.x;
// this._edge = this.target.bounds.x - this.deadzone.x;
this._edge = this.target.x - this.deadzone.x;
if (this.view.x > this._edge)
{
this.view.x = this._edge;
}
this._edge = this.target.bounds.right - this.deadzone.x - this.deadzone.width;
// this._edge = this.target.bounds.right - this.deadzone.x - this.deadzone.width;
this._edge = this.target.x + this.target.width - this.deadzone.x - this.deadzone.width;
if (this.view.x < this._edge)
{
this.view.x = this._edge;
}
this._edge = this.target.bounds.y - this.deadzone.y;
// this._edge = this.target.bounds.y - this.deadzone.y;
this._edge = this.target.y - this.deadzone.y;
if (this.view.y > this._edge)
{
this.view.y = this._edge;
}
this._edge = this.target.bounds.bottom - this.deadzone.y - this.deadzone.height;
// this._edge = this.target.bounds.bottom - this.deadzone.y - this.deadzone.height;
this._edge = this.target.y + this.target.height - this.deadzone.y - this.deadzone.height;
if (this.view.y < this._edge)
{

57
src/core/Game.js
View file

@ -283,6 +283,10 @@ Phaser.Game = function (width, height, renderer, parent, state, transparent, ant
window.addEventListener('load', this._onBoot, false);
}
this.pendingStep = false;
this.stepping = true;
this.stepCount = 0;
return this;
};
@ -580,20 +584,32 @@ Phaser.Game.prototype = {
}
else
{
this.plugins.preUpdate();
this.world.preUpdate();
if (!this.pendingStep)
{
if (this.stepping)
{
this.pendingStep = true;
}
this.stage.update();
this.input.update();
this.tweens.update();
this.sound.update();
this.state.update();
this.world.update();
this.particles.update();
this.plugins.update();
this.plugins.preUpdate();
console.log('world preUpdate');
this.world.preUpdate();
this.world.postUpdate();
this.plugins.postUpdate();
this.stage.update();
this.input.update();
this.tweens.update();
this.sound.update();
console.log('state update');
this.state.update();
console.log('world update');
this.world.update();
this.particles.update();
this.plugins.update();
console.log('world postUpdate');
this.world.postUpdate();
this.plugins.postUpdate();
}
if (this.renderType !== Phaser.HEADLESS)
{
@ -603,11 +619,26 @@ Phaser.Game.prototype = {
this.plugins.postRender();
}
}
},
enableStep: function () {
this.stepping = true;
this.pendingStep = false;
this.stepCount = 0;
},
step: function () {
this.pendingStep = false;
this.stepCount++;
console.log('--------- Game step', this.stepCount);
},
/**
* Nuke the entire game from orbit
*

17
src/core/World.js
View file

@ -156,22 +156,21 @@ Phaser.World.prototype.postUpdate = function () {
*/
Phaser.World.prototype.setBounds = function (x, y, width, height) {
if (width < this.game.width)
{
width = this.game.width;
}
if (width < this.game.width)
{
width = this.game.width;
}
if (height < this.game.height)
{
height = this.game.height;
}
if (height < this.game.height)
{
height = this.game.height;
}
this.bounds.setTo(x, y, width, height);
if (this.camera.bounds)
{
// The Camera can never be smaller than the game size
this.camera.bounds.setTo(x, y, width, height);
}

47
src/gameobjects/Sprite.js
View file

@ -373,6 +373,8 @@ Phaser.Sprite = function (game, x, y, key, frame) {
this.updateCache();
this.updateBounds();
this.debug = false;
/**
* @property {PIXI.Point} pivot - The pivot point of the displayObject that it rotates around.
*/
@ -392,6 +394,11 @@ Phaser.Sprite.prototype.constructor = Phaser.Sprite;
*/
Phaser.Sprite.prototype.preUpdate = function() {
if (this.debug)
{
console.log('Sprite preUpdate xy: ', this.x, this.y, 'wxy:', this.world.x, this.world.y);
}
if (!this.exists || (this.group && !this.group.exists))
{
this.renderOrderID = -1;
@ -617,9 +624,7 @@ Phaser.Sprite.prototype.updateBounds = function() {
* @memberof Phaser.Sprite
* @param {Phaser.Point} p - The Point object to store the results in.
* @param {number} x - x coordinate within the Sprite to translate.
* @param {number} y - x coordinate within the Sprite to translate.
* @param {number} sx - Scale factor to be applied.
* @param {number} sy - Scale factor to be applied.
* @param {number} y - y coordinate within the Sprite to translate.
* @return {Phaser.Point} The translated point.
*/
Phaser.Sprite.prototype.getLocalPosition = function(p, x, y) {
@ -638,8 +643,8 @@ Phaser.Sprite.prototype.getLocalPosition = function(p, x, y) {
* @method Phaser.Sprite#getLocalUnmodifiedPosition
* @memberof Phaser.Sprite
* @param {Phaser.Point} p - The Point object to store the results in.
* @param {number} x - x coordinate within the Sprite to translate.
* @param {number} y - x coordinate within the Sprite to translate.
* @param {number} gx - x coordinate within the Sprite to translate.
* @param {number} gy - y coordinate within the Sprite to translate.
* @return {Phaser.Point} The translated point.
*/
Phaser.Sprite.prototype.getLocalUnmodifiedPosition = function(p, gx, gy) {
@ -701,6 +706,12 @@ Phaser.Sprite.prototype.postUpdate = function() {
this.position.x = this._cache.x;
this.position.y = this._cache.y;
if (this.debug)
{
console.log('Sprite postUpdate xy: ', this.x, this.y, 'right:', this.right);
}
}
};
@ -1084,6 +1095,32 @@ Object.defineProperty(Phaser.Sprite.prototype, "inCamera", {
});
/**
* @name Phaser.Sprite#worldCenterX
* @property {number} worldCenterX - The center of the Sprite in world coordinates.
* @readonly
*/
Object.defineProperty(Phaser.Sprite.prototype, "worldCenterX", {
get: function () {
return this.game.camera.x + this.center.x;
}
});
/**
* @name Phaser.Sprite#worldCenterY
* @property {number} worldCenterY - The center of the Sprite in world coordinates.
* @readonly
*/
Object.defineProperty(Phaser.Sprite.prototype, "worldCenterY", {
get: function () {
return this.game.camera.y + this.center.y;
}
});
/**
* The width of the sprite in pixels, setting this will actually modify the scale to acheive the value desired.
* If you wish to crop the Sprite instead see the Sprite.crop value.

128
src/geom/Line.js
View file

@ -70,11 +70,9 @@ Phaser.Line.prototype = {
},
/**
* Checks for intersection between two lines.
* If asSegment is true it will check for segment intersection.
* If asSegment is false it will check for line intersection.
* Checks for intersection between this line and another Line.
* If asSegment is true it will check for segment intersection. If asSegment is false it will check for line intersection.
* Returns the intersection segment of AB and EF as a Point, or null if there is no intersection.
* Adapted from code by Keith Hair
*
* @method Phaser.Line#intersects
* @param {Phaser.Line} line - The line to check against this one.
@ -84,7 +82,7 @@ Phaser.Line.prototype = {
*/
intersects: function (line, asSegment, result) {
return Phaser.Line.intersects(this, line, asSegment, result);
return Phaser.Line.intersectsPoints(this.start, this.end, line.start, line.end, asSegment, result);
},
@ -173,6 +171,69 @@ Object.defineProperty(Phaser.Line.prototype, "perpSlope", {
});
/**
* Checks for intersection between two lines as defined by the given start and end points.
* If asSegment is true it will check for line segment intersection. If asSegment is false it will check for line intersection.
* Returns the intersection segment of AB and EF as a Point, or null if there is no intersection.
* Adapted from code by Keith Hair
*
* @method Phaser.Line.intersects
* @param {Phaser.Point} a - The start of the first Line to be checked.
* @param {Phaser.Point} b - The end of the first line to be checked.
* @param {Phaser.Point} e - The start of the second Line to be checked.
* @param {Phaser.Point} f - The end of the second line to be checked.
* @param {boolean} [asSegment=true] - If true it will check for segment intersection, otherwise full line intersection.
* @param {Phaser.Point} [result] - A Point object to store the result in, if not given a new one will be created.
* @return {Phaser.Point} The intersection segment of the two lines as a Point, or null if there is no intersection.
*/
Phaser.Line.intersectsPoints = function (a, b, e, f, asSegment, result) {
if (typeof asSegment === 'undefined') { asSegment = true; }
if (typeof result === 'undefined') { result = new Phaser.Point(); }
var a1 = b.y - a.y;
var a2 = f.y - e.y;
var b1 = a.x - b.x;
var b2 = e.x - f.x;
var c1 = (b.x * a.y) - (a.x * b.y);
var c2 = (f.x * e.y) - (e.x * f.y);
var denom = (a1 * b2) - (a2 * b1);
if (denom === 0)
{
return null;
}
result.x = ((b1 * c2) - (b2 * c1)) / denom;
result.y = ((a2 * c1) - (a1 * c2)) / denom;
if (asSegment)
{
if (Math.pow((result.x - b.x) + (result.y - b.y), 2) > Math.pow((a.x - b.x) + (a.y - b.y), 2))
{
return null;
}
if (Math.pow((result.x - a.x) + (result.y - a.y), 2) > Math.pow((a.x - b.x) + (a.y - b.y), 2))
{
return null;
}
if (Math.pow((result.x - f.x) + (result.y - f.y), 2) > Math.pow((e.x - f.x) + (e.y - f.y), 2))
{
return null;
}
if (Math.pow((result.x - e.x) + (result.y - e.y), 2) > Math.pow((e.x - f.x) + (e.y - f.y), 2))
{
return null;
}
}
return result;
};
/**
* Checks for intersection between two lines.
* If asSegment is true it will check for segment intersection.
@ -189,61 +250,6 @@ Object.defineProperty(Phaser.Line.prototype, "perpSlope", {
*/
Phaser.Line.intersects = function (a, b, asSegment, result) {
if (typeof asSegment === 'undefined') { asSegment = true; }
if (typeof result === 'undefined') { result = new Phaser.Point(); }
// var a1 = B.y - A.y;
// var a2 = F.y - E.y;
// var b1 = A.x - B.x;
// var b2 = E.x - F.x;
// var c1 = (B.x * A.y) - (A.x * B.y);
// var c2 = (F.x * E.y) - (E.x * F.y);
// var denom = (a1 * b2) - (a2 * b1);
// A = a.start
// B = a.end
// E = b.start
// F = b.end
var a1 = a.end.y - a.start.y;
var a2 = b.end.y - b.start.y;
var b1 = a.start.x - a.end.x;
var b2 = b.start.x - b.end.x;
var c1 = (a.end.x * a.start.y) - (a.start.x * a.end.y);
var c2 = (b.end.x * b.start.y) - (b.start.x * b.end.y);
var denom = (a1 * b2) - (a2 * b1);
if (denom === 0)
{
return null;
}
result.x = ((b1 * c2) - (b2 * c1)) / denom;
result.y = ((a2 * c1) - (a1 * c2)) / denom;
if (asSegment)
{
if (Math.pow((result.x - a.end.x) + (result.y - a.end.y), 2) > Math.pow((a.start.x - a.end.x) + (a.start.y - a.end.y), 2))
{
return null;
}
if (Math.pow((result.x - a.start.x) + (result.y - a.start.y), 2) > Math.pow((a.start.x - a.end.x) + (a.start.y - a.end.y), 2))
{
return null;
}
if (Math.pow((result.x - b.end.x) + (result.y - b.end.y), 2) > Math.pow((b.start.x - b.end.x) + (b.start.y - b.end.y), 2))
{
return null;
}
if (Math.pow((result.x - b.start.x) + (result.y - b.start.y), 2) > Math.pow((b.start.x - b.end.x) + (b.start.y - b.end.y), 2))
{
return null;
}
}
return result;
return Phaser.Line.intersectsPoints(a.start, a.end, b.start, b.end, asSegment, result);
};

106
src/math/Math.js
View file

@ -660,7 +660,7 @@ Phaser.Math = {
},
/**
* Significantly faster version of Math.min
* Updated version of Math.min that can be passed either an array of numbers or the numbers as parameters.
* See http://jsperf.com/math-s-min-max-vs-homemade/5
*
* @method Phaser.Math#min
@ -668,15 +668,113 @@ Phaser.Math = {
*/
min: function () {
for (var i =1 , min = 0, len = arguments.length; i < len; i++)
if (arguments.length === 1 && typeof arguments[0] === 'object')
{
if (arguments[i] < arguments[min])
var data = arguments[0];
}
else
{
var data = arguments;
}
for (var i = 1, min = 0, len = data.length; i < len; i++)
{
if (data[i] < data[min])
{
min = i;
}
}
return arguments[min];
return data[min];
},
/**
* Updated version of Math.max that can be passed either an array of numbers or the numbers as parameters.
*
* @method Phaser.Math#max
* @return {number} The largest value from those given.
*/
max: function () {
if (arguments.length === 1 && typeof arguments[0] === 'object')
{
var data = arguments[0];
}
else
{
var data = arguments;
}
for (var i = 1, max = 0, len = data.length; i < len; i++)
{
if (data[i] > data[max])
{
max = i;
}
}
return data[max];
},
/**
* Updated version of Math.min that can be passed a property and either an array of objects or the objects as parameters.
* It will find the lowest matching property value from the given objects.
*
* @method Phaser.Math#minProperty
* @return {number} The lowest value from those given.
*/
minProperty: function (property) {
if (arguments.length === 2 && typeof arguments[1] === 'object')
{
var data = arguments[1];
}
else
{
var data = arguments.slice(1);
}
for (var i = 1, min = 0, len = data.length; i < len; i++)
{
if (data[i][property] < data[min][property])
{
min = i;
}
}
return data[min][property];
},
/**
* Updated version of Math.max that can be passed a property and either an array of objects or the objects as parameters.
* It will find the largest matching property value from the given objects.
*
* @method Phaser.Math#maxProperty
* @return {number} The largest value from those given.
*/
maxProperty: function (property) {
if (arguments.length === 2 && typeof arguments[1] === 'object')
{
var data = arguments[1];
}
else
{
var data = arguments.slice(1);
}
for (var i = 1, max = 0, len = data.length; i < len; i++)
{
if (data[i][property] > data[max][property])
{
max = i;
}
}
return data[max][property];
},

135
src/physics/arcade/ArcadePhysics.js
View file

@ -706,6 +706,9 @@ Phaser.Physics.Arcade.prototype = {
*/
collideSpriteVsTilemapLayer: function (sprite, tilemapLayer, collideCallback, processCallback, callbackContext) {
console.log('collideSpriteVsTilemapLayer x:', sprite.x, 'y:', sprite.y, 'body left:', sprite.body.left, 'right:', sprite.body.right);
this._mapData = tilemapLayer.getTiles(sprite.body.left, sprite.body.top, sprite.body.width, sprite.body.height, true);
if (this._mapData.length === 0)
@ -839,6 +842,37 @@ Phaser.Physics.Arcade.prototype = {
},
/**
* Performs a rect intersection test against the two objects.
* Objects must expose properties: width, height, left, right, top, bottom.
* @method Phaser.Physics.Arcade#intersects
* @param {object} body - The Body to test.
* @param {object} tile - The Tile to test.
* @returns {boolean} Returns true if the objects intersect, otherwise false.
*/
tileIntersects: function (body, tile) {
if (body.width <= 0 || body.height <= 0 || tile.width <= 0 || tile.height <= 0)
{
return false;
}
// console.log('body: ', body.left, body.top, body.right, body.bottom);
// console.log('tile: ', tile.x, tile.y, tile.right, tile.bottom);
// console.log('intersect #1', body.right < tile.x, body.right, tile.x);
// console.log('intersect #2', body.bottom < tile.y, body.bottom, tile.y);
// console.log('intersect #3', body.left > tile.right, body.left, tile.right);
// console.log('intersect #4', body.top > tile.bottom, body.top, tile.bottom);
// return !(a.right < b.x || a.bottom < b.y || a.x > b.right || a.y > b.bottom);
result = !(body.right < tile.x || body.bottom < tile.y || body.left > tile.right || body.top > tile.bottom);
return result;
},
/**
* The core separation function to separate a physics body and an array of tiles.
* @method Phaser.Physics.Arcade#separateTiles
@ -860,12 +894,13 @@ Phaser.Physics.Arcade.prototype = {
var tile;
var localOverlapX = 0;
var localOverlapY = 0;
var process = false;
for (var i = 0; i < tiles.length; i++)
{
tile = tiles[i];
if (this.intersects(body, tile))
if (this.tileIntersects(body, tile))
{
// They overlap. Any custom callbacks?
if (tile.tile.callback || tile.layer.callbacks[tile.tile.index])
@ -883,55 +918,67 @@ Phaser.Physics.Arcade.prototype = {
}
}
if (body.deltaX() < 0 && body.checkCollision.left && tile.tile.faceRight)
if (body.deltaX() < 0 && body.checkCollision.left && tile.tile.faceRight && !body.blocked.left)
{
// LEFT
localOverlapX = body.left - tile.right;
console.log('STS left', localOverlapX, body.deltaX(), 'bt', body.left, tile.right);
if (localOverlapX >= body.deltaX())
{
body.blocked.left = true;
body.touching.left = true;
body.touching.none = false;
process = true;
}
}
else if (body.deltaX() > 0 && body.checkCollision.right && tile.tile.faceLeft)
else if (body.deltaX() > 0 && body.checkCollision.right && tile.tile.faceLeft && !body.blocked.right)
{
// RIGHT
localOverlapX = body.right - tile.x;
console.log('STS right', localOverlapX, body.deltaX(), 'bt', body.right, tile.x);
// Distance check
if (localOverlapX <= body.deltaX())
{
body.blocked.right = true;
body.touching.right = true;
body.touching.none = false;
process = true;
}
}
if (body.deltaY() < 0 && body.checkCollision.up && tile.tile.faceBottom)
if (body.deltaY() < 0 && body.checkCollision.up && tile.tile.faceBottom && !body.blocked.up)
{
// UP
localOverlapY = body.top - tile.bottom;
console.log('STS up', localOverlapY, body.deltaY(), 'bt', body.top, tile.bottom);
// Distance check
if (localOverlapY >= body.deltaY())
{
body.blocked.up = true;
body.touching.up = true;
body.touching.none = false;
process = true;
}
}
else if (body.deltaY() > 0 && body.checkCollision.down && tile.tile.faceTop)
else if (body.deltaY() > 0 && body.checkCollision.down && tile.tile.faceTop && !body.blocked.down)
{
// DOWN
localOverlapY = body.bottom - tile.y;
console.log('STS down', localOverlapY, body.deltaY(), 'bt', body.bottom, tile.y);
if (localOverlapY <= body.deltaY())
{
body.blocked.down = true;
body.touching.down = true;
body.touching.none = false;
process = true;
}
}
}
@ -947,7 +994,14 @@ Phaser.Physics.Arcade.prototype = {
body.overlapY = localOverlapY;
}
return this.processTileSeparation(body);
if (process)
{
return this.processTileSeparation(body);
}
else
{
return false;
}
},
@ -961,11 +1015,16 @@ Phaser.Physics.Arcade.prototype = {
separateTile: function (body, tile) {
// Can't separate two immovable objects (tiles are always immovable)
if (body.immovable || this.intersects(body, tile) === false)
if (body.immovable || this.tileIntersects(body, tile) === false)
{
console.log('fail');
console.log('body: ', body.left, body.top, body.right, body.bottom);
console.log('tile: ', tile.x, tile.y, tile.right, tile.bottom);
return false;
}
console.log('CHECK');
// They overlap. Any custom callbacks?
if (tile.tile.callback || tile.layer.callbacks[tile.tile.index])
{
@ -986,62 +1045,87 @@ Phaser.Physics.Arcade.prototype = {
body.overlapX = 0;
body.overlapY = 0;
// Remember - this happens AFTER the body has been moved by the motion update, so it needs moving back again
if (body.deltaX() < 0 && body.checkCollision.left && tile.tile.faceRight)
var process = false;
if (body.deltaX() < 0 && body.checkCollision.left && tile.tile.faceRight && !body.blocked.left)
{
// LEFT
body.overlapX = body.left - tile.right;
if (body.overlapX >= body.deltaX())
console.log('ST left', body.overlapX, body.deltaX(), 'bt', body.left, tile.right);
if (body.overlapX <= body.deltaX())
{
// use touching instead of blocked?
console.log('pass');
body.blocked.left = true;
body.touching.left = true;
body.touching.none = false;
process = true;
}
}
else if (body.deltaX() > 0 && body.checkCollision.right && tile.tile.faceLeft)
else if (body.deltaX() > 0 && body.checkCollision.right && tile.tile.faceLeft && !body.blocked.right)
{
// RIGHT
body.overlapX = body.right - tile.x;
console.log(tile);
console.log('ST right', body.overlapX, body.deltaX(), 'bt', body.right, tile.x);
// Distance check
if (body.overlapX <= body.deltaX())
if (body.overlapX >= body.deltaX())
{
console.log('pass');
body.blocked.right = true;
body.touching.right = true;
body.touching.none = false;
process = true;
}
}
if (body.deltaY() < 0 && body.checkCollision.up && tile.tile.faceBottom)
if (body.deltaY() < 0 && body.checkCollision.up && tile.tile.faceBottom && !body.blocked.up)
{
// UP
body.overlapY = body.top - tile.bottom;
console.log('ST up', body.overlapY, body.deltaY(), 'bt', body.top, tile.bottom);
// Distance check
if (body.overlapY >= body.deltaY())
{
console.log('pass');
body.blocked.up = true;
body.touching.up = true;
body.touching.none = false;
process = true;
}
}
else if (body.deltaY() > 0 && body.checkCollision.down && tile.tile.faceTop)
else if (body.deltaY() > 0 && body.checkCollision.down && tile.tile.faceTop && !body.blocked.down)
{
// DOWN
body.overlapY = body.bottom - tile.y;
console.log('ST down', body.overlapY, body.deltaY(), 'bt', body.bottom, tile.y);
if (body.overlapY <= body.deltaY())
{
console.log('pass');
body.blocked.down = true;
body.touching.down = true;
body.touching.none = false;
process = true;
}
}
// Separate in a single sweep
return this.processTileSeparation(body);
if (process)
{
return this.processTileSeparation(body);
}
else
{
return false;
}
},
@ -1057,13 +1141,26 @@ Phaser.Physics.Arcade.prototype = {
// Swap for a hit tile?
if (body.touching.none)
{
console.log('processTileSeparation QUIT');
return false;
}
body.x += body.overlapX;
body.y += body.overlapY;
console.log('pre processTileSeparation', body.x, body.y);
if (body.touching.left || body.touching.right || body.blocked.left || body.blocked.right)
{
body.x -= body.overlapX;
}
if (body.touching.up || body.touching.down || body.blocked.up || body.blocked.down)
{
body.y -= body.overlapY;
}
console.log('post processTileSeparation', body.x, body.y, body.right);
body.setBlockFlag(body.blocked.left, body.blocked.right, body.blocked.up, body.blocked.down, body.overlapX, body.overlapY);
// body.setBlockFlag(body.blocked.left, body.blocked.right, body.blocked.up, body.blocked.down, body.overlapX, body.overlapY);
// body.reboundCheck(true, true, true);
return true;

243
src/physics/arcade/Body.js
View file

@ -55,13 +55,13 @@ Phaser.Physics.Arcade.Body = function (sprite) {
* @property {number} preX - The previous x position of the physics body.
* @readonly
*/
this.preX = sprite.x;
this.preX = sprite.world.x;
/**
* @property {number} preY - The previous y position of the physics body.
* @readonly
*/
this.preY = sprite.y;
this.preY = sprite.world.y;
/**
* @property {number} preRotation - The previous rotation of the physics body.
@ -333,7 +333,7 @@ Phaser.Physics.Arcade.Body = function (sprite) {
this.overlapY = 0;
// Set-up the default shape
this.setRectangle(sprite.width, sprite.height, -sprite._cache.halfWidth, -sprite._cache.halfHeight);
this.setRectangle(sprite.width, sprite.height, 0, 0);
};
@ -350,11 +350,11 @@ Phaser.Physics.Arcade.Body.prototype = {
*/
setCircle: function (radius, offsetX, offsetY) {
if (typeof offsetX === 'undefined') { offsetX = 0; }
if (typeof offsetY === 'undefined') { offsetY = 0; }
if (typeof offsetX === 'undefined') { offsetX = this.sprite._cache.halfWidth; }
if (typeof offsetY === 'undefined') { offsetY = this.sprite._cache.halfHeight; }
this.type = Phaser.Physics.Arcade.CIRCLE;
this.shape = new SAT.Circle(new SAT.Vector(this.sprite.center.x, this.sprite.center.y), radius);
this.shape = new SAT.Circle(new SAT.Vector(this.sprite.x, this.sprite.y), radius);
this.polygon = null;
this.offset.setTo(offsetX, offsetY);
@ -379,7 +379,7 @@ Phaser.Physics.Arcade.Body.prototype = {
if (typeof translateY === 'undefined') { translateY = -this.sprite._cache.halfHeight; }
this.type = Phaser.Physics.Arcade.RECT;
this.shape = new SAT.Box(new SAT.Vector(this.sprite.center.x, this.sprite.center.y), width, height);
this.shape = new SAT.Box(new SAT.Vector(this.sprite.world.x, this.sprite.world.y), width, height);
this.polygon = this.shape.toPolygon();
this.polygon.translate(translateX, translateY);
@ -446,8 +446,11 @@ Phaser.Physics.Arcade.Body.prototype = {
this.preX = this.x;
this.preY = this.y;
this.x = this.sprite.center.x + this.offset.x;
this.y = this.sprite.center.y + this.offset.y;
// this.x = this.sprite.center.x + this.offset.x;
// this.y = this.sprite.center.y + this.offset.y;
this.x = this.sprite.world.x + this.offset.x;
this.y = this.sprite.world.y + this.offset.y;
if (this.allowRotation)
{
@ -462,26 +465,32 @@ Phaser.Physics.Arcade.Body.prototype = {
this.updateBounds();
// if (this.blocked.left && this.blockFlags[0] !== this.left)
// {
// this.blocked.left = false;
// }
if (this.sprite.debug)
{
console.log('Body postUpdate x:', this.x, 'y:', this.y, 'left:', this.left, 'right:', this.right);
}
// if (this.blocked.right && this.blockFlags[1] !== this.right)
// {
// this.blocked.right = false;
// }
// if (this.blocked.up && this.blockFlags[2] !== this.top)
// {
// this.blocked.up = false;
// }
if (this.blocked.left && this.blockFlags[0] !== this.left)
{
this.blocked.left = false;
}
// if (this.blocked.down && this.blockFlags[3] !== this.bottom)
// {
// console.log('reset down block flag', this.blockFlags[3], this.bottom);
// this.blocked.down = false;
// }
if (this.blocked.right && this.blockFlags[1] !== this.right)
{
this.blocked.right = false;
}
if (this.blocked.up && this.blockFlags[2] !== this.top)
{
this.blocked.up = false;
}
if (this.blocked.down && this.blockFlags[3] !== this.bottom)
{
// console.log('reset down block flag', this.blockFlags[3], this.bottom);
this.blocked.down = false;
}
this.blocked.left = false;
this.blocked.right = false;
@ -508,26 +517,32 @@ Phaser.Physics.Arcade.Body.prototype = {
setBlockFlag: function (left, right, up, down, x, y) {
this.updateBounds();
if (left)
{
this.blockFlags[0] = this.left + x;
this.blockFlags[0] = this.left;
// this.blockFlags[0] = this.left + x;
// console.log('left flag set to', this.blockFlags[0]);
}
else if (right)
{
this.blockFlags[1] = this.right + y;
this.blockFlags[1] = this.right;
// this.blockFlags[1] = this.right + x;
// console.log('right flag set to', this.blockFlags[1]);
}
if (up)
{
this.blockFlags[2] = this.top + y;
this.blockFlags[2] = this.top;
// this.blockFlags[2] = this.top + y;
// this.blockFlags[2] = this.top;
// console.log('up flag set to', this.blockFlags[2]);
}
else if (down)
{
this.blockFlags[3] = this.bottom + y;
this.blockFlags[3] = this.bottom;
// this.blockFlags[3] = this.bottom + y;
// this.blockFlags[3] = this.bottom;
// console.log('down flag set to', this.blockFlags[3]);
}
@ -551,53 +566,15 @@ Phaser.Physics.Arcade.Body.prototype = {
}
else
{
this.left = this.polygon.pos.x - this.polygon.points[0].x;
this.right = this.polygon.pos.x + this.polygon.points[0].x;
this.top = this.polygon.pos.y - this.polygon.points[0].y;
this.bottom = this.polygon.pos.y + this.polygon.points[0].y;
var temp;
for (var i = 1, len = this.polygon.points.length; i < len; i++)
{
// Left
temp = this.polygon.pos.x - this.polygon.points[i].x;
if (temp < this.left)
{
this.left = temp;
}
// Right
temp = this.polygon.pos.x + this.polygon.points[i].x;
if (temp > this.right)
{
this.right = temp;
}
// Top
temp = this.polygon.pos.y - this.polygon.points[i].y;
if (temp < this.top)
{
this.top = temp;
}
// Bottom
temp = this.polygon.pos.y + this.polygon.points[i].y;
if (temp > this.bottom)
{
this.bottom = temp;
}
}
this.width = this.right - this.left;
this.height = this.bottom - this.top;
this.left = Phaser.Math.minProperty('x', this.polygon.points) + this.polygon.pos.x;
this.right = Phaser.Math.maxProperty('x', this.polygon.points) + this.polygon.pos.x;
this.top = Phaser.Math.minProperty('y', this.polygon.points) + this.polygon.pos.y;
this.bottom = Phaser.Math.maxProperty('y', this.polygon.points) + this.polygon.pos.y;
}
this.width = this.right - this.left;
this.height = this.bottom - this.top;
},
/**
@ -906,7 +883,7 @@ Phaser.Physics.Arcade.Body.prototype = {
return this.customSeparateCallback.call(this.customSeparateContext, this, response);
}
console.log(this.sprite.name, 'collided with', body.sprite.name, response);
// console.log(this.sprite.name, 'collided with', body.sprite.name, response);
this._distances[0] = body.right - this.x; // Distance of B to face on left side of A
this._distances[1] = this.right - body.x; // Distance of B to face on right side of A
@ -918,12 +895,12 @@ Phaser.Physics.Arcade.Body.prototype = {
// Which is smaller? Left or Right?
if (this._distances[0] < this._distances[1])
{
console.log(this.sprite.name, 'collided on the LEFT with', body.sprite.name, response);
// console.log(this.sprite.name, 'collided on the LEFT with', body.sprite.name, response);
this.hitLeft(body, response);
}
else if (this._distances[1] < this._distances[0])
{
console.log(this.sprite.name, 'collided on the RIGHT with', body.sprite.name, response);
// console.log(this.sprite.name, 'collided on the RIGHT with', body.sprite.name, response);
this.hitRight(body, response);
}
}
@ -932,12 +909,12 @@ Phaser.Physics.Arcade.Body.prototype = {
// Which is smaller? Top or Bottom?
if (this._distances[2] < this._distances[3])
{
console.log(this.sprite.name, 'collided on the TOP with', body.sprite.name, response);
// console.log(this.sprite.name, 'collided on the TOP with', body.sprite.name, response);
this.hitTop(body, response);
}
else if (this._distances[3] < this._distances[2])
{
console.log(this.sprite.name, 'collided on the BOTTOM with', body.sprite.name, response);
// console.log(this.sprite.name, 'collided on the BOTTOM with', body.sprite.name, response);
this.hitBottom(body, response);
}
}
@ -964,17 +941,17 @@ Phaser.Physics.Arcade.Body.prototype = {
hitLeft: function (body, response) {
// We know that Body is overlapping with This on the left hand side (deltaX < 0 = moving left, > 0 = moving right)
if (body.speed > 0 && (body.deltaX() <= 0 || (body.deltaX() > 0 && !this.checkCollision.left)))
{
return;
}
// if (body.speed > 0 && (body.deltaX() <= 0 || (body.deltaX() > 0 && !this.checkCollision.left)))
// {
// return;
// }
if (this.collideCallback && !this.collideCallback.call(this.collideCallbackContext, Phaser.LEFT, this, body, response))
{
return;
}
if (this.immovable || this.blocked.right || this.touching.right)
if (!this.moves || this.immovable || this.blocked.right || this.touching.right)
{
body.give(this, response);
}
@ -1012,11 +989,11 @@ Phaser.Physics.Arcade.Body.prototype = {
hitRight: function (body, response) {
// We know that Body is overlapping with This on the right hand side (deltaX < 0 = moving left, > 0 = moving right)
if (body.speed > 0 && (body.deltaX() >= 0 || (body.deltaX() < 0 && !this.checkCollision.right)))
{
console.log('bail 1', body.deltaX());
return;
}
// if (body.speed > 0 && (body.deltaX() >= 0 || (body.deltaX() < 0 && !this.checkCollision.right)))
// {
// console.log('bail 1', body.deltaX());
// return;
// }
if (this.collideCallback && !this.collideCallback.call(this.collideCallbackContext, Phaser.RIGHT, this, body))
{
@ -1024,7 +1001,7 @@ Phaser.Physics.Arcade.Body.prototype = {
return;
}
if (this.immovable || this.blocked.left || this.touching.left)
if (!this.moves || this.immovable || this.blocked.left || this.touching.left)
{
body.give(this, response);
}
@ -1062,17 +1039,19 @@ Phaser.Physics.Arcade.Body.prototype = {
hitTop: function (body, response) {
// We know that Body is overlapping with This on the bottom side (deltaY < 0 = moving up, > 0 = moving down)
if (body.speed > 0 && (body.deltaY() <= 0 || (body.deltaY() > 0 && !this.checkCollision.up)))
{
return;
}
// if (body.speed > 0 && (body.deltaY() <= 0 || (body.deltaY() > 0 && !this.checkCollision.up)))
// if (body.speed > 0 && (body.deltaY() <= 0 || (body.deltaY() > 0 && !this.checkCollision.up)))
// {
// console.log('bail', body.sprite.name, body.deltaY());
// return;
// }
if (this.collideCallback && !this.collideCallback.call(this.collideCallbackContext, Phaser.UP, this, body))
{
return;
}
if (this.immovable || this.blocked.down || this.touching.down)
if (!this.moves || this.immovable || this.blocked.down || this.touching.down)
{
body.give(this, response);
}
@ -1110,17 +1089,17 @@ Phaser.Physics.Arcade.Body.prototype = {
hitBottom: function (body, response) {
// We know that Body is overlapping with This on the bottom side (deltaY < 0 = moving up, > 0 = moving down)
if (body.speed > 0 && (body.deltaY() >= 0 || (body.deltaY() < 0 && !this.checkCollision.down)))
{
return;
}
// if (body.speed > 0 && (body.deltaY() >= 0 || (body.deltaY() < 0 && !this.checkCollision.down)))
// {
// return;
// }
if (this.collideCallback && !this.collideCallback.call(this.collideCallbackContext, Phaser.DOWN, this, body))
{
return;
}
if (this.immovable || this.blocked.up || this.touching.up)
if (!this.moves || this.immovable || this.blocked.up || this.touching.up)
{
body.give(this, response);
}
@ -1162,13 +1141,14 @@ Phaser.Physics.Arcade.Body.prototype = {
{
this.x += this._dx;
this.velocity.x += this._temp.x;
console.log('x added', this._dx);
}
if ((this._dy < 0 && !this.blocked.up && !this.touching.up) || (this._dy > 0 && !this.blocked.down && !this.touching.down))
{
this.y += this._dy;
this.velocity.y += this._temp.y;
// console.log('y added', this._dy);
console.log('y added', this._dy);
}
if (this.velocity.x > this.maxVelocity.x)
@ -1225,8 +1205,37 @@ Phaser.Physics.Arcade.Body.prototype = {
this.facing = Phaser.DOWN;
}
this.sprite.x = this.x + (this.sprite.x - this.sprite.center.x) - this.offset.x;
this.sprite.y = this.y + (this.sprite.y - this.sprite.center.y) - this.offset.y;
this.updateBounds();
if (this.sprite.debug)
{
console.log('Body postUpdate x:', this.x, 'y:', this.y, 'left:', this.left, 'right:', this.right);
}
// this.sprite.x = this.x + (this.sprite.x - this.sprite.center.x) - this.offset.x;
// this.sprite.y = this.y + (this.sprite.y - this.sprite.center.y) - this.offset.y;
if (this.sprite.name === 'mushroom')
{
// console.log('old x', this.preX, 'new x', this.x, 'delta', this.deltaX());
// console.log('old y', this.preY, 'new y', this.y);
}
this.sprite.x = this.x - this.offset.x;
this.sprite.y = this.y - this.offset.y;
this.sprite.worldTransform[2] = this.x - this.offset.x;
this.sprite.worldTransform[5] = this.y - this.offset.y;
// this.world.setTo(this.game.camera.x + this.worldTransform[2], this.game.camera.y + this.worldTransform[5]);
// this.sprite.x = this.x + (this.sprite.world.x - this.game.camera.x) - this.offset.x;
// this.sprite.y = this.y + (this.sprite.world.y - this.game.camera.y) - this.offset.y;
// this.world.setTo(this.game.camera.x + this.worldTransform[2], this.game.camera.y + this.worldTransform[5]);
if (this.allowRotation)
{
@ -1269,7 +1278,16 @@ Phaser.Physics.Arcade.Body.prototype = {
* @return {number} The delta value. Positive if the motion was to the right, negative if to the left.
*/
deltaX: function () {
return this.x - this.preX;
if (this.moves)
{
return this.x - this.preX;
}
else
{
return this.sprite.deltaX;
}
},
/**
@ -1279,7 +1297,16 @@ Phaser.Physics.Arcade.Body.prototype = {
* @return {number} The delta value. Positive if the motion was downwards, negative if upwards.
*/
deltaY: function () {
return this.y - this.preY;
if (this.moves)
{
return this.y - this.preY;
}
else
{
return this.sprite.deltaY;
}
},
/**
@ -1334,6 +1361,8 @@ Object.defineProperty(Phaser.Physics.Arcade.Body.prototype, "x", {
this.polygon.pos.x = value;
}
// this.updateBounds();
}
});
@ -1376,6 +1405,8 @@ Object.defineProperty(Phaser.Physics.Arcade.Body.prototype, "y", {
this.polygon.pos.y = value;
}
// this.updateBounds();
}
});

4
src/tilemap/Tile.js
View file

@ -60,9 +60,9 @@ Phaser.Tile = function (layer, index, x, y, width, height) {
this.properties = {};
/**
* @property {boolean} walked - Has this tile been walked / turned into a poly?
* @property {boolean} scanned - Has this tile been walked / turned into a poly?
*/
this.walked = false;
this.scanned = false;
/**
* @property {boolean} faceTop - Is the top of this tile an interesting edge?

1
src/tilemap/Tilemap.js
View file

@ -1227,6 +1227,7 @@ Phaser.Tilemap.prototype = {
destroy: function () {
this.removeAllLayers();
this.data = [];
this.game = null;
}

3
src/tilemap/TilemapLayer.js
View file

@ -492,6 +492,8 @@ Phaser.TilemapLayer.prototype.getTiles = function (x, y, width, height, collides
this._results.length = 0;
// var _tile = null;
// this.context.fillStyle = 'rgba(255,0,0,0.3)';
// this.context.fillRect(this._tx * this._cw, this._ty * this._ch, this._tw * this._cw, this._th * this._ch);
for (var wy = this._ty; wy < this._ty + this._th; wy++)
{
@ -517,6 +519,7 @@ Phaser.TilemapLayer.prototype.getTiles = function (x, y, width, height, collides
tile: this.layer.data[wy][wx],
layer: this.layer.data[wy][wx].layer
});
}
// }
}

2
src/tilemap/TilemapParser.js
View file

@ -371,8 +371,6 @@ Phaser.TilemapParser = {
}
console.log(map);
return map;
}

56
src/utils/Debug.js
View file

@ -609,23 +609,16 @@ Phaser.Utils.Debug.prototype = {
color = color || 'rgb(255, 255, 255)';
this.start(x, y, color);
this.start(x, y, color, 100);
if (sprite.name)
{
this.line(sprite.name);
}
this.line('x: ' + sprite.x);
this.line('y: ' + sprite.y);
this.line('pos x: ' + sprite.position.x);
this.line('pos y: ' + sprite.position.y);
this.line('local x: ' + sprite.localTransform[2]);
this.line('local y: ' + sprite.localTransform[5]);
this.line('t x: ' + sprite.worldTransform[2]);
this.line('t y: ' + sprite.worldTransform[5]);
this.line('world x: ' + sprite.world.x);
this.line('world y: ' + sprite.world.y);
this.splitline('x:', sprite.x.toFixed(2), 'y:', sprite.y.toFixed(2));
this.splitline('pos x:', sprite.position.x.toFixed(2), 'pos y:', sprite.position.y.toFixed(2));
this.splitline('world x:', sprite.world.x.toFixed(2), 'world y:', sprite.world.y.toFixed(2));
this.stop();
@ -965,8 +958,8 @@ Phaser.Utils.Debug.prototype = {
color = color || 'rgb(255,255,255)';
var x = body.x;
var y = body.y;
var x = body.x - this.game.camera.x;
var y = body.y - this.game.camera.y;
if (body.type === Phaser.Physics.Arcade.CIRCLE)
{
@ -977,8 +970,8 @@ Phaser.Utils.Debug.prototype = {
this.context.stroke();
this.context.closePath();
this.context.strokeStyle = 'rgb(0,0,255)';
this.context.strokeRect(body.left, body.top, body.width, body.height);
// this.context.strokeStyle = 'rgb(0,0,255)';
// this.context.strokeRect(body.left, body.top, body.width, body.height);
this.stop();
}
@ -988,27 +981,27 @@ Phaser.Utils.Debug.prototype = {
this.start(0, 0, color);
this.context.beginPath();
this.context.moveTo(x + points[0].x, y + points[0].y);
// this.context.beginPath();
// this.context.moveTo(x + points[0].x, y + points[0].y);
for (var i = 1; i < points.length; i++)
{
this.context.lineTo(x + points[i].x, y + points[i].y);
}
// for (var i = 1; i < points.length; i++)
// {
// this.context.lineTo(x + points[i].x, y + points[i].y);
// }
this.context.closePath();
this.context.strokeStyle = color;
this.context.stroke();
// this.context.closePath();
// this.context.strokeStyle = color;
// this.context.stroke();
this.context.fillStyle = 'rgb(255,0,0)';
this.context.fillRect(x + points[0].x - 2, y + points[0].y - 2, 5, 5);
// this.context.fillStyle = 'rgb(255,0,0)';
// this.context.fillRect(x + points[0].x - 2, y + points[0].y - 2, 5, 5);
for (var i = 1; i < points.length; i++)
{
this.context.fillRect(x + points[i].x - 2, y + points[i].y - 2, 5, 5);
}
// for (var i = 1; i < points.length; i++)
// {
// this.context.fillRect(x + points[i].x - 2, y + points[i].y - 2, 5, 5);
// }
this.context.strokeStyle = 'rgb(0,0,255)';
this.context.strokeStyle = 'rgb(0,255,255)';
this.context.strokeRect(body.left, body.top, body.width, body.height);
this.stop();
@ -1047,7 +1040,6 @@ Phaser.Utils.Debug.prototype = {
}
this.context.closePath();
// this.context.strokeStyle = 'rgba(255, 0, 255, 0.7)';
this.context.strokeStyle = color;
this.context.stroke();