mirror of
https://github.com/photonstorm/phaser
synced 2024-09-20 14:31:55 +00:00
Add 2 more tests (rectangle utils).
This commit is contained in:
Sean
parent
7cae283a4c
commit
d4781a19d9
4 changed files with 351 additions and 3 deletions
|
|
@ -1,10 +1,52 @@
|
|||
(function() {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create);
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, null, create, update, render);
|
||||
|
||||
function init() {
|
||||
var rects = [],
|
||||
rect, lastCreated;
|
||||
|
||||
function create() {
|
||||
// Create a rect first.
|
||||
spawnRect(64, 32, 64, 64);
|
||||
|
||||
// Add a rectangle on each touch or click.
|
||||
game.input.onTap.add(function() {
|
||||
spawnRect(lastCreated.x + 12, lastCreated.y + 12, 64, 64);
|
||||
});
|
||||
}
|
||||
function update() {
|
||||
// body...
|
||||
}
|
||||
function create() {
|
||||
function render() {
|
||||
var context = Phaser.DebugUtils.context;
|
||||
|
||||
// Render rectangles.
|
||||
context.strokeStyle = '#fff';
|
||||
// context.fillStyle = '#fff';
|
||||
context.lineWidth = 2;
|
||||
for (var i = 0, len = rects.length; i < len; i++) {
|
||||
rect = rects[i];
|
||||
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
|
||||
}
|
||||
|
||||
// Render info.
|
||||
context.fillStyle = '#fff';
|
||||
context.lineWidth = 0;
|
||||
context.fillText('Tap or click to clone a new rectangle.', 480, 128);
|
||||
}
|
||||
function spawnRect(x, y, w, h) {
|
||||
// If a rect already created, clone it to create a new one instead
|
||||
// of allocating.
|
||||
if (lastCreated) {
|
||||
rect = Phaser.RectangleUtils.clone(lastCreated);
|
||||
// Offset the newly created rectangle.
|
||||
rect.x += 24;
|
||||
rect.y += 24;
|
||||
// Now the last created is this one.
|
||||
lastCreated = rect;
|
||||
}
|
||||
else {
|
||||
lastCreated = new Phaser.Rectangle(x, y, w, h);
|
||||
}
|
||||
rects.push(lastCreated);
|
||||
}
|
||||
})();
|
||||
|
|
|
|||
53
Tests/misc/rectangle utils 1.ts
Normal file
53
Tests/misc/rectangle utils 1.ts
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
(function() {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, null, create, update, render);
|
||||
|
||||
var rects: Phaser.Rectangle[] = [],
|
||||
rect: Phaser.Rectangle,
|
||||
lastCreated: Phaser.Rectangle;
|
||||
|
||||
function create() {
|
||||
// Create a rect first.
|
||||
spawnRect(64, 32, 64, 64);
|
||||
|
||||
// Add a rectangle on each touch or click.
|
||||
game.input.onTap.add(function() {
|
||||
spawnRect(lastCreated.x + 12, lastCreated.y + 12, 64, 64);
|
||||
});
|
||||
}
|
||||
function update() {
|
||||
// body...
|
||||
}
|
||||
function render() {
|
||||
var context: CanvasRenderingContext2D = Phaser.DebugUtils.context;
|
||||
|
||||
// Render rectangles.
|
||||
context.strokeStyle = '#fff';
|
||||
// context.fillStyle = '#fff';
|
||||
context.lineWidth = 2;
|
||||
for (var i = 0, len = rects.length; i < len; i++) {
|
||||
rect = rects[i];
|
||||
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
|
||||
}
|
||||
|
||||
// Render info.
|
||||
context.fillStyle = '#fff';
|
||||
context.lineWidth = 0;
|
||||
context.fillText('Tap or click to clone a new rectangle.', 480, 128);
|
||||
}
|
||||
function spawnRect(x, y, w, h) {
|
||||
// If a rect already created, clone it to create a new one instead
|
||||
// of allocating.
|
||||
if (lastCreated) {
|
||||
rect = Phaser.RectangleUtils.clone(lastCreated);
|
||||
// Offset the newly created rectangle.
|
||||
rect.x += 24;
|
||||
rect.y += 24;
|
||||
// Now the last created is this one.
|
||||
lastCreated = rect;
|
||||
}
|
||||
else {
|
||||
lastCreated = new Phaser.Rectangle(x, y, w, h);
|
||||
}
|
||||
rects.push(lastCreated);
|
||||
}
|
||||
})();
|
||||
123
Tests/misc/rectangle utils 2.js
Normal file
123
Tests/misc/rectangle utils 2.js
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
(function() {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, null, create, update, render);
|
||||
|
||||
var rect, renderList = [];
|
||||
var leftHandler, rightHandler, topHandler, bottomHandler;
|
||||
var onDragLeft = false,
|
||||
onDragRight = false,
|
||||
onDragTop = false,
|
||||
onDragBottom = false;
|
||||
var lastPos = {x: 0, y: 0};
|
||||
|
||||
function create() {
|
||||
// Rectangle to be dragged and scaled.
|
||||
rect = new Phaser.Rectangle(game.stage.centerX - 160, game.stage.centerY - 120,
|
||||
320, 240);
|
||||
// Handler rectangles for dragging scaling.
|
||||
leftHandler = new Phaser.Rectangle(game.stage.centerX - 160 - 4, game.stage.centerY - 4,
|
||||
8, 8);
|
||||
rightHandler = new Phaser.Rectangle(game.stage.centerX + 160 - 4, game.stage.centerY - 4,
|
||||
8, 8);
|
||||
topHandler = new Phaser.Rectangle(game.stage.centerX - 4, game.stage.centerY - 120 - 4,
|
||||
8, 8);
|
||||
bottomHandler = new Phaser.Rectangle(game.stage.centerX - 4, game.stage.centerY + 120 - 4,
|
||||
8, 8);
|
||||
// Add all the rectangles to the render list.
|
||||
renderList.push(rect,
|
||||
leftHandler, rightHandler, topHandler, bottomHandler);
|
||||
|
||||
// Touch or press mouse button on any handler to start inflating rectangle.
|
||||
game.input.onDown.add(function(pointer) {
|
||||
if (Phaser.RectangleUtils.contains(leftHandler, pointer.position.x, pointer.position.y)) {
|
||||
onDragLeft = true;
|
||||
lastPos.x = pointer.position.x;
|
||||
lastPos.y = pointer.position.y;
|
||||
}
|
||||
else if (Phaser.RectangleUtils.contains(rightHandler, pointer.position.x, pointer.position.y)) {
|
||||
onDragRight = true;
|
||||
lastPos.x = pointer.position.x;
|
||||
lastPos.y = pointer.position.y;
|
||||
}
|
||||
else if (Phaser.RectangleUtils.contains(topHandler, pointer.position.x, pointer.position.y)) {
|
||||
onDragTop = true;
|
||||
lastPos.x = pointer.position.x;
|
||||
lastPos.y = pointer.position.y;
|
||||
}
|
||||
else if (Phaser.RectangleUtils.contains(bottomHandler, pointer.position.x, pointer.position.y)) {
|
||||
onDragBottom = true;
|
||||
lastPos.x = pointer.position.x;
|
||||
lastPos.y = pointer.position.y;
|
||||
}
|
||||
});
|
||||
// Stop dragging handlers when up.
|
||||
game.input.onUp.add(function() {
|
||||
onDragLeft = onDragRight = onDragTop = onDragBottom = false;
|
||||
});
|
||||
}
|
||||
function update() {
|
||||
var offset = {x: 0, y: 0};
|
||||
// Calc offset from last frame (previous update).
|
||||
if (onDragLeft) {
|
||||
offset.x = -game.input.x + lastPos.x;
|
||||
}
|
||||
else if (onDragRight) {
|
||||
offset.x = game.input.x - lastPos.x;
|
||||
}
|
||||
else if (onDragTop) {
|
||||
offset.y = -game.input.y + lastPos.y;
|
||||
}
|
||||
else if (onDragBottom) {
|
||||
offset.y = game.input.y - lastPos.y;
|
||||
}
|
||||
// Update last position.
|
||||
lastPos.x = game.input.x;
|
||||
lastPos.y = game.input.y;
|
||||
|
||||
// Change rect's size and also the 4 handlers' position.
|
||||
Phaser.RectangleUtils.inflate(rect, offset.x, offset.y);
|
||||
leftHandler.x = rect.x - leftHandler.width / 2;
|
||||
rightHandler.x = rect.x + rect.width - rightHandler.width / 2;
|
||||
topHandler.y = rect.y - topHandler.height / 2;
|
||||
bottomHandler.y = rect.y + rect.height - bottomHandler.height / 2;
|
||||
}
|
||||
function render() {
|
||||
var context = Phaser.DebugUtils.context;
|
||||
|
||||
// Render rectangles.
|
||||
context.strokeStyle = '#fff';
|
||||
context.fillStyle = '#000';
|
||||
context.lineWidth = 4;
|
||||
for (var i = 0, len = renderList.length; i < len; i++) {
|
||||
context.strokeRect(renderList[i].x, renderList[i].y, renderList[i].width, renderList[i].height);
|
||||
context.fillRect(renderList[i].x, renderList[i].y, renderList[i].width, renderList[i].height);
|
||||
}
|
||||
|
||||
// Render info.
|
||||
context.fillStyle = '#fff';
|
||||
context.lineWidth = 0;
|
||||
|
||||
// Draw offset from origin point when drawing.
|
||||
var origin = game.input.activePointer.positionDown,
|
||||
currPos = game.input.activePointer.position;
|
||||
if (onDragLeft) {
|
||||
context.fillText('dx: ' + (currPos.x - origin.x), leftHandler.x + 16, leftHandler.y - 20);
|
||||
context.fillText('dy: 0', leftHandler.x + 16, leftHandler.y - 8);
|
||||
}
|
||||
else if (onDragRight) {
|
||||
context.fillText('dx: ' + (currPos.x - origin.x), rightHandler.x + 16, rightHandler.y - 20);
|
||||
context.fillText('dx: 0', rightHandler.x + 16, rightHandler.y - 8);
|
||||
}
|
||||
else if (onDragTop) {
|
||||
context.fillText('dy: 0', topHandler.x + 16, topHandler.y - 20);
|
||||
context.fillText('dy: ' + (currPos.y - origin.y), topHandler.x + 16, topHandler.y - 8);
|
||||
}
|
||||
else if (onDragBottom) {
|
||||
context.fillText('dy: 0', bottomHandler.x + 16, bottomHandler.y - 20);
|
||||
context.fillText('dy: ' + (currPos.y - origin.y), bottomHandler.x + 16, bottomHandler.y - 8);
|
||||
}
|
||||
|
||||
context.fillText('Drag handlers to scale the rectangle!', 280, 96);
|
||||
context.fillText('Notice that the scaling does not move the rectangle\'s center!', 220, 508);
|
||||
context.fillText('You can also get same effect by using "Sprite" and its origin property.', 196, 520);
|
||||
}
|
||||
})();
|
||||
130
Tests/misc/rectangle utils 2.ts
Normal file
130
Tests/misc/rectangle utils 2.ts
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
(function() {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, null, create, update, render);
|
||||
|
||||
var rect: Phaser.Rectangle,
|
||||
renderList: Phaser.Rectangle[] = [];
|
||||
|
||||
var leftHandler: Phaser.Rectangle,
|
||||
rightHandler: Phaser.Rectangle,
|
||||
topHandler: Phaser.Rectangle,
|
||||
bottomHandler: Phaser.Rectangle;
|
||||
|
||||
var onDragLeft: Boolean = false,
|
||||
onDragRight: Boolean = false,
|
||||
onDragTop: Boolean = false,
|
||||
onDragBottom: Boolean = false;
|
||||
|
||||
var lastPos = {x: 0, y: 0};
|
||||
|
||||
function create() {
|
||||
// Rectangle to be dragged and scaled.
|
||||
rect = new Phaser.Rectangle(game.stage.centerX - 160, game.stage.centerY - 120,
|
||||
320, 240);
|
||||
// Handler rectangles for dragging scaling.
|
||||
leftHandler = new Phaser.Rectangle(game.stage.centerX - 160 - 4, game.stage.centerY - 4,
|
||||
8, 8);
|
||||
rightHandler = new Phaser.Rectangle(game.stage.centerX + 160 - 4, game.stage.centerY - 4,
|
||||
8, 8);
|
||||
topHandler = new Phaser.Rectangle(game.stage.centerX - 4, game.stage.centerY - 120 - 4,
|
||||
8, 8);
|
||||
bottomHandler = new Phaser.Rectangle(game.stage.centerX - 4, game.stage.centerY + 120 - 4,
|
||||
8, 8);
|
||||
// Add all the rectangles to the render list.
|
||||
renderList.push(rect,
|
||||
leftHandler, rightHandler, topHandler, bottomHandler);
|
||||
|
||||
// Touch or press mouse button on any handler to start inflating rectangle.
|
||||
game.input.onDown.add(function(pointer) {
|
||||
if (Phaser.RectangleUtils.contains(leftHandler, pointer.position.x, pointer.position.y)) {
|
||||
onDragLeft = true;
|
||||
lastPos.x = pointer.position.x;
|
||||
lastPos.y = pointer.position.y;
|
||||
}
|
||||
else if (Phaser.RectangleUtils.contains(rightHandler, pointer.position.x, pointer.position.y)) {
|
||||
onDragRight = true;
|
||||
lastPos.x = pointer.position.x;
|
||||
lastPos.y = pointer.position.y;
|
||||
}
|
||||
else if (Phaser.RectangleUtils.contains(topHandler, pointer.position.x, pointer.position.y)) {
|
||||
onDragTop = true;
|
||||
lastPos.x = pointer.position.x;
|
||||
lastPos.y = pointer.position.y;
|
||||
}
|
||||
else if (Phaser.RectangleUtils.contains(bottomHandler, pointer.position.x, pointer.position.y)) {
|
||||
onDragBottom = true;
|
||||
lastPos.x = pointer.position.x;
|
||||
lastPos.y = pointer.position.y;
|
||||
}
|
||||
});
|
||||
// Stop dragging handlers when up.
|
||||
game.input.onUp.add(function() {
|
||||
onDragLeft = onDragRight = onDragTop = onDragBottom = false;
|
||||
});
|
||||
}
|
||||
function update() {
|
||||
var offset = {x: 0, y: 0};
|
||||
// Calc offset from last frame (previous update).
|
||||
if (onDragLeft) {
|
||||
offset.x = -game.input.x + lastPos.x;
|
||||
}
|
||||
else if (onDragRight) {
|
||||
offset.x = game.input.x - lastPos.x;
|
||||
}
|
||||
else if (onDragTop) {
|
||||
offset.y = -game.input.y + lastPos.y;
|
||||
}
|
||||
else if (onDragBottom) {
|
||||
offset.y = game.input.y - lastPos.y;
|
||||
}
|
||||
// Update last position.
|
||||
lastPos.x = game.input.x;
|
||||
lastPos.y = game.input.y;
|
||||
|
||||
// Change rect's size and also the 4 handlers' position.
|
||||
Phaser.RectangleUtils.inflate(rect, offset.x, offset.y);
|
||||
leftHandler.x = rect.x - leftHandler.width / 2;
|
||||
rightHandler.x = rect.x + rect.width - rightHandler.width / 2;
|
||||
topHandler.y = rect.y - topHandler.height / 2;
|
||||
bottomHandler.y = rect.y + rect.height - bottomHandler.height / 2;
|
||||
}
|
||||
function render() {
|
||||
var context: CanvasRenderingContext2D = Phaser.DebugUtils.context;
|
||||
|
||||
// Render rectangles.
|
||||
context.strokeStyle = '#fff';
|
||||
context.fillStyle = '#000';
|
||||
context.lineWidth = 4;
|
||||
for (var i = 0, len = renderList.length; i < len; i++) {
|
||||
context.strokeRect(renderList[i].x, renderList[i].y, renderList[i].width, renderList[i].height);
|
||||
context.fillRect(renderList[i].x, renderList[i].y, renderList[i].width, renderList[i].height);
|
||||
}
|
||||
|
||||
// Render info.
|
||||
context.fillStyle = '#fff';
|
||||
context.lineWidth = 0;
|
||||
|
||||
// Draw offset from origin point when drawing.
|
||||
var origin: Phaser.Vec2 = game.input.activePointer.positionDown,
|
||||
currPos: Phaser.Vec2 = game.input.activePointer.position;
|
||||
if (onDragLeft) {
|
||||
context.fillText('dx: ' + (currPos.x - origin.x), leftHandler.x + 16, leftHandler.y - 20);
|
||||
context.fillText('dy: 0', leftHandler.x + 16, leftHandler.y - 8);
|
||||
}
|
||||
else if (onDragRight) {
|
||||
context.fillText('dx: ' + (currPos.x - origin.x), rightHandler.x + 16, rightHandler.y - 20);
|
||||
context.fillText('dx: 0', rightHandler.x + 16, rightHandler.y - 8);
|
||||
}
|
||||
else if (onDragTop) {
|
||||
context.fillText('dy: 0', topHandler.x + 16, topHandler.y - 20);
|
||||
context.fillText('dy: ' + (currPos.y - origin.y), topHandler.x + 16, topHandler.y - 8);
|
||||
}
|
||||
else if (onDragBottom) {
|
||||
context.fillText('dy: 0', bottomHandler.x + 16, bottomHandler.y - 20);
|
||||
context.fillText('dy: ' + (currPos.y - origin.y), bottomHandler.x + 16, bottomHandler.y - 8);
|
||||
}
|
||||
|
||||
context.fillText('Drag handlers to scale the rectangle!', 280, 96);
|
||||
context.fillText('Notice that the scaling does not move the rectangle\'s center!', 220, 508);
|
||||
context.fillText('You can also get same effect by using "Sprite" and its origin property.', 196, 520);
|
||||
}
|
||||
})();
|
||||
Loading…
Reference in a new issue