Conflicts: src/pixi/textures/RenderTexture.js
Updated example for render texture
This commit is contained in:
Mat Groves 2013-07-11 20:32:29 +01:00
commit 92b513e4f0
55 changed files with 28041 additions and 12487 deletions

View file

@ -26,6 +26,10 @@ any breakthroughs will be posted up there too!
- [Render Texture Demo](<http://www.goodboydigital.com/pixijs/examples/11/>) - [Render Texture Demo](<http://www.goodboydigital.com/pixijs/examples/11/>)
- [Primitives Demo](<http://www.goodboydigital.com/pixijs/examples/13/>)
- [Masking Demo](<http://www.goodboydigital.com/pixijs/examples/14/>)
- [Interaction Demo](<http://www.goodboydigital.com/pixijs/examples/6/>) - [Interaction Demo](<http://www.goodboydigital.com/pixijs/examples/6/>)
- [photonstorm Balls Demo](<http://gametest.mobi/pixi/balls/>) - [photonstorm Balls Demo](<http://gametest.mobi/pixi/balls/>)
@ -49,8 +53,6 @@ last 2 examples and allowing us to share the source code :)
### Road Map ### ### Road Map ###
* Create a Typescript definition file for Pixi.js * Create a Typescript definition file for Pixi.js
* Implement Custom Render Item (currently being worked on by @GoodBoyDigital)
* Implement Masking
* Implement Filters (currently being worked on by @GoodBoyDigital) * Implement Filters (currently being worked on by @GoodBoyDigital)
* Implement Flash animation to pixi * Implement Flash animation to pixi
* Update Loader so that it support XHR2 if it is available * Update Loader so that it support XHR2 if it is available
@ -104,6 +106,7 @@ It also copies the non-minified version to the examples.
- Render Texture - Render Texture
- Spine support - Spine support
- Primitive Drawing - Primitive Drawing
- Masking
### Coming soon ### ### Coming soon ###

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

View file

@ -113,7 +113,7 @@
// render the stage to the texture // render the stage to the texture
// the true clears the texture before content is rendered // the true clears the texture before content is rendered
renderTexture2.render(stage, true); renderTexture2.render(stage, new PIXI.Point(0,0), true);
// and finally render the stage // and finally render the stage
renderer.render(stage); renderer.render(stage);

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

View file

@ -5,45 +5,48 @@
/** /**
The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive
This manager also supports multitouch. * This manager also supports multitouch.
@class InteractionManager *
@constructor * @class InteractionManager
@param stage {Stage} * @constructor
@type Stage * @param stage {Stage} The stage to handle interactions
*/ */
PIXI.InteractionManager = function(stage) PIXI.InteractionManager = function(stage)
{ {
/** /**
* a refference to the stage * a refference to the stage
*
* @property stage * @property stage
* @type Stage * @type Stage
*/ */
this.stage = stage; this.stage = stage;
// helpers
this.tempPoint = new PIXI.Point();
//this.tempMatrix = mat3.create();
this.mouseoverEnabled = true;
/** /**
* the mouse data * the mouse data
*
* @property mouse * @property mouse
* @type InteractionData * @type InteractionData
*/ */
this.mouse = new PIXI.InteractionData(); this.mouse = new PIXI.InteractionData();
/** /**
* an object that stores current touches (InteractionData) by id reference * an object that stores current touches (InteractionData) by id reference
*
* @property touchs * @property touchs
* @type Object * @type Object
*/ */
this.touchs = {}; this.touchs = {};
// helpers
this.tempPoint = new PIXI.Point();
//this.tempMatrix = mat3.create();
this.mouseoverEnabled = true;
//tiny little interactiveData pool! //tiny little interactiveData pool!
this.pool = []; this.pool = [];
this.interactiveItems = []; this.interactiveItems = [];
this.last = 0; this.last = 0;
@ -52,6 +55,14 @@ PIXI.InteractionManager = function(stage)
// constructor // constructor
PIXI.InteractionManager.constructor = PIXI.InteractionManager; PIXI.InteractionManager.constructor = PIXI.InteractionManager;
/**
* Collects an interactive sprite recursively to have their interactions managed
*
* @method collectInteractiveSprite
* @param displayObject {DisplayObject} the displayObject to collect
* @param iParent {DisplayObject}
* @private
*/
PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent)
{ {
var children = displayObject.children; var children = displayObject.children;
@ -88,6 +99,13 @@ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObj
} }
} }
/**
* Sets the target for event delegation
*
* @method setTarget
* @param target {WebGLRenderer|CanvasRenderer} the renderer to bind events to
* @private
*/
PIXI.InteractionManager.prototype.setTarget = function(target) PIXI.InteractionManager.prototype.setTarget = function(target)
{ {
if (window.navigator.msPointerEnabled) if (window.navigator.msPointerEnabled)
@ -111,6 +129,12 @@ PIXI.InteractionManager.prototype.setTarget = function(target)
target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true);
} }
/**
* updates the state of interactive objects
*
* @method update
* @private
*/
PIXI.InteractionManager.prototype.update = function() PIXI.InteractionManager.prototype.update = function()
{ {
if(!this.target)return; if(!this.target)return;
@ -190,6 +214,13 @@ PIXI.InteractionManager.prototype.update = function()
} }
} }
/**
* Is called when the mouse moves accross the renderer element
*
* @method onMouseMove
* @param event {Event} The DOM event of the mouse moving
* @private
*/
PIXI.InteractionManager.prototype.onMouseMove = function(event) PIXI.InteractionManager.prototype.onMouseMove = function(event)
{ {
this.mouse.originalEvent = event || window.event; //IE uses window.event this.mouse.originalEvent = event || window.event; //IE uses window.event
@ -215,6 +246,13 @@ PIXI.InteractionManager.prototype.onMouseMove = function(event)
} }
} }
/**
* Is called when the mouse button is pressed down on the renderer element
*
* @method onMouseDown
* @param event {Event} The DOM event of a mouse button being pressed down
* @private
*/
PIXI.InteractionManager.prototype.onMouseDown = function(event) PIXI.InteractionManager.prototype.onMouseDown = function(event)
{ {
event.preventDefault(); event.preventDefault();
@ -254,6 +292,13 @@ PIXI.InteractionManager.prototype.onMouseDown = function(event)
} }
} }
/**
* Is called when the mouse button is released on the renderer element
*
* @method onMouseUp
* @param event {Event} The DOM event of a mouse button being released
* @private
*/
PIXI.InteractionManager.prototype.onMouseUp = function(event) PIXI.InteractionManager.prototype.onMouseUp = function(event)
{ {
this.mouse.originalEvent = event || window.event; //IE uses window.event this.mouse.originalEvent = event || window.event; //IE uses window.event
@ -299,6 +344,14 @@ PIXI.InteractionManager.prototype.onMouseUp = function(event)
} }
} }
/**
* Tests if the current mouse coords hit a sprite
*
* @method hitTest
* @param item {DisplayObject} The displayObject to test for a hit
* @param interactionData {InteractionData} The interactiondata object to update in the case of a hit
* @private
*/
PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
{ {
var global = interactionData.global; var global = interactionData.global;
@ -355,8 +408,13 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
return false; return false;
} }
/**
* Is called when a touch is moved accross the renderer element
*
* @method onTouchMove
* @param event {Event} The DOM event of a touch moving accross the renderer view
* @private
*/
PIXI.InteractionManager.prototype.onTouchMove = function(event) PIXI.InteractionManager.prototype.onTouchMove = function(event)
{ {
this.mouse.originalEvent = event || window.event; //IE uses window.event this.mouse.originalEvent = event || window.event; //IE uses window.event
@ -381,6 +439,13 @@ PIXI.InteractionManager.prototype.onTouchMove = function(event)
} }
} }
/**
* Is called when a touch is started on the renderer element
*
* @method onTouchStart
* @param event {Event} The DOM event of a touch starting on the renderer view
* @private
*/
PIXI.InteractionManager.prototype.onTouchStart = function(event) PIXI.InteractionManager.prototype.onTouchStart = function(event)
{ {
event.preventDefault(); event.preventDefault();
@ -422,9 +487,15 @@ PIXI.InteractionManager.prototype.onTouchStart = function(event)
} }
} }
} }
} }
/**
* Is called when a touch is ended on the renderer element
*
* @method onTouchEnd
* @param event {Event} The DOM event of a touch ending on the renderer view
* @private
*/
PIXI.InteractionManager.prototype.onTouchEnd = function(event) PIXI.InteractionManager.prototype.onTouchEnd = function(event)
{ {
this.mouse.originalEvent = event || window.event; //IE uses window.event this.mouse.originalEvent = event || window.event; //IE uses window.event
@ -490,13 +561,16 @@ PIXI.InteractionManager.prototype.onTouchEnd = function(event)
} }
/** /**
@class InteractionData * Holds all information related to an Interaction event
@constructor *
*/ * @class InteractionData
* @constructor
*/
PIXI.InteractionData = function() PIXI.InteractionData = function()
{ {
/** /**
* This point stores the global coords of where the touch/mouse event happened * This point stores the global coords of where the touch/mouse event happened
*
* @property global * @property global
* @type Point * @type Point
*/ */
@ -507,6 +581,7 @@ PIXI.InteractionData = function()
/** /**
* The target Sprite that was interacted with * The target Sprite that was interacted with
*
* @property target * @property target
* @type Sprite * @type Sprite
*/ */
@ -514,6 +589,7 @@ PIXI.InteractionData = function()
/** /**
* When passed to an event handler, this will be the original DOM Event that was captured * When passed to an event handler, this will be the original DOM Event that was captured
*
* @property originalEvent * @property originalEvent
* @type Event * @type Event
*/ */
@ -522,6 +598,7 @@ PIXI.InteractionData = function()
/** /**
* This will return the local coords of the specified displayObject for this InteractionData * This will return the local coords of the specified displayObject for this InteractionData
*
* @method getLocalPosition * @method getLocalPosition
* @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off
* @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject
@ -542,5 +619,3 @@ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject)
// constructor // constructor
PIXI.InteractionData.constructor = PIXI.InteractionData; PIXI.InteractionData.constructor = PIXI.InteractionData;

View file

@ -3,6 +3,6 @@
*/ */
/** /**
@module PIXI * @module PIXI
*/ */
var PIXI = PIXI || {}; var PIXI = PIXI || {};

View file

@ -3,6 +3,8 @@
*/ */
/** /**
* The Circle object can be used to specify a hit area for displayobjects
*
* @class Circle * @class Circle
* @constructor * @constructor
* @param x {Number} The X coord of the upper-left corner of the framing rectangle of this circle * @param x {Number} The X coord of the upper-left corner of the framing rectangle of this circle
@ -34,8 +36,10 @@ PIXI.Circle = function(x, y, radius)
} }
/** /**
* Creates a clone of this Circle instance
*
* @method clone * @method clone
* @return a copy of the polygon * @return {Circle} a copy of the polygon
*/ */
PIXI.Circle.prototype.clone = function() PIXI.Circle.prototype.clone = function()
{ {
@ -43,10 +47,12 @@ PIXI.Circle.prototype.clone = function()
} }
/** /**
* Checks if the x, and y coords passed to this function are contained within this circle
*
* @method contains * @method contains
* @param x {Number} The X coord of the point to test * @param x {Number} The X coord of the point to test
* @param y {Number} The Y coord of the point to test * @param y {Number} The Y coord of the point to test
* @return if the x/y coords are within this polygon * @return {Boolean} if the x/y coords are within this polygon
*/ */
PIXI.Circle.prototype.contains = function(x, y) PIXI.Circle.prototype.contains = function(x, y)
{ {

View file

@ -3,10 +3,12 @@
*/ */
/** /**
* The Ellipse object can be used to specify a hit area for displayobjects
*
* @class Ellipse * @class Ellipse
* @constructor * @constructor
* @param x {Number} The X coord of the upper-left corner of the framing rectangle of this circle * @param x {Number} The X coord of the upper-left corner of the framing rectangle of this ellipse
* @param y {Number} The Y coord of the upper-left corner of the framing rectangle of this circle * @param y {Number} The Y coord of the upper-left corner of the framing rectangle of this ellipse
* @param width {Number} The overall height of this ellipse * @param width {Number} The overall height of this ellipse
* @param height {Number} The overall width of this ellipse * @param height {Number} The overall width of this ellipse
*/ */
@ -42,8 +44,10 @@ PIXI.Ellipse = function(x, y, width, height)
} }
/** /**
* Creates a clone of this Ellipse instance
*
* @method clone * @method clone
* @return a copy of the polygon * @return {Ellipse} a copy of the ellipse
*/ */
PIXI.Ellipse.prototype.clone = function() PIXI.Ellipse.prototype.clone = function()
{ {
@ -51,10 +55,12 @@ PIXI.Ellipse.prototype.clone = function()
} }
/** /**
* Checks if the x, and y coords passed to this function are contained within this ellipse
*
* @method contains * @method contains
* @param x {Number} The X coord of the point to test * @param x {Number} The X coord of the point to test
* @param y {Number} The Y coord of the point to test * @param y {Number} The Y coord of the point to test
* @return if the x/y coords are within this polygon * @return {Boolean} if the x/y coords are within this ellipse
*/ */
PIXI.Ellipse.prototype.contains = function(x, y) PIXI.Ellipse.prototype.contains = function(x, y)
{ {

View file

@ -4,6 +4,7 @@
/** /**
* The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis. * The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis.
*
* @class Point * @class Point
* @constructor * @constructor
* @param x {Number} position of the point * @param x {Number} position of the point
@ -26,9 +27,11 @@ PIXI.Point = function(x, y)
this.y = y || 0; this.y = y || 0;
} }
/** /**
* Creates a clone of this point
*
* @method clone * @method clone
* @return a copy of the point * @return {Point} a copy of the point
*/ */
PIXI.Point.prototype.clone = function() PIXI.Point.prototype.clone = function()
{ {

View file

@ -5,11 +5,18 @@
/** /**
* @class Polygon * @class Polygon
* @constructor * @constructor
* @param points {Array<Point>|Array<Number>} This cna be an array of Points or a flat array of numbers * @param points* {Array<Point>|Array<Number>|Point...|Number...} This can be an array of Points that form the polygon,
* that will be interpreted as [x,y, x,y, ...] * a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arugments passed can be
* all the points of the polygon e.g. `new PIXI.Polygon(new PIXI.Point(), new PIXI.Point(), ...)`, or the
* arguments passed can be flat x,y values e.g. `new PIXI.Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are
* Numbers.
*/ */
PIXI.Polygon = function(points) PIXI.Polygon = function(points)
{ {
//if points isn't an array, use arguments as the array
if(!(points instanceof Array))
points = Array.prototype.slice.call(arguments);
//if this is a flat array of numbers, convert it to points //if this is a flat array of numbers, convert it to points
if(typeof points[0] === 'number') { if(typeof points[0] === 'number') {
var p = []; var p = [];
@ -26,8 +33,10 @@ PIXI.Polygon = function(points)
} }
/** /**
* Creates a clone of this polygon
*
* @method clone * @method clone
* @return a copy of the polygon * @return {Polygon} a copy of the polygon
*/ */
PIXI.Polygon.prototype.clone = function() PIXI.Polygon.prototype.clone = function()
{ {
@ -40,10 +49,12 @@ PIXI.Polygon.prototype.clone = function()
} }
/** /**
* Checks if the x, and y coords passed to this function are contained within this polygon
*
* @method contains * @method contains
* @param x {Number} The X coord of the point to test * @param x {Number} The X coord of the point to test
* @param y {Number} The Y coord of the point to test * @param y {Number} The Y coord of the point to test
* @return if the x/y coords are within this polygon * @return {Boolean} if the x/y coords are within this polygon
*/ */
PIXI.Polygon.prototype.contains = function(x, y) PIXI.Polygon.prototype.contains = function(x, y)
{ {

View file

@ -4,12 +4,13 @@
/** /**
* the Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height. * the Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height.
*
* @class Rectangle * @class Rectangle
* @constructor * @constructor
* @param x {Number} position of the rectangle * @param x {Number} The X coord of the upper-left corner of the rectangle
* @param y {Number} position of the rectangle * @param y {Number} The Y coord of the upper-left corner of the rectangle
* @param width {Number} of the rectangle * @param width {Number} The overall wisth of this rectangle
* @param height {Number} of the rectangle * @param height {Number} The overall height of this rectangle
*/ */
PIXI.Rectangle = function(x, y, width, height) PIXI.Rectangle = function(x, y, width, height)
{ {
@ -42,9 +43,11 @@ PIXI.Rectangle = function(x, y, width, height)
this.height = height || 0; this.height = height || 0;
} }
/** /**
* Creates a clone of this Rectangle
*
* @method clone * @method clone
* @return a copy of the rectangle * @return {Rectangle} a copy of the rectangle
*/ */
PIXI.Rectangle.prototype.clone = function() PIXI.Rectangle.prototype.clone = function()
{ {
@ -52,10 +55,12 @@ PIXI.Rectangle.prototype.clone = function()
} }
/** /**
* Checks if the x, and y coords passed to this function are contained within this Rectangle
*
* @method contains * @method contains
* @param x {Number} The X coord of the point to test * @param x {Number} The X coord of the point to test
* @param y {Number} The Y coord of the point to test * @param y {Number} The Y coord of the point to test
* @return if the x/y coords are within this polygon * @return {Boolean} if the x/y coords are within this Rectangle
*/ */
PIXI.Rectangle.prototype.contains = function(x, y) PIXI.Rectangle.prototype.contains = function(x, y)
{ {

View file

@ -3,7 +3,8 @@
*/ */
/** /**
* this is the base class for all objects that are rendered on the screen. * The base class for all objects that are rendered on the screen.
*
* @class DisplayObject * @class DisplayObject
* @constructor * @constructor
*/ */
@ -11,163 +12,243 @@ PIXI.DisplayObject = function()
{ {
this.last = this; this.last = this;
this.first = this; this.first = this;
/** /**
* The coordinate of the object relative to the local coordinates of the parent. * The coordinate of the object relative to the local coordinates of the parent.
*
* @property position * @property position
* @type Point * @type Point
*/ */
this.position = new PIXI.Point(); this.position = new PIXI.Point();
/** /**
* The scale factor of the object. * The scale factor of the object.
*
* @property scale * @property scale
* @type Point * @type Point
*/ */
this.scale = new PIXI.Point(1,1);//{x:1, y:1}; this.scale = new PIXI.Point(1,1);//{x:1, y:1};
/** /**
* The pivot point of the displayObject that it rotates around * The pivot point of the displayObject that it rotates around
*
* @property pivot * @property pivot
* @type Point * @type Point
*/ */
this.pivot = new PIXI.Point(0,0); this.pivot = new PIXI.Point(0,0);
/** /**
* The rotation of the object in radians. * The rotation of the object in radians.
*
* @property rotation * @property rotation
* @type Number * @type Number
*/ */
this.rotation = 0; this.rotation = 0;
/** /**
* The opacity of the object. * The opacity of the object.
*
* @property alpha * @property alpha
* @type Number * @type Number
*/ */
this.alpha = 1; this.alpha = 1;
/** /**
* The visibility of the object. * The visibility of the object.
*
* @property visible * @property visible
* @type Boolean * @type Boolean
*/ */
this.visible = true; this.visible = true;
this.worldVisible = false;
/**
* [read-only] The display object container that contains this display object.
* @property parent
* @type DisplayObjectContainer
*/
this.parent = null;
/**
* [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.
* @property stage
* @type Stage
*/
this.stage = null;
/** /**
* This is the defined area that will pick up mouse / touch events. It is null by default. * This is the defined area that will pick up mouse / touch events. It is null by default.
* Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)
*
* @property hitArea * @property hitArea
* @type Rectangle * @type Rectangle|Circle|Ellipse|Polygon
*/ */
this.hitArea = null; this.hitArea = null;
this.worldAlpha = 1;
this.color = [];
this.worldTransform = PIXI.mat3.create()//mat3.identity();
this.localTransform = PIXI.mat3.create()//mat3.identity();
this.dynamic = true;
// chach that puppy!
this._sr = 0;
this._cr = 1;
this.childIndex = 0;
this.renderable = false;
// [readonly] best not to toggle directly! use setInteractive()
this._interactive = false;
/** /**
* This is used to indicate if the displayObject should display a mouse hand cursor on rollover * This is used to indicate if the displayObject should display a mouse hand cursor on rollover
*
* @property buttonMode * @property buttonMode
* @type Boolean * @type Boolean
*/ */
this.buttonMode = false; this.buttonMode = false;
/**
* Can this object be rendered
*
* @property renderable
* @type Boolean
*/
this.renderable = false;
/**
* [read-only] The visibility of the object based on world (parent) factors.
*
* @property worldVisible
* @type Boolean
* @readOnly
*/
this.worldVisible = false;
/**
* [read-only] The display object container that contains this display object.
*
* @property parent
* @type DisplayObjectContainer
* @readOnly
*/
this.parent = null;
/**
* [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.
*
* @property stage
* @type Stage
* @readOnly
*/
this.stage = null;
/**
* [read-only] The index of this object in the parent's `children` array
*
* @property childIndex
* @type Number
* @readOnly
*/
this.childIndex = 0;
/**
* [read-only] The multiplied alpha of the displayobject
*
* @property worldAlpha
* @type Number
* @readOnly
*/
this.worldAlpha = 1;
/**
* [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property
*
* @property _interactive
* @type Boolean
* @readOnly
* @private
*/
this._interactive = false;
/**
* [read-only] Current transform of the object based on world (parent) factors
*
* @property worldTransform
* @type Mat3
* @readOnly
* @private
*/
this.worldTransform = PIXI.mat3.create()//mat3.identity();
/**
* [read-only] Current transform of the object locally
*
* @property localTransform
* @type Mat3
* @readOnly
* @private
*/
this.localTransform = PIXI.mat3.create()//mat3.identity();
/**
* [NYI] Unkown
*
* @property color
* @type Array<>
* @private
*/
this.color = [];
/**
* [NYI] Holds whether or not this object is dynamic, for rendering optimization
*
* @property dynamic
* @type Boolean
* @private
*/
this.dynamic = true;
// chach that puppy!
this._sr = 0;
this._cr = 1;
/* /*
* MOUSE Callbacks * MOUSE Callbacks
*/ */
/** /**
* A callback that is used when the users clicks on the displayObject with their mouse * A callback that is used when the users clicks on the displayObject with their mouse
* @method click * @method click
* @param interactionData {InteractionData} * @param interactionData {InteractionData}
*/ */
/** /**
* A callback that is used when the user clicks the mouse down over the sprite * A callback that is used when the user clicks the mouse down over the sprite
* @method mousedown * @method mousedown
* @param interactionData {InteractionData} * @param interactionData {InteractionData}
*/ */
/** /**
* A callback that is used when the user releases the mouse that was over the displayObject * A callback that is used when the user releases the mouse that was over the displayObject
* for this callback to be fired the mouse must have been pressed down over the displayObject * for this callback to be fired the mouse must have been pressed down over the displayObject
* @method mouseup * @method mouseup
* @param interactionData {InteractionData} * @param interactionData {InteractionData}
*/ */
/** /**
* A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject
* for this callback to be fired, The touch must have started over the displayObject * for this callback to be fired, The touch must have started over the displayObject
* @method mouseupoutside * @method mouseupoutside
* @param interactionData {InteractionData} * @param interactionData {InteractionData}
*/ */
/** /**
* A callback that is used when the users mouse rolls over the displayObject * A callback that is used when the users mouse rolls over the displayObject
* @method mouseover * @method mouseover
* @param interactionData {InteractionData} * @param interactionData {InteractionData}
*/ */
/** /**
* A callback that is used when the users mouse leaves the displayObject * A callback that is used when the users mouse leaves the displayObject
* @method mouseout * @method mouseout
* @param interactionData {InteractionData} * @param interactionData {InteractionData}
*/ */
/* /*
* TOUCH Callbacks * TOUCH Callbacks
*/ */
/** /**
* A callback that is used when the users taps on the sprite with their finger * A callback that is used when the users taps on the sprite with their finger
* basically a touch version of click * basically a touch version of click
* @method tap * @method tap
* @param interactionData {InteractionData} * @param interactionData {InteractionData}
*/ */
/** /**
* A callback that is used when the user touch's over the displayObject * A callback that is used when the user touch's over the displayObject
* @method touchstart * @method touchstart
* @param interactionData {InteractionData} * @param interactionData {InteractionData}
*/ */
/** /**
* A callback that is used when the user releases a touch over the displayObject * A callback that is used when the user releases a touch over the displayObject
* @method touchend * @method touchend
* @param interactionData {InteractionData} * @param interactionData {InteractionData}
*/ */
/** /**
* A callback that is used when the user releases the touch that was over the displayObject * A callback that is used when the user releases the touch that was over the displayObject
* for this callback to be fired, The touch must have started over the sprite * for this callback to be fired, The touch must have started over the sprite
@ -193,8 +274,10 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'visible', {
/** /**
* [Deprecated] Indicates if the sprite will have touch and mouse interactivity. It is false by default * [Deprecated] Indicates if the sprite will have touch and mouse interactivity. It is false by default
* Instead of using this function you can now simply set the interactive property to true or false * Instead of using this function you can now simply set the interactive property to true or false
*
* @method setInteractive * @method setInteractive
* @param interactive {Boolean} * @param interactive {Boolean}
* @deprecated Simply set the `interactive` property directly
*/ */
PIXI.DisplayObject.prototype.setInteractive = function(interactive) PIXI.DisplayObject.prototype.setInteractive = function(interactive)
{ {
@ -203,8 +286,10 @@ PIXI.DisplayObject.prototype.setInteractive = function(interactive)
/** /**
* Indicates if the sprite will have touch and mouse interactivity. It is false by default * Indicates if the sprite will have touch and mouse interactivity. It is false by default
*
* @property interactive * @property interactive
* @type Boolean * @type Boolean
* @default false
*/ */
Object.defineProperty(PIXI.DisplayObject.prototype, 'interactive', { Object.defineProperty(PIXI.DisplayObject.prototype, 'interactive', {
get: function() { get: function() {
@ -223,8 +308,9 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'interactive', {
* Sets a mask for the displayObject. A mask is an object that limits the visibility of an object to the shape of the mask applied to it. * Sets a mask for the displayObject. A mask is an object that limits the visibility of an object to the shape of the mask applied to it.
* In PIXI a regular mask must be a PIXI.Ggraphics object. This allows for much faster masking in canvas as it utilises shape clipping. * In PIXI a regular mask must be a PIXI.Ggraphics object. This allows for much faster masking in canvas as it utilises shape clipping.
* To remove a mask, set this property to null. * To remove a mask, set this property to null.
*
* @property mask * @property mask
* @type PIXI.Graphics * @type Graphics
*/ */
Object.defineProperty(PIXI.DisplayObject.prototype, 'mask', { Object.defineProperty(PIXI.DisplayObject.prototype, 'mask', {
get: function() { get: function() {
@ -245,8 +331,12 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'mask', {
} }
}); });
/* /*
* private * Adds a filter to this displayObject
*
* @method addFilter
* @param mask {Graphics} the graphics object to use as a filter
* @private
*/ */
PIXI.DisplayObject.prototype.addFilter = function(mask) PIXI.DisplayObject.prototype.addFilter = function(mask)
{ {
@ -346,6 +436,12 @@ PIXI.DisplayObject.prototype.addFilter = function(mask)
} }
/*
* Removes the filter to this displayObject
*
* @method removeFilter
* @private
*/
PIXI.DisplayObject.prototype.removeFilter = function() PIXI.DisplayObject.prototype.removeFilter = function()
{ {
if(!this.filter)return; if(!this.filter)return;
@ -396,7 +492,10 @@ PIXI.DisplayObject.prototype.removeFilter = function()
//} //}
} }
/** /*
* Updates the object transform for rendering
*
* @method updateTransform
* @private * @private
*/ */
PIXI.DisplayObject.prototype.updateTransform = function() PIXI.DisplayObject.prototype.updateTransform = function()

View file

@ -4,7 +4,9 @@
/** /**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects. * A DisplayObjectContainer represents a collection of display objects.
* It is the base class of all display objects that act as a container for other objects.
*
* @class DisplayObjectContainer * @class DisplayObjectContainer
* @extends DisplayObject * @extends DisplayObject
* @constructor * @constructor
@ -15,12 +17,12 @@ PIXI.DisplayObjectContainer = function()
/** /**
* [read-only] The of children of this container. * [read-only] The of children of this container.
* @property children {Array} *
* @property children
* @type Array<DisplayObject>
* @readOnly
*/ */
this.children = []; this.children = [];
//s
this.renderable = false;
} }
// constructor // constructor
@ -41,15 +43,12 @@ Object.defineProperty(PIXI.DisplayObjectContainer.prototype, 'visible', {
/** /**
* Adds a child to the container. * Adds a child to the container.
*
* @method addChild * @method addChild
* @param DisplayObject {DisplayObject} * @param child {DisplayObject} The DisplayObject to add to the container
*/ */
PIXI.DisplayObjectContainer.prototype.addChild = function(child) PIXI.DisplayObjectContainer.prototype.addChild = function(child)
{ {
//this.addChildAt(child, this.children.length)
//return;
if(child.parent != undefined) if(child.parent != undefined)
{ {
@ -57,9 +56,9 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
child.parent.removeChild(child); child.parent.removeChild(child);
// return; // return;
} }
child.parent = this; child.parent = this;
//child.childIndex = this.children.length; child.childIndex = this.children.length;
this.children.push(child); this.children.push(child);
@ -82,7 +81,6 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
// modify the list.. // modify the list..
var childFirst = child.first var childFirst = child.first
var childLast = child.last; var childLast = child.last;
// console.log(childFirst)
var nextObject; var nextObject;
var previousObject; var previousObject;
@ -95,9 +93,7 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
{ {
previousObject = this.last; previousObject = this.last;
} }
// if(this.last._iNext)
//console.log( this.last._iNext);
nextObject = previousObject._iNext; nextObject = previousObject._iNext;
// always true in this case // always true in this case
@ -123,8 +119,7 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
childFirst._iPrev = previousObject; childFirst._iPrev = previousObject;
previousObject._iNext = childFirst; previousObject._iNext = childFirst;
// console.log(childFirst);
// need to remove any render groups.. // need to remove any render groups..
if(this.__renderGroup) if(this.__renderGroup)
{ {
@ -138,9 +133,10 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
/** /**
* Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown
*
* @method addChildAt * @method addChildAt
* @param DisplayObject {DisplayObject} * @param child {DisplayObject} The child to add
* @param index {Number} * @param index {Number} The index to place the child in
*/ */
PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
{ {
@ -204,8 +200,7 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
childFirst._iPrev = previousObject; childFirst._iPrev = previousObject;
previousObject._iNext = childFirst; previousObject._iNext = childFirst;
this.children.splice(index, 0, child); this.children.splice(index, 0, child);
// need to remove any render groups.. // need to remove any render groups..
if(this.__renderGroup) if(this.__renderGroup)
@ -224,10 +219,12 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
} }
/** /**
* Swaps the depth of 2 displayObjects * [NYI] Swaps the depth of 2 displayObjects
*
* @method swapChildren * @method swapChildren
* @param DisplayObject {DisplayObject} * @param child {DisplayObject}
* @param DisplayObject2 {DisplayObject} * @param child2 {DisplayObject}
* @private
*/ */
PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2)
{ {
@ -272,8 +269,9 @@ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2)
/** /**
* Returns the Child at the specified index * Returns the Child at the specified index
*
* @method getChildAt * @method getChildAt
* @param index {Number} * @param index {Number} The index to get the child from
*/ */
PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) PIXI.DisplayObjectContainer.prototype.getChildAt = function(index)
{ {
@ -289,15 +287,15 @@ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index)
/** /**
* Removes a child from the container. * Removes a child from the container.
*
* @method removeChild * @method removeChild
* @param DisplayObject {DisplayObject} * @param child {DisplayObject} The DisplayObject to remove
*/ */
PIXI.DisplayObjectContainer.prototype.removeChild = function(child) PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
{ {
var index = this.children.indexOf( child ); var index = this.children.indexOf( child );
if ( index !== -1 ) if ( index !== -1 )
{ {
//console.log(">>")
// unlink // // unlink //
// modify the list.. // modify the list..
var childFirst = child.first var childFirst = child.first
@ -353,8 +351,10 @@ PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
} }
} }
/*
/** * Updates the container's children's transform for rendering
*
* @method updateTransform
* @private * @private
*/ */
PIXI.DisplayObjectContainer.prototype.updateTransform = function() PIXI.DisplayObjectContainer.prototype.updateTransform = function()

View file

@ -4,56 +4,68 @@
/** /**
* A MovieClip is a simple way to display an animation depicted by a list of textures. * A MovieClip is a simple way to display an animation depicted by a list of textures.
*
* @class MovieClip * @class MovieClip
* @extends Sprite * @extends Sprite
* @constructor * @constructor
* @param textures {Array} an array of {Texture} objects that make up the animation * @param textures {Array<Texture>} an array of {Texture} objects that make up the animation
*/ */
PIXI.MovieClip = function(textures) PIXI.MovieClip = function(textures)
{ {
PIXI.Sprite.call( this, textures[0]); PIXI.Sprite.call(this, textures[0]);
/** /**
* The array of textures that make up the animation * The array of textures that make up the animation
*
* @property textures * @property textures
* @type Array * @type Array
*/ */
this.textures = textures; this.textures = textures;
/**
* [read only] The index MovieClips current frame (this may not have to be a whole number)
* @property currentFrame
* @type Number
*/
this.currentFrame = 0;
/** /**
* The speed that the MovieClip will play at. Higher is faster, lower is slower * The speed that the MovieClip will play at. Higher is faster, lower is slower
*
* @property animationSpeed * @property animationSpeed
* @type Number * @type Number
* @default 1
*/ */
this.animationSpeed = 1; this.animationSpeed = 1;
/** /**
* Whether or not the movie clip repeats after playing. * Whether or not the movie clip repeats after playing.
*
* @property loop * @property loop
* @type Boolean * @type Boolean
* @default true
*/ */
this.loop = true; this.loop = true;
/** /**
* Function to call when a MovieClip finishes playing * Function to call when a MovieClip finishes playing
*
* @property onComplete * @property onComplete
* @type Function * @type Function
*/ */
this.onComplete = null; this.onComplete = null;
/** /**
* [read only] indicates if the MovieClip is currently playing * [read-only] The index MovieClips current frame (this may not have to be a whole number)
*
* @property currentFrame
* @type Number
* @default 0
* @readOnly
*/
this.currentFrame = 0;
/**
* [read-only] Indicates if the MovieClip is currently playing
*
* @property playing * @property playing
* @type Boolean * @type Boolean
* @readOnly
*/ */
this.playing; this.playing = false;
} }
// constructor // constructor
@ -62,6 +74,7 @@ PIXI.MovieClip.prototype = Object.create( PIXI.Sprite.prototype );
/** /**
* Stops the MovieClip * Stops the MovieClip
*
* @method stop * @method stop
*/ */
PIXI.MovieClip.prototype.stop = function() PIXI.MovieClip.prototype.stop = function()
@ -71,6 +84,7 @@ PIXI.MovieClip.prototype.stop = function()
/** /**
* Plays the MovieClip * Plays the MovieClip
*
* @method play * @method play
*/ */
PIXI.MovieClip.prototype.play = function() PIXI.MovieClip.prototype.play = function()
@ -80,6 +94,7 @@ PIXI.MovieClip.prototype.play = function()
/** /**
* Stops the MovieClip and goes to a specific frame * Stops the MovieClip and goes to a specific frame
*
* @method gotoAndStop * @method gotoAndStop
* @param frameNumber {Number} frame index to stop at * @param frameNumber {Number} frame index to stop at
*/ */
@ -93,6 +108,7 @@ PIXI.MovieClip.prototype.gotoAndStop = function(frameNumber)
/** /**
* Goes to a specific frame and begins playing the MovieClip * Goes to a specific frame and begins playing the MovieClip
*
* @method gotoAndPlay * @method gotoAndPlay
* @param frameNumber {Number} frame index to start at * @param frameNumber {Number} frame index to start at
*/ */
@ -102,6 +118,12 @@ PIXI.MovieClip.prototype.gotoAndPlay = function(frameNumber)
this.playing = true; this.playing = true;
} }
/*
* Updates the object transform for rendering
*
* @method updateTransform
* @private
*/
PIXI.MovieClip.prototype.updateTransform = function() PIXI.MovieClip.prototype.updateTransform = function()
{ {
PIXI.Sprite.prototype.updateTransform.call(this); PIXI.Sprite.prototype.updateTransform.call(this);

View file

@ -8,55 +8,64 @@ PIXI.blendModes.SCREEN = 1;
/** /**
@class Sprite * The SPrite object is the base for all textured objects that are rendered to the screen
@extends DisplayObjectContainer *
@constructor * @class Sprite
@param texture {Texture} * @extends DisplayObjectContainer
@type String * @constructor
*/ * @param texture {Texture} The texture for this sprite
* @type String
*/
PIXI.Sprite = function(texture) PIXI.Sprite = function(texture)
{ {
PIXI.DisplayObjectContainer.call( this ); PIXI.DisplayObjectContainer.call( this );
/** /**
* The anchor sets the origin point of the texture. * The anchor sets the origin point of the texture.
* The default is 0,0 this means the textures origin is the top left * The default is 0,0 this means the textures origin is the top left
* Setting than anchor to 0.5,0.5 means the textures origin is centered * Setting than anchor to 0.5,0.5 means the textures origin is centered
* Setting the anchor to 1,1 would mean the textures origin points will be the bottom right * Setting the anchor to 1,1 would mean the textures origin points will be the bottom right
*
* @property anchor * @property anchor
* @type Point * @type Point
*/ */
this.anchor = new PIXI.Point(); this.anchor = new PIXI.Point();
/** /**
* The texture that the sprite is using * The texture that the sprite is using
*
* @property texture * @property texture
* @type Texture * @type Texture
*/ */
this.texture = texture; this.texture = texture;
/** /**
* The blend mode of sprite. * The blend mode of sprite.
* currently supports PIXI.blendModes.NORMAL and PIXI.blendModes.SCREEN * currently supports PIXI.blendModes.NORMAL and PIXI.blendModes.SCREEN
*
* @property blendMode * @property blendMode
* @type uint * @type Number
*/ */
this.blendMode = PIXI.blendModes.NORMAL; this.blendMode = PIXI.blendModes.NORMAL;
/** /**
* The width of the sprite (this is initially set by the texture) * The width of the sprite (this is initially set by the texture)
* @property width *
* @type #Number * @property _width
* @type Number
* @private
*/ */
this._width = 0; this._width = 0;
/** /**
* The height of the sprite (this is initially set by the texture) * The height of the sprite (this is initially set by the texture)
* @property height *
* @type #Number * @property _height
* @type Number
* @private
*/ */
this._height = 0; this._height = 0;
if(texture.baseTexture.hasLoaded) if(texture.baseTexture.hasLoaded)
{ {
this.updateFrame = true; this.updateFrame = true;
@ -66,20 +75,20 @@ PIXI.Sprite = function(texture)
this.onTextureUpdateBind = this.onTextureUpdate.bind(this); this.onTextureUpdateBind = this.onTextureUpdate.bind(this);
this.texture.addEventListener( 'update', this.onTextureUpdateBind ); this.texture.addEventListener( 'update', this.onTextureUpdateBind );
} }
this.renderable = true; this.renderable = true;
// thi next bit is here for the docs...
} }
// constructor // constructor
PIXI.Sprite.constructor = PIXI.Sprite; PIXI.Sprite.constructor = PIXI.Sprite;
PIXI.Sprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); PIXI.Sprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
// OOH! shiney new getters and setters for width and height /**
// The width and height now modify the scale (this is what flash does, nice and tidy!) * The width of the sprite, setting this will actually modify the scale to acheive the value set
*
* @property width
* @type Number
*/
Object.defineProperty(PIXI.Sprite.prototype, 'width', { Object.defineProperty(PIXI.Sprite.prototype, 'width', {
get: function() { get: function() {
return this.scale.x * this.texture.frame.width; return this.scale.x * this.texture.frame.width;
@ -90,6 +99,12 @@ Object.defineProperty(PIXI.Sprite.prototype, 'width', {
} }
}); });
/**
* The height of the sprite, setting this will actually modify the scale to acheive the value set
*
* @property height
* @type Number
*/
Object.defineProperty(PIXI.Sprite.prototype, 'height', { Object.defineProperty(PIXI.Sprite.prototype, 'height', {
get: function() { get: function() {
return this.scale.y * this.texture.frame.height; return this.scale.y * this.texture.frame.height;
@ -99,11 +114,13 @@ Object.defineProperty(PIXI.Sprite.prototype, 'height', {
this._height = value; this._height = value;
} }
}); });
/** /**
@method setTexture * Sets the texture of the sprite
@param texture {Texture} The PIXI texture that is displayed by the sprite *
*/ * @method setTexture
* @param texture {Texture} The PIXI texture that is displayed by the sprite
*/
PIXI.Sprite.prototype.setTexture = function(texture) PIXI.Sprite.prototype.setTexture = function(texture)
{ {
// stop current texture; // stop current texture;
@ -117,6 +134,10 @@ PIXI.Sprite.prototype.setTexture = function(texture)
} }
/** /**
* When the texture is updated, this event will fire to update the scale and frame
*
* @method onTextureUpdate
* @param event
* @private * @private
*/ */
PIXI.Sprite.prototype.onTextureUpdate = function(event) PIXI.Sprite.prototype.onTextureUpdate = function(event)
@ -136,6 +157,7 @@ PIXI.Sprite.prototype.onTextureUpdate = function(event)
* *
* Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId * Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId
* The frame ids are created when a Texture packer file has been loaded * The frame ids are created when a Texture packer file has been loaded
*
* @method fromFrame * @method fromFrame
* @static * @static
* @param frameId {String} The frame Id of the texture in the cache * @param frameId {String} The frame Id of the texture in the cache
@ -152,9 +174,10 @@ PIXI.Sprite.fromFrame = function(frameId)
* *
* Helper function that creates a sprite that will contain a texture based on an image url * Helper function that creates a sprite that will contain a texture based on an image url
* If the image is not in the texture cache it will be loaded * If the image is not in the texture cache it will be loaded
*
* @method fromImage * @method fromImage
* @static * @static
* @param The image url of the texture * @param imageId {String} The image url of the texture
* @return {Sprite} A new Sprite using a texture from the texture cache matching the image id * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id
*/ */
PIXI.Sprite.fromImage = function(imageId) PIXI.Sprite.fromImage = function(imageId)

View file

@ -3,46 +3,77 @@
*/ */
/** /**
A Stage represents the root of the display tree. Everything connected to the stage is rendered * A Stage represents the root of the display tree. Everything connected to the stage is rendered
@class Stage *
@extends DisplayObjectContainer * @class Stage
@constructor * @extends DisplayObjectContainer
@param backgroundColor {Number} the background color of the stage * @constructor
@param interactive {Boolean} enable / disable interaction (default is false) * @param backgroundColor {Number} the background color of the stage, easiest way to pass this in is in hex format
*/ * like: 0xFFFFFF for white
* @param interactive {Boolean} enable / disable interaction (default is false)
*/
PIXI.Stage = function(backgroundColor, interactive) PIXI.Stage = function(backgroundColor, interactive)
{ {
PIXI.DisplayObjectContainer.call( this ); PIXI.DisplayObjectContainer.call( this );
this.worldTransform = PIXI.mat3.create() /**
* [read-only] Current transform of the object based on world (parent) factors
*
* @property worldTransform
* @type Mat3
* @readOnly
* @private
*/
this.worldTransform = PIXI.mat3.create();
/**
* Whether or not the stage is interactive
*
* @property interactive
* @type Boolean
*/
this.interactive = interactive;
/**
* The interaction manage for this stage, manages all interactive activity on the stage
*
* @property interactive
* @type InteractionManager
*/
this.interactionManager = new PIXI.InteractionManager(this);
/**
* Whether the stage is dirty and needs to have interactions updated
*
* @property dirty
* @type Boolean
* @private
*/
this.dirty = true;
this.__childrenAdded = []; this.__childrenAdded = [];
this.__childrenRemoved = []; this.__childrenRemoved = [];
//this.childIndex = 0; //the stage is it's own stage
this.stage = this; this.stage = this;
this.interactive = interactive;
//optimize hit detection a bit
this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000);
// interaction!
// this.interactive = !!interactive;
this.interactionManager = new PIXI.InteractionManager(this);
this.setBackgroundColor(backgroundColor); this.setBackgroundColor(backgroundColor);
this.worldVisible = true; this.worldVisible = true;
this.stage.dirty = true;
} }
// constructor // constructor
PIXI.Stage.constructor = PIXI.Stage; PIXI.Stage.constructor = PIXI.Stage;
PIXI.Stage.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); PIXI.Stage.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
/** /*
@method updateTransform * Updates the object transform for rendering
@internal *
*/ * @method updateTransform
* @private
*/
PIXI.Stage.prototype.updateTransform = function() PIXI.Stage.prototype.updateTransform = function()
{ {
this.worldAlpha = 1; this.worldAlpha = 1;
@ -63,8 +94,11 @@ PIXI.Stage.prototype.updateTransform = function()
} }
/** /**
* Sets the background color for the stage
*
* @method setBackgroundColor * @method setBackgroundColor
* @param backgroundColor {Number} * @param backgroundColor {Number} the color of the background, easiest way to pass this in is in hex format
* like: 0xFFFFFF for white
*/ */
PIXI.Stage.prototype.setBackgroundColor = function(backgroundColor) PIXI.Stage.prototype.setBackgroundColor = function(backgroundColor)
{ {
@ -77,6 +111,7 @@ PIXI.Stage.prototype.setBackgroundColor = function(backgroundColor)
/** /**
* This will return the point containing global coords of the mouse. * This will return the point containing global coords of the mouse.
*
* @method getMousePosition * @method getMousePosition
* @return {Point} The point containing the coords of the global InteractionData position. * @return {Point} The point containing the coords of the global InteractionData position.
*/ */

View file

@ -4,7 +4,8 @@
/** /**
* Need to finalize this a bit more but works! Its in but will be working on this feature properly next..:) * This object is one that will allow you to specify custom rendering functions based on render type
*
* @class CustomRenderable * @class CustomRenderable
* @extends DisplayObject * @extends DisplayObject
* @constructor * @constructor
@ -19,18 +20,34 @@ PIXI.CustomRenderable = function()
PIXI.CustomRenderable.constructor = PIXI.CustomRenderable; PIXI.CustomRenderable.constructor = PIXI.CustomRenderable;
PIXI.CustomRenderable.prototype = Object.create( PIXI.DisplayObject.prototype ); PIXI.CustomRenderable.prototype = Object.create( PIXI.DisplayObject.prototype );
/**
* If this object is being rendered by a CanvasRenderer it will call this callback
*
* @method renderCanvas
* @param renderer {CanvasRenderer} The renderer instance
*/
PIXI.CustomRenderable.prototype.renderCanvas = function(renderer) PIXI.CustomRenderable.prototype.renderCanvas = function(renderer)
{ {
// override! // override!
} }
/**
* If this object is being rendered by a WebGLRenderer it will call this callback to initialize
*
* @method initWebGL
* @param renderer {WebGLRenderer} The renderer instance
*/
PIXI.CustomRenderable.prototype.initWebGL = function(renderer) PIXI.CustomRenderable.prototype.initWebGL = function(renderer)
{ {
// override! // override!
} }
/**
* If this object is being rendered by a WebGLRenderer it will call this callback
*
* @method renderWebGL
* @param renderer {WebGLRenderer} The renderer instance
*/
PIXI.CustomRenderable.prototype.renderWebGL = function(renderGroup, projectionMatrix) PIXI.CustomRenderable.prototype.renderWebGL = function(renderGroup, projectionMatrix)
{ {
// not sure if both needed? but ya have for now! // not sure if both needed? but ya have for now!

View file

@ -10,12 +10,12 @@
/** /**
* A class that enables the you to import and run your spine animations in pixi. * A class that enables the you to import and run your spine animations in pixi.
* Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class
* Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load
* See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source
*
* @class Spine * @class Spine
* @constructor
* @extends DisplayObjectContainer * @extends DisplayObjectContainer
* @param {String} url the url of the spine anim file to be used * @constructor
* @param url {String} The url of the spine anim file to be used
*/ */
PIXI.Spine = function(url) PIXI.Spine = function(url)
{ {
@ -60,6 +60,13 @@ PIXI.Spine = function(url)
PIXI.Spine.constructor = PIXI.Spine; PIXI.Spine.constructor = PIXI.Spine;
PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
/*
* Updates the object transform for rendering
*
* @method updateTransform
* @private
*/
PIXI.Spine.prototype.updateTransform = function() PIXI.Spine.prototype.updateTransform = function()
{ {
// TODO should make this time based really.. // TODO should make this time based really..

View file

@ -4,6 +4,7 @@
/** /**
* A tiling sprite is a fast way of rendering a tiling image * A tiling sprite is a fast way of rendering a tiling image
*
* @class TilingSprite * @class TilingSprite
* @extends DisplayObjectContainer * @extends DisplayObjectContainer
* @constructor * @constructor
@ -14,23 +15,48 @@
PIXI.TilingSprite = function(texture, width, height) PIXI.TilingSprite = function(texture, width, height)
{ {
PIXI.DisplayObjectContainer.call( this ); PIXI.DisplayObjectContainer.call( this );
/**
* The texture that the sprite is using
*
* @property texture
* @type Texture
*/
this.texture = texture; this.texture = texture;
/**
* The width of the tiling sprite
*
* @property width
* @type Number
*/
this.width = width; this.width = width;
/**
* The height of the tiling sprite
*
* @property height
* @type Number
*/
this.height = height; this.height = height;
this.renderable = true;
/** /**
* The scaling of the image that is being tiled * The scaling of the image that is being tiled
*
* @property tileScale * @property tileScale
* @type Point * @type Point
*/ */
this.tileScale = new PIXI.Point(1,1); this.tileScale = new PIXI.Point(1,1);
/** /**
* The offset position of the image that is being tiled * The offset position of the image that is being tiled
*
* @property tilePosition * @property tilePosition
* @type Point * @type Point
*/ */
this.tilePosition = new PIXI.Point(0,0); this.tilePosition = new PIXI.Point(0,0);
this.renderable = true;
this.blendMode = PIXI.blendModes.NORMAL this.blendMode = PIXI.blendModes.NORMAL
} }
@ -39,6 +65,12 @@ PIXI.TilingSprite = function(texture, width, height)
PIXI.TilingSprite.constructor = PIXI.TilingSprite; PIXI.TilingSprite.constructor = PIXI.TilingSprite;
PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
/**
* Sets the texture of the tiling sprite
*
* @method setTexture
* @param texture {Texture} The PIXI texture that is displayed by the sprite
*/
PIXI.TilingSprite.prototype.setTexture = function(texture) PIXI.TilingSprite.prototype.setTexture = function(texture)
{ {
//TODO SET THE TEXTURES //TODO SET THE TEXTURES
@ -49,6 +81,13 @@ PIXI.TilingSprite.prototype.setTexture = function(texture)
this.updateFrame = true; this.updateFrame = true;
} }
/**
* When the texture is updated, this event will fire to update the frame
*
* @method onTextureUpdate
* @param event
* @private
*/
PIXI.TilingSprite.prototype.onTextureUpdate = function(event) PIXI.TilingSprite.prototype.onTextureUpdate = function(event)
{ {
this.updateFrame = true; this.updateFrame = true;

View file

@ -3,27 +3,47 @@
*/ */
/** /**
* A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the
* assets have been loaded they are added to the PIXI Texture cache and can be accessed
* easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()
* When all items have been loaded this class will dispatch a "onLoaded" event * When all items have been loaded this class will dispatch a "onLoaded" event
* As each individual item is loaded this class will dispatch a "onProgress" event * As each individual item is loaded this class will dispatch a "onProgress" event
*
* @class AssetLoader * @class AssetLoader
* @constructor * @constructor
* @extends EventTarget * @uses EventTarget
* @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". * @param {Array<String>} assetURLs an array of image/sprite sheet urls that you would like loaded
* supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported
* sprite sheet data formats only include "JSON" at this time. Supported bitmap font
* data formats include "xml" and "fnt".
* @param crossorigin {Boolean} Whether requests should be treated as crossorigin
*/ */
PIXI.AssetLoader = function(assetURLs) PIXI.AssetLoader = function(assetURLs, crossorigin)
{ {
PIXI.EventTarget.call(this); PIXI.EventTarget.call(this);
/** /**
* The array of asset URLs that are going to be loaded * The array of asset URLs that are going to be loaded
*
* @property assetURLs * @property assetURLs
* @type Array * @type Array<String>
*/ */
this.assetURLs = assetURLs; this.assetURLs = assetURLs;
this.crossorigin = false; /**
* Whether the requests should be treated as cross origin
*
* @property crossorigin
* @type Boolean
*/
this.crossorigin = crossorigin;
/**
* Maps file extension to loader types
*
* @property loadersByType
* @type Object
*/
this.loadersByType = { this.loadersByType = {
"jpg": PIXI.ImageLoader, "jpg": PIXI.ImageLoader,
"jpeg": PIXI.ImageLoader, "jpeg": PIXI.ImageLoader,
@ -39,20 +59,22 @@ PIXI.AssetLoader = function(assetURLs)
}; };
/** /**
Fired when an item has loaded * Fired when an item has loaded
@event onProgress * @event onProgress
**/ */
/** /**
Fired when all the assets have loaded * Fired when all the assets have loaded
@event onComplete * @event onComplete
**/ */
// constructor // constructor
PIXI.AssetLoader.constructor = PIXI.AssetLoader; PIXI.AssetLoader.constructor = PIXI.AssetLoader;
/** /**
* This will begin loading the assets sequentially * Starts loading the assets sequentially
*
* @method load
*/ */
PIXI.AssetLoader.prototype.load = function() PIXI.AssetLoader.prototype.load = function()
{ {
@ -81,6 +103,8 @@ PIXI.AssetLoader.prototype.load = function()
/** /**
* Invoked after each file is loaded * Invoked after each file is loaded
*
* @method onAssetLoaded
* @private * @private
*/ */
PIXI.AssetLoader.prototype.onAssetLoaded = function() PIXI.AssetLoader.prototype.onAssetLoaded = function()

View file

@ -7,13 +7,13 @@
* To generate the data you can use http://www.angelcode.com/products/bmfont/ * To generate the data you can use http://www.angelcode.com/products/bmfont/
* This loader will also load the image file as the data. * This loader will also load the image file as the data.
* When loaded this class will dispatch a "loaded" event * When loaded this class will dispatch a "loaded" event
*
* @class BitmapFontLoader * @class BitmapFontLoader
* @extends EventTarget * @uses EventTarget
* @constructor * @constructor
* @param {String} url the url of the sprite sheet JSON file * @param url {String} The url of the sprite sheet JSON file
* @param {Boolean} crossorigin * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
*/ */
PIXI.BitmapFontLoader = function(url, crossorigin) PIXI.BitmapFontLoader = function(url, crossorigin)
{ {
/* /*
@ -22,17 +22,48 @@ PIXI.BitmapFontLoader = function(url, crossorigin)
* make sure to set the format as "JSON" * make sure to set the format as "JSON"
*/ */
PIXI.EventTarget.call(this); PIXI.EventTarget.call(this);
/**
* The url of the bitmap font data
*
* @property url
* @type String
*/
this.url = url; this.url = url;
this.baseUrl = url.replace(/[^\/]*$/, "");
this.texture = null; /**
* Whether the requests should be treated as cross origin
*
* @property crossorigin
* @type Boolean
*/
this.crossorigin = crossorigin; this.crossorigin = crossorigin;
/**
* [read-only] The base url of the bitmap font data
*
* @property baseUrl
* @type String
* @readOnly
*/
this.baseUrl = url.replace(/[^\/]*$/, "");
/**
* [read-only] The texture of the bitmap font
*
* @property baseUrl
* @type String
*/
this.texture = null;
}; };
// constructor // constructor
PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
/** /**
* This will begin loading the JSON file * Loads the XML font data
*
* @method load
*/ */
PIXI.BitmapFontLoader.prototype.load = function() PIXI.BitmapFontLoader.prototype.load = function()
{ {
@ -49,7 +80,9 @@ PIXI.BitmapFontLoader.prototype.load = function()
}; };
/** /**
* Invoked when XML file is loaded * Invoked when XML file is loaded, parses the data
*
* @method onXMLLoaded
* @private * @private
*/ */
PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
@ -120,6 +153,8 @@ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
/** /**
* Invoked when all files are loaded (xml/fnt and texture) * Invoked when all files are loaded (xml/fnt and texture)
*
* @method onLoaded
* @private * @private
*/ */
PIXI.BitmapFontLoader.prototype.onLoaded = function() PIXI.BitmapFontLoader.prototype.onLoaded = function()

View file

@ -6,15 +6,23 @@
* The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
* Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
* When loaded this class will dispatch a 'loaded' event * When loaded this class will dispatch a 'loaded' event
*
* @class ImageLoader * @class ImageLoader
* @extends EventTarget * @uses EventTarget
* @constructor * @constructor
* @param {String} url The url of the image * @param url {String} The url of the image
* @param {Boolean} crossorigin * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
*/ */
PIXI.ImageLoader = function(url, crossorigin) PIXI.ImageLoader = function(url, crossorigin)
{ {
PIXI.EventTarget.call(this); PIXI.EventTarget.call(this);
/**
* The texture being loaded
*
* @property texture
* @type Texture
*/
this.texture = PIXI.Texture.fromImage(url, crossorigin); this.texture = PIXI.Texture.fromImage(url, crossorigin);
}; };
@ -23,6 +31,8 @@ PIXI.ImageLoader.constructor = PIXI.ImageLoader;
/** /**
* Loads image or takes it from cache * Loads image or takes it from cache
*
* @method load
*/ */
PIXI.ImageLoader.prototype.load = function() PIXI.ImageLoader.prototype.load = function()
{ {
@ -42,6 +52,8 @@ PIXI.ImageLoader.prototype.load = function()
/** /**
* Invoked when image file is loaded or it is already cached and ready to use * Invoked when image file is loaded or it is already cached and ready to use
*
* @method onLoaded
* @private * @private
*/ */
PIXI.ImageLoader.prototype.onLoaded = function() PIXI.ImageLoader.prototype.onLoaded = function()

View file

@ -6,18 +6,48 @@
* The json file loader is used to load in JSON data and parsing it * The json file loader is used to load in JSON data and parsing it
* When loaded this class will dispatch a "loaded" event * When loaded this class will dispatch a "loaded" event
* If load failed this class will dispatch a "error" event * If load failed this class will dispatch a "error" event
*
* @class JsonLoader * @class JsonLoader
* @extends EventTarget * @uses EventTarget
* @constructor * @constructor
* @param {String} url the url of the JSON file * @param url {String} The url of the JSON file
* @param {Boolean} crossorigin * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
*/ */
PIXI.JsonLoader = function (url, crossorigin) { PIXI.JsonLoader = function (url, crossorigin) {
PIXI.EventTarget.call(this); PIXI.EventTarget.call(this);
/**
* The url of the bitmap font data
*
* @property url
* @type String
*/
this.url = url; this.url = url;
this.baseUrl = url.replace(/[^\/]*$/, "");
/**
* Whether the requests should be treated as cross origin
*
* @property crossorigin
* @type Boolean
*/
this.crossorigin = crossorigin; this.crossorigin = crossorigin;
/**
* [read-only] The base url of the bitmap font data
*
* @property baseUrl
* @type String
* @readOnly
*/
this.baseUrl = url.replace(/[^\/]*$/, "");
/**
* [read-only] Whether the data has loaded yet
*
* @property loaded
* @type Boolean
* @readOnly
*/
this.loaded = false; this.loaded = false;
}; };
@ -26,7 +56,9 @@ PIXI.JsonLoader = function (url, crossorigin) {
PIXI.JsonLoader.constructor = PIXI.JsonLoader; PIXI.JsonLoader.constructor = PIXI.JsonLoader;
/** /**
* This will begin loading the JSON file * Loads the JSON data
*
* @method load
*/ */
PIXI.JsonLoader.prototype.load = function () { PIXI.JsonLoader.prototype.load = function () {
this.ajaxRequest = new AjaxRequest(); this.ajaxRequest = new AjaxRequest();
@ -42,6 +74,8 @@ PIXI.JsonLoader.prototype.load = function () {
/** /**
* Invoke when JSON file is loaded * Invoke when JSON file is loaded
*
* @method onJSONLoaded
* @private * @private
*/ */
PIXI.JsonLoader.prototype.onJSONLoaded = function () { PIXI.JsonLoader.prototype.onJSONLoaded = function () {
@ -95,11 +129,9 @@ PIXI.JsonLoader.prototype.onJSONLoaded = function () {
{ {
this.onLoaded(); this.onLoaded();
} }
}
else
{
} else {
this.onError(); this.onError();
} }
} }
@ -107,6 +139,8 @@ PIXI.JsonLoader.prototype.onJSONLoaded = function () {
/** /**
* Invoke when json file loaded * Invoke when json file loaded
*
* @method onLoaded
* @private * @private
*/ */
PIXI.JsonLoader.prototype.onLoaded = function () { PIXI.JsonLoader.prototype.onLoaded = function () {
@ -119,6 +153,8 @@ PIXI.JsonLoader.prototype.onLoaded = function () {
/** /**
* Invoke when error occured * Invoke when error occured
*
* @method onError
* @private * @private
*/ */
PIXI.JsonLoader.prototype.onError = function () { PIXI.JsonLoader.prototype.onError = function () {

View file

@ -14,32 +14,50 @@
* See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source
* You will need to generate a sprite sheet to accompany the spine data * You will need to generate a sprite sheet to accompany the spine data
* When loaded this class will dispatch a "loaded" event * When loaded this class will dispatch a "loaded" event
*
* @class Spine * @class Spine
* @uses EventTarget
* @constructor * @constructor
* @extends EventTarget * @param url {String} The url of the JSON file
* @param {String} url the url of the sprite sheet JSON file * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
* @param {Boolean} crossorigin
*/ */
PIXI.SpineLoader = function(url, crossorigin) PIXI.SpineLoader = function(url, crossorigin)
{ {
PIXI.EventTarget.call(this); PIXI.EventTarget.call(this);
/**
* The url of the bitmap font data
*
* @property url
* @type String
*/
this.url = url; this.url = url;
/**
* Whether the requests should be treated as cross origin
*
* @property crossorigin
* @type Boolean
*/
this.crossorigin = crossorigin; this.crossorigin = crossorigin;
/**
* [read-only] Whether the data has loaded yet
*
* @property loaded
* @type Boolean
* @readOnly
*/
this.loaded = false; this.loaded = false;
} }
PIXI.SpineLoader.constructor = PIXI.SpineLoader; PIXI.SpineLoader.constructor = PIXI.SpineLoader;
PIXI.SpineLoader.prototype.load = function() /**
{ * Loads the JSON data
new PIXI.JsonLoader(this.url, this.crossorigin); *
jsonLoader.addEventListener("loaded", function (event) { * @method load
scope.json = event.content.json; */
scope.onJSONLoaded();
});
jsonLoader.load();
};
PIXI.SpineLoader.prototype.load = function () { PIXI.SpineLoader.prototype.load = function () {
var scope = this; var scope = this;
@ -53,12 +71,12 @@ PIXI.SpineLoader.prototype.load = function () {
/** /**
* Invoke when JSON file is loaded * Invoke when JSON file is loaded
*
* @method onJSONLoaded
* @private * @private
*/ */
PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { PIXI.SpineLoader.prototype.onJSONLoaded = function (event) {
var spineJsonParser = new spine.SkeletonJson(); var spineJsonParser = new spine.SkeletonJson();
var skeletonData = spineJsonParser.readSkeletonData(this.json); var skeletonData = spineJsonParser.readSkeletonData(this.json);
PIXI.AnimCache[this.url] = skeletonData; PIXI.AnimCache[this.url] = skeletonData;
@ -66,10 +84,13 @@ PIXI.SpineLoader.prototype.onJSONLoaded = function (event) {
this.onLoaded(); this.onLoaded();
}; };
/**
* Invoke when JSON file is loaded
PIXI.SpineLoader.prototype.onLoaded = function() *
{ * @method onLoaded
* @private
*/
PIXI.SpineLoader.prototype.onLoaded = function () {
this.loaded = true; this.loaded = true;
this.dispatchEvent({type: "loaded", content: this}); this.dispatchEvent({type: "loaded", content: this});
}; };

View file

@ -10,11 +10,12 @@
* Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
* This loader will also load the image file that the Spritesheet points to as well as the data. * This loader will also load the image file that the Spritesheet points to as well as the data.
* When loaded this class will dispatch a "loaded" event * When loaded this class will dispatch a "loaded" event
*
* @class SpriteSheetLoader * @class SpriteSheetLoader
* @extends EventTarget * @uses EventTarget
* @constructor * @constructor
* @param {String} url the url of the sprite sheet JSON file * @param url {String} The url of the sprite sheet JSON file
* @param {Boolean} crossorigin * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
*/ */
PIXI.SpriteSheetLoader = function (url, crossorigin) { PIXI.SpriteSheetLoader = function (url, crossorigin) {
@ -24,11 +25,47 @@ PIXI.SpriteSheetLoader = function (url, crossorigin) {
* make sure to set the format as "JSON" * make sure to set the format as "JSON"
*/ */
PIXI.EventTarget.call(this); PIXI.EventTarget.call(this);
/**
* The url of the bitmap font data
*
* @property url
* @type String
*/
this.url = url; this.url = url;
this.baseUrl = url.replace(/[^\/]*$/, "");
this.texture = null; /**
this.frames = {}; * Whether the requests should be treated as cross origin
*
* @property crossorigin
* @type Boolean
*/
this.crossorigin = crossorigin; this.crossorigin = crossorigin;
/**
* [read-only] The base url of the bitmap font data
*
* @property baseUrl
* @type String
* @readOnly
*/
this.baseUrl = url.replace(/[^\/]*$/, "");
/**
* The texture being loaded
*
* @property texture
* @type Texture
*/
this.texture = null;
/**
* The frames of the sprite sheet
*
* @property frames
* @type Object
*/
this.frames = {};
}; };
// constructor // constructor
@ -36,6 +73,8 @@ PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader;
/** /**
* This will begin loading the JSON file * This will begin loading the JSON file
*
* @method load
*/ */
PIXI.SpriteSheetLoader.prototype.load = function () { PIXI.SpriteSheetLoader.prototype.load = function () {
var scope = this; var scope = this;
@ -49,6 +88,8 @@ PIXI.SpriteSheetLoader.prototype.load = function () {
/** /**
* Invoke when JSON file is loaded * Invoke when JSON file is loaded
*
* @method onJSONLoaded
* @private * @private
*/ */
PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function () { PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function () {
@ -84,6 +125,8 @@ PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function () {
}; };
/** /**
* Invoke when all files are loaded (json and texture) * Invoke when all files are loaded (json and texture)
*
* @method onLoaded
* @private * @private
*/ */
PIXI.SpriteSheetLoader.prototype.onLoaded = function () { PIXI.SpriteSheetLoader.prototype.onLoaded = function () {

View file

@ -7,6 +7,7 @@
* The Graphics class contains a set of methods that you can use to create primitive shapes and lines. * The Graphics class contains a set of methods that you can use to create primitive shapes and lines.
* It is important to know that with the webGL renderer only simple polys can be filled at this stage * It is important to know that with the webGL renderer only simple polys can be filled at this stage
* Complex polys will not be filled. Heres an example of a complex poly: http://www.goodboydigital.com/wp-content/uploads/2013/06/complexPolygon.png * Complex polys will not be filled. Heres an example of a complex poly: http://www.goodboydigital.com/wp-content/uploads/2013/06/complexPolygon.png
*
* @class Graphics * @class Graphics
* @extends DisplayObjectContainer * @extends DisplayObjectContainer
* @constructor * @constructor
@ -16,14 +17,47 @@ PIXI.Graphics = function()
PIXI.DisplayObjectContainer.call( this ); PIXI.DisplayObjectContainer.call( this );
this.renderable = true; this.renderable = true;
/**
* The alpha of the fill of this graphics object
*
* @property fillAlpha
* @type Number
*/
this.fillAlpha = 1; this.fillAlpha = 1;
/**
* The width of any lines drawn
*
* @property lineWidth
* @type Number
*/
this.lineWidth = 0; this.lineWidth = 0;
/**
* The color of any lines drawn
*
* @property lineColor
* @type String
*/
this.lineColor = "black"; this.lineColor = "black";
/**
* Graphics data
*
* @property graphicsData
* @type Array
* @private
*/
this.graphicsData = []; this.graphicsData = [];
/**
* Current path
*
* @property currentPath
* @type Object
* @private
*/
this.currentPath = {points:[]}; this.currentPath = {points:[]};
} }
@ -33,10 +67,11 @@ PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype )
/** /**
* Specifies a line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method. * Specifies a line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.
*
* @method lineStyle * @method lineStyle
* @param lineWidth {Number} * @param lineWidth {Number} width of the line to draw, will update the object's stored style
* @param color {Number} * @param color {Number} color of the line to draw, will update the object's stored style
* @param alpha {Number} * @param alpha {Number} alpha of the line to draw, will update the object's stored style
*/ */
PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha) PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
{ {
@ -54,9 +89,10 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
/** /**
* Moves the current drawing position to (x, y). * Moves the current drawing position to (x, y).
*
* @method moveTo * @method moveTo
* @param x {Number} * @param x {Number} the X coord to move to
* @param y {Number} * @param y {Number} the Y coord to move to
*/ */
PIXI.Graphics.prototype.moveTo = function(x, y) PIXI.Graphics.prototype.moveTo = function(x, y)
{ {
@ -71,10 +107,12 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
} }
/** /**
* Draws a line using the current line style from the current drawing position to (x, y); the current drawing position is then set to (x, y). * Draws a line using the current line style from the current drawing position to (x, y);
* the current drawing position is then set to (x, y).
*
* @method lineTo * @method lineTo
* @param x {Number} * @param x {Number} the X coord to draw to
* @param y {Number} * @param y {Number} the Y coord to draw to
*/ */
PIXI.Graphics.prototype.lineTo = function(x, y) PIXI.Graphics.prototype.lineTo = function(x, y)
{ {
@ -83,7 +121,9 @@ PIXI.Graphics.prototype.lineTo = function(x, y)
} }
/** /**
* Specifies a simple one-color fill that subsequent calls to other Graphics methods (such as lineTo() or drawCircle()) use when drawing. * Specifies a simple one-color fill that subsequent calls to other Graphics methods
* (such as lineTo() or drawCircle()) use when drawing.
*
* @method beginFill * @method beginFill
* @param color {uint} the color of the fill * @param color {uint} the color of the fill
* @param alpha {Number} the alpha * @param alpha {Number} the alpha
@ -97,6 +137,7 @@ PIXI.Graphics.prototype.beginFill = function(color, alpha)
/** /**
* Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
*
* @method endFill * @method endFill
*/ */
PIXI.Graphics.prototype.endFill = function() PIXI.Graphics.prototype.endFill = function()
@ -108,10 +149,11 @@ PIXI.Graphics.prototype.endFill = function()
/** /**
* @method drawRect * @method drawRect
* @param x {Number} *
* @param y {Number} * @param x {Number} The X coord of the top-left of the rectangle
* @param width {Number} * @param y {Number} The Y coord of the top-left of the rectangle
* @param height {Number} * @param width {Number} The width of the rectangle
* @param height {Number} The height of the rectangle
*/ */
PIXI.Graphics.prototype.drawRect = function( x, y, width, height ) PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
{ {
@ -127,10 +169,11 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
/** /**
* Draws a circle. * Draws a circle.
*
* @method drawCircle * @method drawCircle
* @param x {Number} * @param x {Number} The X coord of the center of the circle
* @param y {Number} * @param y {Number} The Y coord of the center of the circle
* @param radius {Number} * @param radius {Number} The radius of the circle
*/ */
PIXI.Graphics.prototype.drawCircle = function( x, y, radius) PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
{ {
@ -146,6 +189,7 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
/** /**
* Draws an elipse. * Draws an elipse.
*
* @method drawElipse * @method drawElipse
* @param x {Number} * @param x {Number}
* @param y {Number} * @param y {Number}
@ -166,6 +210,7 @@ PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
/** /**
* Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
*
* @method clear * @method clear
*/ */
PIXI.Graphics.prototype.clear = function() PIXI.Graphics.prototype.clear = function()

View file

@ -5,7 +5,8 @@
/** /**
* A set of functions used by the canvas renderer to draw the primitive graphics data * A set of functions used by the canvas renderer to draw the primitive graphics data
* @class CanvasGraphics *
* @class CanvasGraphics
*/ */
PIXI.CanvasGraphics = function() PIXI.CanvasGraphics = function()
{ {
@ -14,8 +15,10 @@ PIXI.CanvasGraphics = function()
/* /*
* @private * Renders the graphics object
*
* @static * @static
* @private
* @method renderGraphics * @method renderGraphics
* @param graphics {Graphics} * @param graphics {Graphics}
* @param context {Context2D} * @param context {Context2D}
@ -149,8 +152,10 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
} }
/* /*
* @private * Renders a graphics mask
*
* @static * @static
* @private
* @method renderGraphicsMask * @method renderGraphicsMask
* @param graphics {Graphics} * @param graphics {Graphics}
* @param context {Context2D} * @param context {Context2D}

View file

@ -6,58 +6,58 @@
/** /**
* the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL.
* Dont forget to add the view to your DOM or you will not see anything :) * Dont forget to add the view to your DOM or you will not see anything :)
*
* @class CanvasRenderer * @class CanvasRenderer
* @constructor * @constructor
* @param width {Number} the width of the canvas view * @param width=0 {Number} the width of the canvas view
* @default 0 * @param height=0 {Number} the height of the canvas view
* @param height {Number} the height of the canvas view
* @default 0
* @param view {Canvas} the canvas to use as a view, optional * @param view {Canvas} the canvas to use as a view, optional
* @param transparent {Boolean} the transparency of the render view, default false * @param transparent=false {Boolean} the transparency of the render view, default false
* @default false
*
*/ */
PIXI.CanvasRenderer = function(width, height, view, transparent) PIXI.CanvasRenderer = function(width, height, view, transparent)
{ {
this.transparent = transparent; this.transparent = transparent;
/** /**
* The width of the canvas view * The width of the canvas view
*
* @property width * @property width
* @type Number * @type Number
* @default 800 * @default 800
*/ */
this.width = width || 800; this.width = width || 800;
/** /**
* The height of the canvas view * The height of the canvas view
*
* @property height * @property height
* @type Number * @type Number
* @default 600 * @default 600
*/ */
this.height = height || 600; this.height = height || 600;
this.refresh = true;
/** /**
* The canvas element that the everything is drawn to * The canvas element that the everything is drawn to
*
* @property view * @property view
* @type Canvas * @type Canvas
*/ */
this.view = view || document.createElement( 'canvas' ); this.view = view || document.createElement( 'canvas' );
// hack to enable some hardware acceleration!
//this.view.style["transform"] = "translatez(0)";
this.view.width = this.width;
this.view.height = this.height;
this.count = 0;
/** /**
* The canvas context that the everything is drawn to * The canvas context that the everything is drawn to
* @property context * @property context
* @type Canvas 2d Context * @type Canvas 2d Context
*/ */
this.context = this.view.getContext("2d"); this.context = this.view.getContext("2d");
this.refresh = true;
// hack to enable some hardware acceleration!
//this.view.style["transform"] = "translatez(0)";
this.view.width = this.width;
this.view.height = this.height;
this.count = 0;
} }
// constructor // constructor
@ -65,6 +65,7 @@ PIXI.CanvasRenderer.constructor = PIXI.CanvasRenderer;
/** /**
* Renders the stage to its canvas view * Renders the stage to its canvas view
*
* @method render * @method render
* @param stage {Stage} the Stage element to be rendered * @param stage {Stage} the Stage element to be rendered
*/ */
@ -111,8 +112,10 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
/** /**
* resizes the canvas view to the specified width and height * resizes the canvas view to the specified width and height
* @param the new width of the canvas view *
* @param the new height of the canvas view * @method resize
* @param width {Number} the new width of the canvas view
* @param height {Number} the new height of the canvas view
*/ */
PIXI.CanvasRenderer.prototype.resize = function(width, height) PIXI.CanvasRenderer.prototype.resize = function(width, height)
{ {
@ -124,9 +127,12 @@ PIXI.CanvasRenderer.prototype.resize = function(width, height)
} }
/** /**
* Renders a display object
*
* @method renderDisplayObject
* @param displayObject {DisplayObject} The displayObject to render
* @private * @private
*/ */
PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject) PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
{ {
// no loger recurrsive! // no loger recurrsive!
@ -235,8 +241,11 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
} }
/** /**
* Renders a flat strip
*
* @method renderStripFlat
* @param strip {Strip} The Strip to render
* @private * @private
*/ */
PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip) PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
@ -270,6 +279,10 @@ PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
} }
/** /**
* Renders a tiling sprite
*
* @method renderTilingSprite
* @param sprite {TilingSprite} The tilingsprite to render
* @private * @private
*/ */
PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite) PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
@ -298,9 +311,11 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
context.closePath(); context.closePath();
} }
/** /**
* Renders a strip
*
* @method renderStrip
* @param strip {Strip} The Strip to render
* @private * @private
*/ */
PIXI.CanvasRenderer.prototype.renderStrip = function(strip) PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
@ -360,11 +375,3 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
// context.globalCompositeOperation = 'source-over'; // context.globalCompositeOperation = 'source-over';
} }

View file

@ -41,10 +41,15 @@ PIXI._restoreBatchs = function(gl)
/** /**
* A WebGLBatch Enables a group of sprites to be drawn using the same settings. * A WebGLBatch Enables a group of sprites to be drawn using the same settings.
* if a group of sprites all have the same baseTexture and blendMode then they can be grouped into a batch. All the sprites in a batch can then be drawn in one go by the GPU which is hugely efficient. ALL sprites in the webGL renderer are added to a batch even if the batch only contains one sprite. Batching is handled automatically by the webGL renderer. A good tip is: the smaller the number of batchs there are, the faster the webGL renderer will run. * if a group of sprites all have the same baseTexture and blendMode then they can be grouped into a batch.
* All the sprites in a batch can then be drawn in one go by the GPU which is hugely efficient. ALL sprites
* in the webGL renderer are added to a batch even if the batch only contains one sprite. Batching is handled
* automatically by the webGL renderer. A good tip is: the smaller the number of batchs there are, the faster
* the webGL renderer will run.
*
* @class WebGLBatch * @class WebGLBatch
* @param an instance of the webGL context * @constructor
* @return {PIXI.renderers.WebGLBatch} WebGLBatch {@link PIXI.renderers.WebGLBatch} * @param gl {WebGLContext} an instance of the webGL context
*/ */
PIXI.WebGLBatch = function(gl) PIXI.WebGLBatch = function(gl)
{ {
@ -60,12 +65,13 @@ PIXI.WebGLBatch = function(gl)
this.dynamicSize = 1; this.dynamicSize = 1;
} }
// constructor // constructor
PIXI.WebGLBatch.constructor = PIXI.WebGLBatch; PIXI.WebGLBatch.constructor = PIXI.WebGLBatch;
/** /**
* Cleans the batch so that is can be returned to an object pool and reused * Cleans the batch so that is can be returned to an object pool and reused
*
* @method clean
*/ */
PIXI.WebGLBatch.prototype.clean = function() PIXI.WebGLBatch.prototype.clean = function()
{ {
@ -78,13 +84,15 @@ PIXI.WebGLBatch.prototype.clean = function()
this.texture = null; this.texture = null;
this.last = null; this.last = null;
this.size = 0; this.size = 0;
this.head; this.head;
this.tail; this.tail;
} }
/* /**
* recreates the buffers in the event of a context loss * Recreates the buffers in the event of a context loss
*
* @method restoreLostContext
* @param gl {WebGLContext}
*/ */
PIXI.WebGLBatch.prototype.restoreLostContext = function(gl) PIXI.WebGLBatch.prototype.restoreLostContext = function(gl)
{ {
@ -97,8 +105,10 @@ PIXI.WebGLBatch.prototype.restoreLostContext = function(gl)
/** /**
* inits the batch's texture and blend mode based if the supplied sprite * inits the batch's texture and blend mode based if the supplied sprite
*
* @method init * @method init
* @param sprite {Sprite} the first sprite to be added to the batch. Only sprites with the same base texture and blend mode will be allowed to be added to this batch * @param sprite {Sprite} the first sprite to be added to the batch. Only sprites with
* the same base texture and blend mode will be allowed to be added to this batch
*/ */
PIXI.WebGLBatch.prototype.init = function(sprite) PIXI.WebGLBatch.prototype.init = function(sprite)
{ {
@ -110,12 +120,13 @@ PIXI.WebGLBatch.prototype.init = function(sprite)
this.head = sprite; this.head = sprite;
this.tail = sprite; this.tail = sprite;
this.size = 1; this.size = 1;
this.growBatch(); this.growBatch();
} }
/** /**
* inserts a sprite before the specified sprite * inserts a sprite before the specified sprite
*
* @method insertBefore * @method insertBefore
* @param sprite {Sprite} the sprite to be added * @param sprite {Sprite} the sprite to be added
* @param nextSprite {nextSprite} the first sprite will be inserted before this sprite * @param nextSprite {nextSprite} the first sprite will be inserted before this sprite
@ -123,13 +134,13 @@ PIXI.WebGLBatch.prototype.init = function(sprite)
PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite) PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite)
{ {
this.size++; this.size++;
sprite.batch = this; sprite.batch = this;
this.dirty = true; this.dirty = true;
var tempPrev = nextSprite.__prev; var tempPrev = nextSprite.__prev;
nextSprite.__prev = sprite; nextSprite.__prev = sprite;
sprite.__next = nextSprite; sprite.__next = nextSprite;
if(tempPrev) if(tempPrev)
{ {
sprite.__prev = tempPrev; sprite.__prev = tempPrev;
@ -144,6 +155,7 @@ PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite)
/** /**
* inserts a sprite after the specified sprite * inserts a sprite after the specified sprite
*
* @method insertAfter * @method insertAfter
* @param sprite {Sprite} the sprite to be added * @param sprite {Sprite} the sprite to be added
* @param previousSprite {Sprite} the first sprite will be inserted after this sprite * @param previousSprite {Sprite} the first sprite will be inserted after this sprite
@ -151,15 +163,14 @@ PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite)
PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite) PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite)
{ {
this.size++; this.size++;
sprite.batch = this; sprite.batch = this;
this.dirty = true; this.dirty = true;
var tempNext = previousSprite.__next; var tempNext = previousSprite.__next;
previousSprite.__next = sprite; previousSprite.__next = sprite;
sprite.__prev = previousSprite; sprite.__prev = previousSprite;
if(tempNext) if(tempNext)
{ {
sprite.__next = tempNext; sprite.__next = tempNext;
@ -169,18 +180,18 @@ PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite)
{ {
this.tail = sprite this.tail = sprite
} }
} }
/** /**
* removes a sprite from the batch * removes a sprite from the batch
*
* @method remove * @method remove
* @param sprite {Sprite} the sprite to be removed * @param sprite {Sprite} the sprite to be removed
*/ */
PIXI.WebGLBatch.prototype.remove = function(sprite) PIXI.WebGLBatch.prototype.remove = function(sprite)
{ {
this.size--; this.size--;
if(this.size == 0) if(this.size == 0)
{ {
sprite.batch = null; sprite.batch = null;
@ -188,7 +199,7 @@ PIXI.WebGLBatch.prototype.remove = function(sprite)
sprite.__next = null; sprite.__next = null;
return; return;
} }
if(sprite.__prev) if(sprite.__prev)
{ {
sprite.__prev.__next = sprite.__next; sprite.__prev.__next = sprite.__next;
@ -198,7 +209,7 @@ PIXI.WebGLBatch.prototype.remove = function(sprite)
this.head = sprite.__next; this.head = sprite.__next;
this.head.__prev = null; this.head.__prev = null;
} }
if(sprite.__next) if(sprite.__next)
{ {
sprite.__next.__prev = sprite.__prev; sprite.__next.__prev = sprite.__prev;
@ -208,7 +219,7 @@ PIXI.WebGLBatch.prototype.remove = function(sprite)
this.tail = sprite.__prev; this.tail = sprite.__prev;
this.tail.__next = null this.tail.__next = null
} }
sprite.batch = null; sprite.batch = null;
sprite.__next = null; sprite.__next = null;
sprite.__prev = null; sprite.__prev = null;
@ -217,39 +228,32 @@ PIXI.WebGLBatch.prototype.remove = function(sprite)
/** /**
* Splits the batch into two with the specified sprite being the start of the new batch. * Splits the batch into two with the specified sprite being the start of the new batch.
*
* @method split * @method split
* @param sprite {Sprite} the sprite that indicates where the batch should be split * @param sprite {Sprite} the sprite that indicates where the batch should be split
* @return {WebGLBatch} the new batch * @return {WebGLBatch} the new batch
*/ */
PIXI.WebGLBatch.prototype.split = function(sprite) PIXI.WebGLBatch.prototype.split = function(sprite)
{ {
//console.log("Splitting batch :" + this.size)
// console.log(sprite)
// console.log("-------")
this.dirty = true; this.dirty = true;
//var val = (this.tail == this.head) var batch = new PIXI.WebGLBatch(this.gl);//PIXI._getBatch(this.gl);
//console.log(val + " SAME?");
var batch = new PIXI.WebGLBatch(this.gl)//PIXI._getBatch(this.gl);
batch.init(sprite); batch.init(sprite);
batch.texture = this.texture; batch.texture = this.texture;
batch.tail = this.tail; batch.tail = this.tail;
//console.log("id is " +batcheee.id)
this.tail = sprite.__prev; this.tail = sprite.__prev;
this.tail.__next = null; this.tail.__next = null;
sprite.__prev = null; sprite.__prev = null;
// return a splite batch! // return a splite batch!
//sprite.__prev.__next = null; //sprite.__prev.__next = null;
//sprite.__prev = null; //sprite.__prev = null;
// TODO this size is wrong! // TODO this size is wrong!
// need to recalculate :/ problem with a linked list! // need to recalculate :/ problem with a linked list!
// unless it gets calculated in the "clean"? // unless it gets calculated in the "clean"?
// need to loop through items as there is no way to know the length on a linked list :/ // need to loop through items as there is no way to know the length on a linked list :/
var tempSize = 0; var tempSize = 0;
while(sprite) while(sprite)
@ -258,41 +262,44 @@ PIXI.WebGLBatch.prototype.split = function(sprite)
sprite.batch = batch; sprite.batch = batch;
sprite = sprite.__next; sprite = sprite.__next;
} }
batch.size = tempSize; batch.size = tempSize;
this.size -= tempSize; this.size -= tempSize;
return batch; return batch;
} }
/** /**
* Merges two batchs together * Merges two batchs together
*
* @method merge * @method merge
* @param batch {WebGLBatch} the batch that will be merged * @param batch {WebGLBatch} the batch that will be merged
*/ */
PIXI.WebGLBatch.prototype.merge = function(batch) PIXI.WebGLBatch.prototype.merge = function(batch)
{ {
this.dirty = true; this.dirty = true;
this.tail.__next = batch.head; this.tail.__next = batch.head;
batch.head.__prev = this.tail; batch.head.__prev = this.tail;
this.size += batch.size; this.size += batch.size;
this.tail = batch.tail; this.tail = batch.tail;
var sprite = batch.head; var sprite = batch.head;
while(sprite) while(sprite)
{ {
sprite.batch = this; sprite.batch = this;
sprite = sprite.__next; sprite = sprite.__next;
} }
} }
/** /**
* Grows the size of the batch. As the elements in the batch cannot have a dynamic size this function is used to increase the size of the batch. It also creates a little extra room so that the batch does not need to be resized every time a sprite is added * Grows the size of the batch. As the elements in the batch cannot have a dynamic size this
* @methos growBatch * function is used to increase the size of the batch. It also creates a little extra room so
* that the batch does not need to be resized every time a sprite is added
*
* @method growBatch
*/ */
PIXI.WebGLBatch.prototype.growBatch = function() PIXI.WebGLBatch.prototype.growBatch = function()
{ {
@ -307,25 +314,25 @@ PIXI.WebGLBatch.prototype.growBatch = function()
} }
// grow verts // grow verts
this.verticies = new Float32Array(this.dynamicSize * 8); this.verticies = new Float32Array(this.dynamicSize * 8);
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER,this.verticies , gl.DYNAMIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER,this.verticies , gl.DYNAMIC_DRAW);
this.uvs = new Float32Array( this.dynamicSize * 8 ) this.uvs = new Float32Array( this.dynamicSize * 8 )
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
gl.bufferData(gl.ARRAY_BUFFER, this.uvs , gl.DYNAMIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER, this.uvs , gl.DYNAMIC_DRAW);
this.dirtyUVS = true; this.dirtyUVS = true;
this.colors = new Float32Array( this.dynamicSize * 4 ) this.colors = new Float32Array( this.dynamicSize * 4 )
gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, this.colors , gl.DYNAMIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER, this.colors , gl.DYNAMIC_DRAW);
this.dirtyColors = true; this.dirtyColors = true;
this.indices = new Uint16Array(this.dynamicSize * 6); this.indices = new Uint16Array(this.dynamicSize * 6);
var length = this.indices.length/6; var length = this.indices.length/6;
for (var i=0; i < length; i++) for (var i=0; i < length; i++)
{ {
var index2 = i * 6; var index2 = i * 6;
@ -337,152 +344,152 @@ PIXI.WebGLBatch.prototype.growBatch = function()
this.indices[index2 + 4] = index3 + 2; this.indices[index2 + 4] = index3 + 2;
this.indices[index2 + 5] = index3 + 3; this.indices[index2 + 5] = index3 + 3;
}; };
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW);
} }
/** /**
* Refresh's all the data in the batch and sync's it with the webGL buffers * Refresh's all the data in the batch and sync's it with the webGL buffers
*
* @method refresh * @method refresh
*/ */
PIXI.WebGLBatch.prototype.refresh = function() PIXI.WebGLBatch.prototype.refresh = function()
{ {
var gl = this.gl; var gl = this.gl;
if (this.dynamicSize < this.size) if (this.dynamicSize < this.size)
{ {
this.growBatch(); this.growBatch();
} }
var indexRun = 0; var indexRun = 0;
var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index;
var a, b, c, d, tx, ty var a, b, c, d, tx, ty;
var displayObject = this.head var displayObject = this.head;
while(displayObject) while(displayObject)
{ {
index = indexRun * 8; index = indexRun * 8;
var texture = displayObject.texture; var texture = displayObject.texture;
var frame = texture.frame; var frame = texture.frame;
var tw = texture.baseTexture.width; var tw = texture.baseTexture.width;
var th = texture.baseTexture.height; var th = texture.baseTexture.height;
this.uvs[index + 0] = frame.x / tw; this.uvs[index + 0] = frame.x / tw;
this.uvs[index +1] = frame.y / th; this.uvs[index +1] = frame.y / th;
this.uvs[index +2] = (frame.x + frame.width) / tw; this.uvs[index +2] = (frame.x + frame.width) / tw;
this.uvs[index +3] = frame.y / th; this.uvs[index +3] = frame.y / th;
this.uvs[index +4] = (frame.x + frame.width) / tw; this.uvs[index +4] = (frame.x + frame.width) / tw;
this.uvs[index +5] = (frame.y + frame.height) / th; this.uvs[index +5] = (frame.y + frame.height) / th;
this.uvs[index +6] = frame.x / tw; this.uvs[index +6] = frame.x / tw;
this.uvs[index +7] = (frame.y + frame.height) / th; this.uvs[index +7] = (frame.y + frame.height) / th;
displayObject.updateFrame = false; displayObject.updateFrame = false;
colorIndex = indexRun * 4; colorIndex = indexRun * 4;
this.colors[colorIndex] = this.colors[colorIndex + 1] = this.colors[colorIndex + 2] = this.colors[colorIndex + 3] = displayObject.worldAlpha; this.colors[colorIndex] = this.colors[colorIndex + 1] = this.colors[colorIndex + 2] = this.colors[colorIndex + 3] = displayObject.worldAlpha;
displayObject = displayObject.__next; displayObject = displayObject.__next;
indexRun ++; indexRun ++;
} }
this.dirtyUVS = true; this.dirtyUVS = true;
this.dirtyColors = true; this.dirtyColors = true;
} }
/** /**
* Updates all the relevant geometry and uploads the data to the GPU * Updates all the relevant geometry and uploads the data to the GPU
*
* @method update * @method update
*/ */
PIXI.WebGLBatch.prototype.update = function() PIXI.WebGLBatch.prototype.update = function()
{ {
var gl = this.gl; var gl = this.gl;
var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, index2, index3 var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, index2, index3
var a, b, c, d, tx, ty; var a, b, c, d, tx, ty;
var indexRun = 0; var indexRun = 0;
var displayObject = this.head; var displayObject = this.head;
while(displayObject) while(displayObject)
{ {
if(displayObject.worldVisible) if(displayObject.worldVisible)
{ {
width = displayObject.texture.frame.width; width = displayObject.texture.frame.width;
height = displayObject.texture.frame.height; height = displayObject.texture.frame.height;
// TODO trim?? // TODO trim??
aX = displayObject.anchor.x;// - displayObject.texture.trim.x aX = displayObject.anchor.x;// - displayObject.texture.trim.x
aY = displayObject.anchor.y; //- displayObject.texture.trim.y aY = displayObject.anchor.y; //- displayObject.texture.trim.y
w0 = width * (1-aX); w0 = width * (1-aX);
w1 = width * -aX; w1 = width * -aX;
h0 = height * (1-aY); h0 = height * (1-aY);
h1 = height * -aY; h1 = height * -aY;
index = indexRun * 8; index = indexRun * 8;
worldTransform = displayObject.worldTransform; worldTransform = displayObject.worldTransform;
a = worldTransform[0]; a = worldTransform[0];
b = worldTransform[3]; b = worldTransform[3];
c = worldTransform[1]; c = worldTransform[1];
d = worldTransform[4]; d = worldTransform[4];
tx = worldTransform[2]; tx = worldTransform[2];
ty = worldTransform[5]; ty = worldTransform[5];
this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 0 ] = a * w1 + c * h1 + tx;
this.verticies[index + 1 ] = d * h1 + b * w1 + ty; this.verticies[index + 1 ] = d * h1 + b * w1 + ty;
this.verticies[index + 2 ] = a * w0 + c * h1 + tx; this.verticies[index + 2 ] = a * w0 + c * h1 + tx;
this.verticies[index + 3 ] = d * h1 + b * w0 + ty; this.verticies[index + 3 ] = d * h1 + b * w0 + ty;
this.verticies[index + 4 ] = a * w0 + c * h0 + tx; this.verticies[index + 4 ] = a * w0 + c * h0 + tx;
this.verticies[index + 5 ] = d * h0 + b * w0 + ty; this.verticies[index + 5 ] = d * h0 + b * w0 + ty;
this.verticies[index + 6] = a * w1 + c * h0 + tx; this.verticies[index + 6] = a * w1 + c * h0 + tx;
this.verticies[index + 7] = d * h0 + b * w1 + ty; this.verticies[index + 7] = d * h0 + b * w1 + ty;
if(displayObject.updateFrame || displayObject.texture.updateFrame) if(displayObject.updateFrame || displayObject.texture.updateFrame)
{ {
this.dirtyUVS = true; this.dirtyUVS = true;
var texture = displayObject.texture; var texture = displayObject.texture;
var frame = texture.frame; var frame = texture.frame;
var tw = texture.baseTexture.width; var tw = texture.baseTexture.width;
var th = texture.baseTexture.height; var th = texture.baseTexture.height;
this.uvs[index + 0] = frame.x / tw; this.uvs[index + 0] = frame.x / tw;
this.uvs[index +1] = frame.y / th; this.uvs[index +1] = frame.y / th;
this.uvs[index +2] = (frame.x + frame.width) / tw; this.uvs[index +2] = (frame.x + frame.width) / tw;
this.uvs[index +3] = frame.y / th; this.uvs[index +3] = frame.y / th;
this.uvs[index +4] = (frame.x + frame.width) / tw; this.uvs[index +4] = (frame.x + frame.width) / tw;
this.uvs[index +5] = (frame.y + frame.height) / th; this.uvs[index +5] = (frame.y + frame.height) / th;
this.uvs[index +6] = frame.x / tw; this.uvs[index +6] = frame.x / tw;
this.uvs[index +7] = (frame.y + frame.height) / th; this.uvs[index +7] = (frame.y + frame.height) / th;
displayObject.updateFrame = false; displayObject.updateFrame = false;
} }
// TODO this probably could do with some optimisation.... // TODO this probably could do with some optimisation....
if(displayObject.cacheAlpha != displayObject.worldAlpha) if(displayObject.cacheAlpha != displayObject.worldAlpha)
{ {
displayObject.cacheAlpha = displayObject.worldAlpha; displayObject.cacheAlpha = displayObject.worldAlpha;
var colorIndex = indexRun * 4; var colorIndex = indexRun * 4;
this.colors[colorIndex] = this.colors[colorIndex + 1] = this.colors[colorIndex + 2] = this.colors[colorIndex + 3] = displayObject.worldAlpha; this.colors[colorIndex] = this.colors[colorIndex + 1] = this.colors[colorIndex + 2] = this.colors[colorIndex + 3] = displayObject.worldAlpha;
this.dirtyColors = true; this.dirtyColors = true;
@ -491,20 +498,20 @@ PIXI.WebGLBatch.prototype.update = function()
else else
{ {
index = indexRun * 8; index = indexRun * 8;
this.verticies[index + 0 ] = 0; this.verticies[index + 0 ] = 0;
this.verticies[index + 1 ] = 0; this.verticies[index + 1 ] = 0;
this.verticies[index + 2 ] = 0; this.verticies[index + 2 ] = 0;
this.verticies[index + 3 ] = 0; this.verticies[index + 3 ] = 0;
this.verticies[index + 4 ] = 0; this.verticies[index + 4 ] = 0;
this.verticies[index + 5 ] = 0; this.verticies[index + 5 ] = 0;
this.verticies[index + 6] = 0; this.verticies[index + 6] = 0;
this.verticies[index + 7] = 0; this.verticies[index + 7] = 0;
} }
indexRun++; indexRun++;
displayObject = displayObject.__next; displayObject = displayObject.__next;
} }
@ -512,12 +519,11 @@ PIXI.WebGLBatch.prototype.update = function()
/** /**
* Draws the batch to the frame buffer * Draws the batch to the frame buffer
*
* @method render * @method render
*/ */
PIXI.WebGLBatch.prototype.render = function(start, end) PIXI.WebGLBatch.prototype.render = function(start, end)
{ {
// console.log(start + " :: " + end + " : " + this.size);
start = start || 0; start = start || 0;
//end = end || this.size; //end = end || this.size;
if(end == undefined)end = this.size; if(end == undefined)end = this.size;
@ -526,20 +532,18 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
{ {
this.refresh(); this.refresh();
this.dirty = false; this.dirty = false;
} }
if (this.size == 0)return; if (this.size == 0)return;
this.update(); this.update();
var gl = this.gl; var gl = this.gl;
//TODO optimize this! //TODO optimize this!
var shaderProgram = PIXI.shaderProgram; var shaderProgram = PIXI.shaderProgram;
gl.useProgram(shaderProgram); gl.useProgram(shaderProgram);
// update the verts.. // update the verts..
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
// ok.. // ok..
@ -553,12 +557,12 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
this.dirtyUVS = false; this.dirtyUVS = false;
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvs); gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvs);
} }
gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0); gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, this.texture._glTexture); gl.bindTexture(gl.TEXTURE_2D, this.texture._glTexture);
// update color! // update color!
gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer);
@ -567,17 +571,15 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
this.dirtyColors = false; this.dirtyColors = false;
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.colors); gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.colors);
} }
gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0);
// dont need to upload! // dont need to upload!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
//var startIndex = 0//1; //var startIndex = 0//1;
var len = end - start; var len = end - start;
// console.log(this.size) // console.log(this.size)
// DRAW THAT this! // DRAW THAT this!
gl.drawElements(gl.TRIANGLES, len * 6, gl.UNSIGNED_SHORT, start * 2 * 6 ); gl.drawElements(gl.TRIANGLES, len * 6, gl.UNSIGNED_SHORT, start * 2 * 6 );
} }

View file

@ -2,20 +2,27 @@
* @author Mat Groves http://matgroves.com/ @Doormat23 * @author Mat Groves http://matgroves.com/ @Doormat23
*/ */
/** /**
* A set of functions used by the webGL renderer to draw the primitive graphics data * A set of functions used by the webGL renderer to draw the primitive graphics data
* @class CanvasGraphics *
* @class CanvasGraphics
*/ */
PIXI.WebGLGraphics = function() PIXI.WebGLGraphics = function()
{ {
} }
/**
* Renders the graphics object
*
* @static
* @private
* @method renderGraphics
* @param graphics {Graphics}
* @param projection {Object}
*/
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection) PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{ {
var gl = PIXI.gl; var gl = PIXI.gl;
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
@ -75,6 +82,14 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
PIXI.activateDefaultShader(); PIXI.activateDefaultShader();
} }
/**
* Updates the graphics object
*
* @static
* @private
* @method updateGraphics
* @param graphics {Graphics}
*/
PIXI.WebGLGraphics.updateGraphics = function(graphics) PIXI.WebGLGraphics.updateGraphics = function(graphics)
{ {
for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++)
@ -119,7 +134,15 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW);
} }
/**
* Builds a rectangle to draw
*
* @static
* @private
* @method buildRectangle
* @param graphics {Graphics}
* @param webGLData {Object}
*/
PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData) PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
{ {
// --- // // --- //
@ -176,6 +199,15 @@ PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
} }
/**
* Builds a circle to draw
*
* @static
* @private
* @method buildCircle
* @param graphics {Graphics}
* @param webGLData {Object}
*/
PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData) PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
{ {
// --- // // --- //
@ -235,6 +267,15 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
} }
/**
* Builds a line to draw
*
* @static
* @private
* @method buildLine
* @param graphics {Graphics}
* @param webGLData {Object}
*/
PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData) PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
{ {
// TODO OPTIMISE! // TODO OPTIMISE!
@ -417,7 +458,15 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
indices.push(indexStart-1); indices.push(indexStart-1);
} }
/**
* Builds a polygon to draw
*
* @static
* @private
* @method buildPoly
* @param graphics {Graphics}
* @param webGLData {Object}
*/
PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData) PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
{ {
var points = graphicsData.points; var points = graphicsData.points;

View file

@ -2,15 +2,18 @@
* @author Mat Groves http://matgroves.com/ @Doormat23 * @author Mat Groves http://matgroves.com/ @Doormat23
*/ */
/** /**
* A WebGLBatch Enables a group of sprites to be drawn using the same settings. * A WebGLBatch Enables a group of sprites to be drawn using the same settings.
* if a group of sprites all have the same baseTexture and blendMode then they can be grouped into a batch. All the sprites in a batch can then be drawn in one go by the GPU which is hugely efficient. ALL sprites in the webGL renderer are added to a batch even if the batch only contains one sprite. Batching is handled automatically by the webGL renderer. A good tip is: the smaller the number of batchs there are, the faster the webGL renderer will run. * if a group of sprites all have the same baseTexture and blendMode then they can be
* grouped into a batch. All the sprites in a batch can then be drawn in one go by the
* GPU which is hugely efficient. ALL sprites in the webGL renderer are added to a batch
* even if the batch only contains one sprite. Batching is handled automatically by the
* webGL renderer. A good tip is: the smaller the number of batchs there are, the faster
* the webGL renderer will run.
*
* @class WebGLBatch * @class WebGLBatch
* @param an instance of the webGL context * @contructor
* @return {PIXI.renderers.WebGLBatch} WebGLBatch {@link PIXI.renderers.WebGLBatch} * @param gl {WebGLContext} An instance of the webGL context
*/ */
PIXI.WebGLRenderGroup = function(gl) PIXI.WebGLRenderGroup = function(gl)
{ {
@ -25,6 +28,13 @@ PIXI.WebGLRenderGroup = function(gl)
// constructor // constructor
PIXI.WebGLRenderGroup.constructor = PIXI.WebGLRenderGroup; PIXI.WebGLRenderGroup.constructor = PIXI.WebGLRenderGroup;
/**
* Add a display object to the webgl renderer
*
* @method setRenderable
* @param displayObject {DisplayObject}
* @private
*/
PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject) PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
{ {
// has this changed?? // has this changed??
@ -40,6 +50,12 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
this.addDisplayObjectAndChildren(displayObject); this.addDisplayObjectAndChildren(displayObject);
} }
/**
* Renders the stage to its webgl view
*
* @method render
* @param projection {Object}
*/
PIXI.WebGLRenderGroup.prototype.render = function(projection) PIXI.WebGLRenderGroup.prototype.render = function(projection)
{ {
PIXI.WebGLRenderer.updateTextures(); PIXI.WebGLRenderer.updateTextures();
@ -104,11 +120,26 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection)
} }
/**
* Renders the stage to its webgl view
*
* @method handleFilter
* @param filter {FilterBlock}
* @private
*/
PIXI.WebGLRenderGroup.prototype.handleFilter = function(filter, projection) PIXI.WebGLRenderGroup.prototype.handleFilter = function(filter, projection)
{ {
} }
/**
* Renders a specific displayObject
*
* @method renderSpecific
* @param displayObject {DisplayObject}
* @param projection {Object}
* @private
*/
PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, projection) PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, projection)
{ {
PIXI.WebGLRenderer.updateTextures(); PIXI.WebGLRenderer.updateTextures();
@ -261,6 +292,14 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
} }
} }
/**
* Renders a specific renderable
*
* @method renderSpecial
* @param renderable {DisplayObject}
* @param projection {Object}
* @private
*/
PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection) PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection)
{ {
if(renderable instanceof PIXI.TilingSprite) if(renderable instanceof PIXI.TilingSprite)
@ -309,6 +348,14 @@ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection)
} }
} }
/**
* Checks the visibility of a displayObject
*
* @method checkVisibility
* @param displayObject {DisplayObject}
* @param globalVisible {Boolean}
* @private
*/
PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, globalVisible) PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, globalVisible)
{ {
// give the dp a reference to its renderGroup... // give the dp a reference to its renderGroup...
@ -337,6 +384,13 @@ PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, global
}; };
} }
/**
* Updates a webgl texture
*
* @method updateTexture
* @param displayObject {DisplayObject}
* @private
*/
PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
{ {
@ -372,6 +426,14 @@ PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
this.insertObject(displayObject, previousRenderable, nextRenderable); this.insertObject(displayObject, previousRenderable, nextRenderable);
} }
/**
* Adds filter blocks
*
* @method addFilterBlocks
* @param start {FilterBlock}
* @param end {FilterBlock}
* @private
*/
PIXI.WebGLRenderGroup.prototype.addFilterBlocks = function(start, end) PIXI.WebGLRenderGroup.prototype.addFilterBlocks = function(start, end)
{ {
start.__renderGroup = this; start.__renderGroup = this;
@ -404,12 +466,27 @@ PIXI.WebGLRenderGroup.prototype.addFilterBlocks = function(start, end)
this.insertAfter(end, previousRenderable2); this.insertAfter(end, previousRenderable2);
} }
/**
* Remove filter blocks
*
* @method removeFilterBlocks
* @param start {FilterBlock}
* @param end {FilterBlock}
* @private
*/
PIXI.WebGLRenderGroup.prototype.removeFilterBlocks = function(start, end) PIXI.WebGLRenderGroup.prototype.removeFilterBlocks = function(start, end)
{ {
this.removeObject(start); this.removeObject(start);
this.removeObject(end); this.removeObject(end);
} }
/**
* Adds a display object and children to the webgl context
*
* @method addDisplayObjectAndChildren
* @param displayObject {DisplayObject}
* @private
*/
PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject) PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject)
{ {
if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject); if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject);
@ -460,6 +537,13 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayOb
while(tempObject != testObject) while(tempObject != testObject)
} }
/**
* Removes a display object and children to the webgl context
*
* @method removeDisplayObjectAndChildren
* @param displayObject {DisplayObject}
* @private
*/
PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject) PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject)
{ {
if(displayObject.__renderGroup != this)return; if(displayObject.__renderGroup != this)return;
@ -475,8 +559,15 @@ PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displa
while(displayObject) while(displayObject)
} }
/**
* Inserts a displayObject into the linked list
*
* @method insertObject
* @param displayObject {DisplayObject}
* @param previousObject {DisplayObject}
* @param nextObject {DisplayObject}
* @private
*/
PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousObject, nextObject) PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousObject, nextObject)
{ {
// while looping below THE OBJECT MAY NOT HAVE BEEN ADDED // while looping below THE OBJECT MAY NOT HAVE BEEN ADDED
@ -606,8 +697,14 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
} }
/**
* Inserts a displayObject into the linked list
*
* @method insertAfter
* @param item {DisplayObject}
* @param displayObject {DisplayObject} The object to insert
* @private
*/
PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject) PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject)
{ {
if(displayObject instanceof PIXI.Sprite) if(displayObject instanceof PIXI.Sprite)
@ -655,6 +752,13 @@ PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject)
} }
} }
/**
* Removes a displayObject from the linked list
*
* @method removeObject
* @param displayObject {DisplayObject} The object to remove
* @private
*/
PIXI.WebGLRenderGroup.prototype.removeObject = function(displayObject) PIXI.WebGLRenderGroup.prototype.removeObject = function(displayObject)
{ {
// loop through children.. // loop through children..
@ -726,15 +830,11 @@ PIXI.WebGLRenderGroup.prototype.removeObject = function(displayObject)
} }
} }
/**
* @private
*/
/** /**
* Initializes a tiling sprite
*
* @method initTilingSprite
* @param sprite {TilingSprite} The tiling sprite to initialize
* @private * @private
*/ */
PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite) PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite)
@ -790,6 +890,11 @@ PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite)
} }
/** /**
* Renders a Strip
*
* @method renderStrip
* @param strip {Strip} The strip to render
* @param projection {Object}
* @private * @private
*/ */
PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection) PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
@ -876,8 +981,12 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
gl.useProgram(PIXI.shaderProgram); gl.useProgram(PIXI.shaderProgram);
} }
/** /**
* Renders a TilingSprite
*
* @method renderTilingSprite
* @param sprite {TilingSprite} The tiling sprite to render
* @param projectionMatrix {Object}
* @private * @private
*/ */
PIXI.WebGLRenderGroup.prototype.renderTilingSprite = function(sprite, projectionMatrix) PIXI.WebGLRenderGroup.prototype.renderTilingSprite = function(sprite, projectionMatrix)
@ -912,9 +1021,11 @@ PIXI.WebGLRenderGroup.prototype.renderTilingSprite = function(sprite, projection
this.renderStrip(sprite, projectionMatrix); this.renderStrip(sprite, projectionMatrix);
} }
/** /**
* Initializes a strip to be rendered
*
* @method initStrip
* @param strip {Strip} The strip to initialize
* @private * @private
*/ */
PIXI.WebGLRenderGroup.prototype.initStrip = function(strip) PIXI.WebGLRenderGroup.prototype.initStrip = function(strip)
@ -941,4 +1052,3 @@ PIXI.WebGLRenderGroup.prototype.initStrip = function(strip)
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW);
} }

