diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 638d56f..e58c07f 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -114,7 +114,7 @@ this._initContext(); - this.filterManager = new FilterManager(this); + this.filterManager = new FilterManager(this); // map some webGL blend and drawmodes.. this.drawModes = mapWebGLDrawModesToPixi(gl) @@ -193,6 +193,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; + // displayObject.hitArea = //TODO add a temp hit area } this.bindRenderTexture(renderTexture, transform); diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 638d56f..e58c07f 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -114,7 +114,7 @@ this._initContext(); - this.filterManager = new FilterManager(this); + this.filterManager = new FilterManager(this); // map some webGL blend and drawmodes.. this.drawModes = mapWebGLDrawModesToPixi(gl) @@ -193,6 +193,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; + // displayObject.hitArea = //TODO add a temp hit area } this.bindRenderTexture(renderTexture, transform); diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 42a4486..352c7e9 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -10,7 +10,7 @@ { WebGLManager.call(this, renderer); - this.scissor = false; + this.scissor = true; this.alphaMaskPool = []; this.alphaMaskPool = []; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 638d56f..e58c07f 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -114,7 +114,7 @@ this._initContext(); - this.filterManager = new FilterManager(this); + this.filterManager = new FilterManager(this); // map some webGL blend and drawmodes.. this.drawModes = mapWebGLDrawModesToPixi(gl) @@ -193,6 +193,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; + // displayObject.hitArea = //TODO add a temp hit area } this.bindRenderTexture(renderTexture, transform); diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 42a4486..352c7e9 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -10,7 +10,7 @@ { WebGLManager.call(this, renderer); - this.scissor = false; + this.scissor = true; this.alphaMaskPool = []; this.alphaMaskPool = []; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index d869449..046b1ef 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -112,7 +112,6 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); this.shader = generateMultiTextureShader(gl, this.MAX_TEXTURES); - // create a couple of buffers this.vertexBuffer = glCore.GLBuffer.createVertexBuffer(gl, null, gl.DYNAMIC_DRAW); this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW); @@ -236,9 +235,9 @@ nextTexture._id = textureCount; currentGroup.textures[currentGroup.textureCount++] = nextTexture; + textureCount++; } - textureCount++; } var vertexData = sprite.vertexData; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 638d56f..e58c07f 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -114,7 +114,7 @@ this._initContext(); - this.filterManager = new FilterManager(this); + this.filterManager = new FilterManager(this); // map some webGL blend and drawmodes.. this.drawModes = mapWebGLDrawModesToPixi(gl) @@ -193,6 +193,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; + // displayObject.hitArea = //TODO add a temp hit area } this.bindRenderTexture(renderTexture, transform); diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 42a4486..352c7e9 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -10,7 +10,7 @@ { WebGLManager.call(this, renderer); - this.scissor = false; + this.scissor = true; this.alphaMaskPool = []; this.alphaMaskPool = []; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index d869449..046b1ef 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -112,7 +112,6 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); this.shader = generateMultiTextureShader(gl, this.MAX_TEXTURES); - // create a couple of buffers this.vertexBuffer = glCore.GLBuffer.createVertexBuffer(gl, null, gl.DYNAMIC_DRAW); this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW); @@ -236,9 +235,9 @@ nextTexture._id = textureCount; currentGroup.textures[currentGroup.textureCount++] = nextTexture; + textureCount++; } - textureCount++; } var vertexData = sprite.vertexData; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 774cafb..3622844 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -61,7 +61,7 @@ this._canvasPattern = null; //TODO move.. - this.shader = new core.AbstractFilter( + this.shader = new core.Filter( [ 'precision lowp float;', diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 638d56f..e58c07f 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -114,7 +114,7 @@ this._initContext(); - this.filterManager = new FilterManager(this); + this.filterManager = new FilterManager(this); // map some webGL blend and drawmodes.. this.drawModes = mapWebGLDrawModesToPixi(gl) @@ -193,6 +193,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; + // displayObject.hitArea = //TODO add a temp hit area } this.bindRenderTexture(renderTexture, transform); diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 42a4486..352c7e9 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -10,7 +10,7 @@ { WebGLManager.call(this, renderer); - this.scissor = false; + this.scissor = true; this.alphaMaskPool = []; this.alphaMaskPool = []; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index d869449..046b1ef 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -112,7 +112,6 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); this.shader = generateMultiTextureShader(gl, this.MAX_TEXTURES); - // create a couple of buffers this.vertexBuffer = glCore.GLBuffer.createVertexBuffer(gl, null, gl.DYNAMIC_DRAW); this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW); @@ -236,9 +235,9 @@ nextTexture._id = textureCount; currentGroup.textures[currentGroup.textureCount++] = nextTexture; + textureCount++; } - textureCount++; } var vertexData = sprite.vertexData; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 774cafb..3622844 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -61,7 +61,7 @@ this._canvasPattern = null; //TODO move.. - this.shader = new core.AbstractFilter( + this.shader = new core.Filter( [ 'precision lowp float;', diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js new file mode 100644 index 0000000..6e59e91 --- /dev/null +++ b/src/filters/displacement/DisplacementFilter.js @@ -0,0 +1,78 @@ +var core = require('../../core'); +var glslify = require('glslify'); + +/** + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * You can use this filter to apply all manor of crazy warping effects + * Currently the r property of the texture is used to offset the x and the g property of the texture is used to offset the y. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + * @param sprite {PIXI.Sprite} the sprite used for the displacement map. (make sure its added to the scene!) + */ +function DisplacementFilter(sprite, scale) +{ + var maskMatrix = new core.Matrix(); + sprite.renderable = false; + + core.Filter.call(this, + // vertex shader + glslify('./displacement.vert'), + // fragment shader + glslify('./displacement.frag') + + ); + + this.maskSprite = sprite; + this.maskMatrix = maskMatrix; + + this.uniforms.mapSampler = sprite.texture; + this.uniforms.otherMatrix = maskMatrix.toArray(true) + this.uniforms.scale = { x: 1, y: 1 }; + + if (scale === null || scale === undefined) + { + scale = 20; + } + + this.scale = new core.Point(scale, scale); +} + +DisplacementFilter.prototype = Object.create(core.Filter.prototype); +DisplacementFilter.prototype.constructor = DisplacementFilter; +module.exports = DisplacementFilter; + +DisplacementFilter.prototype.apply = function (filterManager, input, output) +{ + + + + this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.scale.x = this.scale.x * (1/800)//input.frame.width); + this.uniforms.scale.y = this.scale.y * (1/600)//input.frame.height); + + // draw the filter... + filterManager.applyFilter(this, input, output); +}; + + +Object.defineProperties(DisplacementFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 sized texture. + * + * @member {PIXI.Texture} + * @memberof PIXI.filters.DisplacementFilter# + */ + map: { + get: function () + { + return this.uniforms.mapSampler; + }, + set: function (value) + { + this.uniforms.mapSampler = value; + + } + } +}); diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 638d56f..e58c07f 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -114,7 +114,7 @@ this._initContext(); - this.filterManager = new FilterManager(this); + this.filterManager = new FilterManager(this); // map some webGL blend and drawmodes.. this.drawModes = mapWebGLDrawModesToPixi(gl) @@ -193,6 +193,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; + // displayObject.hitArea = //TODO add a temp hit area } this.bindRenderTexture(renderTexture, transform); diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 42a4486..352c7e9 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -10,7 +10,7 @@ { WebGLManager.call(this, renderer); - this.scissor = false; + this.scissor = true; this.alphaMaskPool = []; this.alphaMaskPool = []; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index d869449..046b1ef 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -112,7 +112,6 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); this.shader = generateMultiTextureShader(gl, this.MAX_TEXTURES); - // create a couple of buffers this.vertexBuffer = glCore.GLBuffer.createVertexBuffer(gl, null, gl.DYNAMIC_DRAW); this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW); @@ -236,9 +235,9 @@ nextTexture._id = textureCount; currentGroup.textures[currentGroup.textureCount++] = nextTexture; + textureCount++; } - textureCount++; } var vertexData = sprite.vertexData; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 774cafb..3622844 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -61,7 +61,7 @@ this._canvasPattern = null; //TODO move.. - this.shader = new core.AbstractFilter( + this.shader = new core.Filter( [ 'precision lowp float;', diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js new file mode 100644 index 0000000..6e59e91 --- /dev/null +++ b/src/filters/displacement/DisplacementFilter.js @@ -0,0 +1,78 @@ +var core = require('../../core'); +var glslify = require('glslify'); + +/** + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * You can use this filter to apply all manor of crazy warping effects + * Currently the r property of the texture is used to offset the x and the g property of the texture is used to offset the y. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + * @param sprite {PIXI.Sprite} the sprite used for the displacement map. (make sure its added to the scene!) + */ +function DisplacementFilter(sprite, scale) +{ + var maskMatrix = new core.Matrix(); + sprite.renderable = false; + + core.Filter.call(this, + // vertex shader + glslify('./displacement.vert'), + // fragment shader + glslify('./displacement.frag') + + ); + + this.maskSprite = sprite; + this.maskMatrix = maskMatrix; + + this.uniforms.mapSampler = sprite.texture; + this.uniforms.otherMatrix = maskMatrix.toArray(true) + this.uniforms.scale = { x: 1, y: 1 }; + + if (scale === null || scale === undefined) + { + scale = 20; + } + + this.scale = new core.Point(scale, scale); +} + +DisplacementFilter.prototype = Object.create(core.Filter.prototype); +DisplacementFilter.prototype.constructor = DisplacementFilter; +module.exports = DisplacementFilter; + +DisplacementFilter.prototype.apply = function (filterManager, input, output) +{ + + + + this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.scale.x = this.scale.x * (1/800)//input.frame.width); + this.uniforms.scale.y = this.scale.y * (1/600)//input.frame.height); + + // draw the filter... + filterManager.applyFilter(this, input, output); +}; + + +Object.defineProperties(DisplacementFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 sized texture. + * + * @member {PIXI.Texture} + * @memberof PIXI.filters.DisplacementFilter# + */ + map: { + get: function () + { + return this.uniforms.mapSampler; + }, + set: function (value) + { + this.uniforms.mapSampler = value; + + } + } +}); diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag new file mode 100644 index 0000000..3850c1a --- /dev/null +++ b/src/filters/displacement/displacement.frag @@ -0,0 +1,20 @@ +precision mediump float; + +varying vec2 vMapCoord; +varying vec2 vTextureCoord; +varying vec4 vColor; + +uniform vec2 scale; + +uniform sampler2D uSampler; +uniform sampler2D mapSampler; + +void main(void) +{ + vec4 map = texture2D(mapSampler, vMapCoord); + + map -= 0.5; + map.xy *= scale; + + gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + map.x, vTextureCoord.y + map.y)); +} diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 638d56f..e58c07f 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -114,7 +114,7 @@ this._initContext(); - this.filterManager = new FilterManager(this); + this.filterManager = new FilterManager(this); // map some webGL blend and drawmodes.. this.drawModes = mapWebGLDrawModesToPixi(gl) @@ -193,6 +193,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; + // displayObject.hitArea = //TODO add a temp hit area } this.bindRenderTexture(renderTexture, transform); diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 42a4486..352c7e9 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -10,7 +10,7 @@ { WebGLManager.call(this, renderer); - this.scissor = false; + this.scissor = true; this.alphaMaskPool = []; this.alphaMaskPool = []; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index d869449..046b1ef 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -112,7 +112,6 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); this.shader = generateMultiTextureShader(gl, this.MAX_TEXTURES); - // create a couple of buffers this.vertexBuffer = glCore.GLBuffer.createVertexBuffer(gl, null, gl.DYNAMIC_DRAW); this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW); @@ -236,9 +235,9 @@ nextTexture._id = textureCount; currentGroup.textures[currentGroup.textureCount++] = nextTexture; + textureCount++; } - textureCount++; } var vertexData = sprite.vertexData; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 774cafb..3622844 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -61,7 +61,7 @@ this._canvasPattern = null; //TODO move.. - this.shader = new core.AbstractFilter( + this.shader = new core.Filter( [ 'precision lowp float;', diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js new file mode 100644 index 0000000..6e59e91 --- /dev/null +++ b/src/filters/displacement/DisplacementFilter.js @@ -0,0 +1,78 @@ +var core = require('../../core'); +var glslify = require('glslify'); + +/** + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * You can use this filter to apply all manor of crazy warping effects + * Currently the r property of the texture is used to offset the x and the g property of the texture is used to offset the y. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + * @param sprite {PIXI.Sprite} the sprite used for the displacement map. (make sure its added to the scene!) + */ +function DisplacementFilter(sprite, scale) +{ + var maskMatrix = new core.Matrix(); + sprite.renderable = false; + + core.Filter.call(this, + // vertex shader + glslify('./displacement.vert'), + // fragment shader + glslify('./displacement.frag') + + ); + + this.maskSprite = sprite; + this.maskMatrix = maskMatrix; + + this.uniforms.mapSampler = sprite.texture; + this.uniforms.otherMatrix = maskMatrix.toArray(true) + this.uniforms.scale = { x: 1, y: 1 }; + + if (scale === null || scale === undefined) + { + scale = 20; + } + + this.scale = new core.Point(scale, scale); +} + +DisplacementFilter.prototype = Object.create(core.Filter.prototype); +DisplacementFilter.prototype.constructor = DisplacementFilter; +module.exports = DisplacementFilter; + +DisplacementFilter.prototype.apply = function (filterManager, input, output) +{ + + + + this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.scale.x = this.scale.x * (1/800)//input.frame.width); + this.uniforms.scale.y = this.scale.y * (1/600)//input.frame.height); + + // draw the filter... + filterManager.applyFilter(this, input, output); +}; + + +Object.defineProperties(DisplacementFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 sized texture. + * + * @member {PIXI.Texture} + * @memberof PIXI.filters.DisplacementFilter# + */ + map: { + get: function () + { + return this.uniforms.mapSampler; + }, + set: function (value) + { + this.uniforms.mapSampler = value; + + } + } +}); diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag new file mode 100644 index 0000000..3850c1a --- /dev/null +++ b/src/filters/displacement/displacement.frag @@ -0,0 +1,20 @@ +precision mediump float; + +varying vec2 vMapCoord; +varying vec2 vTextureCoord; +varying vec4 vColor; + +uniform vec2 scale; + +uniform sampler2D uSampler; +uniform sampler2D mapSampler; + +void main(void) +{ + vec4 map = texture2D(mapSampler, vMapCoord); + + map -= 0.5; + map.xy *= scale; + + gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + map.x, vTextureCoord.y + map.y)); +} diff --git a/src/filters/displacement/displacement.vert b/src/filters/displacement/displacement.vert new file mode 100644 index 0000000..02d7f64 --- /dev/null +++ b/src/filters/displacement/displacement.vert @@ -0,0 +1,18 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; +attribute vec4 aColor; + +uniform mat3 projectionMatrix; +uniform mat3 otherMatrix; + +varying vec2 vMapCoord; +varying vec2 vTextureCoord; +varying vec4 vColor; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; + vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy; + vColor = vec4(aColor.rgb * aColor.a, aColor.a); +} diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 638d56f..e58c07f 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -114,7 +114,7 @@ this._initContext(); - this.filterManager = new FilterManager(this); + this.filterManager = new FilterManager(this); // map some webGL blend and drawmodes.. this.drawModes = mapWebGLDrawModesToPixi(gl) @@ -193,6 +193,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; + // displayObject.hitArea = //TODO add a temp hit area } this.bindRenderTexture(renderTexture, transform); diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 42a4486..352c7e9 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -10,7 +10,7 @@ { WebGLManager.call(this, renderer); - this.scissor = false; + this.scissor = true; this.alphaMaskPool = []; this.alphaMaskPool = []; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index d869449..046b1ef 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -112,7 +112,6 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); this.shader = generateMultiTextureShader(gl, this.MAX_TEXTURES); - // create a couple of buffers this.vertexBuffer = glCore.GLBuffer.createVertexBuffer(gl, null, gl.DYNAMIC_DRAW); this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW); @@ -236,9 +235,9 @@ nextTexture._id = textureCount; currentGroup.textures[currentGroup.textureCount++] = nextTexture; + textureCount++; } - textureCount++; } var vertexData = sprite.vertexData; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 774cafb..3622844 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -61,7 +61,7 @@ this._canvasPattern = null; //TODO move.. - this.shader = new core.AbstractFilter( + this.shader = new core.Filter( [ 'precision lowp float;', diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js new file mode 100644 index 0000000..6e59e91 --- /dev/null +++ b/src/filters/displacement/DisplacementFilter.js @@ -0,0 +1,78 @@ +var core = require('../../core'); +var glslify = require('glslify'); + +/** + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * You can use this filter to apply all manor of crazy warping effects + * Currently the r property of the texture is used to offset the x and the g property of the texture is used to offset the y. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + * @param sprite {PIXI.Sprite} the sprite used for the displacement map. (make sure its added to the scene!) + */ +function DisplacementFilter(sprite, scale) +{ + var maskMatrix = new core.Matrix(); + sprite.renderable = false; + + core.Filter.call(this, + // vertex shader + glslify('./displacement.vert'), + // fragment shader + glslify('./displacement.frag') + + ); + + this.maskSprite = sprite; + this.maskMatrix = maskMatrix; + + this.uniforms.mapSampler = sprite.texture; + this.uniforms.otherMatrix = maskMatrix.toArray(true) + this.uniforms.scale = { x: 1, y: 1 }; + + if (scale === null || scale === undefined) + { + scale = 20; + } + + this.scale = new core.Point(scale, scale); +} + +DisplacementFilter.prototype = Object.create(core.Filter.prototype); +DisplacementFilter.prototype.constructor = DisplacementFilter; +module.exports = DisplacementFilter; + +DisplacementFilter.prototype.apply = function (filterManager, input, output) +{ + + + + this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.scale.x = this.scale.x * (1/800)//input.frame.width); + this.uniforms.scale.y = this.scale.y * (1/600)//input.frame.height); + + // draw the filter... + filterManager.applyFilter(this, input, output); +}; + + +Object.defineProperties(DisplacementFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 sized texture. + * + * @member {PIXI.Texture} + * @memberof PIXI.filters.DisplacementFilter# + */ + map: { + get: function () + { + return this.uniforms.mapSampler; + }, + set: function (value) + { + this.uniforms.mapSampler = value; + + } + } +}); diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag new file mode 100644 index 0000000..3850c1a --- /dev/null +++ b/src/filters/displacement/displacement.frag @@ -0,0 +1,20 @@ +precision mediump float; + +varying vec2 vMapCoord; +varying vec2 vTextureCoord; +varying vec4 vColor; + +uniform vec2 scale; + +uniform sampler2D uSampler; +uniform sampler2D mapSampler; + +void main(void) +{ + vec4 map = texture2D(mapSampler, vMapCoord); + + map -= 0.5; + map.xy *= scale; + + gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + map.x, vTextureCoord.y + map.y)); +} diff --git a/src/filters/displacement/displacement.vert b/src/filters/displacement/displacement.vert new file mode 100644 index 0000000..02d7f64 --- /dev/null +++ b/src/filters/displacement/displacement.vert @@ -0,0 +1,18 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; +attribute vec4 aColor; + +uniform mat3 projectionMatrix; +uniform mat3 otherMatrix; + +varying vec2 vMapCoord; +varying vec2 vTextureCoord; +varying vec4 vColor; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; + vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy; + vColor = vec4(aColor.rgb * aColor.a, aColor.a); +} diff --git a/src/filters/index.js b/src/filters/index.js index d5bfee7..dc3dd4b 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -15,7 +15,6 @@ // ColorStepFilter: require('./color/ColorStepFilter'), // ConvolutionFilter: require('./convolution/ConvolutionFilter'), // CrossHatchFilter: require('./crosshatch/CrossHatchFilter'), - // DisplacementFilter: require('./displacement/DisplacementFilter'), // DotScreenFilter: require('./dot/DotScreenFilter'), // DropShadowFilter: require('./dropshadow/DropShadowFilter'), // InvertFilter: require('./invert/InvertFilter'), @@ -28,6 +27,7 @@ // TiltShiftFilter: require('./tiltshift/TiltShiftFilter'), // TiltShiftXFilter: require('./tiltshift/TiltShiftXFilter'), //TiltShiftYFilter: require('./tiltshift/TiltShiftYFilter'), + DisplacementFilter: require('./displacement/DisplacementFilter'), BlurFilter: require('./blur/BlurFilter'), BlurXFilter: require('./blur/BlurXFilter'), BlurYFilter: require('./blur/BlurYFilter'), diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 638d56f..e58c07f 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -114,7 +114,7 @@ this._initContext(); - this.filterManager = new FilterManager(this); + this.filterManager = new FilterManager(this); // map some webGL blend and drawmodes.. this.drawModes = mapWebGLDrawModesToPixi(gl) @@ -193,6 +193,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; + // displayObject.hitArea = //TODO add a temp hit area } this.bindRenderTexture(renderTexture, transform); diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 42a4486..352c7e9 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -10,7 +10,7 @@ { WebGLManager.call(this, renderer); - this.scissor = false; + this.scissor = true; this.alphaMaskPool = []; this.alphaMaskPool = []; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index d869449..046b1ef 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -112,7 +112,6 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); this.shader = generateMultiTextureShader(gl, this.MAX_TEXTURES); - // create a couple of buffers this.vertexBuffer = glCore.GLBuffer.createVertexBuffer(gl, null, gl.DYNAMIC_DRAW); this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW); @@ -236,9 +235,9 @@ nextTexture._id = textureCount; currentGroup.textures[currentGroup.textureCount++] = nextTexture; + textureCount++; } - textureCount++; } var vertexData = sprite.vertexData; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 774cafb..3622844 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -61,7 +61,7 @@ this._canvasPattern = null; //TODO move.. - this.shader = new core.AbstractFilter( + this.shader = new core.Filter( [ 'precision lowp float;', diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js new file mode 100644 index 0000000..6e59e91 --- /dev/null +++ b/src/filters/displacement/DisplacementFilter.js @@ -0,0 +1,78 @@ +var core = require('../../core'); +var glslify = require('glslify'); + +/** + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * You can use this filter to apply all manor of crazy warping effects + * Currently the r property of the texture is used to offset the x and the g property of the texture is used to offset the y. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + * @param sprite {PIXI.Sprite} the sprite used for the displacement map. (make sure its added to the scene!) + */ +function DisplacementFilter(sprite, scale) +{ + var maskMatrix = new core.Matrix(); + sprite.renderable = false; + + core.Filter.call(this, + // vertex shader + glslify('./displacement.vert'), + // fragment shader + glslify('./displacement.frag') + + ); + + this.maskSprite = sprite; + this.maskMatrix = maskMatrix; + + this.uniforms.mapSampler = sprite.texture; + this.uniforms.otherMatrix = maskMatrix.toArray(true) + this.uniforms.scale = { x: 1, y: 1 }; + + if (scale === null || scale === undefined) + { + scale = 20; + } + + this.scale = new core.Point(scale, scale); +} + +DisplacementFilter.prototype = Object.create(core.Filter.prototype); +DisplacementFilter.prototype.constructor = DisplacementFilter; +module.exports = DisplacementFilter; + +DisplacementFilter.prototype.apply = function (filterManager, input, output) +{ + + + + this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.scale.x = this.scale.x * (1/800)//input.frame.width); + this.uniforms.scale.y = this.scale.y * (1/600)//input.frame.height); + + // draw the filter... + filterManager.applyFilter(this, input, output); +}; + + +Object.defineProperties(DisplacementFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 sized texture. + * + * @member {PIXI.Texture} + * @memberof PIXI.filters.DisplacementFilter# + */ + map: { + get: function () + { + return this.uniforms.mapSampler; + }, + set: function (value) + { + this.uniforms.mapSampler = value; + + } + } +}); diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag new file mode 100644 index 0000000..3850c1a --- /dev/null +++ b/src/filters/displacement/displacement.frag @@ -0,0 +1,20 @@ +precision mediump float; + +varying vec2 vMapCoord; +varying vec2 vTextureCoord; +varying vec4 vColor; + +uniform vec2 scale; + +uniform sampler2D uSampler; +uniform sampler2D mapSampler; + +void main(void) +{ + vec4 map = texture2D(mapSampler, vMapCoord); + + map -= 0.5; + map.xy *= scale; + + gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + map.x, vTextureCoord.y + map.y)); +} diff --git a/src/filters/displacement/displacement.vert b/src/filters/displacement/displacement.vert new file mode 100644 index 0000000..02d7f64 --- /dev/null +++ b/src/filters/displacement/displacement.vert @@ -0,0 +1,18 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; +attribute vec4 aColor; + +uniform mat3 projectionMatrix; +uniform mat3 otherMatrix; + +varying vec2 vMapCoord; +varying vec2 vTextureCoord; +varying vec4 vColor; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; + vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy; + vColor = vec4(aColor.rgb * aColor.a, aColor.a); +} diff --git a/src/filters/index.js b/src/filters/index.js index d5bfee7..dc3dd4b 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -15,7 +15,6 @@ // ColorStepFilter: require('./color/ColorStepFilter'), // ConvolutionFilter: require('./convolution/ConvolutionFilter'), // CrossHatchFilter: require('./crosshatch/CrossHatchFilter'), - // DisplacementFilter: require('./displacement/DisplacementFilter'), // DotScreenFilter: require('./dot/DotScreenFilter'), // DropShadowFilter: require('./dropshadow/DropShadowFilter'), // InvertFilter: require('./invert/InvertFilter'), @@ -28,6 +27,7 @@ // TiltShiftFilter: require('./tiltshift/TiltShiftFilter'), // TiltShiftXFilter: require('./tiltshift/TiltShiftXFilter'), //TiltShiftYFilter: require('./tiltshift/TiltShiftYFilter'), + DisplacementFilter: require('./displacement/DisplacementFilter'), BlurFilter: require('./blur/BlurFilter'), BlurXFilter: require('./blur/BlurXFilter'), BlurYFilter: require('./blur/BlurYFilter'), diff --git a/src/index.js b/src/index.js index e3d19d6..cd1d14b 100644 --- a/src/index.js +++ b/src/index.js @@ -4,7 +4,7 @@ var core = module.exports = require('./core'); // add core plugins. -//core.extras = require('./extras'); +core.extras = require('./extras'); core.filters = require('./filters'); core.interaction = require('./interaction'); core.loaders = require('./loaders'); diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 638d56f..e58c07f 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -114,7 +114,7 @@ this._initContext(); - this.filterManager = new FilterManager(this); + this.filterManager = new FilterManager(this); // map some webGL blend and drawmodes.. this.drawModes = mapWebGLDrawModesToPixi(gl) @@ -193,6 +193,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; + // displayObject.hitArea = //TODO add a temp hit area } this.bindRenderTexture(renderTexture, transform); diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 42a4486..352c7e9 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -10,7 +10,7 @@ { WebGLManager.call(this, renderer); - this.scissor = false; + this.scissor = true; this.alphaMaskPool = []; this.alphaMaskPool = []; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index d869449..046b1ef 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -112,7 +112,6 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); this.shader = generateMultiTextureShader(gl, this.MAX_TEXTURES); - // create a couple of buffers this.vertexBuffer = glCore.GLBuffer.createVertexBuffer(gl, null, gl.DYNAMIC_DRAW); this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW); @@ -236,9 +235,9 @@ nextTexture._id = textureCount; currentGroup.textures[currentGroup.textureCount++] = nextTexture; + textureCount++; } - textureCount++; } var vertexData = sprite.vertexData; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 774cafb..3622844 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -61,7 +61,7 @@ this._canvasPattern = null; //TODO move.. - this.shader = new core.AbstractFilter( + this.shader = new core.Filter( [ 'precision lowp float;', diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js new file mode 100644 index 0000000..6e59e91 --- /dev/null +++ b/src/filters/displacement/DisplacementFilter.js @@ -0,0 +1,78 @@ +var core = require('../../core'); +var glslify = require('glslify'); + +/** + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * You can use this filter to apply all manor of crazy warping effects + * Currently the r property of the texture is used to offset the x and the g property of the texture is used to offset the y. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + * @param sprite {PIXI.Sprite} the sprite used for the displacement map. (make sure its added to the scene!) + */ +function DisplacementFilter(sprite, scale) +{ + var maskMatrix = new core.Matrix(); + sprite.renderable = false; + + core.Filter.call(this, + // vertex shader + glslify('./displacement.vert'), + // fragment shader + glslify('./displacement.frag') + + ); + + this.maskSprite = sprite; + this.maskMatrix = maskMatrix; + + this.uniforms.mapSampler = sprite.texture; + this.uniforms.otherMatrix = maskMatrix.toArray(true) + this.uniforms.scale = { x: 1, y: 1 }; + + if (scale === null || scale === undefined) + { + scale = 20; + } + + this.scale = new core.Point(scale, scale); +} + +DisplacementFilter.prototype = Object.create(core.Filter.prototype); +DisplacementFilter.prototype.constructor = DisplacementFilter; +module.exports = DisplacementFilter; + +DisplacementFilter.prototype.apply = function (filterManager, input, output) +{ + + + + this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.scale.x = this.scale.x * (1/800)//input.frame.width); + this.uniforms.scale.y = this.scale.y * (1/600)//input.frame.height); + + // draw the filter... + filterManager.applyFilter(this, input, output); +}; + + +Object.defineProperties(DisplacementFilter.prototype, { + /** + * The texture used for the displacement map. Must be power of 2 sized texture. + * + * @member {PIXI.Texture} + * @memberof PIXI.filters.DisplacementFilter# + */ + map: { + get: function () + { + return this.uniforms.mapSampler; + }, + set: function (value) + { + this.uniforms.mapSampler = value; + + } + } +}); diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag new file mode 100644 index 0000000..3850c1a --- /dev/null +++ b/src/filters/displacement/displacement.frag @@ -0,0 +1,20 @@ +precision mediump float; + +varying vec2 vMapCoord; +varying vec2 vTextureCoord; +varying vec4 vColor; + +uniform vec2 scale; + +uniform sampler2D uSampler; +uniform sampler2D mapSampler; + +void main(void) +{ + vec4 map = texture2D(mapSampler, vMapCoord); + + map -= 0.5; + map.xy *= scale; + + gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + map.x, vTextureCoord.y + map.y)); +} diff --git a/src/filters/displacement/displacement.vert b/src/filters/displacement/displacement.vert new file mode 100644 index 0000000..02d7f64 --- /dev/null +++ b/src/filters/displacement/displacement.vert @@ -0,0 +1,18 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; +attribute vec4 aColor; + +uniform mat3 projectionMatrix; +uniform mat3 otherMatrix; + +varying vec2 vMapCoord; +varying vec2 vTextureCoord; +varying vec4 vColor; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; + vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy; + vColor = vec4(aColor.rgb * aColor.a, aColor.a); +} diff --git a/src/filters/index.js b/src/filters/index.js index d5bfee7..dc3dd4b 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -15,7 +15,6 @@ // ColorStepFilter: require('./color/ColorStepFilter'), // ConvolutionFilter: require('./convolution/ConvolutionFilter'), // CrossHatchFilter: require('./crosshatch/CrossHatchFilter'), - // DisplacementFilter: require('./displacement/DisplacementFilter'), // DotScreenFilter: require('./dot/DotScreenFilter'), // DropShadowFilter: require('./dropshadow/DropShadowFilter'), // InvertFilter: require('./invert/InvertFilter'), @@ -28,6 +27,7 @@ // TiltShiftFilter: require('./tiltshift/TiltShiftFilter'), // TiltShiftXFilter: require('./tiltshift/TiltShiftXFilter'), //TiltShiftYFilter: require('./tiltshift/TiltShiftYFilter'), + DisplacementFilter: require('./displacement/DisplacementFilter'), BlurFilter: require('./blur/BlurFilter'), BlurXFilter: require('./blur/BlurXFilter'), BlurYFilter: require('./blur/BlurYFilter'), diff --git a/src/index.js b/src/index.js index e3d19d6..cd1d14b 100644 --- a/src/index.js +++ b/src/index.js @@ -4,7 +4,7 @@ var core = module.exports = require('./core'); // add core plugins. -//core.extras = require('./extras'); +core.extras = require('./extras'); core.filters = require('./filters'); core.interaction = require('./interaction'); core.loaders = require('./loaders'); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4bf08bf..5fa8b02 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -46,7 +46,10 @@ var second = parseInt(kernings[i].getAttribute('second'), 10); var amount = parseInt(kernings[i].getAttribute('amount'), 10); - data.chars[second].kerning[first] = amount; + if(data.chars[second]) + { + data.chars[second].kerning[first] = amount; + } } resource.bitmapFont = data;