Skip to content

Commit f885f7b

Browse files
photonstormphotonstorm
committed
Added CSS3Filters plugin. Also modified Sprite to contain preUpdate call, so that update can be over-ridden by custom Classes + added an example for this.
1 parent e2eddc8 commit f885f7b

5 files changed

Lines changed: 255 additions & 2 deletions

File tree

‎Plugins/CSS3Filters.js‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
/**
2+
* Phaser - Display - CSS3Filters
3+
*
4+
* Allows for easy addition and modification of CSS3 Filters on DOM objects (typically the Game.Stage.canvas).
5+
*/
6+
7+
Phaser.Plugins.CSS3Filters = function (parent) {
8+
9+
this.parent = parent;
10+
11+
this._blur = 0;
12+
this._grayscale = 0;
13+
this._sepia = 0;
14+
this._brightness = 0;
15+
this._contrast = 0;
16+
this._hueRotate = 0;
17+
this._invert = 0;
18+
this._opacity = 0;
19+
this._saturate = 0;
20+
21+
};
22+
23+
Phaser.Plugins.CSS3Filters.prototype = {
24+
25+
setFilter: function (local, prefix, value, unit) {
26+
27+
this[local] = value;
28+
29+
if (this.parent)
30+
{
31+
this.parent.style['-webkit-filter'] = prefix + '(' + value + unit + ')';
32+
}
33+
34+
}
35+
36+
};
37+
38+
Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "blur", {
39+
40+
get: function () {
41+
return this._blur;
42+
},
43+
44+
/**
45+
* Applies a Gaussian blur to the DOM element. The value of 'radius' defines the value of the standard deviation to the Gaussian function,
46+
* or how many pixels on the screen blend into each other, so a larger value will create more blur.
47+
* If no parameter is provided, then a value 0 is used. The parameter is specified as a CSS length, but does not accept percentage values.
48+
*/
49+
set: function (radius) {
50+
this.setFilter('_blur', 'blur', radius, 'px');
51+
}
52+
});
53+
54+
Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "grayscale", {
55+
get: function () {
56+
return this._grayscale;
57+
},
58+
59+
/**
60+
* Converts the input image to grayscale. The value of 'amount' defines the proportion of the conversion.
61+
* A value of 100% is completely grayscale. A value of 0% leaves the input unchanged.
62+
* Values between 0% and 100% are linear multipliers on the effect. If the 'amount' parameter is missing, a value of 100% is used.
63+
*/
64+
set: function (amount) {
65+
this.setFilter('_grayscale', 'grayscale', amount, '%');
66+
}
67+
});
68+
69+
Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "sepia", {
70+
get: function () {
71+
return this._sepia;
72+
},
73+
74+
/**
75+
* Converts the input image to sepia. The value of 'amount' defines the proportion of the conversion.
76+
* A value of 100% is completely sepia. A value of 0 leaves the input unchanged.
77+
* Values between 0% and 100% are linear multipliers on the effect. If the 'amount' parameter is missing, a value of 100% is used.
78+
*/
79+
set: function (amount) {
80+
this.setFilter('_sepia', 'sepia', amount, '%');
81+
}
82+
});
83+
84+
Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "brightness", {
85+
get: function () {
86+
return this._brightness;
87+
},
88+
89+
/**
90+
* Applies a linear multiplier to input image, making it appear more or less bright.
91+
* A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged.
92+
* Other values are linear multipliers on the effect. Values of an amount over 100% are allowed, providing brighter results.
93+
* If the 'amount' parameter is missing, a value of 100% is used.
94+
*/
95+
set: function (amount) {
96+
this.setFilter('_brightness', 'brightness', amount, '%');
97+
}
98+
});
99+
100+
Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "contrast", {
101+
get: function () {
102+
return this._contrast;
103+
},
104+
105+
/**
106+
* Adjusts the contrast of the input. A value of 0% will create an image that is completely black.
107+
* A value of 100% leaves the input unchanged. Values of amount over 100% are allowed, providing results with less contrast.
108+
* If the 'amount' parameter is missing, a value of 100% is used.
109+
*/
110+
set: function (amount) {
111+
this.setFilter('_contrast', 'contrast', amount, '%');
112+
}
113+
});
114+
115+
Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "hueRotate", {
116+
117+
get: function () {
118+
return this._hueRotate;
119+
},
120+
121+
/**
122+
* Applies a hue rotation on the input image. The value of 'angle' defines the number of degrees around the color circle
123+
* the input samples will be adjusted. A value of 0deg leaves the input unchanged. If the 'angle' parameter is missing,
124+
* a value of 0deg is used. Maximum value is 360deg.
125+
*/
126+
set: function (angle) {
127+
this.setFilter('_hueRotate', 'hue-rotate', angle, 'deg');
128+
}
129+
});
130+
131+
Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "invert", {
132+
133+
get: function () {
134+
return this._invert;
135+
},
136+
137+
/**
138+
* Inverts the samples in the input image. The value of 'amount' defines the proportion of the conversion.
139+
* A value of 100% is completely inverted. A value of 0% leaves the input unchanged.
140+
* Values between 0% and 100% are linear multipliers on the effect. If the 'amount' parameter is missing, a value of 100% is used.
141+
*/
142+
set: function (value) {
143+
this.setFilter('_invert', 'invert', value, '%');
144+
}
145+
});
146+
147+
Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "opacity", {
148+
149+
get: function () {
150+
return this._opacity;
151+
},
152+
153+
/**
154+
* Applies transparency to the samples in the input image. The value of 'amount' defines the proportion of the conversion.
155+
* A value of 0% is completely transparent. A value of 100% leaves the input unchanged.
156+
* Values between 0% and 100% are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount.
157+
* If the 'amount' parameter is missing, a value of 100% is used.
158+
* This function is similar to the more established opacity property; the difference is that with filters, some browsers provide hardware acceleration for better performance.
159+
*/
160+
set: function (value) {
161+
this.setFilter('_opacity', 'opacity', value, '%');
162+
}
163+
});
164+
165+
Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "saturate", {
166+
167+
get: function () {
168+
return this._saturate;
169+
},
170+
171+
/**
172+
* Saturates the input image. The value of 'amount' defines the proportion of the conversion.
173+
* A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged.
174+
* Other values are linear multipliers on the effect. Values of amount over 100% are allowed, providing super-saturated results.
175+
* If the 'amount' parameter is missing, a value of 100% is used.
176+
*/
177+
set: function (value) {
178+
this.setFilter('_saturate', 'saturate', value, '%');
179+
}
180+
});

