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 the ability to crop a sprite with a custom Rectangle.

Browse source
This commit is contained in:
Richard Davey 2013-09-11 03:55:53 +01:00
parent 48ed27dfcc
commit e79dd5856d
5 changed files with 205 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
examples/crop.php Normal file
View file

@ -0,0 +1,46 @@
<!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.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('trsi', 'assets/pics/trsipic1_lazur.jpg');
}
var r;
var pic;
function create() {
pic = game.add.sprite(game.world.centerX, 550, 'trsi');
pic.anchor.setTo(0.5, 1);
r = new Phaser.Rectangle(0, 0, pic.width, 0);
game.add.tween(r).to( { height: pic.height }, 3000, Phaser.Easing.Bounce.Out, true, 0, 1000, true);
}
function update() {
// Apply the new crop Rectangle to the sprite
pic.crop = r;
}
})();
</script>
</body>
</html>

46
examples/crop2.php Normal file
View file

@ -0,0 +1,46 @@
<!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.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('trsi', 'assets/pics/trsipic1_lazur.jpg');
}
var r;
var pic;
function create() {
pic = game.add.sprite(game.world.centerX, 550, 'trsi');
pic.anchor.setTo(0.5, 1);
r = new Phaser.Rectangle(0, 0, 200, pic.height);
game.add.tween(r).to( { x: pic.width - 200 }, 3000, Phaser.Easing.Bounce.Out, true, 0, 1000, true);
}
function update() {
// Apply the new crop Rectangle to the sprite
pic.crop = r;
}
})();
</script>
</body>
</html>

48
examples/crop3.php Normal file
View file

@ -0,0 +1,48 @@
<!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.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('trsi', 'assets/pics/trsipic1_lazur.jpg');
}
var r;
var pic;
function create() {
pic = game.add.sprite(0, 0, 'trsi');
r = new Phaser.Rectangle(0, 0, 200, 200);
}
function update() {
r.x = game.input.x;
r.y = game.input.y;
pic.x = game.input.x;
pic.y = game.input.y;
// Apply the new crop Rectangle to the sprite
pic.crop = r;
}
})();
</script>
</body>
</html>

12
src/gameobjects/GameObjectFactory.js
View file

@ -21,13 +21,13 @@ Phaser.GameObjectFactory.prototype = {
*
* @param x {number} X position of the new sprite.
* @param y {number} Y position of the new sprite.
* @param [texture] {string|RenderTexture} The image key as defined in the Game.Cache to use as the texture for this sprite OR a RenderTexture
* @param [key] {string|RenderTexture} The image key as defined in the Game.Cache to use as the texture for this sprite OR a RenderTexture
* @param [frame] {string|number} If the sprite uses an image from a texture atlas or sprite sheet you can pass the frame here. Either a number for a frame ID or a string for a frame name.
* @returns {Sprite} The newly created sprite object.
*/
sprite: function (x, y, texture, frame) {
sprite: function (x, y, key, frame) {
return this.world.add(new Phaser.Sprite(this.game, x, y, texture, frame));
return this.world.add(new Phaser.Sprite(this.game, x, y, key, frame));
},
@ -36,13 +36,13 @@ Phaser.GameObjectFactory.prototype = {
*
* @param x {number} X position of the new sprite.
* @param y {number} Y position of the new sprite.
* @param [texture] {string|RenderTexture} The image key as defined in the Game.Cache to use as the texture for this sprite OR a RenderTexture
* @param [key] {string|RenderTexture} The image key as defined in the Game.Cache to use as the texture for this sprite OR a RenderTexture
* @param [frame] {string|number} If the sprite uses an image from a texture atlas or sprite sheet you can pass the frame here. Either a number for a frame ID or a string for a frame name.
* @returns {Sprite} The newly created sprite object.
*/
child: function (parent, x, y, texture, frame) {
child: function (parent, x, y, key, frame) {
var child = this.world.add(new Phaser.Sprite(this.game, x, y, texture, frame));
var child = this.world.add(new Phaser.Sprite(this.game, x, y, key, frame));
parent.addChild(child);
return child;

72
src/gameobjects/Sprite.js
View file

@ -1,8 +1,8 @@
Phaser.Sprite = function (game, x, y, texture, frame) {
Phaser.Sprite = function (game, x, y, key, frame) {
x = x || 0;
y = y || 0;
texture = texture || null;
key = key || null;
frame = frame || null;
this.game = game;
@ -23,24 +23,26 @@ Phaser.Sprite = function (game, x, y, texture, frame) {
// The lifespan is decremented by game.time.elapsed each update, once it reaches zero the kill() function is called.
this.lifespan = 0;
if (texture instanceof Phaser.RenderTexture)
{
PIXI.Sprite.call(this, texture);
this.key = key;
this.currentFrame = this.game.cache.getTextureFrame(texture.name);
if (key instanceof Phaser.RenderTexture)
{
PIXI.Sprite.call(this, key);
this.currentFrame = this.game.cache.getTextureFrame(key.name);
}
else
{
if (texture == null || this.game.cache.checkImageKey(texture) == false)
if (key == null || this.game.cache.checkImageKey(key) == false)
{
texture = '__default';
key = '__default';
}
PIXI.Sprite.call(this, PIXI.TextureCache[texture]);
PIXI.Sprite.call(this, PIXI.TextureCache[key]);
if (this.game.cache.isSpriteSheet(texture))
if (this.game.cache.isSpriteSheet(key))
{
this.animations.loadFrameData(this.game.cache.getFrameData(texture));
this.animations.loadFrameData(this.game.cache.getFrameData(key));
if (frame !== null)
{
@ -56,7 +58,7 @@ Phaser.Sprite = function (game, x, y, texture, frame) {
}
else
{
this.currentFrame = this.game.cache.getFrame(texture);
this.currentFrame = this.game.cache.getFrame(key);
}
}
@ -89,6 +91,9 @@ Phaser.Sprite = function (game, x, y, texture, frame) {
*/
this.anchor = new Phaser.Point();
this._cropUUID = null;
this._cropRect = null;
this.x = x;
this.y = y;
@ -204,7 +209,6 @@ Phaser.Sprite.prototype.preUpdate = function() {
this._cache.y = this.y - (this.game.world.camera.y * this.scrollFactor.y);
// If this sprite or the camera have moved then let's update everything
// It may have rotated though ...
if (this.position.x != this._cache.x || this.position.y != this._cache.y)
{
this.position.x = this._cache.x;
@ -492,6 +496,48 @@ Object.defineProperty(Phaser.Sprite.prototype, "inCamera", {
});
Object.defineProperty(Phaser.Sprite.prototype, "crop", {
/**
* Get the input enabled state of this Sprite.
*/
get: function () {
return this._cropRect;
},
/**
* Set the ability for this sprite to receive input events.
*/
set: function (value) {
if (value instanceof Phaser.Rectangle)
{
if (this._cropUUID == null)
{
this._cropUUID = this.game.rnd.uuid();
PIXI.TextureCache[this._cropUUID] = new PIXI.Texture(PIXI.BaseTextureCache[this.key], {
x: value.x,
y: value.y,
width: value.width,
height: value.height
});
}
else
{
PIXI.TextureCache[this._cropUUID].frame = value;
}
this._cropRect = value;
this.setTexture(PIXI.TextureCache[this._cropUUID]);
}
}
});
Object.defineProperty(Phaser.Sprite.prototype, "inputEnabled", {
/**