Skip to content

Commit 25a59b9

Browse files
photonstormphotonstorm
committed
V0.8 - added DynamicTexture support and 2 examples, plus animation frame names and removed a few bugs.
1 parent f4bf6c6 commit 25a59b9

20 files changed

Lines changed: 10126 additions & 72 deletions

‎Phaser/DynamicTexture.ts‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
/// <reference path="Game.ts" />
2+
3+
class DynamicTexture {
4+
5+
constructor(game: Game, key: string, width: number, height: number) {
6+
7+
this._game = game;
8+
9+
this.canvas = <HTMLCanvasElement> document.createElement('canvas');
10+
this.canvas.width = width;
11+
this.canvas.height = height;
12+
this.context = this.canvas.getContext('2d');
13+
14+
this.bounds = new Rectangle(0, 0, width, height);
15+
16+
}
17+
18+
private _game: Game;
19+
20+
private _sx: number = 0;
21+
private _sy: number = 0;
22+
private _sw: number = 0;
23+
private _sh: number = 0;
24+
private _dx: number = 0;
25+
private _dy: number = 0;
26+
private _dw: number = 0;
27+
private _dh: number = 0;
28+
29+
// Input / Output nodes?
30+
31+
public bounds: Rectangle;
32+
public canvas: HTMLCanvasElement;
33+
public context: CanvasRenderingContext2D;
34+
35+
public getPixel(x: number, y: number): number {
36+
37+
//r = imageData.data[0];
38+
//g = imageData.data[1];
39+
//b = imageData.data[2];
40+
//a = imageData.data[3];
41+
var imageData = this.context.getImageData(x, y, 1, 1);
42+
43+
return this.getColor(imageData.data[0], imageData.data[1], imageData.data[2]);
44+
45+
}
46+
47+
public getPixel32(x: number, y: number) {
48+
49+
var imageData = this.context.getImageData(x, y, 1, 1);
50+
51+
return this.getColor32(imageData.data[3], imageData.data[0], imageData.data[1], imageData.data[2]);
52+
53+
}
54+
55+
// Returns a CanvasPixelArray
56+
public getPixels(rect:Rectangle) {
57+
58+
return this.context.getImageData(rect.x, rect.y, rect.width, rect.height);
59+
60+
}
61+
62+
public setPixel(x: number, y: number, color:number) {
63+
64+
this.context.fillStyle = color;
65+
this.context.fillRect(x, y, 1, 1);
66+
67+
}
68+
69+
public setPixel32(x: number, y: number, color:number) {
70+
71+
this.context.fillStyle = color;
72+
this.context.fillRect(x, y, 1, 1);
73+
74+
}
75+
76+
public setPixels(rect:Rectangle, input) {
77+
78+
this.context.putImageData(input, rect.x, rect.y);
79+
80+
}
81+
82+
public fillRect(rect: Rectangle, color: number) {
83+
84+
this.context.fillStyle = color;
85+
this.context.fillRect(rect.x, rect.y, rect.width, rect.height);
86+
87+
}
88+
89+
public pasteImage(key: string, frame?: number = -1, destX?: number = 0, destY?: number = 0, destWidth?: number = null, destHeight?: number = null) {
90+
91+
var texture = null;
92+
var frameData;
93+
94+
this._sx = 0;
95+
this._sy = 0;
96+
this._dx = destX;
97+
this._dy = destY;
98+
99+
// TODO - Load a frame from a sprite sheet, otherwise we'll draw the whole lot
100+
if (frame > -1)
101+
{
102+
//if (this._game.cache.isSpriteSheet(key))
103+
//{
104+
// texture = this._game.cache.getImage(key);
105+
//this.animations.loadFrameData(this._game.cache.getFrameData(key));
106+
//}
107+
}
108+
else
109+
{
110+
texture = this._game.cache.getImage(key);
111+
this._sw = texture.width;
112+
this._sh = texture.height;
113+
this._dw = texture.width;
114+
this._dh = texture.height;
115+
}
116+
117+
if (destWidth !== null)
118+
{
119+
this._dw = destWidth;
120+
}
121+
122+
if (destHeight !== null)
123+
{
124+
this._dh = destHeight;
125+
}
126+
127+
if (texture != null)
128+
{
129+
this.context.drawImage(
130+
texture, // Source Image
131+
this._sx, // Source X (location within the source image)
132+
this._sy, // Source Y
133+
this._sw, // Source Width
134+
this._sh, // Source Height
135+
this._dx, // Destination X (where on the canvas it'll be drawn)
136+
this._dy, // Destination Y
137+
this._dw, // Destination Width (always same as Source Width unless scaled)
138+
this._dh // Destination Height (always same as Source Height unless scaled)
139+
);
140+
}
141+
142+
}
143+
144+
// TODO - Add in support for: alphaBitmapData: BitmapData = null, alphaPoint: Point = null, mergeAlpha: bool = false
145+
public copyPixels(sourceTexture: DynamicTexture, sourceRect: Rectangle, destPoint: Point) {
146+
147+
// Swap for drawImage if the sourceRect is the same size as the sourceTexture to avoid a costly getImageData call
148+
if (sourceRect.equals(this.bounds) == true)
149+
{
150+
this.context.drawImage(sourceTexture.canvas, destPoint.x, destPoint.y);
151+
}
152+
else
153+
{
154+
this.context.putImageData(sourceTexture.getPixels(sourceRect), destPoint.x, destPoint.y);
155+
}
156+
157+
}
158+
159+
public clear() {
160+
161+
this.context.clearRect(0, 0, this.bounds.width, this.bounds.height);
162+
163+
}
164+
165+
public get width(): number {
166+
return this.bounds.width;
167+
}
168+
169+
public get height(): number {
170+
return this.bounds.height;
171+
}
172+
173+
/**
174+
* Given an alpha and 3 color values this will return an integer representation of it
175+
*
176+
* @param alpha The Alpha value (between 0 and 255)
177+
* @param red The Red channel value (between 0 and 255)
178+
* @param green The Green channel value (between 0 and 255)
179+
* @param blue The Blue channel value (between 0 and 255)
180+
*
181+
* @return A native color value integer (format: 0xAARRGGBB)
182+
*/
183+
private getColor32(alpha: number, red: number, green: number, blue: number): number {
184+
185+
return alpha << 24 | red << 16 | green << 8 | blue;
186+
187+
}
188+
189+
/**
190+
* Given 3 color values this will return an integer representation of it
191+
*
192+
* @param red The Red channel value (between 0 and 255)
193+
* @param green The Green channel value (between 0 and 255)
194+
* @param blue The Blue channel value (between 0 and 255)
195+
*
196+
* @return A native color value integer (format: 0xRRGGBB)
197+
*/
198+
private getColor(red: number, green: number, blue: number): number {
199+
200+
return red << 16 | green << 8 | blue;
201+
202+
}
203+
204+
205+
}

