Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-10 07:04:31 +00:00
Code Issues Projects Releases Packages Wiki Activity

V0.8 - added DynamicTexture support and 2 examples, plus animation frame names and removed a few bugs.

Browse source
This commit is contained in:
Richard Davey 2013-04-15 22:13:11 +01:00
parent f4bf6c607f
commit 25a59b97b4
20 changed files with 10126 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

205
Phaser/DynamicTexture.ts Normal file
View file

@ -0,0 +1,205 @@
/// <reference path="Game.ts" />
class DynamicTexture {
constructor(game: Game, key: string, width: number, height: number) {
this._game = game;
this.canvas = <HTMLCanvasElement> document.createElement('canvas');
this.canvas.width = width;
this.canvas.height = height;
this.context = this.canvas.getContext('2d');
this.bounds = new Rectangle(0, 0, width, height);
}
private _game: Game;
private _sx: number = 0;
private _sy: number = 0;
private _sw: number = 0;
private _sh: number = 0;
private _dx: number = 0;
private _dy: number = 0;
private _dw: number = 0;
private _dh: number = 0;
// Input / Output nodes?
public bounds: Rectangle;
public canvas: HTMLCanvasElement;
public context: CanvasRenderingContext2D;
public getPixel(x: number, y: number): number {
//r = imageData.data[0];
//g = imageData.data[1];
//b = imageData.data[2];
//a = imageData.data[3];
var imageData = this.context.getImageData(x, y, 1, 1);
return this.getColor(imageData.data[0], imageData.data[1], imageData.data[2]);
}
public getPixel32(x: number, y: number) {
var imageData = this.context.getImageData(x, y, 1, 1);
return this.getColor32(imageData.data[3], imageData.data[0], imageData.data[1], imageData.data[2]);
}
// Returns a CanvasPixelArray
public getPixels(rect:Rectangle) {
return this.context.getImageData(rect.x, rect.y, rect.width, rect.height);
}
public setPixel(x: number, y: number, color:number) {
this.context.fillStyle = color;
this.context.fillRect(x, y, 1, 1);
}
public setPixel32(x: number, y: number, color:number) {
this.context.fillStyle = color;
this.context.fillRect(x, y, 1, 1);
}
public setPixels(rect:Rectangle, input) {
this.context.putImageData(input, rect.x, rect.y);
}
public fillRect(rect: Rectangle, color: number) {
this.context.fillStyle = color;
this.context.fillRect(rect.x, rect.y, rect.width, rect.height);
}
public pasteImage(key: string, frame?: number = -1, destX?: number = 0, destY?: number = 0, destWidth?: number = null, destHeight?: number = null) {
var texture = null;
var frameData;
this._sx = 0;
this._sy = 0;
this._dx = destX;
this._dy = destY;
// TODO - Load a frame from a sprite sheet, otherwise we'll draw the whole lot
if (frame > -1)
{
//if (this._game.cache.isSpriteSheet(key))
//{
// texture = this._game.cache.getImage(key);
//this.animations.loadFrameData(this._game.cache.getFrameData(key));
//}
}
else
{
texture = this._game.cache.getImage(key);
this._sw = texture.width;
this._sh = texture.height;
this._dw = texture.width;
this._dh = texture.height;
}
if (destWidth !== null)
{
this._dw = destWidth;
}
if (destHeight !== null)
{
this._dh = destHeight;
}
if (texture != null)
{
this.context.drawImage(
texture, // Source Image
this._sx, // Source X (location within the source image)
this._sy, // Source Y
this._sw, // Source Width
this._sh, // Source Height
this._dx, // Destination X (where on the canvas it'll be drawn)
this._dy, // Destination Y
this._dw, // Destination Width (always same as Source Width unless scaled)
this._dh // Destination Height (always same as Source Height unless scaled)
);
}
}
// TODO - Add in support for: alphaBitmapData: BitmapData = null, alphaPoint: Point = null, mergeAlpha: bool = false
public copyPixels(sourceTexture: DynamicTexture, sourceRect: Rectangle, destPoint: Point) {
// Swap for drawImage if the sourceRect is the same size as the sourceTexture to avoid a costly getImageData call
if (sourceRect.equals(this.bounds) == true)
{
this.context.drawImage(sourceTexture.canvas, destPoint.x, destPoint.y);
}
else
{
this.context.putImageData(sourceTexture.getPixels(sourceRect), destPoint.x, destPoint.y);
}
}
public clear() {
this.context.clearRect(0, 0, this.bounds.width, this.bounds.height);
}
public get width(): number {
return this.bounds.width;
}
public get height(): number {
return this.bounds.height;
}
/**
* Given an alpha and 3 color values this will return an integer representation of it
*
* @param alpha The Alpha value (between 0 and 255)
* @param red The Red channel value (between 0 and 255)
* @param green The Green channel value (between 0 and 255)
* @param blue The Blue channel value (between 0 and 255)
*
* @return A native color value integer (format: 0xAARRGGBB)
*/
private getColor32(alpha: number, red: number, green: number, blue: number): number {
return alpha << 24 | red << 16 | green << 8 | blue;
}
/**
* Given 3 color values this will return an integer representation of it
*
* @param red The Red channel value (between 0 and 255)
* @param green The Green channel value (between 0 and 255)
* @param blue The Blue channel value (between 0 and 255)
*
* @return A native color value integer (format: 0xRRGGBB)
*/
private getColor(red: number, green: number, blue: number): number {
return red << 16 | green << 8 | blue;
}
}

8
Phaser/Game.ts
View file

