Text converted and a couple of examples created. Using new extend system, so much smaller classes now.

This commit is contained in:
Richard Davey
2013-09-03 06:02:47 +01:00
parent 5acb4e9f1b
commit 8a90a87492
9 changed files with 124 additions and 34 deletions
+1
View File
@@ -65,6 +65,7 @@
<script src="../src/gameobjects/GameObjectFactory.js"></script>
<script src="../src/gameobjects/Sprite.js"></script>
<script src="../src/gameobjects/TileSprite.js"></script>
<script src="../src/gameobjects/Text.js"></script>
<script src="../src/system/Canvas.js"></script>
<script src="../src/system/Device.js"></script>
+31
View File
@@ -0,0 +1,31 @@
<!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, '', { create: create });
function create() {
var text = "- phaser -\nwith a sprinkle of\npixi dust";
var style = { font: "65px Arial", fill: "#ff0044", align: "center" };
game.add.text(game.world.centerX, game.world.centerY, text, style).anchor.setTo(0.5, 0.5);
}
})();
</script>
</body>
</html>
+41
View File
@@ -0,0 +1,41 @@
<!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, '', { create: create, update: update, render: render });
var s;
function create() {
var text = "--- phaser ---\nwith a sprinkle of\npixi dust";
var style = { font: "bold 40pt Arial", fill: "#ffffff", align: "center", stroke: "#258acc", strokeThickness: 8 };
s = game.add.text(game.world.centerX, game.world.centerY, text, style);
s.anchor.setTo(0.5, 0.5);
}
function update() {
s.angle += 1;
}
function render() {
game.debug.renderSpriteCorners(s, true, true);
}
})();
</script>
</body>
</html>
+5
View File
@@ -50,6 +50,11 @@ Phaser.GameObjectFactory.prototype = {
},
text: function (x, y, text, style) {
return this.world.add(new Phaser.Text(this.game, x, y, text, style));
},
};
+14 -14
View File
@@ -17,6 +17,17 @@ Phaser.Sprite = function (game, x, y, key, frame) {
this.name = '';
if (key)
{
PIXI.Sprite.call(this, PIXI.TextureCache[key]);
}
else
{
// No texture yet
console.log('no texture yet');
PIXI.Sprite.call(this);
}
// this.events = new Phaser.Components.Events(this);
/**
@@ -25,7 +36,7 @@ Phaser.Sprite = function (game, x, y, key, frame) {
*/
this.animations = new Phaser.AnimationManager(this);
PIXI.DisplayObjectContainer.call(this);
// PIXI.DisplayObjectContainer.call(this);
/**
* The anchor sets the origin point of the texture.
@@ -44,7 +55,7 @@ Phaser.Sprite = function (game, x, y, key, frame) {
* @property texture
* @type Texture
*/
this.texture = PIXI.TextureCache[key];
// this.texture = PIXI.TextureCache[key];
if (this.game.cache.isSpriteSheet(key))
{
@@ -63,21 +74,9 @@ Phaser.Sprite = function (game, x, y, key, frame) {
}
}
/**
* The blend mode of sprite.
* currently supports PIXI.blendModes.NORMAL and PIXI.blendModes.SCREEN
*
* @property blendMode
* @type Number
*/
// this.blendMode = PIXI.blendModes.NORMAL;
this.x = x;
this.y = y;
// this.updateFrame = true;
// this.renderable = true;
this.position.x = x;
this.position.y = y;
@@ -143,6 +142,7 @@ Phaser.Sprite = function (game, x, y, key, frame) {
};
// Needed to keep the PIXI.Sprite constructor in the prototype chain (as the core pixi renderer uses an instanceof check sadly)
Phaser.Sprite.prototype = Object.create(PIXI.Sprite.prototype);
Phaser.Sprite.prototype.constructor = Phaser.Sprite;
+28
View File
@@ -0,0 +1,28 @@
Phaser.Text = function (game, x, y, text, style) {
x = x || 0;
y = y || 0;
text = text || '';
style = style || '';
this.canvas = document.createElement("canvas");
this.context = this.canvas.getContext("2d");
var canvasID = game.rnd.uuid();
PIXI.TextureCache[canvasID] = new PIXI.Texture(new PIXI.BaseTexture(this.canvas));
Phaser.Sprite.call(this, game, x, y, canvasID);
this.setText(text);
this.setStyle(style);
this.updateText();
this.dirty = false;
};
Phaser.Text.prototype = Phaser.Utils.extend(true, Phaser.Sprite.prototype, PIXI.Text.prototype);
Phaser.Text.prototype.constructor = Phaser.Text;
// Add our own custom methods
+3 -19
View File
@@ -8,25 +8,10 @@ Phaser.TileSprite = function (game, x, y, width, height, key, frame) {
frame = frame || null;
Phaser.Sprite.call(this, game, x, y, key, frame);
PIXI.TilingSprite.call(this);
this.texture = PIXI.TextureCache[key];
/**
* The width of the tiling sprite
*
* @property width
* @type Number
*/
this.width = width;
/**
* The height of the tiling sprite
*
* @property height
* @type Number
*/
this.height = height;
PIXI.TilingSprite.call(this, this.texture, width, height);
/**
* The scaling of the image that is being tiled
@@ -34,7 +19,7 @@ Phaser.TileSprite = function (game, x, y, width, height, key, frame) {
* @property tileScale
* @type Point
*/
this.tileScale = new Phaser.Point(1,1);
this.tileScale = new Phaser.Point(1, 1);
/**
* The offset position of the image that is being tiled
@@ -42,11 +27,10 @@ Phaser.TileSprite = function (game, x, y, width, height, key, frame) {
* @property tilePosition
* @type Point
*/
this.tilePosition = new Phaser.Point(0,0);
this.tilePosition = new Phaser.Point(0, 0);
};
// Extend Phaser.Sprite and PIXI.TilingSprite
Phaser.TileSprite.prototype = Phaser.Utils.extend(true, PIXI.TilingSprite.prototype, Phaser.Sprite.prototype);
Phaser.TileSprite.prototype.constructor = Phaser.TileSprite;
@@ -163,7 +163,6 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
if(displayObject instanceof PIXI.Sprite)
{
var frame = displayObject.texture.frame;
if(frame)
+1
View File
@@ -146,6 +146,7 @@ Phaser.Utils.Debug.prototype = {
if (showText)
{
this.currentColor = color;
this.line('x: ' + Math.floor(sprite.topLeft.x) + ' y: ' + Math.floor(sprite.topLeft.y), sprite.topLeft.x, sprite.topLeft.y);
this.line('x: ' + Math.floor(sprite.topRight.x) + ' y: ' + Math.floor(sprite.topRight.y), sprite.topRight.x, sprite.topRight.y);
this.line('x: ' + Math.floor(sprite.bottomLeft.x) + ' y: ' + Math.floor(sprite.bottomLeft.y), sprite.bottomLeft.x, sprite.bottomLeft.y);