jeena/pixi.js
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Added canvas sprite tiniting

Browse source 
Currently only works with browsers that support the new canvas blend
modes
still need to add tiniting to tilingsprite and graphics
This commit is contained in:
Mat Groves 2013-12-29 12:14:34 +00:00
parent f0c082a3cc
commit 41d6b01e96
6 changed files with 217 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

1
Gruntfile.js
View file

@ -43,6 +43,7 @@ module.exports = function(grunt) {
'<%= dirs.src %>/renderers/webgl/WebGLRenderGroup.js',
'<%= dirs.src %>/renderers/webgl/utils/WebGLFilterManager.js',
'<%= dirs.src %>/renderers/canvas/utils/CanvasMaskManager.js',
'<%= dirs.src %>/renderers/canvas/utils/CanvasTinter.js',
'<%= dirs.src %>/renderers/canvas/CanvasRenderer.js',
'<%= dirs.src %>/renderers/canvas/CanvasGraphics.js',
'<%= dirs.src %>/primitives/Graphics.js',

105
bin/pixi.dev.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-12-28
* Compiled: 2013-12-29
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -1445,7 +1445,7 @@ PIXI.DisplayObjectContainer.prototype._renderCanvas = function(renderSession)
child._renderCanvas(renderSession);
}
if(this.mask)
if(this._mask)
{
renderSession.maskManager.popMask(renderSession.context);
}
@ -1692,38 +1692,44 @@ PIXI.Sprite.prototype.getBounds = function()
PIXI.Sprite.prototype._renderWebGL = function(renderSession)
{
// if the sprite is not visible or the alpha is 0 then no need to render this element
if(this.visible === false || this.alpha === 0)return;
// do a quick check to see if this element has a mask or a filter.
if(this._mask || this._filters)
{
var spriteBatch = renderSession.spriteBatch;
if(this._mask)
{
renderSession.spriteBatch.stop();
spriteBatch.stop();
renderSession.maskManager.pushMask(this.mask, renderSession.projection);
renderSession.spriteBatch.start();
spriteBatch.start();
}
if(this._filters)
{
renderSession.spriteBatch.flush();
spriteBatch.flush();
renderSession.filterManager.pushFilter(this._filterBlock);
}
renderSession.spriteBatch.render(this);
// add this sprite to the batch
spriteBatch.render(this);
// simple render children!
// now loop through the children and make sure they get rendered
for(var i=0,j=this.children.length; i<j; i++)
{
var child = this.children[i];
child._renderWebGL(renderSession);
}
renderSession.spriteBatch.stop();
// time to stop the sprite batch as either a mask element or a filter draw will happen next
spriteBatch.stop();
if(this._filters)renderSession.filterManager.popFilter();
if(this._mask)renderSession.maskManager.popMask(renderSession.projection);
renderSession.spriteBatch.start();
spriteBatch.start();
}
else
{
@ -1767,12 +1773,33 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession)
context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode];
}
//if smoothingEnabled is supported and we need to change the smoothing property for this texture
// if(this.smoothProperty && this.scaleMode !== displayObject.texture.baseTexture.scaleMode) {
// this.scaleMode = displayObject.texture.baseTexture.scaleMode;
// context[this.smoothProperty] = (this.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR);
//}
if(this.tint != 0xFFFFFF)
{
if(this.cachedTint !== this.tint)
{
this.cachedTint = this.tint;
this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this.texture, this.tint);
}
context.drawImage(this.tintedTexture,
0,
0,
frame.width,
frame.height,
(this.anchor.x) * -frame.width,
(this.anchor.y) * -frame.height,
frame.width,
frame.height);
}
else
{
context.drawImage(this.texture.baseTexture.source,
frame.x,
frame.y,
@ -1783,6 +1810,7 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession)
frame.width,
frame.height);
}
}
// OVERWRITE
for(var i=0,j=this.children.length; i<j; i++)
@ -1790,6 +1818,11 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession)
var child = this.children[i];
child._renderCanvas(renderSession);
}
if(this._mask)
{
renderSession.maskManager.popMask(renderSession.context);
}
}
// some helper functions..
@ -6132,6 +6165,60 @@ PIXI.CanvasMaskManager.prototype.popMask = function(context)
{
context.restore();
}
/**
* @author Mat Groves
*
*
*/
PIXI.CanvasTinter = function()
{
/// this.textureCach
}
PIXI.CanvasTinter.getTintedTexture = function(texture, color)
{
var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6);
// clone texture..
var canvas = document.createElement("canvas");
var context = canvas.getContext( '2d' );
var frame = texture.frame;
context.width = frame.width;
context.height = frame.height;
context.fillStyle = stringColor;
context.fillRect(0, 0, frame.width, frame.height);
context.globalCompositeOperation = 'multiply';
context.drawImage(texture.baseTexture.source,
frame.x,
frame.y,
frame.width,
frame.height,
0,
0,
frame.width,
frame.height);
context.globalCompositeOperation = 'destination-in';
context.drawImage(texture.baseTexture.source,
frame.x,
frame.y,
frame.width,
frame.height,
0,
0,
frame.width,
frame.height);
return canvas;
}
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/