‎examples/sprite_extend.php‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<title>phaser.js - a new beginning</title>
5+
<?php
6+
require('js.php');
7+
?>
8+
</head>
9+
<body>
10+
11+
<script type="text/javascript">
12+
13+
// Here is a custom game object
14+
MonsterBunny = function (game, x, y) {
15+
16+
Phaser.Sprite.call(this, game, x, y, 'bunny');
17+
18+
};
19+
20+
MonsterBunny.prototype = Phaser.Utils.extend(true, Phaser.Sprite.prototype, PIXI.Sprite.prototype);
21+
MonsterBunny.prototype.constructor = MonsterBunny;
22+
23+
/**
24+
* Automatically called by World.update
25+
*/
26+
MonsterBunny.prototype.update = function() {
27+
28+
this.angle++;
29+
30+
};
31+
32+
(function () {
33+
34+
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });
35+
36+
function preload() {
37+
38+
game.load.image('bunny', 'assets/sprites/bunny.png');
39+
40+
}
41+
42+
function create() {
43+
44+
var wabbit = new MonsterBunny(game, 400, 300);
45+
wabbit.lifespan = 3000;
46+
wabbit.anchor.setTo(0.5, 0.5);
47+
48+
game.add.existing(wabbit);
49+
50+
}
51+
52+
function update() {
53+
}
54+
55+
function render() {
56+
}
57+
58+
})();
59+
</script>
60+
61+
</body>
62+
</html>

‎src/core/World.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,11 @@ Phaser.World.prototype = {
5959

6060
do
6161
{
62+
if (currentNode['preUpdate'])
63+
{
64+
currentNode.preUpdate();
65+
}
66+
6267
if (currentNode['update'])
6368
{
6469
currentNode.update();

‎src/gameobjects/GameObjectFactory.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@ Phaser.GameObjectFactory.prototype = {
1010
game: null,
1111
world: null,
1212

13+
existing: function (object) {
14+
15+
return this.world.add(object);
16+
17+
},
18+
1319
/**
1420
* Create a new Sprite with specific position and sprite sheet key.
1521
*

‎src/gameobjects/Sprite.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,9 +155,9 @@ Phaser.Sprite.prototype = Object.create(PIXI.Sprite.prototype);
155155
Phaser.Sprite.prototype.constructor = Phaser.Sprite;
156156

157157
/**
158-
* Automatically called by World.update
158+
* Automatically called by World.update. You can create your own update in Objects that extend Phaser.Sprite.
159159
*/
160-
Phaser.Sprite.prototype.update = function() {
160+
Phaser.Sprite.prototype.preUpdate = function() {
161161

162162
if (!this.exists)
163163
{

0 commit comments

Comments
 (0)