View file

@ -9,40 +9,39 @@ PIXI._defaultFrame = new PIXI.Rectangle(0,0,1,1);
PIXI.gl; PIXI.gl;
/** /**
* the WebGLRenderer is draws the stage and all its content onto a webGL enabled canvas. This renderer should be used for browsers support webGL. This Render works by automatically managing webGLBatchs. So no need for Sprite Batch's or Sprite Cloud's * the WebGLRenderer is draws the stage and all its content onto a webGL enabled canvas. This renderer
* should be used for browsers support webGL. This Render works by automatically managing webGLBatchs.
* So no need for Sprite Batch's or Sprite Cloud's
* Dont forget to add the view to your DOM or you will not see anything :) * Dont forget to add the view to your DOM or you will not see anything :)
*
* @class WebGLRenderer * @class WebGLRenderer
* @constructor * @constructor
* @param width {Number} the width of the canvas view * @param width=0 {Number} the width of the canvas view
* @default 0 * @param height=0 {Number} the height of the canvas view
* @param height {Number} the height of the canvas view
* @default 0
* @param view {Canvas} the canvas to use as a view, optional * @param view {Canvas} the canvas to use as a view, optional
* @param transparent {Boolean} the transparency of the render view, default false * @param transparent=false {Boolean} the transparency of the render view, default false
* @default false
* *
*/ */
PIXI.WebGLRenderer = function(width, height, view, transparent) PIXI.WebGLRenderer = function(width, height, view, transparent)
{ {
// do a catch.. only 1 webGL renderer.. // do a catch.. only 1 webGL renderer..
//console.log(transparent)
this.transparent = !!transparent; this.transparent = !!transparent;
this.width = width || 800; this.width = width || 800;
this.height = height || 600; this.height = height || 600;
this.view = view || document.createElement( 'canvas' ); this.view = view || document.createElement( 'canvas' );
this.view.width = this.width; this.view.width = this.width;
this.view.height = this.height; this.view.height = this.height;
// deal with losing context.. // deal with losing context..
var scope = this; var scope = this;
this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false) this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false)
this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false) this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false)
this.batchs = []; this.batchs = [];
try try
{ {
PIXI.gl = this.gl = this.view.getContext("experimental-webgl", { PIXI.gl = this.gl = this.view.getContext("experimental-webgl", {
@ -56,31 +55,28 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
{ {
throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this); throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
} }
PIXI.initPrimitiveShader(); PIXI.initPrimitiveShader();
PIXI.initDefaultShader(); PIXI.initDefaultShader();
PIXI.initDefaultStripShader(); PIXI.initDefaultStripShader();
PIXI.activateDefaultShader(); PIXI.activateDefaultShader();
var gl = this.gl; var gl = this.gl;
PIXI.WebGLRenderer.gl = gl; PIXI.WebGLRenderer.gl = gl;
this.batch = new PIXI.WebGLBatch(gl); this.batch = new PIXI.WebGLBatch(gl);
gl.disable(gl.DEPTH_TEST); gl.disable(gl.DEPTH_TEST);
gl.disable(gl.CULL_FACE); gl.disable(gl.CULL_FACE);
//
gl.enable(gl.BLEND); gl.enable(gl.BLEND);
gl.colorMask(true, true, true, this.transparent); gl.colorMask(true, true, true, this.transparent);
PIXI.projection = new PIXI.Point(400, 300); PIXI.projection = new PIXI.Point(400, 300);
this.resize(this.width, this.height); this.resize(this.width, this.height);
this.contextLost = false; this.contextLost = false;
this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl); this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl);
} }
@ -88,6 +84,11 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
PIXI.WebGLRenderer.constructor = PIXI.WebGLRenderer; PIXI.WebGLRenderer.constructor = PIXI.WebGLRenderer;
/** /**
* Gets a new WebGLBatch from the pool
*
* @static
* @method getBatch
* @return {WebGLBatch}
* @private * @private
*/ */
PIXI.WebGLRenderer.getBatch = function() PIXI.WebGLRenderer.getBatch = function()
@ -103,6 +104,11 @@ PIXI.WebGLRenderer.getBatch = function()
} }
/** /**
* Puts a batch back into the pool
*
* @static
* @method returnBatch
* @param batch {WebGLBatch} The batch to return
* @private * @private
*/ */
PIXI.WebGLRenderer.returnBatch = function(batch) PIXI.WebGLRenderer.returnBatch = function(batch)
@ -111,17 +117,11 @@ PIXI.WebGLRenderer.returnBatch = function(batch)
PIXI._batchs.push(batch); PIXI._batchs.push(batch);
} }
/**
* @private
*/
/** /**
* Renders the stage to its webGL view * Renders the stage to its webGL view
*
* @method render * @method render
* @param stage {Stage} the PIXI.Stage element to be rendered * @param stage {Stage} the Stage element to be rendered
*/ */
PIXI.WebGLRenderer.prototype.render = function(stage) PIXI.WebGLRenderer.prototype.render = function(stage)
{ {
@ -202,9 +202,12 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
} }
/** /**
* Updates the textures loaded into this webgl renderer
*
* @static
* @method updateTextures
* @private * @private
*/ */
PIXI.WebGLRenderer.updateTextures = function() PIXI.WebGLRenderer.updateTextures = function()
{ {
for (var i=0; i < PIXI.texturesToUpdate.length; i++) this.updateTexture(PIXI.texturesToUpdate[i]); for (var i=0; i < PIXI.texturesToUpdate.length; i++) this.updateTexture(PIXI.texturesToUpdate[i]);
@ -213,26 +216,34 @@ PIXI.WebGLRenderer.updateTextures = function()
PIXI.texturesToDestroy = []; PIXI.texturesToDestroy = [];
} }
/**
* Updates a loaded webgl texture
*
* @static
* @method updateTexture
* @param texture {Texture} The texture to update
* @private
*/
PIXI.WebGLRenderer.updateTexture = function(texture) PIXI.WebGLRenderer.updateTexture = function(texture)
{ {
var gl = PIXI.gl; var gl = PIXI.gl;
if(!texture._glTexture) if(!texture._glTexture)
{ {
texture._glTexture = gl.createTexture(); texture._glTexture = gl.createTexture();
} }
if(texture.hasLoaded) if(texture.hasLoaded)
{ {
gl.bindTexture(gl.TEXTURE_2D, texture._glTexture); gl.bindTexture(gl.TEXTURE_2D, texture._glTexture);
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
// reguler... // reguler...
if(!texture._powerOf2) if(!texture._powerOf2)
{ {
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
@ -243,16 +254,22 @@ PIXI.WebGLRenderer.updateTexture = function(texture)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
} }
gl.bindTexture(gl.TEXTURE_2D, null); gl.bindTexture(gl.TEXTURE_2D, null);
} }
} }
/**
* Destroys a loaded webgl texture
*
* @method destroyTexture
* @param texture {Texture} The texture to update
* @private
*/
PIXI.WebGLRenderer.prototype.destroyTexture = function(texture) PIXI.WebGLRenderer.prototype.destroyTexture = function(texture)
{ {
var gl = this.gl; var gl = this.gl;
if(texture._glTexture) if(texture._glTexture)
{ {
texture._glTexture = gl.createTexture(); texture._glTexture = gl.createTexture();
@ -262,6 +279,7 @@ PIXI.WebGLRenderer.prototype.destroyTexture = function(texture)
/** /**
* resizes the webGL view to the specified width and height * resizes the webGL view to the specified width and height
*
* @method resize * @method resize
* @param width {Number} the new width of the webGL view * @param width {Number} the new width of the webGL view
* @param height {Number} the new height of the webGL view * @param height {Number} the new height of the webGL view
@ -270,17 +288,17 @@ PIXI.WebGLRenderer.prototype.resize = function(width, height)
{ {
this.width = width; this.width = width;
this.height = height; this.height = height;
this.view.width = width; this.view.width = width;
this.view.height = height; this.view.height = height;
this.gl.viewport(0, 0, this.width, this.height); this.gl.viewport(0, 0, this.width, this.height);
//var projectionMatrix = this.projectionMatrix; //var projectionMatrix = this.projectionMatrix;
PIXI.projection.x = this.width/2; PIXI.projection.x = this.width/2;
PIXI.projection.y = this.height/2; PIXI.projection.y = this.height/2;
// projectionMatrix[0] = 2/this.width; // projectionMatrix[0] = 2/this.width;
// projectionMatrix[5] = -2/this.height; // projectionMatrix[5] = -2/this.height;
// projectionMatrix[12] = -1; // projectionMatrix[12] = -1;
@ -288,6 +306,10 @@ PIXI.WebGLRenderer.prototype.resize = function(width, height)
} }
/** /**
* Handles a lost webgl context
*
* @method handleContextLost
* @param event {Event}
* @private * @private
*/ */
PIXI.WebGLRenderer.prototype.handleContextLost = function(event) PIXI.WebGLRenderer.prototype.handleContextLost = function(event)
@ -297,6 +319,10 @@ PIXI.WebGLRenderer.prototype.handleContextLost = function(event)
} }
/** /**
* Handles a restored webgl context
*
* @method handleContextRestored
* @param event {Event}
* @private * @private
*/ */
PIXI.WebGLRenderer.prototype.handleContextRestored = function(event) PIXI.WebGLRenderer.prototype.handleContextRestored = function(event)
@ -304,24 +330,23 @@ PIXI.WebGLRenderer.prototype.handleContextRestored = function(event)
this.gl = this.view.getContext("experimental-webgl", { this.gl = this.view.getContext("experimental-webgl", {
alpha: true alpha: true
}); });
this.initShaders(); this.initShaders();
for(var key in PIXI.TextureCache) for(var key in PIXI.TextureCache)
{ {
var texture = PIXI.TextureCache[key].baseTexture; var texture = PIXI.TextureCache[key].baseTexture;
texture._glTexture = null; texture._glTexture = null;
PIXI.WebGLRenderer.updateTexture(texture); PIXI.WebGLRenderer.updateTexture(texture);
}; };
for (var i=0; i < this.batchs.length; i++) for (var i=0; i < this.batchs.length; i++)
{ {
this.batchs[i].restoreLostContext(this.gl)// this.batchs[i].restoreLostContext(this.gl)//
this.batchs[i].dirty = true; this.batchs[i].dirty = true;
}; };
PIXI._restoreBatchs(this.gl); PIXI._restoreBatchs(this.gl);
this.contextLost = false; this.contextLost = false;
} }