4
examples/example 2 - SpriteSheet/index.html
View file

@ -36,7 +36,8 @@
var stage = new PIXI.Stage(0xFFFFFF);
// create a renderer instance.
renderer = PIXI.autoDetectRenderer(800, 600);
//renderer = PIXI.autoDetectRenderer(800, 600);
renderer = new PIXI.CanvasRenderer(800, 600);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
@ -58,6 +59,7 @@
// create an alien using the frame name..
var alien = PIXI.Sprite.fromFrame(frameName);
///alien.tint = 0xFF0000;
/*
* fun fact for the day :)

2
src/pixi/display/DisplayObjectContainer.js
View file

@ -329,7 +329,7 @@ PIXI.DisplayObjectContainer.prototype._renderCanvas = function(renderSession)
child._renderCanvas(renderSession);
}
if(this.mask)
if(this._mask)
{
renderSession.maskManager.popMask(renderSession.context);
}

47
src/pixi/display/Sprite.js
View file

@ -239,38 +239,44 @@ PIXI.Sprite.prototype.getBounds = function()
PIXI.Sprite.prototype._renderWebGL = function(renderSession)
{
// if the sprite is not visible or the alpha is 0 then no need to render this element
if(this.visible === false || this.alpha === 0)return;
// do a quick check to see if this element has a mask or a filter.
if(this._mask || this._filters)
{
var spriteBatch = renderSession.spriteBatch;
if(this._mask)
{
renderSession.spriteBatch.stop();
spriteBatch.stop();
renderSession.maskManager.pushMask(this.mask, renderSession.projection);
renderSession.spriteBatch.start();
spriteBatch.start();
}
if(this._filters)
{
renderSession.spriteBatch.flush();
spriteBatch.flush();
renderSession.filterManager.pushFilter(this._filterBlock);
}
renderSession.spriteBatch.render(this);
// add this sprite to the batch
spriteBatch.render(this);
// simple render children!
// now loop through the children and make sure they get rendered
for(var i=0,j=this.children.length; i<j; i++)
{
var child = this.children[i];
child._renderWebGL(renderSession);
}
renderSession.spriteBatch.stop();
// time to stop the sprite batch as either a mask element or a filter draw will happen next
spriteBatch.stop();
if(this._filters)renderSession.filterManager.popFilter();
if(this._mask)renderSession.maskManager.popMask(renderSession.projection);
renderSession.spriteBatch.start();
spriteBatch.start();
}
else
{
@ -314,12 +320,33 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession)
context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode];
}
//if smoothingEnabled is supported and we need to change the smoothing property for this texture
// if(this.smoothProperty && this.scaleMode !== displayObject.texture.baseTexture.scaleMode) {
// this.scaleMode = displayObject.texture.baseTexture.scaleMode;
// context[this.smoothProperty] = (this.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR);
//}
if(this.tint != 0xFFFFFF)
{
if(this.cachedTint !== this.tint)
{
this.cachedTint = this.tint;
this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this.texture, this.tint);
}
context.drawImage(this.tintedTexture,
0,
0,
frame.width,
frame.height,
(this.anchor.x) * -frame.width,
(this.anchor.y) * -frame.height,
frame.width,
frame.height);
}
else
{
context.drawImage(this.texture.baseTexture.source,
frame.x,
frame.y,
@ -330,6 +357,7 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession)
frame.width,
frame.height);
}
}
// OVERWRITE
for(var i=0,j=this.children.length; i<j; i++)
@ -337,6 +365,11 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession)
var child = this.children[i];
child._renderCanvas(renderSession);
}
if(this._mask)
{
renderSession.maskManager.popMask(renderSession.context);
}
}
// some helper functions..

54
src/pixi/renderers/canvas/utils/CanvasTinter.js Normal file
View file

@ -0,0 +1,54 @@
/**
* @author Mat Groves
*
*
*/
PIXI.CanvasTinter = function()
{
/// this.textureCach
}
PIXI.CanvasTinter.getTintedTexture = function(texture, color)
{
var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6);
// clone texture..
var canvas = document.createElement("canvas");
var context = canvas.getContext( '2d' );
var frame = texture.frame;
context.width = frame.width;
context.height = frame.height;
context.fillStyle = stringColor;
context.fillRect(0, 0, frame.width, frame.height);
context.globalCompositeOperation = 'multiply';
context.drawImage(texture.baseTexture.source,
frame.x,
frame.y,
frame.width,
frame.height,
0,
0,
frame.width,
frame.height);
context.globalCompositeOperation = 'destination-in';
context.drawImage(texture.baseTexture.source,
frame.x,
frame.y,
frame.width,
frame.height,
0,
0,
frame.width,
frame.height);
return canvas;
}