2013-08-31 20:50:34 +00:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>phaser.js - a new beginning</title>
|
|
|
|
|
<?php
|
|
|
|
|
require('js.php');
|
|
|
|
|
?>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
|
|
(function () {
|
|
|
|
|
|
|
|
|
|
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });
|
|
|
|
|
|
|
|
|
|
function preload() {
|
2013-08-31 23:35:29 +00:00
|
|
|
game.load.image('mushroom', 'assets/sprites/mana_card.png');
|
2013-08-31 20:50:34 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var s;
|
|
|
|
|
var c;
|
|
|
|
|
var r;
|
|
|
|
|
var p;
|
|
|
|
|
|
2013-09-01 01:28:51 +00:00
|
|
|
var tl;
|
|
|
|
|
var tr;
|
|
|
|
|
var bl;
|
|
|
|
|
var br;
|
|
|
|
|
|
2013-08-31 23:35:29 +00:00
|
|
|
var half = { width: 0, height: 0 };
|
|
|
|
|
var angle = 0;
|
|
|
|
|
var distance = 0;
|
|
|
|
|
|
2013-09-01 01:28:51 +00:00
|
|
|
/**
|
|
|
|
|
* Returns an array containing 4 Point objects corresponding to the 4 corners of the sprite bounds.
|
|
|
|
|
* @method getAsPoints
|
|
|
|
|
* @param {Sprite} sprite The Sprite that will have its cameraView property modified
|
|
|
|
|
* @return {Array} An array of Point objects.
|
|
|
|
|
*/
|
|
|
|
|
function getAsPoints(sprite) {
|
|
|
|
|
var out = [];
|
|
|
|
|
// top left
|
|
|
|
|
out.push(new Phaser.Point(sprite.x, sprite.y));
|
|
|
|
|
// top right
|
|
|
|
|
out.push(new Phaser.Point(sprite.x + sprite.width, sprite.y));
|
|
|
|
|
// bottom right
|
|
|
|
|
out.push(new Phaser.Point(sprite.x + sprite.width, sprite.y + sprite.height));
|
|
|
|
|
// bottom left
|
|
|
|
|
out.push(new Phaser.Point(sprite.x, sprite.y + sprite.height));
|
|
|
|
|
|
|
|
|
|
return out;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var midpoint;
|
|
|
|
|
|
2013-08-31 20:50:34 +00:00
|
|
|
function create() {
|
|
|
|
|
|
|
|
|
|
// Make our game world 2000x2000 pixels in size (the default is to match the game size)
|
|
|
|
|
game.world.setSize(2000, 2000);
|
|
|
|
|
|
|
|
|
|
s = game.add.sprite(400, 300, 'mushroom');
|
|
|
|
|
|
2013-09-01 01:28:51 +00:00
|
|
|
midpoint = new Phaser.Point(s.x + s.width / 2, s.y + s.height / 2);
|
2013-08-31 20:50:34 +00:00
|
|
|
|
2013-09-01 01:28:51 +00:00
|
|
|
var points = getAsPoints(s);
|
|
|
|
|
tl = points[0];
|
|
|
|
|
tr = points[1];
|
|
|
|
|
br = points[2];
|
|
|
|
|
bl = points[3];
|
2013-08-31 20:50:34 +00:00
|
|
|
|
2013-09-01 02:15:27 +00:00
|
|
|
s.anchor.setTo(2, 0.5);
|
2013-08-31 20:50:34 +00:00
|
|
|
|
|
|
|
|
// PIXI worldTransform order:
|
|
|
|
|
|
2013-09-01 01:28:51 +00:00
|
|
|
// |a c tx|
|
|
|
|
|
// |b d ty|
|
|
|
|
|
// |0 0 1|
|
|
|
|
|
|
|
|
|
|
// 0 = scaleX (a)
|
|
|
|
|
// 1 = skewY (c)
|
2013-08-31 20:50:34 +00:00
|
|
|
// 2 = translateX
|
2013-09-01 01:28:51 +00:00
|
|
|
// 3 = skewX (b)
|
|
|
|
|
// 4 = scaleY (d)
|
2013-08-31 20:50:34 +00:00
|
|
|
// 5 = translateY
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function update() {
|
|
|
|
|
|
2013-09-01 01:28:51 +00:00
|
|
|
s.angle += 0.5;
|
2013-09-01 01:39:26 +00:00
|
|
|
|
2013-09-01 02:15:27 +00:00
|
|
|
if (s.scale.x > -2)
|
2013-09-01 01:39:26 +00:00
|
|
|
{
|
2013-09-01 02:15:27 +00:00
|
|
|
s.scale.x -= 0.01;
|
|
|
|
|
s.scale.y -= 0.01;
|
2013-09-01 01:39:26 +00:00
|
|
|
}
|
|
|
|
|
|
2013-08-31 20:50:34 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function render() {
|
|
|
|
|
|
2013-09-01 01:28:51 +00:00
|
|
|
game.debug.renderSpriteInfo(s, 32, 32);
|
2013-08-31 23:35:29 +00:00
|
|
|
|
2013-09-01 01:28:51 +00:00
|
|
|
// var p1 = getLocalPosition(midpoint.x, midpoint.y, s);
|
2013-08-31 20:50:34 +00:00
|
|
|
|
2013-09-01 02:15:27 +00:00
|
|
|
var offsetX = s.anchor.x * s.width;
|
|
|
|
|
var offsetY = s.anchor.y * s.height;
|
|
|
|
|
|
|
|
|
|
var sx = s.x - offsetX;
|
|
|
|
|
var sy = s.y - offsetY;
|
|
|
|
|
|
2013-09-01 01:39:26 +00:00
|
|
|
// top left
|
2013-09-01 02:15:27 +00:00
|
|
|
var p1 = getLocalPosition(sx, sy, s);
|
2013-09-01 01:39:26 +00:00
|
|
|
|
|
|
|
|
// top right
|
2013-09-01 02:15:27 +00:00
|
|
|
var p2 = getLocalPosition(sx + s.width, sy, s);
|
2013-09-01 01:39:26 +00:00
|
|
|
|
|
|
|
|
// bottom left
|
2013-09-01 02:15:27 +00:00
|
|
|
var p3 = getLocalPosition(sx, sy + s.height, s);
|
2013-09-01 01:39:26 +00:00
|
|
|
|
|
|
|
|
// bottom right
|
2013-09-01 02:15:27 +00:00
|
|
|
var p4 = getLocalPosition(sx + s.width, sy + s.height, s);
|
2013-08-31 20:50:34 +00:00
|
|
|
|
2013-09-01 01:28:51 +00:00
|
|
|
p1.add(s.x, s.y);
|
|
|
|
|
p2.add(s.x, s.y);
|
|
|
|
|
p3.add(s.x, s.y);
|
|
|
|
|
p4.add(s.x, s.y);
|
2013-08-31 20:50:34 +00:00
|
|
|
|
2013-09-01 01:28:51 +00:00
|
|
|
// game.debug.renderPoint(tl, 'rgb(255,0,0)');
|
|
|
|
|
// game.debug.renderPoint(tr, 'rgb(0,255,0)');
|
|
|
|
|
// game.debug.renderPoint(bl, 'rgb(0,0,255)');
|
|
|
|
|
// game.debug.renderPoint(br, 'rgb(255,0,255)');
|
2013-08-31 20:50:34 +00:00
|
|
|
|
2013-09-01 01:28:51 +00:00
|
|
|
game.debug.renderPoint(p1, 'rgb(255,0,0)');
|
|
|
|
|
game.debug.renderPoint(p2, 'rgb(0,255,0)');
|
|
|
|
|
game.debug.renderPoint(p3, 'rgb(0,0,255)');
|
|
|
|
|
game.debug.renderPoint(p4, 'rgb(255,0,255)');
|
2013-08-31 20:50:34 +00:00
|
|
|
|
2013-09-01 01:28:51 +00:00
|
|
|
game.debug.renderText('tx: ' + tr.x, 32, 250);
|
|
|
|
|
game.debug.renderText('ty: ' + tr.y, 32, 265);
|
|
|
|
|
game.debug.renderText('px: ' + p2.x, 32, 280);
|
|
|
|
|
game.debug.renderText('py: ' + p2.y, 32, 295);
|
2013-09-01 02:15:27 +00:00
|
|
|
game.debug.renderText('ox: ' + offsetX, 32, 350);
|
|
|
|
|
game.debug.renderText('oy: ' + offsetY, 32, 370);
|
2013-08-31 20:50:34 +00:00
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-01 01:28:51 +00:00
|
|
|
function getLocalPosition (x, y, displayObject) {
|
2013-09-01 01:39:26 +00:00
|
|
|
|
2013-09-01 01:28:51 +00:00
|
|
|
var a00 = displayObject.worldTransform[0]; // scaleX
|
|
|
|
|
var a01 = displayObject.worldTransform[1]; // skewY
|
|
|
|
|
var a02 = displayObject.worldTransform[2]; // translateX
|
|
|
|
|
var a10 = displayObject.worldTransform[3]; // skewX
|
|
|
|
|
var a11 = displayObject.worldTransform[4]; // scaleY
|
|
|
|
|
var a12 = displayObject.worldTransform[5]; // translateY
|
2013-08-31 20:50:34 +00:00
|
|
|
|
2013-09-01 01:28:51 +00:00
|
|
|
a01 *= -1;
|
|
|
|
|
a10 *= -1;
|
2013-08-31 20:50:34 +00:00
|
|
|
|
2013-09-01 01:28:51 +00:00
|
|
|
var id = 1 / (a00 * a11 + a01 * -a10);
|
2013-08-31 20:50:34 +00:00
|
|
|
|
2013-09-01 01:28:51 +00:00
|
|
|
var dx = a11 * id * x + -a01 * id * y + (a12 * a01 - a02 * a11) * id;
|
|
|
|
|
var dy = a00 * id * y + -a10 * id * x + (-a12 * a00 + a02 * a10) * id;
|
2013-08-31 20:50:34 +00:00
|
|
|
|
2013-09-01 01:39:26 +00:00
|
|
|
return new Phaser.Point(dx * displayObject.scale.x, dy * displayObject.scale.y);
|
2013-08-31 20:50:34 +00:00
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
})();
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