View file

@ -7,13 +7,14 @@
* You can generate the fnt files using * You can generate the fnt files using
* http://www.angelcode.com/products/bmfont/ for windows or * http://www.angelcode.com/products/bmfont/ for windows or
* http://www.bmglyph.com/ for mac. * http://www.bmglyph.com/ for mac.
*
* @class BitmapText * @class BitmapText
* @extends DisplayObjectContainer * @extends DisplayObjectContainer
* @constructor * @constructor
* @param {String} text The copy that you would like the text to display * @param text {String} The copy that you would like the text to display
* @param {Object} style The style parameters * @param style {Object} The style parameters
* @param {String} style.font The size (optional) and bitmap font id (required) eq "Arial" or "20px Arial" (must have loaded previously) * @param style.font {String} The size (optional) and bitmap font id (required) eq "Arial" or "20px Arial" (must have loaded previously)
* @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right")
*/ */
PIXI.BitmapText = function(text, style) PIXI.BitmapText = function(text, style)
{ {
@ -32,8 +33,9 @@ PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype)
/** /**
* Set the copy for the text object * Set the copy for the text object
*
* @method setText * @method setText
* @param {String} text The copy that you would like the text to display * @param text {String} The copy that you would like the text to display
*/ */
PIXI.BitmapText.prototype.setText = function(text) PIXI.BitmapText.prototype.setText = function(text)
{ {
@ -43,10 +45,11 @@ PIXI.BitmapText.prototype.setText = function(text)
/** /**
* Set the style of the text * Set the style of the text
*
* @method setStyle * @method setStyle
* @param {Object} style The style parameters * @param style {Object} The style parameters
* @param {String} style.font The size (optional) and bitmap font id (required) eq "Arial" or "20px Arial" (must have loaded previously) * @param style.font {String} The size (optional) and bitmap font id (required) eq "Arial" or "20px Arial" (must have loaded previously)
* @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right")
*/ */
PIXI.BitmapText.prototype.setStyle = function(style) PIXI.BitmapText.prototype.setStyle = function(style)
{ {
@ -63,6 +66,8 @@ PIXI.BitmapText.prototype.setStyle = function(style)
/** /**
* Renders text * Renders text
*
* @method updateText
* @private * @private
*/ */
PIXI.BitmapText.prototype.updateText = function() PIXI.BitmapText.prototype.updateText = function()
@ -135,6 +140,9 @@ PIXI.BitmapText.prototype.updateText = function()
}; };
/** /**
* Updates the transfor of this object
*
* @method updateTransform
* @private * @private
*/ */
PIXI.BitmapText.prototype.updateTransform = function() PIXI.BitmapText.prototype.updateTransform = function()
@ -153,4 +161,4 @@ PIXI.BitmapText.prototype.updateTransform = function()
PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
}; };
PIXI.BitmapText.fonts = {}; PIXI.BitmapText.fonts = {};

View file

@ -4,18 +4,19 @@
/** /**
* A Text Object will create a line(s) of text to split a line you can use "\n" * A Text Object will create a line(s) of text to split a line you can use "\n"
*
* @class Text * @class Text
* @extends Sprite * @extends Sprite
* @constructor * @constructor
* @param {String} text The copy that you would like the text to display * @param text {String} The copy that you would like the text to display
* @param {Object} [style] The style parameters * @param [style] {Object} The style parameters
* @param {String} [style.font] default "bold 20pt Arial" The style and size of the font * @param [style.font] {String} default "bold 20pt Arial" The style and size of the font
* @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" * @param [style.fill="black"] {Object} A canvas fillstyle that will be used on the text eg "red", "#00FF00"
* @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right")
* @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" * @param [style.stroke] {String} A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
* @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) * @param [style.strokeThickness=0] {Number} A number that represents the thickness of the stroke. Default is 0 (no stroke)
* @param {Boolean} [style.wordWrap=false] Indicates if word wrap should be used * @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used
* @param {Number} [style.wordWrapWidth=100] The width at which text will wrap * @param [style.wordWrapWidth=100] {Number} The width at which text will wrap
*/ */
PIXI.Text = function(text, style) PIXI.Text = function(text, style)
{ {
@ -36,15 +37,16 @@ PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
/** /**
* Set the style of the text * Set the style of the text
*
* @method setStyle * @method setStyle
* @param {Object} [style] The style parameters * @param [style] {Object} The style parameters
* @param {String} [style.font="bold 20pt Arial"] The style and size of the font * @param [style.font="bold 20pt Arial"] {String} The style and size of the font
* @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" * @param [style.fill="black"] {Object} A canvas fillstyle that will be used on the text eg "red", "#00FF00"
* @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right")
* @param {String} [style.stroke="black"] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" * @param [style.stroke="black"] {String} A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
* @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) * @param [style.strokeThickness=0] {Number} A number that represents the thickness of the stroke. Default is 0 (no stroke)
* @param {Boolean} [style.wordWrap=false] Indicates if word wrap should be used * @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used
* @param {Number} [style.wordWrapWidth=100] The width at which text will wrap * @param [style.wordWrapWidth=100] {Number} The width at which text will wrap
*/ */
PIXI.Text.prototype.setStyle = function(style) PIXI.Text.prototype.setStyle = function(style)
{ {
@ -62,6 +64,7 @@ PIXI.Text.prototype.setStyle = function(style)
/** /**
* Set the copy for the text object. To split a line you can use "\n" * Set the copy for the text object. To split a line you can use "\n"
*
* @methos setText * @methos setText
* @param {String} text The copy that you would like the text to display * @param {String} text The copy that you would like the text to display
*/ */
@ -73,6 +76,8 @@ PIXI.Sprite.prototype.setText = function(text)
/** /**
* Renders text * Renders text
*
* @method updateText
* @private * @private
*/ */
PIXI.Text.prototype.updateText = function() PIXI.Text.prototype.updateText = function()
@ -142,6 +147,8 @@ PIXI.Text.prototype.updateText = function()
/** /**
* Updates texture size based on canvas size * Updates texture size based on canvas size
*
* @method updateTexture
* @private * @private
*/ */
PIXI.Text.prototype.updateTexture = function() PIXI.Text.prototype.updateTexture = function()
@ -159,6 +166,9 @@ PIXI.Text.prototype.updateTexture = function()
}; };
/** /**
* Updates the transfor of this object
*
* @method updateTransform
* @private * @private
*/ */
PIXI.Text.prototype.updateTransform = function() PIXI.Text.prototype.updateTransform = function()
@ -175,6 +185,10 @@ PIXI.Text.prototype.updateTransform = function()
/* /*
* http://stackoverflow.com/users/34441/ellisbben * http://stackoverflow.com/users/34441/ellisbben
* great solution to the problem! * great solution to the problem!
*
* @method determineFontHeight
* @param fontStyle {Object}
* @private
*/ */
PIXI.Text.prototype.determineFontHeight = function(fontStyle) PIXI.Text.prototype.determineFontHeight = function(fontStyle)
{ {
@ -202,6 +216,9 @@ PIXI.Text.prototype.determineFontHeight = function(fontStyle)
/** /**
* A Text Object will apply wordwrap * A Text Object will apply wordwrap
*
* @method wordWrap
* @param text {String}
* @private * @private
*/ */
PIXI.Text.prototype.wordWrap = function(text) PIXI.Text.prototype.wordWrap = function(text)
@ -251,6 +268,12 @@ PIXI.Text.prototype.wordWrap = function(text)
return result; return result;
}; };
/**
* Destroys this text object
*
* @method destroy
* @param destroyTexture {Boolean}
*/
PIXI.Text.prototype.destroy = function(destroyTexture) PIXI.Text.prototype.destroy = function(destroyTexture)
{ {
if(destroyTexture) if(destroyTexture)

View file

@ -8,44 +8,53 @@ PIXI.texturesToDestroy = [];
/** /**
* A texture stores the information that represents an image. All textures have a base texture * A texture stores the information that represents an image. All textures have a base texture
*
* @class BaseTexture * @class BaseTexture
* @extends EventTarget * @uses EventTarget
* @constructor * @constructor
* @param source {String} the source object (image or canvas) * @param source {String} the source object (image or canvas)
*/ */
PIXI.BaseTexture = function(source) PIXI.BaseTexture = function(source)
{ {
PIXI.EventTarget.call( this ); PIXI.EventTarget.call( this );
/*
* The url of the texture
* @property imageUrl
* @type String
*/
//this.imageUrl = source.src;
/** /**
* [read only] The width of the base texture set when the image has loaded * [read-only] The width of the base texture set when the image has loaded
*
* @property width * @property width
* @type Number * @type Number
* @readOnly
*/ */
this.width = 100; this.width = 100;
/** /**
* [read only] The height of the base texture set when the image has loaded * [read-only] The height of the base texture set when the image has loaded
*
* @property height * @property height
* @type Number * @type Number
* @readOnly
*/ */
this.height = 100; this.height = 100;
/**
* [read-only] Describes if the base texture has loaded or not
*
* @property hasLoaded
* @type Boolean
* @readOnly
*/
this.hasLoaded = false;
/** /**
* The source that is loaded to create the texture * The source that is loaded to create the texture
*
* @property source * @property source
* @type Image * @type Image
*/ */
this.source = source//new Image(); this.source = source;
if(!source)return; if(!source)return;
if(this.source instanceof Image) if(this.source instanceof Image)
{ {
if(this.source.complete) if(this.source.complete)
@ -81,13 +90,17 @@ PIXI.BaseTexture = function(source)
PIXI.texturesToUpdate.push(this); PIXI.texturesToUpdate.push(this);
} }
this._powerOf2 = false; this._powerOf2 = false;
} }
PIXI.BaseTexture.constructor = PIXI.BaseTexture; PIXI.BaseTexture.constructor = PIXI.BaseTexture;
/**
* Destroys this base texture
*
* @method destroy
*/
PIXI.BaseTexture.prototype.destroy = function() PIXI.BaseTexture.prototype.destroy = function()
{ {
if(this.source instanceof Image) if(this.source instanceof Image)
@ -99,9 +112,9 @@ PIXI.BaseTexture.prototype.destroy = function()
} }
/** /**
*
* Helper function that returns a base texture based on an image url * Helper function that returns a base texture based on an image url
* If the image is not in the base texture cache it will be created and loaded * If the image is not in the base texture cache it will be created and loaded
*
* @static * @static
* @method fromImage * @method fromImage
* @param imageUrl {String} The image url of the texture * @param imageUrl {String} The image url of the texture

View file

@ -27,20 +27,20 @@
@class RenderTexture @class RenderTexture
@extends Texture @extends Texture
@constructor @constructor
@param width {Number} @param width {Number} The width of the render texture
@param height {Number} @param height {Number} The height of the render texture
**/ */
PIXI.RenderTexture = function(width, height) PIXI.RenderTexture = function(width, height)
{ {
PIXI.EventTarget.call( this ); PIXI.EventTarget.call( this );
this.width = width || 100; this.width = width || 100;
this.height = height || 100; this.height = height || 100;
this.indetityMatrix = PIXI.mat3.create(); this.indetityMatrix = PIXI.mat3.create();
this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); this.frame = new PIXI.Rectangle(0, 0, this.width, this.height);
if(PIXI.gl) if(PIXI.gl)
{ {
this.initWebGL(); this.initWebGL();
@ -54,16 +54,22 @@ PIXI.RenderTexture = function(width, height)
PIXI.RenderTexture.constructor = PIXI.RenderTexture; PIXI.RenderTexture.constructor = PIXI.RenderTexture;
PIXI.RenderTexture.prototype = Object.create( PIXI.Texture.prototype ); PIXI.RenderTexture.prototype = Object.create( PIXI.Texture.prototype );
/**
* Initializes the webgl data for this texture
*
* @method initWebGL
* @private
*/
PIXI.RenderTexture.prototype.initWebGL = function() PIXI.RenderTexture.prototype.initWebGL = function()
{ {
var gl = PIXI.gl; var gl = PIXI.gl;
this.glFramebuffer = gl.createFramebuffer(); this.glFramebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer ); gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
this.glFramebuffer.width = this.width; this.glFramebuffer.width = this.width;
this.glFramebuffer.height = this.height; this.glFramebuffer.height = this.height;
this.baseTexture = new PIXI.BaseTexture(); this.baseTexture = new PIXI.BaseTexture();
this.baseTexture.width = this.width; this.baseTexture.width = this.width;
@ -71,27 +77,27 @@ PIXI.RenderTexture.prototype.initWebGL = function()
this.baseTexture._glTexture = gl.createTexture(); this.baseTexture._glTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTexture); gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
this.baseTexture.isRender = true; this.baseTexture.isRender = true;
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer ); gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.baseTexture._glTexture, 0); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.baseTexture._glTexture, 0);
// create a projection matrix.. // create a projection matrix..
this.projection = new PIXI.Point(this.width/2 , this.height/2); this.projection = new PIXI.Point(this.width/2 , this.height/2);
this.projectionMatrix = PIXI.mat4.create(); this.projectionMatrix = PIXI.mat4.create();
this.projectionMatrix[5] = 2/this.height// * 0.5; this.projectionMatrix[5] = 2/this.height// * 0.5;
this.projectionMatrix[13] = -1; this.projectionMatrix[13] = -1;
this.projectionMatrix[0] = 2/this.width; this.projectionMatrix[0] = 2/this.width;
this.projectionMatrix[12] = -1; this.projectionMatrix[12] = -1;
@ -123,47 +129,56 @@ PIXI.RenderTexture.prototype.resize = function(width, height)
} }
} }
/**
* Initializes the canvas data for this texture
*
* @method initCanvas
* @private
*/
PIXI.RenderTexture.prototype.initCanvas = function() PIXI.RenderTexture.prototype.initCanvas = function()
{ {
this.renderer = new PIXI.CanvasRenderer(this.width, this.height, null, 0); this.renderer = new PIXI.CanvasRenderer(this.width, this.height, null, 0);
this.baseTexture = new PIXI.BaseTexture(this.renderer.view); this.baseTexture = new PIXI.BaseTexture(this.renderer.view);
this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); this.frame = new PIXI.Rectangle(0, 0, this.width, this.height);
this.render = this.renderCanvas; this.render = this.renderCanvas;
} }
/** /**
* This function will draw the display object to the texture. * This function will draw the display object to the texture.
* @method render *
* @param displayObject {DisplayObject} * @method renderWebGL
* @param displayObject {DisplayObject} The display object to render this texture on
* @param clear {Boolean} If true the texture will be cleared before the displayObject is drawn * @param clear {Boolean} If true the texture will be cleared before the displayObject is drawn
* @private
*/ */
PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, clear) PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, clear)
{ {
var gl = PIXI.gl; var gl = PIXI.gl;
// enable the alpha color mask.. // enable the alpha color mask..
gl.colorMask(true, true, true, true); gl.colorMask(true, true, true, true);
gl.viewport(0, 0, this.width, this.height); gl.viewport(0, 0, this.width, this.height);
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer ); gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
if(clear) if(clear)
{ {
gl.clearColor(0,0,0, 0); gl.clearColor(0,0,0, 0);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
} }
// THIS WILL MESS WITH HIT TESTING! // THIS WILL MESS WITH HIT TESTING!
var children = displayObject.children; var children = displayObject.children;
//TODO -? create a new one??? dont think so! //TODO -? create a new one??? dont think so!
displayObject.worldTransform = PIXI.mat3.create();//sthis.indetityMatrix; displayObject.worldTransform = PIXI.mat3.create();//sthis.indetityMatrix;
// modify to flip... // modify to flip...
displayObject.worldTransform[4] = -1; displayObject.worldTransform[4] = -1;
displayObject.worldTransform[5] = this.projection.y * 2; displayObject.worldTransform[5] = this.projection.y * 2;
if(position) if(position)
{ {
@ -171,11 +186,13 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, cle
displayObject.worldTransform[5] -= position.y; displayObject.worldTransform[5] -= position.y;
} }
for(var i=0,j=children.length; i<j; i++) for(var i=0,j=children.length; i<j; i++)
{ {
children[i].updateTransform(); children[i].updateTransform();
} }
var renderGroup = displayObject.__renderGroup; var renderGroup = displayObject.__renderGroup;
if(renderGroup) if(renderGroup)
@ -195,13 +212,21 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, cle
this.renderGroup.setRenderable(displayObject); this.renderGroup.setRenderable(displayObject);
this.renderGroup.render(this.projection); this.renderGroup.render(this.projection);
} }
} }
/**
* This function will draw the display object to the texture.
*
* @method renderCanvas
* @param displayObject {DisplayObject} The display object to render this texture on
* @param clear {Boolean} If true the texture will be cleared before the displayObject is drawn
* @private
*/
PIXI.RenderTexture.prototype.renderCanvas = function(displayObject, position, clear) PIXI.RenderTexture.prototype.renderCanvas = function(displayObject, position, clear)
{ {
var children = displayObject.children; var children = displayObject.children;
displayObject.worldTransform = PIXI.mat3.create(); displayObject.worldTransform = PIXI.mat3.create();
if(position) if(position)
@ -210,6 +235,7 @@ PIXI.RenderTexture.prototype.renderCanvas = function(displayObject, position, cl
displayObject.worldTransform[5] = position.y; displayObject.worldTransform[5] = position.y;
} }
for(var i=0,j=children.length; i<j; i++) for(var i=0,j=children.length; i<j; i++)
{ {
children[i].updateTransform(); children[i].updateTransform();
@ -221,6 +247,7 @@ PIXI.RenderTexture.prototype.renderCanvas = function(displayObject, position, cl
this.renderer.context.setTransform(1,0,0,1,0,0); this.renderer.context.setTransform(1,0,0,1,0,0);
PIXI.texturesToUpdate.push(this.baseTexture);
// PIXI.texturesToUpdate.push(this.baseTexture);
} }

View file

@ -6,46 +6,54 @@ PIXI.TextureCache = {};
PIXI.FrameCache = {}; PIXI.FrameCache = {};
/** /**
* A texture stores the information that represents an image or part of an image. It cannot be added to the display list directly. To do this use PIXI.Sprite. If no frame is provided then the whole image is used * A texture stores the information that represents an image or part of an image. It cannot be added
* to the display list directly. To do this use PIXI.Sprite. If no frame is provided then the whole image is used
*
* @class Texture * @class Texture
* @extends EventTarget * @uses EventTarget
* @constructor * @constructor
* @param baseTexture {BaseTexture} * @param baseTexture {BaseTexture} The base texture source to create the texture from
* @param frmae {Rectangle} * @param frmae {Rectangle} The rectangle frame of the texture to show
*/ */
PIXI.Texture = function(baseTexture, frame) PIXI.Texture = function(baseTexture, frame)
{ {
PIXI.EventTarget.call( this ); PIXI.EventTarget.call( this );
if(!frame) if(!frame)
{ {
this.noFrame = true; this.noFrame = true;
frame = new PIXI.Rectangle(0,0,1,1); frame = new PIXI.Rectangle(0,0,1,1);
} }
this.trim = new PIXI.Point();
if(baseTexture instanceof PIXI.Texture) if(baseTexture instanceof PIXI.Texture)
baseTexture = baseTexture.baseTexture; baseTexture = baseTexture.baseTexture;
/** /**
* The base texture of this texture * The base texture of this texture
*
* @property baseTexture * @property baseTexture
* @type BaseTexture * @type BaseTexture
*/ */
this.baseTexture = baseTexture; this.baseTexture = baseTexture;
/** /**
* The frame specifies the region of the base texture that this texture uses * The frame specifies the region of the base texture that this texture uses
*
* @property frame * @property frame
* @type #Rectangle * @type Rectangle
*/ */
this.frame = frame; this.frame = frame;
/**
* The trim point
*
* @property trim
* @type Point
*/
this.trim = new PIXI.Point();
this.scope = this; this.scope = this;
if(baseTexture.hasLoaded) if(baseTexture.hasLoaded)
{ {
if(this.noFrame)frame = new PIXI.Rectangle(0,0, baseTexture.width, baseTexture.height); if(this.noFrame)frame = new PIXI.Rectangle(0,0, baseTexture.width, baseTexture.height);
@ -62,19 +70,32 @@ PIXI.Texture = function(baseTexture, frame)
PIXI.Texture.constructor = PIXI.Texture; PIXI.Texture.constructor = PIXI.Texture;
/**
* Called when the base texture is loaded
*
* @method onBaseTextureLoaded
* @param event
* @private
*/
PIXI.Texture.prototype.onBaseTextureLoaded = function(event) PIXI.Texture.prototype.onBaseTextureLoaded = function(event)
{ {
var baseTexture = this.baseTexture; var baseTexture = this.baseTexture;
baseTexture.removeEventListener( 'loaded', this.onLoaded ); baseTexture.removeEventListener( 'loaded', this.onLoaded );
if(this.noFrame)this.frame = new PIXI.Rectangle(0,0, baseTexture.width, baseTexture.height); if(this.noFrame)this.frame = new PIXI.Rectangle(0,0, baseTexture.width, baseTexture.height);
this.noFrame = false; this.noFrame = false;
this.width = this.frame.width; this.width = this.frame.width;
this.height = this.frame.height; this.height = this.frame.height;
this.scope.dispatchEvent( { type: 'update', content: this } ); this.scope.dispatchEvent( { type: 'update', content: this } );
} }
/**
* Destroys this texture
*
* @method destroy
* @param destroyBase {Boolean} Whether to destroy the base texture as well
*/
PIXI.Texture.prototype.destroy = function(destroyBase) PIXI.Texture.prototype.destroy = function(destroyBase)
{ {
if(destroyBase)this.baseTexture.destroy(); if(destroyBase)this.baseTexture.destroy();
@ -82,33 +103,35 @@ PIXI.Texture.prototype.destroy = function(destroyBase)
/** /**
* Specifies the rectangle region of the baseTexture * Specifies the rectangle region of the baseTexture
*
* @method setFrame * @method setFrame
* @param frame {Rectangle} * @param frame {Rectangle} The frame of the texture to set it to
*/ */
PIXI.Texture.prototype.setFrame = function(frame) PIXI.Texture.prototype.setFrame = function(frame)
{ {
this.frame = frame; this.frame = frame;
this.width = frame.width; this.width = frame.width;
this.height = frame.height; this.height = frame.height;
if(frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) if(frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height)
{ {
throw new Error("Texture Error: frame does not fit inside the base Texture dimensions " + this); throw new Error("Texture Error: frame does not fit inside the base Texture dimensions " + this);
} }
this.updateFrame = true; this.updateFrame = true;
PIXI.Texture.frameUpdates.push(this); PIXI.Texture.frameUpdates.push(this);
//this.dispatchEvent( { type: 'update', content: this } ); //this.dispatchEvent( { type: 'update', content: this } );
} }
/** /**
*
* Helper function that returns a texture based on an image url * Helper function that returns a texture based on an image url
* If the image is not in the texture cache it will be created and loaded * If the image is not in the texture cache it will be created and loaded
*
* @static * @static
* @method fromImage * @method fromImage
* @param imageUrl {String} The image url of the texture * @param imageUrl {String} The image url of the texture
* @param crossorigin {Boolean} Whether requests should be treated as crossorigin
* @return Texture * @return Texture
*/ */
PIXI.Texture.fromImage = function(imageUrl, crossorigin) PIXI.Texture.fromImage = function(imageUrl, crossorigin)
@ -125,9 +148,10 @@ PIXI.Texture.fromImage = function(imageUrl, crossorigin)
} }
/** /**
*
* Helper function that returns a texture based on a frame id * Helper function that returns a texture based on a frame id
* If the frame id is not in the texture cache an error will be thrown * If the frame id is not in the texture cache an error will be thrown
*
* @static
* @method fromFrame * @method fromFrame
* @param frameId {String} The frame id of the texture * @param frameId {String} The frame id of the texture
* @return Texture * @return Texture
@ -140,9 +164,9 @@ PIXI.Texture.fromFrame = function(frameId)
} }
/** /**
*
* Helper function that returns a texture based on a canvas element * Helper function that returns a texture based on a canvas element
* If the canvas is not in the texture cache it will be created and loaded * If the canvas is not in the texture cache it will be created and loaded
*
* @static * @static
* @method fromCanvas * @method fromCanvas
* @param canvas {Canvas} The canvas element source of the texture * @param canvas {Canvas} The canvas element source of the texture
@ -156,8 +180,8 @@ PIXI.Texture.fromCanvas = function(canvas)
/** /**
* * Adds a texture to the textureCache.
* Adds a texture to the textureCache. *
* @static * @static
* @method addTextureToCache * @method addTextureToCache
* @param texture {Texture} * @param texture {Texture}
@ -169,8 +193,8 @@ PIXI.Texture.addTextureToCache = function(texture, id)
} }
/** /**
*
* Remove a texture from the textureCache. * Remove a texture from the textureCache.
*
* @static * @static
* @method removeTextureFromCache * @method removeTextureFromCache
* @param id {String} the id of the texture to be removed * @param id {String} the id of the texture to be removed

View file

@ -4,14 +4,15 @@
/** /**
* This helper function will automatically detect which renderer you should be using. * This helper function will automatically detect which renderer you should be using.
* WebGL is the preferred renderer as it is a lot fastest. If webGL is not supported by the browser then this function will return a canvas renderer * WebGL is the preferred renderer as it is a lot fastest. If webGL is not supported by
* the browser then this function will return a canvas renderer
*
* @method autoDetectRenderer * @method autoDetectRenderer
* @static * @static
* @param width {Number} the width of the renderers view * @param width {Number} the width of the renderers view
* @param height {Number} the height 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 view {Canvas} the canvas to use as a view, optional
* @param transparent {Boolean} the transparency of the render view, default false * @param transparent=false {Boolean} the transparency of the render view, default false
* @default false
*/ */
PIXI.autoDetectRenderer = function(width, height, view, transparent) PIXI.autoDetectRenderer = function(width, height, view, transparent)
{ {

View file

@ -3,6 +3,18 @@
* THankS mr DOob! * THankS mr DOob!
*/ */
/**
* Adds event emitter functionality to a class
*
* @class EventTarget
* @example
* function MyEmitter() {
* PIXI.EventTarget.call(this); //mixes in event target stuff
* }
*
* var em = new MyEmitter();
* em.emit({ type: 'eventName', data: 'some data' });
*/
PIXI.EventTarget = function () { PIXI.EventTarget = function () {
var listeners = {}; var listeners = {};

View file

@ -1,131 +1,149 @@
/*
/* PolyK library
PolyK library url: http://polyk.ivank.net
url: http://polyk.ivank.net Released under MIT licence.
Released under MIT licence.
Copyright (c) 2012 Ivan Kuckir
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
This is an amazing lib! Copyright (c) 2012 Ivan Kuckir
slightly modified by mat groves (matgroves.com); Permission is hereby granted, free of charge, to any person
* */ obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
This is an amazing lib!
PIXI.PolyK = {}; slightly modified by mat groves (matgroves.com);
*/
PIXI.PolyK = {};
/**
* Triangulates shapes for webGL graphic fills
*
* @method Triangulate
* @namespace PolyK
* @constructor
*/
PIXI.PolyK.Triangulate = function(p)
{
var sign = true;
PIXI.PolyK.Triangulate = function(p) var n = p.length>>1;
if(n<3) return [];
var tgs = [];
var avl = [];
for(var i=0; i<n; i++) avl.push(i);
var i = 0;
var al = n;
while(al > 3)
{ {
var sign = true; var i0 = avl[(i+0)%al];
var i1 = avl[(i+1)%al];
var i2 = avl[(i+2)%al];
var n = p.length>>1; var ax = p[2*i0], ay = p[2*i0+1];
if(n<3) return []; var bx = p[2*i1], by = p[2*i1+1];
var tgs = []; var cx = p[2*i2], cy = p[2*i2+1];
var avl = [];
for(var i=0; i<n; i++) avl.push(i);
var i = 0; var earFound = false;
var al = n; if(PIXI.PolyK._convex(ax, ay, bx, by, cx, cy, sign))
while(al > 3)
{ {
var i0 = avl[(i+0)%al]; earFound = true;
var i1 = avl[(i+1)%al]; for(var j=0; j<al; j++)
var i2 = avl[(i+2)%al];
var ax = p[2*i0], ay = p[2*i0+1];
var bx = p[2*i1], by = p[2*i1+1];
var cx = p[2*i2], cy = p[2*i2+1];
var earFound = false;
if(PIXI.PolyK._convex(ax, ay, bx, by, cx, cy, sign))
{ {
earFound = true; var vi = avl[j];
for(var j=0; j<al; j++) if(vi==i0 || vi==i1 || vi==i2) continue;
{ if(PIXI.PolyK._PointInTriangle(p[2*vi], p[2*vi+1], ax, ay, bx, by, cx, cy)) {earFound = false; break;}
var vi = avl[j];
if(vi==i0 || vi==i1 || vi==i2) continue;
if(PIXI.PolyK._PointInTriangle(p[2*vi], p[2*vi+1], ax, ay, bx, by, cx, cy)) {earFound = false; break;}
}
}
if(earFound)
{
tgs.push(i0, i1, i2);
avl.splice((i+1)%al, 1);
al--;
i = 0;
}
else if(i++ > 3*al)
{
// need to flip flip reverse it!
// reset!
if(sign)
{
var tgs = [];
avl = [];
for(var i=0; i<n; i++) avl.push(i);
i = 0;
al = n;
sign = false;
}
else
{
console.log("PIXI Warning: shape too complex to fill")
return [];
}
} }
} }
tgs.push(avl[0], avl[1], avl[2]); if(earFound)
return tgs; {
tgs.push(i0, i1, i2);
avl.splice((i+1)%al, 1);
al--;
i = 0;
}
else if(i++ > 3*al)
{
// need to flip flip reverse it!
// reset!
if(sign)
{
var tgs = [];
avl = [];
for(var i=0; i<n; i++) avl.push(i);
i = 0;
al = n;
sign = false;
}
else
{
console.log("PIXI Warning: shape too complex to fill")
return [];
}
}
} }
tgs.push(avl[0], avl[1], avl[2]);
PIXI.PolyK._PointInTriangle = function(px, py, ax, ay, bx, by, cx, cy) return tgs;
{ }
var v0x = cx-ax;
var v0y = cy-ay;
var v1x = bx-ax;
var v1y = by-ay;
var v2x = px-ax;
var v2y = py-ay;
var dot00 = v0x*v0x+v0y*v0y;
var dot01 = v0x*v1x+v0y*v1y;
var dot02 = v0x*v2x+v0y*v2y;
var dot11 = v1x*v1x+v1y*v1y;
var dot12 = v1x*v2x+v1y*v2y;
var invDenom = 1 / (dot00 * dot11 - dot01 * dot01);
var u = (dot11 * dot02 - dot01 * dot12) * invDenom;
var v = (dot00 * dot12 - dot01 * dot02) * invDenom;
// Check if point is in triangle /**
return (u >= 0) && (v >= 0) && (u + v < 1); * Checks if a point is within a triangle
} *
* @class _PointInTriangle
* @namespace PolyK
* @private
*/
PIXI.PolyK._PointInTriangle = function(px, py, ax, ay, bx, by, cx, cy)
{
var v0x = cx-ax;
var v0y = cy-ay;
var v1x = bx-ax;
var v1y = by-ay;
var v2x = px-ax;
var v2y = py-ay;
var dot00 = v0x*v0x+v0y*v0y;
var dot01 = v0x*v1x+v0y*v1y;
var dot02 = v0x*v2x+v0y*v2y;
var dot11 = v1x*v1x+v1y*v1y;
var dot12 = v1x*v2x+v1y*v2y;
var invDenom = 1 / (dot00 * dot11 - dot01 * dot01);
var u = (dot11 * dot02 - dot01 * dot12) * invDenom;
var v = (dot00 * dot12 - dot01 * dot02) * invDenom;
PIXI.PolyK._convex = function(ax, ay, bx, by, cx, cy, sign) // Check if point is in triangle
{ return (u >= 0) && (v >= 0) && (u + v < 1);
return ((ay-by)*(cx-bx) + (bx-ax)*(cy-by) >= 0) == sign; }
}
/**
* Checks if a shape is convex
*
* @class _convex
* @namespace PolyK
* @private
*/
PIXI.PolyK._convex = function(ax, ay, bx, by, cx, cy, sign)
{
return ((ay-by)*(cx-bx) + (bx-ax)*(cy-by) >= 0) == sign;
}

View file

@ -5,38 +5,55 @@
// MIT license // MIT license
/**
* A polyfill for requestAnimationFrame
*
* @method requestAnimationFrame
*/
/**
* A polyfill for cancelAnimationFrame
*
* @method cancelAnimationFrame
*/
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
var lastTime = 0; if (!window.requestAnimationFrame)
var vendors = ['ms', 'moz', 'webkit', 'o']; window.requestAnimationFrame = function(callback, element) {
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { var currTime = new Date().getTime();
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; var timeToCall = Math.max(0, 16 - (currTime - lastTime));
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] var id = window.setTimeout(function() { callback(currTime + timeToCall); },
|| window[vendors[x]+'CancelRequestAnimationFrame']; timeToCall);
} lastTime = currTime + timeToCall;
return id;
};
if (!window.requestAnimationFrame) if (!window.cancelAnimationFrame)
window.requestAnimationFrame = function(callback, element) { window.cancelAnimationFrame = function(id) {
var currTime = new Date().getTime(); clearTimeout(id);
var timeToCall = Math.max(0, 16 - (currTime - lastTime)); };
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
window.requestAnimFrame = window.requestAnimationFrame; window.requestAnimFrame = window.requestAnimationFrame;
/**
* Converts a hex color number to an [R, G, B] array
*
* @method HEXtoRGB
* @param hex {Number}
*/
function HEXtoRGB(hex) { function HEXtoRGB(hex) {
return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255]; return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255];
} }
/** /**
* Provides bind in a cross browser way. * A polyfill for Function.prototype.bind
*
* @method bind
*/ */
if (typeof Function.prototype.bind != 'function') { if (typeof Function.prototype.bind != 'function') {
Function.prototype.bind = (function () { Function.prototype.bind = (function () {
@ -61,6 +78,12 @@ if (typeof Function.prototype.bind != 'function') {
})(); })();
} }
/**
* A wrapper for ajax requests to be handled cross browser
*
* @class AjaxRequest
* @constructor
*/
var AjaxRequest = PIXI.AjaxRequest = function() var AjaxRequest = PIXI.AjaxRequest = function()
{ {
var activexmodes = ["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE var activexmodes = ["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE