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

transparet pixi.js

Browse source 
transparency option added to renderers
This commit is contained in:
Mat Groves 2013-04-06 20:14:50 +01:00
parent 726e3901ca
commit cfdd3ae044
12 changed files with 24037 additions and 829 deletions
Download patch file Download diff file Expand all files Collapse all files

81
bin/pixi.dev.js
View file

@ -1,3 +1,14 @@
/**
* @license
* Pixi.JS - v1.0.0
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-04-06
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
*/
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
@ -6,6 +17,7 @@
@module PIXI
*/
var PIXI = PIXI || {};
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
@ -46,6 +58,7 @@ PIXI.Point.clone = function()
// constructor
PIXI.Point.constructor = PIXI.Point;
/**
* @author Mat Groves http://matgroves.com/
*/
@ -102,6 +115,7 @@ PIXI.Rectangle.clone = function()
// constructor
PIXI.Rectangle.constructor = PIXI.Rectangle;
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
@ -211,7 +225,7 @@ PIXI.DisplayObject.prototype.updateTransform = function()
// Cache the matrix values (makes for huge speed increases!)
var a00 = localTransform[0], a01 = localTransform[1], a02 = localTransform[2],
a10 = localTransform[3], a11 = localTransform[4], a12 = localTransform[5];
a10 = localTransform[3], a11 = localTransform[4], a12 = localTransform[5],
b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2],
b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5];
@ -228,6 +242,7 @@ PIXI.DisplayObject.prototype.updateTransform = function()
// mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform);
this.worldAlpha = this.alpha * this.parent.worldAlpha;
}
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
@ -367,6 +382,7 @@ PIXI.DisplayObjectContainer.prototype.updateTransform = function()
this.children[i].updateTransform();
}
}
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
@ -586,6 +602,7 @@ PIXI.Sprite.fromImage = function(imageId)
return new PIXI.Sprite(texture);
}
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
@ -685,7 +702,8 @@ PIXI.MovieClip.prototype.updateTransform = function()
this.currentFrame += this.animationSpeed;
var round = (this.currentFrame + 0.5) | 0;
this.setTexture(this.textures[round % this.textures.length]);
}/**
}
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
@ -844,7 +862,7 @@ PIXI.InteractionManager.prototype.hitTest = function(interactionData)
tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id;
var x1 = -item.width * item.anchor.x
var x1 = -item.width * item.anchor.x;
if(tempPoint.x > x1 && tempPoint.x < x1 + item.width)
{
@ -1046,6 +1064,7 @@ PIXI.InteractionData = function()
PIXI.InteractionData.constructor = PIXI.InteractionData;
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
@ -1148,6 +1167,7 @@ PIXI.Stage.prototype.__removeChild = function(child)
}
}
}
/**
* Provides requestAnimationFrame in a cross browser way.
*/
@ -1224,6 +1244,7 @@ var AjaxRequest = function()
/**
* https://github.com/mrdoob/eventtarget.js/
* THankS mr DOob!
@ -1233,7 +1254,7 @@ PIXI.EventTarget = function () {
var listeners = {};
this.addEventListener = function ( type, listener ) {
this.addEventListener = this.on = function ( type, listener ) {
if ( listeners[ type ] === undefined ) {
@ -1249,7 +1270,7 @@ PIXI.EventTarget = function () {
};
this.dispatchEvent = function ( event ) {
this.dispatchEvent = this.emit = function ( event ) {
for ( var listener in listeners[ event.type ] ) {
@ -1259,7 +1280,7 @@ PIXI.EventTarget = function () {
};
this.removeEventListener = function ( type, listener ) {
this.removeEventListener = this.off = function ( type, listener ) {
var index = listeners[ type ].indexOf( listener );
@ -1274,6 +1295,7 @@ PIXI.EventTarget = function () {
};
/*
* A lighter version of the rad gl-matrix created by Brandon Jones, Colin MacKenzie IV
* you both rock!
@ -1504,6 +1526,7 @@ PIXI.mat4.multiply = function (mat, mat2, dest)
return dest;
}
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
@ -1516,8 +1539,10 @@ PIXI.mat4.multiply = function (mat, mat2, dest)
* @param width {Number} the width of the renderers view
* @param height {Number} the height of the renderers view
* @param view {Canvas} the canvas to use as a view, optional
* @param transparent {Boolean} the transparency of the render view
* @default false
*/
PIXI.autoDetectRenderer = function(width, height, view)
PIXI.autoDetectRenderer = function(width, height, view, transparent)
{
if(!width)width = 800;
if(!height)height = 600;
@ -1528,14 +1553,15 @@ PIXI.autoDetectRenderer = function(width, height, view)
//console.log(webgl);
if( webgl )
{
return new PIXI.WebGLRenderer(width, height, view);
return new PIXI.WebGLRenderer(width, height, view, transparent);
}
return new PIXI.CanvasRenderer(width, height, view);
return new PIXI.CanvasRenderer(width, height, view, transparent);
};
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
@ -1603,7 +1629,8 @@ PIXI.CompileFragmentShader = function(gl, shaderSrc)
}
return shader;
}/**
}
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
@ -1619,16 +1646,21 @@ PIXI._defaultFrame = new PIXI.Rectangle(0,0,1,1);
* @param height {Number} the height of the canvas view
* @default 0
* @param view {Canvas} the canvas to use as a view, optional
* @param transparent {Boolean} the transparency of the render view
* @default false
*
*/
PIXI.WebGLRenderer = function(width, height, view)
PIXI.WebGLRenderer = function(width, height, view, transparent)
{
//console.log(transparent)
this.transparent = !!transparent;
this.width = width || 800;
this.height = height || 600;
this.view = view || document.createElement( 'canvas' );
this.view.width = this.width;
this.view.height = this.height;
this.view.background = "#FF0000";
// deal with losing context..
var scope = this;
@ -1640,7 +1672,9 @@ PIXI.WebGLRenderer = function(width, height, view)
try
{
this.gl = this.view.getContext("experimental-webgl", {
alpha: false
alpha: this.transparent,
antialias:false, // SPEED UP??
premultipliedAlpha:false
});
}
catch (e)
@ -1656,7 +1690,7 @@ PIXI.WebGLRenderer = function(width, height, view)
this.batch = new PIXI.WebGLBatch(gl);
gl.disable(gl.DEPTH_TEST);
gl.enable(gl.BLEND);
gl.colorMask(true, true, true, false);
gl.colorMask(true, true, true, this.transparent);
this.projectionMatrix = PIXI.mat4.create();
this.resize(this.width, this.height)
@ -1790,7 +1824,8 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
gl.clear(gl.COLOR_BUFFER_BIT)
gl.clearColor(stage.backgroundColorSplit[0], stage.backgroundColorSplit[1], stage.backgroundColorSplit[2], 1.0);
gl.clearColor(stage.backgroundColorSplit[0], stage.backgroundColorSplit[1], stage.backgroundColorSplit[2], 0);
// set the correct blend mode!
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
@ -2294,6 +2329,7 @@ PIXI.WebGLRenderer.prototype.handleContextRestored = function(event)
this.contextLost = false;
}
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
@ -2851,6 +2887,7 @@ PIXI.WebGLBatch.prototype.render = function()
gl.drawElements(gl.TRIANGLES, this.size * 6, gl.UNSIGNED_SHORT, 0);
}
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
@ -2862,9 +2899,13 @@ PIXI.WebGLBatch.prototype.render = function()
* @param width {Number} the width of the canvas view
* @param height {Number} the height of the canvas view
* @param view {Canvas} the canvas to use as a view, optional
* @param transparent {Boolean} the transparency of the render view
* @default false
*/
PIXI.CanvasRenderer = function(width, height, view)
PIXI.CanvasRenderer = function(width, height, view, transparent)
{
this.transparent = transparent;
/**
* The width of the canvas view
* @property width
@ -2928,7 +2969,7 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
this.context.setTransform(1,0,0,1,0,0);
// update the background color
if(this.view.style.backgroundColor!=stage.backgroundColorString)this.view.style.backgroundColor = stage.backgroundColorString;
if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString;
this.context.clearRect(0, 0, this.width, this.height)
this.renderDisplayObject(stage);
@ -3133,6 +3174,7 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
/**
* @author Mat Groves http://matgroves.com/
*/
@ -3222,6 +3264,7 @@ PIXI.Strip.prototype.onTextureUpdate = function(event)
}
// some helper functions..
/**
* @author Mat Groves http://matgroves.com/
*/
@ -3397,6 +3440,7 @@ PIXI.Rope.prototype.setTexture = function(texture)
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
@ -3489,6 +3533,7 @@ PIXI.BaseTexture.prototype.fromImage = function(imageUrl)
{
}
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
@ -3691,6 +3736,7 @@ PIXI.Texture.removeTextureFromCache = function(id)
return texture;
}
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
@ -3793,6 +3839,7 @@ PIXI.SpriteSheetLoader.prototype.onLoaded = function()
}
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/

