RenderTexture now displays correctly in Canvas games.
Stage.display property added. A direct reference to the root Pixi Stage object (very useful for RenderTexture manipulation)
|
@ -62,6 +62,7 @@ New features:
|
||||||
* Tweens have a new event: onLoop.
|
* Tweens have a new event: onLoop.
|
||||||
* You can now load any binary file via the Loader: game.load.binary(key, url, callback) - the optional callback allows for post-load processing before entering the Cache.
|
* You can now load any binary file via the Loader: game.load.binary(key, url, callback) - the optional callback allows for post-load processing before entering the Cache.
|
||||||
* Group.set will let you deep set a new propery on a single child of the Group.
|
* Group.set will let you deep set a new propery on a single child of the Group.
|
||||||
|
* Stage.display property added. A direct reference to the root Pixi Stage object (very useful for RenderTexture manipulation)
|
||||||
|
|
||||||
|
|
||||||
New Examples:
|
New Examples:
|
||||||
|
@ -74,10 +75,12 @@ New Examples:
|
||||||
* Added touch joystick example showing how to use the clay.io virtual game controller (thanks gabehollombe)
|
* Added touch joystick example showing how to use the clay.io virtual game controller (thanks gabehollombe)
|
||||||
* Games - Matching Pairs by Patrick OReilly.
|
* Games - Matching Pairs by Patrick OReilly.
|
||||||
* Tweens - Example showing how to use the tween events, onStart, onLoop and onComplete.
|
* Tweens - Example showing how to use the tween events, onStart, onLoop and onComplete.
|
||||||
|
* Display - Pixi Render Texture. A Phaser conversion of the Pixi.js Render Texture example.
|
||||||
|
|
||||||
|
|
||||||
Updates:
|
Updates:
|
||||||
|
|
||||||
|
* Updated to latest Pixi.js dev branch build
|
||||||
* When a Sprite is destroyed any active filters are removed as well.
|
* When a Sprite is destroyed any active filters are removed as well.
|
||||||
* Updated Pixi.js so that removing filters now works correctly without breaking the display list.
|
* Updated Pixi.js so that removing filters now works correctly without breaking the display list.
|
||||||
* Phaser.Canvas.create updated to it can be given an ID as the 3rd parameter.
|
* Phaser.Canvas.create updated to it can be given an ID as the 3rd parameter.
|
||||||
|
@ -109,6 +112,7 @@ Bug Fixes:
|
||||||
* Fixed Pixi bug (#425) incorrect width property for multi-line BitmapText (thanks jcd-as)
|
* Fixed Pixi bug (#425) incorrect width property for multi-line BitmapText (thanks jcd-as)
|
||||||
* Tween.onStart is now called when the tween starts AFTER the delay value, if given (thanks stevenbouma)
|
* Tween.onStart is now called when the tween starts AFTER the delay value, if given (thanks stevenbouma)
|
||||||
* Sprites that are fixedToCamera can now be input dragged regardless of world position (thanks RafaelOliveira)
|
* Sprites that are fixedToCamera can now be input dragged regardless of world position (thanks RafaelOliveira)
|
||||||
|
* RenderTexture now displays correctly in Canvas games.
|
||||||
|
|
||||||
|
|
||||||
You can view the Change Log for all previous versions at https://github.com/photonstorm/phaser/changelog.md
|
You can view the Change Log for all previous versions at https://github.com/photonstorm/phaser/changelog.md
|
||||||
|
|
|
@ -160,6 +160,10 @@
|
||||||
"file": "graphics.js",
|
"file": "graphics.js",
|
||||||
"title": "graphics"
|
"title": "graphics"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"file": "pixi+render+texture.js",
|
||||||
|
"title": "pixi render texture"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"file": "render+crisp.js",
|
"file": "render+crisp.js",
|
||||||
"title": "render crisp"
|
"title": "render crisp"
|
||||||
|
|
BIN
examples/assets/audio/protracker/global_trash_3_v2.mod
Normal file
BIN
examples/assets/audio/protracker/sd-ingame1.mod
Normal file
BIN
examples/assets/sprites/spinObj_01.png
Normal file
After Width: | Height: | Size: 35 KiB |
BIN
examples/assets/sprites/spinObj_02.png
Normal file
After Width: | Height: | Size: 37 KiB |
BIN
examples/assets/sprites/spinObj_03.png
Normal file
After Width: | Height: | Size: 36 KiB |
BIN
examples/assets/sprites/spinObj_04.png
Normal file
After Width: | Height: | Size: 34 KiB |
BIN
examples/assets/sprites/spinObj_05.png
Normal file
After Width: | Height: | Size: 35 KiB |
BIN
examples/assets/sprites/spinObj_06.png
Normal file
After Width: | Height: | Size: 36 KiB |
BIN
examples/assets/sprites/spinObj_07.png
Normal file
After Width: | Height: | Size: 35 KiB |
BIN
examples/assets/sprites/spinObj_08.png
Normal file
After Width: | Height: | Size: 33 KiB |
78
examples/display/pixi render texture.js
Normal file
|
@ -0,0 +1,78 @@
|
||||||
|
// Original version by @author Mat Groves http://matgroves.com/ @Doormat23 from the Pixi.js examples
|
||||||
|
// Ported to Phaser by Richard Davey
|
||||||
|
|
||||||
|
var game = new Phaser.Game(800, 600, Phaser.WEBGL, 'phaser-example', { preload: preload, create: create, update: update });
|
||||||
|
|
||||||
|
function preload() {
|
||||||
|
|
||||||
|
game.load.image('spin1', 'assets/sprites/spinObj_01.png');
|
||||||
|
game.load.image('spin2', 'assets/sprites/spinObj_02.png');
|
||||||
|
game.load.image('spin3', 'assets/sprites/spinObj_03.png');
|
||||||
|
game.load.image('spin4', 'assets/sprites/spinObj_04.png');
|
||||||
|
game.load.image('spin5', 'assets/sprites/spinObj_05.png');
|
||||||
|
game.load.image('spin6', 'assets/sprites/spinObj_06.png');
|
||||||
|
game.load.image('spin7', 'assets/sprites/spinObj_07.png');
|
||||||
|
game.load.image('spin8', 'assets/sprites/spinObj_08.png');
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
var renderTexture;
|
||||||
|
var renderTexture2;
|
||||||
|
var currentTexture;
|
||||||
|
var outputSprite;
|
||||||
|
var stuffContainer;
|
||||||
|
var count = 0;
|
||||||
|
|
||||||
|
function create() {
|
||||||
|
|
||||||
|
// create two render textures.. these dynamic textures will be used to draw the scene into itself
|
||||||
|
renderTexture = game.add.renderTexture('texture1', 800, 600);
|
||||||
|
renderTexture2 = game.add.renderTexture('textur2e', 800, 600);
|
||||||
|
currentTexture = renderTexture;
|
||||||
|
|
||||||
|
// create a new sprite that uses the render texture we created above
|
||||||
|
outputSprite = game.add.sprite(400, 300, currentTexture);
|
||||||
|
|
||||||
|
// align the sprite
|
||||||
|
outputSprite.anchor.x = 0.5;
|
||||||
|
outputSprite.anchor.y = 0.5;
|
||||||
|
|
||||||
|
stuffContainer = game.add.group();
|
||||||
|
stuffContainer.x = 800/2;
|
||||||
|
stuffContainer.y = 600/2
|
||||||
|
|
||||||
|
// now create some items and randomly position them in the stuff container
|
||||||
|
for (var i = 0; i < 20; i++)
|
||||||
|
{
|
||||||
|
var item = stuffContainer.create(Math.random() * 400 - 200, Math.random() * 400 - 200, game.rnd.pick(game.cache.getImageKeys()));
|
||||||
|
item.anchor.setTo(0.5, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
// used for spinning!
|
||||||
|
count = 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
|
||||||
|
stuffContainer.addAll('rotation', 0.1);
|
||||||
|
|
||||||
|
count += 0.01;
|
||||||
|
|
||||||
|
// swap the buffers..
|
||||||
|
var temp = renderTexture;
|
||||||
|
renderTexture = renderTexture2;
|
||||||
|
renderTexture2 = temp;
|
||||||
|
|
||||||
|
// set the new texture
|
||||||
|
outputSprite.setTexture(renderTexture);
|
||||||
|
|
||||||
|
// twist this up!
|
||||||
|
stuffContainer.rotation -= 0.01
|
||||||
|
outputSprite.scale.x = outputSprite.scale.y = 1 + Math.sin(count) * 0.2;
|
||||||
|
|
||||||
|
// render the stage to the texture
|
||||||
|
// the true clears the texture before content is rendered
|
||||||
|
renderTexture2.renderXY(game.stage.display, 0, 0, true);
|
||||||
|
|
||||||
|
}
|
|
@ -8,6 +8,11 @@ function preload() {
|
||||||
game.load.binary('macrocosm', 'assets/audio/protracker/macrocosm.mod', modLoaded, this);
|
game.load.binary('macrocosm', 'assets/audio/protracker/macrocosm.mod', modLoaded, this);
|
||||||
game.load.binary('enigma', 'assets/audio/protracker/enigma.mod', modLoaded, this);
|
game.load.binary('enigma', 'assets/audio/protracker/enigma.mod', modLoaded, this);
|
||||||
game.load.binary('elysium', 'assets/audio/protracker/elysium.mod', modLoaded, this);
|
game.load.binary('elysium', 'assets/audio/protracker/elysium.mod', modLoaded, this);
|
||||||
|
game.load.binary('stardust', 'assets/audio/protracker/sd-ingame1.mod', modLoaded, this);
|
||||||
|
game.load.binary('globaltrash', 'assets/audio/protracker/global_trash_3_v2.mod', modLoaded, this);
|
||||||
|
game.load.image('vu1', 'assets/sprites/flectrum.png');
|
||||||
|
game.load.image('vu2', 'assets/sprites/flectrum2.png');
|
||||||
|
game.load.image('vu3', 'assets/sprites/healthbar.png');
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -21,35 +26,148 @@ function modLoaded(key, data) {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var sprite;
|
var vu1;
|
||||||
|
var vu2;
|
||||||
|
var vu3;
|
||||||
|
var vu4;
|
||||||
|
|
||||||
var modsample = new Array();
|
var modsample = new Array();
|
||||||
var module;
|
var module;
|
||||||
|
|
||||||
|
var sample1;
|
||||||
|
var sample2;
|
||||||
|
var sample3;
|
||||||
|
var sample4;
|
||||||
|
var sampleName1;
|
||||||
|
var sampleName2;
|
||||||
|
var sampleName3;
|
||||||
|
var sampleName4;
|
||||||
|
|
||||||
|
var r1;
|
||||||
|
var r2;
|
||||||
|
var r3;
|
||||||
|
var r4;
|
||||||
|
|
||||||
function create() {
|
function create() {
|
||||||
|
|
||||||
|
// vu1 = game.add.sprite(400, 100, 'vu3');
|
||||||
|
// vu2 = game.add.sprite(400, 150, 'vu3');
|
||||||
|
// vu3 = game.add.sprite(400, 200, 'vu3');
|
||||||
|
// vu4 = game.add.sprite(400, 250, 'vu3');
|
||||||
|
|
||||||
module = new Protracker();
|
module = new Protracker();
|
||||||
module.buffer = game.cache.getBinary('impulse');
|
module.buffer = game.cache.getBinary('globaltrash');
|
||||||
module.parse();
|
module.parse();
|
||||||
module.play();
|
module.play();
|
||||||
|
|
||||||
|
r1 = new Phaser.Rectangle(400, 100, 100, 32);
|
||||||
|
r2 = new Phaser.Rectangle(400, 150, 100, 32);
|
||||||
|
r3 = new Phaser.Rectangle(400, 200, 100, 32);
|
||||||
|
r4 = new Phaser.Rectangle(400, 250, 100, 32);
|
||||||
|
|
||||||
|
// console.log(module.sample);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function update() {
|
function update() {
|
||||||
|
|
||||||
if (module.channel[0].noteon) {sam1=module.channel[0].sample; modsamples=1;}else{modsamples=0;}
|
sampleName1 = '';
|
||||||
if (module.channel[1].noteon) {sam2=module.channel[1].sample; modsamples=1;}else{modsamples=0;}
|
sampleName2 = '';
|
||||||
if (module.channel[2].noteon) {sam3=module.channel[2].sample; modsamples=1;}else{modsamples=0;}
|
sampleName3 = '';
|
||||||
if (module.channel[3].noteon) {sam4=module.channel[3].sample; modsamples=1;}else{modsamples=0;}
|
sampleName4 = '';
|
||||||
|
|
||||||
var posi=module.position;
|
sample1 = module.channel[0].sample;
|
||||||
var patt=module.row;
|
sample2 = module.channel[1].sample;
|
||||||
var bpm=module.bpm;
|
sample3 = module.channel[2].sample;
|
||||||
var spd=module.speed;
|
sample4 = module.channel[3].sample;
|
||||||
var modname=module.title;
|
|
||||||
var modauth=module.signature;
|
/*
|
||||||
|
module.sample = array of Objects containing:
|
||||||
|
|
||||||
|
data (Float32Array)
|
||||||
|
finetime
|
||||||
|
length (ms? bytes?)
|
||||||
|
looplength
|
||||||
|
loopstart
|
||||||
|
name
|
||||||
|
volume
|
||||||
|
|
||||||
|
arpeggio: 0
|
||||||
|
command: 0
|
||||||
|
data: 0
|
||||||
|
flags: 0
|
||||||
|
note: 22
|
||||||
|
noteon: 1
|
||||||
|
period: 240
|
||||||
|
sample: 11
|
||||||
|
samplepos: 314.3411880952386
|
||||||
|
samplespeed: 0.335118537414966
|
||||||
|
semitone: 14
|
||||||
|
slidespeed: 0
|
||||||
|
slideto: 214
|
||||||
|
slidetospeed: 0
|
||||||
|
vibratodepth: 0
|
||||||
|
vibratopos: 0
|
||||||
|
vibratospeed: 0
|
||||||
|
vibratowave: 0
|
||||||
|
voiceperiod: 240
|
||||||
|
volume: 64
|
||||||
|
*/
|
||||||
|
|
||||||
|
if (module.sample[sample1])
|
||||||
|
{
|
||||||
|
sampleName1 = module.sample[sample1].name;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (module.sample[sample2])
|
||||||
|
{
|
||||||
|
sampleName2 = module.sample[sample2].name;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (module.sample[sample3])
|
||||||
|
{
|
||||||
|
sampleName3 = module.sample[sample3].name;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (module.sample[sample4])
|
||||||
|
{
|
||||||
|
sampleName4 = module.sample[sample4].name;
|
||||||
|
}
|
||||||
|
|
||||||
|
// vu1.width = Math.round(module.vu[0] * 400);
|
||||||
|
// vu2.width = Math.round(module.vu[1] * 400);
|
||||||
|
// vu3.width = Math.round(module.vu[2] * 400);
|
||||||
|
// vu4.width = Math.round(module.vu[3] * 400);
|
||||||
|
|
||||||
|
r1.width = Math.round(module.vu[0] * 500);
|
||||||
|
r2.width = Math.round(module.vu[1] * 500);
|
||||||
|
r3.width = Math.round(module.vu[2] * 500);
|
||||||
|
r4.width = Math.round(module.vu[3] * 500);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function render() {
|
function render() {
|
||||||
|
|
||||||
|
game.debug.renderText('Sample ' + sample1 + ' : ' + sampleName1, 16, 32);
|
||||||
|
game.debug.renderText('Sample ' + sample2 + ' : ' + sampleName2, 16, 64);
|
||||||
|
game.debug.renderText('Sample ' + sample3 + ' : ' + sampleName3, 16, 96);
|
||||||
|
game.debug.renderText('Sample ' + sample4 + ' : ' + sampleName4, 16, 128);
|
||||||
|
|
||||||
|
game.debug.renderText('Position: ' + module.position, 16, 160);
|
||||||
|
game.debug.renderText('Pattern: ' + module.row, 16, 192);
|
||||||
|
game.debug.renderText('BPM: ' + module.bpm, 16, 224);
|
||||||
|
game.debug.renderText('Speed: ' + module.speed, 16, 256);
|
||||||
|
game.debug.renderText('Name: ' + module.title, 16, 288);
|
||||||
|
game.debug.renderText('Author: ' + module.signature, 16, 320);
|
||||||
|
|
||||||
|
game.debug.renderText('vu1: ' + module.vu[0], 16, 352);
|
||||||
|
game.debug.renderText('vu2: ' + module.vu[1], 16, 384);
|
||||||
|
game.debug.renderText('vu3: ' + module.vu[2], 16, 416);
|
||||||
|
game.debug.renderText('vu4: ' + module.vu[3], 16, 448);
|
||||||
|
|
||||||
|
game.debug.renderRectangle(r1);
|
||||||
|
game.debug.renderRectangle(r2);
|
||||||
|
game.debug.renderRectangle(r3);
|
||||||
|
game.debug.renderRectangle(r4);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,38 +1,76 @@
|
||||||
|
|
||||||
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
|
var game = new Phaser.Game(800, 600, Phaser.WEBGL, 'phaser-example', { preload: preload, create: create, update: update });
|
||||||
|
|
||||||
function preload() {
|
function preload() {
|
||||||
|
|
||||||
game.load.spritesheet('veggies', 'assets/sprites/fruitnveg32wh37.png', 32, 32);
|
game.load.image('spin1', 'assets/sprites/spinObj_01.png');
|
||||||
|
game.load.image('spin2', 'assets/sprites/spinObj_02.png');
|
||||||
|
game.load.image('spin3', 'assets/sprites/spinObj_03.png');
|
||||||
|
game.load.image('spin4', 'assets/sprites/spinObj_04.png');
|
||||||
|
game.load.image('spin5', 'assets/sprites/spinObj_05.png');
|
||||||
|
game.load.image('spin6', 'assets/sprites/spinObj_06.png');
|
||||||
|
game.load.image('spin7', 'assets/sprites/spinObj_07.png');
|
||||||
|
game.load.image('spin8', 'assets/sprites/spinObj_08.png');
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var group;
|
var renderTexture;
|
||||||
var texture;
|
var renderTexture2;
|
||||||
|
var currentTexture;
|
||||||
|
var outputSprite;
|
||||||
|
var stuffContainer;
|
||||||
|
var count = 0;
|
||||||
|
|
||||||
function create() {
|
function create() {
|
||||||
|
|
||||||
group = game.add.group();
|
// create two render textures.. these dynamic textures will be used to draw the scene into itself
|
||||||
group.create(0, 0, 'veggies', 0);
|
renderTexture = game.add.renderTexture('texture1', 800, 600);
|
||||||
group.create(32, 0, 'veggies', 1);
|
renderTexture2 = game.add.renderTexture('textur2e', 800, 600);
|
||||||
group.create(0, 32, 'veggies', 2);
|
currentTexture = renderTexture;
|
||||||
group.create(32, 32, 'veggies', 3);
|
|
||||||
group.visible = false;
|
|
||||||
|
|
||||||
texture = game.add.renderTexture('texture', 800, 600);
|
// create a new sprite that uses the render texture we created above
|
||||||
|
outputSprite = game.add.sprite(400, 300, currentTexture);
|
||||||
|
|
||||||
game.add.sprite(0, 0, texture);
|
// align the sprite
|
||||||
|
outputSprite.anchor.x = 0.5;
|
||||||
|
outputSprite.anchor.y = 0.5;
|
||||||
|
|
||||||
|
stuffContainer = game.add.group();
|
||||||
|
stuffContainer.x = 800/2;
|
||||||
|
stuffContainer.y = 600/2
|
||||||
|
|
||||||
|
// now create some items and randomly position them in the stuff container
|
||||||
|
for (var i = 0; i < 20; i++)
|
||||||
|
{
|
||||||
|
var item = stuffContainer.create(Math.random() * 400 - 200, Math.random() * 400 - 200, game.rnd.pick(game.cache.getImageKeys()));
|
||||||
|
item.anchor.setTo(0.5, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
// used for spinning!
|
||||||
|
count = 0;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function update() {
|
function update() {
|
||||||
|
|
||||||
var clear = false;
|
stuffContainer.addAll('rotation', 0.1);
|
||||||
|
|
||||||
for (var i = 0; i < 60; i++)
|
count += 0.01;
|
||||||
{
|
|
||||||
clear = (i == 0);
|
// swap the buffers..
|
||||||
texture.renderXY(group, game.world.randomX, game.world.randomY, clear);
|
var temp = renderTexture;
|
||||||
}
|
renderTexture = renderTexture2;
|
||||||
|
renderTexture2 = temp;
|
||||||
|
|
||||||
|
// set the new texture
|
||||||
|
outputSprite.setTexture(renderTexture);
|
||||||
|
|
||||||
|
// twist this up!
|
||||||
|
stuffContainer.rotation -= 0.01
|
||||||
|
outputSprite.scale.x = outputSprite.scale.y = 1 + Math.sin(count) * 0.2;
|
||||||
|
|
||||||
|
// render the stage to the texture
|
||||||
|
// the true clears the texture before content is rendered
|
||||||
|
renderTexture2.renderXY(game.stage.display, 0, 0, true);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -65,7 +65,7 @@ function create() {
|
||||||
layer.resizeWorld();
|
layer.resizeWorld();
|
||||||
|
|
||||||
//coins =
|
//coins =
|
||||||
map.createFromObjects(34, 'coin', 0)
|
map.createFromObjects('Object Layer 1', 34, 'coin', 0);
|
||||||
|
|
||||||
// layer2 = game.add.tilemapLayer(0, 0, 400, 600, null, map, 0);
|
// layer2 = game.add.tilemapLayer(0, 0, 400, 600, null, map, 0);
|
||||||
// layer.cameraOffset.x = 400;
|
// layer.cameraOffset.x = 400;
|
||||||
|
|
|
@ -77,6 +77,13 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
|
||||||
this.context.transform(1, 0, 0, 1, displayObject.texture.trim.x, displayObject.texture.trim.y);
|
this.context.transform(1, 0, 0, 1, displayObject.texture.trim.x, displayObject.texture.trim.y);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//if smoothingEnabled is supported and we need to change the smoothing property for this texture
|
||||||
|
if (this.smoothProperty && this.scaleMode !== displayObject.texture.baseTexture.scaleMode)
|
||||||
|
{
|
||||||
|
this.scaleMode = displayObject.texture.baseTexture.scaleMode;
|
||||||
|
this.context[this.smoothProperty] = (this.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR);
|
||||||
|
}
|
||||||
|
|
||||||
this.context.drawImage(
|
this.context.drawImage(
|
||||||
displayObject.texture.baseTexture.source,
|
displayObject.texture.baseTexture.source,
|
||||||
displayObject.texture.frame.x,
|
displayObject.texture.frame.x,
|
||||||
|
|
|
@ -47,6 +47,11 @@ Phaser.Stage = function (game, width, height) {
|
||||||
this._stage.name = '_stage_root';
|
this._stage.name = '_stage_root';
|
||||||
this._stage.interactive = false;
|
this._stage.interactive = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @property {PIXI.Stage} display - The Pixi Stage which is hooked to the renderer.
|
||||||
|
*/
|
||||||
|
this.display = this._stage;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @property {number} scaleMode - The current scaleMode.
|
* @property {number} scaleMode - The current scaleMode.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -4,4 +4,4 @@
|
||||||
|
|
||||||
(function(){
|
(function(){
|
||||||
|
|
||||||
var root = this;
|
var root = this;
|
||||||
|
|
|
@ -33,7 +33,7 @@ PIXI.Circle = function(x, y, radius)
|
||||||
* @default 0
|
* @default 0
|
||||||
*/
|
*/
|
||||||
this.radius = radius || 0;
|
this.radius = radius || 0;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a clone of this Circle instance
|
* Creates a clone of this Circle instance
|
||||||
|
@ -44,7 +44,7 @@ PIXI.Circle = function(x, y, radius)
|
||||||
PIXI.Circle.prototype.clone = function()
|
PIXI.Circle.prototype.clone = function()
|
||||||
{
|
{
|
||||||
return new PIXI.Circle(this.x, this.y, this.radius);
|
return new PIXI.Circle(this.x, this.y, this.radius);
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Checks if the x, and y coords passed to this function are contained within this circle
|
* Checks if the x, and y coords passed to this function are contained within this circle
|
||||||
|
@ -67,7 +67,7 @@ PIXI.Circle.prototype.contains = function(x, y)
|
||||||
dy *= dy;
|
dy *= dy;
|
||||||
|
|
||||||
return (dx + dy <= r2);
|
return (dx + dy <= r2);
|
||||||
}
|
};
|
||||||
|
|
||||||
// constructor
|
// constructor
|
||||||
PIXI.Circle.prototype.constructor = PIXI.Circle;
|
PIXI.Circle.prototype.constructor = PIXI.Circle;
|
||||||
|
|
|
@ -41,7 +41,7 @@ PIXI.Ellipse = function(x, y, width, height)
|
||||||
* @default 0
|
* @default 0
|
||||||
*/
|
*/
|
||||||
this.height = height || 0;
|
this.height = height || 0;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a clone of this Ellipse instance
|
* Creates a clone of this Ellipse instance
|
||||||
|
@ -52,7 +52,7 @@ PIXI.Ellipse = function(x, y, width, height)
|
||||||
PIXI.Ellipse.prototype.clone = function()
|
PIXI.Ellipse.prototype.clone = function()
|
||||||
{
|
{
|
||||||
return new PIXI.Ellipse(this.x, this.y, this.width, this.height);
|
return new PIXI.Ellipse(this.x, this.y, this.width, this.height);
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Checks if the x, and y coords passed to this function are contained within this ellipse
|
* Checks if the x, and y coords passed to this function are contained within this ellipse
|
||||||
|
@ -76,12 +76,12 @@ PIXI.Ellipse.prototype.contains = function(x, y)
|
||||||
normy *= normy;
|
normy *= normy;
|
||||||
|
|
||||||
return (normx + normy < 0.25);
|
return (normx + normy < 0.25);
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.Ellipse.getBounds = function()
|
PIXI.Ellipse.prototype.getBounds = function()
|
||||||
{
|
{
|
||||||
return new PIXI.Rectangle(this.x, this.y, this.width, this.height);
|
return new PIXI.Rectangle(this.x, this.y, this.width, this.height);
|
||||||
}
|
};
|
||||||
|
|
||||||
// constructor
|
// constructor
|
||||||
PIXI.Ellipse.prototype.constructor = PIXI.Ellipse;
|
PIXI.Ellipse.prototype.constructor = PIXI.Ellipse;
|
||||||
|
|
|
@ -16,112 +16,112 @@ PIXI.mat3 = {};
|
||||||
|
|
||||||
PIXI.mat3.create = function()
|
PIXI.mat3.create = function()
|
||||||
{
|
{
|
||||||
var matrix = new PIXI.Matrix(9);
|
var matrix = new PIXI.Matrix(9);
|
||||||
|
|
||||||
matrix[0] = 1;
|
matrix[0] = 1;
|
||||||
matrix[1] = 0;
|
matrix[1] = 0;
|
||||||
matrix[2] = 0;
|
matrix[2] = 0;
|
||||||
matrix[3] = 0;
|
matrix[3] = 0;
|
||||||
matrix[4] = 1;
|
matrix[4] = 1;
|
||||||
matrix[5] = 0;
|
matrix[5] = 0;
|
||||||
matrix[6] = 0;
|
matrix[6] = 0;
|
||||||
matrix[7] = 0;
|
matrix[7] = 0;
|
||||||
matrix[8] = 1;
|
matrix[8] = 1;
|
||||||
|
|
||||||
return matrix;
|
return matrix;
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
||||||
PIXI.mat3.identity = function(matrix)
|
PIXI.mat3.identity = function(matrix)
|
||||||
{
|
{
|
||||||
matrix[0] = 1;
|
matrix[0] = 1;
|
||||||
matrix[1] = 0;
|
matrix[1] = 0;
|
||||||
matrix[2] = 0;
|
matrix[2] = 0;
|
||||||
matrix[3] = 0;
|
matrix[3] = 0;
|
||||||
matrix[4] = 1;
|
matrix[4] = 1;
|
||||||
matrix[5] = 0;
|
matrix[5] = 0;
|
||||||
matrix[6] = 0;
|
matrix[6] = 0;
|
||||||
matrix[7] = 0;
|
matrix[7] = 0;
|
||||||
matrix[8] = 1;
|
matrix[8] = 1;
|
||||||
|
|
||||||
return matrix;
|
return matrix;
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
||||||
PIXI.mat4 = {};
|
PIXI.mat4 = {};
|
||||||
|
|
||||||
PIXI.mat4.create = function()
|
PIXI.mat4.create = function()
|
||||||
{
|
{
|
||||||
var matrix = new PIXI.Matrix(16);
|
var matrix = new PIXI.Matrix(16);
|
||||||
|
|
||||||
matrix[0] = 1;
|
matrix[0] = 1;
|
||||||
matrix[1] = 0;
|
matrix[1] = 0;
|
||||||
matrix[2] = 0;
|
matrix[2] = 0;
|
||||||
matrix[3] = 0;
|
matrix[3] = 0;
|
||||||
matrix[4] = 0;
|
matrix[4] = 0;
|
||||||
matrix[5] = 1;
|
matrix[5] = 1;
|
||||||
matrix[6] = 0;
|
matrix[6] = 0;
|
||||||
matrix[7] = 0;
|
matrix[7] = 0;
|
||||||
matrix[8] = 0;
|
matrix[8] = 0;
|
||||||
matrix[9] = 0;
|
matrix[9] = 0;
|
||||||
matrix[10] = 1;
|
matrix[10] = 1;
|
||||||
matrix[11] = 0;
|
matrix[11] = 0;
|
||||||
matrix[12] = 0;
|
matrix[12] = 0;
|
||||||
matrix[13] = 0;
|
matrix[13] = 0;
|
||||||
matrix[14] = 0;
|
matrix[14] = 0;
|
||||||
matrix[15] = 1;
|
matrix[15] = 1;
|
||||||
|
|
||||||
return matrix;
|
return matrix;
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.mat3.multiply = function (mat, mat2, dest)
|
PIXI.mat3.multiply = function (mat, mat2, dest)
|
||||||
{
|
{
|
||||||
if (!dest) { dest = mat; }
|
if (!dest) { dest = mat; }
|
||||||
|
|
||||||
// Cache the matrix values (makes for huge speed increases!)
|
// Cache the matrix values (makes for huge speed increases!)
|
||||||
var a00 = mat[0], a01 = mat[1], a02 = mat[2],
|
var a00 = mat[0], a01 = mat[1], a02 = mat[2],
|
||||||
a10 = mat[3], a11 = mat[4], a12 = mat[5],
|
a10 = mat[3], a11 = mat[4], a12 = mat[5],
|
||||||
a20 = mat[6], a21 = mat[7], a22 = mat[8],
|
a20 = mat[6], a21 = mat[7], a22 = mat[8],
|
||||||
|
|
||||||
b00 = mat2[0], b01 = mat2[1], b02 = mat2[2],
|
b00 = mat2[0], b01 = mat2[1], b02 = mat2[2],
|
||||||
b10 = mat2[3], b11 = mat2[4], b12 = mat2[5],
|
b10 = mat2[3], b11 = mat2[4], b12 = mat2[5],
|
||||||
b20 = mat2[6], b21 = mat2[7], b22 = mat2[8];
|
b20 = mat2[6], b21 = mat2[7], b22 = mat2[8];
|
||||||
|
|
||||||
dest[0] = b00 * a00 + b01 * a10 + b02 * a20;
|
dest[0] = b00 * a00 + b01 * a10 + b02 * a20;
|
||||||
dest[1] = b00 * a01 + b01 * a11 + b02 * a21;
|
dest[1] = b00 * a01 + b01 * a11 + b02 * a21;
|
||||||
dest[2] = b00 * a02 + b01 * a12 + b02 * a22;
|
dest[2] = b00 * a02 + b01 * a12 + b02 * a22;
|
||||||
|
|
||||||
dest[3] = b10 * a00 + b11 * a10 + b12 * a20;
|
dest[3] = b10 * a00 + b11 * a10 + b12 * a20;
|
||||||
dest[4] = b10 * a01 + b11 * a11 + b12 * a21;
|
dest[4] = b10 * a01 + b11 * a11 + b12 * a21;
|
||||||
dest[5] = b10 * a02 + b11 * a12 + b12 * a22;
|
dest[5] = b10 * a02 + b11 * a12 + b12 * a22;
|
||||||
|
|
||||||
dest[6] = b20 * a00 + b21 * a10 + b22 * a20;
|
dest[6] = b20 * a00 + b21 * a10 + b22 * a20;
|
||||||
dest[7] = b20 * a01 + b21 * a11 + b22 * a21;
|
dest[7] = b20 * a01 + b21 * a11 + b22 * a21;
|
||||||
dest[8] = b20 * a02 + b21 * a12 + b22 * a22;
|
dest[8] = b20 * a02 + b21 * a12 + b22 * a22;
|
||||||
|
|
||||||
return dest;
|
return dest;
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.mat3.clone = function(mat)
|
PIXI.mat3.clone = function(mat)
|
||||||
{
|
{
|
||||||
var matrix = new PIXI.Matrix(9);
|
var matrix = new PIXI.Matrix(9);
|
||||||
|
|
||||||
matrix[0] = mat[0];
|
matrix[0] = mat[0];
|
||||||
matrix[1] = mat[1];
|
matrix[1] = mat[1];
|
||||||
matrix[2] = mat[2];
|
matrix[2] = mat[2];
|
||||||
matrix[3] = mat[3];
|
matrix[3] = mat[3];
|
||||||
matrix[4] = mat[4];
|
matrix[4] = mat[4];
|
||||||
matrix[5] = mat[5];
|
matrix[5] = mat[5];
|
||||||
matrix[6] = mat[6];
|
matrix[6] = mat[6];
|
||||||
matrix[7] = mat[7];
|
matrix[7] = mat[7];
|
||||||
matrix[8] = mat[8];
|
matrix[8] = mat[8];
|
||||||
|
|
||||||
return matrix;
|
return matrix;
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.mat3.transpose = function (mat, dest)
|
PIXI.mat3.transpose = function (mat, dest)
|
||||||
{
|
{
|
||||||
// If we are transposing ourselves we can skip a few steps but have to cache some values
|
// If we are transposing ourselves we can skip a few steps but have to cache some values
|
||||||
if (!dest || mat === dest) {
|
if (!dest || mat === dest) {
|
||||||
var a01 = mat[1], a02 = mat[2],
|
var a01 = mat[1], a02 = mat[2],
|
||||||
a12 = mat[5];
|
a12 = mat[5];
|
||||||
|
@ -145,34 +145,34 @@ PIXI.mat3.transpose = function (mat, dest)
|
||||||
dest[7] = mat[5];
|
dest[7] = mat[5];
|
||||||
dest[8] = mat[8];
|
dest[8] = mat[8];
|
||||||
return dest;
|
return dest;
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.mat3.toMat4 = function (mat, dest)
|
PIXI.mat3.toMat4 = function (mat, dest)
|
||||||
{
|
{
|
||||||
if (!dest) { dest = PIXI.mat4.create(); }
|
if (!dest) { dest = PIXI.mat4.create(); }
|
||||||
|
|
||||||
dest[15] = 1;
|
dest[15] = 1;
|
||||||
dest[14] = 0;
|
dest[14] = 0;
|
||||||
dest[13] = 0;
|
dest[13] = 0;
|
||||||
dest[12] = 0;
|
dest[12] = 0;
|
||||||
|
|
||||||
dest[11] = 0;
|
dest[11] = 0;
|
||||||
dest[10] = mat[8];
|
dest[10] = mat[8];
|
||||||
dest[9] = mat[7];
|
dest[9] = mat[7];
|
||||||
dest[8] = mat[6];
|
dest[8] = mat[6];
|
||||||
|
|
||||||
dest[7] = 0;
|
dest[7] = 0;
|
||||||
dest[6] = mat[5];
|
dest[6] = mat[5];
|
||||||
dest[5] = mat[4];
|
dest[5] = mat[4];
|
||||||
dest[4] = mat[3];
|
dest[4] = mat[3];
|
||||||
|
|
||||||
dest[3] = 0;
|
dest[3] = 0;
|
||||||
dest[2] = mat[2];
|
dest[2] = mat[2];
|
||||||
dest[1] = mat[1];
|
dest[1] = mat[1];
|
||||||
dest[0] = mat[0];
|
dest[0] = mat[0];
|
||||||
|
|
||||||
return dest;
|
return dest;
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
||||||
/////
|
/////
|
||||||
|
@ -180,82 +180,82 @@ PIXI.mat3.toMat4 = function (mat, dest)
|
||||||
|
|
||||||
PIXI.mat4.create = function()
|
PIXI.mat4.create = function()
|
||||||
{
|
{
|
||||||
var matrix = new PIXI.Matrix(16);
|
var matrix = new PIXI.Matrix(16);
|
||||||
|
|
||||||
matrix[0] = 1;
|
matrix[0] = 1;
|
||||||
matrix[1] = 0;
|
matrix[1] = 0;
|
||||||
matrix[2] = 0;
|
matrix[2] = 0;
|
||||||
matrix[3] = 0;
|
matrix[3] = 0;
|
||||||
matrix[4] = 0;
|
matrix[4] = 0;
|
||||||
matrix[5] = 1;
|
matrix[5] = 1;
|
||||||
matrix[6] = 0;
|
matrix[6] = 0;
|
||||||
matrix[7] = 0;
|
matrix[7] = 0;
|
||||||
matrix[8] = 0;
|
matrix[8] = 0;
|
||||||
matrix[9] = 0;
|
matrix[9] = 0;
|
||||||
matrix[10] = 1;
|
matrix[10] = 1;
|
||||||
matrix[11] = 0;
|
matrix[11] = 0;
|
||||||
matrix[12] = 0;
|
matrix[12] = 0;
|
||||||
matrix[13] = 0;
|
matrix[13] = 0;
|
||||||
matrix[14] = 0;
|
matrix[14] = 0;
|
||||||
matrix[15] = 1;
|
matrix[15] = 1;
|
||||||
|
|
||||||
return matrix;
|
return matrix;
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.mat4.transpose = function (mat, dest)
|
PIXI.mat4.transpose = function (mat, dest)
|
||||||
{
|
{
|
||||||
// If we are transposing ourselves we can skip a few steps but have to cache some values
|
// If we are transposing ourselves we can skip a few steps but have to cache some values
|
||||||
if (!dest || mat === dest)
|
if (!dest || mat === dest)
|
||||||
{
|
{
|
||||||
var a01 = mat[1], a02 = mat[2], a03 = mat[3],
|
var a01 = mat[1], a02 = mat[2], a03 = mat[3],
|
||||||
a12 = mat[6], a13 = mat[7],
|
a12 = mat[6], a13 = mat[7],
|
||||||
a23 = mat[11];
|
a23 = mat[11];
|
||||||
|
|
||||||
mat[1] = mat[4];
|
mat[1] = mat[4];
|
||||||
mat[2] = mat[8];
|
mat[2] = mat[8];
|
||||||
mat[3] = mat[12];
|
mat[3] = mat[12];
|
||||||
mat[4] = a01;
|
mat[4] = a01;
|
||||||
mat[6] = mat[9];
|
mat[6] = mat[9];
|
||||||
mat[7] = mat[13];
|
mat[7] = mat[13];
|
||||||
mat[8] = a02;
|
mat[8] = a02;
|
||||||
mat[9] = a12;
|
mat[9] = a12;
|
||||||
mat[11] = mat[14];
|
mat[11] = mat[14];
|
||||||
mat[12] = a03;
|
mat[12] = a03;
|
||||||
mat[13] = a13;
|
mat[13] = a13;
|
||||||
mat[14] = a23;
|
mat[14] = a23;
|
||||||
return mat;
|
return mat;
|
||||||
}
|
}
|
||||||
|
|
||||||
dest[0] = mat[0];
|
dest[0] = mat[0];
|
||||||
dest[1] = mat[4];
|
dest[1] = mat[4];
|
||||||
dest[2] = mat[8];
|
dest[2] = mat[8];
|
||||||
dest[3] = mat[12];
|
dest[3] = mat[12];
|
||||||
dest[4] = mat[1];
|
dest[4] = mat[1];
|
||||||
dest[5] = mat[5];
|
dest[5] = mat[5];
|
||||||
dest[6] = mat[9];
|
dest[6] = mat[9];
|
||||||
dest[7] = mat[13];
|
dest[7] = mat[13];
|
||||||
dest[8] = mat[2];
|
dest[8] = mat[2];
|
||||||
dest[9] = mat[6];
|
dest[9] = mat[6];
|
||||||
dest[10] = mat[10];
|
dest[10] = mat[10];
|
||||||
dest[11] = mat[14];
|
dest[11] = mat[14];
|
||||||
dest[12] = mat[3];
|
dest[12] = mat[3];
|
||||||
dest[13] = mat[7];
|
dest[13] = mat[7];
|
||||||
dest[14] = mat[11];
|
dest[14] = mat[11];
|
||||||
dest[15] = mat[15];
|
dest[15] = mat[15];
|
||||||
return dest;
|
return dest;
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.mat4.multiply = function (mat, mat2, dest)
|
PIXI.mat4.multiply = function (mat, mat2, dest)
|
||||||
{
|
{
|
||||||
if (!dest) { dest = mat; }
|
if (!dest) { dest = mat; }
|
||||||
|
|
||||||
// Cache the matrix values (makes for huge speed increases!)
|
// Cache the matrix values (makes for huge speed increases!)
|
||||||
var a00 = mat[ 0], a01 = mat[ 1], a02 = mat[ 2], a03 = mat[3];
|
var a00 = mat[ 0], a01 = mat[ 1], a02 = mat[ 2], a03 = mat[3];
|
||||||
var a10 = mat[ 4], a11 = mat[ 5], a12 = mat[ 6], a13 = mat[7];
|
var a10 = mat[ 4], a11 = mat[ 5], a12 = mat[ 6], a13 = mat[7];
|
||||||
var a20 = mat[ 8], a21 = mat[ 9], a22 = mat[10], a23 = mat[11];
|
var a20 = mat[ 8], a21 = mat[ 9], a22 = mat[10], a23 = mat[11];
|
||||||
var a30 = mat[12], a31 = mat[13], a32 = mat[14], a33 = mat[15];
|
var a30 = mat[12], a31 = mat[13], a32 = mat[14], a33 = mat[15];
|
||||||
|
|
||||||
// Cache only the current line of the second matrix
|
// Cache only the current line of the second matrix
|
||||||
var b0 = mat2[0], b1 = mat2[1], b2 = mat2[2], b3 = mat2[3];
|
var b0 = mat2[0], b1 = mat2[1], b2 = mat2[2], b3 = mat2[3];
|
||||||
dest[0] = b0*a00 + b1*a10 + b2*a20 + b3*a30;
|
dest[0] = b0*a00 + b1*a10 + b2*a20 + b3*a30;
|
||||||
dest[1] = b0*a01 + b1*a11 + b2*a21 + b3*a31;
|
dest[1] = b0*a01 + b1*a11 + b2*a21 + b3*a31;
|
||||||
|
@ -290,4 +290,4 @@ PIXI.mat4.multiply = function (mat, mat2, dest)
|
||||||
dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33;
|
dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33;
|
||||||
|
|
||||||
return dest;
|
return dest;
|
||||||
}
|
};
|
||||||
|
|
|
@ -12,20 +12,20 @@
|
||||||
*/
|
*/
|
||||||
PIXI.Point = function(x, y)
|
PIXI.Point = function(x, y)
|
||||||
{
|
{
|
||||||
/**
|
/**
|
||||||
* @property x
|
* @property x
|
||||||
* @type Number
|
* @type Number
|
||||||
* @default 0
|
* @default 0
|
||||||
*/
|
*/
|
||||||
this.x = x || 0;
|
this.x = x || 0;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @property y
|
* @property y
|
||||||
* @type Number
|
* @type Number
|
||||||
* @default 0
|
* @default 0
|
||||||
*/
|
*/
|
||||||
this.y = y || 0;
|
this.y = y || 0;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a clone of this point
|
* Creates a clone of this point
|
||||||
|
@ -35,8 +35,8 @@ PIXI.Point = function(x, y)
|
||||||
*/
|
*/
|
||||||
PIXI.Point.prototype.clone = function()
|
PIXI.Point.prototype.clone = function()
|
||||||
{
|
{
|
||||||
return new PIXI.Point(this.x, this.y);
|
return new PIXI.Point(this.x, this.y);
|
||||||
}
|
};
|
||||||
|
|
||||||
// constructor
|
// constructor
|
||||||
PIXI.Point.prototype.constructor = PIXI.Point;
|
PIXI.Point.prototype.constructor = PIXI.Point;
|
||||||
|
|
|
@ -29,8 +29,8 @@ PIXI.Polygon = function(points)
|
||||||
points = p;
|
points = p;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.points = points;
|
this.points = points;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a clone of this polygon
|
* Creates a clone of this polygon
|
||||||
|
@ -40,13 +40,13 @@ PIXI.Polygon = function(points)
|
||||||
*/
|
*/
|
||||||
PIXI.Polygon.prototype.clone = function()
|
PIXI.Polygon.prototype.clone = function()
|
||||||
{
|
{
|
||||||
var points = [];
|
var points = [];
|
||||||
for (var i=0; i<this.points.length; i++) {
|
for (var i=0; i<this.points.length; i++) {
|
||||||
points.push(this.points[i].clone());
|
points.push(this.points[i].clone());
|
||||||
}
|
}
|
||||||
|
|
||||||
return new PIXI.Polygon(points);
|
return new PIXI.Polygon(points);
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Checks if the x, and y coords passed to this function are contained within this polygon
|
* Checks if the x, and y coords passed to this function are contained within this polygon
|
||||||
|
@ -65,13 +65,13 @@ PIXI.Polygon.prototype.contains = function(x, y)
|
||||||
for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) {
|
for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) {
|
||||||
var xi = this.points[i].x, yi = this.points[i].y,
|
var xi = this.points[i].x, yi = this.points[i].y,
|
||||||
xj = this.points[j].x, yj = this.points[j].y,
|
xj = this.points[j].x, yj = this.points[j].y,
|
||||||
intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
|
intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
|
||||||
|
|
||||||
if(intersect) inside = !inside;
|
if(intersect) inside = !inside;
|
||||||
}
|
}
|
||||||
|
|
||||||
return inside;
|
return inside;
|
||||||
}
|
};
|
||||||
|
|
||||||
// constructor
|
// constructor
|
||||||
PIXI.Polygon.prototype.constructor = PIXI.Polygon;
|
PIXI.Polygon.prototype.constructor = PIXI.Polygon;
|
||||||
|
|
|
@ -14,34 +14,34 @@
|
||||||
*/
|
*/
|
||||||
PIXI.Rectangle = function(x, y, width, height)
|
PIXI.Rectangle = function(x, y, width, height)
|
||||||
{
|
{
|
||||||
/**
|
/**
|
||||||
* @property x
|
* @property x
|
||||||
* @type Number
|
* @type Number
|
||||||
* @default 0
|
* @default 0
|
||||||
*/
|
*/
|
||||||
this.x = x || 0;
|
this.x = x || 0;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @property y
|
* @property y
|
||||||
* @type Number
|
* @type Number
|
||||||
* @default 0
|
* @default 0
|
||||||
*/
|
*/
|
||||||
this.y = y || 0;
|
this.y = y || 0;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @property width
|
* @property width
|
||||||
* @type Number
|
* @type Number
|
||||||
* @default 0
|
* @default 0
|
||||||
*/
|
*/
|
||||||
this.width = width || 0;
|
this.width = width || 0;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @property height
|
* @property height
|
||||||
* @type Number
|
* @type Number
|
||||||
* @default 0
|
* @default 0
|
||||||
*/
|
*/
|
||||||
this.height = height || 0;
|
this.height = height || 0;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a clone of this Rectangle
|
* Creates a clone of this Rectangle
|
||||||
|
@ -51,8 +51,8 @@ PIXI.Rectangle = function(x, y, width, height)
|
||||||
*/
|
*/
|
||||||
PIXI.Rectangle.prototype.clone = function()
|
PIXI.Rectangle.prototype.clone = function()
|
||||||
{
|
{
|
||||||
return new PIXI.Rectangle(this.x, this.y, this.width, this.height);
|
return new PIXI.Rectangle(this.x, this.y, this.width, this.height);
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Checks if the x, and y coords passed to this function are contained within this Rectangle
|
* Checks if the x, and y coords passed to this function are contained within this Rectangle
|
||||||
|
@ -67,19 +67,19 @@ PIXI.Rectangle.prototype.contains = function(x, y)
|
||||||
if(this.width <= 0 || this.height <= 0)
|
if(this.width <= 0 || this.height <= 0)
|
||||||
return false;
|
return false;
|
||||||
|
|
||||||
var x1 = this.x;
|
var x1 = this.x;
|
||||||
if(x >= x1 && x <= x1 + this.width)
|
if(x >= x1 && x <= x1 + this.width)
|
||||||
{
|
{
|
||||||
var y1 = this.y;
|
var y1 = this.y;
|
||||||
|
|
||||||
if(y >= y1 && y <= y1 + this.height)
|
if(y >= y1 && y <= y1 + this.height)
|
||||||
{
|
{
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
}
|
};
|
||||||
|
|
||||||
// constructor
|
// constructor
|
||||||
PIXI.Rectangle.prototype.constructor = PIXI.Rectangle;
|
PIXI.Rectangle.prototype.constructor = PIXI.Rectangle;
|
||||||
|
|
|
@ -10,238 +10,238 @@
|
||||||
*/
|
*/
|
||||||
PIXI.DisplayObject = function()
|
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 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|Circle|Ellipse|Polygon
|
* @type Rectangle|Circle|Ellipse|Polygon
|
||||||
*/
|
*/
|
||||||
this.hitArea = null;
|
this.hitArea = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 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
|
* Can this object be rendered
|
||||||
*
|
*
|
||||||
* @property renderable
|
* @property renderable
|
||||||
* @type Boolean
|
* @type Boolean
|
||||||
*/
|
*/
|
||||||
this.renderable = false;
|
this.renderable = false;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [read-only] The display object container that contains this display object.
|
* [read-only] The display object container that contains this display object.
|
||||||
*
|
*
|
||||||
* @property parent
|
* @property parent
|
||||||
* @type DisplayObjectContainer
|
* @type DisplayObjectContainer
|
||||||
* @readOnly
|
* @readOnly
|
||||||
*/
|
*/
|
||||||
this.parent = null;
|
this.parent = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.
|
* [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.
|
||||||
*
|
*
|
||||||
* @property stage
|
* @property stage
|
||||||
* @type Stage
|
* @type Stage
|
||||||
* @readOnly
|
* @readOnly
|
||||||
*/
|
*/
|
||||||
this.stage = null;
|
this.stage = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [read-only] The multiplied alpha of the displayobject
|
* [read-only] The multiplied alpha of the displayobject
|
||||||
*
|
*
|
||||||
* @property worldAlpha
|
* @property worldAlpha
|
||||||
* @type Number
|
* @type Number
|
||||||
* @readOnly
|
* @readOnly
|
||||||
*/
|
*/
|
||||||
this.worldAlpha = 1;
|
this.worldAlpha = 1;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property
|
* [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property
|
||||||
*
|
*
|
||||||
* @property _interactive
|
* @property _interactive
|
||||||
* @type Boolean
|
* @type Boolean
|
||||||
* @readOnly
|
* @readOnly
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
this._interactive = false;
|
this._interactive = false;
|
||||||
|
|
||||||
this.defaultCursor = "pointer";
|
this.defaultCursor = 'pointer';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [read-only] Current transform of the object based on world (parent) factors
|
* [read-only] Current transform of the object based on world (parent) factors
|
||||||
*
|
*
|
||||||
* @property worldTransform
|
* @property worldTransform
|
||||||
* @type Mat3
|
* @type Mat3
|
||||||
* @readOnly
|
* @readOnly
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
this.worldTransform = PIXI.mat3.create()//mat3.identity();
|
this.worldTransform = PIXI.mat3.create(); //mat3.identity();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [read-only] Current transform of the object locally
|
* [read-only] Current transform of the object locally
|
||||||
*
|
*
|
||||||
* @property localTransform
|
* @property localTransform
|
||||||
* @type Mat3
|
* @type Mat3
|
||||||
* @readOnly
|
* @readOnly
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
this.localTransform = PIXI.mat3.create()//mat3.identity();
|
this.localTransform = PIXI.mat3.create(); //mat3.identity();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [NYI] Unkown
|
* [NYI] Unkown
|
||||||
*
|
*
|
||||||
* @property color
|
* @property color
|
||||||
* @type Array<>
|
* @type Array<>
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
this.color = [];
|
this.color = [];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [NYI] Holds whether or not this object is dynamic, for rendering optimization
|
* [NYI] Holds whether or not this object is dynamic, for rendering optimization
|
||||||
*
|
*
|
||||||
* @property dynamic
|
* @property dynamic
|
||||||
* @type Boolean
|
* @type Boolean
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
this.dynamic = true;
|
this.dynamic = true;
|
||||||
|
|
||||||
// chach that puppy!
|
// chach that puppy!
|
||||||
this._sr = 0;
|
this._sr = 0;
|
||||||
this._cr = 1;
|
this._cr = 1;
|
||||||
|
|
||||||
|
|
||||||
this.filterArea = new PIXI.Rectangle(0,0,1,1);
|
this.filterArea = new PIXI.Rectangle(0,0,1,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
|
||||||
* @method touchendoutside
|
* @method touchendoutside
|
||||||
* @param interactionData {InteractionData}
|
* @param interactionData {InteractionData}
|
||||||
*/
|
*/
|
||||||
}
|
};
|
||||||
|
|
||||||
// constructor
|
// constructor
|
||||||
PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject;
|
PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject;
|
||||||
|
@ -256,8 +256,8 @@ PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject;
|
||||||
*/
|
*/
|
||||||
PIXI.DisplayObject.prototype.setInteractive = function(interactive)
|
PIXI.DisplayObject.prototype.setInteractive = function(interactive)
|
||||||
{
|
{
|
||||||
this.interactive = interactive;
|
this.interactive = 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
|
||||||
|
@ -271,11 +271,11 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'interactive', {
|
||||||
return this._interactive;
|
return this._interactive;
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
this._interactive = value;
|
this._interactive = value;
|
||||||
|
|
||||||
// TODO more to be done here..
|
// TODO more to be done here..
|
||||||
// need to sort out a re-crawl!
|
// need to sort out a re-crawl!
|
||||||
if(this.stage)this.stage.dirty = true;
|
if(this.stage)this.stage.dirty = true;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -296,21 +296,21 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'mask', {
|
||||||
|
|
||||||
if(value)
|
if(value)
|
||||||
{
|
{
|
||||||
if(this._mask)
|
if(this._mask)
|
||||||
{
|
{
|
||||||
value.start = this._mask.start;
|
value.start = this._mask.start;
|
||||||
value.end = this._mask.end;
|
value.end = this._mask.end;
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
this.addFilter(value);
|
this.addFilter(value);
|
||||||
value.renderable = false;
|
value.renderable = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
this.removeFilter(this._mask);
|
this.removeFilter(this._mask);
|
||||||
this._mask.renderable = true;
|
this._mask.renderable = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
this._mask = value;
|
this._mask = value;
|
||||||
|
@ -332,32 +332,30 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'filters', {
|
||||||
|
|
||||||
if(value)
|
if(value)
|
||||||
{
|
{
|
||||||
if(this._filters)this.removeFilter(this._filters);
|
if(this._filters)this.removeFilter(this._filters);
|
||||||
this.addFilter(value);
|
this.addFilter(value);
|
||||||
|
|
||||||
// now put all the passes in one place..
|
// now put all the passes in one place..
|
||||||
var passes = [];
|
var passes = [];
|
||||||
for (var i = 0; i < value.length; i++)
|
for (var i = 0; i < value.length; i++)
|
||||||
{
|
{
|
||||||
var filterPasses = value[i].passes;
|
var filterPasses = value[i].passes;
|
||||||
for (var j = 0; j < filterPasses.length; j++)
|
for (var j = 0; j < filterPasses.length; j++)
|
||||||
{
|
{
|
||||||
passes.push(filterPasses[j]);
|
passes.push(filterPasses[j]);
|
||||||
};
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
value.start.filterPasses = passes;
|
value.start.filterPasses = passes;
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
if(this._filters)this.removeFilter(this._filters);
|
if(this._filters) {
|
||||||
|
this.removeFilter(this._filters);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this._filters = value;
|
this._filters = value;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -370,101 +368,99 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'filters', {
|
||||||
*/
|
*/
|
||||||
PIXI.DisplayObject.prototype.addFilter = function(data)
|
PIXI.DisplayObject.prototype.addFilter = function(data)
|
||||||
{
|
{
|
||||||
//if(this.filter)return;
|
//if(this.filter)return;
|
||||||
//this.filter = true;
|
//this.filter = true;
|
||||||
// data[0].target = this;
|
// data[0].target = this;
|
||||||
|
|
||||||
|
|
||||||
// insert a filter block..
|
// insert a filter block..
|
||||||
// TODO Onject pool thease bad boys..
|
// TODO Onject pool thease bad boys..
|
||||||
var start = new PIXI.FilterBlock();
|
var start = new PIXI.FilterBlock();
|
||||||
var end = new PIXI.FilterBlock();
|
var end = new PIXI.FilterBlock();
|
||||||
|
|
||||||
data.start = start;
|
data.start = start;
|
||||||
data.end = end;
|
data.end = end;
|
||||||
|
|
||||||
start.data = data;
|
start.data = data;
|
||||||
end.data = data;
|
end.data = data;
|
||||||
|
|
||||||
start.first = start.last = this;
|
start.first = start.last = this;
|
||||||
end.first = end.last = this;
|
end.first = end.last = this;
|
||||||
|
|
||||||
start.open = true;
|
start.open = true;
|
||||||
|
|
||||||
start.target = this;
|
start.target = this;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* insert start
|
* insert start
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var childFirst = start
|
var childFirst = start;
|
||||||
var childLast = start
|
var childLast = start;
|
||||||
var nextObject;
|
var nextObject;
|
||||||
var previousObject;
|
var previousObject;
|
||||||
|
|
||||||
previousObject = this.first._iPrev;
|
previousObject = this.first._iPrev;
|
||||||
|
|
||||||
if(previousObject)
|
if(previousObject)
|
||||||
{
|
{
|
||||||
nextObject = previousObject._iNext;
|
nextObject = previousObject._iNext;
|
||||||
childFirst._iPrev = previousObject;
|
childFirst._iPrev = previousObject;
|
||||||
previousObject._iNext = childFirst;
|
previousObject._iNext = childFirst;
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
nextObject = this;
|
nextObject = this;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(nextObject)
|
if(nextObject)
|
||||||
{
|
{
|
||||||
nextObject._iPrev = childLast;
|
nextObject._iPrev = childLast;
|
||||||
childLast._iNext = nextObject;
|
childLast._iNext = nextObject;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// now insert the end filter block..
|
||||||
|
|
||||||
// now insert the end filter block..
|
/*
|
||||||
|
* insert end filter
|
||||||
|
*/
|
||||||
|
childFirst = end;
|
||||||
|
childLast = end;
|
||||||
|
nextObject = null;
|
||||||
|
previousObject = null;
|
||||||
|
|
||||||
/*
|
previousObject = this.last;
|
||||||
* insert end filter
|
nextObject = previousObject._iNext;
|
||||||
*/
|
|
||||||
var childFirst = end
|
|
||||||
var childLast = end
|
|
||||||
var nextObject = null;
|
|
||||||
var previousObject = null;
|
|
||||||
|
|
||||||
previousObject = this.last;
|
if(nextObject)
|
||||||
nextObject = previousObject._iNext;
|
{
|
||||||
|
nextObject._iPrev = childLast;
|
||||||
|
childLast._iNext = nextObject;
|
||||||
|
}
|
||||||
|
|
||||||
if(nextObject)
|
childFirst._iPrev = previousObject;
|
||||||
{
|
previousObject._iNext = childFirst;
|
||||||
nextObject._iPrev = childLast;
|
|
||||||
childLast._iNext = nextObject;
|
|
||||||
}
|
|
||||||
|
|
||||||
childFirst._iPrev = previousObject;
|
var updateLast = this;
|
||||||
previousObject._iNext = childFirst;
|
|
||||||
|
|
||||||
var updateLast = this;
|
var prevLast = this.last;
|
||||||
|
while(updateLast)
|
||||||
|
{
|
||||||
|
if(updateLast.last === prevLast)
|
||||||
|
{
|
||||||
|
updateLast.last = end;
|
||||||
|
}
|
||||||
|
updateLast = updateLast.parent;
|
||||||
|
}
|
||||||
|
|
||||||
var prevLast = this.last;
|
this.first = start;
|
||||||
while(updateLast)
|
|
||||||
{
|
|
||||||
if(updateLast.last == prevLast)
|
|
||||||
{
|
|
||||||
updateLast.last = end;
|
|
||||||
}
|
|
||||||
updateLast = updateLast.parent;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.first = start;
|
// if webGL...
|
||||||
|
if(this.__renderGroup)
|
||||||
// if webGL...
|
{
|
||||||
if(this.__renderGroup)
|
this.__renderGroup.addFilterBlocks(start, end);
|
||||||
{
|
}
|
||||||
this.__renderGroup.addFilterBlocks(start, end);
|
};
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Removes the filter to this displayObject
|
* Removes the filter to this displayObject
|
||||||
|
@ -474,47 +470,47 @@ PIXI.DisplayObject.prototype.addFilter = function(data)
|
||||||
*/
|
*/
|
||||||
PIXI.DisplayObject.prototype.removeFilter = function(data)
|
PIXI.DisplayObject.prototype.removeFilter = function(data)
|
||||||
{
|
{
|
||||||
//if(!this.filter)return;
|
//if(!this.filter)return;
|
||||||
//this.filter = false;
|
//this.filter = false;
|
||||||
// console.log("YUOIO")
|
// console.log('YUOIO')
|
||||||
// modify the list..
|
// modify the list..
|
||||||
var startBlock = data.start;
|
var startBlock = data.start;
|
||||||
|
|
||||||
|
|
||||||
var nextObject = startBlock._iNext;
|
var nextObject = startBlock._iNext;
|
||||||
var previousObject = startBlock._iPrev;
|
var previousObject = startBlock._iPrev;
|
||||||
|
|
||||||
if(nextObject)nextObject._iPrev = previousObject;
|
if(nextObject)nextObject._iPrev = previousObject;
|
||||||
if(previousObject)previousObject._iNext = nextObject;
|
if(previousObject)previousObject._iNext = nextObject;
|
||||||
|
|
||||||
this.first = startBlock._iNext;
|
this.first = startBlock._iNext;
|
||||||
|
|
||||||
// remove the end filter
|
// remove the end filter
|
||||||
var lastBlock = data.end;
|
var lastBlock = data.end;
|
||||||
|
|
||||||
var nextObject = lastBlock._iNext;
|
nextObject = lastBlock._iNext;
|
||||||
var previousObject = lastBlock._iPrev;
|
previousObject = lastBlock._iPrev;
|
||||||
|
|
||||||
if(nextObject)nextObject._iPrev = previousObject;
|
if(nextObject)nextObject._iPrev = previousObject;
|
||||||
previousObject._iNext = nextObject;
|
previousObject._iNext = nextObject;
|
||||||
|
|
||||||
// this is always true too!
|
// this is always true too!
|
||||||
var tempLast = lastBlock._iPrev;
|
var tempLast = lastBlock._iPrev;
|
||||||
// need to make sure the parents last is updated too
|
// need to make sure the parents last is updated too
|
||||||
var updateLast = this;
|
var updateLast = this;
|
||||||
while(updateLast.last == lastBlock)
|
while(updateLast.last === lastBlock)
|
||||||
{
|
{
|
||||||
updateLast.last = tempLast;
|
updateLast.last = tempLast;
|
||||||
updateLast = updateLast.parent;
|
updateLast = updateLast.parent;
|
||||||
if(!updateLast)break;
|
if(!updateLast)break;
|
||||||
}
|
}
|
||||||
|
|
||||||
// if webGL...
|
// if webGL...
|
||||||
if(this.__renderGroup)
|
if(this.__renderGroup)
|
||||||
{
|
{
|
||||||
this.__renderGroup.removeFilterBlocks(startBlock, lastBlock);
|
this.__renderGroup.removeFilterBlocks(startBlock, lastBlock);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Updates the object transform for rendering
|
* Updates the object transform for rendering
|
||||||
|
@ -524,27 +520,27 @@ PIXI.DisplayObject.prototype.removeFilter = function(data)
|
||||||
*/
|
*/
|
||||||
PIXI.DisplayObject.prototype.updateTransform = function()
|
PIXI.DisplayObject.prototype.updateTransform = function()
|
||||||
{
|
{
|
||||||
// TODO OPTIMIZE THIS!! with dirty
|
// TODO OPTIMIZE THIS!! with dirty
|
||||||
if(this.rotation !== this.rotationCache)
|
if(this.rotation !== this.rotationCache)
|
||||||
{
|
{
|
||||||
this.rotationCache = this.rotation;
|
this.rotationCache = this.rotation;
|
||||||
this._sr = Math.sin(this.rotation);
|
this._sr = Math.sin(this.rotation);
|
||||||
this._cr = Math.cos(this.rotation);
|
this._cr = Math.cos(this.rotation);
|
||||||
}
|
}
|
||||||
|
|
||||||
var localTransform = this.localTransform;
|
var localTransform = this.localTransform;
|
||||||
var parentTransform = this.parent.worldTransform;
|
var parentTransform = this.parent.worldTransform;
|
||||||
var worldTransform = this.worldTransform;
|
var worldTransform = this.worldTransform;
|
||||||
//console.log(localTransform)
|
//console.log(localTransform)
|
||||||
localTransform[0] = this._cr * this.scale.x;
|
localTransform[0] = this._cr * this.scale.x;
|
||||||
localTransform[1] = -this._sr * this.scale.y
|
localTransform[1] = -this._sr * this.scale.y;
|
||||||
localTransform[3] = this._sr * this.scale.x;
|
localTransform[3] = this._sr * this.scale.x;
|
||||||
localTransform[4] = this._cr * this.scale.y;
|
localTransform[4] = this._cr * this.scale.y;
|
||||||
|
|
||||||
// TODO --> do we even need a local matrix???
|
// TODO --> do we even need a local matrix???
|
||||||
|
|
||||||
var px = this.pivot.x;
|
var px = this.pivot.x;
|
||||||
var py = this.pivot.y;
|
var py = this.pivot.y;
|
||||||
|
|
||||||
// Cache the matrix values (makes for huge speed increases!)
|
// Cache the matrix values (makes for huge speed increases!)
|
||||||
var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1],
|
var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1],
|
||||||
|
@ -553,8 +549,8 @@ PIXI.DisplayObject.prototype.updateTransform = function()
|
||||||
b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2],
|
b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2],
|
||||||
b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5];
|
b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5];
|
||||||
|
|
||||||
localTransform[2] = a02
|
localTransform[2] = a02;
|
||||||
localTransform[5] = a12
|
localTransform[5] = a12;
|
||||||
|
|
||||||
worldTransform[0] = b00 * a00 + b01 * a10;
|
worldTransform[0] = b00 * a00 + b01 * a10;
|
||||||
worldTransform[1] = b00 * a01 + b01 * a11;
|
worldTransform[1] = b00 * a01 + b01 * a11;
|
||||||
|
@ -564,12 +560,11 @@ PIXI.DisplayObject.prototype.updateTransform = function()
|
||||||
worldTransform[4] = b10 * a01 + b11 * a11;
|
worldTransform[4] = b10 * a01 + b11 * a11;
|
||||||
worldTransform[5] = b10 * a02 + b11 * a12 + b12;
|
worldTransform[5] = b10 * a02 + b11 * a12 + b12;
|
||||||
|
|
||||||
// because we are using affine transformation, we can optimise the matrix concatenation process.. wooo!
|
// because we are using affine transformation, we can optimise the matrix concatenation process.. wooo!
|
||||||
// mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform);
|
// mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform);
|
||||||
this.worldAlpha = this.alpha * this.parent.worldAlpha;
|
this.worldAlpha = this.alpha * this.parent.worldAlpha;
|
||||||
|
|
||||||
this.vcount = PIXI.visibleCount;
|
this.vcount = PIXI.visibleCount;
|
||||||
|
};
|
||||||
}
|
|
||||||
|
|
||||||
PIXI.visibleCount = 0;
|
PIXI.visibleCount = 0;
|
|
@ -13,17 +13,17 @@
|
||||||
*/
|
*/
|
||||||
PIXI.DisplayObjectContainer = function()
|
PIXI.DisplayObjectContainer = function()
|
||||||
{
|
{
|
||||||
PIXI.DisplayObject.call( this );
|
PIXI.DisplayObject.call( this );
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [read-only] The of children of this container.
|
* [read-only] The of children of this container.
|
||||||
*
|
*
|
||||||
* @property children
|
* @property children
|
||||||
* @type Array<DisplayObject>
|
* @type Array<DisplayObject>
|
||||||
* @readOnly
|
* @readOnly
|
||||||
*/
|
*/
|
||||||
this.children = [];
|
this.children = [];
|
||||||
}
|
};
|
||||||
|
|
||||||
// constructor
|
// constructor
|
||||||
PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype );
|
PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype );
|
||||||
|
@ -37,85 +37,83 @@ PIXI.DisplayObjectContainer.prototype.constructor = PIXI.DisplayObjectContainer;
|
||||||
*/
|
*/
|
||||||
PIXI.DisplayObjectContainer.prototype.addChild = function(child)
|
PIXI.DisplayObjectContainer.prototype.addChild = function(child)
|
||||||
{
|
{
|
||||||
if(child.parent != undefined)
|
if(child.parent && child.parent !== this)
|
||||||
{
|
{
|
||||||
|
//// COULD BE THIS???
|
||||||
|
child.parent.removeChild(child);
|
||||||
|
// return;
|
||||||
|
}
|
||||||
|
|
||||||
//// COULD BE THIS???
|
child.parent = this;
|
||||||
child.parent.removeChild(child);
|
|
||||||
// return;
|
|
||||||
}
|
|
||||||
|
|
||||||
child.parent = this;
|
this.children.push(child);
|
||||||
|
|
||||||
this.children.push(child);
|
// update the stage refference..
|
||||||
|
|
||||||
// update the stage refference..
|
if(this.stage)
|
||||||
|
{
|
||||||
|
var tmpChild = child;
|
||||||
|
do
|
||||||
|
{
|
||||||
|
if(tmpChild.interactive)this.stage.dirty = true;
|
||||||
|
tmpChild.stage = this.stage;
|
||||||
|
tmpChild = tmpChild._iNext;
|
||||||
|
}
|
||||||
|
while(tmpChild);
|
||||||
|
}
|
||||||
|
|
||||||
if(this.stage)
|
// LINKED LIST //
|
||||||
{
|
|
||||||
var tmpChild = child;
|
|
||||||
do
|
|
||||||
{
|
|
||||||
if(tmpChild.interactive)this.stage.dirty = true;
|
|
||||||
tmpChild.stage = this.stage;
|
|
||||||
tmpChild = tmpChild._iNext;
|
|
||||||
}
|
|
||||||
while(tmpChild)
|
|
||||||
}
|
|
||||||
|
|
||||||
// LINKED LIST //
|
// modify the list..
|
||||||
|
var childFirst = child.first;
|
||||||
|
var childLast = child.last;
|
||||||
|
var nextObject;
|
||||||
|
var previousObject;
|
||||||
|
|
||||||
// modify the list..
|
// this could be wrong if there is a filter??
|
||||||
var childFirst = child.first
|
if(this._filters || this._mask)
|
||||||
var childLast = child.last;
|
{
|
||||||
var nextObject;
|
previousObject = this.last._iPrev;
|
||||||
var previousObject;
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
previousObject = this.last;
|
||||||
|
}
|
||||||
|
|
||||||
// this could be wrong if there is a filter??
|
nextObject = previousObject._iNext;
|
||||||
if(this._filters || this._mask)
|
|
||||||
{
|
|
||||||
previousObject = this.last._iPrev;
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
previousObject = this.last;
|
|
||||||
}
|
|
||||||
|
|
||||||
nextObject = previousObject._iNext;
|
// always true in this case
|
||||||
|
// need to make sure the parents last is updated too
|
||||||
|
var updateLast = this;
|
||||||
|
var prevLast = previousObject;
|
||||||
|
|
||||||
// always true in this case
|
while(updateLast)
|
||||||
// need to make sure the parents last is updated too
|
{
|
||||||
var updateLast = this;
|
if(updateLast.last === prevLast)
|
||||||
var prevLast = previousObject;
|
{
|
||||||
|
updateLast.last = child.last;
|
||||||
|
}
|
||||||
|
updateLast = updateLast.parent;
|
||||||
|
}
|
||||||
|
|
||||||
while(updateLast)
|
if(nextObject)
|
||||||
{
|
{
|
||||||
if(updateLast.last == prevLast)
|
nextObject._iPrev = childLast;
|
||||||
{
|
childLast._iNext = nextObject;
|
||||||
updateLast.last = child.last;
|
}
|
||||||
}
|
|
||||||
updateLast = updateLast.parent;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(nextObject)
|
childFirst._iPrev = previousObject;
|
||||||
{
|
previousObject._iNext = childFirst;
|
||||||
nextObject._iPrev = childLast;
|
|
||||||
childLast._iNext = nextObject;
|
|
||||||
}
|
|
||||||
|
|
||||||
childFirst._iPrev = previousObject;
|
// need to remove any render groups..
|
||||||
previousObject._iNext = childFirst;
|
if(this.__renderGroup)
|
||||||
|
{
|
||||||
// need to remove any render groups..
|
// being used by a renderTexture.. if it exists then it must be from a render texture;
|
||||||
if(this.__renderGroup)
|
if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child);
|
||||||
{
|
// add them to the new render group..
|
||||||
// being used by a renderTexture.. if it exists then it must be from a render texture;
|
this.__renderGroup.addDisplayObjectAndChildren(child);
|
||||||
if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child);
|
}
|
||||||
// add them to the new render group..
|
};
|
||||||
this.__renderGroup.addDisplayObjectAndChildren(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
|
||||||
|
@ -126,83 +124,84 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
|
||||||
*/
|
*/
|
||||||
PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
|
PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
|
||||||
{
|
{
|
||||||
if(index >= 0 && index <= this.children.length)
|
if(index >= 0 && index <= this.children.length)
|
||||||
{
|
{
|
||||||
if(child.parent != undefined)
|
if(child.parent !== undefined)
|
||||||
{
|
{
|
||||||
child.parent.removeChild(child);
|
child.parent.removeChild(child);
|
||||||
}
|
}
|
||||||
child.parent = this;
|
|
||||||
|
|
||||||
if(this.stage)
|
child.parent = this;
|
||||||
{
|
|
||||||
var tmpChild = child;
|
|
||||||
do
|
|
||||||
{
|
|
||||||
if(tmpChild.interactive)this.stage.dirty = true;
|
|
||||||
tmpChild.stage = this.stage;
|
|
||||||
tmpChild = tmpChild._iNext;
|
|
||||||
}
|
|
||||||
while(tmpChild)
|
|
||||||
}
|
|
||||||
|
|
||||||
// modify the list..
|
if(this.stage)
|
||||||
var childFirst = child.first;
|
{
|
||||||
var childLast = child.last;
|
var tmpChild = child;
|
||||||
var nextObject;
|
do
|
||||||
var previousObject;
|
{
|
||||||
|
if(tmpChild.interactive)this.stage.dirty = true;
|
||||||
|
tmpChild.stage = this.stage;
|
||||||
|
tmpChild = tmpChild._iNext;
|
||||||
|
}
|
||||||
|
while(tmpChild);
|
||||||
|
}
|
||||||
|
|
||||||
if(index == this.children.length)
|
// modify the list..
|
||||||
{
|
var childFirst = child.first;
|
||||||
previousObject = this.last;
|
var childLast = child.last;
|
||||||
var updateLast = this;
|
var nextObject;
|
||||||
var prevLast = this.last;
|
var previousObject;
|
||||||
while(updateLast)
|
|
||||||
{
|
|
||||||
if(updateLast.last == prevLast)
|
|
||||||
{
|
|
||||||
updateLast.last = child.last;
|
|
||||||
}
|
|
||||||
updateLast = updateLast.parent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if(index == 0)
|
|
||||||
{
|
|
||||||
previousObject = this;
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
previousObject = this.children[index-1].last;
|
|
||||||
}
|
|
||||||
|
|
||||||
nextObject = previousObject._iNext;
|
if(index === this.children.length)
|
||||||
|
{
|
||||||
|
previousObject = this.last;
|
||||||
|
var updateLast = this;
|
||||||
|
var prevLast = this.last;
|
||||||
|
while(updateLast)
|
||||||
|
{
|
||||||
|
if(updateLast.last === prevLast)
|
||||||
|
{
|
||||||
|
updateLast.last = child.last;
|
||||||
|
}
|
||||||
|
updateLast = updateLast.parent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if(index === 0)
|
||||||
|
{
|
||||||
|
previousObject = this;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
previousObject = this.children[index-1].last;
|
||||||
|
}
|
||||||
|
|
||||||
// always true in this case
|
nextObject = previousObject._iNext;
|
||||||
if(nextObject)
|
|
||||||
{
|
|
||||||
nextObject._iPrev = childLast;
|
|
||||||
childLast._iNext = nextObject;
|
|
||||||
}
|
|
||||||
|
|
||||||
childFirst._iPrev = previousObject;
|
// always true in this case
|
||||||
previousObject._iNext = childFirst;
|
if(nextObject)
|
||||||
|
{
|
||||||
|
nextObject._iPrev = childLast;
|
||||||
|
childLast._iNext = nextObject;
|
||||||
|
}
|
||||||
|
|
||||||
this.children.splice(index, 0, child);
|
childFirst._iPrev = previousObject;
|
||||||
// need to remove any render groups..
|
previousObject._iNext = childFirst;
|
||||||
if(this.__renderGroup)
|
|
||||||
{
|
|
||||||
// being used by a renderTexture.. if it exists then it must be from a render texture;
|
|
||||||
if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child);
|
|
||||||
// add them to the new render group..
|
|
||||||
this.__renderGroup.addDisplayObjectAndChildren(child);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
this.children.splice(index, 0, child);
|
||||||
else
|
// need to remove any render groups..
|
||||||
{
|
if(this.__renderGroup)
|
||||||
throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length);
|
{
|
||||||
}
|
// being used by a renderTexture.. if it exists then it must be from a render texture;
|
||||||
}
|
if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child);
|
||||||
|
// add them to the new render group..
|
||||||
|
this.__renderGroup.addDisplayObjectAndChildren(child);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [NYI] Swaps the depth of 2 displayObjects
|
* [NYI] Swaps the depth of 2 displayObjects
|
||||||
|
@ -214,31 +213,31 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
|
||||||
*/
|
*/
|
||||||
PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2)
|
PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2)
|
||||||
{
|
{
|
||||||
if(child === child2) {
|
if(child === child2) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var index1 = this.children.indexOf(child);
|
var index1 = this.children.indexOf(child);
|
||||||
var index2 = this.children.indexOf(child2);
|
var index2 = this.children.indexOf(child2);
|
||||||
|
|
||||||
if(index1 < 0 || index2 < 0) {
|
if(index1 < 0 || index2 < 0) {
|
||||||
throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller.");
|
throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.');
|
||||||
}
|
}
|
||||||
|
|
||||||
this.removeChild(child);
|
this.removeChild(child);
|
||||||
this.removeChild(child2);
|
this.removeChild(child2);
|
||||||
|
|
||||||
if(index1 < index2)
|
if(index1 < index2)
|
||||||
{
|
{
|
||||||
this.addChildAt(child2, index1);
|
this.addChildAt(child2, index1);
|
||||||
this.addChildAt(child, index2);
|
this.addChildAt(child, index2);
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
this.addChildAt(child, index2);
|
this.addChildAt(child, index2);
|
||||||
this.addChildAt(child2, index1);
|
this.addChildAt(child2, index1);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns the Child at the specified index
|
* Returns the Child at the specified index
|
||||||
|
@ -248,15 +247,15 @@ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2)
|
||||||
*/
|
*/
|
||||||
PIXI.DisplayObjectContainer.prototype.getChildAt = function(index)
|
PIXI.DisplayObjectContainer.prototype.getChildAt = function(index)
|
||||||
{
|
{
|
||||||
if(index >= 0 && index < this.children.length)
|
if(index >= 0 && index < this.children.length)
|
||||||
{
|
{
|
||||||
return this.children[index];
|
return this.children[index];
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this);
|
throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Removes a child from the container.
|
* Removes a child from the container.
|
||||||
|
@ -266,66 +265,65 @@ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index)
|
||||||
*/
|
*/
|
||||||
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 )
|
||||||
{
|
{
|
||||||
// unlink //
|
// unlink //
|
||||||
// modify the list..
|
// modify the list..
|
||||||
var childFirst = child.first;
|
var childFirst = child.first;
|
||||||
var childLast = child.last;
|
var childLast = child.last;
|
||||||
|
|
||||||
var nextObject = childLast._iNext;
|
var nextObject = childLast._iNext;
|
||||||
var previousObject = childFirst._iPrev;
|
var previousObject = childFirst._iPrev;
|
||||||
|
|
||||||
if(nextObject)nextObject._iPrev = previousObject;
|
if(nextObject)nextObject._iPrev = previousObject;
|
||||||
previousObject._iNext = nextObject;
|
previousObject._iNext = nextObject;
|
||||||
|
|
||||||
if(this.last == childLast)
|
if(this.last === childLast)
|
||||||
{
|
{
|
||||||
|
var tempLast = childFirst._iPrev;
|
||||||
|
// need to make sure the parents last is updated too
|
||||||
|
var updateLast = this;
|
||||||
|
|
||||||
var tempLast = childFirst._iPrev;
|
while(updateLast.last === childLast)
|
||||||
// need to make sure the parents last is updated too
|
{
|
||||||
var updateLast = this;
|
updateLast.last = tempLast;
|
||||||
|
updateLast = updateLast.parent;
|
||||||
|
if(!updateLast)break;
|
||||||
|
|
||||||
while(updateLast.last == childLast)
|
}
|
||||||
{
|
}
|
||||||
updateLast.last = tempLast;
|
|
||||||
updateLast = updateLast.parent;
|
|
||||||
if(!updateLast)break;
|
|
||||||
|
|
||||||
}
|
childLast._iNext = null;
|
||||||
}
|
childFirst._iPrev = null;
|
||||||
|
|
||||||
childLast._iNext = null;
|
// update the stage reference..
|
||||||
childFirst._iPrev = null;
|
if(this.stage)
|
||||||
|
{
|
||||||
|
var tmpChild = child;
|
||||||
|
do
|
||||||
|
{
|
||||||
|
if(tmpChild.interactive)this.stage.dirty = true;
|
||||||
|
tmpChild.stage = null;
|
||||||
|
tmpChild = tmpChild._iNext;
|
||||||
|
}
|
||||||
|
while(tmpChild);
|
||||||
|
}
|
||||||
|
|
||||||
// update the stage reference..
|
// webGL trim
|
||||||
if(this.stage)
|
if(child.__renderGroup)
|
||||||
{
|
{
|
||||||
var tmpChild = child;
|
child.__renderGroup.removeDisplayObjectAndChildren(child);
|
||||||
do
|
}
|
||||||
{
|
|
||||||
if(tmpChild.interactive)this.stage.dirty = true;
|
|
||||||
tmpChild.stage = null;
|
|
||||||
tmpChild = tmpChild._iNext;
|
|
||||||
}
|
|
||||||
while(tmpChild)
|
|
||||||
}
|
|
||||||
|
|
||||||
// webGL trim
|
child.parent = undefined;
|
||||||
if(child.__renderGroup)
|
this.children.splice( index, 1 );
|
||||||
{
|
}
|
||||||
child.__renderGroup.removeDisplayObjectAndChildren(child);
|
else
|
||||||
}
|
{
|
||||||
|
throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this);
|
||||||
child.parent = undefined;
|
}
|
||||||
this.children.splice( index, 1 );
|
};
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Updates the container's children's transform for rendering
|
* Updates the container's children's transform for rendering
|
||||||
|
@ -335,12 +333,12 @@ PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
|
||||||
*/
|
*/
|
||||||
PIXI.DisplayObjectContainer.prototype.updateTransform = function()
|
PIXI.DisplayObjectContainer.prototype.updateTransform = function()
|
||||||
{
|
{
|
||||||
if(!this.visible)return;
|
if(!this.visible)return;
|
||||||
|
|
||||||
PIXI.DisplayObject.prototype.updateTransform.call( this );
|
PIXI.DisplayObject.prototype.updateTransform.call( this );
|
||||||
|
|
||||||
for(var i=0,j=this.children.length; i<j; i++)
|
for(var i=0,j=this.children.length; i<j; i++)
|
||||||
{
|
{
|
||||||
this.children[i].updateTransform();
|
this.children[i].updateTransform();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
|
@ -12,61 +12,61 @@
|
||||||
*/
|
*/
|
||||||
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;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 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
|
* @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
|
* @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] The index MovieClips current frame (this may not have to be a whole number)
|
* [read-only] The index MovieClips current frame (this may not have to be a whole number)
|
||||||
*
|
*
|
||||||
* @property currentFrame
|
* @property currentFrame
|
||||||
* @type Number
|
* @type Number
|
||||||
* @default 0
|
* @default 0
|
||||||
* @readOnly
|
* @readOnly
|
||||||
*/
|
*/
|
||||||
this.currentFrame = 0;
|
this.currentFrame = 0;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [read-only] Indicates if the MovieClip is currently playing
|
* [read-only] Indicates if the MovieClip is currently playing
|
||||||
*
|
*
|
||||||
* @property playing
|
* @property playing
|
||||||
* @type Boolean
|
* @type Boolean
|
||||||
* @readOnly
|
* @readOnly
|
||||||
*/
|
*/
|
||||||
this.playing = false;
|
this.playing = false;
|
||||||
}
|
};
|
||||||
|
|
||||||
// constructor
|
// constructor
|
||||||
PIXI.MovieClip.prototype = Object.create( PIXI.Sprite.prototype );
|
PIXI.MovieClip.prototype = Object.create( PIXI.Sprite.prototype );
|
||||||
|
@ -96,8 +96,8 @@ Object.defineProperty( PIXI.MovieClip.prototype, 'totalFrames', {
|
||||||
*/
|
*/
|
||||||
PIXI.MovieClip.prototype.stop = function()
|
PIXI.MovieClip.prototype.stop = function()
|
||||||
{
|
{
|
||||||
this.playing = false;
|
this.playing = false;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Plays the MovieClip
|
* Plays the MovieClip
|
||||||
|
@ -106,8 +106,8 @@ PIXI.MovieClip.prototype.stop = function()
|
||||||
*/
|
*/
|
||||||
PIXI.MovieClip.prototype.play = function()
|
PIXI.MovieClip.prototype.play = function()
|
||||||
{
|
{
|
||||||
this.playing = true;
|
this.playing = true;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Stops the MovieClip and goes to a specific frame
|
* Stops the MovieClip and goes to a specific frame
|
||||||
|
@ -117,11 +117,11 @@ PIXI.MovieClip.prototype.play = function()
|
||||||
*/
|
*/
|
||||||
PIXI.MovieClip.prototype.gotoAndStop = function(frameNumber)
|
PIXI.MovieClip.prototype.gotoAndStop = function(frameNumber)
|
||||||
{
|
{
|
||||||
this.playing = false;
|
this.playing = false;
|
||||||
this.currentFrame = frameNumber;
|
this.currentFrame = frameNumber;
|
||||||
var round = (this.currentFrame + 0.5) | 0;
|
var round = (this.currentFrame + 0.5) | 0;
|
||||||
this.setTexture(this.textures[round % this.textures.length]);
|
this.setTexture(this.textures[round % this.textures.length]);
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Goes to a specific frame and begins playing the MovieClip
|
* Goes to a specific frame and begins playing the MovieClip
|
||||||
|
@ -131,9 +131,9 @@ PIXI.MovieClip.prototype.gotoAndStop = function(frameNumber)
|
||||||
*/
|
*/
|
||||||
PIXI.MovieClip.prototype.gotoAndPlay = function(frameNumber)
|
PIXI.MovieClip.prototype.gotoAndPlay = function(frameNumber)
|
||||||
{
|
{
|
||||||
this.currentFrame = frameNumber;
|
this.currentFrame = frameNumber;
|
||||||
this.playing = true;
|
this.playing = true;
|
||||||
}
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Updates the object transform for rendering
|
* Updates the object transform for rendering
|
||||||
|
@ -143,24 +143,24 @@ PIXI.MovieClip.prototype.gotoAndPlay = function(frameNumber)
|
||||||
*/
|
*/
|
||||||
PIXI.MovieClip.prototype.updateTransform = function()
|
PIXI.MovieClip.prototype.updateTransform = function()
|
||||||
{
|
{
|
||||||
PIXI.Sprite.prototype.updateTransform.call(this);
|
PIXI.Sprite.prototype.updateTransform.call(this);
|
||||||
|
|
||||||
if(!this.playing)return;
|
if(!this.playing)return;
|
||||||
|
|
||||||
this.currentFrame += this.animationSpeed;
|
this.currentFrame += this.animationSpeed;
|
||||||
|
|
||||||
var round = (this.currentFrame + 0.5) | 0;
|
var round = (this.currentFrame + 0.5) | 0;
|
||||||
|
|
||||||
if(this.loop || round < this.textures.length)
|
if(this.loop || round < this.textures.length)
|
||||||
{
|
{
|
||||||
this.setTexture(this.textures[round % this.textures.length]);
|
this.setTexture(this.textures[round % this.textures.length]);
|
||||||
}
|
}
|
||||||
else if(round >= this.textures.length)
|
else if(round >= this.textures.length)
|
||||||
{
|
{
|
||||||
this.gotoAndStop(this.textures.length - 1);
|
this.gotoAndStop(this.textures.length - 1);
|
||||||
if(this.onComplete)
|
if(this.onComplete)
|
||||||
{
|
{
|
||||||
this.onComplete();
|
this.onComplete();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
|
@ -18,66 +18,66 @@ PIXI.blendModes.SCREEN = 1;
|
||||||
*/
|
*/
|
||||||
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 Number
|
* @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
|
* @property _width
|
||||||
* @type Number
|
* @type Number
|
||||||
* @private
|
* @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
|
* @property _height
|
||||||
* @type Number
|
* @type Number
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
this._height = 0;
|
this._height = 0;
|
||||||
|
|
||||||
if(texture.baseTexture.hasLoaded)
|
if(texture.baseTexture.hasLoaded)
|
||||||
{
|
{
|
||||||
this.updateFrame = true;
|
this.updateFrame = true;
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
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;
|
||||||
}
|
};
|
||||||
|
|
||||||
// constructor
|
// constructor
|
||||||
PIXI.Sprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
|
PIXI.Sprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
|
||||||
|
@ -94,7 +94,7 @@ Object.defineProperty(PIXI.Sprite.prototype, 'width', {
|
||||||
return this.scale.x * this.texture.frame.width;
|
return this.scale.x * this.texture.frame.width;
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
this.scale.x = value / this.texture.frame.width
|
this.scale.x = value / this.texture.frame.width;
|
||||||
this._width = value;
|
this._width = value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -110,7 +110,7 @@ Object.defineProperty(PIXI.Sprite.prototype, 'height', {
|
||||||
return this.scale.y * this.texture.frame.height;
|
return this.scale.y * this.texture.frame.height;
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
this.scale.y = value / this.texture.frame.height
|
this.scale.y = value / this.texture.frame.height;
|
||||||
this._height = value;
|
this._height = value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -123,24 +123,24 @@ Object.defineProperty(PIXI.Sprite.prototype, 'height', {
|
||||||
*/
|
*/
|
||||||
PIXI.Sprite.prototype.setTexture = function(texture)
|
PIXI.Sprite.prototype.setTexture = function(texture)
|
||||||
{
|
{
|
||||||
// stop current texture;
|
// stop current texture;
|
||||||
if(this.texture.baseTexture != texture.baseTexture)
|
if(this.texture.baseTexture !== texture.baseTexture)
|
||||||
{
|
{
|
||||||
this.textureChange = true;
|
this.textureChange = true;
|
||||||
this.texture = texture;
|
this.texture = texture;
|
||||||
|
|
||||||
if(this.__renderGroup)
|
if(this.__renderGroup)
|
||||||
{
|
{
|
||||||
this.__renderGroup.updateTexture(this);
|
this.__renderGroup.updateTexture(this);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
this.texture = texture;
|
this.texture = texture;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.updateFrame = true;
|
this.updateFrame = true;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* When the texture is updated, this event will fire to update the scale and frame
|
* When the texture is updated, this event will fire to update the scale and frame
|
||||||
|
@ -149,16 +149,16 @@ PIXI.Sprite.prototype.setTexture = function(texture)
|
||||||
* @param event
|
* @param event
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
PIXI.Sprite.prototype.onTextureUpdate = function(event)
|
PIXI.Sprite.prototype.onTextureUpdate = function()
|
||||||
{
|
{
|
||||||
//this.texture.removeEventListener( 'update', this.onTextureUpdateBind );
|
//this.texture.removeEventListener( 'update', this.onTextureUpdateBind );
|
||||||
|
|
||||||
// so if _width is 0 then width was not set..
|
// so if _width is 0 then width was not set..
|
||||||
if(this._width)this.scale.x = this._width / this.texture.frame.width;
|
if(this._width)this.scale.x = this._width / this.texture.frame.width;
|
||||||
if(this._height)this.scale.y = this._height / this.texture.frame.height;
|
if(this._height)this.scale.y = this._height / this.texture.frame.height;
|
||||||
|
|
||||||
this.updateFrame = true;
|
this.updateFrame = true;
|
||||||
}
|
};
|
||||||
|
|
||||||
// some helper functions..
|
// some helper functions..
|
||||||
|
|
||||||
|
@ -174,10 +174,10 @@ PIXI.Sprite.prototype.onTextureUpdate = function(event)
|
||||||
*/
|
*/
|
||||||
PIXI.Sprite.fromFrame = function(frameId)
|
PIXI.Sprite.fromFrame = function(frameId)
|
||||||
{
|
{
|
||||||
var texture = PIXI.TextureCache[frameId];
|
var texture = PIXI.TextureCache[frameId];
|
||||||
if(!texture)throw new Error("The frameId '"+ frameId +"' does not exist in the texture cache" + this);
|
if(!texture) throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this);
|
||||||
return new PIXI.Sprite(texture);
|
return new PIXI.Sprite(texture);
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
|
@ -191,6 +191,6 @@ PIXI.Sprite.fromFrame = function(frameId)
|
||||||
*/
|
*/
|
||||||
PIXI.Sprite.fromImage = function(imageId)
|
PIXI.Sprite.fromImage = function(imageId)
|
||||||
{
|
{
|
||||||
var texture = PIXI.Texture.fromImage(imageId);
|
var texture = PIXI.Texture.fromImage(imageId);
|
||||||
return new PIXI.Sprite(texture);
|
return new PIXI.Sprite(texture);
|
||||||
}
|
};
|
||||||
|
|
|
@ -9,59 +9,59 @@
|
||||||
* @extends DisplayObjectContainer
|
* @extends DisplayObjectContainer
|
||||||
* @constructor
|
* @constructor
|
||||||
* @param backgroundColor {Number} the background color of the stage, easiest way to pass this in is in hex format
|
* @param backgroundColor {Number} the background color of the stage, easiest way to pass this in is in hex format
|
||||||
* like: 0xFFFFFF for white
|
* like: 0xFFFFFF for white
|
||||||
*/
|
*/
|
||||||
PIXI.Stage = function(backgroundColor)
|
PIXI.Stage = function(backgroundColor)
|
||||||
{
|
{
|
||||||
PIXI.DisplayObjectContainer.call( this );
|
PIXI.DisplayObjectContainer.call( this );
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [read-only] Current transform of the object based on world (parent) factors
|
* [read-only] Current transform of the object based on world (parent) factors
|
||||||
*
|
*
|
||||||
* @property worldTransform
|
* @property worldTransform
|
||||||
* @type Mat3
|
* @type Mat3
|
||||||
* @readOnly
|
* @readOnly
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
this.worldTransform = PIXI.mat3.create();
|
this.worldTransform = PIXI.mat3.create();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Whether or not the stage is interactive
|
* Whether or not the stage is interactive
|
||||||
*
|
*
|
||||||
* @property interactive
|
* @property interactive
|
||||||
* @type Boolean
|
* @type Boolean
|
||||||
*/
|
*/
|
||||||
this.interactive = true;
|
this.interactive = true;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The interaction manage for this stage, manages all interactive activity on the stage
|
* The interaction manage for this stage, manages all interactive activity on the stage
|
||||||
*
|
*
|
||||||
* @property interactive
|
* @property interactive
|
||||||
* @type InteractionManager
|
* @type InteractionManager
|
||||||
*/
|
*/
|
||||||
this.interactionManager = new PIXI.InteractionManager(this);
|
this.interactionManager = new PIXI.InteractionManager(this);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Whether the stage is dirty and needs to have interactions updated
|
* Whether the stage is dirty and needs to have interactions updated
|
||||||
*
|
*
|
||||||
* @property dirty
|
* @property dirty
|
||||||
* @type Boolean
|
* @type Boolean
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
this.dirty = true;
|
this.dirty = true;
|
||||||
|
|
||||||
this.__childrenAdded = [];
|
this.__childrenAdded = [];
|
||||||
this.__childrenRemoved = [];
|
this.__childrenRemoved = [];
|
||||||
|
|
||||||
//the stage is it's own stage
|
//the stage is it's own stage
|
||||||
this.stage = this;
|
this.stage = this;
|
||||||
|
|
||||||
//optimize hit detection a bit
|
//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);
|
||||||
|
|
||||||
this.setBackgroundColor(backgroundColor);
|
this.setBackgroundColor(backgroundColor);
|
||||||
this.worldVisible = true;
|
this.worldVisible = true;
|
||||||
}
|
};
|
||||||
|
|
||||||
// constructor
|
// constructor
|
||||||
PIXI.Stage.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
|
PIXI.Stage.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
|
||||||
|
@ -76,8 +76,8 @@ PIXI.Stage.prototype.constructor = PIXI.Stage;
|
||||||
*/
|
*/
|
||||||
PIXI.Stage.prototype.setInteractionDelegate = function(domElement)
|
PIXI.Stage.prototype.setInteractionDelegate = function(domElement)
|
||||||
{
|
{
|
||||||
this.interactionManager.setTargetDomElement( domElement );
|
this.interactionManager.setTargetDomElement( domElement );
|
||||||
}
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Updates the object transform for rendering
|
* Updates the object transform for rendering
|
||||||
|
@ -87,40 +87,40 @@ PIXI.Stage.prototype.setInteractionDelegate = function(domElement)
|
||||||
*/
|
*/
|
||||||
PIXI.Stage.prototype.updateTransform = function()
|
PIXI.Stage.prototype.updateTransform = function()
|
||||||
{
|
{
|
||||||
this.worldAlpha = 1;
|
this.worldAlpha = 1;
|
||||||
this.vcount = PIXI.visibleCount;
|
this.vcount = PIXI.visibleCount;
|
||||||
|
|
||||||
for(var i=0,j=this.children.length; i<j; i++)
|
for(var i=0,j=this.children.length; i<j; i++)
|
||||||
{
|
{
|
||||||
this.children[i].updateTransform();
|
this.children[i].updateTransform();
|
||||||
}
|
}
|
||||||
|
|
||||||
if(this.dirty)
|
if(this.dirty)
|
||||||
{
|
{
|
||||||
this.dirty = false;
|
this.dirty = false;
|
||||||
// update interactive!
|
// update interactive!
|
||||||
this.interactionManager.dirty = true;
|
this.interactionManager.dirty = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
if(this.interactive)this.interactionManager.update();
|
if(this.interactive)this.interactionManager.update();
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Sets the background color for the stage
|
* Sets the background color for the stage
|
||||||
*
|
*
|
||||||
* @method setBackgroundColor
|
* @method setBackgroundColor
|
||||||
* @param backgroundColor {Number} the color of the background, easiest way to pass this in is in hex format
|
* @param backgroundColor {Number} the color of the background, easiest way to pass this in is in hex format
|
||||||
* like: 0xFFFFFF for white
|
* like: 0xFFFFFF for white
|
||||||
*/
|
*/
|
||||||
PIXI.Stage.prototype.setBackgroundColor = function(backgroundColor)
|
PIXI.Stage.prototype.setBackgroundColor = function(backgroundColor)
|
||||||
{
|
{
|
||||||
this.backgroundColor = backgroundColor || 0x000000;
|
this.backgroundColor = backgroundColor || 0x000000;
|
||||||
this.backgroundColorSplit = HEXtoRGB(this.backgroundColor);
|
this.backgroundColorSplit = PIXI.hex2rgb(this.backgroundColor);
|
||||||
var hex = this.backgroundColor.toString(16);
|
var hex = this.backgroundColor.toString(16);
|
||||||
hex = "000000".substr(0, 6 - hex.length) + hex;
|
hex = '000000'.substr(0, 6 - hex.length) + hex;
|
||||||
this.backgroundColorString = "#" + hex;
|
this.backgroundColorString = '#' + hex;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This will return the point containing global coords of the mouse.
|
* This will return the point containing global coords of the mouse.
|
||||||
|
@ -130,5 +130,5 @@ PIXI.Stage.prototype.setBackgroundColor = function(backgroundColor)
|
||||||
*/
|
*/
|
||||||
PIXI.Stage.prototype.getMousePosition = function()
|
PIXI.Stage.prototype.getMousePosition = function()
|
||||||
{
|
{
|
||||||
return this.interactionManager.mouse.global;
|
return this.interactionManager.mouse.global;
|
||||||
}
|
};
|
||||||
|
|
|
@ -12,10 +12,10 @@
|
||||||
*/
|
*/
|
||||||
PIXI.CustomRenderable = function()
|
PIXI.CustomRenderable = function()
|
||||||
{
|
{
|
||||||
PIXI.DisplayObject.call( this );
|
PIXI.DisplayObject.call( this );
|
||||||
|
|
||||||
this.renderable = true;
|
this.renderable = true;
|
||||||
}
|
};
|
||||||
|
|
||||||
// constructor
|
// constructor
|
||||||
PIXI.CustomRenderable.prototype = Object.create( PIXI.DisplayObject.prototype );
|
PIXI.CustomRenderable.prototype = Object.create( PIXI.DisplayObject.prototype );
|
||||||
|
@ -27,10 +27,10 @@ PIXI.CustomRenderable.prototype.constructor = PIXI.CustomRenderable;
|
||||||
* @method renderCanvas
|
* @method renderCanvas
|
||||||
* @param renderer {CanvasRenderer} The renderer instance
|
* @param renderer {CanvasRenderer} The renderer instance
|
||||||
*/
|
*/
|
||||||
PIXI.CustomRenderable.prototype.renderCanvas = function(renderer)
|
PIXI.CustomRenderable.prototype.renderCanvas = function()
|
||||||
{
|
{
|
||||||
// override!
|
// override!
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* If this object is being rendered by a WebGLRenderer it will call this callback to initialize
|
* If this object is being rendered by a WebGLRenderer it will call this callback to initialize
|
||||||
|
@ -38,20 +38,21 @@ PIXI.CustomRenderable.prototype.renderCanvas = function(renderer)
|
||||||
* @method initWebGL
|
* @method initWebGL
|
||||||
* @param renderer {WebGLRenderer} The renderer instance
|
* @param renderer {WebGLRenderer} The renderer instance
|
||||||
*/
|
*/
|
||||||
PIXI.CustomRenderable.prototype.initWebGL = function(renderer)
|
PIXI.CustomRenderable.prototype.initWebGL = function()
|
||||||
{
|
{
|
||||||
// override!
|
// override!
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* If this object is being rendered by a WebGLRenderer it will call this callback
|
* If this object is being rendered by a WebGLRenderer it will call this callback
|
||||||
*
|
*
|
||||||
* @method renderWebGL
|
* @method renderWebGL
|
||||||
* @param renderer {WebGLRenderer} The renderer instance
|
* @param rendererGroup {WebGLRenderGroup} The renderer group instance
|
||||||
|
* @param projectionMatrix {Matrix} The object's projection matrix
|
||||||
*/
|
*/
|
||||||
PIXI.CustomRenderable.prototype.renderWebGL = function(renderGroup, projectionMatrix)
|
PIXI.CustomRenderable.prototype.renderWebGL = function()
|
||||||
{
|
{
|
||||||
// not sure if both needed? but ya have for now!
|
// not sure if both needed? but ya have for now!
|
||||||
// override!
|
// override!
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
|
@ -2,30 +2,28 @@
|
||||||
* @author Mat Groves http://matgroves.com/
|
* @author Mat Groves http://matgroves.com/
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
PIXI.Rope = function(texture, points)
|
PIXI.Rope = function(texture, points)
|
||||||
{
|
{
|
||||||
PIXI.Strip.call( this, texture );
|
PIXI.Strip.call( this, texture );
|
||||||
this.points = points;
|
this.points = points;
|
||||||
|
|
||||||
try
|
try
|
||||||
{
|
{
|
||||||
this.verticies = new Float32Array( points.length * 4);
|
this.verticies = new Float32Array(points.length * 4);
|
||||||
this.uvs = new Float32Array( points.length * 4);
|
this.uvs = new Float32Array(points.length * 4);
|
||||||
this.colors = new Float32Array( points.length * 2);
|
this.colors = new Float32Array(points.length * 2);
|
||||||
this.indices = new Uint16Array( points.length * 2);
|
this.indices = new Uint16Array(points.length * 2);
|
||||||
}
|
}
|
||||||
catch(error)
|
catch(error)
|
||||||
{
|
{
|
||||||
this.verticies = verticies
|
this.verticies = new Array(points.length * 4);
|
||||||
|
this.uvs = new Array(points.length * 4);
|
||||||
|
this.colors = new Array(points.length * 2);
|
||||||
|
this.indices = new Array(points.length * 2);
|
||||||
|
}
|
||||||
|
|
||||||
this.uvs = uvs
|
this.refresh();
|
||||||
this.colors = colors
|
};
|
||||||
this.indices = indices
|
|
||||||
}
|
|
||||||
|
|
||||||
this.refresh();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// constructor
|
// constructor
|
||||||
|
@ -34,142 +32,135 @@ PIXI.Rope.prototype.constructor = PIXI.Rope;
|
||||||
|
|
||||||
PIXI.Rope.prototype.refresh = function()
|
PIXI.Rope.prototype.refresh = function()
|
||||||
{
|
{
|
||||||
var points = this.points;
|
var points = this.points;
|
||||||
if(points.length < 1)return;
|
if(points.length < 1) return;
|
||||||
|
|
||||||
var uvs = this.uvs
|
var uvs = this.uvs;
|
||||||
var indices = this.indices;
|
|
||||||
var colors = this.colors;
|
|
||||||
|
|
||||||
var lastPoint = points[0];
|
var lastPoint = points[0];
|
||||||
var nextPoint;
|
var indices = this.indices;
|
||||||
var perp = {x:0, y:0};
|
var colors = this.colors;
|
||||||
var point = points[0];
|
|
||||||
|
|
||||||
this.count-=0.2;
|
this.count-=0.2;
|
||||||
|
|
||||||
|
|
||||||
uvs[0] = 0
|
uvs[0] = 0;
|
||||||
uvs[1] = 1
|
uvs[1] = 1;
|
||||||
uvs[2] = 0
|
uvs[2] = 0;
|
||||||
uvs[3] = 1
|
uvs[3] = 1;
|
||||||
|
|
||||||
colors[0] = 1;
|
colors[0] = 1;
|
||||||
colors[1] = 1;
|
colors[1] = 1;
|
||||||
|
|
||||||
indices[0] = 0;
|
indices[0] = 0;
|
||||||
indices[1] = 1;
|
indices[1] = 1;
|
||||||
|
|
||||||
var total = points.length;
|
var total = points.length,
|
||||||
|
point, index, amount;
|
||||||
|
|
||||||
for (var i = 1; i < total; i++)
|
for (var i = 1; i < total; i++)
|
||||||
{
|
{
|
||||||
|
|
||||||
var point = points[i];
|
point = points[i];
|
||||||
var index = i * 4;
|
index = i * 4;
|
||||||
// time to do some smart drawing!
|
// time to do some smart drawing!
|
||||||
var amount = i/(total-1)
|
amount = i / (total-1);
|
||||||
|
|
||||||
if(i%2)
|
if(i%2)
|
||||||
{
|
{
|
||||||
uvs[index] = amount;
|
uvs[index] = amount;
|
||||||
uvs[index+1] = 0;
|
uvs[index+1] = 0;
|
||||||
|
|
||||||
uvs[index+2] = amount
|
uvs[index+2] = amount;
|
||||||
uvs[index+3] = 1
|
uvs[index+3] = 1;
|
||||||
|
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
uvs[index] = amount
|
uvs[index] = amount;
|
||||||
uvs[index+1] = 0
|
uvs[index+1] = 0;
|
||||||
|
|
||||||
uvs[index+2] = amount
|
uvs[index+2] = amount;
|
||||||
uvs[index+3] = 1
|
uvs[index+3] = 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
index = i * 2;
|
index = i * 2;
|
||||||
colors[index] = 1;
|
colors[index] = 1;
|
||||||
colors[index+1] = 1;
|
colors[index+1] = 1;
|
||||||
|
|
||||||
index = i * 2;
|
index = i * 2;
|
||||||
indices[index] = index;
|
indices[index] = index;
|
||||||
indices[index + 1] = index + 1;
|
indices[index + 1] = index + 1;
|
||||||
|
|
||||||
lastPoint = point;
|
lastPoint = point;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.Rope.prototype.updateTransform = function()
|
PIXI.Rope.prototype.updateTransform = function()
|
||||||
{
|
{
|
||||||
|
|
||||||
var points = this.points;
|
var points = this.points;
|
||||||
if(points.length < 1)return;
|
if(points.length < 1)return;
|
||||||
|
|
||||||
var verticies = this.verticies
|
var lastPoint = points[0];
|
||||||
|
var nextPoint;
|
||||||
|
var perp = {x:0, y:0};
|
||||||
|
|
||||||
var lastPoint = points[0];
|
this.count-=0.2;
|
||||||
var nextPoint;
|
|
||||||
var perp = {x:0, y:0};
|
|
||||||
var point = points[0];
|
|
||||||
|
|
||||||
this.count-=0.2;
|
var verticies = this.verticies;
|
||||||
|
verticies[0] = lastPoint.x + perp.x;
|
||||||
|
verticies[1] = lastPoint.y + perp.y; //+ 200
|
||||||
|
verticies[2] = lastPoint.x - perp.x;
|
||||||
|
verticies[3] = lastPoint.y - perp.y;//+200
|
||||||
|
// time to do some smart drawing!
|
||||||
|
|
||||||
verticies[0] = point.x + perp.x
|
var total = points.length,
|
||||||
verticies[1] = point.y + perp.y //+ 200
|
point, index, ratio, perpLength, num;
|
||||||
verticies[2] = point.x - perp.x
|
|
||||||
verticies[3] = point.y - perp.y//+200
|
|
||||||
// time to do some smart drawing!
|
|
||||||
|
|
||||||
var total = points.length;
|
for (var i = 1; i < total; i++)
|
||||||
|
{
|
||||||
|
point = points[i];
|
||||||
|
index = i * 4;
|
||||||
|
|
||||||
for (var i = 1; i < total; i++)
|
if(i < points.length-1)
|
||||||
{
|
{
|
||||||
|
nextPoint = points[i+1];
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
nextPoint = point;
|
||||||
|
}
|
||||||
|
|
||||||
var point = points[i];
|
perp.y = -(nextPoint.x - lastPoint.x);
|
||||||
var index = i * 4;
|
perp.x = nextPoint.y - lastPoint.y;
|
||||||
|
|
||||||
if(i < points.length-1)
|
ratio = (1 - (i / (total-1))) * 10;
|
||||||
{
|
|
||||||
nextPoint = points[i+1];
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
nextPoint = point
|
|
||||||
}
|
|
||||||
|
|
||||||
perp.y = -(nextPoint.x - lastPoint.x);
|
if(ratio > 1) ratio = 1;
|
||||||
perp.x = nextPoint.y - lastPoint.y;
|
|
||||||
|
|
||||||
var ratio = (1 - (i / (total-1))) * 10;
|
perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y);
|
||||||
if(ratio > 1)ratio = 1;
|
num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio;
|
||||||
|
perp.x /= perpLength;
|
||||||
|
perp.y /= perpLength;
|
||||||
|
|
||||||
var perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y);
|
perp.x *= num;
|
||||||
var num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio;
|
perp.y *= num;
|
||||||
perp.x /= perpLength;
|
|
||||||
perp.y /= perpLength;
|
|
||||||
|
|
||||||
perp.x *= num;
|
verticies[index] = point.x + perp.x;
|
||||||
perp.y *= num;
|
verticies[index+1] = point.y + perp.y;
|
||||||
|
verticies[index+2] = point.x - perp.x;
|
||||||
|
verticies[index+3] = point.y - perp.y;
|
||||||
|
|
||||||
verticies[index] = point.x + perp.x
|
lastPoint = point;
|
||||||
verticies[index+1] = point.y + perp.y
|
}
|
||||||
verticies[index+2] = point.x - perp.x
|
|
||||||
verticies[index+3] = point.y - perp.y
|
|
||||||
|
|
||||||
lastPoint = point;
|
PIXI.DisplayObjectContainer.prototype.updateTransform.call( this );
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.DisplayObjectContainer.prototype.updateTransform.call( this );
|
|
||||||
}
|
|
||||||
|
|
||||||
PIXI.Rope.prototype.setTexture = function(texture)
|
PIXI.Rope.prototype.setTexture = function(texture)
|
||||||
{
|
{
|
||||||
// stop current texture
|
// stop current texture
|
||||||
this.texture = texture;
|
this.texture = texture;
|
||||||
this.updateFrame = true;
|
this.updateFrame = true;
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -4,66 +4,66 @@
|
||||||
|
|
||||||
PIXI.Strip = function(texture, width, height)
|
PIXI.Strip = function(texture, width, height)
|
||||||
{
|
{
|
||||||
PIXI.DisplayObjectContainer.call( this );
|
PIXI.DisplayObjectContainer.call( this );
|
||||||
this.texture = texture;
|
this.texture = texture;
|
||||||
this.blendMode = PIXI.blendModes.NORMAL;
|
this.blendMode = PIXI.blendModes.NORMAL;
|
||||||
|
|
||||||
try
|
try
|
||||||
{
|
{
|
||||||
this.uvs = new Float32Array([0, 1,
|
this.uvs = new Float32Array([0, 1,
|
||||||
1, 1,
|
1, 1,
|
||||||
1, 0, 0,1]);
|
1, 0, 0,1]);
|
||||||
|
|
||||||
this.verticies = new Float32Array([0, 0,
|
this.verticies = new Float32Array([0, 0,
|
||||||
0,0,
|
0,0,
|
||||||
0,0, 0,
|
0,0, 0,
|
||||||
0, 0]);
|
0, 0]);
|
||||||
|
|
||||||
this.colors = new Float32Array([1, 1, 1, 1]);
|
this.colors = new Float32Array([1, 1, 1, 1]);
|
||||||
|
|
||||||
this.indices = new Uint16Array([0, 1, 2, 3]);
|
this.indices = new Uint16Array([0, 1, 2, 3]);
|
||||||
}
|
}
|
||||||
catch(error)
|
catch(error)
|
||||||
{
|
{
|
||||||
this.uvs = [0, 1,
|
this.uvs = [0, 1,
|
||||||
1, 1,
|
1, 1,
|
||||||
1, 0, 0,1];
|
1, 0, 0,1];
|
||||||
|
|
||||||
this.verticies = [0, 0,
|
this.verticies = [0, 0,
|
||||||
0,0,
|
0,0,
|
||||||
0,0, 0,
|
0,0, 0,
|
||||||
0, 0];
|
0, 0];
|
||||||
|
|
||||||
this.colors = [1, 1, 1, 1];
|
this.colors = [1, 1, 1, 1];
|
||||||
|
|
||||||
this.indices = [0, 1, 2, 3];
|
this.indices = [0, 1, 2, 3];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
this.uvs = new Float32Array()
|
this.uvs = new Float32Array()
|
||||||
this.verticies = new Float32Array()
|
this.verticies = new Float32Array()
|
||||||
this.colors = new Float32Array()
|
this.colors = new Float32Array()
|
||||||
this.indices = new Uint16Array()
|
this.indices = new Uint16Array()
|
||||||
*/
|
*/
|
||||||
this.width = width;
|
this.width = width;
|
||||||
this.height = height;
|
this.height = height;
|
||||||
|
|
||||||
// load the texture!
|
// load the texture!
|
||||||
if(texture.baseTexture.hasLoaded)
|
if(texture.baseTexture.hasLoaded)
|
||||||
{
|
{
|
||||||
this.width = this.texture.frame.width;
|
this.width = this.texture.frame.width;
|
||||||
this.height = this.texture.frame.height;
|
this.height = this.texture.frame.height;
|
||||||
this.updateFrame = true;
|
this.updateFrame = true;
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
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;
|
||||||
}
|
};
|
||||||
|
|
||||||
// constructor
|
// constructor
|
||||||
PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
|
PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
|
||||||
|
@ -71,19 +71,18 @@ PIXI.Strip.prototype.constructor = PIXI.Strip;
|
||||||
|
|
||||||
PIXI.Strip.prototype.setTexture = function(texture)
|
PIXI.Strip.prototype.setTexture = function(texture)
|
||||||
{
|
{
|
||||||
//TODO SET THE TEXTURES
|
//TODO SET THE TEXTURES
|
||||||
//TODO VISIBILITY
|
//TODO VISIBILITY
|
||||||
|
|
||||||
// stop current texture
|
// stop current texture
|
||||||
this.texture = texture;
|
this.texture = texture;
|
||||||
this.width = texture.frame.width;
|
this.width = texture.frame.width;
|
||||||
this.height = texture.frame.height;
|
this.height = texture.frame.height;
|
||||||
this.updateFrame = true;
|
this.updateFrame = true;
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.Strip.prototype.onTextureUpdate = function(event)
|
PIXI.Strip.prototype.onTextureUpdate = function()
|
||||||
{
|
{
|
||||||
this.updateFrame = true;
|
this.updateFrame = true;
|
||||||
}
|
};
|
||||||
// some helper functions..
|
// some helper functions..
|
||||||
|
|
||||||
|
|
|
@ -14,52 +14,52 @@
|
||||||
*/
|
*/
|
||||||
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
|
* The texture that the sprite is using
|
||||||
*
|
*
|
||||||
* @property texture
|
* @property texture
|
||||||
* @type Texture
|
* @type Texture
|
||||||
*/
|
*/
|
||||||
this.texture = texture;
|
this.texture = texture;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The width of the tiling sprite
|
* The width of the tiling sprite
|
||||||
*
|
*
|
||||||
* @property width
|
* @property width
|
||||||
* @type Number
|
* @type Number
|
||||||
*/
|
*/
|
||||||
this.width = width;
|
this.width = width;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The height of the tiling sprite
|
* The height of the tiling sprite
|
||||||
*
|
*
|
||||||
* @property height
|
* @property height
|
||||||
* @type Number
|
* @type Number
|
||||||
*/
|
*/
|
||||||
this.height = height;
|
this.height = height;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 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.renderable = true;
|
||||||
|
|
||||||
this.blendMode = PIXI.blendModes.NORMAL
|
this.blendMode = PIXI.blendModes.NORMAL;
|
||||||
}
|
};
|
||||||
|
|
||||||
// constructor
|
// constructor
|
||||||
PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
|
PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
|
||||||
|
@ -73,13 +73,13 @@ PIXI.TilingSprite.prototype.constructor = PIXI.TilingSprite;
|
||||||
*/
|
*/
|
||||||
PIXI.TilingSprite.prototype.setTexture = function(texture)
|
PIXI.TilingSprite.prototype.setTexture = function(texture)
|
||||||
{
|
{
|
||||||
//TODO SET THE TEXTURES
|
//TODO SET THE TEXTURES
|
||||||
//TODO VISIBILITY
|
//TODO VISIBILITY
|
||||||
|
|
||||||
// stop current texture
|
// stop current texture
|
||||||
this.texture = texture;
|
this.texture = texture;
|
||||||
this.updateFrame = true;
|
this.updateFrame = true;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* When the texture is updated, this event will fire to update the frame
|
* When the texture is updated, this event will fire to update the frame
|
||||||
|
@ -88,8 +88,7 @@ PIXI.TilingSprite.prototype.setTexture = function(texture)
|
||||||
* @param event
|
* @param event
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
PIXI.TilingSprite.prototype.onTextureUpdate = function(event)
|
PIXI.TilingSprite.prototype.onTextureUpdate = function()
|
||||||
{
|
{
|
||||||
this.updateFrame = true;
|
this.updateFrame = true;
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,6 @@
|
||||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This is the base class for creating a pixi.js filter. Currently only webGL supports filters.
|
* This is the base class for creating a pixi.js filter. Currently only webGL supports filters.
|
||||||
* If you want to make a custom filter this should be your base class.
|
* If you want to make a custom filter this should be your base class.
|
||||||
|
@ -13,25 +12,24 @@
|
||||||
*/
|
*/
|
||||||
PIXI.AbstractFilter = function(fragmentSrc, uniforms)
|
PIXI.AbstractFilter = function(fragmentSrc, uniforms)
|
||||||
{
|
{
|
||||||
/**
|
/**
|
||||||
* An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion.
|
* An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion.
|
||||||
* For example the blur filter has two passes blurX and blurY.
|
* For example the blur filter has two passes blurX and blurY.
|
||||||
* @property passes
|
* @property passes
|
||||||
* @type Array an array of filter objects
|
* @type Array an array of filter objects
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
this.passes = [this];
|
this.passes = [this];
|
||||||
|
|
||||||
|
|
||||||
this.dirty = true;
|
this.dirty = true;
|
||||||
this.padding = 0;
|
this.padding = 0;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@property uniforms
|
@property uniforms
|
||||||
@private
|
@private
|
||||||
*/
|
*/
|
||||||
this.uniforms = uniforms || {};
|
this.uniforms = uniforms || {};
|
||||||
|
|
||||||
this.fragmentSrc = fragmentSrc || [];
|
|
||||||
}
|
|
||||||
|
|
||||||
|
this.fragmentSrc = fragmentSrc || [];
|
||||||
|
};
|
||||||
|
|
|
@ -2,7 +2,6 @@
|
||||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* The BlurFilter applies a Gaussian blur to an object.
|
* The BlurFilter applies a Gaussian blur to an object.
|
||||||
|
@ -13,13 +12,11 @@
|
||||||
*/
|
*/
|
||||||
PIXI.BlurFilter = function()
|
PIXI.BlurFilter = function()
|
||||||
{
|
{
|
||||||
|
this.blurXFilter = new PIXI.BlurXFilter();
|
||||||
|
this.blurYFilter = new PIXI.BlurYFilter();
|
||||||
|
|
||||||
this.blurXFilter = new PIXI.BlurXFilter();
|
this.passes =[this.blurXFilter, this.blurYFilter];
|
||||||
this.blurYFilter = new PIXI.BlurYFilter();
|
};
|
||||||
|
|
||||||
this.passes =[this.blurXFilter, this.blurYFilter];
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Sets the strength of both the blurX and blurY properties simultaneously
|
* Sets the strength of both the blurX and blurY properties simultaneously
|
||||||
|
@ -33,7 +30,7 @@ Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', {
|
||||||
return this.blurXFilter.blur;
|
return this.blurXFilter.blur;
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
this.blurXFilter.blur = this.blurYFilter.blur = value;
|
this.blurXFilter.blur = this.blurYFilter.blur = value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -49,7 +46,7 @@ Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', {
|
||||||
return this.blurXFilter.blur;
|
return this.blurXFilter.blur;
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
this.blurXFilter.blur = value;
|
this.blurXFilter.blur = value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -65,6 +62,6 @@ Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', {
|
||||||
return this.blurYFilter.blur;
|
return this.blurYFilter.blur;
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
this.blurYFilter.blur = value;
|
this.blurYFilter.blur = value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -2,55 +2,52 @@
|
||||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
PIXI.BlurXFilter = function()
|
PIXI.BlurXFilter = function()
|
||||||
{
|
{
|
||||||
PIXI.AbstractFilter.call( this );
|
PIXI.AbstractFilter.call( this );
|
||||||
|
|
||||||
this.passes = [this];
|
this.passes = [this];
|
||||||
|
|
||||||
// set the uniforms
|
// set the uniforms
|
||||||
this.uniforms = {
|
this.uniforms = {
|
||||||
blur: {type: '1f', value: 1/512},
|
blur: {type: '1f', value: 1/512},
|
||||||
};
|
};
|
||||||
|
|
||||||
this.fragmentSrc = [
|
this.fragmentSrc = [
|
||||||
"precision mediump float;",
|
'precision mediump float;',
|
||||||
"varying vec2 vTextureCoord;",
|
'varying vec2 vTextureCoord;',
|
||||||
"varying float vColor;",
|
'varying float vColor;',
|
||||||
"uniform float blur;",
|
'uniform float blur;',
|
||||||
"uniform sampler2D uSampler;",
|
'uniform sampler2D uSampler;',
|
||||||
"void main(void) {",
|
|
||||||
"vec4 sum = vec4(0.0);",
|
|
||||||
|
|
||||||
"sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;",
|
'void main(void) {',
|
||||||
"sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;",
|
' vec4 sum = vec4(0.0);',
|
||||||
"sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;",
|
|
||||||
"sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;",
|
|
||||||
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;",
|
|
||||||
"sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;",
|
|
||||||
"sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;",
|
|
||||||
"sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;",
|
|
||||||
"sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;",
|
|
||||||
|
|
||||||
"gl_FragColor = sum;",
|
' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;',
|
||||||
|
' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;',
|
||||||
|
' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;',
|
||||||
|
' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;',
|
||||||
|
' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;',
|
||||||
|
' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;',
|
||||||
|
' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;',
|
||||||
|
' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;',
|
||||||
|
' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;',
|
||||||
|
|
||||||
"}"
|
' gl_FragColor = sum;',
|
||||||
];
|
'}'
|
||||||
}
|
];
|
||||||
|
};
|
||||||
|
|
||||||
PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
||||||
PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter;
|
PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter;
|
||||||
|
|
||||||
|
|
||||||
Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', {
|
Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', {
|
||||||
get: function() {
|
get: function() {
|
||||||
return this.uniforms.blur.value / (1/7000);
|
return this.uniforms.blur.value / (1/7000);
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
|
|
||||||
this.dirty = true;
|
this.dirty = true;
|
||||||
this.uniforms.blur.value = (1/7000) * value;
|
this.uniforms.blur.value = (1/7000) * value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -2,43 +2,41 @@
|
||||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
PIXI.BlurYFilter = function()
|
PIXI.BlurYFilter = function()
|
||||||
{
|
{
|
||||||
PIXI.AbstractFilter.call( this );
|
PIXI.AbstractFilter.call( this );
|
||||||
|
|
||||||
this.passes = [this];
|
this.passes = [this];
|
||||||
|
|
||||||
// set the uniforms
|
// set the uniforms
|
||||||
this.uniforms = {
|
this.uniforms = {
|
||||||
blur: {type: '1f', value: 1/512},
|
blur: {type: '1f', value: 1/512},
|
||||||
};
|
};
|
||||||
|
|
||||||
this.fragmentSrc = [
|
this.fragmentSrc = [
|
||||||
"precision mediump float;",
|
'precision mediump float;',
|
||||||
"varying vec2 vTextureCoord;",
|
'varying vec2 vTextureCoord;',
|
||||||
"varying float vColor;",
|
'varying float vColor;',
|
||||||
"uniform float blur;",
|
'uniform float blur;',
|
||||||
"uniform sampler2D uSampler;",
|
'uniform sampler2D uSampler;',
|
||||||
"void main(void) {",
|
|
||||||
"vec4 sum = vec4(0.0);",
|
|
||||||
|
|
||||||
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;",
|
'void main(void) {',
|
||||||
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;",
|
' vec4 sum = vec4(0.0);',
|
||||||
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;",
|
|
||||||
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;",
|
|
||||||
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;",
|
|
||||||
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;",
|
|
||||||
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;",
|
|
||||||
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;",
|
|
||||||
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;",
|
|
||||||
|
|
||||||
"gl_FragColor = sum;",
|
' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;',
|
||||||
|
' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;',
|
||||||
|
' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;',
|
||||||
|
' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;',
|
||||||
|
' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;',
|
||||||
|
' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;',
|
||||||
|
' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;',
|
||||||
|
' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;',
|
||||||
|
' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;',
|
||||||
|
|
||||||
"}"
|
' gl_FragColor = sum;',
|
||||||
];
|
'}'
|
||||||
}
|
];
|
||||||
|
};
|
||||||
|
|
||||||
PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
||||||
PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter;
|
PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter;
|
||||||
|
@ -48,7 +46,7 @@ Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', {
|
||||||
return this.uniforms.blur.value / (1/7000);
|
return this.uniforms.blur.value / (1/7000);
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
//this.padding = value;
|
//this.padding = value;
|
||||||
this.uniforms.blur.value = (1/7000) * value;
|
this.uniforms.blur.value = (1/7000) * value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -12,32 +12,32 @@
|
||||||
*/
|
*/
|
||||||
PIXI.ColorMatrixFilter = function()
|
PIXI.ColorMatrixFilter = function()
|
||||||
{
|
{
|
||||||
PIXI.AbstractFilter.call( this );
|
PIXI.AbstractFilter.call( this );
|
||||||
|
|
||||||
this.passes = [this];
|
this.passes = [this];
|
||||||
|
|
||||||
// set the uniforms
|
// set the uniforms
|
||||||
this.uniforms = {
|
this.uniforms = {
|
||||||
matrix: {type: 'mat4', value: [1,0,0,0,
|
matrix: {type: 'mat4', value: [1,0,0,0,
|
||||||
0,1,0,0,
|
0,1,0,0,
|
||||||
0,0,1,0,
|
0,0,1,0,
|
||||||
0,0,0,1]},
|
0,0,0,1]},
|
||||||
};
|
};
|
||||||
|
|
||||||
this.fragmentSrc = [
|
this.fragmentSrc = [
|
||||||
"precision mediump float;",
|
'precision mediump float;',
|
||||||
"varying vec2 vTextureCoord;",
|
'varying vec2 vTextureCoord;',
|
||||||
"varying float vColor;",
|
'varying float vColor;',
|
||||||
"uniform float invert;",
|
'uniform float invert;',
|
||||||
"uniform mat4 matrix;",
|
'uniform mat4 matrix;',
|
||||||
"uniform sampler2D uSampler;",
|
'uniform sampler2D uSampler;',
|
||||||
"void main(void) {",
|
|
||||||
"gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;",
|
|
||||||
"gl_FragColor = gl_FragColor * vColor;",
|
|
||||||
"}"
|
|
||||||
];
|
|
||||||
|
|
||||||
}
|
'void main(void) {',
|
||||||
|
' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;',
|
||||||
|
' gl_FragColor = gl_FragColor * vColor;',
|
||||||
|
'}'
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
||||||
PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter;
|
PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter;
|
||||||
|
@ -54,6 +54,6 @@ Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', {
|
||||||
return this.uniforms.matrix.value;
|
return this.uniforms.matrix.value;
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
this.uniforms.matrix.value = value;
|
this.uniforms.matrix.value = value;
|
||||||
}
|
}
|
||||||
});
|
});
|
|
@ -2,7 +2,6 @@
|
||||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* This turns your displayObjects to black and white.
|
* This turns your displayObjects to black and white.
|
||||||
|
@ -11,28 +10,29 @@
|
||||||
*/
|
*/
|
||||||
PIXI.ColorStepFilter = function()
|
PIXI.ColorStepFilter = function()
|
||||||
{
|
{
|
||||||
PIXI.AbstractFilter.call( this );
|
PIXI.AbstractFilter.call( this );
|
||||||
|
|
||||||
this.passes = [this];
|
this.passes = [this];
|
||||||
|
|
||||||
// set the uniforms
|
// set the uniforms
|
||||||
this.uniforms = {
|
this.uniforms = {
|
||||||
step: {type: '1f', value: 5},
|
step: {type: '1f', value: 5},
|
||||||
};
|
};
|
||||||
|
|
||||||
this.fragmentSrc = [
|
this.fragmentSrc = [
|
||||||
"precision mediump float;",
|
'precision mediump float;',
|
||||||
"varying vec2 vTextureCoord;",
|
'varying vec2 vTextureCoord;',
|
||||||
"varying float vColor;",
|
'varying float vColor;',
|
||||||
"uniform sampler2D uSampler;",
|
'uniform sampler2D uSampler;',
|
||||||
"uniform float step;",
|
'uniform float step;',
|
||||||
"void main(void) {",
|
|
||||||
"vec4 color = texture2D(uSampler, vTextureCoord);",
|
'void main(void) {',
|
||||||
"color = floor(color * step) / step;",
|
' vec4 color = texture2D(uSampler, vTextureCoord);',
|
||||||
"gl_FragColor = color * vColor;",
|
' color = floor(color * step) / step;',
|
||||||
"}"
|
' gl_FragColor = color * vColor;',
|
||||||
];
|
'}'
|
||||||
}
|
];
|
||||||
|
};
|
||||||
|
|
||||||
PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
||||||
PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter;
|
PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter;
|
||||||
|
@ -46,6 +46,6 @@ Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', {
|
||||||
return this.uniforms.step.value;
|
return this.uniforms.step.value;
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
this.uniforms.step.value = value;
|
this.uniforms.step.value = value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -2,58 +2,55 @@
|
||||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
PIXI.CrossHatchFilter = function()
|
PIXI.CrossHatchFilter = function()
|
||||||
{
|
{
|
||||||
PIXI.AbstractFilter.call( this );
|
PIXI.AbstractFilter.call( this );
|
||||||
|
|
||||||
this.passes = [this];
|
this.passes = [this];
|
||||||
|
|
||||||
// set the uniforms
|
// set the uniforms
|
||||||
this.uniforms = {
|
this.uniforms = {
|
||||||
blur: {type: '1f', value: 1/512},
|
blur: {type: '1f', value: 1 / 512},
|
||||||
};
|
};
|
||||||
|
|
||||||
this.fragmentSrc = [
|
this.fragmentSrc = [
|
||||||
"precision mediump float;",
|
'precision mediump float;',
|
||||||
"varying vec2 vTextureCoord;",
|
'varying vec2 vTextureCoord;',
|
||||||
"varying float vColor;",
|
'varying float vColor;',
|
||||||
"uniform float blur;",
|
'uniform float blur;',
|
||||||
"uniform sampler2D uSampler;",
|
'uniform sampler2D uSampler;',
|
||||||
"void main(void) {",
|
|
||||||
|
|
||||||
|
'void main(void) {',
|
||||||
|
' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);',
|
||||||
|
|
||||||
" float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);",
|
' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);',
|
||||||
" ",
|
|
||||||
" gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);",
|
' if (lum < 1.00) {',
|
||||||
" ",
|
' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {',
|
||||||
" if (lum < 1.00) {",
|
' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);',
|
||||||
" if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {",
|
' }',
|
||||||
" gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
|
' }',
|
||||||
" }",
|
|
||||||
" }",
|
' if (lum < 0.75) {',
|
||||||
" ",
|
' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {',
|
||||||
" if (lum < 0.75) {",
|
' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);',
|
||||||
" if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {",
|
' }',
|
||||||
" gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
|
' }',
|
||||||
" }",
|
|
||||||
" }",
|
' if (lum < 0.50) {',
|
||||||
" ",
|
' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {',
|
||||||
" if (lum < 0.50) {",
|
' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);',
|
||||||
" if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {",
|
' }',
|
||||||
" gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
|
' }',
|
||||||
" }",
|
|
||||||
" }",
|
' if (lum < 0.3) {',
|
||||||
" ",
|
' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {',
|
||||||
" if (lum < 0.3) {",
|
' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);',
|
||||||
" if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {",
|
' }',
|
||||||
" gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
|
' }',
|
||||||
" }",
|
'}'
|
||||||
" }",
|
];
|
||||||
"}"
|
};
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
||||||
PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter;
|
PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter;
|
||||||
|
@ -63,7 +60,7 @@ Object.defineProperty(PIXI.CrossHatchFilter.prototype, 'blur', {
|
||||||
return this.uniforms.blur.value / (1/7000);
|
return this.uniforms.blur.value / (1/7000);
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
//this.padding = value;
|
//this.padding = value;
|
||||||
this.uniforms.blur.value = (1/7000) * value;
|
this.uniforms.blur.value = (1/7000) * value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -2,7 +2,6 @@
|
||||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object.
|
* The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object.
|
||||||
|
@ -14,80 +13,75 @@
|
||||||
*/
|
*/
|
||||||
PIXI.DisplacementFilter = function(texture)
|
PIXI.DisplacementFilter = function(texture)
|
||||||
{
|
{
|
||||||
PIXI.AbstractFilter.call( this );
|
PIXI.AbstractFilter.call( this );
|
||||||
|
|
||||||
this.passes = [this];
|
this.passes = [this];
|
||||||
texture.baseTexture._powerOf2 = true;
|
texture.baseTexture._powerOf2 = true;
|
||||||
|
|
||||||
// set the uniforms
|
// set the uniforms
|
||||||
//console.log()
|
//console.log()
|
||||||
this.uniforms = {
|
this.uniforms = {
|
||||||
displacementMap: {type: 'sampler2D', value:texture},
|
displacementMap: {type: 'sampler2D', value:texture},
|
||||||
scale: {type: '2f', value:{x:30, y:30}},
|
scale: {type: '2f', value:{x:30, y:30}},
|
||||||
offset: {type: '2f', value:{x:0, y:0}},
|
offset: {type: '2f', value:{x:0, y:0}},
|
||||||
mapDimensions: {type: '2f', value:{x:1, y:5112}},
|
mapDimensions: {type: '2f', value:{x:1, y:5112}},
|
||||||
dimensions: {type: '4fv', value:[0,0,0,0]}
|
dimensions: {type: '4fv', value:[0,0,0,0]}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if(texture.baseTexture.hasLoaded)
|
||||||
|
{
|
||||||
|
this.uniforms.mapDimensions.value.x = texture.width;
|
||||||
|
this.uniforms.mapDimensions.value.y = texture.height;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
this.boundLoadedFunction = this.onTextureLoaded.bind(this);
|
||||||
|
|
||||||
if(texture.baseTexture.hasLoaded)
|
texture.baseTexture.on('loaded', this.boundLoadedFunction);
|
||||||
{
|
}
|
||||||
this.uniforms.mapDimensions.value.x = texture.width;
|
|
||||||
this.uniforms.mapDimensions.value.y = texture.height;
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
this.boundLoadedFunction = this.onTextureLoaded.bind(this);
|
|
||||||
|
|
||||||
texture.baseTexture.on("loaded", this.boundLoadedFunction);
|
this.fragmentSrc = [
|
||||||
}
|
'precision mediump float;',
|
||||||
|
'varying vec2 vTextureCoord;',
|
||||||
|
'varying float vColor;',
|
||||||
|
'uniform sampler2D displacementMap;',
|
||||||
|
'uniform sampler2D uSampler;',
|
||||||
|
'uniform vec2 scale;',
|
||||||
|
'uniform vec2 offset;',
|
||||||
|
'uniform vec4 dimensions;',
|
||||||
|
'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);',
|
||||||
|
// 'const vec2 textureDimensions = vec2(750.0, 750.0);',
|
||||||
|
|
||||||
this.fragmentSrc = [
|
'void main(void) {',
|
||||||
"precision mediump float;",
|
' vec2 mapCords = vTextureCoord.xy;',
|
||||||
"varying vec2 vTextureCoord;",
|
//' mapCords -= ;',
|
||||||
"varying float vColor;",
|
' mapCords += (dimensions.zw + offset)/ dimensions.xy ;',
|
||||||
"uniform sampler2D displacementMap;",
|
' mapCords.y *= -1.0;',
|
||||||
"uniform sampler2D uSampler;",
|
' mapCords.y += 1.0;',
|
||||||
"uniform vec2 scale;",
|
' vec2 matSample = texture2D(displacementMap, mapCords).xy;',
|
||||||
"uniform vec2 offset;",
|
' matSample -= 0.5;',
|
||||||
"uniform vec4 dimensions;",
|
' matSample *= scale;',
|
||||||
"uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);",
|
' matSample /= mapDimensions;',
|
||||||
// "const vec2 textureDimensions = vec2(750.0, 750.0);",
|
' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));',
|
||||||
|
' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);',
|
||||||
|
' vec2 cord = vTextureCoord;',
|
||||||
|
|
||||||
"void main(void) {",
|
//' gl_FragColor = texture2D(displacementMap, cord);',
|
||||||
"vec2 mapCords = vTextureCoord.xy;",
|
' gl_FragColor = gl_FragColor * vColor;',
|
||||||
// "mapCords -= ;",
|
'}'
|
||||||
"mapCords += (dimensions.zw + offset)/ dimensions.xy ;",
|
];
|
||||||
"mapCords.y *= -1.0;",
|
};
|
||||||
"mapCords.y += 1.0;",
|
|
||||||
"vec2 matSample = texture2D(displacementMap, mapCords).xy;",
|
|
||||||
"matSample -= 0.5;",
|
|
||||||
"matSample *= scale;",
|
|
||||||
"matSample /= mapDimensions;",
|
|
||||||
"gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));",
|
|
||||||
"gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);",
|
|
||||||
"vec2 cord = vTextureCoord;",
|
|
||||||
|
|
||||||
//"gl_FragColor = texture2D(displacementMap, cord);",
|
|
||||||
"gl_FragColor = gl_FragColor * vColor;",
|
|
||||||
|
|
||||||
"}"
|
|
||||||
];
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
||||||
PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter;
|
PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter;
|
||||||
|
|
||||||
PIXI.DisplacementFilter.prototype.onTextureLoaded = function()
|
PIXI.DisplacementFilter.prototype.onTextureLoaded = function()
|
||||||
{
|
{
|
||||||
|
this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width;
|
||||||
|
this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height;
|
||||||
|
|
||||||
this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width;
|
this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction);
|
||||||
this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height;
|
};
|
||||||
|
|
||||||
this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The texture used for the displacemtent map * must be power of 2 texture at the moment
|
* The texture used for the displacemtent map * must be power of 2 texture at the moment
|
||||||
|
@ -100,7 +94,7 @@ Object.defineProperty(PIXI.DisplacementFilter.prototype, 'map', {
|
||||||
return this.uniforms.displacementMap.value;
|
return this.uniforms.displacementMap.value;
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
this.uniforms.displacementMap.value = value;
|
this.uniforms.displacementMap.value = value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -115,7 +109,7 @@ Object.defineProperty(PIXI.DisplacementFilter.prototype, 'scale', {
|
||||||
return this.uniforms.scale.value;
|
return this.uniforms.scale.value;
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
this.uniforms.scale.value = value;
|
this.uniforms.scale.value = value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -130,6 +124,6 @@ Object.defineProperty(PIXI.DisplacementFilter.prototype, 'offset', {
|
||||||
return this.uniforms.offset.value;
|
return this.uniforms.offset.value;
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
this.uniforms.offset.value = value;
|
this.uniforms.offset.value = value;
|
||||||
}
|
}
|
||||||
});
|
});
|
|
@ -5,50 +5,50 @@
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* This filter applies a pixlate effect making display objects appear "blocky"
|
* This filter applies a pixlate effect making display objects appear 'blocky'
|
||||||
* @class PixelateFilter
|
* @class PixelateFilter
|
||||||
* @contructor
|
* @contructor
|
||||||
*/
|
*/
|
||||||
PIXI.DotScreenFilter = function()
|
PIXI.DotScreenFilter = function()
|
||||||
{
|
{
|
||||||
PIXI.AbstractFilter.call( this );
|
PIXI.AbstractFilter.call( this );
|
||||||
|
|
||||||
this.passes = [this];
|
this.passes = [this];
|
||||||
|
|
||||||
// set the uniforms
|
// set the uniforms
|
||||||
this.uniforms = {
|
this.uniforms = {
|
||||||
scale: {type: '1f', value:1},
|
scale: {type: '1f', value:1},
|
||||||
angle: {type: '1f', value:5},
|
angle: {type: '1f', value:5},
|
||||||
dimensions: {type: '4fv', value:[0,0,0,0]}
|
dimensions: {type: '4fv', value:[0,0,0,0]}
|
||||||
};
|
};
|
||||||
|
|
||||||
this.fragmentSrc = [
|
this.fragmentSrc = [
|
||||||
"precision mediump float;",
|
'precision mediump float;',
|
||||||
"varying vec2 vTextureCoord;",
|
'varying vec2 vTextureCoord;',
|
||||||
"varying float vColor;",
|
'varying float vColor;',
|
||||||
"uniform vec4 dimensions;",
|
'uniform vec4 dimensions;',
|
||||||
"uniform sampler2D uSampler;",
|
'uniform sampler2D uSampler;',
|
||||||
|
|
||||||
"uniform float angle;",
|
'uniform float angle;',
|
||||||
"uniform float scale;",
|
'uniform float scale;',
|
||||||
|
|
||||||
"float pattern() {",
|
'float pattern() {',
|
||||||
"float s = sin(angle), c = cos(angle);",
|
' float s = sin(angle), c = cos(angle);',
|
||||||
"vec2 tex = vTextureCoord * dimensions.xy;",
|
' vec2 tex = vTextureCoord * dimensions.xy;',
|
||||||
"vec2 point = vec2(",
|
' vec2 point = vec2(',
|
||||||
"c * tex.x - s * tex.y,",
|
' c * tex.x - s * tex.y,',
|
||||||
"s * tex.x + c * tex.y",
|
' s * tex.x + c * tex.y',
|
||||||
") * scale;",
|
' ) * scale;',
|
||||||
"return (sin(point.x) * sin(point.y)) * 4.0;",
|
' return (sin(point.x) * sin(point.y)) * 4.0;',
|
||||||
"}",
|
'}',
|
||||||
|
|
||||||
"void main() {",
|
'void main() {',
|
||||||
"vec4 color = texture2D(uSampler, vTextureCoord);",
|
' vec4 color = texture2D(uSampler, vTextureCoord);',
|
||||||
"float average = (color.r + color.g + color.b) / 3.0;",
|
' float average = (color.r + color.g + color.b) / 3.0;',
|
||||||
"gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);",
|
' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);',
|
||||||
"}",
|
'}'
|
||||||
];
|
];
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype );
|
PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype );
|
||||||
PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter;
|
PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter;
|
||||||
|
@ -64,8 +64,8 @@ Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', {
|
||||||
return this.uniforms.scale.value;
|
return this.uniforms.scale.value;
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
this.dirty = true;
|
this.dirty = true;
|
||||||
this.uniforms.scale.value = value;
|
this.uniforms.scale.value = value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -80,7 +80,7 @@ Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', {
|
||||||
return this.uniforms.angle.value;
|
return this.uniforms.angle.value;
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
this.dirty = true;
|
this.dirty = true;
|
||||||
this.uniforms.angle.value = value;
|
this.uniforms.angle.value = value;
|
||||||
}
|
}
|
||||||
});
|
});
|
|
@ -6,6 +6,6 @@
|
||||||
|
|
||||||
PIXI.FilterBlock = function()
|
PIXI.FilterBlock = function()
|
||||||
{
|
{
|
||||||
this.visible = true;
|
this.visible = true;
|
||||||
this.renderable = true;
|
this.renderable = true;
|
||||||
}
|
};
|
||||||
|
|
|
@ -2,7 +2,6 @@
|
||||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* This turns your displayObjects to black and white.
|
* This turns your displayObjects to black and white.
|
||||||
|
@ -11,28 +10,29 @@
|
||||||
*/
|
*/
|
||||||
PIXI.GrayFilter = function()
|
PIXI.GrayFilter = function()
|
||||||
{
|
{
|
||||||
PIXI.AbstractFilter.call( this );
|
PIXI.AbstractFilter.call( this );
|
||||||
|
|
||||||
this.passes = [this];
|
this.passes = [this];
|
||||||
|
|
||||||
// set the uniforms
|
// set the uniforms
|
||||||
this.uniforms = {
|
this.uniforms = {
|
||||||
gray: {type: '1f', value: 1},
|
gray: {type: '1f', value: 1},
|
||||||
};
|
};
|
||||||
|
|
||||||
this.fragmentSrc = [
|
this.fragmentSrc = [
|
||||||
"precision mediump float;",
|
'precision mediump float;',
|
||||||
"varying vec2 vTextureCoord;",
|
'varying vec2 vTextureCoord;',
|
||||||
"varying float vColor;",
|
'varying float vColor;',
|
||||||
"uniform sampler2D uSampler;",
|
'uniform sampler2D uSampler;',
|
||||||
"uniform float gray;",
|
'uniform float gray;',
|
||||||
"void main(void) {",
|
|
||||||
"gl_FragColor = texture2D(uSampler, vTextureCoord);",
|
'void main(void) {',
|
||||||
"gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);",
|
' gl_FragColor = texture2D(uSampler, vTextureCoord);',
|
||||||
"gl_FragColor = gl_FragColor * vColor;",
|
' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);',
|
||||||
"}"
|
' gl_FragColor = gl_FragColor * vColor;',
|
||||||
];
|
'}'
|
||||||
}
|
];
|
||||||
|
};
|
||||||
|
|
||||||
PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
||||||
PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter;
|
PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter;
|
||||||
|
@ -46,6 +46,6 @@ Object.defineProperty(PIXI.GrayFilter.prototype, 'gray', {
|
||||||
return this.uniforms.gray.value;
|
return this.uniforms.gray.value;
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
this.uniforms.gray.value = value;
|
this.uniforms.gray.value = value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -10,30 +10,30 @@
|
||||||
*/
|
*/
|
||||||
PIXI.InvertFilter = function()
|
PIXI.InvertFilter = function()
|
||||||
{
|
{
|
||||||
PIXI.AbstractFilter.call( this );
|
PIXI.AbstractFilter.call( this );
|
||||||
|
|
||||||
this.passes = [this];
|
this.passes = [this];
|
||||||
|
|
||||||
// set the uniforms
|
// set the uniforms
|
||||||
this.uniforms = {
|
this.uniforms = {
|
||||||
invert: {type: '1f', value: 1},
|
invert: {type: '1f', value: 1},
|
||||||
};
|
};
|
||||||
|
|
||||||
this.fragmentSrc = [
|
this.fragmentSrc = [
|
||||||
"precision mediump float;",
|
'precision mediump float;',
|
||||||
"varying vec2 vTextureCoord;",
|
'varying vec2 vTextureCoord;',
|
||||||
"varying float vColor;",
|
'varying float vColor;',
|
||||||
"uniform float invert;",
|
'uniform float invert;',
|
||||||
"uniform sampler2D uSampler;",
|
'uniform sampler2D uSampler;',
|
||||||
"void main(void) {",
|
|
||||||
"gl_FragColor = texture2D(uSampler, vTextureCoord);",
|
|
||||||
"gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);",
|
|
||||||
//"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;",
|
|
||||||
"gl_FragColor = gl_FragColor * vColor;",
|
|
||||||
"}"
|
|
||||||
];
|
|
||||||
|
|
||||||
}
|
'void main(void) {',
|
||||||
|
' gl_FragColor = texture2D(uSampler, vTextureCoord);',
|
||||||
|
' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);',
|
||||||
|
//' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;',
|
||||||
|
' gl_FragColor = gl_FragColor * vColor;',
|
||||||
|
'}'
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
||||||
PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter;
|
PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter;
|
||||||
|
@ -47,6 +47,6 @@ Object.defineProperty(PIXI.InvertFilter.prototype, 'invert', {
|
||||||
return this.uniforms.invert.value;
|
return this.uniforms.invert.value;
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
this.uniforms.invert.value = value;
|
this.uniforms.invert.value = value;
|
||||||
}
|
}
|
||||||
});
|
});
|
|
@ -4,43 +4,42 @@
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* This filter applies a pixlate effect making display objects appear "blocky"
|
* This filter applies a pixlate effect making display objects appear 'blocky'
|
||||||
* @class PixelateFilter
|
* @class PixelateFilter
|
||||||
* @contructor
|
* @contructor
|
||||||
*/
|
*/
|
||||||
PIXI.PixelateFilter = function()
|
PIXI.PixelateFilter = function()
|
||||||
{
|
{
|
||||||
PIXI.AbstractFilter.call( this );
|
PIXI.AbstractFilter.call( this );
|
||||||
|
|
||||||
this.passes = [this];
|
this.passes = [this];
|
||||||
|
|
||||||
// set the uniforms
|
// set the uniforms
|
||||||
this.uniforms = {
|
this.uniforms = {
|
||||||
invert: {type: '1f', value: 0},
|
invert: {type: '1f', value: 0},
|
||||||
dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])},
|
dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])},
|
||||||
pixelSize: {type: '2f', value:{x:10, y:10}},
|
pixelSize: {type: '2f', value:{x:10, y:10}},
|
||||||
};
|
};
|
||||||
|
|
||||||
this.fragmentSrc = [
|
this.fragmentSrc = [
|
||||||
"precision mediump float;",
|
'precision mediump float;',
|
||||||
"varying vec2 vTextureCoord;",
|
'varying vec2 vTextureCoord;',
|
||||||
"varying float vColor;",
|
'varying float vColor;',
|
||||||
"uniform vec2 testDim;",
|
'uniform vec2 testDim;',
|
||||||
"uniform vec4 dimensions;",
|
'uniform vec4 dimensions;',
|
||||||
"uniform vec2 pixelSize;",
|
'uniform vec2 pixelSize;',
|
||||||
"uniform sampler2D uSampler;",
|
'uniform sampler2D uSampler;',
|
||||||
"void main(void) {",
|
|
||||||
"vec2 coord = vTextureCoord;",
|
|
||||||
|
|
||||||
"vec2 size = dimensions.xy/pixelSize;",
|
'void main(void) {',
|
||||||
|
' vec2 coord = vTextureCoord;',
|
||||||
|
|
||||||
"vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;",
|
' vec2 size = dimensions.xy/pixelSize;',
|
||||||
"gl_FragColor = texture2D(uSampler, color);",
|
|
||||||
"}"
|
|
||||||
];
|
|
||||||
|
|
||||||
|
' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;',
|
||||||
}
|
' gl_FragColor = texture2D(uSampler, color);',
|
||||||
|
'}'
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
||||||
PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter;
|
PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter;
|
||||||
|
@ -56,7 +55,7 @@ Object.defineProperty(PIXI.PixelateFilter.prototype, 'size', {
|
||||||
return this.uniforms.pixelSize.value;
|
return this.uniforms.pixelSize.value;
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
this.dirty = true;
|
this.dirty = true;
|
||||||
this.uniforms.pixelSize.value = value;
|
this.uniforms.pixelSize.value = value;
|
||||||
}
|
}
|
||||||
});
|
});
|
|
@ -2,39 +2,38 @@
|
||||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
PIXI.RGBSplitFilter = function()
|
PIXI.RGBSplitFilter = function()
|
||||||
{
|
{
|
||||||
PIXI.AbstractFilter.call( this );
|
PIXI.AbstractFilter.call( this );
|
||||||
|
|
||||||
this.passes = [this];
|
this.passes = [this];
|
||||||
|
|
||||||
// set the uniforms
|
// set the uniforms
|
||||||
this.uniforms = {
|
this.uniforms = {
|
||||||
red: {type: '2f', value: {x:20, y:20}},
|
red: {type: '2f', value: {x:20, y:20}},
|
||||||
green: {type: '2f', value: {x:-20, y:20}},
|
green: {type: '2f', value: {x:-20, y:20}},
|
||||||
blue: {type: '2f', value: {x:20, y:-20}},
|
blue: {type: '2f', value: {x:20, y:-20}},
|
||||||
dimensions: {type: '4fv', value:[0,0,0,0]}
|
dimensions: {type: '4fv', value:[0,0,0,0]}
|
||||||
};
|
};
|
||||||
|
|
||||||
this.fragmentSrc = [
|
this.fragmentSrc = [
|
||||||
"precision mediump float;",
|
'precision mediump float;',
|
||||||
"varying vec2 vTextureCoord;",
|
'varying vec2 vTextureCoord;',
|
||||||
"varying float vColor;",
|
'varying float vColor;',
|
||||||
"uniform vec2 red;",
|
'uniform vec2 red;',
|
||||||
"uniform vec2 green;",
|
'uniform vec2 green;',
|
||||||
"uniform vec2 blue;",
|
'uniform vec2 blue;',
|
||||||
"uniform vec4 dimensions;",
|
'uniform vec4 dimensions;',
|
||||||
"uniform sampler2D uSampler;",
|
'uniform sampler2D uSampler;',
|
||||||
"void main(void) {",
|
|
||||||
"gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;",
|
'void main(void) {',
|
||||||
"gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;",
|
' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;',
|
||||||
"gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;",
|
' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;',
|
||||||
"gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;",
|
' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;',
|
||||||
"}"
|
' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;',
|
||||||
];
|
'}'
|
||||||
}
|
];
|
||||||
|
};
|
||||||
|
|
||||||
PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
||||||
PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter;
|
PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter;
|
||||||
|
@ -44,7 +43,7 @@ Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'angle', {
|
||||||
return this.uniforms.blur.value / (1/7000);
|
return this.uniforms.blur.value / (1/7000);
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
//this.padding = value;
|
//this.padding = value;
|
||||||
this.uniforms.blur.value = (1/7000) * value;
|
this.uniforms.blur.value = (1/7000) * value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,9 +1,7 @@
|
||||||
/**
|
|
||||||
/**
|
/**
|
||||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* This applies a sepia effect to your displayObjects.
|
* This applies a sepia effect to your displayObjects.
|
||||||
|
@ -12,31 +10,31 @@
|
||||||
*/
|
*/
|
||||||
PIXI.SepiaFilter = function()
|
PIXI.SepiaFilter = function()
|
||||||
{
|
{
|
||||||
PIXI.AbstractFilter.call( this );
|
PIXI.AbstractFilter.call( this );
|
||||||
|
|
||||||
this.passes = [this];
|
this.passes = [this];
|
||||||
|
|
||||||
// set the uniforms
|
// set the uniforms
|
||||||
this.uniforms = {
|
this.uniforms = {
|
||||||
sepia: {type: '1f', value: 1},
|
sepia: {type: '1f', value: 1},
|
||||||
};
|
};
|
||||||
|
|
||||||
this.fragmentSrc = [
|
this.fragmentSrc = [
|
||||||
"precision mediump float;",
|
'precision mediump float;',
|
||||||
"varying vec2 vTextureCoord;",
|
'varying vec2 vTextureCoord;',
|
||||||
"varying float vColor;",
|
'varying float vColor;',
|
||||||
"uniform float sepia;",
|
'uniform float sepia;',
|
||||||
"uniform sampler2D uSampler;",
|
'uniform sampler2D uSampler;',
|
||||||
|
|
||||||
"const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);",
|
'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);',
|
||||||
"void main(void) {",
|
|
||||||
"gl_FragColor = texture2D(uSampler, vTextureCoord);",
|
|
||||||
"gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);",
|
|
||||||
"gl_FragColor = gl_FragColor * vColor;",
|
|
||||||
"}"
|
|
||||||
];
|
|
||||||
|
|
||||||
}
|
'void main(void) {',
|
||||||
|
' gl_FragColor = texture2D(uSampler, vTextureCoord);',
|
||||||
|
' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);',
|
||||||
|
' gl_FragColor = gl_FragColor * vColor;',
|
||||||
|
'}'
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
||||||
PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter;
|
PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter;
|
||||||
|
@ -50,6 +48,6 @@ Object.defineProperty(PIXI.SepiaFilter.prototype, 'sepia', {
|
||||||
return this.uniforms.sepia.value;
|
return this.uniforms.sepia.value;
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
this.uniforms.sepia.value = value;
|
this.uniforms.sepia.value = value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -2,54 +2,51 @@
|
||||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
PIXI.SmartBlurFilter = function()
|
PIXI.SmartBlurFilter = function()
|
||||||
{
|
{
|
||||||
PIXI.AbstractFilter.call( this );
|
PIXI.AbstractFilter.call( this );
|
||||||
|
|
||||||
this.passes = [this];
|
this.passes = [this];
|
||||||
|
|
||||||
// set the uniforms
|
// set the uniforms
|
||||||
this.uniforms = {
|
this.uniforms = {
|
||||||
blur: {type: '1f', value: 1/512},
|
blur: {type: '1f', value: 1/512},
|
||||||
};
|
};
|
||||||
|
|
||||||
this.fragmentSrc = [
|
this.fragmentSrc = [
|
||||||
"precision mediump float;",
|
'precision mediump float;',
|
||||||
"varying vec2 vTextureCoord;",
|
'varying vec2 vTextureCoord;',
|
||||||
"uniform sampler2D uSampler;",
|
'uniform sampler2D uSampler;',
|
||||||
// "uniform vec2 delta;",
|
//'uniform vec2 delta;',
|
||||||
"const vec2 delta = vec2(1.0/10.0, 0.0);",
|
'const vec2 delta = vec2(1.0/10.0, 0.0);',
|
||||||
// "uniform float darkness;",
|
//'uniform float darkness;',
|
||||||
|
|
||||||
"float random(vec3 scale, float seed) {",
|
'float random(vec3 scale, float seed) {',
|
||||||
"return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);",
|
' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);',
|
||||||
"}",
|
'}',
|
||||||
|
|
||||||
|
|
||||||
"void main(void) {",
|
'void main(void) {',
|
||||||
|
' vec4 color = vec4(0.0);',
|
||||||
|
' float total = 0.0;',
|
||||||
|
|
||||||
"vec4 color = vec4(0.0);",
|
' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);',
|
||||||
"float total = 0.0;",
|
|
||||||
|
|
||||||
"float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);",
|
' for (float t = -30.0; t <= 30.0; t++) {',
|
||||||
|
' float percent = (t + offset - 0.5) / 30.0;',
|
||||||
|
' float weight = 1.0 - abs(percent);',
|
||||||
|
' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);',
|
||||||
|
' sample.rgb *= sample.a;',
|
||||||
|
' color += sample * weight;',
|
||||||
|
' total += weight;',
|
||||||
|
' }',
|
||||||
|
|
||||||
"for (float t = -30.0; t <= 30.0; t++) {",
|
' gl_FragColor = color / total;',
|
||||||
"float percent = (t + offset - 0.5) / 30.0;",
|
' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;',
|
||||||
"float weight = 1.0 - abs(percent);",
|
//' gl_FragColor.rgb *= darkness;',
|
||||||
"vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);",
|
'}'
|
||||||
"sample.rgb *= sample.a;",
|
];
|
||||||
"color += sample * weight;",
|
};
|
||||||
"total += weight;",
|
|
||||||
"}",
|
|
||||||
|
|
||||||
"gl_FragColor = color / total;",
|
|
||||||
"gl_FragColor.rgb /= gl_FragColor.a + 0.00001;",
|
|
||||||
// "gl_FragColor.rgb *= darkness;",
|
|
||||||
"}"
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
||||||
PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter;
|
PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter;
|
||||||
|
@ -59,6 +56,6 @@ Object.defineProperty(PIXI.SmartBlurFilter.prototype, 'blur', {
|
||||||
return this.uniforms.blur.value;
|
return this.uniforms.blur.value;
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
this.uniforms.blur.value = value;
|
this.uniforms.blur.value = value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -4,52 +4,50 @@
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* This filter applies a pixlate effect making display objects appear "blocky"
|
* This filter applies a pixlate effect making display objects appear 'blocky'
|
||||||
* @class PixelateFilter
|
* @class PixelateFilter
|
||||||
* @contructor
|
* @contructor
|
||||||
*/
|
*/
|
||||||
PIXI.TwistFilter = function()
|
PIXI.TwistFilter = function()
|
||||||
{
|
{
|
||||||
PIXI.AbstractFilter.call( this );
|
PIXI.AbstractFilter.call( this );
|
||||||
|
|
||||||
this.passes = [this];
|
this.passes = [this];
|
||||||
|
|
||||||
// set the uniforms
|
// set the uniforms
|
||||||
this.uniforms = {
|
this.uniforms = {
|
||||||
radius: {type: '1f', value:0.5},
|
radius: {type: '1f', value:0.5},
|
||||||
angle: {type: '1f', value:5},
|
angle: {type: '1f', value:5},
|
||||||
offset: {type: '2f', value:{x:0.5, y:0.5}},
|
offset: {type: '2f', value:{x:0.5, y:0.5}},
|
||||||
};
|
};
|
||||||
|
|
||||||
this.fragmentSrc = [
|
this.fragmentSrc = [
|
||||||
"precision mediump float;",
|
'precision mediump float;',
|
||||||
"varying vec2 vTextureCoord;",
|
'varying vec2 vTextureCoord;',
|
||||||
"varying float vColor;",
|
'varying float vColor;',
|
||||||
"uniform vec4 dimensions;",
|
'uniform vec4 dimensions;',
|
||||||
"uniform sampler2D uSampler;",
|
'uniform sampler2D uSampler;',
|
||||||
|
|
||||||
"uniform float radius;",
|
'uniform float radius;',
|
||||||
"uniform float angle;",
|
'uniform float angle;',
|
||||||
"uniform vec2 offset;",
|
'uniform vec2 offset;',
|
||||||
|
|
||||||
"void main(void) {",
|
'void main(void) {',
|
||||||
"vec2 coord = vTextureCoord - offset;",
|
' vec2 coord = vTextureCoord - offset;',
|
||||||
"float distance = length(coord);",
|
' float distance = length(coord);',
|
||||||
|
|
||||||
"if (distance < radius){",
|
' if (distance < radius) {',
|
||||||
|
' float ratio = (radius - distance) / radius;',
|
||||||
|
' float angleMod = ratio * ratio * angle;',
|
||||||
|
' float s = sin(angleMod);',
|
||||||
|
' float c = cos(angleMod);',
|
||||||
|
' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);',
|
||||||
|
' }',
|
||||||
|
|
||||||
"float ratio = (radius - distance) / radius;",
|
' gl_FragColor = texture2D(uSampler, coord+offset);',
|
||||||
"float angleMod = ratio * ratio * angle;",
|
'}'
|
||||||
"float s = sin(angleMod);",
|
];
|
||||||
"float c = cos(angleMod);",
|
};
|
||||||
"coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);",
|
|
||||||
|
|
||||||
"}",
|
|
||||||
|
|
||||||
"gl_FragColor = texture2D(uSampler, coord+offset);",
|
|
||||||
"}"
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
||||||
PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter;
|
PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter;
|
||||||
|
@ -65,8 +63,8 @@ Object.defineProperty(PIXI.TwistFilter.prototype, 'offset', {
|
||||||
return this.uniforms.offset.value;
|
return this.uniforms.offset.value;
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
this.dirty = true;
|
this.dirty = true;
|
||||||
this.uniforms.offset.value = value;
|
this.uniforms.offset.value = value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -81,8 +79,8 @@ Object.defineProperty(PIXI.TwistFilter.prototype, 'radius', {
|
||||||
return this.uniforms.radius.value;
|
return this.uniforms.radius.value;
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
this.dirty = true;
|
this.dirty = true;
|
||||||
this.uniforms.radius.value = value;
|
this.uniforms.radius.value = value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -97,7 +95,7 @@ Object.defineProperty(PIXI.TwistFilter.prototype, 'angle', {
|
||||||
return this.uniforms.angle.value;
|
return this.uniforms.angle.value;
|
||||||
},
|
},
|
||||||
set: function(value) {
|
set: function(value) {
|
||||||
this.dirty = true;
|
this.dirty = true;
|
||||||
this.uniforms.angle.value = value;
|
this.uniforms.angle.value = value;
|
||||||
}
|
}
|
||||||
});
|
});
|
|
@ -6,29 +6,29 @@
|
||||||
* A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the
|
* 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
|
* 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()
|
* 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
|
||||||
* @uses EventTarget
|
* @uses EventTarget
|
||||||
* @param {Array<String>} assetURLs an array of image/sprite sheet urls that you would like loaded
|
* @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
|
* supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported
|
||||||
* sprite sheet data formats only include "JSON" at this time. Supported bitmap font
|
* sprite sheet data formats only include 'JSON' at this time. Supported bitmap font
|
||||||
* data formats include "xml" and "fnt".
|
* data formats include 'xml' and 'fnt'.
|
||||||
* @param crossorigin {Boolean} Whether requests should be treated as crossorigin
|
* @param crossorigin {Boolean} Whether requests should be treated as crossorigin
|
||||||
*/
|
*/
|
||||||
PIXI.AssetLoader = function(assetURLs, crossorigin)
|
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<String>
|
* @type Array<String>
|
||||||
*/
|
*/
|
||||||
this.assetURLs = assetURLs;
|
this.assetURLs = assetURLs;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Whether the requests should be treated as cross origin
|
* Whether the requests should be treated as cross origin
|
||||||
|
@ -36,7 +36,7 @@ PIXI.AssetLoader = function(assetURLs, crossorigin)
|
||||||
* @property crossorigin
|
* @property crossorigin
|
||||||
* @type Boolean
|
* @type Boolean
|
||||||
*/
|
*/
|
||||||
this.crossorigin = crossorigin;
|
this.crossorigin = crossorigin;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Maps file extension to loader types
|
* Maps file extension to loader types
|
||||||
|
@ -45,17 +45,16 @@ PIXI.AssetLoader = function(assetURLs, crossorigin)
|
||||||
* @type Object
|
* @type Object
|
||||||
*/
|
*/
|
||||||
this.loadersByType = {
|
this.loadersByType = {
|
||||||
"jpg": PIXI.ImageLoader,
|
'jpg': PIXI.ImageLoader,
|
||||||
"jpeg": PIXI.ImageLoader,
|
'jpeg': PIXI.ImageLoader,
|
||||||
"png": PIXI.ImageLoader,
|
'png': PIXI.ImageLoader,
|
||||||
"gif": PIXI.ImageLoader,
|
'gif': PIXI.ImageLoader,
|
||||||
"json": PIXI.JsonLoader,
|
'json': PIXI.JsonLoader,
|
||||||
"anim": PIXI.SpineLoader,
|
'atlas': PIXI.AtlasLoader,
|
||||||
"xml": PIXI.BitmapFontLoader,
|
'anim': PIXI.SpineLoader,
|
||||||
"fnt": PIXI.BitmapFontLoader
|
'xml': PIXI.BitmapFontLoader,
|
||||||
|
'fnt': PIXI.BitmapFontLoader
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -74,29 +73,30 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader;
|
||||||
|
|
||||||
PIXI.AssetLoader.prototype._getDataType = function(str)
|
PIXI.AssetLoader.prototype._getDataType = function(str)
|
||||||
{
|
{
|
||||||
var test = "data:";
|
var test = 'data:';
|
||||||
//starts with 'data:'
|
//starts with 'data:'
|
||||||
var start = str.slice(0, test.length).toLowerCase();
|
var start = str.slice(0, test.length).toLowerCase();
|
||||||
if (start == test) {
|
if (start === test) {
|
||||||
var data = str.slice(test.length);
|
var data = str.slice(test.length);
|
||||||
|
|
||||||
var sepIdx = data.indexOf(',');
|
var sepIdx = data.indexOf(',');
|
||||||
if (sepIdx === -1) //malformed data URI scheme
|
if (sepIdx === -1) //malformed data URI scheme
|
||||||
return null;
|
return null;
|
||||||
|
|
||||||
//e.g. "image/gif;base64" => "image/gif"
|
//e.g. 'image/gif;base64' => 'image/gif'
|
||||||
var info = data.slice(0, sepIdx).split(';')[0];
|
var info = data.slice(0, sepIdx).split(';')[0];
|
||||||
|
|
||||||
//We might need to handle some special cases here...
|
//We might need to handle some special cases here...
|
||||||
//standardize text/plain to "txt" file extension
|
//standardize text/plain to 'txt' file extension
|
||||||
if (!info || info.toLowerCase() == "text/plain")
|
if (!info || info.toLowerCase() === 'text/plain')
|
||||||
return "txt"
|
return 'txt';
|
||||||
|
|
||||||
//User specified mime type, try splitting it by '/'
|
//User specified mime type, try splitting it by '/'
|
||||||
return info.split('/').pop().toLowerCase();
|
return info.split('/').pop().toLowerCase();
|
||||||
}
|
}
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Starts loading the assets sequentially
|
* Starts loading the assets sequentially
|
||||||
|
@ -107,30 +107,31 @@ PIXI.AssetLoader.prototype.load = function()
|
||||||
{
|
{
|
||||||
var scope = this;
|
var scope = this;
|
||||||
|
|
||||||
this.loadCount = this.assetURLs.length;
|
function onLoad() {
|
||||||
|
scope.onAssetLoaded();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.loadCount = this.assetURLs.length;
|
||||||
|
|
||||||
for (var i=0; i < this.assetURLs.length; i++)
|
for (var i=0; i < this.assetURLs.length; i++)
|
||||||
{
|
{
|
||||||
var fileName = this.assetURLs[i];
|
var fileName = this.assetURLs[i];
|
||||||
//first see if we have a data URI scheme..
|
//first see if we have a data URI scheme..
|
||||||
var fileType = this._getDataType(fileName);
|
var fileType = this._getDataType(fileName);
|
||||||
|
|
||||||
//if not, assume it's a file URI
|
//if not, assume it's a file URI
|
||||||
if (!fileType)
|
if (!fileType)
|
||||||
fileType = fileName.split("?").shift().split(".").pop().toLowerCase();
|
fileType = fileName.split('?').shift().split('.').pop().toLowerCase();
|
||||||
|
|
||||||
var loaderClass = this.loadersByType[fileType];
|
var Constructor = this.loadersByType[fileType];
|
||||||
if(!loaderClass)
|
if(!Constructor)
|
||||||
throw new Error(fileType + " is an unsupported file type");
|
throw new Error(fileType + ' is an unsupported file type');
|
||||||
|
|
||||||
var loader = new loaderClass(fileName, this.crossorigin);
|
var loader = new Constructor(fileName, this.crossorigin);
|
||||||
|
|
||||||
loader.addEventListener("loaded", function()
|
loader.addEventListener('loaded', onLoad);
|
||||||
{
|
|
||||||
scope.onAssetLoaded();
|
|
||||||
});
|
|
||||||
loader.load();
|
loader.load();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -142,13 +143,12 @@ PIXI.AssetLoader.prototype.load = function()
|
||||||
PIXI.AssetLoader.prototype.onAssetLoaded = function()
|
PIXI.AssetLoader.prototype.onAssetLoaded = function()
|
||||||
{
|
{
|
||||||
this.loadCount--;
|
this.loadCount--;
|
||||||
this.dispatchEvent({type: "onProgress", content: this});
|
this.dispatchEvent({type: 'onProgress', content: this});
|
||||||
if(this.onProgress) this.onProgress();
|
if (this.onProgress) this.onProgress();
|
||||||
|
|
||||||
if(this.loadCount == 0)
|
if (!this.loadCount)
|
||||||
{
|
{
|
||||||
this.dispatchEvent({type: "onComplete", content: this});
|
this.dispatchEvent({type: 'onComplete', content: this});
|
||||||
if(this.onComplete) this.onComplete();
|
if(this.onComplete) this.onComplete();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
184
src/pixi/loaders/AtlasLoader.js
Normal file
|
@ -0,0 +1,184 @@
|
||||||
|
/**
|
||||||
|
* @author Martin Kelm http://mkelm.github.com
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The atlas file loader is used to load in Atlas data and parsing it
|
||||||
|
* When loaded this class will dispatch a 'loaded' event
|
||||||
|
* If load failed this class will dispatch a 'error' event
|
||||||
|
* @class AtlasLoader
|
||||||
|
* @extends EventTarget
|
||||||
|
* @constructor
|
||||||
|
* @param {String} url the url of the JSON file
|
||||||
|
* @param {Boolean} crossorigin
|
||||||
|
*/
|
||||||
|
|
||||||
|
PIXI.AtlasLoader = function (url, crossorigin) {
|
||||||
|
PIXI.EventTarget.call(this);
|
||||||
|
this.url = url;
|
||||||
|
this.baseUrl = url.replace(/[^\/]*$/, '');
|
||||||
|
this.crossorigin = crossorigin;
|
||||||
|
this.loaded = false;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// constructor
|
||||||
|
PIXI.AtlasLoader.constructor = PIXI.AtlasLoader;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This will begin loading the JSON file
|
||||||
|
*/
|
||||||
|
PIXI.AtlasLoader.prototype.load = function () {
|
||||||
|
this.ajaxRequest = new PIXI.AjaxRequest();
|
||||||
|
this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this);
|
||||||
|
|
||||||
|
this.ajaxRequest.open('GET', this.url, true);
|
||||||
|
if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json');
|
||||||
|
this.ajaxRequest.send(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Invoke when JSON file is loaded
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
PIXI.AtlasLoader.prototype.onAtlasLoaded = function () {
|
||||||
|
if (this.ajaxRequest.readyState === 4) {
|
||||||
|
if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) {
|
||||||
|
this.atlas = {
|
||||||
|
meta : {
|
||||||
|
image : []
|
||||||
|
},
|
||||||
|
frames : []
|
||||||
|
};
|
||||||
|
var result = this.ajaxRequest.responseText.split(/\r?\n/);
|
||||||
|
var lineCount = -3;
|
||||||
|
|
||||||
|
var currentImageId = 0;
|
||||||
|
var currentFrame = null;
|
||||||
|
var nameInNextLine = false;
|
||||||
|
|
||||||
|
var i = 0,
|
||||||
|
j = 0,
|
||||||
|
selfOnLoaded = this.onLoaded.bind(this);
|
||||||
|
|
||||||
|
// parser without rotation support yet!
|
||||||
|
for (i = 0; i < result.length; i++) {
|
||||||
|
result[i] = result[i].replace(/^\s+|\s+$/g, '');
|
||||||
|
if (result[i] === '') {
|
||||||
|
nameInNextLine = i+1;
|
||||||
|
}
|
||||||
|
if (result[i].length > 0) {
|
||||||
|
if (nameInNextLine === i) {
|
||||||
|
this.atlas.meta.image.push(result[i]);
|
||||||
|
currentImageId = this.atlas.meta.image.length - 1;
|
||||||
|
this.atlas.frames.push({});
|
||||||
|
lineCount = -3;
|
||||||
|
} else if (lineCount > 0) {
|
||||||
|
if (lineCount % 7 === 1) { // frame name
|
||||||
|
if (currentFrame != null) { //jshint ignore:line
|
||||||
|
this.atlas.frames[currentImageId][currentFrame.name] = currentFrame;
|
||||||
|
}
|
||||||
|
currentFrame = { name: result[i], frame : {} };
|
||||||
|
} else {
|
||||||
|
var text = result[i].split(' ');
|
||||||
|
if (lineCount % 7 === 3) { // position
|
||||||
|
currentFrame.frame.x = Number(text[1].replace(',', ''));
|
||||||
|
currentFrame.frame.y = Number(text[2]);
|
||||||
|
} else if (lineCount % 7 === 4) { // size
|
||||||
|
currentFrame.frame.w = Number(text[1].replace(',', ''));
|
||||||
|
currentFrame.frame.h = Number(text[2]);
|
||||||
|
} else if (lineCount % 7 === 5) { // real size
|
||||||
|
var realSize = {
|
||||||
|
x : 0,
|
||||||
|
y : 0,
|
||||||
|
w : Number(text[1].replace(',', '')),
|
||||||
|
h : Number(text[2])
|
||||||
|
};
|
||||||
|
|
||||||
|
if (realSize.w > currentFrame.frame.w || realSize.h > currentFrame.frame.h) {
|
||||||
|
currentFrame.trimmed = true;
|
||||||
|
currentFrame.realSize = realSize;
|
||||||
|
} else {
|
||||||
|
currentFrame.trimmed = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
lineCount++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentFrame != null) { //jshint ignore:line
|
||||||
|
this.atlas.frames[currentImageId][currentFrame.name] = currentFrame;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.atlas.meta.image.length > 0) {
|
||||||
|
this.images = [];
|
||||||
|
for (j = 0; j < this.atlas.meta.image.length; j++) {
|
||||||
|
// sprite sheet
|
||||||
|
var textureUrl = this.baseUrl + this.atlas.meta.image[j];
|
||||||
|
var frameData = this.atlas.frames[j];
|
||||||
|
this.images.push(new PIXI.ImageLoader(textureUrl, this.crossorigin));
|
||||||
|
|
||||||
|
for (i in frameData) {
|
||||||
|
var rect = frameData[i].frame;
|
||||||
|
if (rect) {
|
||||||
|
PIXI.TextureCache[i] = new PIXI.Texture(this.images[j].texture.baseTexture, {
|
||||||
|
x: rect.x,
|
||||||
|
y: rect.y,
|
||||||
|
width: rect.w,
|
||||||
|
height: rect.h
|
||||||
|
});
|
||||||
|
if (frameData[i].trimmed) {
|
||||||
|
PIXI.TextureCache[i].realSize = frameData[i].realSize;
|
||||||
|
// trim in pixi not supported yet, todo update trim properties if it is done ...
|
||||||
|
PIXI.TextureCache[i].trim.x = 0;
|
||||||
|
PIXI.TextureCache[i].trim.y = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.currentImageId = 0;
|
||||||
|
for (j = 0; j < this.images.length; j++) {
|
||||||
|
this.images[j].addEventListener('loaded', selfOnLoaded);
|
||||||
|
}
|
||||||
|
this.images[this.currentImageId].load();
|
||||||
|
|
||||||
|
} else {
|
||||||
|
this.onLoaded();
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
this.onError();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Invoke when json file loaded
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
PIXI.AtlasLoader.prototype.onLoaded = function () {
|
||||||
|
if (this.images.length - 1 > this.currentImageId) {
|
||||||
|
this.currentImageId++;
|
||||||
|
this.images[this.currentImageId].load();
|
||||||
|
} else {
|
||||||
|
this.loaded = true;
|
||||||
|
this.dispatchEvent({
|
||||||
|
type: 'loaded',
|
||||||
|
content: this
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Invoke when error occured
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
PIXI.AtlasLoader.prototype.onError = function () {
|
||||||
|
this.dispatchEvent({
|
||||||
|
type: 'error',
|
||||||
|
content: this
|
||||||
|
});
|
||||||
|
};
|
|
@ -3,10 +3,10 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
|
* The xml loader is used to load in XML bitmap font data ('xml' or 'fnt')
|
||||||
* 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
|
||||||
* @uses EventTarget
|
* @uses EventTarget
|
||||||
|
@ -19,7 +19,7 @@ PIXI.BitmapFontLoader = function(url, crossorigin)
|
||||||
/*
|
/*
|
||||||
* i use texture packer to load the assets..
|
* i use texture packer to load the assets..
|
||||||
* http://www.codeandweb.com/texturepacker
|
* http://www.codeandweb.com/texturepacker
|
||||||
* make sure to set the format as "JSON"
|
* make sure to set the format as 'JSON'
|
||||||
*/
|
*/
|
||||||
PIXI.EventTarget.call(this);
|
PIXI.EventTarget.call(this);
|
||||||
|
|
||||||
|
@ -46,7 +46,7 @@ PIXI.BitmapFontLoader = function(url, crossorigin)
|
||||||
* @type String
|
* @type String
|
||||||
* @readOnly
|
* @readOnly
|
||||||
*/
|
*/
|
||||||
this.baseUrl = url.replace(/[^\/]*$/, "");
|
this.baseUrl = url.replace(/[^\/]*$/, '');
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [read-only] The texture of the bitmap font
|
* [read-only] The texture of the bitmap font
|
||||||
|
@ -74,9 +74,9 @@ PIXI.BitmapFontLoader.prototype.load = function()
|
||||||
scope.onXMLLoaded();
|
scope.onXMLLoaded();
|
||||||
};
|
};
|
||||||
|
|
||||||
this.ajaxRequest.open("GET", this.url, true);
|
this.ajaxRequest.open('GET', this.url, true);
|
||||||
if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
|
if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml');
|
||||||
this.ajaxRequest.send(null)
|
this.ajaxRequest.send(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -87,40 +87,40 @@ PIXI.BitmapFontLoader.prototype.load = function()
|
||||||
*/
|
*/
|
||||||
PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
|
PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
|
||||||
{
|
{
|
||||||
if (this.ajaxRequest.readyState == 4)
|
if (this.ajaxRequest.readyState === 4)
|
||||||
{
|
{
|
||||||
if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
|
if (this.ajaxRequest.status === 200 || window.location.protocol.indexOf('http') === -1)
|
||||||
{
|
{
|
||||||
var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
|
var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue;
|
||||||
var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
|
var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
|
||||||
this.texture = image.texture.baseTexture;
|
this.texture = image.texture.baseTexture;
|
||||||
|
|
||||||
var data = {};
|
var data = {};
|
||||||
var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
|
var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0];
|
||||||
var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
|
var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0];
|
||||||
data.font = info.attributes.getNamedItem("face").nodeValue;
|
data.font = info.attributes.getNamedItem('face').nodeValue;
|
||||||
data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
|
data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10);
|
||||||
data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
|
data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10);
|
||||||
data.chars = {};
|
data.chars = {};
|
||||||
|
|
||||||
//parse letters
|
//parse letters
|
||||||
var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
|
var letters = this.ajaxRequest.responseXML.getElementsByTagName('char');
|
||||||
|
|
||||||
for (var i = 0; i < letters.length; i++)
|
for (var i = 0; i < letters.length; i++)
|
||||||
{
|
{
|
||||||
var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
|
var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10);
|
||||||
|
|
||||||
var textureRect = new PIXI.Rectangle(
|
var textureRect = new PIXI.Rectangle(
|
||||||
parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
|
parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10),
|
||||||
parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
|
parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10),
|
||||||
parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
|
parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10),
|
||||||
parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
|
parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10)
|
||||||
);
|
);
|
||||||
|
|
||||||
data.chars[charCode] = {
|
data.chars[charCode] = {
|
||||||
xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
|
xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10),
|
||||||
yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
|
yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10),
|
||||||
xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
|
xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10),
|
||||||
kerning: {},
|
kerning: {},
|
||||||
texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect)
|
texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect)
|
||||||
|
|
||||||
|
@ -128,12 +128,12 @@ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
|
||||||
}
|
}
|
||||||
|
|
||||||
//parse kernings
|
//parse kernings
|
||||||
var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
|
var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning');
|
||||||
for (i = 0; i < kernings.length; i++)
|
for (i = 0; i < kernings.length; i++)
|
||||||
{
|
{
|
||||||
var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
|
var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10);
|
||||||
var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
|
var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10);
|
||||||
var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
|
var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10);
|
||||||
|
|
||||||
data.chars[second].kerning[first] = amount;
|
data.chars[second].kerning[first] = amount;
|
||||||
|
|
||||||
|
@ -142,7 +142,7 @@ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
|
||||||
PIXI.BitmapText.fonts[data.font] = data;
|
PIXI.BitmapText.fonts[data.font] = data;
|
||||||
|
|
||||||
var scope = this;
|
var scope = this;
|
||||||
image.addEventListener("loaded", function() {
|
image.addEventListener('loaded', function() {
|
||||||
scope.onLoaded();
|
scope.onLoaded();
|
||||||
});
|
});
|
||||||
image.load();
|
image.load();
|
||||||
|
@ -158,5 +158,5 @@ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
|
||||||
*/
|
*/
|
||||||
PIXI.BitmapFontLoader.prototype.onLoaded = function()
|
PIXI.BitmapFontLoader.prototype.onLoaded = function()
|
||||||
{
|
{
|
||||||
this.dispatchEvent({type: "loaded", content: this});
|
this.dispatchEvent({type: 'loaded', content: this});
|
||||||
};
|
};
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 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
|
||||||
*
|
*
|
||||||
|
@ -46,7 +46,7 @@ PIXI.ImageLoader.prototype.load = function()
|
||||||
if(!this.texture.baseTexture.hasLoaded)
|
if(!this.texture.baseTexture.hasLoaded)
|
||||||
{
|
{
|
||||||
var scope = this;
|
var scope = this;
|
||||||
this.texture.baseTexture.addEventListener("loaded", function()
|
this.texture.baseTexture.addEventListener('loaded', function()
|
||||||
{
|
{
|
||||||
scope.onLoaded();
|
scope.onLoaded();
|
||||||
});
|
});
|
||||||
|
@ -65,7 +65,7 @@ PIXI.ImageLoader.prototype.load = function()
|
||||||
*/
|
*/
|
||||||
PIXI.ImageLoader.prototype.onLoaded = function()
|
PIXI.ImageLoader.prototype.onLoaded = function()
|
||||||
{
|
{
|
||||||
this.dispatchEvent({type: "loaded", content: this});
|
this.dispatchEvent({type: 'loaded', content: this});
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -96,14 +96,14 @@ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHei
|
||||||
});
|
});
|
||||||
|
|
||||||
this.frames.push(texture);
|
this.frames.push(texture);
|
||||||
if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture;
|
if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if(!this.texture.baseTexture.hasLoaded)
|
if(!this.texture.baseTexture.hasLoaded)
|
||||||
{
|
{
|
||||||
var scope = this;
|
var scope = this;
|
||||||
this.texture.baseTexture.addEventListener("loaded", function() {
|
this.texture.baseTexture.addEventListener('loaded', function() {
|
||||||
scope.onLoaded();
|
scope.onLoaded();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,8 +4,8 @@
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 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
|
||||||
* @uses EventTarget
|
* @uses EventTarget
|
||||||
|
@ -14,41 +14,41 @@
|
||||||
* @param crossorigin {Boolean} Whether requests should be treated as 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
|
* The url of the bitmap font data
|
||||||
*
|
*
|
||||||
* @property url
|
* @property url
|
||||||
* @type String
|
* @type String
|
||||||
*/
|
*/
|
||||||
this.url = url;
|
this.url = url;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Whether the requests should be treated as cross origin
|
* Whether the requests should be treated as cross origin
|
||||||
*
|
*
|
||||||
* @property crossorigin
|
* @property crossorigin
|
||||||
* @type Boolean
|
* @type Boolean
|
||||||
*/
|
*/
|
||||||
this.crossorigin = crossorigin;
|
this.crossorigin = crossorigin;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [read-only] The base url of the bitmap font data
|
* [read-only] The base url of the bitmap font data
|
||||||
*
|
*
|
||||||
* @property baseUrl
|
* @property baseUrl
|
||||||
* @type String
|
* @type String
|
||||||
* @readOnly
|
* @readOnly
|
||||||
*/
|
*/
|
||||||
this.baseUrl = url.replace(/[^\/]*$/, "");
|
this.baseUrl = url.replace(/[^\/]*$/, '');
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [read-only] Whether the data has loaded yet
|
* [read-only] Whether the data has loaded yet
|
||||||
*
|
*
|
||||||
* @property loaded
|
* @property loaded
|
||||||
* @type Boolean
|
* @type Boolean
|
||||||
* @readOnly
|
* @readOnly
|
||||||
*/
|
*/
|
||||||
this.loaded = false;
|
this.loaded = false;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -61,15 +61,15 @@ PIXI.JsonLoader.prototype.constructor = PIXI.JsonLoader;
|
||||||
* @method load
|
* @method load
|
||||||
*/
|
*/
|
||||||
PIXI.JsonLoader.prototype.load = function () {
|
PIXI.JsonLoader.prototype.load = function () {
|
||||||
this.ajaxRequest = new AjaxRequest();
|
this.ajaxRequest = new PIXI.AjaxRequest();
|
||||||
var scope = this;
|
var scope = this;
|
||||||
this.ajaxRequest.onreadystatechange = function () {
|
this.ajaxRequest.onreadystatechange = function () {
|
||||||
scope.onJSONLoaded();
|
scope.onJSONLoaded();
|
||||||
};
|
};
|
||||||
|
|
||||||
this.ajaxRequest.open("GET", this.url, true);
|
this.ajaxRequest.open('GET', this.url, true);
|
||||||
if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json");
|
if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json');
|
||||||
this.ajaxRequest.send(null);
|
this.ajaxRequest.send(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -79,62 +79,62 @@ PIXI.JsonLoader.prototype.load = function () {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
PIXI.JsonLoader.prototype.onJSONLoaded = function () {
|
PIXI.JsonLoader.prototype.onJSONLoaded = function () {
|
||||||
if (this.ajaxRequest.readyState == 4) {
|
if (this.ajaxRequest.readyState === 4) {
|
||||||
if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) {
|
if (this.ajaxRequest.status === 200 || window.location.protocol.indexOf('http') === -1) {
|
||||||
this.json = JSON.parse(this.ajaxRequest.responseText);
|
this.json = JSON.parse(this.ajaxRequest.responseText);
|
||||||
|
|
||||||
if(this.json.frames)
|
if(this.json.frames)
|
||||||
{
|
{
|
||||||
// sprite sheet
|
// sprite sheet
|
||||||
var scope = this;
|
var scope = this;
|
||||||
var textureUrl = this.baseUrl + this.json.meta.image;
|
var textureUrl = this.baseUrl + this.json.meta.image;
|
||||||
var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
|
var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
|
||||||
var frameData = this.json.frames;
|
var frameData = this.json.frames;
|
||||||
|
|
||||||
this.texture = image.texture.baseTexture;
|
this.texture = image.texture.baseTexture;
|
||||||
image.addEventListener("loaded", function (event) {
|
image.addEventListener('loaded', function() {
|
||||||
scope.onLoaded();
|
scope.onLoaded();
|
||||||
});
|
});
|
||||||
|
|
||||||
for (var i in frameData) {
|
for (var i in frameData) {
|
||||||
var rect = frameData[i].frame;
|
var rect = frameData[i].frame;
|
||||||
if (rect) {
|
if (rect) {
|
||||||
PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {
|
PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {
|
||||||
x: rect.x,
|
x: rect.x,
|
||||||
y: rect.y,
|
y: rect.y,
|
||||||
width: rect.w,
|
width: rect.w,
|
||||||
height: rect.h
|
height: rect.h
|
||||||
});
|
});
|
||||||
if (frameData[i].trimmed) {
|
if (frameData[i].trimmed) {
|
||||||
//var realSize = frameData[i].spriteSourceSize;
|
//var realSize = frameData[i].spriteSourceSize;
|
||||||
PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize;
|
PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize;
|
||||||
PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w)
|
PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w)
|
||||||
// calculate the offset!
|
// calculate the offset!
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
image.load();
|
image.load();
|
||||||
|
|
||||||
}
|
}
|
||||||
else if(this.json.bones)
|
else if(this.json.bones)
|
||||||
{
|
{
|
||||||
// spine animation
|
// spine animation
|
||||||
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;
|
||||||
this.onLoaded();
|
this.onLoaded();
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
this.onLoaded();
|
this.onLoaded();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
this.onError();
|
this.onError();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -144,11 +144,11 @@ PIXI.JsonLoader.prototype.onJSONLoaded = function () {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
PIXI.JsonLoader.prototype.onLoaded = function () {
|
PIXI.JsonLoader.prototype.onLoaded = function () {
|
||||||
this.loaded = true;
|
this.loaded = true;
|
||||||
this.dispatchEvent({
|
this.dispatchEvent({
|
||||||
type: "loaded",
|
type: 'loaded',
|
||||||
content: this
|
content: this
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -158,8 +158,8 @@ PIXI.JsonLoader.prototype.onLoaded = function () {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
PIXI.JsonLoader.prototype.onError = function () {
|
PIXI.JsonLoader.prototype.onError = function () {
|
||||||
this.dispatchEvent({
|
this.dispatchEvent({
|
||||||
type: "error",
|
type: 'error',
|
||||||
content: this
|
content: this
|
||||||
});
|
});
|
||||||
};
|
};
|
|
@ -23,33 +23,33 @@
|
||||||
*/
|
*/
|
||||||
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
|
* The url of the bitmap font data
|
||||||
*
|
*
|
||||||
* @property url
|
* @property url
|
||||||
* @type String
|
* @type String
|
||||||
*/
|
*/
|
||||||
this.url = url;
|
this.url = url;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Whether the requests should be treated as cross origin
|
* Whether the requests should be treated as cross origin
|
||||||
*
|
*
|
||||||
* @property crossorigin
|
* @property crossorigin
|
||||||
* @type Boolean
|
* @type Boolean
|
||||||
*/
|
*/
|
||||||
this.crossorigin = crossorigin;
|
this.crossorigin = crossorigin;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [read-only] Whether the data has loaded yet
|
* [read-only] Whether the data has loaded yet
|
||||||
*
|
*
|
||||||
* @property loaded
|
* @property loaded
|
||||||
* @type Boolean
|
* @type Boolean
|
||||||
* @readOnly
|
* @readOnly
|
||||||
*/
|
*/
|
||||||
this.loaded = false;
|
this.loaded = false;
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader;
|
PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader;
|
||||||
|
|
||||||
|
@ -60,13 +60,13 @@ PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader;
|
||||||
*/
|
*/
|
||||||
PIXI.SpineLoader.prototype.load = function () {
|
PIXI.SpineLoader.prototype.load = function () {
|
||||||
|
|
||||||
var scope = this;
|
var scope = this;
|
||||||
var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin);
|
var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin);
|
||||||
jsonLoader.addEventListener("loaded", function (event) {
|
jsonLoader.addEventListener("loaded", function (event) {
|
||||||
scope.json = event.content.json;
|
scope.json = event.content.json;
|
||||||
scope.onJSONLoaded();
|
scope.onJSONLoaded();
|
||||||
});
|
});
|
||||||
jsonLoader.load();
|
jsonLoader.load();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -75,13 +75,13 @@ PIXI.SpineLoader.prototype.load = function () {
|
||||||
* @method onJSONLoaded
|
* @method onJSONLoaded
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
PIXI.SpineLoader.prototype.onJSONLoaded = function (event) {
|
PIXI.SpineLoader.prototype.onJSONLoaded = function () {
|
||||||
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;
|
||||||
|
|
||||||
this.onLoaded();
|
this.onLoaded();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -91,7 +91,7 @@ PIXI.SpineLoader.prototype.onJSONLoaded = function (event) {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
PIXI.SpineLoader.prototype.onLoaded = function () {
|
PIXI.SpineLoader.prototype.onLoaded = function () {
|
||||||
this.loaded = true;
|
this.loaded = true;
|
||||||
this.dispatchEvent({type: "loaded", content: this});
|
this.dispatchEvent({type: "loaded", content: this});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -4,12 +4,12 @@
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The sprite sheet loader is used to load in JSON sprite sheet data
|
* The sprite sheet loader is used to load in JSON sprite sheet data
|
||||||
* To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format
|
* To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format
|
||||||
* There is a free version so thats nice, although the paid version is great value for money.
|
* There is a free version so thats nice, although the paid version is great value for money.
|
||||||
* It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed.
|
* It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.
|
||||||
* 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
|
||||||
* @uses EventTarget
|
* @uses EventTarget
|
||||||
|
@ -17,39 +17,38 @@
|
||||||
* @param url {String} The url of the sprite sheet JSON file
|
* @param url {String} The url of the sprite sheet JSON file
|
||||||
* @param crossorigin {Boolean} Whether requests should be treated as crossorigin
|
* @param crossorigin {Boolean} Whether requests should be treated as crossorigin
|
||||||
*/
|
*/
|
||||||
|
|
||||||
PIXI.SpriteSheetLoader = function (url, crossorigin) {
|
PIXI.SpriteSheetLoader = function (url, crossorigin) {
|
||||||
/*
|
/*
|
||||||
* i use texture packer to load the assets..
|
* i use texture packer to load the assets..
|
||||||
* http://www.codeandweb.com/texturepacker
|
* http://www.codeandweb.com/texturepacker
|
||||||
* 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
|
* The url of the bitmap font data
|
||||||
*
|
*
|
||||||
* @property url
|
* @property url
|
||||||
* @type String
|
* @type String
|
||||||
*/
|
*/
|
||||||
this.url = url;
|
this.url = url;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Whether the requests should be treated as cross origin
|
* Whether the requests should be treated as cross origin
|
||||||
*
|
*
|
||||||
* @property crossorigin
|
* @property crossorigin
|
||||||
* @type Boolean
|
* @type Boolean
|
||||||
*/
|
*/
|
||||||
this.crossorigin = crossorigin;
|
this.crossorigin = crossorigin;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [read-only] The base url of the bitmap font data
|
* [read-only] The base url of the bitmap font data
|
||||||
*
|
*
|
||||||
* @property baseUrl
|
* @property baseUrl
|
||||||
* @type String
|
* @type String
|
||||||
* @readOnly
|
* @readOnly
|
||||||
*/
|
*/
|
||||||
this.baseUrl = url.replace(/[^\/]*$/, "");
|
this.baseUrl = url.replace(/[^\/]*$/, '');
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The texture being loaded
|
* The texture being loaded
|
||||||
|
@ -65,7 +64,7 @@ PIXI.SpriteSheetLoader = function (url, crossorigin) {
|
||||||
* @property frames
|
* @property frames
|
||||||
* @type Object
|
* @type Object
|
||||||
*/
|
*/
|
||||||
this.frames = {};
|
this.frames = {};
|
||||||
};
|
};
|
||||||
|
|
||||||
// constructor
|
// constructor
|
||||||
|
@ -77,13 +76,13 @@ PIXI.SpriteSheetLoader.prototype.constructor = PIXI.SpriteSheetLoader;
|
||||||
* @method load
|
* @method load
|
||||||
*/
|
*/
|
||||||
PIXI.SpriteSheetLoader.prototype.load = function () {
|
PIXI.SpriteSheetLoader.prototype.load = function () {
|
||||||
var scope = this;
|
var scope = this;
|
||||||
var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin);
|
var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin);
|
||||||
jsonLoader.addEventListener("loaded", function (event) {
|
jsonLoader.addEventListener('loaded', function (event) {
|
||||||
scope.json = event.content.json;
|
scope.json = event.content.json;
|
||||||
scope.onJSONLoaded();
|
scope.onJSONLoaded();
|
||||||
});
|
});
|
||||||
jsonLoader.load();
|
jsonLoader.load();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -93,36 +92,37 @@ PIXI.SpriteSheetLoader.prototype.load = function () {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function () {
|
PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function () {
|
||||||
var scope = this;
|
var scope = this;
|
||||||
var textureUrl = this.baseUrl + this.json.meta.image;
|
var textureUrl = this.baseUrl + this.json.meta.image;
|
||||||
var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
|
var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
|
||||||
var frameData = this.json.frames;
|
var frameData = this.json.frames;
|
||||||
|
|
||||||
this.texture = image.texture.baseTexture;
|
this.texture = image.texture.baseTexture;
|
||||||
image.addEventListener("loaded", function (event) {
|
image.addEventListener('loaded', function () {
|
||||||
scope.onLoaded();
|
scope.onLoaded();
|
||||||
});
|
});
|
||||||
|
|
||||||
for (var i in frameData) {
|
for (var i in frameData) {
|
||||||
var rect = frameData[i].frame;
|
var rect = frameData[i].frame;
|
||||||
if (rect) {
|
if (rect) {
|
||||||
PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {
|
PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {
|
||||||
x: rect.x,
|
x: rect.x,
|
||||||
y: rect.y,
|
y: rect.y,
|
||||||
width: rect.w,
|
width: rect.w,
|
||||||
height: rect.h
|
height: rect.h
|
||||||
});
|
});
|
||||||
if (frameData[i].trimmed) {
|
if (frameData[i].trimmed) {
|
||||||
//var realSize = frameData[i].spriteSourceSize;
|
//var realSize = frameData[i].spriteSourceSize;
|
||||||
PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize;
|
PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize;
|
||||||
PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w)
|
PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w)
|
||||||
// calculate the offset!
|
// calculate the offset!
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
image.load();
|
image.load();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Invoke when all files are loaded (json and texture)
|
* Invoke when all files are loaded (json and texture)
|
||||||
*
|
*
|
||||||
|
@ -130,8 +130,8 @@ PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function () {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
PIXI.SpriteSheetLoader.prototype.onLoaded = function () {
|
PIXI.SpriteSheetLoader.prototype.onLoaded = function () {
|
||||||
this.dispatchEvent({
|
this.dispatchEvent({
|
||||||
type: "loaded",
|
type: 'loaded',
|
||||||
content: this
|
content: this
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
|
@ -14,9 +14,9 @@
|
||||||
*/
|
*/
|
||||||
PIXI.Graphics = function()
|
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
|
* The alpha of the fill of this graphics object
|
||||||
|
@ -24,7 +24,7 @@ PIXI.Graphics = function()
|
||||||
* @property fillAlpha
|
* @property fillAlpha
|
||||||
* @type Number
|
* @type Number
|
||||||
*/
|
*/
|
||||||
this.fillAlpha = 1;
|
this.fillAlpha = 1;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The width of any lines drawn
|
* The width of any lines drawn
|
||||||
|
@ -32,7 +32,7 @@ PIXI.Graphics = function()
|
||||||
* @property lineWidth
|
* @property lineWidth
|
||||||
* @type Number
|
* @type Number
|
||||||
*/
|
*/
|
||||||
this.lineWidth = 0;
|
this.lineWidth = 0;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The color of any lines drawn
|
* The color of any lines drawn
|
||||||
|
@ -40,7 +40,7 @@ PIXI.Graphics = function()
|
||||||
* @property lineColor
|
* @property lineColor
|
||||||
* @type String
|
* @type String
|
||||||
*/
|
*/
|
||||||
this.lineColor = "black";
|
this.lineColor = "black";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Graphics data
|
* Graphics data
|
||||||
|
@ -49,7 +49,7 @@ PIXI.Graphics = function()
|
||||||
* @type Array
|
* @type Array
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
this.graphicsData = [];
|
this.graphicsData = [];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Current path
|
* Current path
|
||||||
|
@ -58,8 +58,8 @@ PIXI.Graphics = function()
|
||||||
* @type Object
|
* @type Object
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
this.currentPath = {points:[]};
|
this.currentPath = {points:[]};
|
||||||
}
|
};
|
||||||
|
|
||||||
// constructor
|
// constructor
|
||||||
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
|
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
|
||||||
|
@ -75,17 +75,17 @@ PIXI.Graphics.prototype.constructor = PIXI.Graphics;
|
||||||
*/
|
*/
|
||||||
PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
|
PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
|
||||||
{
|
{
|
||||||
if(this.currentPath.points.length == 0)this.graphicsData.pop();
|
if (!this.currentPath.points.length) this.graphicsData.pop();
|
||||||
|
|
||||||
this.lineWidth = lineWidth || 0;
|
this.lineWidth = lineWidth || 0;
|
||||||
this.lineColor = color || 0;
|
this.lineColor = color || 0;
|
||||||
this.lineAlpha = (alpha == undefined) ? 1 : alpha;
|
this.lineAlpha = (arguments.length < 3) ? 1 : alpha;
|
||||||
|
|
||||||
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
||||||
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY};
|
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY};
|
||||||
|
|
||||||
this.graphicsData.push(this.currentPath);
|
this.graphicsData.push(this.currentPath);
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Moves the current drawing position to (x, y).
|
* Moves the current drawing position to (x, y).
|
||||||
|
@ -96,15 +96,15 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
|
||||||
*/
|
*/
|
||||||
PIXI.Graphics.prototype.moveTo = function(x, y)
|
PIXI.Graphics.prototype.moveTo = function(x, y)
|
||||||
{
|
{
|
||||||
if(this.currentPath.points.length == 0)this.graphicsData.pop();
|
if (!this.currentPath.points.length) this.graphicsData.pop();
|
||||||
|
|
||||||
this.currentPath = this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
this.currentPath = this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
||||||
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY};
|
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY};
|
||||||
|
|
||||||
this.currentPath.points.push(x, y);
|
this.currentPath.points.push(x, y);
|
||||||
|
|
||||||
this.graphicsData.push(this.currentPath);
|
this.graphicsData.push(this.currentPath);
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Draws a line using the current line style from the current drawing position to (x, y);
|
* Draws a line using the current line style from the current drawing position to (x, y);
|
||||||
|
@ -116,9 +116,9 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
|
||||||
*/
|
*/
|
||||||
PIXI.Graphics.prototype.lineTo = function(x, y)
|
PIXI.Graphics.prototype.lineTo = function(x, y)
|
||||||
{
|
{
|
||||||
this.currentPath.points.push(x, y);
|
this.currentPath.points.push(x, y);
|
||||||
this.dirty = true;
|
this.dirty = true;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Specifies a simple one-color fill that subsequent calls to other Graphics methods
|
* Specifies a simple one-color fill that subsequent calls to other Graphics methods
|
||||||
|
@ -130,10 +130,10 @@ PIXI.Graphics.prototype.lineTo = function(x, y)
|
||||||
*/
|
*/
|
||||||
PIXI.Graphics.prototype.beginFill = function(color, alpha)
|
PIXI.Graphics.prototype.beginFill = function(color, alpha)
|
||||||
{
|
{
|
||||||
this.filling = true;
|
this.filling = true;
|
||||||
this.fillColor = color || 0;
|
this.fillColor = color || 0;
|
||||||
this.fillAlpha = (alpha == undefined) ? 1 : alpha;
|
this.fillAlpha = (arguments.length < 2) ? 1 : 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.
|
||||||
|
@ -142,10 +142,10 @@ PIXI.Graphics.prototype.beginFill = function(color, alpha)
|
||||||
*/
|
*/
|
||||||
PIXI.Graphics.prototype.endFill = function()
|
PIXI.Graphics.prototype.endFill = function()
|
||||||
{
|
{
|
||||||
this.filling = false;
|
this.filling = false;
|
||||||
this.fillColor = null;
|
this.fillColor = null;
|
||||||
this.fillAlpha = 1;
|
this.fillAlpha = 1;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @method drawRect
|
* @method drawRect
|
||||||
|
@ -157,15 +157,15 @@ PIXI.Graphics.prototype.endFill = function()
|
||||||
*/
|
*/
|
||||||
PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
|
PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
|
||||||
{
|
{
|
||||||
if(this.currentPath.points.length == 0)this.graphicsData.pop();
|
if (!this.currentPath.points.length) this.graphicsData.pop();
|
||||||
|
|
||||||
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
||||||
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
|
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
|
||||||
points:[x, y, width, height], type:PIXI.Graphics.RECT};
|
points:[x, y, width, height], type:PIXI.Graphics.RECT};
|
||||||
|
|
||||||
this.graphicsData.push(this.currentPath);
|
this.graphicsData.push(this.currentPath);
|
||||||
this.dirty = true;
|
this.dirty = true;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Draws a circle.
|
* Draws a circle.
|
||||||
|
@ -177,36 +177,36 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
|
||||||
*/
|
*/
|
||||||
PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
|
PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
|
||||||
{
|
{
|
||||||
if(this.currentPath.points.length == 0)this.graphicsData.pop();
|
if (!this.currentPath.points.length) this.graphicsData.pop();
|
||||||
|
|
||||||
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
||||||
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
|
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
|
||||||
points:[x, y, radius, radius], type:PIXI.Graphics.CIRC};
|
points:[x, y, radius, radius], type:PIXI.Graphics.CIRC};
|
||||||
|
|
||||||
this.graphicsData.push(this.currentPath);
|
this.graphicsData.push(this.currentPath);
|
||||||
this.dirty = true;
|
this.dirty = true;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Draws an elipse.
|
* Draws an ellipse.
|
||||||
*
|
*
|
||||||
* @method drawElipse
|
* @method drawEllipse
|
||||||
* @param x {Number}
|
* @param x {Number}
|
||||||
* @param y {Number}
|
* @param y {Number}
|
||||||
* @param width {Number}
|
* @param width {Number}
|
||||||
* @param height {Number}
|
* @param height {Number}
|
||||||
*/
|
*/
|
||||||
PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
|
PIXI.Graphics.prototype.drawEllipse = function( x, y, width, height)
|
||||||
{
|
{
|
||||||
if(this.currentPath.points.length == 0)this.graphicsData.pop();
|
if (!this.currentPath.points.length) this.graphicsData.pop();
|
||||||
|
|
||||||
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
||||||
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
|
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
|
||||||
points:[x, y, width, height], type:PIXI.Graphics.ELIP};
|
points:[x, y, width, height], type:PIXI.Graphics.ELIP};
|
||||||
|
|
||||||
this.graphicsData.push(this.currentPath);
|
this.graphicsData.push(this.currentPath);
|
||||||
this.dirty = true;
|
this.dirty = true;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 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.
|
||||||
|
@ -215,88 +215,83 @@ PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
|
||||||
*/
|
*/
|
||||||
PIXI.Graphics.prototype.clear = function()
|
PIXI.Graphics.prototype.clear = function()
|
||||||
{
|
{
|
||||||
this.lineWidth = 0;
|
this.lineWidth = 0;
|
||||||
this.filling = false;
|
this.filling = false;
|
||||||
|
|
||||||
this.dirty = true;
|
this.dirty = true;
|
||||||
this.clearDirty = true;
|
this.clearDirty = true;
|
||||||
this.graphicsData = [];
|
this.graphicsData = [];
|
||||||
|
|
||||||
this.bounds = null//new PIXI.Rectangle();
|
this.bounds = null; //new PIXI.Rectangle();
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
||||||
PIXI.Graphics.prototype.updateFilterBounds = function()
|
PIXI.Graphics.prototype.updateFilterBounds = function()
|
||||||
{
|
{
|
||||||
if(!this.bounds)
|
if(!this.bounds)
|
||||||
{
|
{
|
||||||
var minX = Infinity;
|
var minX = Infinity;
|
||||||
var maxX = -Infinity;
|
var maxX = -Infinity;
|
||||||
|
|
||||||
var minY = Infinity;
|
var minY = Infinity;
|
||||||
var maxY = -Infinity;
|
var maxY = -Infinity;
|
||||||
|
|
||||||
var points, x, y;
|
var points, x, y;
|
||||||
|
|
||||||
for (var i = 0; i < this.graphicsData.length; i++) {
|
for (var i = 0; i < this.graphicsData.length; i++) {
|
||||||
|
var data = this.graphicsData[i];
|
||||||
|
var type = data.type;
|
||||||
|
var lineWidth = data.lineWidth;
|
||||||
|
|
||||||
|
points = data.points;
|
||||||
|
|
||||||
var data = this.graphicsData[i];
|
if(type === PIXI.Graphics.RECT)
|
||||||
var type = data.type;
|
{
|
||||||
var lineWidth = data.lineWidth;
|
x = points.x - lineWidth/2;
|
||||||
|
y = points.y - lineWidth/2;
|
||||||
|
var width = points.width + lineWidth;
|
||||||
|
var height = points.height + lineWidth;
|
||||||
|
|
||||||
points = data.points;
|
minX = x < minX ? x : minX;
|
||||||
|
maxX = x + width > maxX ? x + width : maxX;
|
||||||
|
|
||||||
if(type === PIXI.Graphics.RECT)
|
minY = y < minY ? x : minY;
|
||||||
{
|
maxY = y + height > maxY ? y + height : maxY;
|
||||||
x = points.x - lineWidth/2;
|
}
|
||||||
y = points.y - lineWidth/2;
|
else if(type === PIXI.Graphics.CIRC || type === PIXI.Graphics.ELIP)
|
||||||
var width = points.width + lineWidth;
|
{
|
||||||
var height = points.height + lineWidth;
|
x = points.x;
|
||||||
|
y = points.y;
|
||||||
|
var radius = points.radius + lineWidth/2;
|
||||||
|
|
||||||
minX = x < minX ? x : minX;
|
minX = x - radius < minX ? x - radius : minX;
|
||||||
maxX = x + width > maxX ? x + width : maxX;
|
maxX = x + radius > maxX ? x + radius : maxX;
|
||||||
|
|
||||||
minY = y < minY ? x : minY;
|
minY = y - radius < minY ? y - radius : minY;
|
||||||
maxY = y + height > maxY ? y + height : maxY;
|
maxY = y + radius > maxY ? y + radius : maxY;
|
||||||
}
|
}
|
||||||
else if(type === PIXI.Graphics.CIRC || type === PIXI.Graphics.ELIP)
|
else
|
||||||
{
|
{
|
||||||
x = points.x;
|
// POLY
|
||||||
y = points.y;
|
for (var j = 0; j < points.length; j+=2)
|
||||||
var radius = points.radius + lineWidth/2;
|
{
|
||||||
|
|
||||||
minX = x - radius < minX ? x - radius : minX;
|
x = points[j];
|
||||||
maxX = x + radius > maxX ? x + radius : maxX;
|
y = points[j+1];
|
||||||
|
|
||||||
minY = y - radius < minY ? y - radius : minY;
|
minX = x-lineWidth < minX ? x-lineWidth : minX;
|
||||||
maxY = y + radius > maxY ? y + radius : maxY;
|
maxX = x+lineWidth > maxX ? x+lineWidth : maxX;
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
// POLY
|
|
||||||
for (var j = 0; j < points.length; j+=2)
|
|
||||||
{
|
|
||||||
|
|
||||||
x = points[j];
|
minY = y-lineWidth < minY ? y-lineWidth : minY;
|
||||||
y = points[j+1];
|
maxY = y+lineWidth > maxY ? y+lineWidth : maxY;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
minX = x-lineWidth < minX ? x-lineWidth : minX;
|
this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY);
|
||||||
maxX = x+lineWidth > maxX ? x+lineWidth : maxX;
|
}
|
||||||
|
// console.log(this.bounds);
|
||||||
minY = y-lineWidth < minY ? y-lineWidth : minY;
|
};
|
||||||
maxY = y+lineWidth > maxY ? y+lineWidth : maxY;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// console.log(this.bounds);
|
|
||||||
}
|
|
||||||
|
|
||||||
// SOME TYPES:
|
// SOME TYPES:
|
||||||
PIXI.Graphics.POLY = 0;
|
PIXI.Graphics.POLY = 0;
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
PIXI.CanvasGraphics = function()
|
PIXI.CanvasGraphics = function()
|
||||||
{
|
{
|
||||||
|
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
@ -25,128 +25,128 @@ PIXI.CanvasGraphics = function()
|
||||||
*/
|
*/
|
||||||
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
|
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
|
||||||
{
|
{
|
||||||
var worldAlpha = graphics.worldAlpha;
|
var worldAlpha = graphics.worldAlpha;
|
||||||
|
var color = '';
|
||||||
|
|
||||||
for (var i=0; i < graphics.graphicsData.length; i++)
|
for (var i = 0; i < graphics.graphicsData.length; i++)
|
||||||
{
|
{
|
||||||
var data = graphics.graphicsData[i];
|
var data = graphics.graphicsData[i];
|
||||||
var points = data.points;
|
var points = data.points;
|
||||||
|
|
||||||
context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6);
|
context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6);
|
||||||
|
|
||||||
context.lineWidth = data.lineWidth;
|
context.lineWidth = data.lineWidth;
|
||||||
|
|
||||||
if(data.type == PIXI.Graphics.POLY)
|
if(data.type === PIXI.Graphics.POLY)
|
||||||
{
|
{
|
||||||
context.beginPath();
|
context.beginPath();
|
||||||
|
|
||||||
context.moveTo(points[0], points[1]);
|
context.moveTo(points[0], points[1]);
|
||||||
|
|
||||||
for (var j=1; j < points.length/2; j++)
|
for (var j=1; j < points.length/2; j++)
|
||||||
{
|
{
|
||||||
context.lineTo(points[j * 2], points[j * 2 + 1]);
|
context.lineTo(points[j * 2], points[j * 2 + 1]);
|
||||||
}
|
}
|
||||||
|
|
||||||
// if the first and last point are the same close the path - much neater :)
|
// if the first and last point are the same close the path - much neater :)
|
||||||
if(points[0] == points[points.length-2] && points[1] == points[points.length-1])
|
if(points[0] === points[points.length-2] && points[1] === points[points.length-1])
|
||||||
{
|
{
|
||||||
context.closePath();
|
context.closePath();
|
||||||
}
|
}
|
||||||
|
|
||||||
if(data.fill)
|
if(data.fill)
|
||||||
{
|
{
|
||||||
context.globalAlpha = data.fillAlpha * worldAlpha;
|
context.globalAlpha = data.fillAlpha * worldAlpha;
|
||||||
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
||||||
context.fill();
|
context.fill();
|
||||||
}
|
}
|
||||||
if(data.lineWidth)
|
if(data.lineWidth)
|
||||||
{
|
{
|
||||||
context.globalAlpha = data.lineAlpha * worldAlpha;
|
context.globalAlpha = data.lineAlpha * worldAlpha;
|
||||||
context.stroke();
|
context.stroke();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if(data.type == PIXI.Graphics.RECT)
|
else if(data.type === PIXI.Graphics.RECT)
|
||||||
{
|
{
|
||||||
|
|
||||||
if(data.fillColor || data.fillColor === 0)
|
if(data.fillColor || data.fillColor === 0)
|
||||||
{
|
{
|
||||||
context.globalAlpha = data.fillAlpha * worldAlpha;
|
context.globalAlpha = data.fillAlpha * worldAlpha;
|
||||||
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
||||||
context.fillRect(points[0], points[1], points[2], points[3]);
|
context.fillRect(points[0], points[1], points[2], points[3]);
|
||||||
|
|
||||||
}
|
}
|
||||||
if(data.lineWidth)
|
if(data.lineWidth)
|
||||||
{
|
{
|
||||||
context.globalAlpha = data.lineAlpha * worldAlpha;
|
context.globalAlpha = data.lineAlpha * worldAlpha;
|
||||||
context.strokeRect(points[0], points[1], points[2], points[3]);
|
context.strokeRect(points[0], points[1], points[2], points[3]);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
else if(data.type == PIXI.Graphics.CIRC)
|
else if(data.type === PIXI.Graphics.CIRC)
|
||||||
{
|
{
|
||||||
// TODO - need to be Undefined!
|
// TODO - need to be Undefined!
|
||||||
context.beginPath();
|
context.beginPath();
|
||||||
context.arc(points[0], points[1], points[2],0,2*Math.PI);
|
context.arc(points[0], points[1], points[2],0,2*Math.PI);
|
||||||
context.closePath();
|
context.closePath();
|
||||||
|
|
||||||
if(data.fill)
|
if(data.fill)
|
||||||
{
|
{
|
||||||
context.globalAlpha = data.fillAlpha * worldAlpha;
|
context.globalAlpha = data.fillAlpha * worldAlpha;
|
||||||
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
||||||
context.fill();
|
context.fill();
|
||||||
}
|
}
|
||||||
if(data.lineWidth)
|
if(data.lineWidth)
|
||||||
{
|
{
|
||||||
context.globalAlpha = data.lineAlpha * worldAlpha;
|
context.globalAlpha = data.lineAlpha * worldAlpha;
|
||||||
context.stroke();
|
context.stroke();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if(data.type == PIXI.Graphics.ELIP)
|
else if(data.type === PIXI.Graphics.ELIP)
|
||||||
{
|
{
|
||||||
|
|
||||||
// elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
|
// ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
|
||||||
|
|
||||||
var elipseData = data.points;
|
var ellipseData = data.points;
|
||||||
|
|
||||||
var w = elipseData[2] * 2;
|
var w = ellipseData[2] * 2;
|
||||||
var h = elipseData[3] * 2;
|
var h = ellipseData[3] * 2;
|
||||||
|
|
||||||
var x = elipseData[0] - w/2;
|
var x = ellipseData[0] - w/2;
|
||||||
var y = elipseData[1] - h/2;
|
var y = ellipseData[1] - h/2;
|
||||||
|
|
||||||
context.beginPath();
|
context.beginPath();
|
||||||
|
|
||||||
var kappa = .5522848,
|
var kappa = 0.5522848,
|
||||||
ox = (w / 2) * kappa, // control point offset horizontal
|
ox = (w / 2) * kappa, // control point offset horizontal
|
||||||
oy = (h / 2) * kappa, // control point offset vertical
|
oy = (h / 2) * kappa, // control point offset vertical
|
||||||
xe = x + w, // x-end
|
xe = x + w, // x-end
|
||||||
ye = y + h, // y-end
|
ye = y + h, // y-end
|
||||||
xm = x + w / 2, // x-middle
|
xm = x + w / 2, // x-middle
|
||||||
ym = y + h / 2; // y-middle
|
ym = y + h / 2; // y-middle
|
||||||
|
|
||||||
context.moveTo(x, ym);
|
context.moveTo(x, ym);
|
||||||
context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
|
context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
|
||||||
context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
|
context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
|
||||||
context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
|
context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
|
||||||
context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
|
context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
|
||||||
|
|
||||||
context.closePath();
|
context.closePath();
|
||||||
|
|
||||||
if(data.fill)
|
if(data.fill)
|
||||||
{
|
{
|
||||||
context.globalAlpha = data.fillAlpha * worldAlpha;
|
context.globalAlpha = data.fillAlpha * worldAlpha;
|
||||||
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
||||||
context.fill();
|
context.fill();
|
||||||
}
|
}
|
||||||
if(data.lineWidth)
|
if(data.lineWidth)
|
||||||
{
|
{
|
||||||
context.globalAlpha = data.lineAlpha * worldAlpha;
|
context.globalAlpha = data.lineAlpha * worldAlpha;
|
||||||
context.stroke();
|
context.stroke();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Renders a graphics mask
|
* Renders a graphics mask
|
||||||
|
@ -159,82 +159,79 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
|
||||||
*/
|
*/
|
||||||
PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context)
|
PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context)
|
||||||
{
|
{
|
||||||
var worldAlpha = graphics.worldAlpha;
|
var len = graphics.graphicsData.length;
|
||||||
|
|
||||||
var len = graphics.graphicsData.length;
|
if(len === 0) return;
|
||||||
if(len === 0)return;
|
|
||||||
|
|
||||||
if(len > 1)
|
if(len > 1)
|
||||||
{
|
{
|
||||||
len = 1;
|
len = 1;
|
||||||
console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object")
|
window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object');
|
||||||
}
|
}
|
||||||
|
|
||||||
for (var i=0; i < 1; i++)
|
for (var i = 0; i < 1; i++)
|
||||||
{
|
{
|
||||||
var data = graphics.graphicsData[i];
|
var data = graphics.graphicsData[i];
|
||||||
var points = data.points;
|
var points = data.points;
|
||||||
|
|
||||||
if(data.type == PIXI.Graphics.POLY)
|
if(data.type === PIXI.Graphics.POLY)
|
||||||
{
|
{
|
||||||
context.beginPath();
|
context.beginPath();
|
||||||
context.moveTo(points[0], points[1]);
|
context.moveTo(points[0], points[1]);
|
||||||
|
|
||||||
for (var j=1; j < points.length/2; j++)
|
for (var j=1; j < points.length/2; j++)
|
||||||
{
|
{
|
||||||
context.lineTo(points[j * 2], points[j * 2 + 1]);
|
context.lineTo(points[j * 2], points[j * 2 + 1]);
|
||||||
}
|
}
|
||||||
|
|
||||||
// if the first and last point are the same close the path - much neater :)
|
// if the first and last point are the same close the path - much neater :)
|
||||||
if(points[0] == points[points.length-2] && points[1] == points[points.length-1])
|
if(points[0] === points[points.length-2] && points[1] === points[points.length-1])
|
||||||
{
|
{
|
||||||
context.closePath();
|
context.closePath();
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
else if(data.type == PIXI.Graphics.RECT)
|
else if(data.type === PIXI.Graphics.RECT)
|
||||||
{
|
{
|
||||||
context.beginPath();
|
context.beginPath();
|
||||||
context.rect(points[0], points[1], points[2], points[3]);
|
context.rect(points[0], points[1], points[2], points[3]);
|
||||||
context.closePath();
|
context.closePath();
|
||||||
}
|
}
|
||||||
else if(data.type == PIXI.Graphics.CIRC)
|
else if(data.type === PIXI.Graphics.CIRC)
|
||||||
{
|
{
|
||||||
// TODO - need to be Undefined!
|
// TODO - need to be Undefined!
|
||||||
context.beginPath();
|
context.beginPath();
|
||||||
context.arc(points[0], points[1], points[2],0,2*Math.PI);
|
context.arc(points[0], points[1], points[2],0,2*Math.PI);
|
||||||
context.closePath();
|
context.closePath();
|
||||||
}
|
}
|
||||||
else if(data.type == PIXI.Graphics.ELIP)
|
else if(data.type === PIXI.Graphics.ELIP)
|
||||||
{
|
{
|
||||||
|
|
||||||
// elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
|
// ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
|
||||||
var elipseData = data.points;
|
var ellipseData = data.points;
|
||||||
|
|
||||||
var w = elipseData[2] * 2;
|
var w = ellipseData[2] * 2;
|
||||||
var h = elipseData[3] * 2;
|
var h = ellipseData[3] * 2;
|
||||||
|
|
||||||
var x = elipseData[0] - w/2;
|
var x = ellipseData[0] - w/2;
|
||||||
var y = elipseData[1] - h/2;
|
var y = ellipseData[1] - h/2;
|
||||||
|
|
||||||
context.beginPath();
|
context.beginPath();
|
||||||
|
|
||||||
var kappa = .5522848,
|
var kappa = 0.5522848,
|
||||||
ox = (w / 2) * kappa, // control point offset horizontal
|
ox = (w / 2) * kappa, // control point offset horizontal
|
||||||
oy = (h / 2) * kappa, // control point offset vertical
|
oy = (h / 2) * kappa, // control point offset vertical
|
||||||
xe = x + w, // x-end
|
xe = x + w, // x-end
|
||||||
ye = y + h, // y-end
|
ye = y + h, // y-end
|
||||||
xm = x + w / 2, // x-middle
|
xm = x + w / 2, // x-middle
|
||||||
ym = y + h / 2; // y-middle
|
ym = y + h / 2; // y-middle
|
||||||
|
|
||||||
context.moveTo(x, ym);
|
context.moveTo(x, ym);
|
||||||
context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
|
context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
|
||||||
context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
|
context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
|
||||||
context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
|
context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
|
||||||
context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
|
context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
|
||||||
context.closePath();
|
context.closePath();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
|
@ -2,7 +2,6 @@
|
||||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 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 :)
|
||||||
|
@ -16,49 +15,63 @@
|
||||||
*/
|
*/
|
||||||
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;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 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' );
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 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;
|
//some filter variables
|
||||||
// hack to enable some hardware acceleration!
|
this.smoothProperty = null;
|
||||||
//this.view.style["transform"] = "translatez(0)";
|
|
||||||
|
if('imageSmoothingEnabled' in this.context)
|
||||||
|
this.smoothProperty = 'imageSmoothingEnabled';
|
||||||
|
else if('webkitImageSmoothingEnabled' in this.context)
|
||||||
|
this.smoothProperty = 'webkitImageSmoothingEnabled';
|
||||||
|
else if('mozImageSmoothingEnabled' in this.context)
|
||||||
|
this.smoothProperty = 'mozImageSmoothingEnabled';
|
||||||
|
else if('oImageSmoothingEnabled' in this.context)
|
||||||
|
this.smoothProperty = 'oImageSmoothingEnabled';
|
||||||
|
|
||||||
|
this.scaleMode = null;
|
||||||
|
|
||||||
|
this.refresh = true;
|
||||||
|
// hack to enable some hardware acceleration!
|
||||||
|
//this.view.style["transform"] = "translatez(0)";
|
||||||
|
|
||||||
this.view.width = this.width;
|
this.view.width = this.width;
|
||||||
this.view.height = this.height;
|
this.view.height = this.height;
|
||||||
this.count = 0;
|
this.count = 0;
|
||||||
}
|
};
|
||||||
|
|
||||||
// constructor
|
// constructor
|
||||||
PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer;
|
PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer;
|
||||||
|
@ -71,44 +84,42 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer;
|
||||||
*/
|
*/
|
||||||
PIXI.CanvasRenderer.prototype.render = function(stage)
|
PIXI.CanvasRenderer.prototype.render = function(stage)
|
||||||
{
|
{
|
||||||
|
//stage.__childrenAdded = [];
|
||||||
|
//stage.__childrenRemoved = [];
|
||||||
|
|
||||||
//stage.__childrenAdded = [];
|
// update textures if need be
|
||||||
//stage.__childrenRemoved = [];
|
PIXI.texturesToUpdate = [];
|
||||||
|
PIXI.texturesToDestroy = [];
|
||||||
|
|
||||||
// update textures if need be
|
PIXI.visibleCount++;
|
||||||
PIXI.texturesToUpdate = [];
|
stage.updateTransform();
|
||||||
PIXI.texturesToDestroy = [];
|
|
||||||
|
|
||||||
PIXI.visibleCount++;
|
// update the background color
|
||||||
stage.updateTransform();
|
if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent)
|
||||||
|
this.view.style.backgroundColor = stage.backgroundColorString;
|
||||||
|
|
||||||
// update the background color
|
this.context.setTransform(1,0,0,1,0,0);
|
||||||
if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString;
|
this.context.clearRect(0, 0, this.width, this.height);
|
||||||
|
|
||||||
this.context.setTransform(1,0,0,1,0,0);
|
|
||||||
this.context.clearRect(0, 0, this.width, this.height)
|
|
||||||
this.renderDisplayObject(stage);
|
this.renderDisplayObject(stage);
|
||||||
//as
|
//as
|
||||||
|
|
||||||
// run interaction!
|
// run interaction!
|
||||||
if(stage.interactive)
|
if(stage.interactive)
|
||||||
{
|
{
|
||||||
//need to add some events!
|
//need to add some events!
|
||||||
if(!stage._interactiveEventsAdded)
|
if(!stage._interactiveEventsAdded)
|
||||||
{
|
{
|
||||||
stage._interactiveEventsAdded = true;
|
stage._interactiveEventsAdded = true;
|
||||||
stage.interactionManager.setTarget(this);
|
stage.interactionManager.setTarget(this);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// remove frame updates..
|
// remove frame updates..
|
||||||
if(PIXI.Texture.frameUpdates.length > 0)
|
if(PIXI.Texture.frameUpdates.length > 0)
|
||||||
{
|
{
|
||||||
PIXI.Texture.frameUpdates = [];
|
PIXI.Texture.frameUpdates = [];
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* resizes the canvas view to the specified width and height
|
* resizes the canvas view to the specified width and height
|
||||||
|
@ -119,12 +130,12 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
|
||||||
*/
|
*/
|
||||||
PIXI.CanvasRenderer.prototype.resize = function(width, height)
|
PIXI.CanvasRenderer.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;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Renders a display object
|
* Renders a display object
|
||||||
|
@ -135,118 +146,116 @@ PIXI.CanvasRenderer.prototype.resize = function(width, height)
|
||||||
*/
|
*/
|
||||||
PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
|
PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
|
||||||
{
|
{
|
||||||
// no loger recurrsive!
|
// no loger recurrsive!
|
||||||
var transform;
|
var transform;
|
||||||
var context = this.context;
|
var context = this.context;
|
||||||
|
|
||||||
context.globalCompositeOperation = 'source-over';
|
context.globalCompositeOperation = 'source-over';
|
||||||
|
|
||||||
// one the display object hits this. we can break the loop
|
// one the display object hits this. we can break the loop
|
||||||
var testObject = displayObject.last._iNext;
|
var testObject = displayObject.last._iNext;
|
||||||
displayObject = displayObject.first;
|
displayObject = displayObject.first;
|
||||||
|
|
||||||
do
|
do
|
||||||
{
|
{
|
||||||
transform = displayObject.worldTransform;
|
transform = displayObject.worldTransform;
|
||||||
|
|
||||||
if(!displayObject.visible)
|
if(!displayObject.visible)
|
||||||
{
|
{
|
||||||
displayObject = displayObject.last._iNext;
|
displayObject = displayObject.last._iNext;
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(!displayObject.renderable)
|
if(!displayObject.renderable)
|
||||||
{
|
{
|
||||||
displayObject = displayObject._iNext;
|
displayObject = displayObject._iNext;
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(displayObject instanceof PIXI.Sprite)
|
if(displayObject instanceof PIXI.Sprite)
|
||||||
{
|
{
|
||||||
|
|
||||||
var frame = displayObject.texture.frame;
|
var frame = displayObject.texture.frame;
|
||||||
|
|
||||||
//ignore null sources
|
//ignore null sources
|
||||||
if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source)
|
if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source)
|
||||||
{
|
{
|
||||||
context.globalAlpha = displayObject.worldAlpha;
|
context.globalAlpha = displayObject.worldAlpha;
|
||||||
|
|
||||||
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
|
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
|
||||||
|
|
||||||
context.drawImage(displayObject.texture.baseTexture.source,
|
//if smoothingEnabled is supported and we need to change the smoothing property for this texture
|
||||||
frame.x,
|
if(this.smoothProperty && this.scaleMode !== displayObject.texture.baseTexture.scaleMode) {
|
||||||
frame.y,
|
this.scaleMode = displayObject.texture.baseTexture.scaleMode;
|
||||||
frame.width,
|
context[this.smoothProperty] = (this.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR);
|
||||||
frame.height,
|
}
|
||||||
(displayObject.anchor.x) * -frame.width,
|
|
||||||
(displayObject.anchor.y) * -frame.height,
|
|
||||||
frame.width,
|
|
||||||
frame.height);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if(displayObject instanceof PIXI.Strip)
|
|
||||||
{
|
|
||||||
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5])
|
|
||||||
this.renderStrip(displayObject);
|
|
||||||
}
|
|
||||||
else if(displayObject instanceof PIXI.TilingSprite)
|
|
||||||
{
|
|
||||||
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5])
|
|
||||||
this.renderTilingSprite(displayObject);
|
|
||||||
}
|
|
||||||
else if(displayObject instanceof PIXI.CustomRenderable)
|
|
||||||
{
|
|
||||||
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
|
|
||||||
displayObject.renderCanvas(this);
|
|
||||||
}
|
|
||||||
else if(displayObject instanceof PIXI.Graphics)
|
|
||||||
{
|
|
||||||
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5])
|
|
||||||
PIXI.CanvasGraphics.renderGraphics(displayObject, context);
|
|
||||||
}
|
|
||||||
else if(displayObject instanceof PIXI.FilterBlock)
|
|
||||||
{
|
|
||||||
if(displayObject.data instanceof PIXI.Graphics)
|
|
||||||
{
|
|
||||||
var mask = displayObject.data;
|
|
||||||
|
|
||||||
if(displayObject.open)
|
context.drawImage(displayObject.texture.baseTexture.source,
|
||||||
{
|
frame.x,
|
||||||
context.save();
|
frame.y,
|
||||||
|
frame.width,
|
||||||
|
frame.height,
|
||||||
|
(displayObject.anchor.x) * -frame.width,
|
||||||
|
(displayObject.anchor.y) * -frame.height,
|
||||||
|
frame.width,
|
||||||
|
frame.height);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if(displayObject instanceof PIXI.Strip)
|
||||||
|
{
|
||||||
|
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
|
||||||
|
this.renderStrip(displayObject);
|
||||||
|
}
|
||||||
|
else if(displayObject instanceof PIXI.TilingSprite)
|
||||||
|
{
|
||||||
|
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
|
||||||
|
this.renderTilingSprite(displayObject);
|
||||||
|
}
|
||||||
|
else if(displayObject instanceof PIXI.CustomRenderable)
|
||||||
|
{
|
||||||
|
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
|
||||||
|
displayObject.renderCanvas(this);
|
||||||
|
}
|
||||||
|
else if(displayObject instanceof PIXI.Graphics)
|
||||||
|
{
|
||||||
|
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
|
||||||
|
PIXI.CanvasGraphics.renderGraphics(displayObject, context);
|
||||||
|
}
|
||||||
|
else if(displayObject instanceof PIXI.FilterBlock)
|
||||||
|
{
|
||||||
|
if(displayObject.data instanceof PIXI.Graphics)
|
||||||
|
{
|
||||||
|
var mask = displayObject.data;
|
||||||
|
|
||||||
var cacheAlpha = mask.alpha;
|
if(displayObject.open)
|
||||||
var maskTransform = mask.worldTransform;
|
{
|
||||||
|
context.save();
|
||||||
|
|
||||||
context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5])
|
var cacheAlpha = mask.alpha;
|
||||||
|
var maskTransform = mask.worldTransform;
|
||||||
|
|
||||||
mask.worldAlpha = 0.5;
|
context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]);
|
||||||
|
|
||||||
context.worldAlpha = 0;
|
mask.worldAlpha = 0.5;
|
||||||
|
|
||||||
PIXI.CanvasGraphics.renderGraphicsMask(mask, context);
|
context.worldAlpha = 0;
|
||||||
context.clip();
|
|
||||||
|
|
||||||
mask.worldAlpha = cacheAlpha;
|
PIXI.CanvasGraphics.renderGraphicsMask(mask, context);
|
||||||
}
|
context.clip();
|
||||||
else
|
|
||||||
{
|
|
||||||
context.restore();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
// only masks supported right now!
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// count++
|
|
||||||
displayObject = displayObject._iNext;
|
|
||||||
|
|
||||||
|
mask.worldAlpha = cacheAlpha;
|
||||||
}
|
}
|
||||||
while(displayObject != testObject)
|
else
|
||||||
|
{
|
||||||
|
context.restore();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//count++
|
||||||
|
displayObject = displayObject._iNext;
|
||||||
|
}
|
||||||
|
while(displayObject !== testObject);
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Renders a flat strip
|
* Renders a flat strip
|
||||||
|
@ -257,33 +266,30 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
|
||||||
*/
|
*/
|
||||||
PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
|
PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
|
||||||
{
|
{
|
||||||
var context = this.context;
|
var context = this.context;
|
||||||
var verticies = strip.verticies;
|
var verticies = strip.verticies;
|
||||||
var uvs = strip.uvs;
|
|
||||||
|
|
||||||
var length = verticies.length/2;
|
var length = verticies.length/2;
|
||||||
this.count++;
|
this.count++;
|
||||||
|
|
||||||
context.beginPath();
|
context.beginPath();
|
||||||
for (var i=1; i < length-2; i++)
|
for (var i=1; i < length-2; i++)
|
||||||
{
|
{
|
||||||
|
// draw some triangles!
|
||||||
|
var index = i*2;
|
||||||
|
|
||||||
// draw some triangles!
|
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4];
|
||||||
var index = i*2;
|
var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
|
||||||
|
|
||||||
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4];
|
context.moveTo(x0, y0);
|
||||||
var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
|
context.lineTo(x1, y1);
|
||||||
|
context.lineTo(x2, y2);
|
||||||
|
}
|
||||||
|
|
||||||
context.moveTo(x0, y0);
|
context.fillStyle = '#FF0000';
|
||||||
context.lineTo(x1, y1);
|
context.fill();
|
||||||
context.lineTo(x2, y2);
|
context.closePath();
|
||||||
|
};
|
||||||
};
|
|
||||||
|
|
||||||
context.fillStyle = "#FF0000";
|
|
||||||
context.fill();
|
|
||||||
context.closePath();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Renders a tiling sprite
|
* Renders a tiling sprite
|
||||||
|
@ -294,29 +300,30 @@ PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
|
||||||
*/
|
*/
|
||||||
PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
|
PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
|
||||||
{
|
{
|
||||||
var context = this.context;
|
var context = this.context;
|
||||||
|
|
||||||
context.globalAlpha = sprite.worldAlpha;
|
context.globalAlpha = sprite.worldAlpha;
|
||||||
|
|
||||||
if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat");
|
if(!sprite.__tilePattern)
|
||||||
|
sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, 'repeat');
|
||||||
|
|
||||||
context.beginPath();
|
context.beginPath();
|
||||||
|
|
||||||
var tilePosition = sprite.tilePosition;
|
var tilePosition = sprite.tilePosition;
|
||||||
var tileScale = sprite.tileScale;
|
var tileScale = sprite.tileScale;
|
||||||
|
|
||||||
// offset
|
// offset
|
||||||
context.scale(tileScale.x,tileScale.y);
|
context.scale(tileScale.x,tileScale.y);
|
||||||
context.translate(tilePosition.x, tilePosition.y);
|
context.translate(tilePosition.x, tilePosition.y);
|
||||||
|
|
||||||
context.fillStyle = sprite.__tilePattern;
|
context.fillStyle = sprite.__tilePattern;
|
||||||
context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y);
|
context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y);
|
||||||
|
|
||||||
context.scale(1/tileScale.x, 1/tileScale.y);
|
context.scale(1/tileScale.x, 1/tileScale.y);
|
||||||
context.translate(-tilePosition.x, -tilePosition.y);
|
context.translate(-tilePosition.x, -tilePosition.y);
|
||||||
|
|
||||||
context.closePath();
|
context.closePath();
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Renders a strip
|
* Renders a strip
|
||||||
|
@ -327,55 +334,49 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
|
||||||
*/
|
*/
|
||||||
PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
|
PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
|
||||||
{
|
{
|
||||||
var context = this.context;
|
var context = this.context;
|
||||||
|
|
||||||
// draw triangles!!
|
// draw triangles!!
|
||||||
var verticies = strip.verticies;
|
var verticies = strip.verticies;
|
||||||
var uvs = strip.uvs;
|
var uvs = strip.uvs;
|
||||||
|
|
||||||
var length = verticies.length/2;
|
var length = verticies.length/2;
|
||||||
this.count++;
|
this.count++;
|
||||||
for (var i=1; i < length-2; i++)
|
|
||||||
{
|
|
||||||
|
|
||||||
// draw some triangles!
|
for (var i = 1; i < length-2; i++)
|
||||||
var index = i*2;
|
{
|
||||||
|
// draw some triangles!
|
||||||
|
var index = i*2;
|
||||||
|
|
||||||
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4];
|
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4];
|
||||||
var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
|
var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
|
||||||
|
|
||||||
var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width;
|
var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width;
|
||||||
var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height;
|
var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height;
|
||||||
|
|
||||||
|
context.save();
|
||||||
|
context.beginPath();
|
||||||
|
context.moveTo(x0, y0);
|
||||||
|
context.lineTo(x1, y1);
|
||||||
|
context.lineTo(x2, y2);
|
||||||
|
context.closePath();
|
||||||
|
|
||||||
context.save();
|
context.clip();
|
||||||
context.beginPath();
|
|
||||||
context.moveTo(x0, y0);
|
|
||||||
context.lineTo(x1, y1);
|
|
||||||
context.lineTo(x2, y2);
|
|
||||||
context.closePath();
|
|
||||||
|
|
||||||
context.clip();
|
|
||||||
|
|
||||||
|
|
||||||
// Compute matrix transform
|
// Compute matrix transform
|
||||||
var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
|
var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
|
||||||
var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
|
var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
|
||||||
var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2;
|
var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2;
|
||||||
var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2;
|
var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2;
|
||||||
var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
|
var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
|
||||||
var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
|
var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
|
||||||
var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2;
|
var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2;
|
||||||
|
|
||||||
|
context.transform(deltaA / delta, deltaD / delta,
|
||||||
|
deltaB / delta, deltaE / delta,
|
||||||
|
deltaC / delta, deltaF / delta);
|
||||||
|
|
||||||
|
context.drawImage(strip.texture.baseTexture.source, 0, 0);
|
||||||
|
context.restore();
|
||||||
context.transform(delta_a/delta, delta_d/delta,
|
}
|
||||||
delta_b/delta, delta_e/delta,
|
};
|
||||||
delta_c/delta, delta_f/delta);
|
|
||||||
|
|
||||||
context.drawImage(strip.texture.baseTexture.source, 0, 0);
|
|
||||||
context.restore();
|
|
||||||
};
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
|
@ -12,26 +12,25 @@ PIXI.PixiShader = function()
|
||||||
/**
|
/**
|
||||||
* @property {any} program - The WebGL program.
|
* @property {any} program - The WebGL program.
|
||||||
*/
|
*/
|
||||||
this.program;
|
this.program = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @property {array} fragmentSrc - The fragment shader.
|
* @property {array} fragmentSrc - The fragment shader.
|
||||||
*/
|
*/
|
||||||
this.fragmentSrc = [
|
this.fragmentSrc = [
|
||||||
"precision lowp float;",
|
'precision lowp float;',
|
||||||
"varying vec2 vTextureCoord;",
|
'varying vec2 vTextureCoord;',
|
||||||
"varying float vColor;",
|
'varying float vColor;',
|
||||||
"uniform sampler2D uSampler;",
|
'uniform sampler2D uSampler;',
|
||||||
"void main(void) {",
|
'void main(void) {',
|
||||||
"gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;",
|
' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;',
|
||||||
"}"
|
'}'
|
||||||
];
|
];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @property {number} textureCount - A local texture counter for multi-texture shaders.
|
* @property {number} textureCount - A local texture counter for multi-texture shaders.
|
||||||
*/
|
*/
|
||||||
this.textureCount = 0;
|
this.textureCount = 0;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -39,22 +38,22 @@ PIXI.PixiShader = function()
|
||||||
*/
|
*/
|
||||||
PIXI.PixiShader.prototype.init = function()
|
PIXI.PixiShader.prototype.init = function()
|
||||||
{
|
{
|
||||||
var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc)
|
var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc);
|
||||||
|
|
||||||
var gl = PIXI.gl;
|
var gl = PIXI.gl;
|
||||||
|
|
||||||
gl.useProgram(program);
|
gl.useProgram(program);
|
||||||
|
|
||||||
// get and store the uniforms for the shader
|
// get and store the uniforms for the shader
|
||||||
this.uSampler = gl.getUniformLocation(program, "uSampler");
|
this.uSampler = gl.getUniformLocation(program, 'uSampler');
|
||||||
this.projectionVector = gl.getUniformLocation(program, "projectionVector");
|
this.projectionVector = gl.getUniformLocation(program, 'projectionVector');
|
||||||
this.offsetVector = gl.getUniformLocation(program, "offsetVector");
|
this.offsetVector = gl.getUniformLocation(program, 'offsetVector');
|
||||||
this.dimensions = gl.getUniformLocation(program, "dimensions");
|
this.dimensions = gl.getUniformLocation(program, 'dimensions');
|
||||||
|
|
||||||
// get and store the attributes
|
// get and store the attributes
|
||||||
this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
|
this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
|
||||||
this.colorAttribute = gl.getAttribLocation(program, "aColor");
|
this.colorAttribute = gl.getAttribLocation(program, 'aColor');
|
||||||
this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord");
|
this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord');
|
||||||
|
|
||||||
// add those custom shaders!
|
// add those custom shaders!
|
||||||
for (var key in this.uniforms)
|
for (var key in this.uniforms)
|
||||||
|
@ -83,10 +82,11 @@ PIXI.PixiShader.prototype.initUniforms = function()
|
||||||
|
|
||||||
for (var key in this.uniforms)
|
for (var key in this.uniforms)
|
||||||
{
|
{
|
||||||
var uniform = this.uniforms[key];
|
uniform = this.uniforms[key];
|
||||||
|
|
||||||
var type = uniform.type;
|
var type = uniform.type;
|
||||||
|
|
||||||
if (type == 'sampler2D')
|
if (type === 'sampler2D')
|
||||||
{
|
{
|
||||||
uniform._init = false;
|
uniform._init = false;
|
||||||
|
|
||||||
|
@ -95,21 +95,21 @@ PIXI.PixiShader.prototype.initUniforms = function()
|
||||||
this.initSampler2D(uniform);
|
this.initSampler2D(uniform);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if (type == 'mat2' || type == 'mat3' || type == 'mat4')
|
else if (type === 'mat2' || type === 'mat3' || type === 'mat4')
|
||||||
{
|
{
|
||||||
// These require special handling
|
// These require special handling
|
||||||
uniform.glMatrix = true;
|
uniform.glMatrix = true;
|
||||||
uniform.glValueLength = 1;
|
uniform.glValueLength = 1;
|
||||||
|
|
||||||
if (type == 'mat2')
|
if (type === 'mat2')
|
||||||
{
|
{
|
||||||
uniform.glFunc = PIXI.gl.uniformMatrix2fv;
|
uniform.glFunc = PIXI.gl.uniformMatrix2fv;
|
||||||
}
|
}
|
||||||
else if (type == 'mat3')
|
else if (type === 'mat3')
|
||||||
{
|
{
|
||||||
uniform.glFunc = PIXI.gl.uniformMatrix3fv;
|
uniform.glFunc = PIXI.gl.uniformMatrix3fv;
|
||||||
}
|
}
|
||||||
else if (type == 'mat4')
|
else if (type === 'mat4')
|
||||||
{
|
{
|
||||||
uniform.glFunc = PIXI.gl.uniformMatrix4fv;
|
uniform.glFunc = PIXI.gl.uniformMatrix4fv;
|
||||||
}
|
}
|
||||||
|
@ -119,15 +119,15 @@ PIXI.PixiShader.prototype.initUniforms = function()
|
||||||
// GL function reference
|
// GL function reference
|
||||||
uniform.glFunc = PIXI.gl['uniform' + type];
|
uniform.glFunc = PIXI.gl['uniform' + type];
|
||||||
|
|
||||||
if (type == '2f' || type == '2i')
|
if (type === '2f' || type === '2i')
|
||||||
{
|
{
|
||||||
uniform.glValueLength = 2;
|
uniform.glValueLength = 2;
|
||||||
}
|
}
|
||||||
else if (type == '3f' || type == '3i')
|
else if (type === '3f' || type === '3i')
|
||||||
{
|
{
|
||||||
uniform.glValueLength = 3;
|
uniform.glValueLength = 3;
|
||||||
}
|
}
|
||||||
else if (type == '4f' || type == '4i')
|
else if (type === '4f' || type === '4i')
|
||||||
{
|
{
|
||||||
uniform.glValueLength = 4;
|
uniform.glValueLength = 4;
|
||||||
}
|
}
|
||||||
|
@ -229,7 +229,7 @@ PIXI.PixiShader.prototype.syncUniforms = function()
|
||||||
|
|
||||||
uniform = this.uniforms[key];
|
uniform = this.uniforms[key];
|
||||||
|
|
||||||
if (uniform.glValueLength == 1)
|
if (uniform.glValueLength === 1)
|
||||||
{
|
{
|
||||||
if (uniform.glMatrix === true)
|
if (uniform.glMatrix === true)
|
||||||
{
|
{
|
||||||
|
@ -240,19 +240,19 @@ PIXI.PixiShader.prototype.syncUniforms = function()
|
||||||
uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value);
|
uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if (uniform.glValueLength == 2)
|
else if (uniform.glValueLength === 2)
|
||||||
{
|
{
|
||||||
uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y);
|
uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y);
|
||||||
}
|
}
|
||||||
else if (uniform.glValueLength == 3)
|
else if (uniform.glValueLength === 3)
|
||||||
{
|
{
|
||||||
uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z);
|
uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z);
|
||||||
}
|
}
|
||||||
else if (uniform.glValueLength == 4)
|
else if (uniform.glValueLength === 4)
|
||||||
{
|
{
|
||||||
uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w);
|
uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w);
|
||||||
}
|
}
|
||||||
else if (uniform.type == 'sampler2D')
|
else if (uniform.type === 'sampler2D')
|
||||||
{
|
{
|
||||||
if (uniform._init)
|
if (uniform._init)
|
||||||
{
|
{
|
||||||
|
@ -271,22 +271,21 @@ PIXI.PixiShader.prototype.syncUniforms = function()
|
||||||
};
|
};
|
||||||
|
|
||||||
PIXI.PixiShader.defaultVertexSrc = [
|
PIXI.PixiShader.defaultVertexSrc = [
|
||||||
|
'attribute vec2 aVertexPosition;',
|
||||||
|
'attribute vec2 aTextureCoord;',
|
||||||
|
'attribute float aColor;',
|
||||||
|
|
||||||
"attribute vec2 aVertexPosition;",
|
'uniform vec2 projectionVector;',
|
||||||
"attribute vec2 aTextureCoord;",
|
'uniform vec2 offsetVector;',
|
||||||
"attribute float aColor;",
|
'varying vec2 vTextureCoord;',
|
||||||
|
|
||||||
"uniform vec2 projectionVector;",
|
'varying float vColor;',
|
||||||
"uniform vec2 offsetVector;",
|
|
||||||
"varying vec2 vTextureCoord;",
|
|
||||||
|
|
||||||
"varying float vColor;",
|
'const vec2 center = vec2(-1.0, 1.0);',
|
||||||
|
|
||||||
"const vec2 center = vec2(-1.0, 1.0);",
|
'void main(void) {',
|
||||||
|
' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);',
|
||||||
"void main(void) {",
|
' vTextureCoord = aTextureCoord;',
|
||||||
"gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);",
|
' vColor = aColor;',
|
||||||
"vTextureCoord = aTextureCoord;",
|
'}'
|
||||||
"vColor = aColor;",
|
|
||||||
"}"
|
|
||||||
];
|
];
|
||||||
|
|
|
@ -5,53 +5,54 @@
|
||||||
|
|
||||||
PIXI.PrimitiveShader = function()
|
PIXI.PrimitiveShader = function()
|
||||||
{
|
{
|
||||||
// the webGL program..
|
// the webGL program..
|
||||||
this.program;
|
this.program = null;
|
||||||
|
|
||||||
this.fragmentSrc = [
|
this.fragmentSrc = [
|
||||||
"precision mediump float;",
|
'precision mediump float;',
|
||||||
"varying vec4 vColor;",
|
'varying vec4 vColor;',
|
||||||
"void main(void) {",
|
|
||||||
"gl_FragColor = vColor;",
|
'void main(void) {',
|
||||||
"}"
|
' gl_FragColor = vColor;',
|
||||||
|
'}'
|
||||||
];
|
];
|
||||||
|
|
||||||
this.vertexSrc = [
|
this.vertexSrc = [
|
||||||
"attribute vec2 aVertexPosition;",
|
'attribute vec2 aVertexPosition;',
|
||||||
"attribute vec4 aColor;",
|
'attribute vec4 aColor;',
|
||||||
"uniform mat3 translationMatrix;",
|
'uniform mat3 translationMatrix;',
|
||||||
"uniform vec2 projectionVector;",
|
'uniform vec2 projectionVector;',
|
||||||
"uniform vec2 offsetVector;",
|
'uniform vec2 offsetVector;',
|
||||||
"uniform float alpha;",
|
'uniform float alpha;',
|
||||||
"varying vec4 vColor;",
|
'varying vec4 vColor;',
|
||||||
"void main(void) {",
|
|
||||||
"vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);",
|
|
||||||
"v -= offsetVector.xyx;",
|
|
||||||
"gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);",
|
|
||||||
"vColor = aColor * alpha;",
|
|
||||||
"}"
|
|
||||||
];
|
|
||||||
|
|
||||||
}
|
'void main(void) {',
|
||||||
|
' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);',
|
||||||
|
' v -= offsetVector.xyx;',
|
||||||
|
' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);',
|
||||||
|
' vColor = aColor * alpha;',
|
||||||
|
'}'
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
PIXI.PrimitiveShader.prototype.init = function()
|
PIXI.PrimitiveShader.prototype.init = function()
|
||||||
{
|
{
|
||||||
var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc);
|
var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc);
|
||||||
|
|
||||||
var gl = PIXI.gl;
|
var gl = PIXI.gl;
|
||||||
|
|
||||||
gl.useProgram(program);
|
gl.useProgram(program);
|
||||||
|
|
||||||
// get and store the uniforms for the shader
|
// get and store the uniforms for the shader
|
||||||
this.projectionVector = gl.getUniformLocation(program, "projectionVector");
|
this.projectionVector = gl.getUniformLocation(program, 'projectionVector');
|
||||||
this.offsetVector = gl.getUniformLocation(program, "offsetVector");
|
this.offsetVector = gl.getUniformLocation(program, 'offsetVector');
|
||||||
|
|
||||||
// get and store the attributes
|
// get and store the attributes
|
||||||
this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
|
this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
|
||||||
this.colorAttribute = gl.getAttribLocation(program, "aColor");
|
this.colorAttribute = gl.getAttribLocation(program, 'aColor');
|
||||||
|
|
||||||
this.translationMatrix = gl.getUniformLocation(program, "translationMatrix");
|
this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix');
|
||||||
this.alpha = gl.getUniformLocation(program, "alpha");
|
this.alpha = gl.getUniformLocation(program, 'alpha');
|
||||||
|
|
||||||
this.program = program;
|
this.program = program;
|
||||||
}
|
};
|
||||||
|
|
|
@ -5,61 +5,63 @@
|
||||||
|
|
||||||
PIXI.StripShader = function()
|
PIXI.StripShader = function()
|
||||||
{
|
{
|
||||||
// the webGL program..
|
// the webGL program..
|
||||||
this.program;
|
this.program = null;
|
||||||
|
|
||||||
this.fragmentSrc = [
|
this.fragmentSrc = [
|
||||||
"precision mediump float;",
|
'precision mediump float;',
|
||||||
"varying vec2 vTextureCoord;",
|
'varying vec2 vTextureCoord;',
|
||||||
"varying float vColor;",
|
'varying float vColor;',
|
||||||
"uniform float alpha;",
|
'uniform float alpha;',
|
||||||
"uniform sampler2D uSampler;",
|
'uniform sampler2D uSampler;',
|
||||||
"void main(void) {",
|
|
||||||
"gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));",
|
'void main(void) {',
|
||||||
"gl_FragColor = gl_FragColor * alpha;",
|
' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));',
|
||||||
"}"
|
' gl_FragColor = gl_FragColor * alpha;',
|
||||||
|
'}'
|
||||||
];
|
];
|
||||||
|
|
||||||
this.vertexSrc = [
|
this.vertexSrc = [
|
||||||
"attribute vec2 aVertexPosition;",
|
'attribute vec2 aVertexPosition;',
|
||||||
"attribute vec2 aTextureCoord;",
|
'attribute vec2 aTextureCoord;',
|
||||||
"attribute float aColor;",
|
'attribute float aColor;',
|
||||||
"uniform mat3 translationMatrix;",
|
'uniform mat3 translationMatrix;',
|
||||||
"uniform vec2 projectionVector;",
|
'uniform vec2 projectionVector;',
|
||||||
"varying vec2 vTextureCoord;",
|
'varying vec2 vTextureCoord;',
|
||||||
"varying vec2 offsetVector;",
|
'varying vec2 offsetVector;',
|
||||||
"varying float vColor;",
|
'varying float vColor;',
|
||||||
"void main(void) {",
|
|
||||||
"vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);",
|
'void main(void) {',
|
||||||
"v -= offsetVector.xyx;",
|
' vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);',
|
||||||
"gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);",
|
' v -= offsetVector.xyx;',
|
||||||
"vTextureCoord = aTextureCoord;",
|
' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);',
|
||||||
"vColor = aColor;",
|
' vTextureCoord = aTextureCoord;',
|
||||||
"}"
|
' vColor = aColor;',
|
||||||
|
'}'
|
||||||
];
|
];
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.StripShader.prototype.init = function()
|
PIXI.StripShader.prototype.init = function()
|
||||||
{
|
{
|
||||||
var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc)
|
var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc);
|
||||||
|
|
||||||
var gl = PIXI.gl;
|
var gl = PIXI.gl;
|
||||||
|
|
||||||
gl.useProgram(program);
|
gl.useProgram(program);
|
||||||
|
|
||||||
// get and store the uniforms for the shader
|
// get and store the uniforms for the shader
|
||||||
this.uSampler = gl.getUniformLocation(program, "uSampler");
|
this.uSampler = gl.getUniformLocation(program, 'uSampler');
|
||||||
this.projectionVector = gl.getUniformLocation(program, "projectionVector");
|
this.projectionVector = gl.getUniformLocation(program, 'projectionVector');
|
||||||
this.offsetVector = gl.getUniformLocation(program, "offsetVector");
|
this.offsetVector = gl.getUniformLocation(program, 'offsetVector');
|
||||||
this.colorAttribute = gl.getAttribLocation(program, "aColor");
|
this.colorAttribute = gl.getAttribLocation(program, 'aColor');
|
||||||
//this.dimensions = gl.getUniformLocation(this.program, "dimensions");
|
//this.dimensions = gl.getUniformLocation(this.program, 'dimensions');
|
||||||
|
|
||||||
// get and store the attributes
|
// get and store the attributes
|
||||||
this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
|
this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
|
||||||
this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord");
|
this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord');
|
||||||
|
|
||||||
this.translationMatrix = gl.getUniformLocation(program, "translationMatrix");
|
this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix');
|
||||||
this.alpha = gl.getUniformLocation(program, "alpha");
|
this.alpha = gl.getUniformLocation(program, 'alpha');
|
||||||
|
|
||||||
this.program = program;
|
this.program = program;
|
||||||
}
|
};
|
||||||
|
|
|
@ -9,35 +9,35 @@ PIXI._batchs = [];
|
||||||
*/
|
*/
|
||||||
PIXI._getBatch = function(gl)
|
PIXI._getBatch = function(gl)
|
||||||
{
|
{
|
||||||
if(PIXI._batchs.length == 0)
|
if(PIXI._batchs.length === 0)
|
||||||
{
|
{
|
||||||
return new PIXI.WebGLBatch(gl);
|
return new PIXI.WebGLBatch(gl);
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
return PIXI._batchs.pop();
|
return PIXI._batchs.pop();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
PIXI._returnBatch = function(batch)
|
PIXI._returnBatch = function(batch)
|
||||||
{
|
{
|
||||||
batch.clean();
|
batch.clean();
|
||||||
PIXI._batchs.push(batch);
|
PIXI._batchs.push(batch);
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
PIXI._restoreBatchs = function(gl)
|
PIXI._restoreBatchs = function(gl)
|
||||||
{
|
{
|
||||||
for (var i=0; i < PIXI._batchs.length; i++)
|
for (var i=0; i < PIXI._batchs.length; i++)
|
||||||
{
|
{
|
||||||
PIXI._batchs[i].restoreLostContext(gl);
|
PIXI._batchs[i].restoreLostContext(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.
|
||||||
|
@ -53,17 +53,17 @@ PIXI._restoreBatchs = function(gl)
|
||||||
*/
|
*/
|
||||||
PIXI.WebGLBatch = function(gl)
|
PIXI.WebGLBatch = function(gl)
|
||||||
{
|
{
|
||||||
this.gl = gl;
|
this.gl = gl;
|
||||||
|
|
||||||
this.size = 0;
|
this.size = 0;
|
||||||
|
|
||||||
this.vertexBuffer = gl.createBuffer();
|
this.vertexBuffer = gl.createBuffer();
|
||||||
this.indexBuffer = gl.createBuffer();
|
this.indexBuffer = gl.createBuffer();
|
||||||
this.uvBuffer = gl.createBuffer();
|
this.uvBuffer = gl.createBuffer();
|
||||||
this.colorBuffer = gl.createBuffer();
|
this.colorBuffer = gl.createBuffer();
|
||||||
this.blendMode = PIXI.blendModes.NORMAL;
|
this.blendMode = PIXI.blendModes.NORMAL;
|
||||||
this.dynamicSize = 1;
|
this.dynamicSize = 1;
|
||||||
}
|
};
|
||||||
|
|
||||||
// constructor
|
// constructor
|
||||||
PIXI.WebGLBatch.prototype.constructor = PIXI.WebGLBatch;
|
PIXI.WebGLBatch.prototype.constructor = PIXI.WebGLBatch;
|
||||||
|
@ -75,17 +75,17 @@ PIXI.WebGLBatch.prototype.constructor = PIXI.WebGLBatch;
|
||||||
*/
|
*/
|
||||||
PIXI.WebGLBatch.prototype.clean = function()
|
PIXI.WebGLBatch.prototype.clean = function()
|
||||||
{
|
{
|
||||||
this.verticies = [];
|
this.verticies = [];
|
||||||
this.uvs = [];
|
this.uvs = [];
|
||||||
this.indices = [];
|
this.indices = [];
|
||||||
this.colors = [];
|
this.colors = [];
|
||||||
this.dynamicSize = 1;
|
this.dynamicSize = 1;
|
||||||
this.texture = null;
|
this.texture = null;
|
||||||
this.last = null;
|
this.last = null;
|
||||||
this.size = 0;
|
this.size = 0;
|
||||||
this.head;
|
this.head = null;
|
||||||
this.tail;
|
this.tail = null;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Recreates the buffers in the event of a context loss
|
* Recreates the buffers in the event of a context loss
|
||||||
|
@ -95,32 +95,32 @@ PIXI.WebGLBatch.prototype.clean = function()
|
||||||
*/
|
*/
|
||||||
PIXI.WebGLBatch.prototype.restoreLostContext = function(gl)
|
PIXI.WebGLBatch.prototype.restoreLostContext = function(gl)
|
||||||
{
|
{
|
||||||
this.gl = gl;
|
this.gl = gl;
|
||||||
this.vertexBuffer = gl.createBuffer();
|
this.vertexBuffer = gl.createBuffer();
|
||||||
this.indexBuffer = gl.createBuffer();
|
this.indexBuffer = gl.createBuffer();
|
||||||
this.uvBuffer = gl.createBuffer();
|
this.uvBuffer = gl.createBuffer();
|
||||||
this.colorBuffer = gl.createBuffer();
|
this.colorBuffer = gl.createBuffer();
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 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
|
* @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
|
* 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)
|
||||||
{
|
{
|
||||||
sprite.batch = this;
|
sprite.batch = this;
|
||||||
this.dirty = true;
|
this.dirty = true;
|
||||||
this.blendMode = sprite.blendMode;
|
this.blendMode = sprite.blendMode;
|
||||||
this.texture = sprite.texture.baseTexture;
|
this.texture = sprite.texture.baseTexture;
|
||||||
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
|
||||||
|
@ -131,24 +131,24 @@ 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;
|
||||||
tempPrev.__next = sprite;
|
tempPrev.__next = sprite;
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
this.head = sprite;
|
this.head = sprite;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* inserts a sprite after the specified sprite
|
* inserts a sprite after the specified sprite
|
||||||
|
@ -159,25 +159,25 @@ 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;
|
||||||
tempNext.__prev = sprite;
|
tempNext.__prev = sprite;
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
this.tail = sprite
|
this.tail = sprite;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* removes a sprite from the batch
|
* removes a sprite from the batch
|
||||||
|
@ -187,41 +187,41 @@ PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite)
|
||||||
*/
|
*/
|
||||||
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;
|
||||||
sprite.__prev = null;
|
sprite.__prev = null;
|
||||||
sprite.__next = null;
|
sprite.__next = null;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(sprite.__prev)
|
if(sprite.__prev)
|
||||||
{
|
{
|
||||||
sprite.__prev.__next = sprite.__next;
|
sprite.__prev.__next = sprite.__next;
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
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;
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
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;
|
||||||
this.dirty = true;
|
this.dirty = true;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 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.
|
||||||
|
@ -232,37 +232,37 @@ PIXI.WebGLBatch.prototype.remove = function(sprite)
|
||||||
*/
|
*/
|
||||||
PIXI.WebGLBatch.prototype.split = function(sprite)
|
PIXI.WebGLBatch.prototype.split = function(sprite)
|
||||||
{
|
{
|
||||||
this.dirty = true;
|
this.dirty = true;
|
||||||
|
|
||||||
var batch = new PIXI.WebGLBatch(this.gl);
|
var batch = new PIXI.WebGLBatch(this.gl);
|
||||||
batch.init(sprite);
|
batch.init(sprite);
|
||||||
batch.texture = this.texture;
|
batch.texture = this.texture;
|
||||||
batch.tail = this.tail;
|
batch.tail = this.tail;
|
||||||
|
|
||||||
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!
|
||||||
|
|
||||||
// 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)
|
||||||
{
|
{
|
||||||
tempSize++;
|
tempSize++;
|
||||||
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
|
||||||
|
@ -272,22 +272,22 @@ PIXI.WebGLBatch.prototype.split = function(sprite)
|
||||||
*/
|
*/
|
||||||
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
|
* Grows the size of the batch. As the elements in the batch cannot have a dynamic size this
|
||||||
|
@ -298,51 +298,52 @@ PIXI.WebGLBatch.prototype.merge = function(batch)
|
||||||
*/
|
*/
|
||||||
PIXI.WebGLBatch.prototype.growBatch = function()
|
PIXI.WebGLBatch.prototype.growBatch = function()
|
||||||
{
|
{
|
||||||
var gl = this.gl;
|
var gl = this.gl;
|
||||||
if( this.size == 1)
|
if( this.size === 1)
|
||||||
{
|
{
|
||||||
this.dynamicSize = 1;
|
this.dynamicSize = 1;
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
this.dynamicSize = this.size * 1.5
|
this.dynamicSize = this.size * 1.5;
|
||||||
}
|
}
|
||||||
// grow verts
|
|
||||||
this.verticies = new Float32Array(this.dynamicSize * 8);
|
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
|
// grow verts
|
||||||
gl.bufferData(gl.ARRAY_BUFFER,this.verticies , gl.DYNAMIC_DRAW);
|
this.verticies = new Float32Array(this.dynamicSize * 8);
|
||||||
|
|
||||||
this.uvs = new Float32Array( this.dynamicSize * 8 );
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
|
gl.bufferData(gl.ARRAY_BUFFER,this.verticies , gl.DYNAMIC_DRAW);
|
||||||
gl.bufferData(gl.ARRAY_BUFFER, this.uvs , gl.DYNAMIC_DRAW);
|
|
||||||
|
|
||||||
this.dirtyUVS = true;
|
this.uvs = new Float32Array( this.dynamicSize * 8 );
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
|
||||||
|
gl.bufferData(gl.ARRAY_BUFFER, this.uvs , gl.DYNAMIC_DRAW);
|
||||||
|
|
||||||
this.colors = new Float32Array( this.dynamicSize * 4 );
|
this.dirtyUVS = true;
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer);
|
|
||||||
gl.bufferData(gl.ARRAY_BUFFER, this.colors , gl.DYNAMIC_DRAW);
|
|
||||||
|
|
||||||
this.dirtyColors = true;
|
this.colors = new Float32Array( this.dynamicSize * 4 );
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer);
|
||||||
|
gl.bufferData(gl.ARRAY_BUFFER, this.colors , gl.DYNAMIC_DRAW);
|
||||||
|
|
||||||
this.indices = new Uint16Array(this.dynamicSize * 6);
|
this.dirtyColors = true;
|
||||||
var length = this.indices.length/6;
|
|
||||||
|
|
||||||
for (var i=0; i < length; i++)
|
this.indices = new Uint16Array(this.dynamicSize * 6);
|
||||||
{
|
var length = this.indices.length/6;
|
||||||
var index2 = i * 6;
|
|
||||||
var index3 = i * 4;
|
|
||||||
this.indices[index2 + 0] = index3 + 0;
|
|
||||||
this.indices[index2 + 1] = index3 + 1;
|
|
||||||
this.indices[index2 + 2] = index3 + 2;
|
|
||||||
this.indices[index2 + 3] = index3 + 0;
|
|
||||||
this.indices[index2 + 4] = index3 + 2;
|
|
||||||
this.indices[index2 + 5] = index3 + 3;
|
|
||||||
};
|
|
||||||
|
|
||||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
|
for (var i = 0; i < length; i++)
|
||||||
|
{
|
||||||
|
var index2 = i * 6;
|
||||||
|
var index3 = i * 4;
|
||||||
|
this.indices[index2 + 0] = index3 + 0;
|
||||||
|
this.indices[index2 + 1] = index3 + 1;
|
||||||
|
this.indices[index2 + 2] = index3 + 2;
|
||||||
|
this.indices[index2 + 3] = index3 + 0;
|
||||||
|
this.indices[index2 + 4] = index3 + 2;
|
||||||
|
this.indices[index2 + 5] = index3 + 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
@ -351,54 +352,51 @@ PIXI.WebGLBatch.prototype.growBatch = function()
|
||||||
*/
|
*/
|
||||||
PIXI.WebGLBatch.prototype.refresh = function()
|
PIXI.WebGLBatch.prototype.refresh = function()
|
||||||
{
|
{
|
||||||
var gl = this.gl;
|
if (this.dynamicSize < this.size)
|
||||||
|
{
|
||||||
|
this.growBatch();
|
||||||
|
}
|
||||||
|
|
||||||
if (this.dynamicSize < this.size)
|
var indexRun = 0;
|
||||||
{
|
var index, colorIndex;
|
||||||
this.growBatch();
|
|
||||||
}
|
|
||||||
|
|
||||||
var indexRun = 0;
|
var displayObject = this.head;
|
||||||
var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index;
|
|
||||||
var a, b, c, d, tx, ty;
|
|
||||||
|
|
||||||
var displayObject = this.head;
|
while(displayObject)
|
||||||
|
{
|
||||||
|
index = indexRun * 8;
|
||||||
|
|
||||||
while(displayObject)
|
var texture = displayObject.texture;
|
||||||
{
|
|
||||||
index = indexRun * 8;
|
|
||||||
|
|
||||||
var texture = displayObject.texture;
|
var frame = texture.frame;
|
||||||
|
var tw = texture.baseTexture.width;
|
||||||
|
var th = texture.baseTexture.height;
|
||||||
|
|
||||||
var frame = texture.frame;
|
this.uvs[index + 0] = frame.x / tw;
|
||||||
var tw = texture.baseTexture.width;
|
this.uvs[index +1] = frame.y / th;
|
||||||
var th = texture.baseTexture.height;
|
|
||||||
|
|
||||||
this.uvs[index + 0] = frame.x / tw;
|
this.uvs[index +2] = (frame.x + frame.width) / tw;
|
||||||
this.uvs[index +1] = frame.y / th;
|
this.uvs[index +3] = frame.y / th;
|
||||||
|
|
||||||
this.uvs[index +2] = (frame.x + frame.width) / tw;
|
this.uvs[index +4] = (frame.x + frame.width) / tw;
|
||||||
this.uvs[index +3] = frame.y / th;
|
this.uvs[index +5] = (frame.y + frame.height) / th;
|
||||||
|
|
||||||
this.uvs[index +4] = (frame.x + frame.width) / tw;
|
this.uvs[index +6] = frame.x / tw;
|
||||||
this.uvs[index +5] = (frame.y + frame.height) / th;
|
this.uvs[index +7] = (frame.y + frame.height) / th;
|
||||||
|
|
||||||
this.uvs[index +6] = frame.x / tw;
|
displayObject.updateFrame = false;
|
||||||
this.uvs[index +7] = (frame.y + frame.height) / th;
|
|
||||||
|
|
||||||
displayObject.updateFrame = false;
|
colorIndex = indexRun * 4;
|
||||||
|
this.colors[colorIndex] = this.colors[colorIndex + 1] = this.colors[colorIndex + 2] = this.colors[colorIndex + 3] = displayObject.worldAlpha;
|
||||||
|
|
||||||
colorIndex = indexRun * 4;
|
displayObject = displayObject.__next;
|
||||||
this.colors[colorIndex] = this.colors[colorIndex + 1] = this.colors[colorIndex + 2] = this.colors[colorIndex + 3] = displayObject.worldAlpha;
|
|
||||||
|
|
||||||
displayObject = displayObject.__next;
|
indexRun++;
|
||||||
|
}
|
||||||
|
|
||||||
indexRun ++;
|
this.dirtyUVS = true;
|
||||||
}
|
this.dirtyColors = true;
|
||||||
|
};
|
||||||
this.dirtyUVS = 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
|
||||||
|
@ -407,103 +405,102 @@ PIXI.WebGLBatch.prototype.refresh = function()
|
||||||
*/
|
*/
|
||||||
PIXI.WebGLBatch.prototype.update = function()
|
PIXI.WebGLBatch.prototype.update = function()
|
||||||
{
|
{
|
||||||
var gl = this.gl;
|
var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index;
|
||||||
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;
|
||||||
var verticies = this.verticies;
|
var verticies = this.verticies;
|
||||||
var uvs = this.uvs;
|
var uvs = this.uvs;
|
||||||
var colors = this.colors;
|
var colors = this.colors;
|
||||||
|
|
||||||
while(displayObject)
|
while(displayObject)
|
||||||
{
|
{
|
||||||
if(displayObject.vcount === PIXI.visibleCount)
|
if(displayObject.vcount === PIXI.visibleCount)
|
||||||
{
|
{
|
||||||
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];
|
||||||
|
|
||||||
verticies[index + 0 ] = a * w1 + c * h1 + tx;
|
verticies[index + 0 ] = a * w1 + c * h1 + tx;
|
||||||
verticies[index + 1 ] = d * h1 + b * w1 + ty;
|
verticies[index + 1 ] = d * h1 + b * w1 + ty;
|
||||||
|
|
||||||
verticies[index + 2 ] = a * w0 + c * h1 + tx;
|
verticies[index + 2 ] = a * w0 + c * h1 + tx;
|
||||||
verticies[index + 3 ] = d * h1 + b * w0 + ty;
|
verticies[index + 3 ] = d * h1 + b * w0 + ty;
|
||||||
|
|
||||||
verticies[index + 4 ] = a * w0 + c * h0 + tx;
|
verticies[index + 4 ] = a * w0 + c * h0 + tx;
|
||||||
verticies[index + 5 ] = d * h0 + b * w0 + ty;
|
verticies[index + 5 ] = d * h0 + b * w0 + ty;
|
||||||
|
|
||||||
verticies[index + 6] = a * w1 + c * h0 + tx;
|
verticies[index + 6] = a * w1 + c * h0 + tx;
|
||||||
verticies[index + 7] = d * h0 + b * w1 + ty;
|
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;
|
||||||
|
|
||||||
uvs[index + 0] = frame.x / tw;
|
uvs[index + 0] = frame.x / tw;
|
||||||
uvs[index +1] = frame.y / th;
|
uvs[index +1] = frame.y / th;
|
||||||
|
|
||||||
uvs[index +2] = (frame.x + frame.width) / tw;
|
uvs[index +2] = (frame.x + frame.width) / tw;
|
||||||
uvs[index +3] = frame.y / th;
|
uvs[index +3] = frame.y / th;
|
||||||
|
|
||||||
uvs[index +4] = (frame.x + frame.width) / tw;
|
uvs[index +4] = (frame.x + frame.width) / tw;
|
||||||
uvs[index +5] = (frame.y + frame.height) / th;
|
uvs[index +5] = (frame.y + frame.height) / th;
|
||||||
|
|
||||||
uvs[index +6] = frame.x / tw;
|
uvs[index +6] = frame.x / tw;
|
||||||
uvs[index +7] = (frame.y + frame.height) / th;
|
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;
|
||||||
colors[colorIndex] = colors[colorIndex + 1] = colors[colorIndex + 2] = colors[colorIndex + 3] = displayObject.worldAlpha;
|
colors[colorIndex] = colors[colorIndex + 1] = colors[colorIndex + 2] = colors[colorIndex + 3] = displayObject.worldAlpha;
|
||||||
this.dirtyColors = true;
|
this.dirtyColors = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
index = indexRun * 8;
|
index = indexRun * 8;
|
||||||
|
|
||||||
verticies[index + 0 ] = verticies[index + 1 ] = verticies[index + 2 ] = verticies[index + 3 ] = verticies[index + 4 ] = verticies[index + 5 ] = verticies[index + 6] = verticies[index + 7] = 0;
|
verticies[index + 0 ] = verticies[index + 1 ] = verticies[index + 2 ] = verticies[index + 3 ] = verticies[index + 4 ] = verticies[index + 5 ] = verticies[index + 6] = verticies[index + 7] = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
indexRun++;
|
indexRun++;
|
||||||
displayObject = displayObject.__next;
|
displayObject = displayObject.__next;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Draws the batch to the frame buffer
|
* Draws the batch to the frame buffer
|
||||||
|
@ -512,41 +509,42 @@ PIXI.WebGLBatch.prototype.update = function()
|
||||||
*/
|
*/
|
||||||
PIXI.WebGLBatch.prototype.render = function(start, end)
|
PIXI.WebGLBatch.prototype.render = function(start, end)
|
||||||
{
|
{
|
||||||
start = start || 0;
|
start = start || 0;
|
||||||
|
|
||||||
if(end == undefined)end = this.size;
|
if(end === undefined)
|
||||||
|
end = this.size;
|
||||||
|
|
||||||
if(this.dirty)
|
if(this.dirty)
|
||||||
{
|
{
|
||||||
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.defaultShader;
|
var shaderProgram = PIXI.defaultShader;
|
||||||
|
|
||||||
//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..
|
||||||
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies)
|
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies);
|
||||||
gl.vertexAttribPointer(shaderProgram.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
|
gl.vertexAttribPointer(shaderProgram.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
|
||||||
// update the uvs
|
// update the uvs
|
||||||
//var isDefault = (shaderProgram == PIXI.shaderProgram)
|
//var isDefault = (shaderProgram == PIXI.shaderProgram)
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
|
||||||
|
|
||||||
if(this.dirtyUVS)
|
if(this.dirtyUVS)
|
||||||
{
|
{
|
||||||
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.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
|
gl.vertexAttribPointer(shaderProgram.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
|
||||||
|
@ -554,21 +552,21 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
|
||||||
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);
|
||||||
|
|
||||||
if(this.dirtyColors)
|
if(this.dirtyColors)
|
||||||
{
|
{
|
||||||
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 len = end - start;
|
var len = end - start;
|
||||||
|
|
||||||
// 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 );
|
||||||
}
|
};
|
||||||
|
|
|
@ -5,524 +5,507 @@
|
||||||
|
|
||||||
PIXI.WebGLFilterManager = function(transparent)
|
PIXI.WebGLFilterManager = function(transparent)
|
||||||
{
|
{
|
||||||
this.transparent = transparent;
|
this.transparent = transparent;
|
||||||
|
|
||||||
this.filterStack = [];
|
this.filterStack = [];
|
||||||
this.texturePool = [];
|
this.texturePool = [];
|
||||||
|
|
||||||
this.offsetX = 0;
|
this.offsetX = 0;
|
||||||
this.offsetY = 0;
|
this.offsetY = 0;
|
||||||
|
|
||||||
this.initShaderBuffers();
|
this.initShaderBuffers();
|
||||||
}
|
};
|
||||||
|
|
||||||
// API
|
// API
|
||||||
|
|
||||||
PIXI.WebGLFilterManager.prototype.begin = function(projection, buffer)
|
PIXI.WebGLFilterManager.prototype.begin = function(projection, buffer)
|
||||||
{
|
{
|
||||||
this.width = projection.x * 2;
|
this.width = projection.x * 2;
|
||||||
this.height = -projection.y * 2;
|
this.height = -projection.y * 2;
|
||||||
this.buffer = buffer;
|
this.buffer = buffer;
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock)
|
PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock)
|
||||||
{
|
{
|
||||||
var gl = PIXI.gl;
|
var gl = PIXI.gl;
|
||||||
|
|
||||||
// filter program
|
// filter program
|
||||||
// OPTIMISATION - the first filter is free if its a simple color change?
|
// OPTIMISATION - the first filter is free if its a simple color change?
|
||||||
this.filterStack.push(filterBlock);
|
this.filterStack.push(filterBlock);
|
||||||
|
|
||||||
var filter = filterBlock.filterPasses[0];
|
var filter = filterBlock.filterPasses[0];
|
||||||
|
|
||||||
|
this.offsetX += filterBlock.target.filterArea.x;
|
||||||
|
this.offsetY += filterBlock.target.filterArea.y;
|
||||||
|
|
||||||
|
var texture = this.texturePool.pop();
|
||||||
|
if(!texture)
|
||||||
|
{
|
||||||
|
texture = new PIXI.FilterTexture(this.width, this.height);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
texture.resize(this.width, this.height);
|
||||||
|
}
|
||||||
|
|
||||||
this.offsetX += filterBlock.target.filterArea.x;
|
gl.bindTexture(gl.TEXTURE_2D, texture.texture);
|
||||||
this.offsetY += filterBlock.target.filterArea.y;
|
|
||||||
|
|
||||||
|
this.getBounds(filterBlock.target);
|
||||||
|
|
||||||
|
// addpadding?
|
||||||
|
//displayObject.filterArea.x
|
||||||
|
|
||||||
|
var filterArea = filterBlock.target.filterArea;
|
||||||
|
|
||||||
|
var padidng = filter.padding;
|
||||||
|
filterArea.x -= padidng;
|
||||||
|
filterArea.y -= padidng;
|
||||||
|
filterArea.width += padidng * 2;
|
||||||
|
filterArea.height += padidng * 2;
|
||||||
|
|
||||||
var texture = this.texturePool.pop();
|
// cap filter to screen size..
|
||||||
if(!texture)
|
if(filterArea.x < 0)filterArea.x = 0;
|
||||||
{
|
if(filterArea.width > this.width)filterArea.width = this.width;
|
||||||
texture = new PIXI.FilterTexture(this.width, this.height);
|
if(filterArea.y < 0)filterArea.y = 0;
|
||||||
}
|
if(filterArea.height > this.height)filterArea.height = this.height;
|
||||||
else
|
|
||||||
{
|
|
||||||
texture.resize(this.width, this.height);
|
|
||||||
}
|
|
||||||
|
|
||||||
gl.bindTexture(gl.TEXTURE_2D, texture.texture);
|
//gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
|
||||||
|
gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer);
|
||||||
|
|
||||||
this.getBounds(filterBlock.target);
|
//console.log(filterArea)
|
||||||
|
// set view port
|
||||||
|
gl.viewport(0, 0, filterArea.width, filterArea.height);
|
||||||
|
|
||||||
// addpadding?
|
PIXI.projection.x = filterArea.width/2;
|
||||||
//displayObject.filterArea.x
|
PIXI.projection.y = -filterArea.height/2;
|
||||||
|
|
||||||
var filterArea = filterBlock.target.filterArea;
|
PIXI.offset.x = -filterArea.x;
|
||||||
|
PIXI.offset.y = -filterArea.y;
|
||||||
|
|
||||||
var padidng = filter.padding;
|
//console.log(PIXI.defaultShader.projectionVector)
|
||||||
filterArea.x -= padidng;
|
// update projection
|
||||||
filterArea.y -= padidng;
|
gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2);
|
||||||
filterArea.width += padidng * 2;
|
gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y);
|
||||||
filterArea.height += padidng * 2;
|
//PIXI.primitiveProgram
|
||||||
|
|
||||||
// cap filter to screen size..
|
gl.colorMask(true, true, true, true);
|
||||||
if(filterArea.x < 0)filterArea.x = 0;
|
gl.clearColor(0,0,0, 0);
|
||||||
if(filterArea.width > this.width)filterArea.width = this.width;
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||||
if(filterArea.y < 0)filterArea.y = 0;
|
|
||||||
if(filterArea.height > this.height)filterArea.height = this.height;
|
|
||||||
|
|
||||||
|
//filter.texture = texture;
|
||||||
|
filterBlock._glFilterTexture = texture;
|
||||||
|
|
||||||
//gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
|
//console.log("PUSH")
|
||||||
gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer);
|
};
|
||||||
|
|
||||||
// console.log(filterArea)
|
|
||||||
// set view port
|
|
||||||
gl.viewport(0, 0, filterArea.width, filterArea.height);
|
|
||||||
|
|
||||||
PIXI.projection.x = filterArea.width/2;
|
|
||||||
PIXI.projection.y = -filterArea.height/2;
|
|
||||||
|
|
||||||
PIXI.offset.x = -filterArea.x;
|
|
||||||
PIXI.offset.y = -filterArea.y;
|
|
||||||
|
|
||||||
//console.log(PIXI.defaultShader.projectionVector)
|
|
||||||
// update projection
|
|
||||||
gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2);
|
|
||||||
gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y);
|
|
||||||
//PIXI.primitiveProgram
|
|
||||||
|
|
||||||
gl.colorMask(true, true, true, true);
|
|
||||||
gl.clearColor(0,0,0, 0);
|
|
||||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
||||||
|
|
||||||
//filter.texture = texture;
|
|
||||||
filterBlock._glFilterTexture = texture;
|
|
||||||
|
|
||||||
//console.log("PUSH")
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
PIXI.WebGLFilterManager.prototype.popFilter = function()
|
PIXI.WebGLFilterManager.prototype.popFilter = function()
|
||||||
{
|
{
|
||||||
|
var gl = PIXI.gl;
|
||||||
|
var filterBlock = this.filterStack.pop();
|
||||||
|
var filterArea = filterBlock.target.filterArea;
|
||||||
|
var texture = filterBlock._glFilterTexture;
|
||||||
|
|
||||||
var gl = PIXI.gl;
|
if(filterBlock.filterPasses.length > 1)
|
||||||
|
{
|
||||||
|
gl.viewport(0, 0, filterArea.width, filterArea.height);
|
||||||
|
|
||||||
var filterBlock = this.filterStack.pop();
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
|
||||||
|
|
||||||
|
this.vertexArray[0] = 0;
|
||||||
|
this.vertexArray[1] = filterArea.height;
|
||||||
|
|
||||||
|
this.vertexArray[2] = filterArea.width;
|
||||||
|
this.vertexArray[3] = filterArea.height;
|
||||||
|
|
||||||
|
this.vertexArray[4] = 0;
|
||||||
|
this.vertexArray[5] = 0;
|
||||||
|
|
||||||
|
this.vertexArray[6] = filterArea.width;
|
||||||
|
this.vertexArray[7] = 0;
|
||||||
|
|
||||||
|
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray);
|
||||||
|
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
|
||||||
|
// nnow set the uvs..
|
||||||
|
this.uvArray[2] = filterArea.width/this.width;
|
||||||
|
this.uvArray[5] = filterArea.height/this.height;
|
||||||
|
this.uvArray[6] = filterArea.width/this.width;
|
||||||
|
this.uvArray[7] = filterArea.height/this.height;
|
||||||
|
|
||||||
|
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray);
|
||||||
|
|
||||||
|
var inputTexture = texture;
|
||||||
|
var outputTexture = this.texturePool.pop();
|
||||||
|
if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height);
|
||||||
|
|
||||||
|
// need to clear this FBO as it may have some left over elements from a prvious filter.
|
||||||
|
gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer );
|
||||||
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||||
|
|
||||||
|
gl.disable(gl.BLEND);
|
||||||
|
|
||||||
|
for (var i = 0; i < filterBlock.filterPasses.length-1; i++)
|
||||||
|
{
|
||||||
|
var filterPass = filterBlock.filterPasses[i];
|
||||||
|
|
||||||
|
gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer );
|
||||||
|
|
||||||
|
// set texture
|
||||||
|
gl.activeTexture(gl.TEXTURE0);
|
||||||
|
gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture);
|
||||||
|
|
||||||
|
// draw texture..
|
||||||
|
//filterPass.applyFilterPass(filterArea.width, filterArea.height);
|
||||||
|
this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height);
|
||||||
|
|
||||||
|
// swap the textures..
|
||||||
|
var temp = inputTexture;
|
||||||
|
inputTexture = outputTexture;
|
||||||
|
outputTexture = temp;
|
||||||
|
}
|
||||||
|
|
||||||
|
gl.enable(gl.BLEND);
|
||||||
|
|
||||||
|
texture = inputTexture;
|
||||||
|
this.texturePool.push(outputTexture);
|
||||||
|
}
|
||||||
|
|
||||||
|
var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1];
|
||||||
|
|
||||||
|
this.offsetX -= filterArea.x;
|
||||||
|
this.offsetY -= filterArea.y;
|
||||||
|
|
||||||
|
|
||||||
|
var sizeX = this.width;
|
||||||
|
var sizeY = this.height;
|
||||||
|
|
||||||
|
var offsetX = 0;
|
||||||
|
var offsetY = 0;
|
||||||
|
|
||||||
|
var buffer = this.buffer;
|
||||||
|
|
||||||
|
// time to render the filters texture to the previous scene
|
||||||
|
if(this.filterStack.length === 0)
|
||||||
|
{
|
||||||
|
gl.colorMask(true, true, true, this.transparent);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
var currentFilter = this.filterStack[this.filterStack.length-1];
|
||||||
|
filterArea = currentFilter.target.filterArea;
|
||||||
|
|
||||||
|
sizeX = filterArea.width;
|
||||||
|
sizeY = filterArea.height;
|
||||||
|
|
||||||
|
offsetX = filterArea.x;
|
||||||
|
offsetY = filterArea.y;
|
||||||
|
|
||||||
|
buffer = currentFilter._glFilterTexture.frameBuffer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var filterArea = filterBlock.target.filterArea;
|
// TODO need toremove thease global elements..
|
||||||
|
PIXI.projection.x = sizeX/2;
|
||||||
|
PIXI.projection.y = -sizeY/2;
|
||||||
|
|
||||||
var texture = filterBlock._glFilterTexture;
|
PIXI.offset.x = offsetX;
|
||||||
|
PIXI.offset.y = offsetY;
|
||||||
|
|
||||||
if(filterBlock.filterPasses.length > 1)
|
filterArea = filterBlock.target.filterArea;
|
||||||
{
|
|
||||||
gl.viewport(0, 0, filterArea.width, filterArea.height);
|
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
|
var x = filterArea.x-offsetX;
|
||||||
|
var y = filterArea.y-offsetY;
|
||||||
|
|
||||||
this.vertexArray[0] = 0;
|
// update the buffers..
|
||||||
this.vertexArray[1] = filterArea.height;
|
// make sure to flip the y!
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
|
||||||
|
|
||||||
this.vertexArray[2] = filterArea.width;
|
this.vertexArray[0] = x;
|
||||||
this.vertexArray[3] = filterArea.height;
|
this.vertexArray[1] = y + filterArea.height;
|
||||||
|
|
||||||
this.vertexArray[4] = 0;
|
this.vertexArray[2] = x + filterArea.width;
|
||||||
this.vertexArray[5] = 0;
|
this.vertexArray[3] = y + filterArea.height;
|
||||||
|
|
||||||
this.vertexArray[6] = filterArea.width;
|
this.vertexArray[4] = x;
|
||||||
this.vertexArray[7] = 0;
|
this.vertexArray[5] = y;
|
||||||
|
|
||||||
|
this.vertexArray[6] = x + filterArea.width;
|
||||||
|
this.vertexArray[7] = y;
|
||||||
|
|
||||||
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray);
|
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray);
|
||||||
|
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
|
this.uvArray[2] = filterArea.width/this.width;
|
||||||
// nnow set the uvs..
|
this.uvArray[5] = filterArea.height/this.height;
|
||||||
this.uvArray[2] = filterArea.width/this.width;
|
this.uvArray[6] = filterArea.width/this.width;
|
||||||
this.uvArray[5] = filterArea.height/this.height;
|
this.uvArray[7] = filterArea.height/this.height;
|
||||||
this.uvArray[6] = filterArea.width/this.width;
|
|
||||||
this.uvArray[7] = filterArea.height/this.height;
|
|
||||||
|
|
||||||
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray);
|
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray);
|
||||||
|
|
||||||
var inputTexture = texture;
|
gl.viewport(0, 0, sizeX, sizeY);
|
||||||
var outputTexture = this.texturePool.pop();
|
// bind the buffer
|
||||||
if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height);
|
gl.bindFramebuffer(gl.FRAMEBUFFER, buffer );
|
||||||
|
|
||||||
// need to clear this FBO as it may have some left over elements from a prvious filter.
|
// set texture
|
||||||
gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer );
|
|
||||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
||||||
|
|
||||||
gl.disable(gl.BLEND);
|
|
||||||
|
|
||||||
for (var i = 0; i < filterBlock.filterPasses.length-1; i++)
|
|
||||||
{
|
|
||||||
var filterPass = filterBlock.filterPasses[i];
|
|
||||||
|
|
||||||
gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer );
|
|
||||||
|
|
||||||
// set texture
|
|
||||||
gl.activeTexture(gl.TEXTURE0);
|
|
||||||
gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture);
|
|
||||||
|
|
||||||
// draw texture..
|
|
||||||
//filterPass.applyFilterPass(filterArea.width, filterArea.height);
|
|
||||||
this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height);
|
|
||||||
|
|
||||||
// swap the textures..
|
|
||||||
var temp = inputTexture;
|
|
||||||
inputTexture = outputTexture;
|
|
||||||
outputTexture = temp;
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
gl.enable(gl.BLEND);
|
|
||||||
|
|
||||||
texture = inputTexture;
|
|
||||||
this.texturePool.push(outputTexture);
|
|
||||||
}
|
|
||||||
|
|
||||||
var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1];
|
|
||||||
|
|
||||||
this.offsetX -= filterArea.x;
|
|
||||||
this.offsetY -= filterArea.y;
|
|
||||||
|
|
||||||
|
|
||||||
var sizeX = this.width;
|
|
||||||
var sizeY = this.height;
|
|
||||||
|
|
||||||
var offsetX = 0;
|
|
||||||
var offsetY = 0;
|
|
||||||
|
|
||||||
var buffer = this.buffer;
|
|
||||||
|
|
||||||
// time to render the filters texture to the previous scene
|
|
||||||
if(this.filterStack.length === 0)
|
|
||||||
{
|
|
||||||
gl.colorMask(true, true, true, this.transparent);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
var currentFilter = this.filterStack[this.filterStack.length-1];
|
|
||||||
var filterArea = currentFilter.target.filterArea;
|
|
||||||
|
|
||||||
sizeX = filterArea.width;
|
|
||||||
sizeY = filterArea.height;
|
|
||||||
|
|
||||||
offsetX = filterArea.x;
|
|
||||||
offsetY = filterArea.y;
|
|
||||||
|
|
||||||
buffer = currentFilter._glFilterTexture.frameBuffer;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// TODO need toremove thease global elements..
|
|
||||||
PIXI.projection.x = sizeX/2;
|
|
||||||
PIXI.projection.y = -sizeY/2;
|
|
||||||
|
|
||||||
PIXI.offset.x = offsetX;
|
|
||||||
PIXI.offset.y = offsetY;
|
|
||||||
|
|
||||||
|
|
||||||
var filterArea = filterBlock.target.filterArea;
|
|
||||||
var x = filterArea.x-offsetX;
|
|
||||||
var y = filterArea.y-offsetY;
|
|
||||||
|
|
||||||
// update the buffers..
|
|
||||||
// make sure to flip the y!
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
|
|
||||||
|
|
||||||
this.vertexArray[0] = x;
|
|
||||||
this.vertexArray[1] = y + filterArea.height;
|
|
||||||
|
|
||||||
this.vertexArray[2] = x + filterArea.width;
|
|
||||||
this.vertexArray[3] = y + filterArea.height;
|
|
||||||
|
|
||||||
this.vertexArray[4] = x;
|
|
||||||
this.vertexArray[5] = y;
|
|
||||||
|
|
||||||
this.vertexArray[6] = x + filterArea.width;
|
|
||||||
this.vertexArray[7] = y;
|
|
||||||
|
|
||||||
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray);
|
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
|
|
||||||
|
|
||||||
this.uvArray[2] = filterArea.width/this.width;
|
|
||||||
this.uvArray[5] = filterArea.height/this.height;
|
|
||||||
this.uvArray[6] = filterArea.width/this.width;
|
|
||||||
this.uvArray[7] = filterArea.height/this.height;
|
|
||||||
|
|
||||||
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray);
|
|
||||||
|
|
||||||
gl.viewport(0, 0, sizeX, sizeY);
|
|
||||||
// bind the buffer
|
|
||||||
gl.bindFramebuffer(gl.FRAMEBUFFER, buffer );
|
|
||||||
|
|
||||||
// set texture
|
|
||||||
gl.activeTexture(gl.TEXTURE0);
|
gl.activeTexture(gl.TEXTURE0);
|
||||||
gl.bindTexture(gl.TEXTURE_2D, texture.texture);
|
gl.bindTexture(gl.TEXTURE_2D, texture.texture);
|
||||||
|
|
||||||
// apply!
|
// apply!
|
||||||
//filter.applyFilterPass(sizeX, sizeY);
|
//filter.applyFilterPass(sizeX, sizeY);
|
||||||
this.applyFilterPass(filter, filterArea, sizeX, sizeY);
|
this.applyFilterPass(filter, filterArea, sizeX, sizeY);
|
||||||
|
|
||||||
// now restore the regular shader..
|
// now restore the regular shader..
|
||||||
gl.useProgram(PIXI.defaultShader.program);
|
gl.useProgram(PIXI.defaultShader.program);
|
||||||
gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2);
|
gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2);
|
||||||
gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY);
|
gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY);
|
||||||
|
|
||||||
// return the texture to the pool
|
// return the texture to the pool
|
||||||
this.texturePool.push(texture);
|
this.texturePool.push(texture);
|
||||||
filterBlock._glFilterTexture = null;
|
filterBlock._glFilterTexture = null;
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, filterArea, width, height)
|
PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, filterArea, width, height)
|
||||||
{
|
{
|
||||||
// use program
|
// use program
|
||||||
var gl = PIXI.gl;
|
var gl = PIXI.gl;
|
||||||
|
var shader = filter.shader;
|
||||||
|
|
||||||
if(!filter.shader)
|
if(!shader)
|
||||||
{
|
{
|
||||||
var shader = new PIXI.PixiShader();
|
shader = new PIXI.PixiShader();
|
||||||
|
|
||||||
shader.fragmentSrc = filter.fragmentSrc;
|
shader.fragmentSrc = filter.fragmentSrc;
|
||||||
shader.uniforms = filter.uniforms;
|
shader.uniforms = filter.uniforms;
|
||||||
shader.init();
|
shader.init();
|
||||||
|
|
||||||
filter.shader = shader;
|
filter.shader = shader;
|
||||||
}
|
}
|
||||||
|
|
||||||
var shader = filter.shader;
|
// set the shader
|
||||||
|
gl.useProgram(shader.program);
|
||||||
|
|
||||||
// set the shader
|
gl.uniform2f(shader.projectionVector, width/2, -height/2);
|
||||||
gl.useProgram(shader.program);
|
gl.uniform2f(shader.offsetVector, 0,0);
|
||||||
|
|
||||||
gl.uniform2f(shader.projectionVector, width/2, -height/2);
|
if(filter.uniforms.dimensions)
|
||||||
gl.uniform2f(shader.offsetVector, 0,0)
|
{
|
||||||
|
//console.log(filter.uniforms.dimensions)
|
||||||
|
filter.uniforms.dimensions.value[0] = this.width;//width;
|
||||||
|
filter.uniforms.dimensions.value[1] = this.height;//height;
|
||||||
|
filter.uniforms.dimensions.value[2] = this.vertexArray[0];
|
||||||
|
filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height;
|
||||||
|
// console.log(this.vertexArray[5])
|
||||||
|
}
|
||||||
|
|
||||||
if(filter.uniforms.dimensions)
|
shader.syncUniforms();
|
||||||
{
|
|
||||||
//console.log(filter.uniforms.dimensions)
|
|
||||||
filter.uniforms.dimensions.value[0] = this.width;//width;
|
|
||||||
filter.uniforms.dimensions.value[1] = this.height;//height;
|
|
||||||
filter.uniforms.dimensions.value[2] = this.vertexArray[0];
|
|
||||||
filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height;
|
|
||||||
// console.log(this.vertexArray[5])
|
|
||||||
}
|
|
||||||
|
|
||||||
shader.syncUniforms();
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
|
|
||||||
gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
|
gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
|
||||||
gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
|
gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
|
||||||
|
|
||||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
|
||||||
|
|
||||||
// draw the filter...
|
// draw the filter...
|
||||||
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 );
|
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 );
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.WebGLFilterManager.prototype.initShaderBuffers = function()
|
PIXI.WebGLFilterManager.prototype.initShaderBuffers = function()
|
||||||
{
|
{
|
||||||
var gl = PIXI.gl;
|
var gl = PIXI.gl;
|
||||||
|
|
||||||
// create some buffers
|
// create some buffers
|
||||||
this.vertexBuffer = gl.createBuffer();
|
this.vertexBuffer = gl.createBuffer();
|
||||||
this.uvBuffer = gl.createBuffer();
|
this.uvBuffer = gl.createBuffer();
|
||||||
this.indexBuffer = gl.createBuffer();
|
this.indexBuffer = gl.createBuffer();
|
||||||
|
|
||||||
// bind and upload the vertexs..
|
// bind and upload the vertexs..
|
||||||
// keep a refferance to the vertexFloatData..
|
// keep a refferance to the vertexFloatData..
|
||||||
this.vertexArray = new Float32Array([0.0, 0.0,
|
this.vertexArray = new Float32Array([0.0, 0.0,
|
||||||
1.0, 0.0,
|
1.0, 0.0,
|
||||||
0.0, 1.0,
|
0.0, 1.0,
|
||||||
1.0, 1.0]);
|
1.0, 1.0]);
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
|
||||||
gl.bufferData(
|
gl.bufferData(
|
||||||
gl.ARRAY_BUFFER,
|
gl.ARRAY_BUFFER,
|
||||||
this.vertexArray,
|
this.vertexArray,
|
||||||
gl.STATIC_DRAW);
|
gl.STATIC_DRAW);
|
||||||
|
|
||||||
|
|
||||||
// bind and upload the uv buffer
|
// bind and upload the uv buffer
|
||||||
this.uvArray = new Float32Array([0.0, 0.0,
|
this.uvArray = new Float32Array([0.0, 0.0,
|
||||||
1.0, 0.0,
|
1.0, 0.0,
|
||||||
0.0, 1.0,
|
0.0, 1.0,
|
||||||
1.0, 1.0]);
|
1.0, 1.0]);
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
|
||||||
gl.bufferData(
|
gl.bufferData(
|
||||||
gl.ARRAY_BUFFER,
|
gl.ARRAY_BUFFER,
|
||||||
this.uvArray,
|
this.uvArray,
|
||||||
gl.STATIC_DRAW);
|
gl.STATIC_DRAW);
|
||||||
|
|
||||||
// bind and upload the index
|
// bind and upload the index
|
||||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
|
||||||
gl.bufferData(
|
gl.bufferData(
|
||||||
gl.ELEMENT_ARRAY_BUFFER,
|
gl.ELEMENT_ARRAY_BUFFER,
|
||||||
new Uint16Array([0, 1, 2, 1, 3, 2]),
|
new Uint16Array([0, 1, 2, 1, 3, 2]),
|
||||||
gl.STATIC_DRAW);
|
gl.STATIC_DRAW);
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.WebGLFilterManager.prototype.getBounds = function(displayObject)
|
PIXI.WebGLFilterManager.prototype.getBounds = function(displayObject)
|
||||||
{
|
{
|
||||||
// time to get the width and height of the object!
|
// time to get the width and height of the object!
|
||||||
var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, doTest;
|
var worldTransform, width, height, aX, aY, w0, w1, h0, h1, doTest;
|
||||||
var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4;
|
var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4;
|
||||||
|
|
||||||
var tempObject = displayObject.first;
|
var tempObject = displayObject.first;
|
||||||
var testObject = displayObject.last._iNext;
|
var testObject = displayObject.last._iNext;
|
||||||
|
|
||||||
var maxX = -Infinity;
|
var maxX = -Infinity;
|
||||||
var maxY = -Infinity;
|
var maxY = -Infinity;
|
||||||
|
|
||||||
var minX = Infinity;
|
var minX = Infinity;
|
||||||
var minY = Infinity;
|
var minY = Infinity;
|
||||||
|
|
||||||
do
|
do
|
||||||
{
|
{
|
||||||
// TODO can be optimized! - what if there is no scale / rotation?
|
// TODO can be optimized! - what if there is no scale / rotation?
|
||||||
|
|
||||||
if(tempObject.visible)
|
if(tempObject.visible)
|
||||||
{
|
{
|
||||||
if(tempObject instanceof PIXI.Sprite)
|
if(tempObject instanceof PIXI.Sprite)
|
||||||
{
|
{
|
||||||
width = tempObject.texture.frame.width;
|
width = tempObject.texture.frame.width;
|
||||||
height = tempObject.texture.frame.height;
|
height = tempObject.texture.frame.height;
|
||||||
|
|
||||||
// TODO trim??
|
// TODO trim??
|
||||||
aX = tempObject.anchor.x;
|
aX = tempObject.anchor.x;
|
||||||
aY = tempObject.anchor.y;
|
aY = tempObject.anchor.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;
|
||||||
|
|
||||||
doTest = true;
|
doTest = true;
|
||||||
}
|
}
|
||||||
else if(tempObject instanceof PIXI.Graphics)
|
else if(tempObject instanceof PIXI.Graphics)
|
||||||
{
|
{
|
||||||
tempObject.updateFilterBounds();
|
tempObject.updateFilterBounds();
|
||||||
|
|
||||||
var bounds = tempObject.bounds;
|
var bounds = tempObject.bounds;
|
||||||
|
|
||||||
width = bounds.width;
|
width = bounds.width;
|
||||||
height = bounds.height;
|
height = bounds.height;
|
||||||
|
|
||||||
w0 = bounds.x
|
w0 = bounds.x;
|
||||||
w1 = bounds.x + bounds.width;
|
w1 = bounds.x + bounds.width;
|
||||||
|
|
||||||
h0 = bounds.y
|
h0 = bounds.y;
|
||||||
h1 = bounds.y + bounds.height;
|
h1 = bounds.y + bounds.height;
|
||||||
|
|
||||||
doTest = true;
|
doTest = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if(doTest)
|
if(doTest)
|
||||||
{
|
{
|
||||||
worldTransform = tempObject.worldTransform;
|
worldTransform = tempObject.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];
|
||||||
|
|
||||||
x1 = a * w1 + c * h1 + tx;
|
x1 = a * w1 + c * h1 + tx;
|
||||||
y1 = d * h1 + b * w1 + ty;
|
y1 = d * h1 + b * w1 + ty;
|
||||||
|
|
||||||
x2 = a * w0 + c * h1 + tx;
|
x2 = a * w0 + c * h1 + tx;
|
||||||
y2 = d * h1 + b * w0 + ty;
|
y2 = d * h1 + b * w0 + ty;
|
||||||
|
|
||||||
x3 = a * w0 + c * h0 + tx;
|
x3 = a * w0 + c * h0 + tx;
|
||||||
y3 = d * h0 + b * w0 + ty;
|
y3 = d * h0 + b * w0 + ty;
|
||||||
|
|
||||||
x4 = a * w1 + c * h0 + tx;
|
x4 = a * w1 + c * h0 + tx;
|
||||||
y4 = d * h0 + b * w1 + ty;
|
y4 = d * h0 + b * w1 + ty;
|
||||||
|
|
||||||
minX = x1 < minX ? x1 : minX;
|
minX = x1 < minX ? x1 : minX;
|
||||||
minX = x2 < minX ? x2 : minX;
|
minX = x2 < minX ? x2 : minX;
|
||||||
minX = x3 < minX ? x3 : minX;
|
minX = x3 < minX ? x3 : minX;
|
||||||
minX = x4 < minX ? x4 : minX;
|
minX = x4 < minX ? x4 : minX;
|
||||||
|
|
||||||
minY = y1 < minY ? y1 : minY;
|
minY = y1 < minY ? y1 : minY;
|
||||||
minY = y2 < minY ? y2 : minY;
|
minY = y2 < minY ? y2 : minY;
|
||||||
minY = y3 < minY ? y3 : minY;
|
minY = y3 < minY ? y3 : minY;
|
||||||
minY = y4 < minY ? y4 : minY;
|
minY = y4 < minY ? y4 : minY;
|
||||||
|
|
||||||
maxX = x1 > maxX ? x1 : maxX;
|
maxX = x1 > maxX ? x1 : maxX;
|
||||||
maxX = x2 > maxX ? x2 : maxX;
|
maxX = x2 > maxX ? x2 : maxX;
|
||||||
maxX = x3 > maxX ? x3 : maxX;
|
maxX = x3 > maxX ? x3 : maxX;
|
||||||
maxX = x4 > maxX ? x4 : maxX;
|
maxX = x4 > maxX ? x4 : maxX;
|
||||||
|
|
||||||
maxY = y1 > maxY ? y1 : maxY;
|
maxY = y1 > maxY ? y1 : maxY;
|
||||||
maxY = y2 > maxY ? y2 : maxY;
|
maxY = y2 > maxY ? y2 : maxY;
|
||||||
maxY = y3 > maxY ? y3 : maxY;
|
maxY = y3 > maxY ? y3 : maxY;
|
||||||
maxY = y4 > maxY ? y4 : maxY;
|
maxY = y4 > maxY ? y4 : maxY;
|
||||||
}
|
}
|
||||||
|
|
||||||
doTest = false;
|
doTest = false;
|
||||||
tempObject = tempObject._iNext;
|
tempObject = tempObject._iNext;
|
||||||
|
|
||||||
}
|
}
|
||||||
while(tempObject != testObject)
|
while(tempObject !== testObject);
|
||||||
|
|
||||||
// maximum bounds is the size of the screen..
|
// maximum bounds is the size of the screen..
|
||||||
//minX = minX > 0 ? minX : 0;
|
//minX = minX > 0 ? minX : 0;
|
||||||
//minY = minY > 0 ? minY : 0;
|
//minY = minY > 0 ? minY : 0;
|
||||||
|
|
||||||
displayObject.filterArea.x = minX;
|
displayObject.filterArea.x = minX;
|
||||||
displayObject.filterArea.y = minY;
|
displayObject.filterArea.y = minY;
|
||||||
|
|
||||||
// console.log(maxX+ " : " + minX)
|
// console.log(maxX+ " : " + minX)
|
||||||
displayObject.filterArea.width = maxX - minX;
|
displayObject.filterArea.width = maxX - minX;
|
||||||
displayObject.filterArea.height = maxY - minY;
|
displayObject.filterArea.height = maxY - minY;
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.FilterTexture = function(width, height)
|
PIXI.FilterTexture = function(width, height)
|
||||||
{
|
{
|
||||||
var gl = PIXI.gl;
|
var gl = PIXI.gl;
|
||||||
|
|
||||||
// next time to create a frame buffer and texture
|
// next time to create a frame buffer and texture
|
||||||
this.frameBuffer = gl.createFramebuffer();
|
this.frameBuffer = gl.createFramebuffer();
|
||||||
this.texture = gl.createTexture();
|
this.texture = gl.createTexture();
|
||||||
|
|
||||||
gl.bindTexture(gl.TEXTURE_2D, this.texture);
|
gl.bindTexture(gl.TEXTURE_2D, this.texture);
|
||||||
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);
|
||||||
gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer );
|
gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer );
|
||||||
|
|
||||||
gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer );
|
gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer );
|
||||||
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0);
|
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0);
|
||||||
|
|
||||||
this.resize(width, height);
|
this.resize(width, height);
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.FilterTexture.prototype.resize = function(width, height)
|
PIXI.FilterTexture.prototype.resize = function(width, height)
|
||||||
{
|
{
|
||||||
if(this.width == width && this.height == height)return;
|
if(this.width === width && this.height === height) return;
|
||||||
|
|
||||||
this.width = width;
|
this.width = width;
|
||||||
this.height = height;
|
this.height = height;
|
||||||
|
|
||||||
var gl = PIXI.gl;
|
var gl = PIXI.gl;
|
||||||
|
|
||||||
gl.bindTexture(gl.TEXTURE_2D, this.texture);
|
gl.bindTexture(gl.TEXTURE_2D, this.texture);
|
||||||
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
|
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
|
||||||
|
|
||||||
}
|
};
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
PIXI.WebGLGraphics = function()
|
PIXI.WebGLGraphics = function()
|
||||||
{
|
{
|
||||||
|
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Renders the graphics object
|
* Renders the graphics object
|
||||||
|
@ -23,62 +23,61 @@ PIXI.WebGLGraphics = function()
|
||||||
*/
|
*/
|
||||||
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,
|
||||||
buffer:gl.createBuffer(),
|
buffer:gl.createBuffer(),
|
||||||
indexBuffer:gl.createBuffer()};
|
indexBuffer:gl.createBuffer()};
|
||||||
|
|
||||||
if(graphics.dirty)
|
if(graphics.dirty)
|
||||||
{
|
{
|
||||||
graphics.dirty = false;
|
graphics.dirty = false;
|
||||||
|
|
||||||
if(graphics.clearDirty)
|
if(graphics.clearDirty)
|
||||||
{
|
{
|
||||||
graphics.clearDirty = false;
|
graphics.clearDirty = false;
|
||||||
|
|
||||||
graphics._webGL.lastIndex = 0;
|
graphics._webGL.lastIndex = 0;
|
||||||
graphics._webGL.points = [];
|
graphics._webGL.points = [];
|
||||||
graphics._webGL.indices = [];
|
graphics._webGL.indices = [];
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
PIXI.WebGLGraphics.updateGraphics(graphics);
|
PIXI.WebGLGraphics.updateGraphics(graphics);
|
||||||
}
|
}
|
||||||
|
|
||||||
PIXI.activatePrimitiveShader();
|
PIXI.activatePrimitiveShader();
|
||||||
|
|
||||||
// This could be speeded up fo sure!
|
// This could be speeded up fo sure!
|
||||||
var m = PIXI.mat3.clone(graphics.worldTransform);
|
var m = PIXI.mat3.clone(graphics.worldTransform);
|
||||||
|
|
||||||
PIXI.mat3.transpose(m);
|
PIXI.mat3.transpose(m);
|
||||||
|
|
||||||
// set the matrix transform for the
|
// set the matrix transform for the
|
||||||
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
|
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
|
||||||
|
|
||||||
gl.uniformMatrix3fv(PIXI.primitiveShader.translationMatrix, false, m);
|
gl.uniformMatrix3fv(PIXI.primitiveShader.translationMatrix, false, m);
|
||||||
|
|
||||||
gl.uniform2f(PIXI.primitiveShader.projectionVector, projection.x, -projection.y);
|
gl.uniform2f(PIXI.primitiveShader.projectionVector, projection.x, -projection.y);
|
||||||
gl.uniform2f(PIXI.primitiveShader.offsetVector, -PIXI.offset.x, -PIXI.offset.y);
|
gl.uniform2f(PIXI.primitiveShader.offsetVector, -PIXI.offset.x, -PIXI.offset.y);
|
||||||
|
|
||||||
gl.uniform1f(PIXI.primitiveShader.alpha, graphics.worldAlpha);
|
gl.uniform1f(PIXI.primitiveShader.alpha, graphics.worldAlpha);
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
|
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
|
||||||
|
|
||||||
gl.vertexAttribPointer(PIXI.primitiveShader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);
|
gl.vertexAttribPointer(PIXI.primitiveShader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);
|
||||||
gl.vertexAttribPointer(PIXI.primitiveShader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4);
|
gl.vertexAttribPointer(PIXI.primitiveShader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4);
|
||||||
|
|
||||||
// set the index buffer!
|
// set the index buffer!
|
||||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
|
||||||
|
|
||||||
|
|
||||||
gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 );
|
gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 );
|
||||||
|
|
||||||
PIXI.deactivatePrimitiveShader();
|
PIXI.deactivatePrimitiveShader();
|
||||||
|
|
||||||
|
// return to default shader...
|
||||||
// return to default shader...
|
// PIXI.activateShader(PIXI.defaultShader);
|
||||||
// PIXI.activateShader(PIXI.defaultShader);
|
};
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Updates the graphics object
|
* Updates the graphics object
|
||||||
|
@ -90,47 +89,47 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
|
||||||
*/
|
*/
|
||||||
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++)
|
||||||
{
|
{
|
||||||
var data = graphics.graphicsData[i];
|
var data = graphics.graphicsData[i];
|
||||||
|
|
||||||
if(data.type == PIXI.Graphics.POLY)
|
if(data.type === PIXI.Graphics.POLY)
|
||||||
{
|
{
|
||||||
if(data.fill)
|
if(data.fill)
|
||||||
{
|
{
|
||||||
if(data.points.length>3)
|
if(data.points.length>3)
|
||||||
PIXI.WebGLGraphics.buildPoly(data, graphics._webGL);
|
PIXI.WebGLGraphics.buildPoly(data, graphics._webGL);
|
||||||
}
|
}
|
||||||
|
|
||||||
if(data.lineWidth > 0)
|
if(data.lineWidth > 0)
|
||||||
{
|
{
|
||||||
PIXI.WebGLGraphics.buildLine(data, graphics._webGL);
|
PIXI.WebGLGraphics.buildLine(data, graphics._webGL);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if(data.type == PIXI.Graphics.RECT)
|
else if(data.type === PIXI.Graphics.RECT)
|
||||||
{
|
{
|
||||||
PIXI.WebGLGraphics.buildRectangle(data, graphics._webGL);
|
PIXI.WebGLGraphics.buildRectangle(data, graphics._webGL);
|
||||||
}
|
}
|
||||||
else if(data.type == PIXI.Graphics.CIRC || data.type == PIXI.Graphics.ELIP)
|
else if(data.type === PIXI.Graphics.CIRC || data.type === PIXI.Graphics.ELIP);
|
||||||
{
|
{
|
||||||
PIXI.WebGLGraphics.buildCircle(data, graphics._webGL);
|
PIXI.WebGLGraphics.buildCircle(data, graphics._webGL);
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
graphics._webGL.lastIndex = graphics.graphicsData.length;
|
graphics._webGL.lastIndex = graphics.graphicsData.length;
|
||||||
|
|
||||||
var gl = PIXI.gl;
|
var gl = PIXI.gl;
|
||||||
|
|
||||||
graphics._webGL.glPoints = new Float32Array(graphics._webGL.points);
|
graphics._webGL.glPoints = new Float32Array(graphics._webGL.points);
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
|
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
|
||||||
gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW);
|
gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW);
|
||||||
|
|
||||||
graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices);
|
graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices);
|
||||||
|
|
||||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
|
||||||
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
|
* Builds a rectangle to draw
|
||||||
|
@ -143,59 +142,58 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
|
||||||
*/
|
*/
|
||||||
PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
|
PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
|
||||||
{
|
{
|
||||||
// --- //
|
// --- //
|
||||||
// need to convert points to a nice regular data
|
// need to convert points to a nice regular data
|
||||||
//
|
//
|
||||||
var rectData = graphicsData.points;
|
var rectData = graphicsData.points;
|
||||||
var x = rectData[0];
|
var x = rectData[0];
|
||||||
var y = rectData[1];
|
var y = rectData[1];
|
||||||
var width = rectData[2];
|
var width = rectData[2];
|
||||||
var height = rectData[3];
|
var height = rectData[3];
|
||||||
|
|
||||||
|
|
||||||
if(graphicsData.fill)
|
if(graphicsData.fill)
|
||||||
{
|
{
|
||||||
var color = HEXtoRGB(graphicsData.fillColor);
|
var color = PIXI.hex2rgb(graphicsData.fillColor);
|
||||||
var alpha = graphicsData.fillAlpha;
|
var alpha = graphicsData.fillAlpha;
|
||||||
|
|
||||||
var r = color[0] * alpha;
|
var r = color[0] * alpha;
|
||||||
var g = color[1] * alpha;
|
var g = color[1] * alpha;
|
||||||
var b = color[2] * alpha;
|
var b = color[2] * alpha;
|
||||||
|
|
||||||
var verts = webGLData.points;
|
var verts = webGLData.points;
|
||||||
var indices = webGLData.indices;
|
var indices = webGLData.indices;
|
||||||
|
|
||||||
var vertPos = verts.length/6;
|
var vertPos = verts.length/6;
|
||||||
|
|
||||||
// start
|
// start
|
||||||
verts.push(x, y);
|
verts.push(x, y);
|
||||||
verts.push(r, g, b, alpha);
|
verts.push(r, g, b, alpha);
|
||||||
|
|
||||||
verts.push(x + width, y);
|
verts.push(x + width, y);
|
||||||
verts.push(r, g, b, alpha);
|
verts.push(r, g, b, alpha);
|
||||||
|
|
||||||
verts.push(x , y + height);
|
verts.push(x , y + height);
|
||||||
verts.push(r, g, b, alpha);
|
verts.push(r, g, b, alpha);
|
||||||
|
|
||||||
verts.push(x + width, y + height);
|
verts.push(x + width, y + height);
|
||||||
verts.push(r, g, b, alpha);
|
verts.push(r, g, b, alpha);
|
||||||
|
|
||||||
// insert 2 dead triangles..
|
// insert 2 dead triangles..
|
||||||
indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3)
|
indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3);
|
||||||
}
|
}
|
||||||
|
|
||||||
if(graphicsData.lineWidth)
|
if(graphicsData.lineWidth)
|
||||||
{
|
{
|
||||||
graphicsData.points = [x, y,
|
graphicsData.points = [x, y,
|
||||||
x + width, y,
|
x + width, y,
|
||||||
x + width, y + height,
|
x + width, y + height,
|
||||||
x, y + height,
|
x, y + height,
|
||||||
x, y];
|
x, y];
|
||||||
|
|
||||||
PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
|
PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
|
||||||
}
|
}
|
||||||
|
};
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Builds a circle to draw
|
* Builds a circle to draw
|
||||||
|
@ -208,62 +206,63 @@ PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
|
||||||
*/
|
*/
|
||||||
PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
|
PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
|
||||||
{
|
{
|
||||||
// --- //
|
// --- //
|
||||||
// need to convert points to a nice regular data
|
// need to convert points to a nice regular data
|
||||||
//
|
//
|
||||||
var rectData = graphicsData.points;
|
var rectData = graphicsData.points;
|
||||||
var x = rectData[0];
|
var x = rectData[0];
|
||||||
var y = rectData[1];
|
var y = rectData[1];
|
||||||
var width = rectData[2];
|
var width = rectData[2];
|
||||||
var height = rectData[3];
|
var height = rectData[3];
|
||||||
|
|
||||||
var totalSegs = 40;
|
var totalSegs = 40;
|
||||||
var seg = (Math.PI * 2) / totalSegs ;
|
var seg = (Math.PI * 2) / totalSegs ;
|
||||||
|
|
||||||
if(graphicsData.fill)
|
var i = 0;
|
||||||
{
|
|
||||||
var color = HEXtoRGB(graphicsData.fillColor);
|
|
||||||
var alpha = graphicsData.fillAlpha;
|
|
||||||
|
|
||||||
var r = color[0] * alpha;
|
if(graphicsData.fill)
|
||||||
var g = color[1] * alpha;
|
{
|
||||||
var b = color[2] * alpha;
|
var color = PIXI.hex2rgb(graphicsData.fillColor);
|
||||||
|
var alpha = graphicsData.fillAlpha;
|
||||||
|
|
||||||
var verts = webGLData.points;
|
var r = color[0] * alpha;
|
||||||
var indices = webGLData.indices;
|
var g = color[1] * alpha;
|
||||||
|
var b = color[2] * alpha;
|
||||||
|
|
||||||
var vecPos = verts.length/6;
|
var verts = webGLData.points;
|
||||||
|
var indices = webGLData.indices;
|
||||||
|
|
||||||
indices.push(vecPos);
|
var vecPos = verts.length/6;
|
||||||
|
|
||||||
for (var i=0; i < totalSegs + 1 ; i++)
|
indices.push(vecPos);
|
||||||
{
|
|
||||||
verts.push(x,y, r, g, b, alpha);
|
|
||||||
|
|
||||||
verts.push(x + Math.sin(seg * i) * width,
|
for (i = 0; i < totalSegs + 1 ; i++)
|
||||||
y + Math.cos(seg * i) * height,
|
{
|
||||||
r, g, b, alpha);
|
verts.push(x,y, r, g, b, alpha);
|
||||||
|
|
||||||
indices.push(vecPos++, vecPos++);
|
verts.push(x + Math.sin(seg * i) * width,
|
||||||
};
|
y + Math.cos(seg * i) * height,
|
||||||
|
r, g, b, alpha);
|
||||||
|
|
||||||
indices.push(vecPos-1);
|
indices.push(vecPos++, vecPos++);
|
||||||
}
|
}
|
||||||
|
|
||||||
if(graphicsData.lineWidth)
|
indices.push(vecPos-1);
|
||||||
{
|
}
|
||||||
graphicsData.points = [];
|
|
||||||
|
|
||||||
for (var i=0; i < totalSegs + 1; i++)
|
if(graphicsData.lineWidth)
|
||||||
{
|
{
|
||||||
graphicsData.points.push(x + Math.sin(seg * i) * width,
|
graphicsData.points = [];
|
||||||
y + Math.cos(seg * i) * height)
|
|
||||||
};
|
|
||||||
|
|
||||||
PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
|
for (i = 0; i < totalSegs + 1; i++)
|
||||||
}
|
{
|
||||||
|
graphicsData.points.push(x + Math.sin(seg * i) * width,
|
||||||
|
y + Math.cos(seg * i) * height);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Builds a line to draw
|
* Builds a line to draw
|
||||||
|
@ -276,205 +275,204 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
|
||||||
*/
|
*/
|
||||||
PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
|
PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
|
||||||
{
|
{
|
||||||
// TODO OPTIMISE!
|
// TODO OPTIMISE!
|
||||||
|
var i = 0;
|
||||||
|
|
||||||
var wrap = true;
|
var points = graphicsData.points;
|
||||||
var points = graphicsData.points;
|
if(points.length === 0)return;
|
||||||
if(points.length == 0)return;
|
|
||||||
|
|
||||||
// if the line width is an odd number add 0.5 to align to a whole pixel
|
// if the line width is an odd number add 0.5 to align to a whole pixel
|
||||||
if(graphicsData.lineWidth%2)
|
if(graphicsData.lineWidth%2)
|
||||||
{
|
{
|
||||||
for (var i = 0; i < points.length; i++) {
|
for (i = 0; i < points.length; i++) {
|
||||||
points[i] += 0.5;
|
points[i] += 0.5;
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// get first and last point.. figure out the middle!
|
// get first and last point.. figure out the middle!
|
||||||
var firstPoint = new PIXI.Point( points[0], points[1] );
|
var firstPoint = new PIXI.Point( points[0], points[1] );
|
||||||
var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] );
|
var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] );
|
||||||
|
|
||||||
// if the first point is the last point - goona have issues :)
|
// if the first point is the last point - goona have issues :)
|
||||||
if(firstPoint.x == lastPoint.x && firstPoint.y == lastPoint.y)
|
if(firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y)
|
||||||
{
|
{
|
||||||
points.pop();
|
points.pop();
|
||||||
points.pop();
|
points.pop();
|
||||||
|
|
||||||
lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] );
|
lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] );
|
||||||
|
|
||||||
var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5;
|
var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5;
|
||||||
var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5;
|
var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5;
|
||||||
|
|
||||||
points.unshift(midPointX, midPointY);
|
points.unshift(midPointX, midPointY);
|
||||||
points.push(midPointX, midPointY)
|
points.push(midPointX, midPointY);
|
||||||
}
|
}
|
||||||
|
|
||||||
var verts = webGLData.points;
|
var verts = webGLData.points;
|
||||||
var indices = webGLData.indices;
|
var indices = webGLData.indices;
|
||||||
var length = points.length / 2;
|
var length = points.length / 2;
|
||||||
var indexCount = points.length;
|
var indexCount = points.length;
|
||||||
var indexStart = verts.length/6;
|
var indexStart = verts.length/6;
|
||||||
|
|
||||||
// DRAW the Line
|
// DRAW the Line
|
||||||
var width = graphicsData.lineWidth / 2;
|
var width = graphicsData.lineWidth / 2;
|
||||||
|
|
||||||
// sort color
|
// sort color
|
||||||
var color = HEXtoRGB(graphicsData.lineColor);
|
var color = PIXI.hex2rgb(graphicsData.lineColor);
|
||||||
var alpha = graphicsData.lineAlpha;
|
var alpha = graphicsData.lineAlpha;
|
||||||
var r = color[0] * alpha;
|
var r = color[0] * alpha;
|
||||||
var g = color[1] * alpha;
|
var g = color[1] * alpha;
|
||||||
var b = color[2] * alpha;
|
var b = color[2] * alpha;
|
||||||
|
|
||||||
var p1x, p1y, p2x, p2y, p3x, p3y;
|
var px, py, p1x, p1y, p2x, p2y, p3x, p3y;
|
||||||
var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
|
var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
|
||||||
var ipx, ipy;
|
var a1, b1, c1, a2, b2, c2;
|
||||||
var a1, b1, c1, a2, b2, c2;
|
var denom, pdist, dist;
|
||||||
var denom, pdist, dist;
|
|
||||||
|
|
||||||
p1x = points[0];
|
p1x = points[0];
|
||||||
p1y = points[1];
|
p1y = points[1];
|
||||||
|
|
||||||
p2x = points[2];
|
p2x = points[2];
|
||||||
p2y = points[3];
|
p2y = points[3];
|
||||||
|
|
||||||
perpx = -(p1y - p2y);
|
perpx = -(p1y - p2y);
|
||||||
perpy = p1x - p2x;
|
perpy = p1x - p2x;
|
||||||
|
|
||||||
dist = Math.sqrt(perpx*perpx + perpy*perpy);
|
dist = Math.sqrt(perpx*perpx + perpy*perpy);
|
||||||
|
|
||||||
perpx /= dist;
|
perpx /= dist;
|
||||||
perpy /= dist;
|
perpy /= dist;
|
||||||
perpx *= width;
|
perpx *= width;
|
||||||
perpy *= width;
|
perpy *= width;
|
||||||
|
|
||||||
// start
|
// start
|
||||||
verts.push(p1x - perpx , p1y - perpy,
|
verts.push(p1x - perpx , p1y - perpy,
|
||||||
r, g, b, alpha);
|
r, g, b, alpha);
|
||||||
|
|
||||||
verts.push(p1x + perpx , p1y + perpy,
|
verts.push(p1x + perpx , p1y + perpy,
|
||||||
r, g, b, alpha);
|
r, g, b, alpha);
|
||||||
|
|
||||||
for (var i = 1; i < length-1; i++)
|
for (i = 1; i < length-1; i++)
|
||||||
{
|
{
|
||||||
p1x = points[(i-1)*2];
|
p1x = points[(i-1)*2];
|
||||||
p1y = points[(i-1)*2 + 1];
|
p1y = points[(i-1)*2 + 1];
|
||||||
|
|
||||||
p2x = points[(i)*2]
|
p2x = points[(i)*2];
|
||||||
p2y = points[(i)*2 + 1]
|
p2y = points[(i)*2 + 1];
|
||||||
|
|
||||||
p3x = points[(i+1)*2];
|
p3x = points[(i+1)*2];
|
||||||
p3y = points[(i+1)*2 + 1];
|
p3y = points[(i+1)*2 + 1];
|
||||||
|
|
||||||
perpx = -(p1y - p2y);
|
perpx = -(p1y - p2y);
|
||||||
perpy = p1x - p2x;
|
perpy = p1x - p2x;
|
||||||
|
|
||||||
dist = Math.sqrt(perpx*perpx + perpy*perpy);
|
dist = Math.sqrt(perpx*perpx + perpy*perpy);
|
||||||
perpx /= dist;
|
perpx /= dist;
|
||||||
perpy /= dist;
|
perpy /= dist;
|
||||||
perpx *= width;
|
perpx *= width;
|
||||||
perpy *= width;
|
perpy *= width;
|
||||||
|
|
||||||
perp2x = -(p2y - p3y);
|
perp2x = -(p2y - p3y);
|
||||||
perp2y = p2x - p3x;
|
perp2y = p2x - p3x;
|
||||||
|
|
||||||
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
|
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
|
||||||
perp2x /= dist;
|
perp2x /= dist;
|
||||||
perp2y /= dist;
|
perp2y /= dist;
|
||||||
perp2x *= width;
|
perp2x *= width;
|
||||||
perp2y *= width;
|
perp2y *= width;
|
||||||
|
|
||||||
a1 = (-perpy + p1y) - (-perpy + p2y);
|
a1 = (-perpy + p1y) - (-perpy + p2y);
|
||||||
b1 = (-perpx + p2x) - (-perpx + p1x);
|
b1 = (-perpx + p2x) - (-perpx + p1x);
|
||||||
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
|
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
|
||||||
a2 = (-perp2y + p3y) - (-perp2y + p2y);
|
a2 = (-perp2y + p3y) - (-perp2y + p2y);
|
||||||
b2 = (-perp2x + p2x) - (-perp2x + p3x);
|
b2 = (-perp2x + p2x) - (-perp2x + p3x);
|
||||||
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
|
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
|
||||||
|
|
||||||
denom = a1*b2 - a2*b1;
|
denom = a1*b2 - a2*b1;
|
||||||
|
|
||||||
if(Math.abs(denom) < 0.1 )
|
if(Math.abs(denom) < 0.1 )
|
||||||
{
|
{
|
||||||
|
|
||||||
denom+=10.1;
|
denom+=10.1;
|
||||||
verts.push(p2x - perpx , p2y - perpy,
|
verts.push(p2x - perpx , p2y - perpy,
|
||||||
r, g, b, alpha);
|
r, g, b, alpha);
|
||||||
|
|
||||||
verts.push(p2x + perpx , p2y + perpy,
|
verts.push(p2x + perpx , p2y + perpy,
|
||||||
r, g, b, alpha);
|
r, g, b, alpha);
|
||||||
|
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
px = (b1*c2 - b2*c1)/denom;
|
px = (b1*c2 - b2*c1)/denom;
|
||||||
py = (a2*c1 - a1*c2)/denom;
|
py = (a2*c1 - a1*c2)/denom;
|
||||||
|
|
||||||
|
|
||||||
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
|
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
|
||||||
|
|
||||||
|
|
||||||
if(pdist > 140 * 140)
|
if(pdist > 140 * 140)
|
||||||
{
|
{
|
||||||
perp3x = perpx - perp2x;
|
perp3x = perpx - perp2x;
|
||||||
perp3y = perpy - perp2y;
|
perp3y = perpy - perp2y;
|
||||||
|
|
||||||
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
|
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
|
||||||
perp3x /= dist;
|
perp3x /= dist;
|
||||||
perp3y /= dist;
|
perp3y /= dist;
|
||||||
perp3x *= width;
|
perp3x *= width;
|
||||||
perp3y *= width;
|
perp3y *= width;
|
||||||
|
|
||||||
verts.push(p2x - perp3x, p2y -perp3y);
|
verts.push(p2x - perp3x, p2y -perp3y);
|
||||||
verts.push(r, g, b, alpha);
|
verts.push(r, g, b, alpha);
|
||||||
|
|
||||||
verts.push(p2x + perp3x, p2y +perp3y);
|
verts.push(p2x + perp3x, p2y +perp3y);
|
||||||
verts.push(r, g, b, alpha);
|
verts.push(r, g, b, alpha);
|
||||||
|
|
||||||
verts.push(p2x - perp3x, p2y -perp3y);
|
verts.push(p2x - perp3x, p2y -perp3y);
|
||||||
verts.push(r, g, b, alpha);
|
verts.push(r, g, b, alpha);
|
||||||
|
|
||||||
indexCount++;
|
indexCount++;
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
|
|
||||||
verts.push(px , py);
|
verts.push(px , py);
|
||||||
verts.push(r, g, b, alpha);
|
verts.push(r, g, b, alpha);
|
||||||
|
|
||||||
verts.push(p2x - (px-p2x), p2y - (py - p2y));
|
verts.push(p2x - (px-p2x), p2y - (py - p2y));
|
||||||
verts.push(r, g, b, alpha);
|
verts.push(r, g, b, alpha);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
p1x = points[(length-2)*2]
|
p1x = points[(length-2)*2];
|
||||||
p1y = points[(length-2)*2 + 1]
|
p1y = points[(length-2)*2 + 1];
|
||||||
|
|
||||||
p2x = points[(length-1)*2]
|
p2x = points[(length-1)*2];
|
||||||
p2y = points[(length-1)*2 + 1]
|
p2y = points[(length-1)*2 + 1];
|
||||||
|
|
||||||
perpx = -(p1y - p2y)
|
perpx = -(p1y - p2y);
|
||||||
perpy = p1x - p2x;
|
perpy = p1x - p2x;
|
||||||
|
|
||||||
dist = Math.sqrt(perpx*perpx + perpy*perpy);
|
dist = Math.sqrt(perpx*perpx + perpy*perpy);
|
||||||
perpx /= dist;
|
perpx /= dist;
|
||||||
perpy /= dist;
|
perpy /= dist;
|
||||||
perpx *= width;
|
perpx *= width;
|
||||||
perpy *= width;
|
perpy *= width;
|
||||||
|
|
||||||
verts.push(p2x - perpx , p2y - perpy)
|
verts.push(p2x - perpx , p2y - perpy);
|
||||||
verts.push(r, g, b, alpha);
|
verts.push(r, g, b, alpha);
|
||||||
|
|
||||||
verts.push(p2x + perpx , p2y + perpy)
|
verts.push(p2x + perpx , p2y + perpy);
|
||||||
verts.push(r, g, b, alpha);
|
verts.push(r, g, b, alpha);
|
||||||
|
|
||||||
indices.push(indexStart);
|
indices.push(indexStart);
|
||||||
|
|
||||||
for (var i=0; i < indexCount; i++)
|
for (i = 0; i < indexCount; i++)
|
||||||
{
|
{
|
||||||
indices.push(indexStart++);
|
indices.push(indexStart++);
|
||||||
};
|
}
|
||||||
|
|
||||||
indices.push(indexStart-1);
|
indices.push(indexStart-1);
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Builds a polygon to draw
|
* Builds a polygon to draw
|
||||||
|
@ -487,46 +485,40 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
|
||||||
*/
|
*/
|
||||||
PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
|
PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
|
||||||
{
|
{
|
||||||
var points = graphicsData.points;
|
var points = graphicsData.points;
|
||||||
if(points.length < 6)return;
|
if(points.length < 6)return;
|
||||||
|
|
||||||
// get first and last point.. figure out the middle!
|
// get first and last point.. figure out the middle!
|
||||||
var verts = webGLData.points;
|
var verts = webGLData.points;
|
||||||
var indices = webGLData.indices;
|
var indices = webGLData.indices;
|
||||||
|
|
||||||
var length = points.length / 2;
|
var length = points.length / 2;
|
||||||
|
|
||||||
// sort color
|
// sort color
|
||||||
var color = HEXtoRGB(graphicsData.fillColor);
|
var color = PIXI.hex2rgb(graphicsData.fillColor);
|
||||||
var alpha = graphicsData.fillAlpha;
|
var alpha = graphicsData.fillAlpha;
|
||||||
var r = color[0] * alpha;
|
var r = color[0] * alpha;
|
||||||
var g = color[1] * alpha;
|
var g = color[1] * alpha;
|
||||||
var b = color[2] * alpha;
|
var b = color[2] * alpha;
|
||||||
|
|
||||||
var triangles = PIXI.PolyK.Triangulate(points);
|
var triangles = PIXI.PolyK.Triangulate(points);
|
||||||
|
|
||||||
var vertPos = verts.length / 6;
|
|
||||||
|
|
||||||
for (var i=0; i < triangles.length; i+=3)
|
|
||||||
{
|
|
||||||
indices.push(triangles[i] + vertPos);
|
|
||||||
indices.push(triangles[i] + vertPos);
|
|
||||||
indices.push(triangles[i+1] + vertPos);
|
|
||||||
indices.push(triangles[i+2] +vertPos);
|
|
||||||
indices.push(triangles[i+2] + vertPos);
|
|
||||||
};
|
|
||||||
|
|
||||||
for (var i = 0; i < length; i++)
|
|
||||||
{
|
|
||||||
verts.push(points[i * 2], points[i * 2 + 1],
|
|
||||||
r, g, b, alpha);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function HEXtoRGB(hex) {
|
|
||||||
return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255];
|
|
||||||
}
|
|
||||||
|
|
||||||
|
var vertPos = verts.length / 6;
|
||||||
|
|
||||||
|
var i = 0;
|
||||||
|
|
||||||
|
for (i = 0; i < triangles.length; i+=3)
|
||||||
|
{
|
||||||
|
indices.push(triangles[i] + vertPos);
|
||||||
|
indices.push(triangles[i] + vertPos);
|
||||||
|
indices.push(triangles[i+1] + vertPos);
|
||||||
|
indices.push(triangles[i+2] +vertPos);
|
||||||
|
indices.push(triangles[i+2] + vertPos);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (i = 0; i < length; i++)
|
||||||
|
{
|
||||||
|
verts.push(points[i * 2], points[i * 2 + 1],
|
||||||
|
r, g, b, alpha);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
|
@ -25,6 +25,7 @@ PIXI.WebGLRenderGroup = function(gl, transparent)
|
||||||
|
|
||||||
this.batchs = [];
|
this.batchs = [];
|
||||||
this.toRemove = [];
|
this.toRemove = [];
|
||||||
|
// console.log(this.transparent)
|
||||||
this.filterManager = new PIXI.WebGLFilterManager(this.transparent);
|
this.filterManager = new PIXI.WebGLFilterManager(this.transparent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@ PIXI._defaultFrame = new PIXI.Rectangle(0,0,1,1);
|
||||||
|
|
||||||
// an instance of the gl context..
|
// an instance of the gl context..
|
||||||
// only one at the moment :/
|
// only one at the moment :/
|
||||||
PIXI.gl;
|
PIXI.gl = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* the WebGLRenderer is draws the stage and all its content onto a webGL enabled canvas. This renderer
|
* the WebGLRenderer is draws the stage and all its content onto a webGL enabled canvas. This renderer
|
||||||
|
@ -25,43 +25,43 @@ PIXI.gl;
|
||||||
*/
|
*/
|
||||||
PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
|
PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
|
||||||
{
|
{
|
||||||
// do a catch.. only 1 webGL renderer..
|
// do a catch.. only 1 webGL renderer..
|
||||||
|
|
||||||
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 = [];
|
||||||
|
|
||||||
var options = {
|
var options = {
|
||||||
alpha: this.transparent,
|
alpha: this.transparent,
|
||||||
antialias:!!antialias, // SPEED UP??
|
antialias:!!antialias, // SPEED UP??
|
||||||
premultipliedAlpha:false,
|
premultipliedAlpha:false,
|
||||||
stencil:true
|
stencil:true
|
||||||
}
|
};
|
||||||
|
|
||||||
//try 'experimental-webgl'
|
//try 'experimental-webgl'
|
||||||
try {
|
try {
|
||||||
PIXI.gl = this.gl = this.view.getContext("experimental-webgl", options);
|
PIXI.gl = this.gl = this.view.getContext('experimental-webgl', options);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
//try 'webgl'
|
//try 'webgl'
|
||||||
try {
|
try {
|
||||||
PIXI.gl = this.gl = this.view.getContext("webgl", options);
|
PIXI.gl = this.gl = this.view.getContext('webgl', options);
|
||||||
} catch (e) {
|
} catch (e2) {
|
||||||
// fail, not able to get a context
|
// fail, not able to get a context
|
||||||
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.initDefaultShaders();
|
PIXI.initDefaultShaders();
|
||||||
|
|
||||||
|
@ -78,8 +78,8 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
|
||||||
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);
|
||||||
|
@ -92,11 +92,11 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
|
||||||
this.resize(this.width, this.height);
|
this.resize(this.width, this.height);
|
||||||
this.contextLost = false;
|
this.contextLost = false;
|
||||||
|
|
||||||
//PIXI.pushShader(PIXI.defaultShader);
|
//PIXI.pushShader(PIXI.defaultShader);
|
||||||
|
|
||||||
this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl, this.transparent);
|
this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl, this.transparent);
|
||||||
// this.stageRenderGroup. = this.transparent
|
// this.stageRenderGroup. = this.transparent
|
||||||
}
|
};
|
||||||
|
|
||||||
// constructor
|
// constructor
|
||||||
PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer;
|
PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer;
|
||||||
|
@ -111,15 +111,15 @@ PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer;
|
||||||
*/
|
*/
|
||||||
PIXI.WebGLRenderer.getBatch = function()
|
PIXI.WebGLRenderer.getBatch = function()
|
||||||
{
|
{
|
||||||
if(PIXI._batchs.length == 0)
|
if(PIXI._batchs.length === 0)
|
||||||
{
|
{
|
||||||
return new PIXI.WebGLBatch(PIXI.WebGLRenderer.gl);
|
return new PIXI.WebGLBatch(PIXI.WebGLRenderer.gl);
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
return PIXI._batchs.pop();
|
return PIXI._batchs.pop();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Puts a batch back into the pool
|
* Puts a batch back into the pool
|
||||||
|
@ -131,9 +131,9 @@ PIXI.WebGLRenderer.getBatch = function()
|
||||||
*/
|
*/
|
||||||
PIXI.WebGLRenderer.returnBatch = function(batch)
|
PIXI.WebGLRenderer.returnBatch = function(batch)
|
||||||
{
|
{
|
||||||
batch.clean();
|
batch.clean();
|
||||||
PIXI._batchs.push(batch);
|
PIXI._batchs.push(batch);
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Renders the stage to its webGL view
|
* Renders the stage to its webGL view
|
||||||
|
@ -143,68 +143,68 @@ PIXI.WebGLRenderer.returnBatch = function(batch)
|
||||||
*/
|
*/
|
||||||
PIXI.WebGLRenderer.prototype.render = function(stage)
|
PIXI.WebGLRenderer.prototype.render = function(stage)
|
||||||
{
|
{
|
||||||
if(this.contextLost)return;
|
if(this.contextLost)return;
|
||||||
|
|
||||||
|
|
||||||
// if rendering a new stage clear the batchs..
|
// if rendering a new stage clear the batchs..
|
||||||
if(this.__stage !== stage)
|
if(this.__stage !== stage)
|
||||||
{
|
{
|
||||||
// TODO make this work
|
// TODO make this work
|
||||||
// dont think this is needed any more?
|
// dont think this is needed any more?
|
||||||
this.__stage = stage;
|
this.__stage = stage;
|
||||||
this.stageRenderGroup.setRenderable(stage);
|
this.stageRenderGroup.setRenderable(stage);
|
||||||
}
|
}
|
||||||
|
|
||||||
// update any textures
|
// update any textures
|
||||||
PIXI.WebGLRenderer.updateTextures();
|
PIXI.WebGLRenderer.updateTextures();
|
||||||
|
|
||||||
// update the scene graph
|
// update the scene graph
|
||||||
PIXI.visibleCount++;
|
PIXI.visibleCount++;
|
||||||
stage.updateTransform();
|
stage.updateTransform();
|
||||||
|
|
||||||
var gl = this.gl;
|
var gl = this.gl;
|
||||||
|
|
||||||
// -- Does this need to be set every frame? -- //
|
// -- Does this need to be set every frame? -- //
|
||||||
gl.colorMask(true, true, true, this.transparent);
|
gl.colorMask(true, true, true, this.transparent);
|
||||||
gl.viewport(0, 0, this.width, this.height);
|
gl.viewport(0, 0, this.width, this.height);
|
||||||
|
|
||||||
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
||||||
|
|
||||||
gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);
|
gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);
|
||||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||||
|
|
||||||
// HACK TO TEST
|
// HACK TO TEST
|
||||||
|
|
||||||
this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
|
this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
|
||||||
|
|
||||||
PIXI.projection.x = this.width/2;
|
PIXI.projection.x = this.width/2;
|
||||||
PIXI.projection.y = -this.height/2;
|
PIXI.projection.y = -this.height/2;
|
||||||
|
|
||||||
this.stageRenderGroup.render(PIXI.projection);
|
this.stageRenderGroup.render(PIXI.projection);
|
||||||
|
|
||||||
// interaction
|
// interaction
|
||||||
// run interaction!
|
// run interaction!
|
||||||
if(stage.interactive)
|
if(stage.interactive)
|
||||||
{
|
{
|
||||||
//need to add some events!
|
//need to add some events!
|
||||||
if(!stage._interactiveEventsAdded)
|
if(!stage._interactiveEventsAdded)
|
||||||
{
|
{
|
||||||
stage._interactiveEventsAdded = true;
|
stage._interactiveEventsAdded = true;
|
||||||
stage.interactionManager.setTarget(this);
|
stage.interactionManager.setTarget(this);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// after rendering lets confirm all frames that have been uodated..
|
// after rendering lets confirm all frames that have been uodated..
|
||||||
if(PIXI.Texture.frameUpdates.length > 0)
|
if(PIXI.Texture.frameUpdates.length > 0)
|
||||||
{
|
{
|
||||||
for (var i=0; i < PIXI.Texture.frameUpdates.length; i++)
|
for (var i=0; i < PIXI.Texture.frameUpdates.length; i++)
|
||||||
{
|
{
|
||||||
PIXI.Texture.frameUpdates[i].updateFrame = false;
|
PIXI.Texture.frameUpdates[i].updateFrame = false;
|
||||||
};
|
}
|
||||||
|
|
||||||
PIXI.Texture.frameUpdates = [];
|
PIXI.Texture.frameUpdates = [];
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Updates the textures loaded into this webgl renderer
|
* Updates the textures loaded into this webgl renderer
|
||||||
|
@ -215,12 +215,18 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
|
||||||
*/
|
*/
|
||||||
PIXI.WebGLRenderer.updateTextures = function()
|
PIXI.WebGLRenderer.updateTextures = function()
|
||||||
{
|
{
|
||||||
//TODO break this out into a texture manager...
|
var i = 0;
|
||||||
for (var i=0; i < PIXI.texturesToUpdate.length; i++) PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]);
|
|
||||||
for (var i=0; i < PIXI.texturesToDestroy.length; i++) PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]);
|
//TODO break this out into a texture manager...
|
||||||
PIXI.texturesToUpdate = [];
|
for (i = 0; i < PIXI.texturesToUpdate.length; i++)
|
||||||
PIXI.texturesToDestroy = [];
|
PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]);
|
||||||
}
|
|
||||||
|
for (i = 0; i < PIXI.texturesToDestroy.length; i++)
|
||||||
|
PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]);
|
||||||
|
|
||||||
|
PIXI.texturesToUpdate = [];
|
||||||
|
PIXI.texturesToDestroy = [];
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Updates a loaded webgl texture
|
* Updates a loaded webgl texture
|
||||||
|
@ -232,39 +238,39 @@ PIXI.WebGLRenderer.updateTextures = function()
|
||||||
*/
|
*/
|
||||||
PIXI.WebGLRenderer.updateTexture = function(texture)
|
PIXI.WebGLRenderer.updateTexture = function(texture)
|
||||||
{
|
{
|
||||||
//TODO break this out into a texture manager...
|
//TODO break this out into a texture manager...
|
||||||
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, texture.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR ? gl.LINEAR : gl.NEAREST);
|
||||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR ? gl.LINEAR : gl.NEAREST);
|
||||||
|
|
||||||
// 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);
|
||||||
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);
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
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
|
* Destroys a loaded webgl texture
|
||||||
|
@ -275,15 +281,15 @@ PIXI.WebGLRenderer.updateTexture = function(texture)
|
||||||
*/
|
*/
|
||||||
PIXI.WebGLRenderer.destroyTexture = function(texture)
|
PIXI.WebGLRenderer.destroyTexture = function(texture)
|
||||||
{
|
{
|
||||||
//TODO break this out into a texture manager...
|
//TODO break this out into a texture manager...
|
||||||
var gl = PIXI.gl;
|
var gl = PIXI.gl;
|
||||||
|
|
||||||
if(texture._glTexture)
|
if(texture._glTexture)
|
||||||
{
|
{
|
||||||
texture._glTexture = gl.createTexture();
|
texture._glTexture = gl.createTexture();
|
||||||
gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture);
|
gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* resizes the webGL view to the specified width and height
|
* resizes the webGL view to the specified width and height
|
||||||
|
@ -294,27 +300,27 @@ PIXI.WebGLRenderer.destroyTexture = function(texture)
|
||||||
*/
|
*/
|
||||||
PIXI.WebGLRenderer.prototype.resize = function(width, height)
|
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;
|
||||||
|
|
||||||
//PIXI.size.x = this.width/2;
|
//PIXI.size.x = this.width/2;
|
||||||
//PIXI.size.y = -this.height/2;
|
//PIXI.size.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;
|
||||||
// projectionMatrix[13] = 1;
|
// projectionMatrix[13] = 1;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Handles a lost webgl context
|
* Handles a lost webgl context
|
||||||
|
@ -325,9 +331,9 @@ PIXI.WebGLRenderer.prototype.resize = function(width, height)
|
||||||
*/
|
*/
|
||||||
PIXI.WebGLRenderer.prototype.handleContextLost = function(event)
|
PIXI.WebGLRenderer.prototype.handleContextLost = function(event)
|
||||||
{
|
{
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
this.contextLost = true;
|
this.contextLost = true;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Handles a restored webgl context
|
* Handles a restored webgl context
|
||||||
|
@ -336,28 +342,28 @@ PIXI.WebGLRenderer.prototype.handleContextLost = function(event)
|
||||||
* @param event {Event}
|
* @param event {Event}
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
PIXI.WebGLRenderer.prototype.handleContextRestored = function(event)
|
PIXI.WebGLRenderer.prototype.handleContextRestored = function()
|
||||||
{
|
{
|
||||||
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;
|
||||||
}
|
};
|
||||||
|
|
|
@ -2,73 +2,70 @@
|
||||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
PIXI.initDefaultShaders = function()
|
PIXI.initDefaultShaders = function()
|
||||||
{
|
{
|
||||||
PIXI.primitiveShader = new PIXI.PrimitiveShader();
|
PIXI.primitiveShader = new PIXI.PrimitiveShader();
|
||||||
PIXI.primitiveShader.init();
|
PIXI.primitiveShader.init();
|
||||||
|
|
||||||
PIXI.stripShader = new PIXI.StripShader();
|
PIXI.stripShader = new PIXI.StripShader();
|
||||||
PIXI.stripShader.init();
|
PIXI.stripShader.init();
|
||||||
|
|
||||||
PIXI.defaultShader = new PIXI.PixiShader();
|
PIXI.defaultShader = new PIXI.PixiShader();
|
||||||
PIXI.defaultShader.init();
|
PIXI.defaultShader.init();
|
||||||
|
|
||||||
var gl = PIXI.gl;
|
var gl = PIXI.gl;
|
||||||
var shaderProgram = PIXI.defaultShader.program;
|
var shaderProgram = PIXI.defaultShader.program;
|
||||||
|
|
||||||
|
gl.useProgram(shaderProgram);
|
||||||
|
|
||||||
gl.useProgram(shaderProgram);
|
gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition);
|
||||||
|
gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute);
|
||||||
gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition);
|
gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
|
||||||
gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute);
|
};
|
||||||
gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
|
|
||||||
}
|
|
||||||
|
|
||||||
PIXI.activatePrimitiveShader = function()
|
PIXI.activatePrimitiveShader = function()
|
||||||
{
|
{
|
||||||
var gl = PIXI.gl;
|
var gl = PIXI.gl;
|
||||||
|
|
||||||
gl.useProgram(PIXI.primitiveShader.program);
|
gl.useProgram(PIXI.primitiveShader.program);
|
||||||
|
|
||||||
gl.disableVertexAttribArray(PIXI.defaultShader.aVertexPosition);
|
gl.disableVertexAttribArray(PIXI.defaultShader.aVertexPosition);
|
||||||
gl.disableVertexAttribArray(PIXI.defaultShader.colorAttribute);
|
gl.disableVertexAttribArray(PIXI.defaultShader.colorAttribute);
|
||||||
gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
|
gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
|
||||||
|
|
||||||
gl.enableVertexAttribArray(PIXI.primitiveShader.aVertexPosition);
|
gl.enableVertexAttribArray(PIXI.primitiveShader.aVertexPosition);
|
||||||
gl.enableVertexAttribArray(PIXI.primitiveShader.colorAttribute);
|
gl.enableVertexAttribArray(PIXI.primitiveShader.colorAttribute);
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.deactivatePrimitiveShader = function()
|
PIXI.deactivatePrimitiveShader = function()
|
||||||
{
|
{
|
||||||
var gl = PIXI.gl;
|
var gl = PIXI.gl;
|
||||||
|
|
||||||
gl.useProgram(PIXI.defaultShader.program);
|
gl.useProgram(PIXI.defaultShader.program);
|
||||||
|
|
||||||
gl.disableVertexAttribArray(PIXI.primitiveShader.aVertexPosition);
|
gl.disableVertexAttribArray(PIXI.primitiveShader.aVertexPosition);
|
||||||
gl.disableVertexAttribArray(PIXI.primitiveShader.colorAttribute);
|
gl.disableVertexAttribArray(PIXI.primitiveShader.colorAttribute);
|
||||||
|
|
||||||
gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition);
|
gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition);
|
||||||
gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute);
|
gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute);
|
||||||
gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
|
gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
|
||||||
|
};
|
||||||
}
|
|
||||||
|
|
||||||
PIXI.activateStripShader = function()
|
PIXI.activateStripShader = function()
|
||||||
{
|
{
|
||||||
var gl = PIXI.gl;
|
var gl = PIXI.gl;
|
||||||
|
|
||||||
gl.useProgram(PIXI.stripShader.program);
|
gl.useProgram(PIXI.stripShader.program);
|
||||||
// gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
|
// gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.deactivateStripShader = function()
|
PIXI.deactivateStripShader = function()
|
||||||
{
|
{
|
||||||
var gl = PIXI.gl;
|
var gl = PIXI.gl;
|
||||||
|
|
||||||
gl.useProgram(PIXI.defaultShader.program);
|
gl.useProgram(PIXI.defaultShader.program);
|
||||||
//gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
|
//gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
|
||||||
}
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
||||||
|
@ -77,45 +74,44 @@ SHADER COMPILER HELPERS
|
||||||
|
|
||||||
PIXI.CompileVertexShader = function(gl, shaderSrc)
|
PIXI.CompileVertexShader = function(gl, shaderSrc)
|
||||||
{
|
{
|
||||||
return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
|
return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.CompileFragmentShader = function(gl, shaderSrc)
|
PIXI.CompileFragmentShader = function(gl, shaderSrc)
|
||||||
{
|
{
|
||||||
return PIXI._CompileShader(gl, shaderSrc, gl.FRAGMENT_SHADER);
|
return PIXI._CompileShader(gl, shaderSrc, gl.FRAGMENT_SHADER);
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI._CompileShader = function(gl, shaderSrc, shaderType)
|
PIXI._CompileShader = function(gl, shaderSrc, shaderType)
|
||||||
{
|
{
|
||||||
var src = shaderSrc.join("\n");
|
var src = shaderSrc.join("\n");
|
||||||
var shader = gl.createShader(shaderType);
|
var shader = gl.createShader(shaderType);
|
||||||
gl.shaderSource(shader, src);
|
gl.shaderSource(shader, src);
|
||||||
gl.compileShader(shader);
|
gl.compileShader(shader);
|
||||||
|
|
||||||
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
||||||
console.log(gl.getShaderInfoLog(shader));
|
window.console.log(gl.getShaderInfoLog(shader));
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
return shader;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
return shader;
|
||||||
|
};
|
||||||
|
|
||||||
PIXI.compileProgram = function(vertexSrc, fragmentSrc)
|
PIXI.compileProgram = function(vertexSrc, fragmentSrc)
|
||||||
{
|
{
|
||||||
var gl = PIXI.gl;
|
var gl = PIXI.gl;
|
||||||
var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc);
|
var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc);
|
||||||
var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc);
|
var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc);
|
||||||
|
|
||||||
var shaderProgram = gl.createProgram();
|
var shaderProgram = gl.createProgram();
|
||||||
|
|
||||||
gl.attachShader(shaderProgram, vertexShader);
|
gl.attachShader(shaderProgram, vertexShader);
|
||||||
gl.attachShader(shaderProgram, fragmentShader);
|
gl.attachShader(shaderProgram, fragmentShader);
|
||||||
gl.linkProgram(shaderProgram);
|
gl.linkProgram(shaderProgram);
|
||||||
|
|
||||||
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
|
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
|
||||||
console.log("Could not initialise shaders");
|
window.console.log("Could not initialise shaders");
|
||||||
}
|
}
|
||||||
|
|
||||||
return shaderProgram;
|
return shaderProgram;
|
||||||
}
|
};
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A Text Object will create a line(s) of text using bitmap font. To split a line you can use "\n", "\r" or "\r\n"
|
* A Text Object will create a line(s) of text using bitmap font. To split a line you can use '\n', '\r' or '\r\n'
|
||||||
* 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.
|
||||||
|
@ -13,8 +13,8 @@
|
||||||
* @constructor
|
* @constructor
|
||||||
* @param text {String} The copy that you would like the text to display
|
* @param text {String} The copy that you would like the text to display
|
||||||
* @param style {Object} The style parameters
|
* @param style {Object} The style parameters
|
||||||
* @param style.font {String} 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 [style.align="left"] {String} 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)
|
||||||
{
|
{
|
||||||
|
@ -23,8 +23,7 @@ PIXI.BitmapText = function(text, style)
|
||||||
this.setText(text);
|
this.setText(text);
|
||||||
this.setStyle(style);
|
this.setStyle(style);
|
||||||
this.updateText();
|
this.updateText();
|
||||||
this.dirty = false
|
this.dirty = false;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// constructor
|
// constructor
|
||||||
|
@ -39,7 +38,7 @@ PIXI.BitmapText.prototype.constructor = PIXI.BitmapText;
|
||||||
*/
|
*/
|
||||||
PIXI.BitmapText.prototype.setText = function(text)
|
PIXI.BitmapText.prototype.setText = function(text)
|
||||||
{
|
{
|
||||||
this.text = text || " ";
|
this.text = text || ' ';
|
||||||
this.dirty = true;
|
this.dirty = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -48,16 +47,16 @@ PIXI.BitmapText.prototype.setText = function(text)
|
||||||
*
|
*
|
||||||
* @method setStyle
|
* @method setStyle
|
||||||
* @param style {Object} The style parameters
|
* @param style {Object} The style parameters
|
||||||
* @param style.font {String} 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 [style.align="left"] {String} 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)
|
||||||
{
|
{
|
||||||
style = style || {};
|
style = style || {};
|
||||||
style.align = style.align || "left";
|
style.align = style.align || 'left';
|
||||||
this.style = style;
|
this.style = style;
|
||||||
|
|
||||||
var font = style.font.split(" ");
|
var font = style.font.split(' ');
|
||||||
this.fontName = font[font.length - 1];
|
this.fontName = font[font.length - 1];
|
||||||
this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
|
this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
|
||||||
|
|
||||||
|
@ -100,7 +99,7 @@ PIXI.BitmapText.prototype.updateText = function()
|
||||||
|
|
||||||
if(prevCharCode && charData[prevCharCode])
|
if(prevCharCode && charData[prevCharCode])
|
||||||
{
|
{
|
||||||
pos.x += charData.kerning[prevCharCode];
|
pos.x += charData.kerning[prevCharCode];
|
||||||
}
|
}
|
||||||
chars.push({texture:charData.texture, line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
|
chars.push({texture:charData.texture, line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
|
||||||
pos.x += charData.xAdvance;
|
pos.x += charData.xAdvance;
|
||||||
|
@ -115,11 +114,11 @@ PIXI.BitmapText.prototype.updateText = function()
|
||||||
for(i = 0; i <= line; i++)
|
for(i = 0; i <= line; i++)
|
||||||
{
|
{
|
||||||
var alignOffset = 0;
|
var alignOffset = 0;
|
||||||
if(this.style.align == "right")
|
if(this.style.align === 'right')
|
||||||
{
|
{
|
||||||
alignOffset = maxLineWidth - lineWidths[i];
|
alignOffset = maxLineWidth - lineWidths[i];
|
||||||
}
|
}
|
||||||
else if(this.style.align == "center")
|
else if(this.style.align === 'center')
|
||||||
{
|
{
|
||||||
alignOffset = (maxLineWidth - lineWidths[i]) / 2;
|
alignOffset = (maxLineWidth - lineWidths[i]) / 2;
|
||||||
}
|
}
|
||||||
|
@ -128,7 +127,7 @@ PIXI.BitmapText.prototype.updateText = function()
|
||||||
|
|
||||||
for(i = 0; i < chars.length; i++)
|
for(i = 0; i < chars.length; i++)
|
||||||
{
|
{
|
||||||
var c = new PIXI.Sprite(chars[i].texture)//PIXI.Sprite.fromFrame(chars[i].charCode);
|
var c = new PIXI.Sprite(chars[i].texture); //PIXI.Sprite.fromFrame(chars[i].charCode);
|
||||||
c.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
|
c.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
|
||||||
c.position.y = chars[i].position.y * scale;
|
c.position.y = chars[i].position.y * scale;
|
||||||
c.scale.x = c.scale.y = scale;
|
c.scale.x = c.scale.y = scale;
|
||||||
|
@ -147,8 +146,8 @@ PIXI.BitmapText.prototype.updateText = function()
|
||||||
*/
|
*/
|
||||||
PIXI.BitmapText.prototype.updateTransform = function()
|
PIXI.BitmapText.prototype.updateTransform = function()
|
||||||
{
|
{
|
||||||
if(this.dirty)
|
if(this.dirty)
|
||||||
{
|
{
|
||||||
while(this.children.length > 0)
|
while(this.children.length > 0)
|
||||||
{
|
{
|
||||||
this.removeChild(this.getChildAt(0));
|
this.removeChild(this.getChildAt(0));
|
||||||
|
@ -156,9 +155,9 @@ PIXI.BitmapText.prototype.updateTransform = function()
|
||||||
this.updateText();
|
this.updateText();
|
||||||
|
|
||||||
this.dirty = false;
|
this.dirty = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
|
PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
|
||||||
};
|
};
|
||||||
|
|
||||||
PIXI.BitmapText.fonts = {};
|
PIXI.BitmapText.fonts = {};
|
||||||
|
|
|
@ -3,25 +3,25 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 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 text {String} The copy that you would like the text to display
|
* @param text {String} The copy that you would like the text to display
|
||||||
* @param [style] {Object} The style parameters
|
* @param [style] {Object} The style parameters
|
||||||
* @param [style.font] {String} 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 [style.fill="black"] {Object} 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 [style.align="left"] {String} 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 [style.stroke] {String} 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 [style.strokeThickness=0] {Number} 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 [style.wordWrap=false] {Boolean} Indicates if word wrap should be used
|
* @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used
|
||||||
* @param [style.wordWrapWidth=100] {Number} 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)
|
||||||
{
|
{
|
||||||
this.canvas = document.createElement("canvas");
|
this.canvas = document.createElement('canvas');
|
||||||
this.context = this.canvas.getContext("2d");
|
this.context = this.canvas.getContext('2d');
|
||||||
PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
|
PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
|
||||||
|
|
||||||
this.setText(text);
|
this.setText(text);
|
||||||
|
@ -40,10 +40,10 @@ PIXI.Text.prototype.constructor = PIXI.Text;
|
||||||
*
|
*
|
||||||
* @method setStyle
|
* @method setStyle
|
||||||
* @param [style] {Object} The style parameters
|
* @param [style] {Object} The style parameters
|
||||||
* @param [style.font="bold 20pt Arial"] {String} The style and size of the font
|
* @param [style.font='bold 20pt Arial'] {String} The style and size of the font
|
||||||
* @param [style.fill="black"] {Object} 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 [style.align="left"] {String} 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 [style.stroke="black"] {String} 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 [style.strokeThickness=0] {Number} 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 [style.wordWrap=false] {Boolean} Indicates if word wrap should be used
|
* @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used
|
||||||
* @param [style.wordWrapWidth=100] {Number} The width at which text will wrap
|
* @param [style.wordWrapWidth=100] {Number} The width at which text will wrap
|
||||||
|
@ -51,10 +51,10 @@ PIXI.Text.prototype.constructor = PIXI.Text;
|
||||||
PIXI.Text.prototype.setStyle = function(style)
|
PIXI.Text.prototype.setStyle = function(style)
|
||||||
{
|
{
|
||||||
style = style || {};
|
style = style || {};
|
||||||
style.font = style.font || "bold 20pt Arial";
|
style.font = style.font || 'bold 20pt Arial';
|
||||||
style.fill = style.fill || "black";
|
style.fill = style.fill || 'black';
|
||||||
style.align = style.align || "left";
|
style.align = style.align || 'left';
|
||||||
style.stroke = style.stroke || "black"; //provide a default, see: https://github.com/GoodBoyDigital/pixi.js/issues/136
|
style.stroke = style.stroke || 'black'; //provide a default, see: https://github.com/GoodBoyDigital/pixi.js/issues/136
|
||||||
style.strokeThickness = style.strokeThickness || 0;
|
style.strokeThickness = style.strokeThickness || 0;
|
||||||
style.wordWrap = style.wordWrap || false;
|
style.wordWrap = style.wordWrap || false;
|
||||||
style.wordWrapWidth = style.wordWrapWidth || 100;
|
style.wordWrapWidth = style.wordWrapWidth || 100;
|
||||||
|
@ -63,14 +63,14 @@ 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'
|
||||||
*
|
*
|
||||||
* @method setText
|
* @method 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
|
||||||
*/
|
*/
|
||||||
PIXI.Text.prototype.setText = function(text)
|
PIXI.Text.prototype.setText = function(text)
|
||||||
{
|
{
|
||||||
this.text = text.toString() || " ";
|
this.text = text.toString() || ' ';
|
||||||
this.dirty = true;
|
this.dirty = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -82,65 +82,65 @@ PIXI.Text.prototype.setText = function(text)
|
||||||
*/
|
*/
|
||||||
PIXI.Text.prototype.updateText = function()
|
PIXI.Text.prototype.updateText = function()
|
||||||
{
|
{
|
||||||
this.context.font = this.style.font;
|
this.context.font = this.style.font;
|
||||||
|
|
||||||
var outputText = this.text;
|
var outputText = this.text;
|
||||||
|
|
||||||
// word wrap
|
// word wrap
|
||||||
// preserve original text
|
// preserve original text
|
||||||
if(this.style.wordWrap)outputText = this.wordWrap(this.text);
|
if(this.style.wordWrap)outputText = this.wordWrap(this.text);
|
||||||
|
|
||||||
//split text into lines
|
//split text into lines
|
||||||
var lines = outputText.split(/(?:\r\n|\r|\n)/);
|
var lines = outputText.split(/(?:\r\n|\r|\n)/);
|
||||||
|
|
||||||
//calculate text width
|
//calculate text width
|
||||||
var lineWidths = [];
|
var lineWidths = [];
|
||||||
var maxLineWidth = 0;
|
var maxLineWidth = 0;
|
||||||
for (var i = 0; i < lines.length; i++)
|
for (var i = 0; i < lines.length; i++)
|
||||||
{
|
{
|
||||||
var lineWidth = this.context.measureText(lines[i]).width;
|
var lineWidth = this.context.measureText(lines[i]).width;
|
||||||
lineWidths[i] = lineWidth;
|
lineWidths[i] = lineWidth;
|
||||||
maxLineWidth = Math.max(maxLineWidth, lineWidth);
|
maxLineWidth = Math.max(maxLineWidth, lineWidth);
|
||||||
}
|
}
|
||||||
this.canvas.width = maxLineWidth + this.style.strokeThickness;
|
this.canvas.width = maxLineWidth + this.style.strokeThickness;
|
||||||
|
|
||||||
//calculate text height
|
//calculate text height
|
||||||
var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness;
|
var lineHeight = this.determineFontHeight('font: ' + this.style.font + ';') + this.style.strokeThickness;
|
||||||
this.canvas.height = lineHeight * lines.length;
|
this.canvas.height = lineHeight * lines.length;
|
||||||
|
|
||||||
//set canvas text styles
|
//set canvas text styles
|
||||||
this.context.fillStyle = this.style.fill;
|
this.context.fillStyle = this.style.fill;
|
||||||
this.context.font = this.style.font;
|
this.context.font = this.style.font;
|
||||||
|
|
||||||
this.context.strokeStyle = this.style.stroke;
|
this.context.strokeStyle = this.style.stroke;
|
||||||
this.context.lineWidth = this.style.strokeThickness;
|
this.context.lineWidth = this.style.strokeThickness;
|
||||||
|
|
||||||
this.context.textBaseline = "top";
|
this.context.textBaseline = 'top';
|
||||||
|
|
||||||
//draw lines line by line
|
//draw lines line by line
|
||||||
for (i = 0; i < lines.length; i++)
|
for (i = 0; i < lines.length; i++)
|
||||||
{
|
{
|
||||||
var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
|
var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
|
||||||
|
|
||||||
if(this.style.align == "right")
|
if(this.style.align === 'right')
|
||||||
{
|
{
|
||||||
linePosition.x += maxLineWidth - lineWidths[i];
|
linePosition.x += maxLineWidth - lineWidths[i];
|
||||||
}
|
}
|
||||||
else if(this.style.align == "center")
|
else if(this.style.align === 'center')
|
||||||
{
|
{
|
||||||
linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
|
linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(this.style.stroke && this.style.strokeThickness)
|
if(this.style.stroke && this.style.strokeThickness)
|
||||||
{
|
{
|
||||||
this.context.strokeText(lines[i], linePosition.x, linePosition.y);
|
this.context.strokeText(lines[i], linePosition.x, linePosition.y);
|
||||||
}
|
}
|
||||||
|
|
||||||
if(this.style.fill)
|
if(this.style.fill)
|
||||||
{
|
{
|
||||||
this.context.fillText(lines[i], linePosition.x, linePosition.y);
|
this.context.fillText(lines[i], linePosition.x, linePosition.y);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.updateTexture();
|
this.updateTexture();
|
||||||
};
|
};
|
||||||
|
@ -158,7 +158,7 @@ PIXI.Text.prototype.updateTexture = function()
|
||||||
this.texture.frame.width = this.canvas.width;
|
this.texture.frame.width = this.canvas.width;
|
||||||
this.texture.frame.height = this.canvas.height;
|
this.texture.frame.height = this.canvas.height;
|
||||||
|
|
||||||
this._width = this.canvas.width;
|
this._width = this.canvas.width;
|
||||||
this._height = this.canvas.height;
|
this._height = this.canvas.height;
|
||||||
|
|
||||||
PIXI.texturesToUpdate.push(this.texture.baseTexture);
|
PIXI.texturesToUpdate.push(this.texture.baseTexture);
|
||||||
|
@ -172,13 +172,13 @@ PIXI.Text.prototype.updateTexture = function()
|
||||||
*/
|
*/
|
||||||
PIXI.Text.prototype.updateTransform = function()
|
PIXI.Text.prototype.updateTransform = function()
|
||||||
{
|
{
|
||||||
if(this.dirty)
|
if(this.dirty)
|
||||||
{
|
{
|
||||||
this.updateText();
|
this.updateText();
|
||||||
this.dirty = false;
|
this.dirty = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
PIXI.Sprite.prototype.updateTransform.call(this);
|
PIXI.Sprite.prototype.updateTransform.call(this);
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
@ -191,26 +191,26 @@ PIXI.Text.prototype.updateTransform = function()
|
||||||
*/
|
*/
|
||||||
PIXI.Text.prototype.determineFontHeight = function(fontStyle)
|
PIXI.Text.prototype.determineFontHeight = function(fontStyle)
|
||||||
{
|
{
|
||||||
// build a little reference dictionary so if the font style has been used return a
|
// build a little reference dictionary so if the font style has been used return a
|
||||||
// cached version...
|
// cached version...
|
||||||
var result = PIXI.Text.heightCache[fontStyle];
|
var result = PIXI.Text.heightCache[fontStyle];
|
||||||
|
|
||||||
if(!result)
|
if(!result)
|
||||||
{
|
{
|
||||||
var body = document.getElementsByTagName("body")[0];
|
var body = document.getElementsByTagName('body')[0];
|
||||||
var dummy = document.createElement("div");
|
var dummy = document.createElement('div');
|
||||||
var dummyText = document.createTextNode("M");
|
var dummyText = document.createTextNode('M');
|
||||||
dummy.appendChild(dummyText);
|
dummy.appendChild(dummyText);
|
||||||
dummy.setAttribute("style", fontStyle + ';position:absolute;top:0;left:0');
|
dummy.setAttribute('style', fontStyle + ';position:absolute;top:0;left:0');
|
||||||
body.appendChild(dummy);
|
body.appendChild(dummy);
|
||||||
|
|
||||||
result = dummy.offsetHeight;
|
result = dummy.offsetHeight;
|
||||||
PIXI.Text.heightCache[fontStyle] = result;
|
PIXI.Text.heightCache[fontStyle] = result;
|
||||||
|
|
||||||
body.removeChild(dummy);
|
body.removeChild(dummy);
|
||||||
}
|
}
|
||||||
|
|
||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -223,38 +223,38 @@ PIXI.Text.prototype.determineFontHeight = function(fontStyle)
|
||||||
*/
|
*/
|
||||||
PIXI.Text.prototype.wordWrap = function(text)
|
PIXI.Text.prototype.wordWrap = function(text)
|
||||||
{
|
{
|
||||||
// Greedy wrapping algorithm that will wrap words as the line grows longer
|
// Greedy wrapping algorithm that will wrap words as the line grows longer
|
||||||
// than its horizontal bounds.
|
// than its horizontal bounds.
|
||||||
var result = "";
|
var result = '';
|
||||||
var lines = text.split("\n");
|
var lines = text.split('\n');
|
||||||
for (var i = 0; i < lines.length; i++)
|
for (var i = 0; i < lines.length; i++)
|
||||||
{
|
{
|
||||||
var spaceLeft = this.style.wordWrapWidth;
|
var spaceLeft = this.style.wordWrapWidth;
|
||||||
var words = lines[i].split(" ");
|
var words = lines[i].split(' ');
|
||||||
for (var j = 0; j < words.length; j++)
|
for (var j = 0; j < words.length; j++)
|
||||||
{
|
{
|
||||||
var wordWidth = this.context.measureText(words[j]).width;
|
var wordWidth = this.context.measureText(words[j]).width;
|
||||||
var wordWidthWithSpace = wordWidth + this.context.measureText(" ").width;
|
var wordWidthWithSpace = wordWidth + this.context.measureText(' ').width;
|
||||||
if(wordWidthWithSpace > spaceLeft)
|
if(wordWidthWithSpace > spaceLeft)
|
||||||
{
|
{
|
||||||
// Skip printing the newline if it's the first word of the line that is
|
// Skip printing the newline if it's the first word of the line that is
|
||||||
// greater than the word wrap width.
|
// greater than the word wrap width.
|
||||||
if(j > 0)
|
if(j > 0)
|
||||||
{
|
{
|
||||||
result += "\n";
|
result += '\n';
|
||||||
}
|
}
|
||||||
result += words[j] + " ";
|
result += words[j] + ' ';
|
||||||
spaceLeft = this.style.wordWrapWidth - wordWidth;
|
spaceLeft = this.style.wordWrapWidth - wordWidth;
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
spaceLeft -= wordWidthWithSpace;
|
spaceLeft -= wordWidthWithSpace;
|
||||||
result += words[j] + " ";
|
result += words[j] + ' ';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
result += "\n";
|
result += '\n';
|
||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -265,10 +265,10 @@ PIXI.Text.prototype.wordWrap = function(text)
|
||||||
*/
|
*/
|
||||||
PIXI.Text.prototype.destroy = function(destroyTexture)
|
PIXI.Text.prototype.destroy = function(destroyTexture)
|
||||||
{
|
{
|
||||||
if(destroyTexture)
|
if(destroyTexture)
|
||||||
{
|
{
|
||||||
this.texture.destroy();
|
this.texture.destroy();
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -14,86 +14,94 @@ PIXI.texturesToDestroy = [];
|
||||||
* @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, scaleMode)
|
||||||
{
|
{
|
||||||
PIXI.EventTarget.call( this );
|
PIXI.EventTarget.call( this );
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [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
|
* @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
|
* @readOnly
|
||||||
*/
|
*/
|
||||||
this.height = 100;
|
this.height = 100;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [read-only] Describes if the base texture has loaded or not
|
* The scale mode to apply when scaling this texture
|
||||||
*
|
* @property scaleMode
|
||||||
* @property hasLoaded
|
* @type PIXI.BaseTexture.SCALE_MODE
|
||||||
* @type Boolean
|
* @default PIXI.BaseTexture.SCALE_MODE.LINEAR
|
||||||
* @readOnly
|
*/
|
||||||
*/
|
this.scaleMode = scaleMode || PIXI.BaseTexture.SCALE_MODE.DEFAULT;
|
||||||
this.hasLoaded = false;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The source that is loaded to create the texture
|
* [read-only] Describes if the base texture has loaded or not
|
||||||
*
|
*
|
||||||
* @property source
|
* @property hasLoaded
|
||||||
* @type Image
|
* @type Boolean
|
||||||
*/
|
* @readOnly
|
||||||
this.source = source;
|
*/
|
||||||
|
this.hasLoaded = false;
|
||||||
|
|
||||||
if(!source)return;
|
/**
|
||||||
|
* The source that is loaded to create the texture
|
||||||
|
*
|
||||||
|
* @property source
|
||||||
|
* @type Image
|
||||||
|
*/
|
||||||
|
this.source = source;
|
||||||
|
|
||||||
if(this.source instanceof Image || this.source instanceof HTMLImageElement)
|
if(!source)return;
|
||||||
{
|
|
||||||
if(this.source.complete)
|
|
||||||
{
|
|
||||||
this.hasLoaded = true;
|
|
||||||
this.width = this.source.width;
|
|
||||||
this.height = this.source.height;
|
|
||||||
|
|
||||||
PIXI.texturesToUpdate.push(this);
|
if(this.source instanceof Image || this.source instanceof HTMLImageElement)
|
||||||
}
|
{
|
||||||
else
|
if(this.source.complete)
|
||||||
{
|
{
|
||||||
|
this.hasLoaded = true;
|
||||||
|
this.width = this.source.width;
|
||||||
|
this.height = this.source.height;
|
||||||
|
|
||||||
var scope = this;
|
PIXI.texturesToUpdate.push(this);
|
||||||
this.source.onload = function(){
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
|
||||||
scope.hasLoaded = true;
|
var scope = this;
|
||||||
scope.width = scope.source.width;
|
this.source.onload = function() {
|
||||||
scope.height = scope.source.height;
|
|
||||||
|
|
||||||
// add it to somewhere...
|
scope.hasLoaded = true;
|
||||||
PIXI.texturesToUpdate.push(scope);
|
scope.width = scope.source.width;
|
||||||
scope.dispatchEvent( { type: 'loaded', content: scope } );
|
scope.height = scope.source.height;
|
||||||
}
|
|
||||||
// this.image.src = imageUrl;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
this.hasLoaded = true;
|
|
||||||
this.width = this.source.width;
|
|
||||||
this.height = this.source.height;
|
|
||||||
|
|
||||||
PIXI.texturesToUpdate.push(this);
|
// add it to somewhere...
|
||||||
}
|
PIXI.texturesToUpdate.push(scope);
|
||||||
|
scope.dispatchEvent( { type: 'loaded', content: scope } );
|
||||||
|
};
|
||||||
|
//this.image.src = imageUrl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
this.hasLoaded = true;
|
||||||
|
this.width = this.source.width;
|
||||||
|
this.height = this.source.height;
|
||||||
|
|
||||||
this.imageUrl = null;
|
PIXI.texturesToUpdate.push(this);
|
||||||
this._powerOf2 = false;
|
}
|
||||||
}
|
|
||||||
|
this.imageUrl = null;
|
||||||
|
this._powerOf2 = false;
|
||||||
|
};
|
||||||
|
|
||||||
PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture;
|
PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture;
|
||||||
|
|
||||||
|
@ -104,16 +112,16 @@ PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture;
|
||||||
*/
|
*/
|
||||||
PIXI.BaseTexture.prototype.destroy = function()
|
PIXI.BaseTexture.prototype.destroy = function()
|
||||||
{
|
{
|
||||||
if(this.source instanceof Image)
|
if(this.source instanceof Image)
|
||||||
{
|
{
|
||||||
if (this.imageUrl in PIXI.BaseTextureCache)
|
if (this.imageUrl in PIXI.BaseTextureCache)
|
||||||
delete PIXI.BaseTextureCache[this.imageUrl];
|
delete PIXI.BaseTextureCache[this.imageUrl];
|
||||||
this.imageUrl = null;
|
this.imageUrl = null;
|
||||||
this.source.src = null;
|
this.source.src = null;
|
||||||
}
|
}
|
||||||
this.source = null;
|
this.source = null;
|
||||||
PIXI.texturesToDestroy.push(this);
|
PIXI.texturesToDestroy.push(this);
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
|
@ -123,10 +131,10 @@ PIXI.BaseTexture.prototype.destroy = function()
|
||||||
|
|
||||||
PIXI.BaseTexture.prototype.updateSourceImage = function(newSrc)
|
PIXI.BaseTexture.prototype.updateSourceImage = function(newSrc)
|
||||||
{
|
{
|
||||||
this.hasLoaded = false;
|
this.hasLoaded = false;
|
||||||
this.source.src = null;
|
this.source.src = null;
|
||||||
this.source.src = newSrc;
|
this.source.src = newSrc;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Helper function that returns a base texture based on an image url
|
* Helper function that returns a base texture based on an image url
|
||||||
|
@ -137,23 +145,29 @@ PIXI.BaseTexture.prototype.updateSourceImage = function(newSrc)
|
||||||
* @param imageUrl {String} The image url of the texture
|
* @param imageUrl {String} The image url of the texture
|
||||||
* @return BaseTexture
|
* @return BaseTexture
|
||||||
*/
|
*/
|
||||||
PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin)
|
PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin, scaleMode)
|
||||||
{
|
{
|
||||||
var baseTexture = PIXI.BaseTextureCache[imageUrl];
|
var baseTexture = PIXI.BaseTextureCache[imageUrl];
|
||||||
if(!baseTexture)
|
if(!baseTexture)
|
||||||
{
|
{
|
||||||
// new Image() breaks tex loading in some versions of Chrome.
|
// new Image() breaks tex loading in some versions of Chrome.
|
||||||
// See https://code.google.com/p/chromium/issues/detail?id=238071
|
// See https://code.google.com/p/chromium/issues/detail?id=238071
|
||||||
var image = new Image();//document.createElement('img');
|
var image = new Image();//document.createElement('img');
|
||||||
if (crossorigin)
|
if (crossorigin)
|
||||||
{
|
{
|
||||||
image.crossOrigin = '';
|
image.crossOrigin = '';
|
||||||
}
|
}
|
||||||
image.src = imageUrl;
|
image.src = imageUrl;
|
||||||
baseTexture = new PIXI.BaseTexture(image);
|
baseTexture = new PIXI.BaseTexture(image, scaleMode);
|
||||||
baseTexture.imageUrl = imageUrl;
|
baseTexture.imageUrl = imageUrl;
|
||||||
PIXI.BaseTextureCache[imageUrl] = baseTexture;
|
PIXI.BaseTextureCache[imageUrl] = baseTexture;
|
||||||
}
|
}
|
||||||
|
|
||||||
return baseTexture;
|
return baseTexture;
|
||||||
}
|
};
|
||||||
|
|
||||||
|
PIXI.BaseTexture.SCALE_MODE = {
|
||||||
|
DEFAULT: 0, //default to LINEAR
|
||||||
|
LINEAR: 0,
|
||||||
|
NEAREST: 1
|
||||||
|
};
|
|
@ -10,19 +10,19 @@
|
||||||
|
|
||||||
RenderTexture takes snapshot of DisplayObject passed to render method. If DisplayObject is passed to render method, position and rotation of it will be ignored. For example:
|
RenderTexture takes snapshot of DisplayObject passed to render method. If DisplayObject is passed to render method, position and rotation of it will be ignored. For example:
|
||||||
|
|
||||||
var renderTexture = new PIXI.RenderTexture(800, 600);
|
var renderTexture = new PIXI.RenderTexture(800, 600);
|
||||||
var sprite = PIXI.Sprite.fromImage("spinObj_01.png");
|
var sprite = PIXI.Sprite.fromImage("spinObj_01.png");
|
||||||
sprite.position.x = 800/2;
|
sprite.position.x = 800/2;
|
||||||
sprite.position.y = 600/2;
|
sprite.position.y = 600/2;
|
||||||
sprite.anchor.x = 0.5;
|
sprite.anchor.x = 0.5;
|
||||||
sprite.anchor.y = 0.5;
|
sprite.anchor.y = 0.5;
|
||||||
renderTexture.render(sprite);
|
renderTexture.render(sprite);
|
||||||
|
|
||||||
Sprite in this case will be rendered to 0,0 position. To render this sprite at center DisplayObjectContainer should be used:
|
Sprite in this case will be rendered to 0,0 position. To render this sprite at center DisplayObjectContainer should be used:
|
||||||
|
|
||||||
var doc = new PIXI.DisplayObjectContainer();
|
var doc = new PIXI.DisplayObjectContainer();
|
||||||
doc.addChild(sprite);
|
doc.addChild(sprite);
|
||||||
renderTexture.render(doc); // Renders to center of renderTexture
|
renderTexture.render(doc); // Renders to center of renderTexture
|
||||||
|
|
||||||
@class RenderTexture
|
@class RenderTexture
|
||||||
@extends Texture
|
@extends Texture
|
||||||
|
@ -32,24 +32,24 @@
|
||||||
*/
|
*/
|
||||||
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();
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
this.initCanvas();
|
this.initCanvas();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.RenderTexture.prototype = Object.create( PIXI.Texture.prototype );
|
PIXI.RenderTexture.prototype = Object.create( PIXI.Texture.prototype );
|
||||||
PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture;
|
PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture;
|
||||||
|
@ -62,65 +62,65 @@ PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture;
|
||||||
*/
|
*/
|
||||||
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;
|
||||||
this.baseTexture.height = this.height;
|
this.baseTexture.height = this.height;
|
||||||
|
|
||||||
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);
|
||||||
|
|
||||||
// set the correct render function..
|
// set the correct render function..
|
||||||
this.render = this.renderWebGL;
|
this.render = this.renderWebGL;
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
||||||
PIXI.RenderTexture.prototype.resize = function(width, height)
|
PIXI.RenderTexture.prototype.resize = function(width, height)
|
||||||
{
|
{
|
||||||
|
|
||||||
this.width = width;
|
this.width = width;
|
||||||
this.height = height;
|
this.height = height;
|
||||||
|
|
||||||
if(PIXI.gl)
|
if(PIXI.gl)
|
||||||
{
|
{
|
||||||
this.projection.x = this.width/2
|
this.projection.x = this.width / 2;
|
||||||
this.projection.y = -this.height/2;
|
this.projection.y = -this.height / 2;
|
||||||
|
|
||||||
var gl = PIXI.gl;
|
var gl = PIXI.gl;
|
||||||
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);
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
|
|
||||||
this.frame.width = this.width
|
this.frame.width = this.width;
|
||||||
this.frame.height = this.height;
|
this.frame.height = this.height;
|
||||||
this.renderer.resize(this.width, this.height);
|
this.renderer.resize(this.width, this.height);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Initializes the canvas data for this texture
|
* Initializes the canvas data for this texture
|
||||||
|
@ -130,13 +130,13 @@ PIXI.RenderTexture.prototype.resize = function(width, height)
|
||||||
*/
|
*/
|
||||||
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.
|
||||||
|
@ -148,67 +148,67 @@ PIXI.RenderTexture.prototype.initCanvas = function()
|
||||||
*/
|
*/
|
||||||
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!
|
||||||
var originalWorldTransform = displayObject.worldTransform;
|
var originalWorldTransform = displayObject.worldTransform;
|
||||||
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)
|
||||||
{
|
{
|
||||||
displayObject.worldTransform[2] = position.x;
|
displayObject.worldTransform[2] = position.x;
|
||||||
displayObject.worldTransform[5] -= position.y;
|
displayObject.worldTransform[5] -= position.y;
|
||||||
}
|
}
|
||||||
|
|
||||||
PIXI.visibleCount++;
|
PIXI.visibleCount++;
|
||||||
displayObject.vcount = PIXI.visibleCount;
|
displayObject.vcount = PIXI.visibleCount;
|
||||||
|
|
||||||
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)
|
||||||
{
|
{
|
||||||
if(displayObject == renderGroup.root)
|
if(displayObject === renderGroup.root)
|
||||||
{
|
{
|
||||||
renderGroup.render(this.projection, this.glFramebuffer);
|
renderGroup.render(this.projection, this.glFramebuffer);
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
renderGroup.renderSpecific(displayObject, this.projection, this.glFramebuffer);
|
renderGroup.renderSpecific(displayObject, this.projection, this.glFramebuffer);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
if(!this.renderGroup)this.renderGroup = new PIXI.WebGLRenderGroup(gl);
|
if(!this.renderGroup)this.renderGroup = new PIXI.WebGLRenderGroup(gl);
|
||||||
this.renderGroup.setRenderable(displayObject);
|
this.renderGroup.setRenderable(displayObject);
|
||||||
this.renderGroup.render(this.projection, this.glFramebuffer);
|
this.renderGroup.render(this.projection, this.glFramebuffer);
|
||||||
}
|
}
|
||||||
|
|
||||||
displayObject.worldTransform = originalWorldTransform;
|
displayObject.worldTransform = originalWorldTransform;
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -221,28 +221,27 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, cle
|
||||||
*/
|
*/
|
||||||
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)
|
||||||
{
|
{
|
||||||
displayObject.worldTransform[2] = position.x;
|
displayObject.worldTransform[2] = position.x;
|
||||||
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();
|
||||||
}
|
}
|
||||||
|
|
||||||
if(clear)this.renderer.context.clearRect(0,0, this.width, this.height);
|
if(clear) this.renderer.context.clearRect(0,0, this.width, this.height);
|
||||||
|
|
||||||
this.renderer.renderDisplayObject(displayObject);
|
this.renderer.renderDisplayObject(displayObject);
|
||||||
|
|
||||||
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);
|
};
|
||||||
}
|
|
||||||
|
|
|
@ -17,56 +17,56 @@ PIXI.FrameCache = {};
|
||||||
*/
|
*/
|
||||||
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
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
|
* The trim point
|
||||||
*
|
*
|
||||||
* @property trim
|
* @property trim
|
||||||
* @type Point
|
* @type Point
|
||||||
*/
|
*/
|
||||||
this.trim = new PIXI.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);
|
||||||
//console.log(frame)
|
//console.log(frame)
|
||||||
|
|
||||||
this.setFrame(frame);
|
this.setFrame(frame);
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
var scope = this;
|
var scope = this;
|
||||||
baseTexture.addEventListener( 'loaded', function(){ scope.onBaseTextureLoaded()} );
|
baseTexture.addEventListener('loaded', function(){ scope.onBaseTextureLoaded(); });
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
PIXI.Texture.prototype.constructor = PIXI.Texture;
|
PIXI.Texture.prototype.constructor = PIXI.Texture;
|
||||||
|
|
||||||
|
@ -77,18 +77,18 @@ PIXI.Texture.prototype.constructor = PIXI.Texture;
|
||||||
* @param event
|
* @param event
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
PIXI.Texture.prototype.onBaseTextureLoaded = function(event)
|
PIXI.Texture.prototype.onBaseTextureLoaded = function()
|
||||||
{
|
{
|
||||||
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
|
* Destroys this texture
|
||||||
|
@ -98,8 +98,8 @@ PIXI.Texture.prototype.onBaseTextureLoaded = function(event)
|
||||||
*/
|
*/
|
||||||
PIXI.Texture.prototype.destroy = function(destroyBase)
|
PIXI.Texture.prototype.destroy = function(destroyBase)
|
||||||
{
|
{
|
||||||
if(destroyBase)this.baseTexture.destroy();
|
if(destroyBase) this.baseTexture.destroy();
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Specifies the rectangle region of the baseTexture
|
* Specifies the rectangle region of the baseTexture
|
||||||
|
@ -109,20 +109,20 @@ PIXI.Texture.prototype.destroy = function(destroyBase)
|
||||||
*/
|
*/
|
||||||
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
|
||||||
|
@ -134,18 +134,18 @@ PIXI.Texture.prototype.setFrame = function(frame)
|
||||||
* @param crossorigin {Boolean} Whether requests should be treated as crossorigin
|
* @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, scaleMode)
|
||||||
{
|
{
|
||||||
var texture = PIXI.TextureCache[imageUrl];
|
var texture = PIXI.TextureCache[imageUrl];
|
||||||
|
|
||||||
if(!texture)
|
if(!texture)
|
||||||
{
|
{
|
||||||
texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin));
|
texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin, scaleMode));
|
||||||
PIXI.TextureCache[imageUrl] = texture;
|
PIXI.TextureCache[imageUrl] = texture;
|
||||||
}
|
}
|
||||||
|
|
||||||
return texture;
|
return texture;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Helper function that returns a texture based on a frame id
|
* Helper function that returns a texture based on a frame id
|
||||||
|
@ -158,10 +158,10 @@ PIXI.Texture.fromImage = function(imageUrl, crossorigin)
|
||||||
*/
|
*/
|
||||||
PIXI.Texture.fromFrame = function(frameId)
|
PIXI.Texture.fromFrame = function(frameId)
|
||||||
{
|
{
|
||||||
var texture = PIXI.TextureCache[frameId];
|
var texture = PIXI.TextureCache[frameId];
|
||||||
if(!texture)throw new Error("The frameId '"+ frameId +"' does not exist in the texture cache " + this);
|
if(!texture) throw new Error('The frameId "' + frameId + '" does not exist in the texture cache ' + this);
|
||||||
return texture;
|
return texture;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Helper function that returns a texture based on a canvas element
|
* Helper function that returns a texture based on a canvas element
|
||||||
|
@ -172,11 +172,11 @@ PIXI.Texture.fromFrame = function(frameId)
|
||||||
* @param canvas {Canvas} The canvas element source of the texture
|
* @param canvas {Canvas} The canvas element source of the texture
|
||||||
* @return Texture
|
* @return Texture
|
||||||
*/
|
*/
|
||||||
PIXI.Texture.fromCanvas = function(canvas)
|
PIXI.Texture.fromCanvas = function(canvas, scaleMode)
|
||||||
{
|
{
|
||||||
var baseTexture = new PIXI.BaseTexture(canvas);
|
var baseTexture = new PIXI.BaseTexture(canvas, scaleMode);
|
||||||
return new PIXI.Texture(baseTexture);
|
return new PIXI.Texture(baseTexture);
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -189,8 +189,8 @@ PIXI.Texture.fromCanvas = function(canvas)
|
||||||
*/
|
*/
|
||||||
PIXI.Texture.addTextureToCache = function(texture, id)
|
PIXI.Texture.addTextureToCache = function(texture, id)
|
||||||
{
|
{
|
||||||
PIXI.TextureCache[id] = texture;
|
PIXI.TextureCache[id] = texture;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Remove a texture from the textureCache.
|
* Remove a texture from the textureCache.
|
||||||
|
@ -202,11 +202,12 @@ PIXI.Texture.addTextureToCache = function(texture, id)
|
||||||
*/
|
*/
|
||||||
PIXI.Texture.removeTextureFromCache = function(id)
|
PIXI.Texture.removeTextureFromCache = function(id)
|
||||||
{
|
{
|
||||||
var texture = PIXI.TextureCache[id]
|
var texture = PIXI.TextureCache[id];
|
||||||
PIXI.TextureCache[id] = null;
|
PIXI.TextureCache[id] = null;
|
||||||
return texture;
|
return texture;
|
||||||
}
|
};
|
||||||
|
|
||||||
// this is more for webGL.. it contains updated frames..
|
// this is more for webGL.. it contains updated frames..
|
||||||
PIXI.Texture.frameUpdates = [];
|
PIXI.Texture.frameUpdates = [];
|
||||||
|
|
||||||
|
PIXI.Texture.SCALE_MODE = PIXI.BaseTexture.SCALE_MODE;
|
||||||
|
|
|
@ -19,25 +19,29 @@
|
||||||
*/
|
*/
|
||||||
PIXI.autoDetectRenderer = function(width, height, view, transparent, antialias)
|
PIXI.autoDetectRenderer = function(width, height, view, transparent, antialias)
|
||||||
{
|
{
|
||||||
if(!width)width = 800;
|
if(!width)width = 800;
|
||||||
if(!height)height = 600;
|
if(!height)height = 600;
|
||||||
|
|
||||||
// BORROWED from Mr Doob (mrdoob.com)
|
// BORROWED from Mr Doob (mrdoob.com)
|
||||||
var webgl = ( function () { try { var canvas = document.createElement( 'canvas' ); return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ); } catch( e ) { return false; } } )();
|
var webgl = ( function () { try {
|
||||||
|
var canvas = document.createElement( 'canvas' );
|
||||||
|
return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) );
|
||||||
|
} catch( e ) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} )();
|
||||||
|
|
||||||
if(webgl)
|
if(webgl)
|
||||||
{
|
{
|
||||||
var ie = (navigator.userAgent.toLowerCase().indexOf('trident') != -1);
|
var ie = (navigator.userAgent.toLowerCase().indexOf('trident') !== -1);
|
||||||
webgl = !ie;
|
webgl = !ie;
|
||||||
}
|
}
|
||||||
|
|
||||||
//console.log(webgl);
|
//console.log(webgl);
|
||||||
if( webgl )
|
if( webgl )
|
||||||
{
|
{
|
||||||
return new PIXI.WebGLRenderer(width, height, view, transparent, antialias);
|
return new PIXI.WebGLRenderer(width, height, view, transparent, antialias);
|
||||||
}
|
}
|
||||||
|
|
||||||
return new PIXI.CanvasRenderer(width, height, view, transparent);
|
return new PIXI.CanvasRenderer(width, height, view, transparent);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -8,60 +8,60 @@
|
||||||
*
|
*
|
||||||
* @class EventTarget
|
* @class EventTarget
|
||||||
* @example
|
* @example
|
||||||
* function MyEmitter() {
|
* function MyEmitter() {
|
||||||
* PIXI.EventTarget.call(this); //mixes in event target stuff
|
* PIXI.EventTarget.call(this); //mixes in event target stuff
|
||||||
* }
|
* }
|
||||||
*
|
*
|
||||||
* var em = new MyEmitter();
|
* var em = new MyEmitter();
|
||||||
* em.emit({ type: 'eventName', data: 'some data' });
|
* em.emit({ type: 'eventName', data: 'some data' });
|
||||||
*/
|
*/
|
||||||
PIXI.EventTarget = function () {
|
PIXI.EventTarget = function () {
|
||||||
|
|
||||||
var listeners = {};
|
var listeners = {};
|
||||||
|
|
||||||
this.addEventListener = this.on = function ( type, listener ) {
|
this.addEventListener = this.on = function ( type, listener ) {
|
||||||
|
|
||||||
|
|
||||||
if ( listeners[ type ] === undefined ) {
|
if ( listeners[ type ] === undefined ) {
|
||||||
|
|
||||||
listeners[ type ] = [];
|
listeners[ type ] = [];
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if ( listeners[ type ].indexOf( listener ) === - 1 ) {
|
if ( listeners[ type ].indexOf( listener ) === - 1 ) {
|
||||||
|
|
||||||
listeners[ type ].push( listener );
|
listeners[ type ].push( listener );
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
this.dispatchEvent = this.emit = function ( event ) {
|
this.dispatchEvent = this.emit = function ( event ) {
|
||||||
|
|
||||||
if ( !listeners[ event.type ] || !listeners[ event.type ].length ) {
|
if ( !listeners[ event.type ] || !listeners[ event.type ].length ) {
|
||||||
|
|
||||||
return;
|
return;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
for(var i = 0, l = listeners[ event.type ].length; i < l; i++) {
|
for(var i = 0, l = listeners[ event.type ].length; i < l; i++) {
|
||||||
|
|
||||||
listeners[ event.type ][ i ]( event );
|
listeners[ event.type ][ i ]( event );
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
this.removeEventListener = this.off = function ( type, listener ) {
|
this.removeEventListener = this.off = function ( type, listener ) {
|
||||||
|
|
||||||
var index = listeners[ type ].indexOf( listener );
|
var index = listeners[ type ].indexOf( listener );
|
||||||
|
|
||||||
if ( index !== - 1 ) {
|
if ( index !== - 1 ) {
|
||||||
|
|
||||||
listeners[ type ].splice( index, 1 );
|
listeners[ type ].splice( index, 1 );
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
this.removeAllEventListeners = function( type ) {
|
this.removeAllEventListeners = function( type ) {
|
||||||
var a = listeners[type];
|
var a = listeners[type];
|
||||||
|
|
|
@ -1,34 +1,34 @@
|
||||||
/*
|
/*
|
||||||
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
|
Copyright (c) 2012 Ivan Kuckir
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person
|
Permission is hereby granted, free of charge, to any person
|
||||||
obtaining a copy of this software and associated documentation
|
obtaining a copy of this software and associated documentation
|
||||||
files (the "Software"), to deal in the Software without
|
files (the "Software"), to deal in the Software without
|
||||||
restriction, including without limitation the rights to use,
|
restriction, including without limitation the rights to use,
|
||||||
copy, modify, merge, publish, distribute, sublicense, and/or sell
|
copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
copies of the Software, and to permit persons to whom the
|
copies of the Software, and to permit persons to whom the
|
||||||
Software is furnished to do so, subject to the following
|
Software is furnished to do so, subject to the following
|
||||||
conditions:
|
conditions:
|
||||||
|
|
||||||
The above copyright notice and this permission notice shall be
|
The above copyright notice and this permission notice shall be
|
||||||
included in all copies or substantial portions of the Software.
|
included in all copies or substantial portions of the Software.
|
||||||
|
|
||||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||||
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||||
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||||
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||||
OTHER DEALINGS IN THE SOFTWARE.
|
OTHER DEALINGS IN THE SOFTWARE.
|
||||||
|
|
||||||
This is an amazing lib!
|
This is an amazing lib!
|
||||||
|
|
||||||
slightly modified by mat groves (matgroves.com);
|
slightly modified by mat groves (matgroves.com);
|
||||||
*/
|
*/
|
||||||
|
|
||||||
PIXI.PolyK = {};
|
PIXI.PolyK = {};
|
||||||
|
@ -42,69 +42,76 @@ PIXI.PolyK = {};
|
||||||
*/
|
*/
|
||||||
PIXI.PolyK.Triangulate = function(p)
|
PIXI.PolyK.Triangulate = function(p)
|
||||||
{
|
{
|
||||||
var sign = true;
|
var sign = true;
|
||||||
|
|
||||||
var n = p.length>>1;
|
var n = p.length >> 1;
|
||||||
if(n<3) return [];
|
if(n < 3) return [];
|
||||||
var tgs = [];
|
|
||||||
var avl = [];
|
|
||||||
for(var i=0; i<n; i++) avl.push(i);
|
|
||||||
|
|
||||||
var i = 0;
|
var tgs = [];
|
||||||
var al = n;
|
var avl = [];
|
||||||
while(al > 3)
|
for(var i = 0; i < n; i++) avl.push(i);
|
||||||
{
|
|
||||||
var i0 = avl[(i+0)%al];
|
|
||||||
var i1 = avl[(i+1)%al];
|
|
||||||
var i2 = avl[(i+2)%al];
|
|
||||||
|
|
||||||
var ax = p[2*i0], ay = p[2*i0+1];
|
i = 0;
|
||||||
var bx = p[2*i1], by = p[2*i1+1];
|
var al = n;
|
||||||
var cx = p[2*i2], cy = p[2*i2+1];
|
while(al > 3)
|
||||||
|
{
|
||||||
|
var i0 = avl[(i+0)%al];
|
||||||
|
var i1 = avl[(i+1)%al];
|
||||||
|
var i2 = avl[(i+2)%al];
|
||||||
|
|
||||||
var earFound = false;
|
var ax = p[2*i0], ay = p[2*i0+1];
|
||||||
if(PIXI.PolyK._convex(ax, ay, bx, by, cx, cy, sign))
|
var bx = p[2*i1], by = p[2*i1+1];
|
||||||
{
|
var cx = p[2*i2], cy = p[2*i2+1];
|
||||||
earFound = true;
|
|
||||||
for(var j=0; j<al; j++)
|
|
||||||
{
|
|
||||||
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;
|
var earFound = false;
|
||||||
al = n;
|
if(PIXI.PolyK._convex(ax, ay, bx, by, cx, cy, sign))
|
||||||
|
{
|
||||||
|
earFound = true;
|
||||||
|
for(var j = 0; j < al; j++)
|
||||||
|
{
|
||||||
|
var vi = avl[j];
|
||||||
|
if(vi === i0 || vi === i1 || vi === i2) continue;
|
||||||
|
|
||||||
sign = false;
|
if(PIXI.PolyK._PointInTriangle(p[2*vi], p[2*vi+1], ax, ay, bx, by, cx, cy)) {
|
||||||
}
|
earFound = false;
|
||||||
else
|
break;
|
||||||
{
|
}
|
||||||
console.log("PIXI Warning: shape too complex to fill")
|
}
|
||||||
return [];
|
}
|
||||||
}
|
|
||||||
}
|
if(earFound)
|
||||||
}
|
{
|
||||||
tgs.push(avl[0], avl[1], avl[2]);
|
tgs.push(i0, i1, i2);
|
||||||
return tgs;
|
avl.splice((i+1)%al, 1);
|
||||||
}
|
al--;
|
||||||
|
i = 0;
|
||||||
|
}
|
||||||
|
else if(i++ > 3*al)
|
||||||
|
{
|
||||||
|
// need to flip flip reverse it!
|
||||||
|
// reset!
|
||||||
|
if(sign)
|
||||||
|
{
|
||||||
|
tgs = [];
|
||||||
|
avl = [];
|
||||||
|
for(i = 0; i < n; i++) avl.push(i);
|
||||||
|
|
||||||
|
i = 0;
|
||||||
|
al = n;
|
||||||
|
|
||||||
|
sign = false;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
window.console.log("PIXI Warning: shape too complex to fill");
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tgs.push(avl[0], avl[1], avl[2]);
|
||||||
|
return tgs;
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Checks if a point is within a triangle
|
* Checks if a point is within a triangle
|
||||||
|
@ -115,26 +122,26 @@ PIXI.PolyK.Triangulate = function(p)
|
||||||
*/
|
*/
|
||||||
PIXI.PolyK._PointInTriangle = function(px, py, ax, ay, bx, by, cx, cy)
|
PIXI.PolyK._PointInTriangle = function(px, py, ax, ay, bx, by, cx, cy)
|
||||||
{
|
{
|
||||||
var v0x = cx-ax;
|
var v0x = cx-ax;
|
||||||
var v0y = cy-ay;
|
var v0y = cy-ay;
|
||||||
var v1x = bx-ax;
|
var v1x = bx-ax;
|
||||||
var v1y = by-ay;
|
var v1y = by-ay;
|
||||||
var v2x = px-ax;
|
var v2x = px-ax;
|
||||||
var v2y = py-ay;
|
var v2y = py-ay;
|
||||||
|
|
||||||
var dot00 = v0x*v0x+v0y*v0y;
|
var dot00 = v0x*v0x+v0y*v0y;
|
||||||
var dot01 = v0x*v1x+v0y*v1y;
|
var dot01 = v0x*v1x+v0y*v1y;
|
||||||
var dot02 = v0x*v2x+v0y*v2y;
|
var dot02 = v0x*v2x+v0y*v2y;
|
||||||
var dot11 = v1x*v1x+v1y*v1y;
|
var dot11 = v1x*v1x+v1y*v1y;
|
||||||
var dot12 = v1x*v2x+v1y*v2y;
|
var dot12 = v1x*v2x+v1y*v2y;
|
||||||
|
|
||||||
var invDenom = 1 / (dot00 * dot11 - dot01 * dot01);
|
var invDenom = 1 / (dot00 * dot11 - dot01 * dot01);
|
||||||
var u = (dot11 * dot02 - dot01 * dot12) * invDenom;
|
var u = (dot11 * dot02 - dot01 * dot12) * invDenom;
|
||||||
var v = (dot00 * dot12 - dot01 * dot02) * invDenom;
|
var v = (dot00 * dot12 - dot01 * dot02) * invDenom;
|
||||||
|
|
||||||
// Check if point is in triangle
|
// Check if point is in triangle
|
||||||
return (u >= 0) && (v >= 0) && (u + v < 1);
|
return (u >= 0) && (v >= 0) && (u + v < 1);
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Checks if a shape is convex
|
* Checks if a shape is convex
|
||||||
|
@ -145,5 +152,5 @@ PIXI.PolyK._PointInTriangle = function(px, py, ax, ay, bx, by, cx, cy)
|
||||||
*/
|
*/
|
||||||
PIXI.PolyK._convex = function(ax, ay, bx, by, cx, cy, sign)
|
PIXI.PolyK._convex = function(ax, ay, bx, by, cx, cy, sign)
|
||||||
{
|
{
|
||||||
return ((ay-by)*(cx-bx) + (bx-ax)*(cy-by) >= 0) == sign;
|
return ((ay-by)*(cx-bx) + (bx-ax)*(cy-by) >= 0) === sign;
|
||||||
}
|
};
|
||||||
|
|
|
@ -18,13 +18,13 @@
|
||||||
var lastTime = 0;
|
var lastTime = 0;
|
||||||
var vendors = ['ms', 'moz', 'webkit', 'o'];
|
var vendors = ['ms', 'moz', 'webkit', 'o'];
|
||||||
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
|
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
|
||||||
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
|
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
|
||||||
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
|
||||||
|| window[vendors[x]+'CancelRequestAnimationFrame'];
|
window[vendors[x] + 'CancelRequestAnimationFrame'];
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!window.requestAnimationFrame)
|
if (!window.requestAnimationFrame) {
|
||||||
window.requestAnimationFrame = function(callback, element) {
|
window.requestAnimationFrame = function(callback) {
|
||||||
var currTime = new Date().getTime();
|
var currTime = new Date().getTime();
|
||||||
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
|
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
|
||||||
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
|
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
|
||||||
|
@ -32,50 +32,52 @@ if (!window.requestAnimationFrame)
|
||||||
lastTime = currTime + timeToCall;
|
lastTime = currTime + timeToCall;
|
||||||
return id;
|
return id;
|
||||||
};
|
};
|
||||||
|
}
|
||||||
|
|
||||||
if (!window.cancelAnimationFrame)
|
if (!window.cancelAnimationFrame) {
|
||||||
window.cancelAnimationFrame = function(id) {
|
window.cancelAnimationFrame = function(id) {
|
||||||
clearTimeout(id);
|
clearTimeout(id);
|
||||||
};
|
};
|
||||||
|
}
|
||||||
|
|
||||||
window.requestAnimFrame = window.requestAnimationFrame;
|
window.requestAnimFrame = window.requestAnimationFrame;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Converts a hex color number to an [R, G, B] array
|
* Converts a hex color number to an [R, G, B] array
|
||||||
*
|
*
|
||||||
* @method HEXtoRGB
|
* @method hex2rgb
|
||||||
* @param hex {Number}
|
* @param hex {Number}
|
||||||
*/
|
*/
|
||||||
function HEXtoRGB(hex) {
|
PIXI.hex2rgb = function hex2rgb(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];
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A polyfill for Function.prototype.bind
|
* A polyfill for Function.prototype.bind
|
||||||
*
|
*
|
||||||
* @method bind
|
* @method bind
|
||||||
*/
|
*/
|
||||||
if (typeof Function.prototype.bind != 'function') {
|
if (typeof Function.prototype.bind !== 'function') {
|
||||||
Function.prototype.bind = (function () {
|
Function.prototype.bind = (function () {
|
||||||
var slice = Array.prototype.slice;
|
var slice = Array.prototype.slice;
|
||||||
return function (thisArg) {
|
return function (thisArg) {
|
||||||
var target = this, boundArgs = slice.call(arguments, 1);
|
var target = this, boundArgs = slice.call(arguments, 1);
|
||||||
|
|
||||||
if (typeof target != 'function') throw new TypeError();
|
if (typeof target !== 'function') throw new TypeError();
|
||||||
|
|
||||||
function bound() {
|
function bound() {
|
||||||
var args = boundArgs.concat(slice.call(arguments));
|
var args = boundArgs.concat(slice.call(arguments));
|
||||||
target.apply(this instanceof bound ? this : thisArg, args);
|
target.apply(this instanceof bound ? this : thisArg, args);
|
||||||
}
|
}
|
||||||
|
|
||||||
bound.prototype = (function F(proto) {
|
bound.prototype = (function F(proto) {
|
||||||
proto && (F.prototype = proto);
|
if (proto) F.prototype = proto;
|
||||||
if (!(this instanceof F)) return new F;
|
if (!(this instanceof F)) return new F();
|
||||||
})(target.prototype);
|
})(target.prototype);
|
||||||
|
|
||||||
return bound;
|
return bound;
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -84,57 +86,57 @@ if (typeof Function.prototype.bind != 'function') {
|
||||||
* @class AjaxRequest
|
* @class AjaxRequest
|
||||||
* @constructor
|
* @constructor
|
||||||
*/
|
*/
|
||||||
var AjaxRequest = PIXI.AjaxRequest = function()
|
PIXI.AjaxRequest = function AjaxRequest()
|
||||||
{
|
{
|
||||||
var activexmodes = ["Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.3.0", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
|
var activexmodes = ['Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.3.0', 'Microsoft.XMLHTTP']; //activeX versions to check for in IE
|
||||||
|
|
||||||
if (window.ActiveXObject)
|
if (window.ActiveXObject)
|
||||||
{ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
|
{ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
|
||||||
for (var i=0; i<activexmodes.length; i++)
|
for (var i=0; i<activexmodes.length; i++)
|
||||||
{
|
{
|
||||||
try{
|
try{
|
||||||
return new ActiveXObject(activexmodes[i])
|
return new window.ActiveXObject(activexmodes[i]);
|
||||||
}
|
}
|
||||||
catch(e){
|
catch(e) {
|
||||||
//suppress error
|
//suppress error
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
|
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
|
||||||
{
|
{
|
||||||
return new XMLHttpRequest()
|
return new window.XMLHttpRequest();
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* DEBUGGING ONLY
|
* DEBUGGING ONLY
|
||||||
*/
|
*/
|
||||||
PIXI.runList = function(item)
|
PIXI.runList = function(item)
|
||||||
{
|
{
|
||||||
console.log(">>>>>>>>>")
|
window.console.log('>>>>>>>>>');
|
||||||
console.log("_")
|
window.console.log('_');
|
||||||
var safe = 0;
|
var safe = 0;
|
||||||
var tmp = item.first;
|
var tmp = item.first;
|
||||||
console.log(tmp);
|
window.console.log(tmp);
|
||||||
|
|
||||||
while(tmp._iNext)
|
while(tmp._iNext)
|
||||||
{
|
{
|
||||||
safe++;
|
safe++;
|
||||||
tmp = tmp._iNext;
|
tmp = tmp._iNext;
|
||||||
console.log(tmp);
|
window.console.log(tmp);
|
||||||
// console.log(tmp);
|
// console.log(tmp);
|
||||||
|
|
||||||
if(safe > 100)
|
if(safe > 100)
|
||||||
{
|
{
|
||||||
console.log("BREAK")
|
window.console.log('BREAK');
|
||||||
break
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -197,6 +197,7 @@ Phaser.Tilemap.prototype = {
|
||||||
* Sprite is created. You could also give it a value like: body.velocity.x: 100 to set it moving automatically.
|
* Sprite is created. You could also give it a value like: body.velocity.x: 100 to set it moving automatically.
|
||||||
*
|
*
|
||||||
* @method Phaser.Tileset#createFromObjects
|
* @method Phaser.Tileset#createFromObjects
|
||||||
|
* @param {string} name - The name of the Object Group to create Sprites from.
|
||||||
* @param {number} gid - The layer array index value, or if a string is given the layer name, within the map data that this TilemapLayer represents.
|
* @param {number} gid - The layer array index value, or if a string is given the layer name, within the map data that this TilemapLayer represents.
|
||||||
* @param {string} key - The Game.cache key of the image that this Sprite will use.
|
* @param {string} key - The Game.cache key of the image that this Sprite will use.
|
||||||
* @param {number|string} [frame] - If the Sprite image contains multiple frames you can specify which one to use here.
|
* @param {number|string} [frame] - If the Sprite image contains multiple frames you can specify which one to use here.
|
||||||
|
@ -204,28 +205,34 @@ Phaser.Tilemap.prototype = {
|
||||||
* @param {boolean} [autoCull=true] - The default autoCull state of the Sprite. Sprites that are autoCulled are culled from the camera if out of its range.
|
* @param {boolean} [autoCull=true] - The default autoCull state of the Sprite. Sprites that are autoCulled are culled from the camera if out of its range.
|
||||||
* @param {Phaser.Group} [group] - Optional Group to add the Sprite to. If not specified it will be added to the World group.
|
* @param {Phaser.Group} [group] - Optional Group to add the Sprite to. If not specified it will be added to the World group.
|
||||||
*/
|
*/
|
||||||
createFromObjects: function (gid, key, frame, exists, autoCull, group) {
|
createFromObjects: function (name, gid, key, frame, exists, autoCull, group) {
|
||||||
|
|
||||||
if (typeof exists === 'undefined') { exists = true; }
|
if (typeof exists === 'undefined') { exists = true; }
|
||||||
if (typeof autoCull === 'undefined') { autoCull = true; }
|
if (typeof autoCull === 'undefined') { autoCull = true; }
|
||||||
if (typeof group === 'undefined') { group = this.game.world; }
|
if (typeof group === 'undefined') { group = this.game.world; }
|
||||||
|
|
||||||
|
if (!this.objects[name])
|
||||||
|
{
|
||||||
|
console.warn('Tilemap.createFromObjects: Invalid objectgroup name given: ' + name);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
var sprite;
|
var sprite;
|
||||||
|
|
||||||
for (var i = 0; i < this.objects.length; i++)
|
for (var i = 0, len = this.objects[name].length; i < len; i++)
|
||||||
{
|
{
|
||||||
if (this.objects[i].gid === gid)
|
if (this.objects[name][i].gid === gid)
|
||||||
{
|
{
|
||||||
sprite = group.create(this.objects[i].x, this.objects[i].y, key, frame, exists);
|
sprite = group.create(this.objects[name][i].x, this.objects[name][i].y, key, frame, exists);
|
||||||
|
|
||||||
sprite.anchor.setTo(0, 1);
|
sprite.anchor.setTo(0, 1);
|
||||||
sprite.name = this.objects[i].name;
|
sprite.name = this.objects[name][i].name;
|
||||||
sprite.visible = this.objects[i].visible;
|
sprite.visible = this.objects[name][i].visible;
|
||||||
sprite.autoCull = autoCull;
|
sprite.autoCull = autoCull;
|
||||||
|
|
||||||
for (property in this.objects[i].properties)
|
for (property in this.objects[name][i].properties)
|
||||||
{
|
{
|
||||||
group.set(sprite, property, this.objects[i].properties[property], false, false, 0);
|
group.set(sprite, property, this.objects[name][i].properties[property], false, false, 0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -265,7 +265,7 @@ Phaser.TilemapParser = {
|
||||||
map.images = images;
|
map.images = images;
|
||||||
|
|
||||||
// Objects
|
// Objects
|
||||||
var objects = [];
|
var objects = {};
|
||||||
|
|
||||||
for (var i = 0; i < json.layers.length; i++)
|
for (var i = 0; i < json.layers.length; i++)
|
||||||
{
|
{
|
||||||
|
@ -274,7 +274,9 @@ Phaser.TilemapParser = {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
for (var v = 0; v < json.layers[i].objects.length; v++)
|
objects[json.layers[i].name] = [];
|
||||||
|
|
||||||
|
for (var v = 0, len = json.layers[i].objects.length; v < len; v++)
|
||||||
{
|
{
|
||||||
// For now we'll just support object tiles
|
// For now we'll just support object tiles
|
||||||
if (json.layers[i].objects[v].gid)
|
if (json.layers[i].objects[v].gid)
|
||||||
|
@ -290,7 +292,7 @@ Phaser.TilemapParser = {
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
objects.push(object);
|
objects[json.layers[i].name].push(object);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -244,6 +244,16 @@ 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];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Converts a hex color number to an [R, G, B] array
|
||||||
|
*
|
||||||
|
* @method hex2rgb
|
||||||
|
* @param hex {Number}
|
||||||
|
*/
|
||||||
|
PIXI.hex2rgb = function hex2rgb(hex) {
|
||||||
|
return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255];
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A polyfill for Function.prototype.bind
|
* A polyfill for Function.prototype.bind
|
||||||
*/
|
*/
|
||||||
|
|