Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2025-02-18 15:08:31 +00:00
Code Issues Projects Releases Packages Wiki Activity

New Fire filter.

Browse source
This commit is contained in:
photonstorm 2013-11-21 12:34:41 +00:00
parent b286093093
commit 7d7aa795e7
4 changed files with 177 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
examples/wip/book/part2.html
View file

@ -9,9 +9,11 @@
margin: 0; margin: 0;
} }
</style> </style>
<script src="phaser.js"></script> // <script src="phaser.js"></script>
<script src="../../../dist/phaser.min.js" type="text/javascript"></script>
<script src="../../../filters/ColorBars.js" type="text/javascript"></script> <script src="../../../filters/ColorBars.js" type="text/javascript"></script>
<script src="../../../filters/BinarySerpents.js" type="text/javascript"></script> <script src="../../../filters/BinarySerpents.js" type="text/javascript"></script>
<script src="../../../filters/Fire.js" type="text/javascript"></script>
</head> </head>
<body> <body>
@ -22,6 +24,7 @@
var game = new Phaser.Game(1024, 672, Phaser.AUTO, 'gameContainer', { preload: preload, create: create, update: update }); var game = new Phaser.Game(1024, 672, Phaser.AUTO, 'gameContainer', { preload: preload, create: create, update: update });
var filter; var filter;
var filter2;
var sky; var sky;
var land; var land;
@ -78,12 +81,27 @@
sky = game.add.sprite(0, 0, 'background'); sky = game.add.sprite(0, 0, 'background');
var t = game.add.sprite(0, 0); if (game.renderType === Phaser.WEBGL)
t.width = 1024; {
t.height = 672; sky.visible = false;
filter = game.add.filter('BinarySerpents', 1024, 672);
// filter.alpha = 0.0; var t = game.add.sprite(0, 0);
t.filters = [filter]; t.width = 1024;
t.height = 672;
filter2 = game.add.filter('BinarySerpents', 1024, 672);
filter2.alpha = 0.0;
t.filters = [filter2];
var t2 = game.add.sprite(0, 0);
t2.width = 1024;
t2.height = 672;
filter = game.add.filter('Fire', 1024, 672);
filter.shift = 2.0;
filter.alpha = 0.0;
t2.filters = [filter];
}
land = game.add.tileSprite(0, 544, 1024, 128, 'land'); land = game.add.tileSprite(0, 544, 1024, 128, 'land');
@ -178,7 +196,11 @@
function update () { function update () {
filter.update(); if (game.renderType === Phaser.WEBGL)
{
filter.update();
filter2.update();
}
land.tilePosition.x -= scrollSpeed; land.tilePosition.x -= scrollSpeed;

34
examples/wip/fire_demo.js Normal file
View file

@ -0,0 +1,34 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
var background;
var filter;
function preload() {
game.load.image('phaser', 'assets/sprites/phaser2.png');
}
function create() {
var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'phaser');
logo.anchor.setTo(0.5, 0.5);
background = game.add.sprite(0, 0);
background.width = 800;
background.height = 600;
filter = game.add.filter('Fire', 800, 600);
filter.alpha = 0.0;
background.filters = [filter];
}
function update() {
filter.update();
}

1
examples/wip/index.php
View file

@ -89,6 +89,7 @@
<script src="../filters/BinarySerpents.js" type="text/javascript"></script> <script src="../filters/BinarySerpents.js" type="text/javascript"></script>
<script src="../filters/Tunnel.js" type="text/javascript"></script> <script src="../filters/Tunnel.js" type="text/javascript"></script>
<script src="../filters/ColorBars.js" type="text/javascript"></script> <script src="../filters/ColorBars.js" type="text/javascript"></script>
<script src="../filters/Fire.js" type="text/javascript"></script>
<?php <?php
} }
?> ?>

112
filters/Fire.js Normal file
View file

@ -0,0 +1,112 @@
/**
* Original shader by @301z (http://glsl.heroku.com/e#11707.0)
* Tweaked, uniforms added and converted to Phaser/PIXI by Richard Davey
*/
Phaser.Filter.Fire = function (game) {
Phaser.Filter.call(this, game);
this.uniforms.alpha = { type: '1f', value: 1.0 }
this.uniforms.shift = { type: '1f', value: 1.6 }
this.uniforms.speed = { type: '2f', value: { x: 0.7, y: 0.4 } };
this.fragmentSrc = [
"precision mediump float;",
"uniform vec3 resolution;",
"uniform float time;",
"uniform float alpha;",
"uniform vec2 speed;",
"uniform float shift;",
"float rand(vec2 n) {",
"return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);",
"}",
"float noise(vec2 n) {",
"const vec2 d = vec2(0.0, 1.0);",
"vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));",
"return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);",
"}",
"float fbm(vec2 n) {",
"float total = 0.0, amplitude = 1.0;",
"for (int i = 0; i < 4; i++) {",
"total += noise(n) * amplitude;",
"n += n;",
"amplitude *= 0.5;",
"}",
"return total;",
"}",
"void main() {",
"const vec3 c1 = vec3(0.5, 0.0, 0.1);",
"const vec3 c2 = vec3(0.9, 0.0, 0.0);",
"const vec3 c3 = vec3(0.2, 0.0, 0.0);",
"const vec3 c4 = vec3(1.0, 0.9, 0.0);",
"const vec3 c5 = vec3(0.1);",
"const vec3 c6 = vec3(0.9);",
"vec2 p = gl_FragCoord.xy * 8.0 / resolution.xx;",
"float q = fbm(p - time * 0.1);",
"vec2 r = vec2(fbm(p + q + time * speed.x - p.x - p.y), fbm(p + q - time * speed.y));",
"vec3 c = mix(c1, c2, fbm(p + r)) + mix(c3, c4, r.x) - mix(c5, c6, r.y);",
"gl_FragColor = vec4(c * cos(shift * gl_FragCoord.y / resolution.y), alpha);",
"}"
];
};
Phaser.Filter.Fire.prototype = Object.create(Phaser.Filter.prototype);
Phaser.Filter.Fire.prototype.constructor = Phaser.Filter.Fire;
Phaser.Filter.Fire.prototype.init = function (width, height, alpha, shift) {
this.setResolution(width, height);
if (typeof alpha !== 'undefined') {
this.uniforms.alpha.value = alpha;
}
if (typeof shift !== 'undefined') {
this.uniforms.shift.value = shift;
}
}
Object.defineProperty(Phaser.Filter.Fire.prototype, 'alpha', {
get: function() {
return this.uniforms.alpha.value;
},
set: function(value) {
this.uniforms.alpha.value = value;
}
});
Object.defineProperty(Phaser.Filter.Fire.prototype, 'shift', {
get: function() {
return this.uniforms.shift.value;
},
set: function(value) {
this.uniforms.shift.value = value;
}
});
Object.defineProperty(Phaser.Filter.Fire.prototype, 'speed', {
get: function() {
return this.uniforms.speed.value;
},
set: function(value) {
this.uniforms.speed.value = value;
}
});