116
bin/pixi.js
View file

File diff suppressed because one or more lines are too long

3
examples/example 1 - Basics/index.html
View file

@ -10,6 +10,7 @@
}
</style>
<script src="pixi.js"></script>
<script src="../../src/pixi/renderers/WebGLRenderer.js"></script>
</head>
<body>
<script>
@ -17,7 +18,7 @@
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x66FF99);
// create a renderer instance.
// create a renderer instance
var renderer = PIXI.autoDetectRenderer(400, 300);
// add the renderer view element to the DOM

4103
examples/example 1 - Basics/pixi.js
View file

File diff suppressed because it is too large Load diff

4103
examples/example 2 - SpriteSheet/pixi.js
View file

File diff suppressed because it is too large Load diff

4103
examples/example 3 - MovieClip/pixi.js
View file

File diff suppressed because it is too large Load diff

4103
examples/example 4 - Balls/pixi.js
View file

File diff suppressed because it is too large Load diff

4103
examples/example 5 - Morph/pixi.js
View file

File diff suppressed because it is too large Load diff

4117
examples/example 6 - Interactivity/pixi.js
View file

File diff suppressed because it is too large Load diff

8
src/pixi/renderers/CanvasRenderer.js
View file

@ -9,9 +9,13 @@
* @param width {Number} the width of the canvas view
* @param height {Number} the height of the canvas view
* @param view {Canvas} the canvas to use as a view, optional
* @param transparent {Boolean} the transparency of the render view
* @default false
*/
PIXI.CanvasRenderer = function(width, height, view)
PIXI.CanvasRenderer = function(width, height, view, transparent)
{
this.transparent = transparent;
/**
* The width of the canvas view
* @property width
@ -75,7 +79,7 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
this.context.setTransform(1,0,0,1,0,0);
// update the background color
if(this.view.style.backgroundColor!=stage.backgroundColorString)this.view.style.backgroundColor = stage.backgroundColorString;
if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString;
this.context.clearRect(0, 0, this.width, this.height)
this.renderDisplayObject(stage);

18
src/pixi/renderers/WebGLRenderer.js
View file

@ -14,16 +14,21 @@ PIXI._defaultFrame = new PIXI.Rectangle(0,0,1,1);
* @param height {Number} the height of the canvas view
* @default 0
* @param view {Canvas} the canvas to use as a view, optional
* @param transparent {Boolean} the transparency of the render view
* @default false
*
*/
PIXI.WebGLRenderer = function(width, height, view)
PIXI.WebGLRenderer = function(width, height, view, transparent)
{
//console.log(transparent)
this.transparent = !!transparent;
this.width = width || 800;
this.height = height || 600;
this.view = view || document.createElement( 'canvas' );
this.view.width = this.width;
this.view.height = this.height;
this.view.background = "#FF0000";
// deal with losing context..
var scope = this;
@ -35,7 +40,9 @@ PIXI.WebGLRenderer = function(width, height, view)
try
{
this.gl = this.view.getContext("experimental-webgl", {
alpha: false
alpha: this.transparent,
antialias:false, // SPEED UP??
premultipliedAlpha:false
});
}
catch (e)
@ -51,7 +58,7 @@ PIXI.WebGLRenderer = function(width, height, view)
this.batch = new PIXI.WebGLBatch(gl);
gl.disable(gl.DEPTH_TEST);
gl.enable(gl.BLEND);
gl.colorMask(true, true, true, false);
gl.colorMask(true, true, true, this.transparent);
this.projectionMatrix = PIXI.mat4.create();
this.resize(this.width, this.height)
@ -185,7 +192,8 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
gl.clear(gl.COLOR_BUFFER_BIT)
gl.clearColor(stage.backgroundColorSplit[0], stage.backgroundColorSplit[1], stage.backgroundColorSplit[2], 1.0);
gl.clearColor(stage.backgroundColorSplit[0], stage.backgroundColorSplit[1], stage.backgroundColorSplit[2], 0);
// set the correct blend mode!
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

8
src/pixi/utils/Detector.js
View file

@ -10,8 +10,10 @@
* @param width {Number} the width of the renderers view
* @param height {Number} the height of the renderers view
* @param view {Canvas} the canvas to use as a view, optional
* @param transparent {Boolean} the transparency of the render view
* @default false
*/
PIXI.autoDetectRenderer = function(width, height, view)
PIXI.autoDetectRenderer = function(width, height, view, transparent)
{
if(!width)width = 800;
if(!height)height = 600;
@ -22,10 +24,10 @@ PIXI.autoDetectRenderer = function(width, height, view)
//console.log(webgl);
if( webgl )
{
return new PIXI.WebGLRenderer(width, height, view);
return new PIXI.WebGLRenderer(width, height, view, transparent);
}
return new PIXI.CanvasRenderer(width, height, view);
return new PIXI.CanvasRenderer(width, height, view, transparent);
};