@ -17,7 +17,7 @@
/**
* Phaser
*
* v0.7a - April 15th 2013
* v0.8 - April 15th 2013
*
* A small and feature-packed 2D canvas game framework born from the firey pits of Flixel and Kiwi.
*
@ -50,7 +50,7 @@ class Game {
}
public static VERSION: string = 'Phaser version 0.7a';
public static VERSION: string = 'Phaser version 0.8';
private _raf: RequestAnimationFrame;
private _maxAccumulation: number = 32;
@ -350,6 +350,10 @@ class Game {
return this.world.createSprite(x, y, key);
}
public createDynamicTexture(key: string, width: number, height: number): DynamicTexture {
return this.world.createDynamicTexture(key, width, height);
}
public createGroup(MaxSize?: number = 0): Group {
return this.world.createGroup(MaxSize);
}

42
Phaser/GameMath.ts
View file

@ -61,6 +61,9 @@ class GameMath {
public static EPSILON: number = 0.0001;//single float average epsilon
public static LONG_EPSILON: number = 0.00000001;//arbitrary 8 digit epsilon
public cosTable = [];
public sinTable = [];
public computeMachineEpsilon(): number {
// Machine epsilon ala Eispack
var fourThirds: number = 4.0 / 3.0;
@ -964,7 +967,7 @@ class GameMath {
* @return The rounded value of that number.
*/
public floor(Value: number): number {
var n: number = Value|0;
var n: number = Value | 0;
return (Value > 0) ? (n) : ((n != Value) ? (n - 1) : (n));
}
@ -976,10 +979,45 @@ class GameMath {
* @return The rounded value of that number.
*/
public ceil(Value: number): number {
var n: number = Value|0;
var n: number = Value | 0;
return (Value > 0) ? ((n != Value) ? (n + 1) : (n)) : (n);
}
/**
* Generate a sine and cosine table simultaneously and extremely quickly. Based on research by Franky of scene.at
* <p>
* The parameters allow you to specify the length, amplitude and frequency of the wave. Once you have called this function
* you should get the results via getSinTable() and getCosTable(). This generator is fast enough to be used in real-time.
* </p>
* @param length The length of the wave
* @param sinAmplitude The amplitude to apply to the sine table (default 1.0) if you need values between say -+ 125 then give 125 as the value
* @param cosAmplitude The amplitude to apply to the cosine table (default 1.0) if you need values between say -+ 125 then give 125 as the value
* @param frequency The frequency of the sine and cosine table data
* @return Returns the sine table
* @see getSinTable
* @see getCosTable
*/
public sinCosGenerator(length: number, sinAmplitude?: number = 1.0, cosAmplitude?: number = 1.0, frequency?: number = 1.0) {
var sin: number = sinAmplitude;
var cos: number = cosAmplitude;
var frq: number = frequency * Math.PI / length;
this.cosTable = [];
this.sinTable = [];
for (var c: number = 0; c < length; c++)
{
cos -= sin * frq;
sin += cos * frq;
this.cosTable[c] = cos;
this.sinTable[c] = sin;
}
return this.sinTable;
}
}

10
Phaser/Phaser.csproj
View file

@ -1,4 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<PropertyGroup>
<Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
@ -97,6 +97,14 @@
<TypeScriptCompile Include="Time.ts" />
<TypeScriptCompile Include="World.ts" />
</ItemGroup>
<ItemGroup>
<TypeScriptCompile Include="DynamicTexture.ts" />
</ItemGroup>
<ItemGroup>
<Content Include="DynamicTexture.js">
<DependentUpon>DynamicTexture.ts</DependentUpon>
</Content>
</ItemGroup>
<Import Project="$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets" />
<PropertyGroup>
<PostBuildEvent>cd $(ProjectDir)

81
Phaser/Sprite.ts
View file