‎Phaser/Game.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
/**
1818
* Phaser
1919
*
20-
* v0.7a - April 15th 2013
20+
* v0.8 - April 15th 2013
2121
*
2222
* A small and feature-packed 2D canvas game framework born from the firey pits of Flixel and Kiwi.
2323
*
@@ -50,7 +50,7 @@ class Game {
5050

5151
}
5252

53-
public static VERSION: string = 'Phaser version 0.7a';
53+
public static VERSION: string = 'Phaser version 0.8';
5454

5555
private _raf: RequestAnimationFrame;
5656
private _maxAccumulation: number = 32;
@@ -350,6 +350,10 @@ class Game {
350350
return this.world.createSprite(x, y, key);
351351
}
352352

353+
public createDynamicTexture(key: string, width: number, height: number): DynamicTexture {
354+
return this.world.createDynamicTexture(key, width, height);
355+
}
356+
353357
public createGroup(MaxSize?: number = 0): Group {
354358
return this.world.createGroup(MaxSize);
355359
}

‎Phaser/GameMath.ts‎

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,9 @@ class GameMath {
6161
public static EPSILON: number = 0.0001;//single float average epsilon
6262
public static LONG_EPSILON: number = 0.00000001;//arbitrary 8 digit epsilon
6363

64+
public cosTable = [];
65+
public sinTable = [];
66+
6467
public computeMachineEpsilon(): number {
6568
// Machine epsilon ala Eispack
6669
var fourThirds: number = 4.0 / 3.0;
@@ -964,7 +967,7 @@ class GameMath {
964967
* @return The rounded value of that number.
965968
*/
966969
public floor(Value: number): number {
967-
var n: number = Value|0;
970+
var n: number = Value | 0;
968971
return (Value > 0) ? (n) : ((n != Value) ? (n - 1) : (n));
969972
}
970973

@@ -976,10 +979,45 @@ class GameMath {
976979
* @return The rounded value of that number.
977980
*/
978981
public ceil(Value: number): number {
979-
var n: number = Value|0;
982+
var n: number = Value | 0;
980983
return (Value > 0) ? ((n != Value) ? (n + 1) : (n)) : (n);
981984
}
982985

986+
/**
987+
* Generate a sine and cosine table simultaneously and extremely quickly. Based on research by Franky of scene.at
988+
* <p>
989+
* The parameters allow you to specify the length, amplitude and frequency of the wave. Once you have called this function
990+
* you should get the results via getSinTable() and getCosTable(). This generator is fast enough to be used in real-time.
991+
* </p>
992+
* @param length The length of the wave
993+
* @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
994+
* @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
995+
* @param frequency The frequency of the sine and cosine table data
996+
* @return Returns the sine table
997+
* @see getSinTable
998+
* @see getCosTable
999+
*/
1000+
public sinCosGenerator(length: number, sinAmplitude?: number = 1.0, cosAmplitude?: number = 1.0, frequency?: number = 1.0) {
1001+
1002+
var sin: number = sinAmplitude;
1003+
var cos: number = cosAmplitude;
1004+
var frq: number = frequency * Math.PI / length;
1005+
1006+
this.cosTable = [];
1007+
this.sinTable = [];
1008+
1009+
for (var c: number = 0; c < length; c++)
1010+
{
1011+
cos -= sin * frq;
1012+
sin += cos * frq;
1013+
1014+
this.cosTable[c] = cos;
1015+
this.sinTable[c] = sin;
1016+
}
1017+
1018+
return this.sinTable;
1019+
1020+
}
9831021

9841022

9851023
}

‎Phaser/Phaser.csproj‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<?xml version="1.0" encoding="utf-8"?>
1+
<?xml version="1.0" encoding="utf-8"?>
22
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
33
<PropertyGroup>
44
<Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
@@ -97,6 +97,14 @@
9797
<TypeScriptCompile Include="Time.ts" />
9898
<TypeScriptCompile Include="World.ts" />
9999
</ItemGroup>
100+
<ItemGroup>
101+
<TypeScriptCompile Include="DynamicTexture.ts" />
102+
</ItemGroup>
103+
<ItemGroup>
104+
<Content Include="DynamicTexture.js">
105+
<DependentUpon>DynamicTexture.ts</DependentUpon>
106+
</Content>
107+
</ItemGroup>
100108
<Import Project="$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets" />
101109
<PropertyGroup>
102110
<PostBuildEvent>cd $(ProjectDir)

0 commit comments

Comments
 (0)