mirror of
https://github.com/wassname/phaser.git
synced 2026-08-01 12:50:06 +08:00
Added Game core loop stepping support. Super-useful for debugging, and helped me track down the issue with jittery physics collision. Double-win!
This commit is contained in:
photonstorm
@@ -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);
|
||||
|
||||
}
|
||||
|
||||
+183
-123
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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();
|
||||
|
||||
@@ -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);
|
||||
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
}
|
||||
|
||||
|
||||
+24
-19
@@ -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);
|
||||
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
}
|
||||
|
||||
@@ -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++)
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user