@ -1,4 +1,5 @@
/// <reference path="Animations.ts" />
/// <reference path="DynamicTexture.ts" />
/// <reference path="GameObject.ts" />
/// <reference path="Game.ts" />
/// <reference path="GameMath.ts" />
@ -30,6 +31,7 @@ class Sprite extends GameObject {
private _texture;
private _canvas: HTMLCanvasElement;
private _context: CanvasRenderingContext2D;
private _dynamicTexture: bool = false;
public animations: Animations;
@ -45,28 +47,48 @@ class Sprite extends GameObject {
public loadGraphic(key: string): Sprite {
if (this._game.cache.isSpriteSheet(key) == false)
if (this._game.cache.getImage(key) !== null)
{
this._texture = this._game.cache.getImage(key);
this.bounds.width = this._texture.width;
this.bounds.height = this._texture.height;
}
else
{
this._texture = this._game.cache.getImage(key);
this.animations.loadFrameData(this._game.cache.getFrameData(key));
if (this._game.cache.isSpriteSheet(key) == false)
{
this._texture = this._game.cache.getImage(key);
this.bounds.width = this._texture.width;
this.bounds.height = this._texture.height;
}
else
{
this._texture = this._game.cache.getImage(key);
this.animations.loadFrameData(this._game.cache.getFrameData(key));
}
this._dynamicTexture = false;
}
return this;
}
public loadDynamicTexture(texture: DynamicTexture): Sprite {
this._texture = texture;
this.bounds.width = this._texture.width;
this.bounds.height = this._texture.height;
this._dynamicTexture = true;
return this;
}
public makeGraphic(width: number, height: number, color: number = 0xffffffff): Sprite {
this._texture = null;
this.width = width;
this.height = height;
this._dynamicTexture = false;
return this;
}
@ -143,7 +165,7 @@ class Sprite extends GameObject {
this._dw = this.bounds.width * this.scale.x;
this._dh = this.bounds.height * this.scale.y;
if (this.animations.currentFrame !== null)
if (this._dynamicTexture == false && this.animations.currentFrame !== null)
{
this._sx = this.animations.currentFrame.x;
this._sy = this.animations.currentFrame.y;
@ -187,17 +209,34 @@ class Sprite extends GameObject {
if (this._texture != null)
{
this._game.stage.context.drawImage(
this._texture, // Source Image
this._sx, // Source X (location within the source image)
this._sy, // Source Y
this._sw, // Source Width
this._sh, // Source Height
this._dx, // Destination X (where on the canvas it'll be drawn)
this._dy, // Destination Y
this._dw, // Destination Width (always same as Source Width unless scaled)
this._dh // Destination Height (always same as Source Height unless scaled)
);
if (this._dynamicTexture)
{
this._game.stage.context.drawImage(
this._texture.canvas, // Source Image
this._sx, // Source X (location within the source image)
this._sy, // Source Y
this._sw, // Source Width
this._sh, // Source Height
this._dx, // Destination X (where on the canvas it'll be drawn)
this._dy, // Destination Y
this._dw, // Destination Width (always same as Source Width unless scaled)
this._dh // Destination Height (always same as Source Height unless scaled)
);
}
else
{
this._game.stage.context.drawImage(
this._texture, // Source Image
this._sx, // Source X (location within the source image)
this._sy, // Source Y
this._sw, // Source Width
this._sh, // Source Height
this._dx, // Destination X (where on the canvas it'll be drawn)
this._dy, // Destination Y
this._dw, // Destination Width (always same as Source Width unless scaled)
this._dh // Destination Height (always same as Source Height unless scaled)
);
}
}
else
{

4
Phaser/World.ts
View file

@ -134,6 +134,10 @@ class World {
return <Sprite> this.group.add(new Sprite(this._game, x, y, key));
}
public createDynamicTexture(key:string, width: number, height: number): DynamicTexture {
return new DynamicTexture(this._game, key, width, height);
}
public createGroup(MaxSize?: number = 0): Group {
return <Group> this.group.add(new Group(this._game, MaxSize));
}

258
Phaser/phaser.js
View file

@ -10,6 +10,9 @@
*/
var GameMath = (function () {
function GameMath(game) {
//arbitrary 8 digit epsilon
this.cosTable = [];
this.sinTable = [];
/**
* The global random number generator seed (for deterministic behavior in recordings and saves).
*/
@ -50,8 +53,7 @@ var GameMath = (function () {
GameMath.PERC_EPSILON = 0.001;
GameMath.EPSILON = 0.0001;
GameMath.LONG_EPSILON = 0.00000001;
GameMath.prototype.computeMachineEpsilon = //arbitrary 8 digit epsilon
function () {
GameMath.prototype.computeMachineEpsilon = function () {
// Machine epsilon ala Eispack
var fourThirds = 4.0 / 3.0;
var third = fourThirds - 1.0;
@ -843,6 +845,37 @@ var GameMath = (function () {
var n = Value | 0;
return (Value > 0) ? ((n != Value) ? (n + 1) : (n)) : (n);
};
GameMath.prototype.sinCosGenerator = /**
* Generate a sine and cosine table simultaneously and extremely quickly. Based on research by Franky of scene.at
* <p>
* The parameters allow you to specify the length, amplitude and frequency of the wave. Once you have called this function
* you should get the results via getSinTable() and getCosTable(). This generator is fast enough to be used in real-time.
* </p>
* @param length The length of the wave
* @param sinAmplitude The amplitude to apply to the sine table (default 1.0) if you need values between say -+ 125 then give 125 as the value
* @param cosAmplitude The amplitude to apply to the cosine table (default 1.0) if you need values between say -+ 125 then give 125 as the value
* @param frequency The frequency of the sine and cosine table data
* @return Returns the sine table
* @see getSinTable
* @see getCosTable
*/
function (length, sinAmplitude, cosAmplitude, frequency) {
if (typeof sinAmplitude === "undefined") { sinAmplitude = 1.0; }
if (typeof cosAmplitude === "undefined") { cosAmplitude = 1.0; }
if (typeof frequency === "undefined") { frequency = 1.0; }
var sin = sinAmplitude;
var cos = cosAmplitude;
var frq = frequency * Math.PI / length;
this.cosTable = [];
this.sinTable = [];
for(var c = 0; c < length; c++) {
cos -= sin * frq;
sin += cos * frq;
this.cosTable[c] = cos;
this.sinTable[c] = sin;
}
return this.sinTable;
};
return GameMath;
})();
/**
@ -2225,6 +2258,153 @@ var Basic = (function () {
};
return Basic;
})();
/// <reference path="Game.ts" />
var DynamicTexture = (function () {
function DynamicTexture(game, key, width, height) {
this._sx = 0;
this._sy = 0;
this._sw = 0;
this._sh = 0;
this._dx = 0;
this._dy = 0;
this._dw = 0;
this._dh = 0;
this._game = game;
this.canvas = document.createElement('canvas');
this.canvas.width = width;
this.canvas.height = height;
this.context = this.canvas.getContext('2d');
this.bounds = new Rectangle(0, 0, width, height);
}
DynamicTexture.prototype.getPixel = function (x, y) {
//r = imageData.data[0];
//g = imageData.data[1];
//b = imageData.data[2];
//a = imageData.data[3];
var imageData = this.context.getImageData(x, y, 1, 1);
return this.getColor(imageData.data[0], imageData.data[1], imageData.data[2]);
};
DynamicTexture.prototype.getPixel32 = function (x, y) {
var imageData = this.context.getImageData(x, y, 1, 1);
return this.getColor32(imageData.data[3], imageData.data[0], imageData.data[1], imageData.data[2]);
};
DynamicTexture.prototype.getPixels = // Returns a CanvasPixelArray
function (rect) {
return this.context.getImageData(rect.x, rect.y, rect.width, rect.height);
};
DynamicTexture.prototype.setPixel = function (x, y, color) {
this.context.fillStyle = color;
this.context.fillRect(x, y, 1, 1);
};
DynamicTexture.prototype.setPixel32 = function (x, y, color) {
this.context.fillStyle = color;
this.context.fillRect(x, y, 1, 1);
};
DynamicTexture.prototype.setPixels = function (rect, input) {
this.context.putImageData(input, rect.x, rect.y);
};
DynamicTexture.prototype.fillRect = function (rect, color) {
this.context.fillStyle = color;
this.context.fillRect(rect.x, rect.y, rect.width, rect.height);
};
DynamicTexture.prototype.pasteImage = function (key, frame, destX, destY, destWidth, destHeight) {
if (typeof frame === "undefined") { frame = -1; }
if (typeof destX === "undefined") { destX = 0; }
if (typeof destY === "undefined") { destY = 0; }
if (typeof destWidth === "undefined") { destWidth = null; }
if (typeof destHeight === "undefined") { destHeight = null; }
var texture = null;
var frameData;
this._sx = 0;
this._sy = 0;
this._dx = destX;
this._dy = destY;
// TODO - Load a frame from a sprite sheet, otherwise we'll draw the whole lot
if(frame > -1) {
//if (this._game.cache.isSpriteSheet(key))
//{
// texture = this._game.cache.getImage(key);
//this.animations.loadFrameData(this._game.cache.getFrameData(key));
//}
} else {
texture = this._game.cache.getImage(key);
this._sw = texture.width;
this._sh = texture.height;
this._dw = texture.width;
this._dh = texture.height;
}
if(destWidth !== null) {
this._dw = destWidth;
}
if(destHeight !== null) {
this._dh = destHeight;
}
if(texture != null) {
this.context.drawImage(texture, // Source Image
this._sx, // Source X (location within the source image)
this._sy, // Source Y
this._sw, // Source Width
this._sh, // Source Height
this._dx, // Destination X (where on the canvas it'll be drawn)
this._dy, // Destination Y
this._dw, // Destination Width (always same as Source Width unless scaled)
this._dh);
// Destination Height (always same as Source Height unless scaled)
}
};
DynamicTexture.prototype.copyPixels = // TODO - Add in support for: alphaBitmapData: BitmapData = null, alphaPoint: Point = null, mergeAlpha: bool = false
function (sourceTexture, sourceRect, destPoint) {
// Swap for drawImage if the sourceRect is the same size as the sourceTexture to avoid a costly getImageData call
if(sourceRect.equals(this.bounds) == true) {
this.context.drawImage(sourceTexture.canvas, destPoint.x, destPoint.y);
} else {
this.context.putImageData(sourceTexture.getPixels(sourceRect), destPoint.x, destPoint.y);
}
};
DynamicTexture.prototype.clear = function () {
this.context.clearRect(0, 0, this.bounds.width, this.bounds.height);
};
Object.defineProperty(DynamicTexture.prototype, "width", {
get: function () {
return this.bounds.width;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DynamicTexture.prototype, "height", {
get: function () {
return this.bounds.height;
},
enumerable: true,
configurable: true
});
DynamicTexture.prototype.getColor32 = /**
* Given an alpha and 3 color values this will return an integer representation of it
*
* @param alpha The Alpha value (between 0 and 255)
* @param red The Red channel value (between 0 and 255)
* @param green The Green channel value (between 0 and 255)
* @param blue The Blue channel value (between 0 and 255)
*
* @return A native color value integer (format: 0xAARRGGBB)
*/
function (alpha, red, green, blue) {
return alpha << 24 | red << 16 | green << 8 | blue;
};
DynamicTexture.prototype.getColor = /**
* Given 3 color values this will return an integer representation of it
*
* @param red The Red channel value (between 0 and 255)
* @param green The Green channel value (between 0 and 255)
* @param blue The Blue channel value (between 0 and 255)
*
* @return A native color value integer (format: 0xRRGGBB)
*/
function (red, green, blue) {
return red << 16 | green << 8 | blue;
};
return DynamicTexture;
})();
var __extends = this.__extends || function (d, b) {
function __() { this.constructor = d; }
__.prototype = b.prototype;
@ -2624,6 +2804,7 @@ var GameObject = (function (_super) {
return GameObject;
})(Basic);
/// <reference path="Animations.ts" />
/// <reference path="DynamicTexture.ts" />
/// <reference path="GameObject.ts" />
/// <reference path="Game.ts" />
/// <reference path="GameMath.ts" />
@ -2636,6 +2817,7 @@ var Sprite = (function (_super) {
if (typeof y === "undefined") { y = 0; }
if (typeof key === "undefined") { key = null; }
_super.call(this, game, x, y);
this._dynamicTexture = false;
// local rendering related temp vars to help avoid gc spikes
this._sx = 0;
this._sy = 0;
@ -2655,21 +2837,32 @@ var Sprite = (function (_super) {
}
}
Sprite.prototype.loadGraphic = function (key) {
if(this._game.cache.isSpriteSheet(key) == false) {
this._texture = this._game.cache.getImage(key);
this.bounds.width = this._texture.width;
this.bounds.height = this._texture.height;
} else {
this._texture = this._game.cache.getImage(key);
this.animations.loadFrameData(this._game.cache.getFrameData(key));
if(this._game.cache.getImage(key) !== null) {
if(this._game.cache.isSpriteSheet(key) == false) {
this._texture = this._game.cache.getImage(key);
this.bounds.width = this._texture.width;
this.bounds.height = this._texture.height;
} else {
this._texture = this._game.cache.getImage(key);
this.animations.loadFrameData(this._game.cache.getFrameData(key));
}
this._dynamicTexture = false;
}
return this;
};
Sprite.prototype.loadDynamicTexture = function (texture) {
this._texture = texture;
this.bounds.width = this._texture.width;
this.bounds.height = this._texture.height;
this._dynamicTexture = true;
return this;
};
Sprite.prototype.makeGraphic = function (width, height, color) {
if (typeof color === "undefined") { color = 0xffffffff; }
this._texture = null;
this.width = width;
this.height = height;
this._dynamicTexture = false;
return this;
};
Sprite.prototype.inCamera = function (camera) {
@ -2731,7 +2924,7 @@ var Sprite = (function (_super) {
this._dy = cameraOffsetY + (this.bounds.y - camera.worldView.y);
this._dw = this.bounds.width * this.scale.x;
this._dh = this.bounds.height * this.scale.y;
if(this.animations.currentFrame !== null) {
if(this._dynamicTexture == false && this.animations.currentFrame !== null) {
this._sx = this.animations.currentFrame.x;
this._sy = this.animations.currentFrame.y;
if(this.animations.currentFrame.trimmed) {
@ -2764,17 +2957,30 @@ var Sprite = (function (_super) {
//this._game.stage.context.fillStyle = 'rgba(255,0,0,0.3)';
//this._game.stage.context.fillRect(this._dx, this._dy, this._dw, this._dh);
if(this._texture != null) {
this._game.stage.context.drawImage(this._texture, // Source Image
this._sx, // Source X (location within the source image)
this._sy, // Source Y
this._sw, // Source Width
this._sh, // Source Height
this._dx, // Destination X (where on the canvas it'll be drawn)
this._dy, // Destination Y
this._dw, // Destination Width (always same as Source Width unless scaled)
this._dh);
// Destination Height (always same as Source Height unless scaled)
} else {
if(this._dynamicTexture) {
this._game.stage.context.drawImage(this._texture.canvas, // Source Image
this._sx, // Source X (location within the source image)
this._sy, // Source Y
this._sw, // Source Width
this._sh, // Source Height
this._dx, // Destination X (where on the canvas it'll be drawn)
this._dy, // Destination Y
this._dw, // Destination Width (always same as Source Width unless scaled)
this._dh);
// Destination Height (always same as Source Height unless scaled)
} else {
this._game.stage.context.drawImage(this._texture, // Source Image
this._sx, // Source X (location within the source image)
this._sy, // Source Y
this._sw, // Source Width
this._sh, // Source Height
this._dx, // Destination X (where on the canvas it'll be drawn)
this._dy, // Destination Y
this._dw, // Destination Width (always same as Source Width unless scaled)
this._dh);
// Destination Height (always same as Source Height unless scaled)
}
} else {
this._game.stage.context.fillStyle = 'rgb(255,255,255)';
this._game.stage.context.fillRect(this._dx, this._dy, this._dw, this._dh);
}
@ -5297,6 +5503,9 @@ var World = (function () {
if (typeof key === "undefined") { key = ''; }
return this.group.add(new Sprite(this._game, x, y, key));
};
World.prototype.createDynamicTexture = function (key, width, height) {
return new DynamicTexture(this._game, key, width, height);
};
World.prototype.createGroup = function (MaxSize) {
if (typeof MaxSize === "undefined") { MaxSize = 0; }
return this.group.add(new Group(this._game, MaxSize));
@ -7932,7 +8141,7 @@ var Device = (function () {
/**
* Phaser
*
* v0.7a - April 15th 2013
* v0.8 - April 15th 2013
*
* A small and feature-packed 2D canvas game framework born from the firey pits of Flixel and Kiwi.
*
@ -7978,7 +8187,7 @@ var Game = (function () {
}, false);
}
}
Game.VERSION = 'Phaser version 0.7a';
Game.VERSION = 'Phaser version 0.8';
Game.prototype.boot = function (parent, width, height) {
var _this = this;
if(!document.body) {
@ -8171,6 +8380,9 @@ var Game = (function () {
if (typeof key === "undefined") { key = ''; }
return this.world.createSprite(x, y, key);
};
Game.prototype.createDynamicTexture = function (key, width, height) {
return this.world.createDynamicTexture(key, width, height);
};
Game.prototype.createGroup = function (MaxSize) {
if (typeof MaxSize === "undefined") { MaxSize = 0; }
return this.world.createGroup(MaxSize);

2
README.md
View file

@ -22,6 +22,8 @@ V0.8
Added ability to set Sprite frame by name (sprite.frameName), useful when you've loaded a Texture Atlas with filename values set rather than using frame indexes.
Updated texture atlas 4 demo to show this.
Fixed a bug that would cause a run-time error if you tried to create a sprite using an invalid texture key.
Added in DynamicTexture support and atest case for it.
V0.7

12
Tests/Tests.csproj
View file

@ -92,5 +92,17 @@
<ItemGroup>
<Folder Include="mobile\" />
</ItemGroup>
<ItemGroup>
<TypeScriptCompile Include="sprites\dynamic texture 1.ts" />
</ItemGroup>
<ItemGroup>
<Content Include="sprites\dynamic texture 1.js">
<DependentUpon>dynamic texture 1.ts</DependentUpon>
</Content>
<Content Include="sprites\dynamic texture 2.js">
<DependentUpon>dynamic texture 2.ts</DependentUpon>
</Content>
<TypeScriptCompile Include="sprites\dynamic texture 2.ts" />
</ItemGroup>
<Import Project="$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets" />
</Project>

BIN
Tests/assets/pics/arte-fractal.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.4 MiB

BIN
Tests/assets/sprites/blast.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.6 MiB

BIN
Tests/assets/sprites/slime.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 584 B

BIN
Tests/assets/sprites/slimeeyes.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 257 B

258
Tests/phaser.js
View file

@ -10,6 +10,9 @@
*/
var GameMath = (function () {
function GameMath(game) {
//arbitrary 8 digit epsilon
this.cosTable = [];
this.sinTable = [];
/**
* The global random number generator seed (for deterministic behavior in recordings and saves).
*/
@ -50,8 +53,7 @@ var GameMath = (function () {
GameMath.PERC_EPSILON = 0.001;
GameMath.EPSILON = 0.0001;
GameMath.LONG_EPSILON = 0.00000001;
GameMath.prototype.computeMachineEpsilon = //arbitrary 8 digit epsilon
function () {
GameMath.prototype.computeMachineEpsilon = function () {
// Machine epsilon ala Eispack
var fourThirds = 4.0 / 3.0;
var third = fourThirds - 1.0;
@ -843,6 +845,37 @@ var GameMath = (function () {
var n = Value | 0;
return (Value > 0) ? ((n != Value) ? (n + 1) : (n)) : (n);
};
GameMath.prototype.sinCosGenerator = /**
* Generate a sine and cosine table simultaneously and extremely quickly. Based on research by Franky of scene.at
* <p>
* The parameters allow you to specify the length, amplitude and frequency of the wave. Once you have called this function
* you should get the results via getSinTable() and getCosTable(). This generator is fast enough to be used in real-time.
* </p>
* @param length The length of the wave
* @param sinAmplitude The amplitude to apply to the sine table (default 1.0) if you need values between say -+ 125 then give 125 as the value
* @param cosAmplitude The amplitude to apply to the cosine table (default 1.0) if you need values between say -+ 125 then give 125 as the value
* @param frequency The frequency of the sine and cosine table data
* @return Returns the sine table
* @see getSinTable
* @see getCosTable
*/
function (length, sinAmplitude, cosAmplitude, frequency) {
if (typeof sinAmplitude === "undefined") { sinAmplitude = 1.0; }
if (typeof cosAmplitude === "undefined") { cosAmplitude = 1.0; }
if (typeof frequency === "undefined") { frequency = 1.0; }
var sin = sinAmplitude;
var cos = cosAmplitude;
var frq = frequency * Math.PI / length;
this.cosTable = [];
this.sinTable = [];
for(var c = 0; c < length; c++) {
cos -= sin * frq;
sin += cos * frq;
this.cosTable[c] = cos;
this.sinTable[c] = sin;
}
return this.sinTable;
};
return GameMath;
})();
/**
@ -2225,6 +2258,153 @@ var Basic = (function () {
};
return Basic;
})();
/// <reference path="Game.ts" />
var DynamicTexture = (function () {
function DynamicTexture(game, key, width, height) {
this._sx = 0;
this._sy = 0;
this._sw = 0;
this._sh = 0;
this._dx = 0;
this._dy = 0;
this._dw = 0;
this._dh = 0;
this._game = game;
this.canvas = document.createElement('canvas');
this.canvas.width = width;
this.canvas.height = height;
this.context = this.canvas.getContext('2d');
this.bounds = new Rectangle(0, 0, width, height);
}
DynamicTexture.prototype.getPixel = function (x, y) {
//r = imageData.data[0];
//g = imageData.data[1];
//b = imageData.data[2];
//a = imageData.data[3];
var imageData = this.context.getImageData(x, y, 1, 1);
return this.getColor(imageData.data[0], imageData.data[1], imageData.data[2]);
};
DynamicTexture.prototype.getPixel32 = function (x, y) {
var imageData = this.context.getImageData(x, y, 1, 1);
return this.getColor32(imageData.data[3], imageData.data[0], imageData.data[1], imageData.data[2]);
};
DynamicTexture.prototype.getPixels = // Returns a CanvasPixelArray
function (rect) {
return this.context.getImageData(rect.x, rect.y, rect.width, rect.height);
};
DynamicTexture.prototype.setPixel = function (x, y, color) {
this.context.fillStyle = color;
this.context.fillRect(x, y, 1, 1);
};
DynamicTexture.prototype.setPixel32 = function (x, y, color) {
this.context.fillStyle = color;
this.context.fillRect(x, y, 1, 1);
};
DynamicTexture.prototype.setPixels = function (rect, input) {
this.context.putImageData(input, rect.x, rect.y);
};
DynamicTexture.prototype.fillRect = function (rect, color) {
this.context.fillStyle = color;
this.context.fillRect(rect.x, rect.y, rect.width, rect.height);
};
DynamicTexture.prototype.pasteImage = function (key, frame, destX, destY, destWidth, destHeight) {
if (typeof frame === "undefined") { frame = -1; }
if (typeof destX === "undefined") { destX = 0; }
if (typeof destY === "undefined") { destY = 0; }
if (typeof destWidth === "undefined") { destWidth = null; }
if (typeof destHeight === "undefined") { destHeight = null; }
var texture = null;
var frameData;
this._sx = 0;
this._sy = 0;
this._dx = destX;
this._dy = destY;
// TODO - Load a frame from a sprite sheet, otherwise we'll draw the whole lot
if(frame > -1) {
//if (this._game.cache.isSpriteSheet(key))
//{
// texture = this._game.cache.getImage(key);
//this.animations.loadFrameData(this._game.cache.getFrameData(key));
//}
} else {
texture = this._game.cache.getImage(key);
this._sw = texture.width;
this._sh = texture.height;
this._dw = texture.width;
this._dh = texture.height;
}
if(destWidth !== null) {
this._dw = destWidth;
}
if(destHeight !== null) {
this._dh = destHeight;
}
if(texture != null) {
this.context.drawImage(texture, // Source Image
this._sx, // Source X (location within the source image)
this._sy, // Source Y
this._sw, // Source Width
this._sh, // Source Height
this._dx, // Destination X (where on the canvas it'll be drawn)
this._dy, // Destination Y
this._dw, // Destination Width (always same as Source Width unless scaled)
this._dh);
// Destination Height (always same as Source Height unless scaled)
}
};
DynamicTexture.prototype.copyPixels = // TODO - Add in support for: alphaBitmapData: BitmapData = null, alphaPoint: Point = null, mergeAlpha: bool = false
function (sourceTexture, sourceRect, destPoint) {
// Swap for drawImage if the sourceRect is the same size as the sourceTexture to avoid a costly getImageData call
if(sourceRect.equals(this.bounds) == true) {
this.context.drawImage(sourceTexture.canvas, destPoint.x, destPoint.y);
} else {
this.context.putImageData(sourceTexture.getPixels(sourceRect), destPoint.x, destPoint.y);
}
};
DynamicTexture.prototype.clear = function () {
this.context.clearRect(0, 0, this.bounds.width, this.bounds.height);
};
Object.defineProperty(DynamicTexture.prototype, "width", {
get: function () {
return this.bounds.width;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DynamicTexture.prototype, "height", {
get: function () {
return this.bounds.height;
},
enumerable: true,
configurable: true
});
DynamicTexture.prototype.getColor32 = /**
* Given an alpha and 3 color values this will return an integer representation of it
*
* @param alpha The Alpha value (between 0 and 255)
* @param red The Red channel value (between 0 and 255)
* @param green The Green channel value (between 0 and 255)
* @param blue The Blue channel value (between 0 and 255)
*
* @return A native color value integer (format: 0xAARRGGBB)
*/
function (alpha, red, green, blue) {
return alpha << 24 | red << 16 | green << 8 | blue;
};
DynamicTexture.prototype.getColor = /**
* Given 3 color values this will return an integer representation of it
*
* @param red The Red channel value (between 0 and 255)
* @param green The Green channel value (between 0 and 255)
* @param blue The Blue channel value (between 0 and 255)
*
* @return A native color value integer (format: 0xRRGGBB)
*/
function (red, green, blue) {
return red << 16 | green << 8 | blue;
};
return DynamicTexture;
})();
var __extends = this.__extends || function (d, b) {
function __() { this.constructor = d; }
__.prototype = b.prototype;
@ -2624,6 +2804,7 @@ var GameObject = (function (_super) {
return GameObject;
})(Basic);
/// <reference path="Animations.ts" />
/// <reference path="DynamicTexture.ts" />
/// <reference path="GameObject.ts" />
/// <reference path="Game.ts" />
/// <reference path="GameMath.ts" />
@ -2636,6 +2817,7 @@ var Sprite = (function (_super) {
if (typeof y === "undefined") { y = 0; }
if (typeof key === "undefined") { key = null; }
_super.call(this, game, x, y);
this._dynamicTexture = false;
// local rendering related temp vars to help avoid gc spikes
this._sx = 0;
this._sy = 0;
@ -2655,21 +2837,32 @@ var Sprite = (function (_super) {
}
}
Sprite.prototype.loadGraphic = function (key) {
if(this._game.cache.isSpriteSheet(key) == false) {
this._texture = this._game.cache.getImage(key);
this.bounds.width = this._texture.width;
this.bounds.height = this._texture.height;
} else {
this._texture = this._game.cache.getImage(key);
this.animations.loadFrameData(this._game.cache.getFrameData(key));
if(this._game.cache.getImage(key) !== null) {
if(this._game.cache.isSpriteSheet(key) == false) {
this._texture = this._game.cache.getImage(key);
this.bounds.width = this._texture.width;
this.bounds.height = this._texture.height;
} else {
this._texture = this._game.cache.getImage(key);
this.animations.loadFrameData(this._game.cache.getFrameData(key));
}
this._dynamicTexture = false;
}
return this;
};
Sprite.prototype.loadDynamicTexture = function (texture) {
this._texture = texture;
this.bounds.width = this._texture.width;
this.bounds.height = this._texture.height;
this._dynamicTexture = true;
return this;
};
Sprite.prototype.makeGraphic = function (width, height, color) {
if (typeof color === "undefined") { color = 0xffffffff; }
this._texture = null;
this.width = width;
this.height = height;
this._dynamicTexture = false;
return this;
};
Sprite.prototype.inCamera = function (camera) {
@ -2731,7 +2924,7 @@ var Sprite = (function (_super) {
this._dy = cameraOffsetY + (this.bounds.y - camera.worldView.y);
this._dw = this.bounds.width * this.scale.x;
this._dh = this.bounds.height * this.scale.y;
if(this.animations.currentFrame !== null) {
if(this._dynamicTexture == false && this.animations.currentFrame !== null) {
this._sx = this.animations.currentFrame.x;
this._sy = this.animations.currentFrame.y;
if(this.animations.currentFrame.trimmed) {
@ -2764,17 +2957,30 @@ var Sprite = (function (_super) {
//this._game.stage.context.fillStyle = 'rgba(255,0,0,0.3)';
//this._game.stage.context.fillRect(this._dx, this._dy, this._dw, this._dh);
if(this._texture != null) {
this._game.stage.context.drawImage(this._texture, // Source Image
this._sx, // Source X (location within the source image)
this._sy, // Source Y
this._sw, // Source Width
this._sh, // Source Height
this._dx, // Destination X (where on the canvas it'll be drawn)
this._dy, // Destination Y
this._dw, // Destination Width (always same as Source Width unless scaled)
this._dh);
// Destination Height (always same as Source Height unless scaled)
} else {
if(this._dynamicTexture) {
this._game.stage.context.drawImage(this._texture.canvas, // Source Image
this._sx, // Source X (location within the source image)
this._sy, // Source Y
this._sw, // Source Width
this._sh, // Source Height
this._dx, // Destination X (where on the canvas it'll be drawn)
this._dy, // Destination Y
this._dw, // Destination Width (always same as Source Width unless scaled)
this._dh);
// Destination Height (always same as Source Height unless scaled)
} else {
this._game.stage.context.drawImage(this._texture, // Source Image
this._sx, // Source X (location within the source image)
this._sy, // Source Y
this._sw, // Source Width
this._sh, // Source Height
this._dx, // Destination X (where on the canvas it'll be drawn)
this._dy, // Destination Y
this._dw, // Destination Width (always same as Source Width unless scaled)
this._dh);
// Destination Height (always same as Source Height unless scaled)
}
} else {
this._game.stage.context.fillStyle = 'rgb(255,255,255)';
this._game.stage.context.fillRect(this._dx, this._dy, this._dw, this._dh);
}
@ -5297,6 +5503,9 @@ var World = (function () {
if (typeof key === "undefined") { key = ''; }
return this.group.add(new Sprite(this._game, x, y, key));
};
World.prototype.createDynamicTexture = function (key, width, height) {
return new DynamicTexture(this._game, key, width, height);
};
World.prototype.createGroup = function (MaxSize) {
if (typeof MaxSize === "undefined") { MaxSize = 0; }
return this.group.add(new Group(this._game, MaxSize));
@ -7932,7 +8141,7 @@ var Device = (function () {
/**
* Phaser
*
* v0.7a - April 15th 2013
* v0.8 - April 15th 2013
*
* A small and feature-packed 2D canvas game framework born from the firey pits of Flixel and Kiwi.
*
@ -7978,7 +8187,7 @@ var Game = (function () {
}, false);
}
}
Game.VERSION = 'Phaser version 0.7a';
Game.VERSION = 'Phaser version 0.8';
Game.prototype.boot = function (parent, width, height) {
var _this = this;
if(!document.body) {
@ -8171,6 +8380,9 @@ var Game = (function () {
if (typeof key === "undefined") { key = ''; }
return this.world.createSprite(x, y, key);
};
Game.prototype.createDynamicTexture = function (key, width, height) {
return this.world.createDynamicTexture(key, width, height);
};
Game.prototype.createGroup = function (MaxSize) {
if (typeof MaxSize === "undefined") { MaxSize = 0; }
return this.world.createGroup(MaxSize);

61
Tests/sprites/dynamic texture 1.js Normal file
View file

@ -0,0 +1,61 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/DynamicTexture.ts" />
/// <reference path="../../Phaser/Sprite.ts" />
(function () {
var myGame = new Game(this, 'game', 800, 600, init, create, update);
function init() {
myGame.loader.addImageFile('ball', 'assets/sprites/shinyball.png');
myGame.loader.load();
}
var wobblyBall;
function create() {
// Create our DynamicTexture
wobblyBall = myGame.createDynamicTexture('wobbly', 32, 64);
// And apply it to 100 randomly positioned sprites
for(var i = 0; i < 100; i++) {
var temp = myGame.createSprite(myGame.world.randomX, myGame.world.randomY);
temp.width = 32;
temp.height = 64;
temp.loadDynamicTexture(wobblyBall);
}
// Populate the wave with some data
waveData = myGame.math.sinCosGenerator(32, 8, 8, 2);
}
function update() {
wobblyBall.clear();
updateWobblyBall();
}
// This creates a simple sine-wave effect running through our DynamicTexture.
// This is then duplicated across all sprites using it, meaning we only have to calculate it once.
var waveSize = 8;
var wavePixelChunk = 2;
var waveData;
var waveDataCounter;
function updateWobblyBall() {
var s = 0;
var copyRect = {
x: 0,
y: 0,
w: wavePixelChunk,
h: 32
};
var copyPoint = {
x: 0,
y: 0
};
for(var x = 0; x < 32; x += wavePixelChunk) {
copyPoint.x = x;
copyPoint.y = waveSize + (waveSize / 2) + waveData[s];
wobblyBall.context.drawImage(myGame.cache.getImage('ball'), copyRect.x, copyRect.y, copyRect.w, copyRect.h, copyPoint.x, copyPoint.y, copyRect.w, copyRect.h);
copyRect.x += wavePixelChunk;
s++;
}
// Cycle through the wave data - this is what causes the image to "undulate"
var t = waveData.shift();
waveData.push(t);
waveDataCounter++;
if(waveDataCounter == waveData.length) {
waveDataCounter = 0;
}
}
})();

84
Tests/sprites/dynamic texture 1.ts Normal file
View file

@ -0,0 +1,84 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/DynamicTexture.ts" />
/// <reference path="../../Phaser/Sprite.ts" />
(function () {
var myGame = new Game(this, 'game', 800, 600, init, create, update);
function init() {
myGame.loader.addImageFile('ball', 'assets/sprites/shinyball.png');
myGame.loader.load();
}
var wobblyBall: DynamicTexture;
function create() {
// Create our DynamicTexture
wobblyBall = myGame.createDynamicTexture('wobbly', 32, 64);
// And apply it to 100 randomly positioned sprites
for (var i = 0; i < 100; i++)
{
var temp = myGame.createSprite(myGame.world.randomX, myGame.world.randomY);
temp.width = 32;
temp.height = 64;
temp.loadDynamicTexture(wobblyBall);
}
// Populate the wave with some data
waveData = myGame.math.sinCosGenerator(32, 8, 8, 2);
}
function update() {
wobblyBall.clear();
updateWobblyBall();
}
// This creates a simple sine-wave effect running through our DynamicTexture.
// This is then duplicated across all sprites using it, meaning we only have to calculate it once.
var waveSize = 8;
var wavePixelChunk = 2;
var waveData;
var waveDataCounter;
function updateWobblyBall()
{
var s = 0;
var copyRect = { x: 0, y: 0, w: wavePixelChunk, h: 32 };
var copyPoint = { x: 0, y: 0 };
for (var x = 0; x < 32; x += wavePixelChunk)
{
copyPoint.x = x;
copyPoint.y = waveSize + (waveSize / 2) + waveData[s];
wobblyBall.context.drawImage(myGame.cache.getImage('ball'), copyRect.x, copyRect.y, copyRect.w, copyRect.h, copyPoint.x, copyPoint.y, copyRect.w, copyRect.h);
copyRect.x += wavePixelChunk;
s++;
}
// Cycle through the wave data - this is what causes the image to "undulate"
var t = waveData.shift();
waveData.push(t);
waveDataCounter++;
if (waveDataCounter == waveData.length)
{
waveDataCounter = 0;
}
}
})();

79
Tests/sprites/dynamic texture 2.js Normal file
View file

@ -0,0 +1,79 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/Sprite.ts" />
(function () {
var myGame = new Game(this, 'game', 800, 600, init, create, update);
function init() {
myGame.loader.addImageFile('slime', 'assets/sprites/slime.png');
myGame.loader.addImageFile('eyes', 'assets/sprites/slimeeyes.png');
myGame.loader.load();
}
var slime;
var eyes;
var wobble;
function create() {
myGame.camera.backgroundColor = 'rgb(82,154,206)';
// Create our DynamicTexture
wobble = myGame.createDynamicTexture('wobbly', 48, 100);
slime = myGame.createSprite(200, 300);
slime.width = 48;
slime.height = 100;
slime.loadDynamicTexture(wobble);
eyes = myGame.createSprite(210, 326, 'eyes');
// Populate the wave with some data
waveData = myGame.math.sinCosGenerator(32, 8, 8, 2);
}
function update() {
wobble.clear();
updateWobble();
slime.velocity.x = 0;
slime.velocity.y = 0;
slime.angularVelocity = 0;
eyes.velocity.x = 0;
eyes.velocity.y = 0;
eyes.angularVelocity = 0;
if(myGame.input.keyboard.isDown(Keyboard.LEFT)) {
slime.angularVelocity = -200;
eyes.angularVelocity = -200;
} else if(myGame.input.keyboard.isDown(Keyboard.RIGHT)) {
slime.angularVelocity = 200;
eyes.angularVelocity = 200;
}
if(myGame.input.keyboard.isDown(Keyboard.UP)) {
slime.velocity.copyFrom(myGame.math.velocityFromAngle(slime.angle, 200));
eyes.velocity.copyFrom(myGame.math.velocityFromAngle(slime.angle, 200));
}
}
// This creates a simple sine-wave effect running through our DynamicTexture.
// This is then duplicated across all sprites using it, meaning we only have to calculate it once.
var waveSize = 8;
var wavePixelChunk = 2;
var waveData;
var waveDataCounter;
function updateWobble() {
var s = 0;
var copyRect = {
x: 0,
y: 0,
w: wavePixelChunk,
h: 52
};
var copyPoint = {
x: 0,
y: 0
};
for(var x = 0; x < 48; x += wavePixelChunk) {
copyPoint.x = x;
copyPoint.y = waveSize + (waveSize / 2) + waveData[s];
wobble.context.drawImage(myGame.cache.getImage('slime'), copyRect.x, copyRect.y, copyRect.w, copyRect.h, copyPoint.x, copyPoint.y, copyRect.w, copyRect.h);
copyRect.x += wavePixelChunk;
s++;
}
// Cycle through the wave data - this is what causes the image to "undulate"
var t = waveData.shift();
waveData.push(t);
waveDataCounter++;
if(waveDataCounter == waveData.length) {
waveDataCounter = 0;
}
}
})();

110
Tests/sprites/dynamic texture 2.ts Normal file
View file

@ -0,0 +1,110 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/Sprite.ts" />
(function () {
var myGame = new Game(this, 'game', 800, 600, init, create, update);
function init() {
myGame.loader.addImageFile('slime', 'assets/sprites/slime.png');
myGame.loader.addImageFile('eyes', 'assets/sprites/slimeeyes.png');
myGame.loader.load();
}
var slime: Sprite;
var eyes: Sprite;
var wobble: DynamicTexture;
function create() {
myGame.camera.backgroundColor = 'rgb(82,154,206)';
// Create our DynamicTexture
wobble = myGame.createDynamicTexture('wobbly', 48, 100);
slime = myGame.createSprite(200, 300);
slime.width = 48;
slime.height = 100;
slime.loadDynamicTexture(wobble);
eyes = myGame.createSprite(210, 326, 'eyes');
// Populate the wave with some data
waveData = myGame.math.sinCosGenerator(32, 8, 8, 2);
}
function update() {
wobble.clear();
updateWobble();
slime.velocity.x = 0;
slime.velocity.y = 0;
slime.angularVelocity = 0;
eyes.velocity.x = 0;
eyes.velocity.y = 0;
eyes.angularVelocity = 0;
if (myGame.input.keyboard.isDown(Keyboard.LEFT))
{
slime.angularVelocity = -200;
eyes.angularVelocity = -200;
}
else if (myGame.input.keyboard.isDown(Keyboard.RIGHT))
{
slime.angularVelocity = 200;
eyes.angularVelocity = 200;
}
if (myGame.input.keyboard.isDown(Keyboard.UP))
{
slime.velocity.copyFrom(myGame.math.velocityFromAngle(slime.angle, 200));
eyes.velocity.copyFrom(myGame.math.velocityFromAngle(slime.angle, 200));
}
}
// This creates a simple sine-wave effect running through our DynamicTexture.
// This is then duplicated across all sprites using it, meaning we only have to calculate it once.
var waveSize = 8;
var wavePixelChunk = 2;
var waveData;
var waveDataCounter;
function updateWobble()
{
var s = 0;
var copyRect = { x: 0, y: 0, w: wavePixelChunk, h: 52 };
var copyPoint = { x: 0, y: 0 };
for (var x = 0; x < 48; x += wavePixelChunk)
{
copyPoint.x = x;
copyPoint.y = waveSize + (waveSize / 2) + waveData[s];
wobble.context.drawImage(myGame.cache.getImage('slime'), copyRect.x, copyRect.y, copyRect.w, copyRect.h, copyPoint.x, copyPoint.y, copyRect.w, copyRect.h);
copyRect.x += wavePixelChunk;
s++;
}
// Cycle through the wave data - this is what causes the image to "undulate"
var t = waveData.shift();
waveData.push(t);
waveDataCounter++;
if (waveDataCounter == waveData.length)
{
waveDataCounter = 0;
}
}
})();

8983
build/phaser-08.js Normal file
View file

File diff suppressed because it is too large Load diff

1
build/phaser-08.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long