!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.PIXI=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
(function (process){
/*!
* async
* https://github.com/caolan/async
*
* Copyright 2010-2014 Caolan McMahon
* Released under the MIT license
*/
/*jshint onevar: false, indent:4 */
/*global setImmediate: false, setTimeout: false, console: false */
(function () {
var async = {};
// global on the server, window in the browser
var root, previous_async;
root = this;
if (root != null) {
previous_async = root.async;
}
async.noConflict = function () {
root.async = previous_async;
return async;
};
function only_once(fn) {
var called = false;
return function() {
if (called) throw new Error("Callback was already called.");
called = true;
fn.apply(root, arguments);
}
}
//// cross-browser compatiblity functions ////
var _toString = Object.prototype.toString;
var _isArray = Array.isArray || function (obj) {
return _toString.call(obj) === '[object Array]';
};
var _each = function (arr, iterator) {
if (arr.forEach) {
return arr.forEach(iterator);
}
for (var i = 0; i < arr.length; i += 1) {
iterator(arr[i], i, arr);
}
};
var _map = function (arr, iterator) {
if (arr.map) {
return arr.map(iterator);
}
var results = [];
_each(arr, function (x, i, a) {
results.push(iterator(x, i, a));
});
return results;
};
var _reduce = function (arr, iterator, memo) {
if (arr.reduce) {
return arr.reduce(iterator, memo);
}
_each(arr, function (x, i, a) {
memo = iterator(memo, x, i, a);
});
return memo;
};
var _keys = function (obj) {
if (Object.keys) {
return Object.keys(obj);
}
var keys = [];
for (var k in obj) {
if (obj.hasOwnProperty(k)) {
keys.push(k);
}
}
return keys;
};
//// exported async module functions ////
//// nextTick implementation with browser-compatible fallback ////
if (typeof process === 'undefined' || !(process.nextTick)) {
if (typeof setImmediate === 'function') {
async.nextTick = function (fn) {
// not a direct alias for IE10 compatibility
setImmediate(fn);
};
async.setImmediate = async.nextTick;
}
else {
async.nextTick = function (fn) {
setTimeout(fn, 0);
};
async.setImmediate = async.nextTick;
}
}
else {
async.nextTick = process.nextTick;
if (typeof setImmediate !== 'undefined') {
async.setImmediate = function (fn) {
// not a direct alias for IE10 compatibility
setImmediate(fn);
};
}
else {
async.setImmediate = async.nextTick;
}
}
async.each = function (arr, iterator, callback) {
callback = callback || function () {};
if (!arr.length) {
return callback();
}
var completed = 0;
_each(arr, function (x) {
iterator(x, only_once(done) );
});
function done(err) {
if (err) {
callback(err);
callback = function () {};
}
else {
completed += 1;
if (completed >= arr.length) {
callback();
}
}
}
};
async.forEach = async.each;
async.eachSeries = function (arr, iterator, callback) {
callback = callback || function () {};
if (!arr.length) {
return callback();
}
var completed = 0;
var iterate = function () {
iterator(arr[completed], function (err) {
if (err) {
callback(err);
callback = function () {};
}
else {
completed += 1;
if (completed >= arr.length) {
callback();
}
else {
iterate();
}
}
});
};
iterate();
};
async.forEachSeries = async.eachSeries;
async.eachLimit = function (arr, limit, iterator, callback) {
var fn = _eachLimit(limit);
fn.apply(null, [arr, iterator, callback]);
};
async.forEachLimit = async.eachLimit;
var _eachLimit = function (limit) {
return function (arr, iterator, callback) {
callback = callback || function () {};
if (!arr.length || limit <= 0) {
return callback();
}
var completed = 0;
var started = 0;
var running = 0;
(function replenish () {
if (completed >= arr.length) {
return callback();
}
while (running < limit && started < arr.length) {
started += 1;
running += 1;
iterator(arr[started - 1], function (err) {
if (err) {
callback(err);
callback = function () {};
}
else {
completed += 1;
running -= 1;
if (completed >= arr.length) {
callback();
}
else {
replenish();
}
}
});
}
})();
};
};
var doParallel = function (fn) {
return function () {
var args = Array.prototype.slice.call(arguments);
return fn.apply(null, [async.each].concat(args));
};
};
var doParallelLimit = function(limit, fn) {
return function () {
var args = Array.prototype.slice.call(arguments);
return fn.apply(null, [_eachLimit(limit)].concat(args));
};
};
var doSeries = function (fn) {
return function () {
var args = Array.prototype.slice.call(arguments);
return fn.apply(null, [async.eachSeries].concat(args));
};
};
var _asyncMap = function (eachfn, arr, iterator, callback) {
arr = _map(arr, function (x, i) {
return {index: i, value: x};
});
if (!callback) {
eachfn(arr, function (x, callback) {
iterator(x.value, function (err) {
callback(err);
});
});
} else {
var results = [];
eachfn(arr, function (x, callback) {
iterator(x.value, function (err, v) {
results[x.index] = v;
callback(err);
});
}, function (err) {
callback(err, results);
});
}
};
async.map = doParallel(_asyncMap);
async.mapSeries = doSeries(_asyncMap);
async.mapLimit = function (arr, limit, iterator, callback) {
return _mapLimit(limit)(arr, iterator, callback);
};
var _mapLimit = function(limit) {
return doParallelLimit(limit, _asyncMap);
};
// reduce only has a series version, as doing reduce in parallel won't
// work in many situations.
async.reduce = function (arr, memo, iterator, callback) {
async.eachSeries(arr, function (x, callback) {
iterator(memo, x, function (err, v) {
memo = v;
callback(err);
});
}, function (err) {
callback(err, memo);
});
};
// inject alias
async.inject = async.reduce;
// foldl alias
async.foldl = async.reduce;
async.reduceRight = function (arr, memo, iterator, callback) {
var reversed = _map(arr, function (x) {
return x;
}).reverse();
async.reduce(reversed, memo, iterator, callback);
};
// foldr alias
async.foldr = async.reduceRight;
var _filter = function (eachfn, arr, iterator, callback) {
var results = [];
arr = _map(arr, function (x, i) {
return {index: i, value: x};
});
eachfn(arr, function (x, callback) {
iterator(x.value, function (v) {
if (v) {
results.push(x);
}
callback();
});
}, function (err) {
callback(_map(results.sort(function (a, b) {
return a.index - b.index;
}), function (x) {
return x.value;
}));
});
};
async.filter = doParallel(_filter);
async.filterSeries = doSeries(_filter);
// select alias
async.select = async.filter;
async.selectSeries = async.filterSeries;
var _reject = function (eachfn, arr, iterator, callback) {
var results = [];
arr = _map(arr, function (x, i) {
return {index: i, value: x};
});
eachfn(arr, function (x, callback) {
iterator(x.value, function (v) {
if (!v) {
results.push(x);
}
callback();
});
}, function (err) {
callback(_map(results.sort(function (a, b) {
return a.index - b.index;
}), function (x) {
return x.value;
}));
});
};
async.reject = doParallel(_reject);
async.rejectSeries = doSeries(_reject);
var _detect = function (eachfn, arr, iterator, main_callback) {
eachfn(arr, function (x, callback) {
iterator(x, function (result) {
if (result) {
main_callback(x);
main_callback = function () {};
}
else {
callback();
}
});
}, function (err) {
main_callback();
});
};
async.detect = doParallel(_detect);
async.detectSeries = doSeries(_detect);
async.some = function (arr, iterator, main_callback) {
async.each(arr, function (x, callback) {
iterator(x, function (v) {
if (v) {
main_callback(true);
main_callback = function () {};
}
callback();
});
}, function (err) {
main_callback(false);
});
};
// any alias
async.any = async.some;
async.every = function (arr, iterator, main_callback) {
async.each(arr, function (x, callback) {
iterator(x, function (v) {
if (!v) {
main_callback(false);
main_callback = function () {};
}
callback();
});
}, function (err) {
main_callback(true);
});
};
// all alias
async.all = async.every;
async.sortBy = function (arr, iterator, callback) {
async.map(arr, function (x, callback) {
iterator(x, function (err, criteria) {
if (err) {
callback(err);
}
else {
callback(null, {value: x, criteria: criteria});
}
});
}, function (err, results) {
if (err) {
return callback(err);
}
else {
var fn = function (left, right) {
var a = left.criteria, b = right.criteria;
return a < b ? -1 : a > b ? 1 : 0;
};
callback(null, _map(results.sort(fn), function (x) {
return x.value;
}));
}
});
};
async.auto = function (tasks, callback) {
callback = callback || function () {};
var keys = _keys(tasks);
var remainingTasks = keys.length
if (!remainingTasks) {
return callback();
}
var results = {};
var listeners = [];
var addListener = function (fn) {
listeners.unshift(fn);
};
var removeListener = function (fn) {
for (var i = 0; i < listeners.length; i += 1) {
if (listeners[i] === fn) {
listeners.splice(i, 1);
return;
}
}
};
var taskComplete = function () {
remainingTasks--
_each(listeners.slice(0), function (fn) {
fn();
});
};
addListener(function () {
if (!remainingTasks) {
var theCallback = callback;
// prevent final callback from calling itself if it errors
callback = function () {};
theCallback(null, results);
}
});
_each(keys, function (k) {
var task = _isArray(tasks[k]) ? tasks[k]: [tasks[k]];
var taskCallback = function (err) {
var args = Array.prototype.slice.call(arguments, 1);
if (args.length <= 1) {
args = args[0];
}
if (err) {
var safeResults = {};
_each(_keys(results), function(rkey) {
safeResults[rkey] = results[rkey];
});
safeResults[k] = args;
callback(err, safeResults);
// stop subsequent errors hitting callback multiple times
callback = function () {};
}
else {
results[k] = args;
async.setImmediate(taskComplete);
}
};
var requires = task.slice(0, Math.abs(task.length - 1)) || [];
var ready = function () {
return _reduce(requires, function (a, x) {
return (a && results.hasOwnProperty(x));
}, true) && !results.hasOwnProperty(k);
};
if (ready()) {
task[task.length - 1](taskCallback, results);
}
else {
var listener = function () {
if (ready()) {
removeListener(listener);
task[task.length - 1](taskCallback, results);
}
};
addListener(listener);
}
});
};
async.retry = function(times, task, callback) {
var DEFAULT_TIMES = 5;
var attempts = [];
// Use defaults if times not passed
if (typeof times === 'function') {
callback = task;
task = times;
times = DEFAULT_TIMES;
}
// Make sure times is a number
times = parseInt(times, 10) || DEFAULT_TIMES;
var wrappedTask = function(wrappedCallback, wrappedResults) {
var retryAttempt = function(task, finalAttempt) {
return function(seriesCallback) {
task(function(err, result){
seriesCallback(!err || finalAttempt, {err: err, result: result});
}, wrappedResults);
};
};
while (times) {
attempts.push(retryAttempt(task, !(times-=1)));
}
async.series(attempts, function(done, data){
data = data[data.length - 1];
(wrappedCallback || callback)(data.err, data.result);
});
}
// If a callback is passed, run this as a controll flow
return callback ? wrappedTask() : wrappedTask
};
async.waterfall = function (tasks, callback) {
callback = callback || function () {};
if (!_isArray(tasks)) {
var err = new Error('First argument to waterfall must be an array of functions');
return callback(err);
}
if (!tasks.length) {
return callback();
}
var wrapIterator = function (iterator) {
return function (err) {
if (err) {
callback.apply(null, arguments);
callback = function () {};
}
else {
var args = Array.prototype.slice.call(arguments, 1);
var next = iterator.next();
if (next) {
args.push(wrapIterator(next));
}
else {
args.push(callback);
}
async.setImmediate(function () {
iterator.apply(null, args);
});
}
};
};
wrapIterator(async.iterator(tasks))();
};
var _parallel = function(eachfn, tasks, callback) {
callback = callback || function () {};
if (_isArray(tasks)) {
eachfn.map(tasks, function (fn, callback) {
if (fn) {
fn(function (err) {
var args = Array.prototype.slice.call(arguments, 1);
if (args.length <= 1) {
args = args[0];
}
callback.call(null, err, args);
});
}
}, callback);
}
else {
var results = {};
eachfn.each(_keys(tasks), function (k, callback) {
tasks[k](function (err) {
var args = Array.prototype.slice.call(arguments, 1);
if (args.length <= 1) {
args = args[0];
}
results[k] = args;
callback(err);
});
}, function (err) {
callback(err, results);
});
}
};
async.parallel = function (tasks, callback) {
_parallel({ map: async.map, each: async.each }, tasks, callback);
};
async.parallelLimit = function(tasks, limit, callback) {
_parallel({ map: _mapLimit(limit), each: _eachLimit(limit) }, tasks, callback);
};
async.series = function (tasks, callback) {
callback = callback || function () {};
if (_isArray(tasks)) {
async.mapSeries(tasks, function (fn, callback) {
if (fn) {
fn(function (err) {
var args = Array.prototype.slice.call(arguments, 1);
if (args.length <= 1) {
args = args[0];
}
callback.call(null, err, args);
});
}
}, callback);
}
else {
var results = {};
async.eachSeries(_keys(tasks), function (k, callback) {
tasks[k](function (err) {
var args = Array.prototype.slice.call(arguments, 1);
if (args.length <= 1) {
args = args[0];
}
results[k] = args;
callback(err);
});
}, function (err) {
callback(err, results);
});
}
};
async.iterator = function (tasks) {
var makeCallback = function (index) {
var fn = function () {
if (tasks.length) {
tasks[index].apply(null, arguments);
}
return fn.next();
};
fn.next = function () {
return (index < tasks.length - 1) ? makeCallback(index + 1): null;
};
return fn;
};
return makeCallback(0);
};
async.apply = function (fn) {
var args = Array.prototype.slice.call(arguments, 1);
return function () {
return fn.apply(
null, args.concat(Array.prototype.slice.call(arguments))
);
};
};
var _concat = function (eachfn, arr, fn, callback) {
var r = [];
eachfn(arr, function (x, cb) {
fn(x, function (err, y) {
r = r.concat(y || []);
cb(err);
});
}, function (err) {
callback(err, r);
});
};
async.concat = doParallel(_concat);
async.concatSeries = doSeries(_concat);
async.whilst = function (test, iterator, callback) {
if (test()) {
iterator(function (err) {
if (err) {
return callback(err);
}
async.whilst(test, iterator, callback);
});
}
else {
callback();
}
};
async.doWhilst = function (iterator, test, callback) {
iterator(function (err) {
if (err) {
return callback(err);
}
var args = Array.prototype.slice.call(arguments, 1);
if (test.apply(null, args)) {
async.doWhilst(iterator, test, callback);
}
else {
callback();
}
});
};
async.until = function (test, iterator, callback) {
if (!test()) {
iterator(function (err) {
if (err) {
return callback(err);
}
async.until(test, iterator, callback);
});
}
else {
callback();
}
};
async.doUntil = function (iterator, test, callback) {
iterator(function (err) {
if (err) {
return callback(err);
}
var args = Array.prototype.slice.call(arguments, 1);
if (!test.apply(null, args)) {
async.doUntil(iterator, test, callback);
}
else {
callback();
}
});
};
async.queue = function (worker, concurrency) {
if (concurrency === undefined) {
concurrency = 1;
}
function _insert(q, data, pos, callback) {
if (!q.started){
q.started = true;
}
if (!_isArray(data)) {
data = [data];
}
if(data.length == 0) {
// call drain immediately if there are no tasks
return async.setImmediate(function() {
if (q.drain) {
q.drain();
}
});
}
_each(data, function(task) {
var item = {
data: task,
callback: typeof callback === 'function' ? callback : null
};
if (pos) {
q.tasks.unshift(item);
} else {
q.tasks.push(item);
}
if (q.saturated && q.tasks.length === q.concurrency) {
q.saturated();
}
async.setImmediate(q.process);
});
}
var workers = 0;
var q = {
tasks: [],
concurrency: concurrency,
saturated: null,
empty: null,
drain: null,
started: false,
paused: false,
push: function (data, callback) {
_insert(q, data, false, callback);
},
kill: function () {
q.drain = null;
q.tasks = [];
},
unshift: function (data, callback) {
_insert(q, data, true, callback);
},
process: function () {
if (!q.paused && workers < q.concurrency && q.tasks.length) {
var task = q.tasks.shift();
if (q.empty && q.tasks.length === 0) {
q.empty();
}
workers += 1;
var next = function () {
workers -= 1;
if (task.callback) {
task.callback.apply(task, arguments);
}
if (q.drain && q.tasks.length + workers === 0) {
q.drain();
}
q.process();
};
var cb = only_once(next);
worker(task.data, cb);
}
},
length: function () {
return q.tasks.length;
},
running: function () {
return workers;
},
idle: function() {
return q.tasks.length + workers === 0;
},
pause: function () {
if (q.paused === true) { return; }
q.paused = true;
q.process();
},
resume: function () {
if (q.paused === false) { return; }
q.paused = false;
q.process();
}
};
return q;
};
async.priorityQueue = function (worker, concurrency) {
function _compareTasks(a, b){
return a.priority - b.priority;
};
function _binarySearch(sequence, item, compare) {
var beg = -1,
end = sequence.length - 1;
while (beg < end) {
var mid = beg + ((end - beg + 1) >>> 1);
if (compare(item, sequence[mid]) >= 0) {
beg = mid;
} else {
end = mid - 1;
}
}
return beg;
}
function _insert(q, data, priority, callback) {
if (!q.started){
q.started = true;
}
if (!_isArray(data)) {
data = [data];
}
if(data.length == 0) {
// call drain immediately if there are no tasks
return async.setImmediate(function() {
if (q.drain) {
q.drain();
}
});
}
_each(data, function(task) {
var item = {
data: task,
priority: priority,
callback: typeof callback === 'function' ? callback : null
};
q.tasks.splice(_binarySearch(q.tasks, item, _compareTasks) + 1, 0, item);
if (q.saturated && q.tasks.length === q.concurrency) {
q.saturated();
}
async.setImmediate(q.process);
});
}
// Start with a normal queue
var q = async.queue(worker, concurrency);
// Override push to accept second parameter representing priority
q.push = function (data, priority, callback) {
_insert(q, data, priority, callback);
};
// Remove unshift function
delete q.unshift;
return q;
};
async.cargo = function (worker, payload) {
var working = false,
tasks = [];
var cargo = {
tasks: tasks,
payload: payload,
saturated: null,
empty: null,
drain: null,
drained: true,
push: function (data, callback) {
if (!_isArray(data)) {
data = [data];
}
_each(data, function(task) {
tasks.push({
data: task,
callback: typeof callback === 'function' ? callback : null
});
cargo.drained = false;
if (cargo.saturated && tasks.length === payload) {
cargo.saturated();
}
});
async.setImmediate(cargo.process);
},
process: function process() {
if (working) return;
if (tasks.length === 0) {
if(cargo.drain && !cargo.drained) cargo.drain();
cargo.drained = true;
return;
}
var ts = typeof payload === 'number'
? tasks.splice(0, payload)
: tasks.splice(0, tasks.length);
var ds = _map(ts, function (task) {
return task.data;
});
if(cargo.empty) cargo.empty();
working = true;
worker(ds, function () {
working = false;
var args = arguments;
_each(ts, function (data) {
if (data.callback) {
data.callback.apply(null, args);
}
});
process();
});
},
length: function () {
return tasks.length;
},
running: function () {
return working;
}
};
return cargo;
};
var _console_fn = function (name) {
return function (fn) {
var args = Array.prototype.slice.call(arguments, 1);
fn.apply(null, args.concat([function (err) {
var args = Array.prototype.slice.call(arguments, 1);
if (typeof console !== 'undefined') {
if (err) {
if (console.error) {
console.error(err);
}
}
else if (console[name]) {
_each(args, function (x) {
console[name](x);
});
}
}
}]));
};
};
async.log = _console_fn('log');
async.dir = _console_fn('dir');
/*async.info = _console_fn('info');
async.warn = _console_fn('warn');
async.error = _console_fn('error');*/
async.memoize = function (fn, hasher) {
var memo = {};
var queues = {};
hasher = hasher || function (x) {
return x;
};
var memoized = function () {
var args = Array.prototype.slice.call(arguments);
var callback = args.pop();
var key = hasher.apply(null, args);
if (key in memo) {
async.nextTick(function () {
callback.apply(null, memo[key]);
});
}
else if (key in queues) {
queues[key].push(callback);
}
else {
queues[key] = [callback];
fn.apply(null, args.concat([function () {
memo[key] = arguments;
var q = queues[key];
delete queues[key];
for (var i = 0, l = q.length; i < l; i++) {
q[i].apply(null, arguments);
}
}]));
}
};
memoized.memo = memo;
memoized.unmemoized = fn;
return memoized;
};
async.unmemoize = function (fn) {
return function () {
return (fn.unmemoized || fn).apply(null, arguments);
};
};
async.times = function (count, iterator, callback) {
var counter = [];
for (var i = 0; i < count; i++) {
counter.push(i);
}
return async.map(counter, iterator, callback);
};
async.timesSeries = function (count, iterator, callback) {
var counter = [];
for (var i = 0; i < count; i++) {
counter.push(i);
}
return async.mapSeries(counter, iterator, callback);
};
async.seq = function (/* functions... */) {
var fns = arguments;
return function () {
var that = this;
var args = Array.prototype.slice.call(arguments);
var callback = args.pop();
async.reduce(fns, args, function (newargs, fn, cb) {
fn.apply(that, newargs.concat([function () {
var err = arguments[0];
var nextargs = Array.prototype.slice.call(arguments, 1);
cb(err, nextargs);
}]))
},
function (err, results) {
callback.apply(that, [err].concat(results));
});
};
};
async.compose = function (/* functions... */) {
return async.seq.apply(null, Array.prototype.reverse.call(arguments));
};
var _applyEach = function (eachfn, fns /*args...*/) {
var go = function () {
var that = this;
var args = Array.prototype.slice.call(arguments);
var callback = args.pop();
return eachfn(fns, function (fn, cb) {
fn.apply(that, args.concat([cb]));
},
callback);
};
if (arguments.length > 2) {
var args = Array.prototype.slice.call(arguments, 2);
return go.apply(this, args);
}
else {
return go;
}
};
async.applyEach = doParallel(_applyEach);
async.applyEachSeries = doSeries(_applyEach);
async.forever = function (fn, callback) {
function next(err) {
if (err) {
if (callback) {
return callback(err);
}
throw err;
}
fn(next);
}
next();
};
// Node.js
if (typeof module !== 'undefined' && module.exports) {
module.exports = async;
}
// AMD / RequireJS
else if (typeof define !== 'undefined' && define.amd) {
define([], function () {
return async;
});
}
// included directly via <script> tag
else {
root.async = async;
}
}());
}).call(this,require('_process'))
},{"_process":3}],2:[function(require,module,exports){
(function (process){
// Copyright Joyent, Inc. and other Node contributors.
//
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to permit
// persons to whom the Software is furnished to do so, subject to the
// following conditions:
//
// The above copyright notice and this permission notice shall be included
// in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
// USE OR OTHER DEALINGS IN THE SOFTWARE.
// resolves . and .. elements in a path array with directory names there
// must be no slashes, empty elements, or device names (c:\) in the array
// (so also no leading and trailing slashes - it does not distinguish
// relative and absolute paths)
function normalizeArray(parts, allowAboveRoot) {
// if the path tries to go above the root, `up` ends up > 0
var up = 0;
for (var i = parts.length - 1; i >= 0; i--) {
var last = parts[i];
if (last === '.') {
parts.splice(i, 1);
} else if (last === '..') {
parts.splice(i, 1);
up++;
} else if (up) {
parts.splice(i, 1);
up--;
}
}
// if the path is allowed to go above the root, restore leading ..s
if (allowAboveRoot) {
for (; up--; up) {
parts.unshift('..');
}
}
return parts;
}
// Split a filename into [root, dir, basename, ext], unix version
// 'root' is just a slash, or nothing.
var splitPathRe =
/^(\/?|)([\s\S]*?)((?:\.{1,2}|[^\/]+?|)(\.[^.\/]*|))(?:[\/]*)$/;
var splitPath = function(filename) {
return splitPathRe.exec(filename).slice(1);
};
// path.resolve([from ...], to)
// posix version
exports.resolve = function() {
var resolvedPath = '',
resolvedAbsolute = false;
for (var i = arguments.length - 1; i >= -1 && !resolvedAbsolute; i--) {
var path = (i >= 0) ? arguments[i] : process.cwd();
// Skip empty and invalid entries
if (typeof path !== 'string') {
throw new TypeError('Arguments to path.resolve must be strings');
} else if (!path) {
continue;
}
resolvedPath = path + '/' + resolvedPath;
resolvedAbsolute = path.charAt(0) === '/';
}
// At this point the path should be resolved to a full absolute path, but
// handle relative paths to be safe (might happen when process.cwd() fails)
// Normalize the path
resolvedPath = normalizeArray(filter(resolvedPath.split('/'), function(p) {
return !!p;
}), !resolvedAbsolute).join('/');
return ((resolvedAbsolute ? '/' : '') + resolvedPath) || '.';
};
// path.normalize(path)
// posix version
exports.normalize = function(path) {
var isAbsolute = exports.isAbsolute(path),
trailingSlash = substr(path, -1) === '/';
// Normalize the path
path = normalizeArray(filter(path.split('/'), function(p) {
return !!p;
}), !isAbsolute).join('/');
if (!path && !isAbsolute) {
path = '.';
}
if (path && trailingSlash) {
path += '/';
}
return (isAbsolute ? '/' : '') + path;
};
// posix version
exports.isAbsolute = function(path) {
return path.charAt(0) === '/';
};
// posix version
exports.join = function() {
var paths = Array.prototype.slice.call(arguments, 0);
return exports.normalize(filter(paths, function(p, index) {
if (typeof p !== 'string') {
throw new TypeError('Arguments to path.join must be strings');
}
return p;
}).join('/'));
};
// path.relative(from, to)
// posix version
exports.relative = function(from, to) {
from = exports.resolve(from).substr(1);
to = exports.resolve(to).substr(1);
function trim(arr) {
var start = 0;
for (; start < arr.length; start++) {
if (arr[start] !== '') break;
}
var end = arr.length - 1;
for (; end >= 0; end--) {
if (arr[end] !== '') break;
}
if (start > end) return [];
return arr.slice(start, end - start + 1);
}
var fromParts = trim(from.split('/'));
var toParts = trim(to.split('/'));
var length = Math.min(fromParts.length, toParts.length);
var samePartsLength = length;
for (var i = 0; i < length; i++) {
if (fromParts[i] !== toParts[i]) {
samePartsLength = i;
break;
}
}
var outputParts = [];
for (var i = samePartsLength; i < fromParts.length; i++) {
outputParts.push('..');
}
outputParts = outputParts.concat(toParts.slice(samePartsLength));
return outputParts.join('/');
};
exports.sep = '/';
exports.delimiter = ':';
exports.dirname = function(path) {
var result = splitPath(path),
root = result[0],
dir = result[1];
if (!root && !dir) {
// No dirname whatsoever
return '.';
}
if (dir) {
// It has a dirname, strip trailing slash
dir = dir.substr(0, dir.length - 1);
}
return root + dir;
};
exports.basename = function(path, ext) {
var f = splitPath(path)[2];
// TODO: make this comparison case-insensitive on windows?
if (ext && f.substr(-1 * ext.length) === ext) {
f = f.substr(0, f.length - ext.length);
}
return f;
};
exports.extname = function(path) {
return splitPath(path)[3];
};
function filter (xs, f) {
if (xs.filter) return xs.filter(f);
var res = [];
for (var i = 0; i < xs.length; i++) {
if (f(xs[i], i, xs)) res.push(xs[i]);
}
return res;
}
// String.prototype.substr - negative index don't work in IE8
var substr = 'ab'.substr(-1) === 'b'
? function (str, start, len) { return str.substr(start, len) }
: function (str, start, len) {
if (start < 0) start = str.length + start;
return str.substr(start, len);
}
;
}).call(this,require('_process'))
},{"_process":3}],3:[function(require,module,exports){
// shim for using process in browser
var process = module.exports = {};
var queue = [];
var draining = false;
function drainQueue() {
if (draining) {
return;
}
draining = true;
var currentQueue;
var len = queue.length;
while(len) {
currentQueue = queue;
queue = [];
var i = -1;
while (++i < len) {
currentQueue[i]();
}
len = queue.length;
}
draining = false;
}
process.nextTick = function (fun) {
queue.push(fun);
if (!draining) {
setTimeout(drainQueue, 0);
}
};
process.title = 'browser';
process.browser = true;
process.env = {};
process.argv = [];
process.version = ''; // empty string to avoid regexp issues
function noop() {}
process.on = noop;
process.addListener = noop;
process.once = noop;
process.off = noop;
process.removeListener = noop;
process.removeAllListeners = noop;
process.emit = noop;
process.binding = function (name) {
throw new Error('process.binding is not supported');
};
// TODO(shtylman)
process.cwd = function () { return '/' };
process.chdir = function (dir) {
throw new Error('process.chdir is not supported');
};
process.umask = function() { return 0; };
},{}],4:[function(require,module,exports){
/*!
* EventEmitter2
* https://github.com/hij1nx/EventEmitter2
*
* Copyright (c) 2013 hij1nx
* Licensed under the MIT license.
*/
;!function(undefined) {
var isArray = Array.isArray ? Array.isArray : function _isArray(obj) {
return Object.prototype.toString.call(obj) === "[object Array]";
};
var defaultMaxListeners = 10;
function init() {
this._events = {};
if (this._conf) {
configure.call(this, this._conf);
}
}
function configure(conf) {
if (conf) {
this._conf = conf;
conf.delimiter && (this.delimiter = conf.delimiter);
conf.maxListeners && (this._events.maxListeners = conf.maxListeners);
conf.wildcard && (this.wildcard = conf.wildcard);
conf.newListener && (this.newListener = conf.newListener);
if (this.wildcard) {
this.listenerTree = {};
}
}
}
function EventEmitter(conf) {
this._events = {};
this.newListener = false;
configure.call(this, conf);
}
//
// Attention, function return type now is array, always !
// It has zero elements if no any matches found and one or more
// elements (leafs) if there are matches
//
function searchListenerTree(handlers, type, tree, i) {
if (!tree) {
return [];
}
var listeners=[], leaf, len, branch, xTree, xxTree, isolatedBranch, endReached,
typeLength = type.length, currentType = type[i], nextType = type[i+1];
if (i === typeLength && tree._listeners) {
//
// If at the end of the event(s) list and the tree has listeners
// invoke those listeners.
//
if (typeof tree._listeners === 'function') {
handlers && handlers.push(tree._listeners);
return [tree];
} else {
for (leaf = 0, len = tree._listeners.length; leaf < len; leaf++) {
handlers && handlers.push(tree._listeners[leaf]);
}
return [tree];
}
}
if ((currentType === '*' || currentType === '**') || tree[currentType]) {
//
// If the event emitted is '*' at this part
// or there is a concrete match at this patch
//
if (currentType === '*') {
for (branch in tree) {
if (branch !== '_listeners' && tree.hasOwnProperty(branch)) {
listeners = listeners.concat(searchListenerTree(handlers, type, tree[branch], i+1));
}
}
return listeners;
} else if(currentType === '**') {
endReached = (i+1 === typeLength || (i+2 === typeLength && nextType === '*'));
if(endReached && tree._listeners) {
// The next element has a _listeners, add it to the handlers.
listeners = listeners.concat(searchListenerTree(handlers, type, tree, typeLength));
}
for (branch in tree) {
if (branch !== '_listeners' && tree.hasOwnProperty(branch)) {
if(branch === '*' || branch === '**') {
if(tree[branch]._listeners && !endReached) {
listeners = listeners.concat(searchListenerTree(handlers, type, tree[branch], typeLength));
}
listeners = listeners.concat(searchListenerTree(handlers, type, tree[branch], i));
} else if(branch === nextType) {
listeners = listeners.concat(searchListenerTree(handlers, type, tree[branch], i+2));
} else {
// No match on this one, shift into the tree but not in the type array.
listeners = listeners.concat(searchListenerTree(handlers, type, tree[branch], i));
}
}
}
return listeners;
}
listeners = listeners.concat(searchListenerTree(handlers, type, tree[currentType], i+1));
}
xTree = tree['*'];
if (xTree) {
//
// If the listener tree will allow any match for this part,
// then recursively explore all branches of the tree
//
searchListenerTree(handlers, type, xTree, i+1);
}
xxTree = tree['**'];
if(xxTree) {
if(i < typeLength) {
if(xxTree._listeners) {
// If we have a listener on a '**', it will catch all, so add its handler.
searchListenerTree(handlers, type, xxTree, typeLength);
}
// Build arrays of matching next branches and others.
for(branch in xxTree) {
if(branch !== '_listeners' && xxTree.hasOwnProperty(branch)) {
if(branch === nextType) {
// We know the next element will match, so jump twice.
searchListenerTree(handlers, type, xxTree[branch], i+2);
} else if(branch === currentType) {
// Current node matches, move into the tree.
searchListenerTree(handlers, type, xxTree[branch], i+1);
} else {
isolatedBranch = {};
isolatedBranch[branch] = xxTree[branch];
searchListenerTree(handlers, type, { '**': isolatedBranch }, i+1);
}
}
}
} else if(xxTree._listeners) {
// We have reached the end and still on a '**'
searchListenerTree(handlers, type, xxTree, typeLength);
} else if(xxTree['*'] && xxTree['*']._listeners) {
searchListenerTree(handlers, type, xxTree['*'], typeLength);
}
}
return listeners;
}
function growListenerTree(type, listener) {
type = typeof type === 'string' ? type.split(this.delimiter) : type.slice();
//
// Looks for two consecutive '**', if so, don't add the event at all.
//
for(var i = 0, len = type.length; i+1 < len; i++) {
if(type[i] === '**' && type[i+1] === '**') {
return;
}
}
var tree = this.listenerTree;
var name = type.shift();
while (name) {
if (!tree[name]) {
tree[name] = {};
}
tree = tree[name];
if (type.length === 0) {
if (!tree._listeners) {
tree._listeners = listener;
}
else if(typeof tree._listeners === 'function') {
tree._listeners = [tree._listeners, listener];
}
else if (isArray(tree._listeners)) {
tree._listeners.push(listener);
if (!tree._listeners.warned) {
var m = defaultMaxListeners;
if (typeof this._events.maxListeners !== 'undefined') {
m = this._events.maxListeners;
}
if (m > 0 && tree._listeners.length > m) {
tree._listeners.warned = true;
console.error('(node) warning: possible EventEmitter memory ' +
'leak detected. %d listeners added. ' +
'Use emitter.setMaxListeners() to increase limit.',
tree._listeners.length);
console.trace();
}
}
}
return true;
}
name = type.shift();
}
return true;
}
// By default EventEmitters will print a warning if more than
// 10 listeners are added to it. This is a useful default which
// helps finding memory leaks.
//
// Obviously not all Emitters should be limited to 10. This function allows
// that to be increased. Set to zero for unlimited.
EventEmitter.prototype.delimiter = '.';
EventEmitter.prototype.setMaxListeners = function(n) {
this._events || init.call(this);
this._events.maxListeners = n;
if (!this._conf) this._conf = {};
this._conf.maxListeners = n;
};
EventEmitter.prototype.event = '';
EventEmitter.prototype.once = function(event, fn) {
this.many(event, 1, fn);
return this;
};
EventEmitter.prototype.many = function(event, ttl, fn) {
var self = this;
if (typeof fn !== 'function') {
throw new Error('many only accepts instances of Function');
}
function listener() {
if (--ttl === 0) {
self.off(event, listener);
}
fn.apply(this, arguments);
}
listener._origin = fn;
this.on(event, listener);
return self;
};
EventEmitter.prototype.emit = function() {
this._events || init.call(this);
var type = arguments[0];
if (type === 'newListener' && !this.newListener) {
if (!this._events.newListener) { return false; }
}
// Loop through the *_all* functions and invoke them.
if (this._all) {
var l = arguments.length;
var args = new Array(l - 1);
for (var i = 1; i < l; i++) args[i - 1] = arguments[i];
for (i = 0, l = this._all.length; i < l; i++) {
this.event = type;
this._all[i].apply(this, args);
}
}
// If there is no 'error' event listener then throw.
if (type === 'error') {
if (!this._all &&
!this._events.error &&
!(this.wildcard && this.listenerTree.error)) {
if (arguments[1] instanceof Error) {
throw arguments[1]; // Unhandled 'error' event
} else {
throw new Error("Uncaught, unspecified 'error' event.");
}
return false;
}
}
var handler;
if(this.wildcard) {
handler = [];
var ns = typeof type === 'string' ? type.split(this.delimiter) : type.slice();
searchListenerTree.call(this, handler, ns, this.listenerTree, 0);
}
else {
handler = this._events[type];
}
if (typeof handler === 'function') {
this.event = type;
if (arguments.length === 1) {
handler.call(this);
}
else if (arguments.length > 1)
switch (arguments.length) {
case 2:
handler.call(this, arguments[1]);
break;
case 3:
handler.call(this, arguments[1], arguments[2]);
break;
// slower
default:
var l = arguments.length;
var args = new Array(l - 1);
for (var i = 1; i < l; i++) args[i - 1] = arguments[i];
handler.apply(this, args);
}
return true;
}
else if (handler) {
var l = arguments.length;
var args = new Array(l - 1);
for (var i = 1; i < l; i++) args[i - 1] = arguments[i];
var listeners = handler.slice();
for (var i = 0, l = listeners.length; i < l; i++) {
this.event = type;
listeners[i].apply(this, args);
}
return (listeners.length > 0) || !!this._all;
}
else {
return !!this._all;
}
};
EventEmitter.prototype.on = function(type, listener) {
if (typeof type === 'function') {
this.onAny(type);
return this;
}
if (typeof listener !== 'function') {
throw new Error('on only accepts instances of Function');
}
this._events || init.call(this);
// To avoid recursion in the case that type == "newListeners"! Before
// adding it to the listeners, first emit "newListeners".
this.emit('newListener', type, listener);
if(this.wildcard) {
growListenerTree.call(this, type, listener);
return this;
}
if (!this._events[type]) {
// Optimize the case of one listener. Don't need the extra array object.
this._events[type] = listener;
}
else if(typeof this._events[type] === 'function') {
// Adding the second element, need to change to array.
this._events[type] = [this._events[type], listener];
}
else if (isArray(this._events[type])) {
// If we've already got an array, just append.
this._events[type].push(listener);
// Check for listener leak
if (!this._events[type].warned) {
var m = defaultMaxListeners;
if (typeof this._events.maxListeners !== 'undefined') {
m = this._events.maxListeners;
}
if (m > 0 && this._events[type].length > m) {
this._events[type].warned = true;
console.error('(node) warning: possible EventEmitter memory ' +
'leak detected. %d listeners added. ' +
'Use emitter.setMaxListeners() to increase limit.',
this._events[type].length);
console.trace();
}
}
}
return this;
};
EventEmitter.prototype.onAny = function(fn) {
if (typeof fn !== 'function') {
throw new Error('onAny only accepts instances of Function');
}
if(!this._all) {
this._all = [];
}
// Add the function to the event listener collection.
this._all.push(fn);
return this;
};
EventEmitter.prototype.addListener = EventEmitter.prototype.on;
EventEmitter.prototype.off = function(type, listener) {
if (typeof listener !== 'function') {
throw new Error('removeListener only takes instances of Function');
}
var handlers,leafs=[];
if(this.wildcard) {
var ns = typeof type === 'string' ? type.split(this.delimiter) : type.slice();
leafs = searchListenerTree.call(this, null, ns, this.listenerTree, 0);
}
else {
// does not use listeners(), so no side effect of creating _events[type]
if (!this._events[type]) return this;
handlers = this._events[type];
leafs.push({_listeners:handlers});
}
for (var iLeaf=0; iLeaf<leafs.length; iLeaf++) {
var leaf = leafs[iLeaf];
handlers = leaf._listeners;
if (isArray(handlers)) {
var position = -1;
for (var i = 0, length = handlers.length; i < length; i++) {
if (handlers[i] === listener ||
(handlers[i].listener && handlers[i].listener === listener) ||
(handlers[i]._origin && handlers[i]._origin === listener)) {
position = i;
break;
}
}
if (position < 0) {
continue;
}
if(this.wildcard) {
leaf._listeners.splice(position, 1);
}
else {
this._events[type].splice(position, 1);
}
if (handlers.length === 0) {
if(this.wildcard) {
delete leaf._listeners;
}
else {
delete this._events[type];
}
}
return this;
}
else if (handlers === listener ||
(handlers.listener && handlers.listener === listener) ||
(handlers._origin && handlers._origin === listener)) {
if(this.wildcard) {
delete leaf._listeners;
}
else {
delete this._events[type];
}
}
}
return this;
};
EventEmitter.prototype.offAny = function(fn) {
var i = 0, l = 0, fns;
if (fn && this._all && this._all.length > 0) {
fns = this._all;
for(i = 0, l = fns.length; i < l; i++) {
if(fn === fns[i]) {
fns.splice(i, 1);
return this;
}
}
} else {
this._all = [];
}
return this;
};
EventEmitter.prototype.removeListener = EventEmitter.prototype.off;
EventEmitter.prototype.removeAllListeners = function(type) {
if (arguments.length === 0) {
!this._events || init.call(this);
return this;
}
if(this.wildcard) {
var ns = typeof type === 'string' ? type.split(this.delimiter) : type.slice();
var leafs = searchListenerTree.call(this, null, ns, this.listenerTree, 0);
for (var iLeaf=0; iLeaf<leafs.length; iLeaf++) {
var leaf = leafs[iLeaf];
leaf._listeners = null;
}
}
else {
if (!this._events[type]) return this;
this._events[type] = null;
}
return this;
};
EventEmitter.prototype.listeners = function(type) {
if(this.wildcard) {
var handlers = [];
var ns = typeof type === 'string' ? type.split(this.delimiter) : type.slice();
searchListenerTree.call(this, handlers, ns, this.listenerTree, 0);
return handlers;
}
this._events || init.call(this);
if (!this._events[type]) this._events[type] = [];
if (!isArray(this._events[type])) {
this._events[type] = [this._events[type]];
}
return this._events[type];
};
EventEmitter.prototype.listenersAny = function() {
if(this._all) {
return this._all;
}
else {
return [];
}
};
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(function() {
return EventEmitter;
});
} else if (typeof exports === 'object') {
// CommonJS
exports.EventEmitter2 = EventEmitter;
}
else {
// Browser global.
window.EventEmitter2 = EventEmitter;
}
}();
},{}],5:[function(require,module,exports){
var async = require('async'),
Resource = require('./Resource'),
EventEmitter2 = require('eventemitter2').EventEmitter2;
/**
* Manages the state and loading of multiple resources to load.
*
* @class
* @param baseUrl {string} The base url for all resources loaded by this loader.
* @param [concurrency=10] {number} The number of resources to load concurrently.
*/
function Loader(baseUrl, concurrency) {
EventEmitter2.call(this);
concurrency = concurrency || 10;
/**
* The base url for all resources loaded by this loader.
*
* @member {string}
*/
this.baseUrl = baseUrl || '';
/**
* The progress percent of the loader going through the queue.
*
* @member {number}
*/
this.progress = 0;
/**
* Loading state of the loader, true if it is currently loading resources.
*
* @member {boolean}
*/
this.loading = false;
/**
* The percentage of total progress that a single resource represents.
*
* @member {number}
*/
this._progressChunk = 0;
/**
* The middleware to run before loading each resource.
*
* @member {function[]}
*/
this._beforeMiddleware = [];
/**
* The middleware to run after loading each resource.
*
* @member {function[]}
*/
this._afterMiddleware = [];
/**
* The `loadResource` function bound with this object context.
*
* @private
* @member {function}
*/
this._boundLoadResource = this.loadResource.bind(this);
/**
* The `_onComplete` function bound with this object context.
*
* @private
* @member {function}
*/
this._boundOnComplete = this._onComplete.bind(this);
/**
* The resource buffer that fills until `load` is called to start loading resources.
*
* @private
* @member {Resource[]}
*/
this._buffer = [];
/**
* The resources waiting to be loaded.
*
* @member {Resource[]}
*/
this.queue = async.queue(this._boundLoadResource, concurrency);
/**
* All the resources for this loader keyed by name.
*
* @member {object<string, Resource>}
*/
this.resources = {};
/**
* Emitted once per loaded or errored resource.
*
* @event progress
*/
/**
* Emitted once per errored resource.
*
* @event error
*/
/**
* Emitted once per loaded resource.
*
* @event load
*/
/**
* Emitted when the loader begins to process the queue.
*
* @event start
*/
/**
* Emitted when the queued resources all load.
*
* @event complete
*/
}
Loader.prototype = Object.create(EventEmitter2.prototype);
Loader.prototype.constructor = Loader;
module.exports = Loader;
/**
* Adds a resource (or multiple resources) to the loader queue.
*
* This function can take a wide variety of different parameters. The only thing that is always
* required the url to load. All the following will work:
*
* ```js
* loader
* // normal param syntax
* .add('key', 'http://...', function () {})
* .add('http://...', function () {})
* .add('http://...')
*
* // object syntax
* .add({
* name: 'key2',
* url: 'http://...'
* }, function () {})
* .add({
* url: 'http://...'
* }, function () {})
* .add({
* name: 'key3',
* url: 'http://...'
* onComplete: function () {}
* })
* .add({
* url: 'https://...',
* onComplete: function () {},
* crossOrigin: true
* })
*
* // you can also pass an array of objects or urls or both
* .add([
* { name: 'key4', url: 'http://...', onComplete: function () {} },
* { url: 'http://...', onComplete: function () {} },
* 'http://...'
* ]);
* ```
*
* @alias enqueue
* @param [name] {string} The name of the resource to load, if not passed the url is used.
* @param url {string} The url for this resource, relative to the baseUrl of this loader.
* @param [options] {object} The options for the load.
* @param [options.crossOrigin] {boolean} Is this request cross-origin? Default is to determine automatically.
* @param [options.loadType=Resource.LOAD_TYPE.XHR] {Resource.XHR_LOAD_TYPE} How should this resource be loaded?
* @param [options.xhrType=Resource.XHR_RESPONSE_TYPE.DEFAULT] {Resource.XHR_RESPONSE_TYPE} How should the data being
* loaded be interpreted when using XHR?
* @param [callback] {function} Function to call when this specific resource completes loading.
* @return {Loader}
*/
Loader.prototype.add = Loader.prototype.enqueue = function (name, url, options, cb) {
// special case of an array of objects or urls
if (Array.isArray(name)) {
for (var i = 0; i < name.length; ++i) {
this.add(name[i]);
}
return this;
}
// if an object is passed instead of params
if (typeof name === 'object') {
cb = url || name.callback || name.onComplete;
options = name;
url = name.url;
name = name.name || name.key || name.url;
}
// case where no name is passed shift all args over by one.
if (typeof url !== 'string') {
cb = options;
options = url;
url = name;
}
// now that we shifted make sure we have a proper url.
if (typeof url !== 'string') {
throw new Error('No url passed to add resource to loader.');
}
// options are optional so people might pass a function and no options
if (typeof options === 'function') {
cb = options;
options = null;
}
// check if resource already exists.
if (this.resources[name]) {
throw new Error('Resource with name "' + name + '" already exists.');
}
// create the store the resource
this.resources[name] = new Resource(name, this.baseUrl + url, options);
if (typeof cb === 'function') {
this.resources[name].once('afterMiddleware', cb);
}
// if already loading add it to the worker queue
if (this.queue.started) {
this.queue.push(this.resources[name]);
this._progressChunk = (100 - this.progress) / (this.queue.length() + this.queue.running());
}
// otherwise buffer it to be added to the queue later
else {
this._buffer.push(this.resources[name]);
this._progressChunk = 100 / this._buffer.length;
}
return this;
};
/**
* Sets up a middleware function that will run *before* the
* resource is loaded.
*
* @alias pre
* @param middleware {function} The middleware function to register.
* @return {Loader}
*/
Loader.prototype.before = Loader.prototype.pre = function (fn) {
this._beforeMiddleware.push(fn);
return this;
};
/**
* Sets up a middleware function that will run *after* the
* resource is loaded.
*
* @alias use
* @param middleware {function} The middleware function to register.
* @return {Loader}
*/
Loader.prototype.after = Loader.prototype.use = function (fn) {
this._afterMiddleware.push(fn);
return this;
};
/**
* Resets the queue of the loader to prepare for a new load.
*
* @return {Loader}
*/
Loader.prototype.reset = function () {
this._buffer.length = 0;
this.queue.kill();
this.queue.started = false;
this.progress = 0;
this._progressChunk = 0;
this.loading = false;
};
/**
* Starts loading the queued resources.
*
* @fires start
* @param [callback] {function} Optional callback that will be bound to the `complete` event.
* @return {Loader}
*/
Loader.prototype.load = function (cb) {
// register complete callback if they pass one
if (typeof cb === 'function') {
this.once('complete', cb);
}
// if the queue has already started we are done here
if (this.queue.started) {
return this;
}
// set drain event callback
this.queue.drain = this._boundOnComplete;
// notify of start
this.emit('start', this);
// start the internal queue
for (var i = 0; i < this._buffer.length; ++i) {
this.queue.push(this._buffer[i]);
}
// empty the buffer
this._buffer.length = 0;
return this;
};
/**
* Loads a single resource.
*
* @fires progress
*/
Loader.prototype.loadResource = function (resource, cb) {
var self = this;
this._runMiddleware(resource, this._beforeMiddleware, function () {
// resource.on('progress', self.emit.bind(self, 'progress'));
resource.once('complete', self._onLoad.bind(self, resource, cb));
resource.load();
});
};
/**
* Called once each resource has loaded.
*
* @fires complete
* @private
*/
Loader.prototype._onComplete = function () {
this.emit('complete', this, this.resources);
};
/**
* Called each time a resources is loaded.
*
* @fires progress
* @fires error
* @fires load
* @private
*/
Loader.prototype._onLoad = function (resource, cb) {
this.progress += this._progressChunk;
this.emit('progress', this, resource);
if (resource.error) {
this.emit('error', resource.error, this, resource);
}
else {
this.emit('load', this, resource);
}
this._runMiddleware(resource, this._afterMiddleware, function () {
resource.emit('afterMiddleware', resource);
if (cb) {
cb();
}
});
};
/**
* Run middleware functions on a resource.
*
* @private
*/
Loader.prototype._runMiddleware = function (resource, fns, cb) {
var self = this;
async.eachSeries(fns, function (fn, next) {
fn.call(self, resource, next);
}, cb.bind(this, resource));
};
Loader.LOAD_TYPE = Resource.LOAD_TYPE;
Loader.XHR_READY_STATE = Resource.XHR_READY_STATE;
Loader.XHR_RESPONSE_TYPE = Resource.XHR_RESPONSE_TYPE;
},{"./Resource":6,"async":1,"eventemitter2":4}],6:[function(require,module,exports){
var EventEmitter2 = require('eventemitter2').EventEmitter2,
// tests is CORS is supported in XHR, if not we need to use XDR
useXdr = !!(window.XDomainRequest && !('withCredentials' in (new XMLHttpRequest())));
/**
* Manages the state and loading of a single resource represented by
* a single URL.
*
* @class
* @param name {string} The name of the resource to load.
* @param url {string|string[]} The url for this resource, for audio/video loads you can pass an array of sources.
* @param [options] {object} The options for the load.
* @param [options.crossOrigin] {boolean} Is this request cross-origin? Default is to determine automatically.
* @param [options.loadType=Resource.LOAD_TYPE.XHR] {Resource.LOAD_TYPE} How should this resource be loaded?
* @param [options.xhrType=Resource.XHR_RESPONSE_TYPE.DEFAULT] {Resource.XHR_RESPONSE_TYPE} How should the data being
* loaded be interpreted when using XHR?
*/
function Resource(name, url, options) {
EventEmitter2.call(this);
options = options || {};
if (typeof name !== 'string' || typeof url !== 'string') {
throw new Error('Both name and url are required for constructing a resource.');
}
/**
* The name of this resource.
*
* @member {string}
* @readonly
*/
this.name = name;
/**
* The url used to load this resource.
*
* @member {string}
* @readonly
*/
this.url = url;
/**
* The data that was loaded by the resource.
*
* @member {any}
*/
this.data = null;
/**
* Is this request cross-origin? If unset, determined automatically.
*
* @member {string}
*/
this.crossOrigin = options.crossOrigin;
/**
* The method of loading to use for this resource.
*
* @member {Resource.LOAD_TYPE}
*/
this.loadType = options.loadType || Resource.LOAD_TYPE.XHR;
/**
* The type used to load the resource via XHR. If unset, determined automatically.
*
* @member {string}
*/
this.xhrType = options.xhrType;
/**
* The error that occurred while loading (if any).
*
* @member {Error}
* @readonly
*/
this.error = null;
/**
* The XHR object that was used to load this resource. This is only set
* when `loadType` is `Resource.LOAD_TYPE.XHR`.
*
* @member {XMLHttpRequest}
*/
this.xhr = null;
/**
* The `complete` function bound to this resource's context.
*
* @member {function}
* @private
*/
this._boundComplete = this.complete.bind(this);
/**
* The `_onError` function bound to this resource's context.
*
* @member {function}
* @private
*/
this._boundOnError = this._onError.bind(this);
/**
* The `_onProgress` function bound to this resource's context.
*
* @member {function}
* @private
*/
this._boundOnProgress = this._onProgress.bind(this);
// xhr callbacks
this._boundXhrOnError = this._xhrOnError.bind(this);
this._boundXhrOnAbort = this._xhrOnAbort.bind(this);
this._boundXhrOnLoad = this._xhrOnLoad.bind(this);
this._boundXdrOnTimeout = this._xdrOnTimeout.bind(this);
/**
* Emitted when the resource beings to load.
*
* @event start
*/
/**
* Emitted each time progress of this resource load updates.
* Not all resources types and loader systems can support this event
* so sometimes it may not be available. If the resource
* is being loaded on a modern browser, using XHR, and the remote server
* properly sets Content-Length headers, then this will be available.
*
* @event progress
*/
/**
* Emitted once this resource has loaded, if there was an error it will
* be in the `error` property.
*
* @event complete
*/
}
Resource.prototype = Object.create(EventEmitter2.prototype);
Resource.prototype.constructor = Resource;
module.exports = Resource;
/**
* Marks the resource as complete.
*
* @fires complete
*/
Resource.prototype.complete = function () {
// TODO: Clean this up in a wrapper or something...gross....
if (this.data && this.data.removeEventListener) {
this.data.removeEventListener('error', this._boundOnError);
this.data.removeEventListener('load', this._boundComplete);
this.data.removeEventListener('progress', this._boundOnProgress);
this.data.removeEventListener('canplaythrough', this._boundComplete);
}
if (this.xhr) {
if (this.xhr.removeEventListener) {
this.xhr.removeEventListener('error', this._boundXhrOnError);
this.xhr.removeEventListener('abort', this._boundXhrOnAbort);
this.xhr.removeEventListener('progress', this._boundOnProgress);
this.xhr.removeEventListener('load', this._boundXhrOnLoad);
}
else {
this.xhr.onerror = null;
this.xhr.ontimeout = null;
this.xhr.onprogress = null;
this.xhr.onload = null;
}
}
this.emit('complete', this);
};
/**
* Kicks off loading of this resource.
*
* @fires start
*/
Resource.prototype.load = function () {
this.emit('start', this);
// if unset, determine the value
if (typeof this.crossOrigin !== 'string') {
this.crossOrigin = this._determineCrossOrigin();
}
switch(this.loadType) {
case Resource.LOAD_TYPE.IMAGE:
this._loadImage();
break;
case Resource.LOAD_TYPE.AUDIO:
this._loadElement('audio');
break;
case Resource.LOAD_TYPE.VIDEO:
this._loadElement('video');
break;
case Resource.LOAD_TYPE.XHR:
/* falls through */
default:
if (useXdr) {
this._loadXdr();
}
else {
this._loadXhr();
}
break;
}
};
/**
* Loads this resources using an Image object.
*
* @private
*/
Resource.prototype._loadImage = function () {
this.data = new Image();
if (this.crossOrigin) {
this.data.crossOrigin = '';
}
this.data.src = this.url;
this.data.addEventListener('error', this._boundOnError, false);
this.data.addEventListener('load', this._boundComplete, false);
this.data.addEventListener('progress', this._boundOnProgress, false);
};
/**
* Loads this resources using an HTMLAudioElement or HTMLVideoElement.
*
* @private
*/
Resource.prototype._loadElement = function (type) {
this.data = document.createElement(type);
if (Array.isArray(this.url)) {
for (var i = 0; i < this.url.length; ++i) {
this.data.appendChild(this._createSource(type, this.url[i]));
}
}
else {
this.data.appendChild(this._createSource(type, this.url));
}
this.data.addEventListener('error', this._boundOnError, false);
this.data.addEventListener('load', this._boundComplete, false);
this.data.addEventListener('progress', this._boundOnProgress, false);
this.data.addEventListener('canplaythrough', this._boundComplete, false);
this.data.load();
};
/**
* Loads this resources using an XMLHttpRequest.
*
* @private
*/
Resource.prototype._loadXhr = function () {
// if unset, determine the value
if (typeof this.xhrType !== 'string') {
this.xhrType = this._determineXhrType();
}
var xhr = this.xhr = new XMLHttpRequest();
// set the request type and url
xhr.open('GET', this.url, true);
// set the responseType
xhr.responseType = this.xhrType;
xhr.addEventListener('error', this._boundXhrOnError, false);
xhr.addEventListener('abort', this._boundXhrOnAbort, false);
xhr.addEventListener('progress', this._boundOnProgress, false);
xhr.addEventListener('load', this._boundXhrOnLoad, false);
xhr.send();
};
/**
* Loads this resources using an XDomainRequest. This is here because we need to support IE9 (gross).
*
* @private
*/
Resource.prototype._loadXdr = function () {
var xdr = this.xhr = new XDomainRequest();
// XDomainRequest has a few quirks. Occasionally it will abort requests
// A way to avoid this is to make sure ALL callbacks are set even if not used
// More info here: http://stackoverflow.com/questions/15786966/xdomainrequest-aborts-post-on-ie-9
xdr.timeout = 5000;
xdr.onerror = this._boundXhrOnError;
xdr.ontimeout = this._boundXdrOnTimeout;
xdr.onprogress = this._boundOnProgress;
xdr.onload = this._boundXhrOnLoad;
xdr.open('GET', this.url, true);
// Note: The xdr.send() call is wrapped in a timeout to prevent an issue with the interface where some requests are lost
// if multiple XDomainRequests are being sent at the same time.
// Some info here: https://github.com/photonstorm/phaser/issues/1248
setTimeout(function () {
xdr.send();
}, 0);
};
/**
* Creates a source used in loading via an element.
*
* @param type {string} The element type (video or audio).
* @param url {string} The source URL to load from.
* @param [mime] {string} The mime type of the video
* @private
*/
Resource.prototype._createSource = function (type, url, mime) {
if (!mime) {
mime = type + '/' + url.substr(url.lastIndexOf('.') + 1);
}
var source = document.createElement('source');
source.src = url;
source.type = mime;
return source;
};
/**
* Called if a load errors out.
*
* @param error {Error} The error that happened.
* @private
*/
Resource.prototype._onError = function (event) {
this.error = new Error('Failed to load element using ' + event.target.nodeName);
this.complete();
};
/**
* Called if a load progress event fires for xhr/xdr.
*
* @fires progress
* @param event {XMLHttpRequestProgressEvent|Event}
* @private
*/
Resource.prototype._onProgress = function (event) {
if (event.lengthComputable) {
this.emit('progress', this, event.loaded / event.total);
}
};
/**
* Called if an error event fires for xhr/xdr.
*
* @param event {XMLHttpRequestErrorEvent|Event}
* @private
*/
Resource.prototype._xhrOnError = function (event) {
this.error = new Error(
reqType(event.target) + ' Request failed. ' +
'Status: ' + event.target.status + ', text: "' + event.target.statusText + '"'
);
this.complete();
};
/**
* Called if an abort event fires for xhr.
*
* @param event {XMLHttpRequestAbortEvent}
* @private
*/
Resource.prototype._xhrOnAbort = function (event) {
this.error = new Error(reqType(event.target) + ' Request was aborted by the user.');
this.complete();
};
/**
* Called if a timeout event fires for xdr.
*
* @param event {Event}
* @private
*/
Resource.prototype._xdrOnTimeout = function (event) {
this.error = new Error(reqType(event.target) + ' Request timed out.');
this.complete();
};
/**
* Called when data successfully loads from an xhr/xdr request.
*
* @param event {XMLHttpRequestLoadEvent|Event}
* @private
*/
Resource.prototype._xhrOnLoad = function (event) {
var xhr = event.target;
if (xhr.status === 200) {
if (this.xhrType === Resource.XHR_RESPONSE_TYPE.TEXT) {
this.data = xhr.responseText;
}
else if (this.xhrType === Resource.XHR_RESPONSE_TYPE.DOCUMENT) {
this.data = xhr.responseXML || xhr.response;
}
else {
this.data = xhr.response;
}
}
else {
this.error = new Error('[' + xhr.status + ']' + xhr.statusText + ':' + xhr.responseURL);
}
this.complete();
};
function reqType(xhr) {
return xhr.toString().replace('object ', '');
}
/**
* Sets the `crossOrigin` property for this resource based on if the url
* for this resource is cross-origin. If crossOrigin was manually set, this
* function does nothing.
*
* @private
* @return {string} The crossOrigin value to use (or empty string for none).
*/
Resource.prototype._determineCrossOrigin = function () {
// data: and javascript: urls are considered same-origin
if (this.url.indexOf('data:') === 0) {
return '';
}
// check if this is a cross-origin url
var loc = window.location,
a = document.createElement('a');
a.href = this.url;
// if cross origin
if (a.hostname !== loc.hostname || a.port !== loc.port || a.protocol !== loc.protocol) {
return 'anonymous';
}
return '';
};
/**
* Determines the responseType of an XHR request based on the extension of the
* resource being loaded.
*
* @private
* @return {Resource.XHR_RESPONSE_TYPE} The responseType to use.
*/
Resource.prototype._determineXhrType = function () {
var ext = this.url.substr(this.url.lastIndexOf('.') + 1);
switch(ext) {
// xml
case 'xhtml':
case 'html':
case 'htm':
case 'xml':
case 'tmx':
case 'tsx':
case 'svg':
return Resource.XHR_RESPONSE_TYPE.DOCUMENT;
// images
case 'gif':
case 'png':
case 'jpg':
case 'jpeg':
case 'tif':
case 'tiff':
case 'webp':
return Resource.XHR_RESPONSE_TYPE.BLOB;
// json
case 'json':
return Resource.XHR_RESPONSE_TYPE.JSON;
// text
case 'text':
case 'txt':
/* falls through */
default:
return Resource.XHR_RESPONSE_TYPE.TEXT;
}
};
/**
* Determines the mime type of an XHR request based on the responseType of
* resource being loaded.
*
* @private
* @return {string} The mime type to use.
*/
Resource.prototype._getMimeFromXhrType = function (type) {
switch(type) {
case Resource.XHR_RESPONSE_TYPE.BUFFER:
return 'application/octet-binary';
case Resource.XHR_RESPONSE_TYPE.BLOB:
return 'application/blob';
case Resource.XHR_RESPONSE_TYPE.DOCUMENT:
return 'application/xml';
case Resource.XHR_RESPONSE_TYPE.JSON:
return 'application/json';
case Resource.XHR_RESPONSE_TYPE.DEFAULT:
case Resource.XHR_RESPONSE_TYPE.TEXT:
/* falls through */
default:
return 'text/plain';
}
};
/**
* The types of loading a resource can use.
*
* @static
* @constant
* @property {object} LOAD_TYPE
* @property {number} LOAD_TYPE.XHR - Uses XMLHttpRequest to load the resource.
* @property {number} LOAD_TYPE.IMAGE - Uses an `Image` object to load the resource.
* @property {number} LOAD_TYPE.AUDIO - Uses an `Audio` object to load the resource.
* @property {number} LOAD_TYPE.VIDEO - Uses a `Video` object to load the resource.
*/
Resource.LOAD_TYPE = {
XHR: 1,
IMAGE: 2,
AUDIO: 3,
VIDEO: 4
};
/**
* The XHR ready states, used internally.
*
* @static
* @constant
* @property {object} XHR_READY_STATE
* @property {number} XHR_READY_STATE.UNSENT - open()has not been called yet.
* @property {number} XHR_READY_STATE.OPENED - send()has not been called yet.
* @property {number} XHR_READY_STATE.HEADERS_RECEIVED - send() has been called, and headers and status are available.
* @property {number} XHR_READY_STATE.LOADING - Downloading; responseText holds partial data.
* @property {number} XHR_READY_STATE.DONE - The operation is complete.
*/
Resource.XHR_READY_STATE = {
UNSENT: 0,
OPENED: 1,
HEADERS_RECEIVED: 2,
LOADING: 3,
DONE: 4
};
/**
* The XHR ready states, used internally.
*
* @static
* @constant
* @property {object} XHR_RESPONSE_TYPE
* @property {string} XHR_RESPONSE_TYPE.DEFAULT - defaults to text
* @property {string} XHR_RESPONSE_TYPE.BUFFER - ArrayBuffer
* @property {string} XHR_RESPONSE_TYPE.BLOB - Blob
* @property {string} XHR_RESPONSE_TYPE.DOCUMENT - Document
* @property {string} XHR_RESPONSE_TYPE.JSON - Object
* @property {string} XHR_RESPONSE_TYPE.TEXT - String
*/
Resource.XHR_RESPONSE_TYPE = {
DEFAULT: 'text',
BUFFER: 'arraybuffer',
BLOB: 'blob',
DOCUMENT: 'document',
JSON: 'json',
TEXT: 'text'
};
},{"eventemitter2":4}],7:[function(require,module,exports){
module.exports = require('./Loader');
module.exports.Resource = require('./Resource');
module.exports.middleware = {
caching: {
memory: require('./middlewares/caching/memory')
},
parsing: {
json: require('./middlewares/parsing/json'),
blob: require('./middlewares/parsing/blob')
}
};
},{"./Loader":5,"./Resource":6,"./middlewares/caching/memory":8,"./middlewares/parsing/blob":9,"./middlewares/parsing/json":10}],8:[function(require,module,exports){
// a simple in-memory cache for resources
var cache = {};
module.exports = function () {
return function (resource, next) {
// if cached, then set data and complete the resource
if (cache[resource.url]) {
resource.data = cache[resource.url];
resource.complete();
}
// if not cached, wait for complete and store it in the cache.
else {
resource.once('complete', function () {
cache[this.url] = this.data;
});
next();
}
};
};
},{}],9:[function(require,module,exports){
var Resource = require('../../Resource');
window.URL = window.URL || window.webkitURL;
// a middleware for transforming XHR loaded Blobs into more useful objects
module.exports = function () {
return function (resource, next) {
// if this was an XHR load
if (resource.xhr && resource.xhrType === Resource.XHR_RESPONSE_TYPE.BLOB) {
// if content type says this is an image, then we need to transform the blob into an Image object
if (resource.data.type.indexOf('image') === 0) {
var src = URL.createObjectURL(resource.data);
resource.data = new Image();
resource.data.src = src;
// cleanup the no longer used blob after the image loads
resource.data.onload = function () {
URL.revokeObjectURL(src);
resource.data.onload = null;
next();
};
}
}
else {
next();
}
};
};
},{"../../Resource":6}],10:[function(require,module,exports){
// a simple json-parsing middleware for resources
module.exports = function () {
return function (resource, next) {
// if this is a string, try to parse it as json
if (typeof resource.data === 'string') {
try {
// resource.data is set by the XHR load
resource.data = JSON.parse(resource.data);
}
catch (e) {
// this isn't json, just move along
}
}
// no matter what, just move along to next middleware
next();
};
};
},{}],11:[function(require,module,exports){
module.exports={
"name": "pixi.js",
"version": "3.0.0-rc2",
"description": "Pixi.js is a fast lightweight 2D library that works across all devices.",
"author": "Mat Groves",
"contributors": [
"Chad Engler <chad@pantherdev.com>",
"Richard Davey <rdavey@gmail.com>"
],
"main": "./src/index.js",
"homepage": "http://goodboydigital.com/",
"bugs": "https://github.com/GoodBoyDigital/pixi.js/issues",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/GoodBoyDigital/pixi.js.git"
},
"scripts": {
"test": "gulp test",
"docs": "./node_modules/.bin/jsdoc -c ./gulp/util/jsdoc.conf.json"
},
"devDependencies": {
"browserify": "^8.0.2",
"chai": "^1.10.0",
"del": "^1.1.0",
"exorcist": "^0.1.6",
"gulp": "^3.8.10",
"gulp-cached": "^1.0.1",
"gulp-concat": "^2.5.2",
"gulp-debug": "^2.0.0",
"gulp-jsdoc": "^0.1.4",
"gulp-jshint": "^1.9.0",
"gulp-plumber": "^0.6.6",
"gulp-rename": "^1.2.0",
"gulp-uglify": "^1.0.2",
"gulp-util": "^3.0.1",
"ink-docstrap": "^0.5.2",
"jsdoc": "^3.3.0-alpha13",
"jshint-summary": "^0.4.0",
"karma": "^0.12.28",
"karma-firefox-launcher": "^0.1.0",
"karma-mocha": "^0.1.10",
"karma-spec-reporter": "^0.0.16",
"minimist": "^1.1.0",
"mocha": "^2.1.0",
"require-dir": "^0.1.0",
"run-sequence": "^1.0.2",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.0.0",
"watchify": "^2.2.1"
},
"dependencies": {
"async": "^0.9.0",
"resource-loader": "^1.2.2",
"brfs": "^1.2.0"
},
"browserify": {
"transform": [
"brfs"
]
}
}
},{}],12:[function(require,module,exports){
/**
* Constant values used in pixi
*
* @memberof PIXI
*/
module.exports = {
/**
* String of the current PIXI version
*
* @static
* @constant
* @property {string} VERSION
*/
VERSION: require('../../package.json').version,
/**
* Constant to identify the Renderer Type.
*
* @static
* @constant
* @property {object} RENDERER_TYPE
* @property {number} RENDERER_TYPE.UNKNOWN
* @property {number} RENDERER_TYPE.WEBGL
* @property {number} RENDERER_TYPE.CANVAS
*/
RENDERER_TYPE: {
UNKNOWN: 0,
WEBGL: 1,
CANVAS: 2
},
/**
* Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports
* the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like
* NORMAL.
*
* @static
* @constant
* @property {object} BLEND_MODES
* @property {number} BLEND_MODES.NORMAL
* @property {number} BLEND_MODES.ADD
* @property {number} BLEND_MODES.MULTIPLY
* @property {number} BLEND_MODES.SCREEN
* @property {number} BLEND_MODES.OVERLAY
* @property {number} BLEND_MODES.DARKEN
* @property {number} BLEND_MODES.LIGHTEN
* @property {number} BLEND_MODES.COLOR_DODGE
* @property {number} BLEND_MODES.COLOR_BURN
* @property {number} BLEND_MODES.HARD_LIGHT
* @property {number} BLEND_MODES.SOFT_LIGHT
* @property {number} BLEND_MODES.DIFFERENCE
* @property {number} BLEND_MODES.EXCLUSION
* @property {number} BLEND_MODES.HUE
* @property {number} BLEND_MODES.SATURATION
* @property {number} BLEND_MODES.COLOR
* @property {number} BLEND_MODES.LUMINOSITY
*/
BLEND_MODES: {
NORMAL: 0,
ADD: 1,
MULTIPLY: 2,
SCREEN: 3,
OVERLAY: 4,
DARKEN: 5,
LIGHTEN: 6,
COLOR_DODGE: 7,
COLOR_BURN: 8,
HARD_LIGHT: 9,
SOFT_LIGHT: 10,
DIFFERENCE: 11,
EXCLUSION: 12,
HUE: 13,
SATURATION: 14,
COLOR: 15,
LUMINOSITY: 16
},
/**
* The scale modes that are supported by pixi.
*
* The DEFAULT scale mode affects the default scaling mode of future operations.
* It can be re-assigned to either LINEAR or NEAREST, depending upon suitability.
*
* @static
* @constant
* @property {object} SCALE_MODES
* @property {number} SCALE_MODES.DEFAULT=LINEAR
* @property {number} SCALE_MODES.LINEAR Smooth scaling
* @property {number} SCALE_MODES.NEAREST Pixelating scaling
*/
SCALE_MODES: {
DEFAULT: 0,
LINEAR: 0,
NEAREST: 1
},
/**
* The prefix that denotes a URL is for a retina asset
*
* @static
* @constant
* @property {string} RETINA_PREFIX
*/
//example: '@2x',
RETINA_PREFIX: /@(.+)x/,
RESOLUTION:1,
FILTER_RESOLUTION:1,
/**
* The default render options if none are supplied to {@link PIXI.WebGLRenderer}
* or {@link PIXI.CanvasRenderer}.
*
* @static
* @constant
* @property {object} DEFAULT_RENDER_OPTIONS
* @property {HTMLCanvasElement} DEFAULT_RENDER_OPTIONS.view=null
* @property {boolean} DEFAULT_RENDER_OPTIONS.transparent=false
* @property {boolean} DEFAULT_RENDER_OPTIONS.antialias=false
* @property {boolean} DEFAULT_RENDER_OPTIONS.forceFXAA=false
* @property {boolean} DEFAULT_RENDER_OPTIONS.preserveDrawingBuffer=false
* @property {number} DEFAULT_RENDER_OPTIONS.resolution=1
* @property {number} DEFAULT_RENDER_OPTIONS.backgroundColor=0x000000
* @property {boolean} DEFAULT_RENDER_OPTIONS.clearBeforeRender=true
* @property {boolean} DEFAULT_RENDER_OPTIONS.autoResize=false
*/
DEFAULT_RENDER_OPTIONS: {
view: null,
resolution: 1,
antialias: false,
forceFXAA: false,
autoResize: false,
transparent: false,
backgroundColor: 0x000000,
clearBeforeRender: true,
preserveDrawingBuffer: false
},
/**
* Constants that identify shapes, mainly to prevent `instanceof` calls.
*
* @static
* @constant
* @property {object} SHAPES
* @property {object} SHAPES.POLY=0
* @property {object} SHAPES.RECT=1
* @property {object} SHAPES.CIRC=2
* @property {object} SHAPES.ELIP=3
* @property {object} SHAPES.RREC=4
*/
SHAPES: {
POLY: 0,
RECT: 1,
CIRC: 2,
ELIP: 3,
RREC: 4
},
SPRITE_BATCH_SIZE: 2000 //nice balance between mobile and desktop machines
};
},{"../../package.json":11}],13:[function(require,module,exports){
var math = require('../math'),
DisplayObject = require('./DisplayObject'),
RenderTexture = require('../textures/RenderTexture'),
_tempMatrix = new math.Matrix();
/**
* A Container represents a collection of display objects.
* It is the base class of all display objects that act as a container for other objects.
*
*```js
* var container = new PIXI.Container();
* container.addChild(sprite);
* ```
* @class
* @extends DisplayObject
* @memberof PIXI
*/
function Container()
{
DisplayObject.call(this);
/**
* The array of children of this container.
*
* @member {DisplayObject[]}
* @readonly
*/
this.children = [];
}
// constructor
Container.prototype = Object.create(DisplayObject.prototype);
Container.prototype.constructor = Container;
module.exports = Container;
Object.defineProperties(Container.prototype, {
/**
* The width of the Container, setting this will actually modify the scale to achieve the value set
*
* @member {number}
* @memberof Container#
*/
width: {
get: function ()
{
return this.scale.x * this.getLocalBounds().width;
},
set: function (value)
{
var width = this.getLocalBounds().width;
if (width !== 0)
{
this.scale.x = value / width;
}
else
{
this.scale.x = 1;
}
this._width = value;
}
},
/**
* The height of the Container, setting this will actually modify the scale to achieve the value set
*
* @member {number}
* @memberof Container#
*/
height: {
get: function ()
{
return this.scale.y * this.getLocalBounds().height;
},
set: function (value)
{
var height = this.getLocalBounds().height;
if (height !== 0)
{
this.scale.y = value / height ;
}
else
{
this.scale.y = 1;
}
this._height = value;
}
}
});
/**
* Adds a child to the container.
*
* @param child {DisplayObject} The DisplayObject to add to the container
* @return {DisplayObject} The child that was added.
*/
Container.prototype.addChild = function (child)
{
return this.addChildAt(child, this.children.length);
};
/**
* Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown
*
* @param child {DisplayObject} The child to add
* @param index {Number} The index to place the child in
* @return {DisplayObject} The child that was added.
*/
Container.prototype.addChildAt = function (child, index)
{
// prevent adding self as child
if (child === this)
{
return child;
}
if (index >= 0 && index <= this.children.length)
{
if (child.parent)
{
child.parent.removeChild(child);
}
child.parent = this;
this.children.splice(index, 0, child);
return child;
}
else
{
throw new Error(child + 'addChildAt: The index '+ index +' supplied is out of bounds ' + this.children.length);
}
};
/**
* Swaps the position of 2 Display Objects within this container.
*
* @param child {DisplayObject}
* @param child2 {DisplayObject}
*/
Container.prototype.swapChildren = function (child, child2)
{
if (child === child2)
{
return;
}
var index1 = this.getChildIndex(child);
var index2 = this.getChildIndex(child2);
if (index1 < 0 || index2 < 0)
{
throw new Error('swapChildren: Both the supplied DisplayObjects must be children of the caller.');
}
this.children[index1] = child2;
this.children[index2] = child;
};
/**
* Returns the index position of a child DisplayObject instance
*
* @param child {DisplayObject} The DisplayObject instance to identify
* @return {Number} The index position of the child display object to identify
*/
Container.prototype.getChildIndex = function (child)
{
var index = this.children.indexOf(child);
if (index === -1)
{
throw new Error('The supplied DisplayObject must be a child of the caller');
}
return index;
};
/**
* Changes the position of an existing child in the display object container
*
* @param child {DisplayObject} The child DisplayObject instance for which you want to change the index number
* @param index {Number} The resulting index number for the child display object
*/
Container.prototype.setChildIndex = function (child, index)
{
if (index < 0 || index >= this.children.length)
{
throw new Error('The supplied index is out of bounds');
}
var currentIndex = this.getChildIndex(child);
this.children.splice(currentIndex, 1); //remove from old position
this.children.splice(index, 0, child); //add at new position
};
/**
* Returns the child at the specified index
*
* @param index {Number} The index to get the child at
* @return {DisplayObject} The child at the given index, if any.
*/
Container.prototype.getChildAt = function (index)
{
if (index < 0 || index >= this.children.length)
{
throw new Error('getChildAt: Supplied index ' + index + ' does not exist in the child list, or the supplied DisplayObject is not a child of the caller');
}
return this.children[index];
};
/**
* Removes a child from the container.
*
* @param child {DisplayObject} The DisplayObject to remove
* @return {DisplayObject} The child that was removed.
*/
Container.prototype.removeChild = function (child)
{
var index = this.children.indexOf(child);
if (index === -1)
{
return;
}
return this.removeChildAt(index);
};
/**
* Removes a child from the specified index position.
*
* @param index {Number} The index to get the child from
* @return {DisplayObject} The child that was removed.
*/
Container.prototype.removeChildAt = function (index)
{
var child = this.getChildAt(index);
child.parent = null;
this.children.splice(index, 1);
return child;
};
/**
* Removes all children from this container that are within the begin and end indexes.
*
* @param beginIndex {Number} The beginning position. Default value is 0.
* @param endIndex {Number} The ending position. Default value is size of the container.
*/
Container.prototype.removeChildren = function (beginIndex, endIndex)
{
var begin = beginIndex || 0;
var end = typeof endIndex === 'number' ? endIndex : this.children.length;
var range = end - begin;
if (range > 0 && range <= end)
{
var removed = this.children.splice(begin, range);
for (var i = 0; i < removed.length; ++i)
{
removed[i].parent = null;
}
return removed;
}
else if (range === 0 && this.children.length === 0)
{
return [];
}
else
{
throw new RangeError('removeChildren: numeric values are outside the acceptable range.');
}
};
/**
* Useful function that returns a texture of the display object that can then be used to create sprites
* This can be quite useful if your displayObject is static / complicated and needs to be reused multiple times.
*
* @param renderer {CanvasRenderer|WebGLRenderer} The renderer used to generate the texture.
* @param resolution {Number} The resolution of the texture being generated
* @param scaleMode {Number} See {@link SCALE_MODES} for possible values
* @return {Texture} a texture of the display object
*/
Container.prototype.generateTexture = function (renderer, resolution, scaleMode)
{
var bounds = this.getLocalBounds();
var renderTexture = new RenderTexture(renderer, bounds.width | 0, bounds.height | 0, renderer, scaleMode, resolution);
_tempMatrix.tx = -bounds.x;
_tempMatrix.ty = -bounds.y;
renderTexture.render(this, _tempMatrix);
return renderTexture;
};
/*
* Updates the transform on all children of this container for rendering
*
* @private
*/
Container.prototype.updateTransform = function ()
{
if (!this.visible)
{
return;
}
this.displayObjectUpdateTransform();
for (var i = 0, j = this.children.length; i < j; ++i)
{
this.children[i].updateTransform();
}
};
// performance increase to avoid using call.. (10x faster)
Container.prototype.containerUpdateTransform = Container.prototype.updateTransform;
/**
* Retrieves the bounds of the Container as a rectangle. The bounds calculation takes all visible children into consideration.
*
* @return {Rectangle} The rectangular bounding area
*/
Container.prototype.getBounds = function ()
{
if(!this._currentBounds)
{
if (this.children.length === 0)
{
return math.Rectangle.EMPTY;
}
// TODO the bounds have already been calculated this render session so return what we have
var minX = Infinity;
var minY = Infinity;
var maxX = -Infinity;
var maxY = -Infinity;
var childBounds;
var childMaxX;
var childMaxY;
var childVisible = false;
for (var i = 0, j = this.children.length; i < j; ++i)
{
var child = this.children[i];
if (!child.visible)
{
continue;
}
childVisible = true;
childBounds = this.children[i].getBounds();
minX = minX < childBounds.x ? minX : childBounds.x;
minY = minY < childBounds.y ? minY : childBounds.y;
childMaxX = childBounds.width + childBounds.x;
childMaxY = childBounds.height + childBounds.y;
maxX = maxX > childMaxX ? maxX : childMaxX;
maxY = maxY > childMaxY ? maxY : childMaxY;
}
if (!childVisible)
{
return math.Rectangle.EMPTY;
}
var bounds = this._bounds;
bounds.x = minX;
bounds.y = minY;
bounds.width = maxX - minX;
bounds.height = maxY - minY;
this._currentBounds = bounds;
}
return this._currentBounds;
};
/**
* Retrieves the non-global local bounds of the Container as a rectangle.
* The calculation takes all visible children into consideration.
*
* @return {Rectangle} The rectangular bounding area
*/
Container.prototype.getLocalBounds = function ()
{
var matrixCache = this.worldTransform;
this.worldTransform = math.Matrix.IDENTITY;
for (var i = 0, j = this.children.length; i < j; ++i)
{
this.children[i].updateTransform();
}
this.worldTransform = matrixCache;
this._currentBounds = null;
return this.getBounds();
};
/**
* Renders the object using the WebGL renderer
*
* @param renderer {WebGLRenderer} The renderer
*/
Container.prototype.renderWebGL = function (renderer)
{
// if the object is not visible or the alpha is 0 then no need to render this element
if (!this.visible || this.worldAlpha <= 0 || !this.renderable)
{
return;
}
var i, j;
// do a quick check to see if this element has a mask or a filter.
if (this._mask || this._filters)
{
renderer.currentRenderer.flush();
// push filter first as we need to ensure the stencil buffer is correct for any masking
if (this._filters)
{
renderer.filterManager.pushFilter(this, this._filters);
}
if (this._mask)
{
renderer.maskManager.pushMask(this, this._mask);
}
renderer.currentRenderer.start();
// add this object to the batch, only rendered if it has a texture.
this._renderWebGL(renderer);
// now loop through the children and make sure they get rendered
for (i = 0, j = this.children.length; i < j; i++)
{
this.children[i].renderWebGL(renderer);
}
renderer.currentRenderer.flush();
if (this._mask)
{
renderer.maskManager.popMask(this, this._mask);
}
if (this._filters)
{
renderer.filterManager.popFilter();
}
renderer.currentRenderer.start();
}
else
{
this._renderWebGL(renderer);
// simple render children!
for (i = 0, j = this.children.length; i < j; ++i)
{
this.children[i].renderWebGL(renderer);
}
}
};
/**
* To be overridden by the subclass
*
* @param renderer {WebGLRenderer} The renderer
* @private
*/
Container.prototype._renderWebGL = function (renderer)
{
// this is where content itself gets rendered...
};
/**
* To be overridden by the subclass
*
* @param renderer {CanvasRenderer} The renderer
* @private
*/
Container.prototype._renderCanvas = function (renderer)
{
// this is where content itself gets rendered...
};
/**
* Renders the object using the Canvas renderer
*
* @param renderer {CanvasRenderer} The renderer
*/
Container.prototype.renderCanvas = function (renderer)
{
// if not visible or the alpha is 0 then no need to render this
if (!this.visible || this.alpha <= 0 || !this.renderable)
{
return;
}
if (this._mask)
{
renderer.maskManager.pushMask(this._mask, renderer);
}
this._renderCanvas(renderer);
for (var i = 0, j = this.children.length; i < j; ++i)
{
this.children[i].renderCanvas(renderer);
}
if (this._mask)
{
renderer.maskManager.popMask(renderer);
}
};
/**
* Destroys the container
*
*/
Container.prototype.destroy = function ()
{
this.children = null;
};
},{"../math":22,"../textures/RenderTexture":59,"./DisplayObject":14}],14:[function(require,module,exports){
var math = require('../math'),
utils = require('../utils'),
RenderTexture = require('../textures/RenderTexture'),
_tempMatrix = new math.Matrix();
/**
* The base class for all objects that are rendered on the screen.
* This is an abstract class and should not be used on its own rather it should be extended.
*
* @class
* @memberof PIXI
*/
function DisplayObject()
{
/**
* The coordinate of the object relative to the local coordinates of the parent.
*
* @member {Point}
*/
this.position = new math.Point();
/**
* The scale factor of the object.
*
* @member {Point}
*/
this.scale = new math.Point(1, 1);
/**
* The pivot point of the displayObject that it rotates around
*
* @member {Point}
*/
this.pivot = new math.Point(0, 0);
/**
* The rotation of the object in radians.
*
* @member {number}
*/
this.rotation = 0;
/**
* The opacity of the object.
*
* @member {number}
*/
this.alpha = 1;
/**
* The visibility of the object. If false the object will not be drawn, and
* the updateTransform function will not be called.
*
* @member {boolean}
*/
this.visible = true;
/**
* Can this object be rendered, if false the object will not be drawn but the updateTransform
* methods will still be called.
*
* @member {boolean}
*/
this.renderable = true;
/**
* The display object container that contains this display object.
*
* @member {Container}
* @readOnly
*/
this.parent = null;
/**
* The multiplied alpha of the displayObject
*
* @member {number}
* @readOnly
*/
this.worldAlpha = 1;
/**
* Current transform of the object based on world (parent) factors
*
* @member {Matrix}
* @readOnly
*/
this.worldTransform = new math.Matrix();
/**
* The area the filter is applied to. This is used as more of an optimisation
* rather than figuring out the dimensions of the displayObject each frame you can set this rectangle
*
* @member {Rectangle}
*/
this.filterArea = null;
/**
* cached sin rotation
*
* @member {number}
* @private
*/
this._sr = 0;
/**
* cached cos rotation
*
* @member {number}
* @private
*/
this._cr = 1;
/**
* The original, cached bounds of the object
*
* @member {Rectangle}
* @private
*/
this._bounds = new math.Rectangle(0, 0, 1, 1);
/**
* The most up-to-date bounds of the object
*
* @member {Rectangle}
* @private
*/
this._currentBounds = null;
/**
* The original, cached mask of the object
*
* @member {Rectangle}
* @private
*/
this._mask = null;
//TODO rename to _isMask
// this.isMask = false;
/**
* Cached internal flag.
*
* @member {boolean}
* @private
*/
this._cacheAsBitmap = false;
this._cachedObject = null;
}
// constructor
DisplayObject.prototype.constructor = DisplayObject;
utils.eventTarget.mixin(DisplayObject.prototype);
module.exports = DisplayObject;
Object.defineProperties(DisplayObject.prototype, {
/**
* The position of the displayObject on the x axis relative to the local coordinates of the parent.
*
* @member {number}
* @memberof DisplayObject#
*/
x: {
get: function ()
{
return this.position.x;
},
set: function (value)
{
this.position.x = value;
}
},
/**
* The position of the displayObject on the y axis relative to the local coordinates of the parent.
*
* @member {number}
* @memberof DisplayObject#
*/
y: {
get: function ()
{
return this.position.y;
},
set: function (value)
{
this.position.y = value;
}
},
/**
* Indicates if the sprite is globally visible.
*
* @member {boolean}
* @memberof DisplayObject#
* @readonly
*/
worldVisible: {
get: function ()
{
var item = this;
do {
if (!item.visible)
{
return false;
}
item = item.parent;
} while (item);
return true;
}
},
/**
* Sets a mask for the displayObject. A mask is an object that limits the visibility of an object to the shape of the mask applied to it.
* In PIXI a regular mask must be a PIXI.Graphics object. This allows for much faster masking in canvas as it utilises shape clipping.
* To remove a mask, set this property to null.
*
* @member {Graphics}
* @memberof DisplayObject#
*/
mask: {
get: function ()
{
return this._mask;
},
set: function (value)
{
if (this._mask)
{
this._mask.renderable = true;
}
this._mask = value;
if (this._mask)
{
this._mask.renderable = false;
}
}
},
/**
* Sets the filters for the displayObject.
* * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer.
* To remove filters simply set this property to 'null'
*
* @member {Filter[]}
* @memberof DisplayObject#
*/
filters: {
get: function ()
{
return this._filters && this._filters.slice();
},
set: function (value)
{
this._filters = value && value.slice();
}
}
});
/*
* Updates the object transform for rendering
*
* TODO - Optimization pass!
*
* @private
*/
DisplayObject.prototype.updateTransform = function ()
{
// create some matrix refs for easy access
var pt = this.parent.worldTransform;
var wt = this.worldTransform;
// temporary matrix variables
var a, b, c, d, tx, ty;
// so if rotation is between 0 then we can simplify the multiplication process...
if (this.rotation % math.PI_2)
{
// check to see if the rotation is the same as the previous render. This means we only need to use sin and cos when rotation actually changes
if (this.rotation !== this.rotationCache)
{
this.rotationCache = this.rotation;
this._sr = Math.sin(this.rotation);
this._cr = Math.cos(this.rotation);
}
// get the matrix values of the displayobject based on its transform properties..
a = this._cr * this.scale.x;
b = this._sr * this.scale.x;
c = -this._sr * this.scale.y;
d = this._cr * this.scale.y;
tx = this.position.x;
ty = this.position.y;
// check for pivot.. not often used so geared towards that fact!
if (this.pivot.x || this.pivot.y)
{
tx -= this.pivot.x * a + this.pivot.y * c;
ty -= this.pivot.x * b + this.pivot.y * d;
}
// concat the parent matrix with the objects transform.
wt.a = a * pt.a + b * pt.c;
wt.b = a * pt.b + b * pt.d;
wt.c = c * pt.a + d * pt.c;
wt.d = c * pt.b + d * pt.d;
wt.tx = tx * pt.a + ty * pt.c + pt.tx;
wt.ty = tx * pt.b + ty * pt.d + pt.ty;
}
else
{
// lets do the fast version as we know there is no rotation..
a = this.scale.x;
d = this.scale.y;
tx = this.position.x - this.pivot.x * a;
ty = this.position.y - this.pivot.y * d;
wt.a = a * pt.a;
wt.b = a * pt.b;
wt.c = d * pt.c;
wt.d = d * pt.d;
wt.tx = tx * pt.a + ty * pt.c + pt.tx;
wt.ty = tx * pt.b + ty * pt.d + pt.ty;
}
// multiply the alphas..
this.worldAlpha = this.alpha * this.parent.worldAlpha;
// reset the bounds each time this is called!
this._currentBounds = null;
};
// performance increase to avoid using call.. (10x faster)
DisplayObject.prototype.displayObjectUpdateTransform = DisplayObject.prototype.updateTransform;
/**
*
*
* Retrieves the bounds of the displayObject as a rectangle object
*
* @param matrix {Matrix}
* @return {Rectangle} the rectangular bounding area
*/
DisplayObject.prototype.getBounds = function (matrix)
{
return math.Rectangle.EMPTY;
};
/**
* Retrieves the local bounds of the displayObject as a rectangle object
*
* @return {Rectangle} the rectangular bounding area
*/
DisplayObject.prototype.getLocalBounds = function ()
{
return this.getBounds(math.Matrix.IDENTITY);
};
/**
* Calculates the global position of the display object
*
* @param position {Point} The world origin to calculate from
* @return {Point} A point object representing the position of this object
*/
DisplayObject.prototype.toGlobal = function (position)
{
// don't need to update the lot
this.displayObjectUpdateTransform();
return this.worldTransform.apply(position);
};
/**
* Calculates the local position of the display object relative to another point
*
* @param position {Point} The world origin to calculate from
* @param [from] {DisplayObject} The DisplayObject to calculate the global position from
* @return {Point} A point object representing the position of this object
*/
DisplayObject.prototype.toLocal = function (position, from)
{
if (from)
{
position = from.toGlobal(position);
}
// don't need to update the lot
this.displayObjectUpdateTransform();
return this.worldTransform.applyInverse(position);
};
/**
* Renders the object using the WebGL renderer
*
* @param renderer {WebGLRenderer} The renderer
* @private
*/
DisplayObject.prototype.renderWebGL = function (renderer)
{
// OVERWRITE;
};
/**
* Renders the object using the Canvas renderer
*
* @param renderer {CanvasRenderer} The renderer
* @private
*/
DisplayObject.prototype.renderCanvas = function (renderer)
{
// OVERWRITE;
};
/**
* Useful function that returns a texture of the display object that can then be used to create sprites
* This can be quite useful if your displayObject is static / complicated and needs to be reused multiple times.
*
* @param renderer {CanvasRenderer|WebGLRenderer} The renderer used to generate the texture.
* @param resolution {Number} The resolution of the texture being generated
* @param scaleMode {Number} See {@link SCALE_MODES} for possible values
* @return {Texture} a texture of the display object
*/
DisplayObject.prototype.generateTexture = function (renderer, resolution, scaleMode)
{
var bounds = this.getLocalBounds();
var renderTexture = new RenderTexture(renderer, bounds.width | 0, bounds.height | 0, renderer, scaleMode, resolution);
_tempMatrix.tx = -bounds.x;
_tempMatrix.ty = -bounds.y;
renderTexture.render(this, _tempMatrix);
return renderTexture;
};
/**
* Base destroy method for generic display objects
*
*/
DisplayObject.prototype.destroy = function ()
{
this.position = null;
this.scale = null;
this.pivot = null;
this._bounds = null;
this._currentBounds = null;
this._mask = null;
this.worldTransform = null;
this.filterArea = null;
this.listeners = null;
};
},{"../math":22,"../textures/RenderTexture":59,"../utils":66}],15:[function(require,module,exports){
var Container = require('../display/Container'),
Sprite = require('../sprites/Sprite'),
Texture = require('../textures/Texture'),
CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'),
CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'),
GraphicsData = require('./GraphicsData'),
math = require('../math'),
CONST = require('../const'),
tempPoint = new math.Point();
/**
* The Graphics class contains methods used to draw primitive shapes such as lines, circles and
* rectangles to the display, and to color and fill them.
*
* @class
* @extends Container
* @memberof PIXI
*/
function Graphics()
{
Container.call(this);
/**
* The alpha value used when filling the Graphics object.
*
* @member {number}
* @default 1
*/
this.fillAlpha = 1;
/**
* The width (thickness) of any lines drawn.
*
* @member {number}
* @default 0
*/
this.lineWidth = 0;
/**
* The color of any lines drawn.
*
* @member {string}
* @default 0
*/
this.lineColor = 0;
/**
* Graphics data
*
* @member {GraphicsData[]}
* @private
*/
this.graphicsData = [];
/**
* The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint.
*
* @member {number}
* @default 0xFFFFFF
*/
this.tint = 0xFFFFFF;
/**
* The previous tint applied to the graphic shape. Used to compare to the current tint and check if theres change.
*
* @member {number}
* @private
* @default 0xFFFFFF
*/
this._prevTint = 0xFFFFFF;
/**
* The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode.
*
* @member {number}
* @default CONST.BLEND_MODES.NORMAL;
*/
this.blendMode = CONST.BLEND_MODES.NORMAL;
/**
* Current path
*
* @member {GraphicsData}
* @private
*/
this.currentPath = null;
/**
* Array containing some WebGL-related properties used by the WebGL renderer.
*
* @member {object<number, object>}
* @private
*/
// TODO - _webgl should use a prototype object, not a random undocumented object...
this._webGL = {};
/**
* Whether this shape is being used as a mask.
*
* @member {boolean}
*/
this.isMask = false;
/**
* The bounds' padding used for bounds calculation.
*
* @member {number}
*/
this.boundsPadding = 0;
/**
* A cache of the local bounds to prevent recalculation.
*
* @member {Rectangle}
* @private
*/
this._localBounds = new math.Rectangle(0,0,1,1);
/**
* Used to detect if the graphics object has changed. If this is set to true then the graphics
* object will be recalculated.
*
* @member {boolean}
* @private
*/
this.dirty = true;
/**
* Used to detect if the WebGL graphics object has changed. If this is set to true then the
* graphics object will be recalculated.
*
* @member {boolean}
* @private
*/
this.glDirty = false;
/**
* Used to detect if the cached sprite object needs to be updated.
*
* @member {boolean}
* @private
*/
this.cachedSpriteDirty = false;
}
// constructor
Graphics.prototype = Object.create(Container.prototype);
Graphics.prototype.constructor = Graphics;
module.exports = Graphics;
Object.defineProperties(Graphics.prototype, {
/**
* When cacheAsBitmap is set to true the graphics object will be rendered as if it was a sprite.
* This is useful if your graphics element does not change often, as it will speed up the rendering
* of the object in exchange for taking up texture memory. It is also useful if you need the graphics
* object to be anti-aliased, because it will be rendered using canvas. This is not recommended if
* you are constantly redrawing the graphics element.
*
* @member {boolean}
* @memberof Graphics#
* @default false
* @private
*/
});
/**
* Creates a new Graphics object with the same values as this one.
*
* @return {Graphics}
*/
Graphics.prototype.clone = function ()
{
var clone = new Graphics();
clone.renderable = this.renderable;
clone.fillAlpha = this.fillAlpha;
clone.lineWidth = this.lineWidth;
clone.lineColor = this.lineColor;
clone.tint = this.tint;
clone.blendMode = this.blendMode;
clone.isMask = this.isMask;
clone.boundsPadding = this.boundsPadding;
clone.dirty = this.dirty;
clone.glDirty = this.glDirty;
clone.cachedSpriteDirty = this.cachedSpriteDirty;
// copy graphics data
for (var i = 0; i < this.graphicsData.length; ++i)
{
clone.graphicsData.push(this.graphicsData.clone());
}
clone.currentPath = clone.graphicsData[clone.graphicsData.length - 1];
clone.updateLocalBounds();
return clone;
};
/**
* Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.
*
* @param lineWidth {number} width of the line to draw, will update the objects stored style
* @param color {number} color of the line to draw, will update the objects stored style
* @param alpha {number} alpha of the line to draw, will update the objects stored style
* @return {Graphics}
*/
Graphics.prototype.lineStyle = function (lineWidth, color, alpha)
{
this.lineWidth = lineWidth || 0;
this.lineColor = color || 0;
this.lineAlpha = (arguments.length < 3) ? 1 : alpha;
if (this.currentPath)
{
if (this.currentPath.shape.points.length)
{
// halfway through a line? start a new one!
this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) ));
}
else
{
// otherwise its empty so lets just set the line properties
this.currentPath.lineWidth = this.lineWidth;
this.currentPath.lineColor = this.lineColor;
this.currentPath.lineAlpha = this.lineAlpha;
}
}
return this;
};
/**
* Moves the current drawing position to x, y.
*
* @param x {number} the X coordinate to move to
* @param y {number} the Y coordinate to move to
* @return {Graphics}
*/
Graphics.prototype.moveTo = function (x, y)
{
this.drawShape(new math.Polygon([x,y]));
return this;
};
/**
* Draws a line using the current line style from the current drawing position to (x, y);
* The current drawing position is then set to (x, y).
*
* @param x {number} the X coordinate to draw to
* @param y {number} the Y coordinate to draw to
* @return {Graphics}
*/
Graphics.prototype.lineTo = function (x, y)
{
this.currentPath.shape.points.push(x, y);
this.dirty = true;
return this;
};
/**
* Calculate the points for a quadratic bezier curve and then draws it.
* Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
*
* @param cpX {number} Control point x
* @param cpY {number} Control point y
* @param toX {number} Destination point x
* @param toY {number} Destination point y
* @return {Graphics}
*/
Graphics.prototype.quadraticCurveTo = function (cpX, cpY, toX, toY)
{
if (this.currentPath)
{
if (this.currentPath.shape.points.length === 0)
{
this.currentPath.shape.points = [0, 0];
}
}
else
{
this.moveTo(0,0);
}
var xa,
ya,
n = 20,
points = this.currentPath.shape.points;
if (points.length === 0)
{
this.moveTo(0, 0);
}
var fromX = points[points.length-2];
var fromY = points[points.length-1];
var j = 0;
for (var i = 1; i <= n; ++i)
{
j = i / n;
xa = fromX + ( (cpX - fromX) * j );
ya = fromY + ( (cpY - fromY) * j );
points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ),
ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) );
}
this.dirty = true;
return this;
};
/**
* Calculate the points for a bezier curve and then draws it.
*
* @param cpX {number} Control point x
* @param cpY {number} Control point y
* @param cpX2 {number} Second Control point x
* @param cpY2 {number} Second Control point y
* @param toX {number} Destination point x
* @param toY {number} Destination point y
* @return {Graphics}
*/
Graphics.prototype.bezierCurveTo = function (cpX, cpY, cpX2, cpY2, toX, toY)
{
if (this.currentPath)
{
if (this.currentPath.shape.points.length === 0)
{
this.currentPath.shape.points = [0, 0];
}
}
else
{
this.moveTo(0,0);
}
var n = 20,
dt,
dt2,
dt3,
t2,
t3,
points = this.currentPath.shape.points;
var fromX = points[points.length-2];
var fromY = points[points.length-1];
var j = 0;
for (var i = 1; i <= n; ++i)
{
j = i / n;
dt = (1 - j);
dt2 = dt * dt;
dt3 = dt2 * dt;
t2 = j * j;
t3 = t2 * j;
points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX,
dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY);
}
this.dirty = true;
return this;
};
/**
* The arcTo() method creates an arc/curve between two tangents on the canvas.
*
* "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!
*
* @param x1 {number} The x-coordinate of the beginning of the arc
* @param y1 {number} The y-coordinate of the beginning of the arc
* @param x2 {number} The x-coordinate of the end of the arc
* @param y2 {number} The y-coordinate of the end of the arc
* @param radius {number} The radius of the arc
* @return {Graphics}
*/
Graphics.prototype.arcTo = function (x1, y1, x2, y2, radius)
{
if (this.currentPath)
{
if (this.currentPath.shape.points.length === 0)
{
this.currentPath.shape.points.push(x1, y1);
}
}
else
{
this.moveTo(x1, y1);
}
var points = this.currentPath.shape.points,
fromX = points[points.length-2],
fromY = points[points.length-1],
a1 = fromY - y1,
b1 = fromX - x1,
a2 = y2 - y1,
b2 = x2 - x1,
mm = Math.abs(a1 * b2 - b1 * a2);
if (mm < 1.0e-8 || radius === 0)
{
if (points[points.length-2] !== x1 || points[points.length-1] !== y1)
{
points.push(x1, y1);
}
}
else
{
var dd = a1 * a1 + b1 * b1,
cc = a2 * a2 + b2 * b2,
tt = a1 * a2 + b1 * b2,
k1 = radius * Math.sqrt(dd) / mm,
k2 = radius * Math.sqrt(cc) / mm,
j1 = k1 * tt / dd,
j2 = k2 * tt / cc,
cx = k1 * b2 + k2 * b1,
cy = k1 * a2 + k2 * a1,
px = b1 * (k2 + j1),
py = a1 * (k2 + j1),
qx = b2 * (k1 + j2),
qy = a2 * (k1 + j2),
startAngle = Math.atan2(py - cy, px - cx),
endAngle = Math.atan2(qy - cy, qx - cx);
this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1);
}
this.dirty = true;
return this;
};
/**
* The arc method creates an arc/curve (used to create circles, or parts of circles).
*
* @param cx {number} The x-coordinate of the center of the circle
* @param cy {number} The y-coordinate of the center of the circle
* @param radius {number} The radius of the circle
* @param startAngle {number} The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
* @param endAngle {number} The ending angle, in radians
* @param anticlockwise {boolean} Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.
* @return {Graphics}
*/
Graphics.prototype.arc = function(cx, cy, radius, startAngle, endAngle, anticlockwise)
{
var startX = cx + Math.cos(startAngle) * radius;
var startY = cy + Math.sin(startAngle) * radius;
var points;
if( this.currentPath )
{
points = this.currentPath.shape.points;
if(points.length === 0)
{
points.push(startX, startY);
}
else if( points[points.length-2] !== startX || points[points.length-1] !== startY)
{
points.push(startX, startY);
}
}
else
{
this.moveTo(startX, startY);
points = this.currentPath.shape.points;
}
if (startAngle === endAngle)
{
return this;
}
if( !anticlockwise && endAngle <= startAngle )
{
endAngle += Math.PI * 2;
}
else if( anticlockwise && startAngle <= endAngle )
{
startAngle += Math.PI * 2;
}
var sweep = anticlockwise ? (startAngle - endAngle) *-1 : (endAngle - startAngle);
var segs = Math.ceil( Math.abs(sweep)/ (Math.PI * 2) ) * 40;
if( sweep === 0 )
{
return this;
}
var theta = sweep/(segs*2);
var theta2 = theta*2;
var cTheta = Math.cos(theta);
var sTheta = Math.sin(theta);
var segMinus = segs - 1;
var remainder = ( segMinus % 1 ) / segMinus;
for(var i=0; i<=segMinus; i++)
{
var real = i + remainder * i;
var angle = ((theta) + startAngle + (theta2 * real));
var c = Math.cos(angle);
var s = -Math.sin(angle);
points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx,
( (cTheta * -s) + (sTheta * c) ) * radius + cy);
}
this.dirty = true;
return this;
};
/**
* Specifies a simple one-color fill that subsequent calls to other Graphics methods
* (such as lineTo() or drawCircle()) use when drawing.
*
* @param color {number} the color of the fill
* @param alpha {number} the alpha of the fill
* @return {Graphics}
*/
Graphics.prototype.beginFill = function (color, alpha)
{
this.filling = true;
this.fillColor = color || 0;
this.fillAlpha = (alpha === undefined) ? 1 : alpha;
if (this.currentPath)
{
if (this.currentPath.shape.points.length <= 2)
{
this.currentPath.fill = this.filling;
this.currentPath.fillColor = this.fillColor;
this.currentPath.fillAlpha = this.fillAlpha;
}
}
return this;
};
/**
* Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
*
* @return {Graphics}
*/
Graphics.prototype.endFill = function ()
{
this.filling = false;
this.fillColor = null;
this.fillAlpha = 1;
return this;
};
/**
*
* @param x {number} The X coord of the top-left of the rectangle
* @param y {number} The Y coord of the top-left of the rectangle
* @param width {number} The width of the rectangle
* @param height {number} The height of the rectangle
* @return {Graphics}
*/
Graphics.prototype.drawRect = function ( x, y, width, height )
{
this.drawShape(new math.Rectangle(x,y, width, height));
return this;
};
/**
*
* @param x {number} The X coord of the top-left of the rectangle
* @param y {number} The Y coord of the top-left of the rectangle
* @param width {number} The width of the rectangle
* @param height {number} The height of the rectangle
* @param radius {number} Radius of the rectangle corners
*/
Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius )
{
this.drawShape(new math.RoundedRectangle(x, y, width, height, radius));
return this;
};
/**
* Draws a circle.
*
* @param x {number} The X coordinate of the center of the circle
* @param y {number} The Y coordinate of the center of the circle
* @param radius {number} The radius of the circle
* @return {Graphics}
*/
Graphics.prototype.drawCircle = function (x, y, radius)
{
this.drawShape(new math.Circle(x,y, radius));
return this;
};
/**
* Draws an ellipse.
*
* @param x {number} The X coordinate of the center of the ellipse
* @param y {number} The Y coordinate of the center of the ellipse
* @param width {number} The half width of the ellipse
* @param height {number} The half height of the ellipse
* @return {Graphics}
*/
Graphics.prototype.drawEllipse = function (x, y, width, height)
{
this.drawShape(new math.Ellipse(x, y, width, height));
return this;
};
/**
* Draws a polygon using the given path.
*
* @param path {Array} The path data used to construct the polygon.
* @return {Graphics}
*/
Graphics.prototype.drawPolygon = function (path)
{
if (!(path instanceof Array))
{
path = Array.prototype.slice.call(arguments);
}
this.drawShape(new math.Polygon(path));
return this;
};
/**
* Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
*
* @return {Graphics}
*/
Graphics.prototype.clear = function ()
{
this.lineWidth = 0;
this.filling = false;
this.dirty = true;
this.clearDirty = true;
this.graphicsData = [];
return this;
};
/**
* Useful function that returns a texture of the graphics object that can then be used to create sprites
* This can be quite useful if your geometry is complicated and needs to be reused multiple times.
*
* @param resolution {number} The resolution of the texture being generated
* @param scaleMode {number} Should be one of the scaleMode consts
* @return {Texture} a texture of the graphics object
*/
Graphics.prototype.generateTexture = function (resolution, scaleMode)
{
resolution = resolution || 1;
var bounds = this.getBounds();
var canvasBuffer = new CanvasBuffer(bounds.width * resolution, bounds.height * resolution);
var texture = Texture.fromCanvas(canvasBuffer.canvas, scaleMode);
texture.baseTexture.resolution = resolution;
canvasBuffer.context.scale(resolution, resolution);
canvasBuffer.context.translate(-bounds.x,-bounds.y);
CanvasGraphics.renderGraphics(this, canvasBuffer.context);
return texture;
};
/**
* Renders the object using the WebGL renderer
*
* @param renderer {WebGLRenderer}
*/
Graphics.prototype._renderWebGL = function (renderer)
{
// if the sprite is not visible or the alpha is 0 then no need to render this element
// this code may still be needed so leaving for now..
//
/*
if (this._cacheAsBitmap)
{
if (this.dirty || this.cachedSpriteDirty)
{
this._generateCachedSprite();
// we will also need to update the texture on the gpu too!
this.updateCachedSpriteTexture();
this.cachedSpriteDirty = false;
this.dirty = false;
}
this._cachedSprite.worldAlpha = this.worldAlpha;
Sprite.prototype.renderWebGL.call(this._cachedSprite, renderer);
return;
}
*/
if (this.glDirty)
{
this.dirty = true;
this.glDirty = false;
}
renderer.setObjectRenderer(renderer.plugins.graphics);
renderer.plugins.graphics.render(this);
};
/**
* Renders the object using the Canvas renderer
*
* @param renderer {CanvasRenderer}
* @private
*/
Graphics.prototype._renderCanvas = function (renderer)
{
if (this.isMask === true)
{
return;
}
// if the tint has changed, set the graphics object to dirty.
if (this._prevTint !== this.tint) {
this.dirty = true;
this._prevTint = this.tint;
}
if (this._cacheAsBitmap)
{
if (this.dirty || this.cachedSpriteDirty)
{
this._generateCachedSprite();
// we will also need to update the texture
this.updateCachedSpriteTexture();
this.cachedSpriteDirty = false;
this.dirty = false;
}
this._cachedSprite.alpha = this.alpha;
Sprite.prototype._renderCanvas.call(this._cachedSprite, renderer);
return;
}
else
{
var context = renderer.context;
var transform = this.worldTransform;
if (this.blendMode !== renderer.currentBlendMode)
{
renderer.currentBlendMode = this.blendMode;
context.globalCompositeOperation = renderer.blendModes[renderer.currentBlendMode];
}
var resolution = renderer.resolution;
context.setTransform(
transform.a * resolution,
transform.b * resolution,
transform.c * resolution,
transform.d * resolution,
transform.tx * resolution,
transform.ty * resolution
);
CanvasGraphics.renderGraphics(this, context);
}
};
/**
* Retrieves the bounds of the graphic shape as a rectangle object
*
* @return {Rectangle} the rectangular bounding area
*/
Graphics.prototype.getBounds = function (matrix)
{
if(!this._currentBounds)
{
// return an empty object if the item is a mask!
if (!this.renderable)
{
return math.Rectangle.EMPTY;
}
if (this.dirty)
{
this.updateLocalBounds();
this.glDirty = true;
this.cachedSpriteDirty = true;
this.dirty = false;
}
var bounds = this._localBounds;
var w0 = bounds.x;
var w1 = bounds.width + bounds.x;
var h0 = bounds.y;
var h1 = bounds.height + bounds.y;
var worldTransform = matrix || this.worldTransform;
var a = worldTransform.a;
var b = worldTransform.b;
var c = worldTransform.c;
var d = worldTransform.d;
var tx = worldTransform.tx;
var ty = worldTransform.ty;
var x1 = a * w1 + c * h1 + tx;
var y1 = d * h1 + b * w1 + ty;
var x2 = a * w0 + c * h1 + tx;
var y2 = d * h1 + b * w0 + ty;
var x3 = a * w0 + c * h0 + tx;
var y3 = d * h0 + b * w0 + ty;
var x4 = a * w1 + c * h0 + tx;
var y4 = d * h0 + b * w1 + ty;
var maxX = x1;
var maxY = y1;
var minX = x1;
var minY = y1;
minX = x2 < minX ? x2 : minX;
minX = x3 < minX ? x3 : minX;
minX = x4 < minX ? x4 : minX;
minY = y2 < minY ? y2 : minY;
minY = y3 < minY ? y3 : minY;
minY = y4 < minY ? y4 : minY;
maxX = x2 > maxX ? x2 : maxX;
maxX = x3 > maxX ? x3 : maxX;
maxX = x4 > maxX ? x4 : maxX;
maxY = y2 > maxY ? y2 : maxY;
maxY = y3 > maxY ? y3 : maxY;
maxY = y4 > maxY ? y4 : maxY;
this._bounds.x = minX;
this._bounds.width = maxX - minX;
this._bounds.y = minY;
this._bounds.height = maxY - minY;
this._currentBounds = this._bounds;
}
return this._currentBounds;
};
/**
* Tests if a point is inside this graphics object
*
* @param point {Point} the point to test
* @return {boolean} the result of the test
*/
Graphics.prototype.containsPoint = function( point )
{
this.worldTransform.applyInverse(point, tempPoint);
var graphicsData = this.graphicsData;
for (var i = 0; i < graphicsData.length; i++)
{
var data = graphicsData[i];
if (!data.fill)
{
continue;
}
// only deal with fills..
if (data.shape)
{
if ( data.shape.contains( tempPoint.x, tempPoint.y ) )
{
return true;
}
}
}
return false;
};
/**
* Update the bounds of the object
*
*/
Graphics.prototype.updateLocalBounds = function ()
{
var minX = Infinity;
var maxX = -Infinity;
var minY = Infinity;
var maxY = -Infinity;
if (this.graphicsData.length)
{
var shape, points, x, y, w, h;
for (var i = 0; i < this.graphicsData.length; i++)
{
var data = this.graphicsData[i];
var type = data.type;
var lineWidth = data.lineWidth;
shape = data.shape;
if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC)
{
x = shape.x - lineWidth/2;
y = shape.y - lineWidth/2;
w = shape.width + lineWidth;
h = shape.height + lineWidth;
minX = x < minX ? x : minX;
maxX = x + w > maxX ? x + w : maxX;
minY = y < minY ? y : minY;
maxY = y + h > maxY ? y + h : maxY;
}
else if (type === CONST.SHAPES.CIRC)
{
x = shape.x;
y = shape.y;
w = shape.radius + lineWidth/2;
h = shape.radius + lineWidth/2;
minX = x - w < minX ? x - w : minX;
maxX = x + w > maxX ? x + w : maxX;
minY = y - h < minY ? y - h : minY;
maxY = y + h > maxY ? y + h : maxY;
}
else if (type === CONST.SHAPES.ELIP)
{
x = shape.x;
y = shape.y;
w = shape.width + lineWidth/2;
h = shape.height + lineWidth/2;
minX = x - w < minX ? x - w : minX;
maxX = x + w > maxX ? x + w : maxX;
minY = y - h < minY ? y - h : minY;
maxY = y + h > maxY ? y + h : maxY;
}
else
{
// POLY
points = shape.points;
for (var j = 0; j < points.length; j += 2)
{
x = points[j];
y = points[j+1];
minX = x-lineWidth < minX ? x-lineWidth : minX;
maxX = x+lineWidth > maxX ? x+lineWidth : maxX;
minY = y-lineWidth < minY ? y-lineWidth : minY;
maxY = y+lineWidth > maxY ? y+lineWidth : maxY;
}
}
}
}
else
{
minX = 0;
maxX = 0;
minY = 0;
maxY = 0;
}
var padding = this.boundsPadding;
this._localBounds.x = minX - padding;
this._localBounds.width = (maxX - minX) + padding * 2;
this._localBounds.y = minY - padding;
this._localBounds.height = (maxY - minY) + padding * 2;
};
/**
* Generates the cached sprite when the sprite has cacheAsBitmap = true
*
* @private
*/
/*
Graphics.prototype._generateCachedSprite = function ()
{
var bounds = this.getLocalBounds();
if (!this._cachedSprite)
{
var canvasBuffer = new CanvasBuffer(bounds.width, bounds.height);
var texture = Texture.fromCanvas(canvasBuffer.canvas);
this._cachedSprite = new Sprite(texture);
this._cachedSprite.buffer = canvasBuffer;
this._cachedSprite.worldTransform = this.worldTransform;
}
else
{
this._cachedSprite.buffer.resize(bounds.width, bounds.height);
}
// leverage the anchor to account for the offset of the element
this._cachedSprite.anchor.x = -( bounds.x / bounds.width );
this._cachedSprite.anchor.y = -( bounds.y / bounds.height );
// this._cachedSprite.buffer.context.save();
this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y);
// make sure we set the alpha of the graphics to 1 for the render..
this.worldAlpha = 1;
// now render the graphic..
CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context);
this._cachedSprite.alpha = this.alpha;
};
*/
/**
* Updates texture size based on canvas size
*
* @private
*/
/*
Graphics.prototype.updateCachedSpriteTexture = function ()
{
var cachedSprite = this._cachedSprite;
var texture = cachedSprite.texture;
var canvas = cachedSprite.buffer.canvas;
texture.baseTexture.width = canvas.width;
texture.baseTexture.height = canvas.height;
texture.crop.width = texture.frame.width = canvas.width;
texture.crop.height = texture.frame.height = canvas.height;
cachedSprite._width = canvas.width;
cachedSprite._height = canvas.height;
// update the dirty base textures
texture.baseTexture.dirty();
};*/
/**
* Destroys a previous cached sprite.
*
*/
/*
Graphics.prototype.destroyCachedSprite = function ()
{
this._cachedSprite.texture.destroy(true);
// let the gc collect the unused sprite
// TODO could be object pooled!
this._cachedSprite = null;
};*/
/**
* Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
*
* @param shape {Circle|Rectangle|Ellipse|Line|Polygon} The shape object to draw.
* @return {GraphicsData} The generated GraphicsData object.
*/
Graphics.prototype.drawShape = function (shape)
{
if (this.currentPath)
{
// check current path!
if (this.currentPath.shape.points.length <= 2)
{
this.graphicsData.pop();
}
}
this.currentPath = null;
var data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape);
this.graphicsData.push(data);
if (data.type === CONST.SHAPES.POLY)
{
data.shape.closed = this.filling;
this.currentPath = data;
}
this.dirty = true;
return data;
};
},{"../const":12,"../display/Container":13,"../math":22,"../renderers/canvas/utils/CanvasBuffer":34,"../renderers/canvas/utils/CanvasGraphics":35,"../sprites/Sprite":56,"../textures/Texture":60,"./GraphicsData":16}],16:[function(require,module,exports){
/**
* A GraphicsData object.
*
* @class
* @memberof PIXI
* @param lineWidth {number} the width of the line to draw
* @param lineColor {number} the color of the line to draw
* @param lineAlpha {number} the alpha of the line to draw
* @param fillColor {number} the color of the fill
* @param fillAlpha {number} the alpha of the fill
* @param fill {boolean} whether or not the shape is filled with a colour
* @param shape {Circle|Rectangle|Ellipse|Line|Polygon} The shape object to draw.
*/
function GraphicsData(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape)
{
/*
* @member {number} the width of the line to draw
*/
this.lineWidth = lineWidth;
/*
* @member {number} the color of the line to draw
*/
this.lineColor = lineColor;
/*
* @member {number} the alpha of the line to draw
*/
this.lineAlpha = lineAlpha;
/*
* @member {number} cached tint of the line to draw
*/
this._lineTint = lineColor;
/*
* @member {number} the color of the fill
*/
this.fillColor = fillColor;
/*
* @member {number} the alpha of the fill
*/
this.fillAlpha = fillAlpha;
/*
* @member {number} cached tint of the fill
*/
this._fillTint = fillColor;
/*
* @member {boolean} whether or not the shape is filled with a colour
*/
this.fill = fill;
/*
* @member {Circle|Rectangle|Ellipse|Line|Polygon} The shape object to draw.
*/
this.shape = shape;
/*
* @member {number} The type of the shape, see the Const.Shapes file for all the existing types,
*/
this.type = shape.type;
}
GraphicsData.prototype.constructor = GraphicsData;
module.exports = GraphicsData;
/**
* Creates a new GraphicsData object with the same values as this one.
*
* @return {GraphicsData}
*/
GraphicsData.prototype.clone = function ()
{
return new GraphicsData(
this.lineWidth,
this.lineColor,
this.lineAlpha,
this.fillColor,
this.fillAlpha,
this.fill,
this.shape
);
};
},{}],17:[function(require,module,exports){
var utils = require('../../utils'),
math = require('../../math'),
CONST = require('../../const'),
ObjectRenderer = require('../../renderers/webgl/utils/ObjectRenderer'),
WebGLRenderer = require('../../renderers/webgl/WebGLRenderer'),
WebGLGraphicsData = require('./WebGLGraphicsData');
/**
* Renders the graphics object.
*
* @class
* @private
* @memberof PIXI
* @extends ObjectRenderer
* @param renderer {WebGLRenderer} The renderer this object renderer works for.
*/
function GraphicsRenderer(renderer)
{
ObjectRenderer.call(this, renderer);
this.graphicsDataPool = [];
this.primitiveShader = null;
this.complexPrimitiveShader = null;
}
GraphicsRenderer.prototype = Object.create(ObjectRenderer.prototype);
GraphicsRenderer.prototype.constructor = GraphicsRenderer;
module.exports = GraphicsRenderer;
WebGLRenderer.registerPlugin('graphics', GraphicsRenderer);
/**
* Called when there is a WebGL context change
*
* @private
*
*/
GraphicsRenderer.prototype.onContextChange = function()
{
};
/**
* Destroys this renderer.
*
*/
GraphicsRenderer.prototype.destroy = function () {
ObjectRenderer.prototype.destroy.call(this);
this.graphicsDataPool = null;
};
/**
* Renders a graphics object.
*
* @param graphics {Graphics} The graphics object to render.
*/
GraphicsRenderer.prototype.render = function(graphics)
{
var renderer = this.renderer;
var gl = renderer.gl;
var shader = renderer.shaderManager.plugins.primitiveShader,
webGLData;
if (graphics.dirty)
{
this.updateGraphics(graphics, gl);
}
var webGL = graphics._webGL[gl.id];
// This could be speeded up for sure!
renderer.blendModeManager.setBlendMode( graphics.blendMode );
// var matrix = graphics.worldTransform.clone();
// var matrix = renderer.currentRenderTarget.projectionMatrix.clone();
// matrix.append(graphics.worldTransform);
for (var i = 0; i < webGL.data.length; i++)
{
if (webGL.data[i].mode === 1)
{
webGLData = webGL.data[i];
renderer.stencilManager.pushStencil(graphics, webGLData, renderer);
// render quad..
gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 );
renderer.stencilManager.popStencil(graphics, webGLData, renderer);
}
else
{
webGLData = webGL.data[i];
shader = renderer.shaderManager.primitiveShader;
renderer.shaderManager.setShader( shader );//activatePrimitiveShader();
gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true));
gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true));
gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint));
gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha);
gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer);
gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);
gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4);
// set the index buffer!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer);
gl.drawElements(gl.TRIANGLE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0 );
}
}
};
/**
* Updates the graphics object
*
* @private
* @param graphicsData {Graphics} The graphics object to update
*/
GraphicsRenderer.prototype.updateGraphics = function(graphics)
{
var gl = this.renderer.gl;
// get the contexts graphics object
var webGL = graphics._webGL[gl.id];
// if the graphics object does not exist in the webGL context time to create it!
if (!webGL)
{
webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl};
}
// flag the graphics as not dirty as we are about to update it...
graphics.dirty = false;
var i;
// if the user cleared the graphics object we will need to clear every object
if (graphics.clearDirty)
{
graphics.clearDirty = false;
// lop through and return all the webGLDatas to the object pool so than can be reused later on
for (i = 0; i < webGL.data.length; i++)
{
var graphicsData = webGL.data[i];
graphicsData.reset();
this.graphicsDataPool.push( graphicsData );
}
// clear the array and reset the index..
webGL.data = [];
webGL.lastIndex = 0;
}
var webGLData;
// loop through the graphics datas and construct each one..
// if the object is a complex fill then the new stencil buffer technique will be used
// other wise graphics objects will be pushed into a batch..
for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++)
{
var data = graphics.graphicsData[i];
if (data.type === CONST.SHAPES.POLY)
{
// need to add the points the the graphics object..
data.points = data.shape.points.slice();
if (data.shape.closed)
{
// close the poly if the value is true!
if (data.points[0] !== data.points[data.points.length-2] || data.points[1] !== data.points[data.points.length-1])
{
data.points.push(data.points[0], data.points[1]);
}
}
// MAKE SURE WE HAVE THE CORRECT TYPE..
if (data.fill)
{
if (data.points.length >= 6)
{
if (data.points.length < 6 * 2)
{
webGLData = this.switchMode(webGL, 0);
var canDrawUsingSimple = this.buildPoly(data, webGLData);
// console.log(canDrawUsingSimple);
if (!canDrawUsingSimple)
{
// console.log("<>>>")
webGLData = this.switchMode(webGL, 1);
this.buildComplexPoly(data, webGLData);
}
}
else
{
webGLData = this.switchMode(webGL, 1);
this.buildComplexPoly(data, webGLData);
}
}
}
if (data.lineWidth > 0)
{
webGLData = this.switchMode(webGL, 0);
this.buildLine(data, webGLData);
}
}
else
{
webGLData = this.switchMode(webGL, 0);
if (data.type === CONST.SHAPES.RECT)
{
this.buildRectangle(data, webGLData);
}
else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP)
{
this.buildCircle(data, webGLData);
}
else if (data.type === CONST.SHAPES.RREC)
{
this.buildRoundedRectangle(data, webGLData);
}
}
webGL.lastIndex++;
}
// upload all the dirty data...
for (i = 0; i < webGL.data.length; i++)
{
webGLData = webGL.data[i];
if (webGLData.dirty)
{
webGLData.upload();
}
}
};
/**
*
*
* @private
* @param webGL {WebGLRenderingContext} the current WebGL drawing context
* @param type {number} TODO @Alvin
*/
GraphicsRenderer.prototype.switchMode = function (webGL, type)
{
var webGLData;
if (!webGL.data.length)
{
webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl);
webGLData.mode = type;
webGL.data.push(webGLData);
}
else
{
webGLData = webGL.data[webGL.data.length-1];
if ((webGLData.points.length > 320000) || webGLData.mode !== type || type === 1)
{
webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl);
webGLData.mode = type;
webGL.data.push(webGLData);
}
}
webGLData.dirty = true;
return webGLData;
};
/**
* Builds a rectangle to draw
*
* @private
* @param graphicsData {Graphics} The graphics object containing all the necessary properties
* @param webGLData {object} an object containing all the webGL-specific information to create this shape
*/
GraphicsRenderer.prototype.buildRectangle = function (graphicsData, webGLData)
{
// --- //
// need to convert points to a nice regular data
//
var rectData = graphicsData.shape;
var x = rectData.x;
var y = rectData.y;
var width = rectData.width;
var height = rectData.height;
if (graphicsData.fill)
{
var color = utils.hex2rgb(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
var verts = webGLData.points;
var indices = webGLData.indices;
var vertPos = verts.length/6;
// start
verts.push(x, y);
verts.push(r, g, b, alpha);
verts.push(x + width, y);
verts.push(r, g, b, alpha);
verts.push(x , y + height);
verts.push(r, g, b, alpha);
verts.push(x + width, y + height);
verts.push(r, g, b, alpha);
// insert 2 dead triangles..
indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3);
}
if (graphicsData.lineWidth)
{
var tempPoints = graphicsData.points;
graphicsData.points = [x, y,
x + width, y,
x + width, y + height,
x, y + height,
x, y];
this.buildLine(graphicsData, webGLData);
graphicsData.points = tempPoints;
}
};
/**
* Builds a rounded rectangle to draw
*
* @private
* @param graphicsData {Graphics} The graphics object containing all the necessary properties
* @param webGLData {object} an object containing all the webGL-specific information to create this shape
*/
GraphicsRenderer.prototype.buildRoundedRectangle = function (graphicsData, webGLData)
{
var rrectData = graphicsData.shape;
var x = rrectData.x;
var y = rrectData.y;
var width = rrectData.width;
var height = rrectData.height;
var radius = rrectData.radius;
var recPoints = [];
recPoints.push(x, y + radius);
recPoints = recPoints.concat(this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height));
recPoints = recPoints.concat(this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius));
recPoints = recPoints.concat(this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y));
recPoints = recPoints.concat(this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius));
if (graphicsData.fill)
{
var color = utils.hex2rgb(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
var verts = webGLData.points;
var indices = webGLData.indices;
var vecPos = verts.length/6;
//TODO use this https://github.com/mapbox/earcut
var triangles = utils.PolyK.Triangulate(recPoints);
//
var i = 0;
for (i = 0; i < triangles.length; i+=3)
{
indices.push(triangles[i] + vecPos);
indices.push(triangles[i] + vecPos);
indices.push(triangles[i+1] + vecPos);
indices.push(triangles[i+2] + vecPos);
indices.push(triangles[i+2] + vecPos);
}
for (i = 0; i < recPoints.length; i++)
{
verts.push(recPoints[i], recPoints[++i], r, g, b, alpha);
}
}
if (graphicsData.lineWidth)
{
var tempPoints = graphicsData.points;
graphicsData.points = recPoints;
this.buildLine(graphicsData, webGLData);
graphicsData.points = tempPoints;
}
};
/**
* Calculate the points for a quadratic bezier curve. (helper function..)
* Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
*
* @private
* @param fromX {number} Origin point x
* @param fromY {number} Origin point x
* @param cpX {number} Control point x
* @param cpY {number} Control point y
* @param toX {number} Destination point x
* @param toY {number} Destination point y
* @return {number[]} an array of points
*/
GraphicsRenderer.prototype.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY)
{
var xa,
ya,
xb,
yb,
x,
y,
n = 20,
points = [];
function getPt(n1 , n2, perc) {
var diff = n2 - n1;
return n1 + ( diff * perc );
}
var j = 0;
for (var i = 0; i <= n; i++ ) {
j = i / n;
// The Green Line
xa = getPt( fromX , cpX , j );
ya = getPt( fromY , cpY , j );
xb = getPt( cpX , toX , j );
yb = getPt( cpY , toY , j );
// The Black Dot
x = getPt( xa , xb , j );
y = getPt( ya , yb , j );
points.push(x, y);
}
return points;
};
/**
* Builds a circle to draw
*
* @private
* @param graphicsData {Graphics} The graphics object to draw
* @param webGLData {object} an object containing all the webGL-specific information to create this shape
*/
GraphicsRenderer.prototype.buildCircle = function (graphicsData, webGLData)
{
// need to convert points to a nice regular data
var circleData = graphicsData.shape;
var x = circleData.x;
var y = circleData.y;
var width;
var height;
// TODO - bit hacky??
if (graphicsData.type === CONST.SHAPES.CIRC)
{
width = circleData.radius;
height = circleData.radius;
}
else
{
width = circleData.width;
height = circleData.height;
}
var totalSegs = 40;
var seg = (Math.PI * 2) / totalSegs ;
var i = 0;
if (graphicsData.fill)
{
var color = utils.hex2rgb(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
var verts = webGLData.points;
var indices = webGLData.indices;
var vecPos = verts.length/6;
indices.push(vecPos);
for (i = 0; i < totalSegs + 1 ; i++)
{
verts.push(x,y, r, g, b, alpha);
verts.push(x + Math.sin(seg * i) * width,
y + Math.cos(seg * i) * height,
r, g, b, alpha);
indices.push(vecPos++, vecPos++);
}
indices.push(vecPos-1);
}
if (graphicsData.lineWidth)
{
var tempPoints = graphicsData.points;
graphicsData.points = [];
for (i = 0; i < totalSegs + 1; i++)
{
graphicsData.points.push(x + Math.sin(seg * i) * width,
y + Math.cos(seg * i) * height);
}
this.buildLine(graphicsData, webGLData);
graphicsData.points = tempPoints;
}
};
/**
* Builds a line to draw
*
* @private
* @param graphicsData {Graphics} The graphics object containing all the necessary properties
* @param webGLData {object} an object containing all the webGL-specific information to create this shape
*/
GraphicsRenderer.prototype.buildLine = function (graphicsData, webGLData)
{
// TODO OPTIMISE!
var i = 0;
var points = graphicsData.points;
if (points.length === 0)
{
return;
}
// if the line width is an odd number add 0.5 to align to a whole pixel
if (graphicsData.lineWidth%2)
{
for (i = 0; i < points.length; i++)
{
points[i] += 0.5;
}
}
// get first and last point.. figure out the middle!
var firstPoint = new math.Point(points[0], points[1]);
var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]);
// if the first point is the last point - gonna have issues :)
if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y)
{
// need to clone as we are going to slightly modify the shape..
points = points.slice();
points.pop();
points.pop();
lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]);
var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5;
var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5;
points.unshift(midPointX, midPointY);
points.push(midPointX, midPointY);
}
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
var indexCount = points.length;
var indexStart = verts.length/6;
// DRAW the Line
var width = graphicsData.lineWidth / 2;
// sort color
var color = utils.hex2rgb(graphicsData.lineColor);
var alpha = graphicsData.lineAlpha;
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
var px, py, p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist;
p1x = points[0];
p1y = points[1];
p2x = points[2];
p2y = points[3];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
// start
verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha);
for (i = 1; i < length-1; i++)
{
p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1];
p2x = points[(i)*2];
p2y = points[(i)*2 + 1];
p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
perp2x = -(p2y - p3y);
perp2y = p2x - p3x;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x /= dist;
perp2y /= dist;
perp2x *= width;
perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1;
if (Math.abs(denom) < 0.1 )
{
denom+=10.1;
verts.push(p2x - perpx , p2y - perpy,
r, g, b, alpha);
verts.push(p2x + perpx , p2y + perpy,
r, g, b, alpha);
continue;
}
px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom;
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if (pdist > 140 * 140)
{
perp3x = perpx - perp2x;
perp3y = perpy - perp2y;
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x /= dist;
perp3y /= dist;
perp3x *= width;
perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha);
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
indexCount++;
}
else
{
verts.push(px , py);
verts.push(r, g, b, alpha);
verts.push(p2x - (px-p2x), p2y - (py - p2y));
verts.push(r, g, b, alpha);
}
}
p1x = points[(length-2)*2];
p1y = points[(length-2)*2 + 1];
p2x = points[(length-1)*2];
p2y = points[(length-1)*2 + 1];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
verts.push(p2x - perpx , p2y - perpy);
verts.push(r, g, b, alpha);
verts.push(p2x + perpx , p2y + perpy);
verts.push(r, g, b, alpha);
indices.push(indexStart);
for (i = 0; i < indexCount; i++)
{
indices.push(indexStart++);
}
indices.push(indexStart-1);
};
/**
* Builds a complex polygon to draw
*
* @private
* @param graphicsData {Graphics} The graphics object containing all the necessary properties
* @param webGLData {object} an object containing all the webGL-specific information to create this shape
*/
GraphicsRenderer.prototype.buildComplexPoly = function (graphicsData, webGLData)
{
//TODO - no need to copy this as it gets turned into a FLoat32Array anyways..
var points = graphicsData.points.slice();
if (points.length < 6)
{
return;
}
// get first and last point.. figure out the middle!
var indices = webGLData.indices;
webGLData.points = points;
webGLData.alpha = graphicsData.fillAlpha;
webGLData.color = utils.hex2rgb(graphicsData.fillColor);
// calclate the bounds..
var minX = Infinity;
var maxX = -Infinity;
var minY = Infinity;
var maxY = -Infinity;
var x,y;
// get size..
for (var i = 0; i < points.length; i+=2)
{
x = points[i];
y = points[i+1];
minX = x < minX ? x : minX;
maxX = x > maxX ? x : maxX;
minY = y < minY ? y : minY;
maxY = y > maxY ? y : maxY;
}
// add a quad to the end cos there is no point making another buffer!
points.push(minX, minY,
maxX, minY,
maxX, maxY,
minX, maxY);
// push a quad onto the end..
//TODO - this aint needed!
var length = points.length / 2;
for (i = 0; i < length; i++)
{
indices.push( i );
}
};
/**
* Builds a polygon to draw
*
* @private
* @param graphicsData {Graphics} The graphics object containing all the necessary properties
* @param webGLData {object} an object containing all the webGL-specific information to create this shape
*/
GraphicsRenderer.prototype.buildPoly = function (graphicsData, webGLData)
{
var points = graphicsData.points;
if (points.length < 6)
{
return;
}
// get first and last point.. figure out the middle!
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
// sort color
var color = utils.hex2rgb(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
var triangles = utils.PolyK.Triangulate(points);
if (!triangles) {
return false;
}
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);
}
return true;
};
},{"../../const":12,"../../math":22,"../../renderers/webgl/WebGLRenderer":38,"../../renderers/webgl/utils/ObjectRenderer":52,"../../utils":66,"./WebGLGraphicsData":18}],18:[function(require,module,exports){
/**
* An object containing WebGL specific properties to be used by the WebGL renderer
*
* @class
* @memberof PIXI
* @param gl {WebGLRenderingContext} the current WebGL drawing context
* @private
*/
function WebGLGraphicsData(gl) {
/**
* The current WebGL drawing context
*
* @member {WebGLRenderingContext}
*/
this.gl = gl;
//TODO does this need to be split before uploding??
/**
* An array of color components (r,g,b)
* @member {Array}
*/
this.color = [0,0,0]; // color split!
/**
* An array of points to draw
* @member {Array}
*/
this.points = [];
/**
* The indices of the vertices
* @member {Array}
*/
this.indices = [];
/**
* The main buffer
* @member {WebGLBuffer}
*/
this.buffer = gl.createBuffer();
/**
* The index buffer
* @member {WebGLBuffer}
*/
this.indexBuffer = gl.createBuffer();
/**
* todo @alvin
* @member {number}
*/
this.mode = 1;
/**
* The alpha of the graphics
* @member {number}
*/
this.alpha = 1;
/**
* Whether this graphics is dirty or not
* @member {boolean}
*/
this.dirty = true;
}
WebGLGraphicsData.prototype.constructor = WebGLGraphicsData;
module.exports = WebGLGraphicsData;
/**
* Resets the vertices and the indices
*/
WebGLGraphicsData.prototype.reset = function () {
this.points = [];
this.indices = [];
};
/**
* Binds the buffers and uploads the data
*/
WebGLGraphicsData.prototype.upload = function () {
var gl = this.gl;
// this.lastIndex = graphics.graphicsData.length;
this.glPoints = new Float32Array(this.points);
gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW);
this.glIndices = new Uint16Array(this.indices);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndices, gl.STATIC_DRAW);
this.dirty = false;
};
},{}],19:[function(require,module,exports){
/**
* @file Main export of the PIXI core library
* @author Mat Groves <mat@goodboydigital.com>
* @copyright 2013-2015 GoodBoyDigital
* @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License}
*/
/**
* @namespace PIXI
*/
var core = module.exports = {
// utils
utils: require('./utils'),
math: require('./math'),
CONST: require('./const'),
// display
DisplayObject: require('./display/DisplayObject'),
Container: require('./display/Container'),
// legacy..
Stage: require('./display/Container'),
DisplayObjectContainer: require('./display/Container'),
Sprite: require('./sprites/Sprite'),
ParticleContainer: require('./particles/ParticleContainer'),
SpriteRenderer: require('./sprites/webgl/SpriteRenderer'),
ParticleRenderer: require('./particles/webgl/ParticleRenderer'),
// primitives
Graphics: require('./graphics/Graphics'),
GraphicsData: require('./graphics/GraphicsData'),
GraphicsRenderer: require('./graphics/webgl/GraphicsRenderer'),
// textures
Texture: require('./textures/Texture'),
BaseTexture: require('./textures/BaseTexture'),
RenderTexture: require('./textures/RenderTexture'),
VideoBaseTexture: require('./textures/VideoBaseTexture'),
// renderers - canvas
CanvasRenderer: require('./renderers/canvas/CanvasRenderer'),
CanvasGraphics: require('./renderers/canvas/utils/CanvasGraphics'),
CanvasBuffer: require('./renderers/canvas/utils/CanvasBuffer'),
// renderers - webgl
WebGLRenderer: require('./renderers/webgl/WebGLRenderer'),
ShaderManager: require('./renderers/webgl/managers/ShaderManager'),
Shader: require('./renderers/webgl/shaders/Shader'),
// filters - webgl
AbstractFilter: require('./renderers/webgl/filters/AbstractFilter'),
/**
* This helper function will automatically detect which renderer you should be using.
* WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by
* the browser then this function will return a canvas renderer
*
* @param width=800 {number} the width of the renderers view
* @param height=600 {number} the height of the renderers view
* @param [options] {object} The optional renderer parameters
* @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional
* @param [options.transparent=false] {boolean} If the render view is transparent, default false
* @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment)
* @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you
* need to call toDataUrl on the webgl context
* @param [options.resolution=1] {number} the resolution of the renderer, retina would be 2
* @param [noWebGL=false] {boolean} prevents selection of WebGL renderer, even if such is present
*
* @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer
*/
autoDetectRenderer: function (width, height, options, noWebGL)
{
width = width || 800;
height = height || 600;
if (!noWebGL && checkWebGL())
{
return new core.WebGLRenderer(width, height, options);
}
return new core.CanvasRenderer(width, height, options);
}
};
// add constants to export
var CONST = require('./const');
for (var c in CONST) {
core[c] = CONST[c];
}
var contextOptions = { stencil: true };
function checkWebGL()
{
try
{
if (!window.WebGLRenderingContext)
{
return false;
}
var canvas = document.createElement('canvas'),
gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions);
return !!(gl && gl.getContextAttributes().stencil);
}
catch (e)
{
return false;
}
}
},{"./const":12,"./display/Container":13,"./display/DisplayObject":14,"./graphics/Graphics":15,"./graphics/GraphicsData":16,"./graphics/webgl/GraphicsRenderer":17,"./math":22,"./particles/ParticleContainer":28,"./particles/webgl/ParticleRenderer":30,"./renderers/canvas/CanvasRenderer":33,"./renderers/canvas/utils/CanvasBuffer":34,"./renderers/canvas/utils/CanvasGraphics":35,"./renderers/webgl/WebGLRenderer":38,"./renderers/webgl/filters/AbstractFilter":39,"./renderers/webgl/managers/ShaderManager":45,"./renderers/webgl/shaders/Shader":50,"./sprites/Sprite":56,"./sprites/webgl/SpriteRenderer":57,"./textures/BaseTexture":58,"./textures/RenderTexture":59,"./textures/Texture":60,"./textures/VideoBaseTexture":62,"./utils":66}],20:[function(require,module,exports){
var Point = require('./Point');
/**
* The pixi Matrix class as an object, which makes it a lot faster,
* here is a representation of it :
* | a | b | tx|
* | c | d | ty|
* | 0 | 0 | 1 |
*
* @class
* @memberof PIXI.math
*/
function Matrix()
{
/**
* @member {number}
* @default 1
*/
this.a = 1;
/**
* @member {number}
* @default 0
*/
this.b = 0;
/**
* @member {number}
* @default 0
*/
this.c = 0;
/**
* @member {number}
* @default 1
*/
this.d = 1;
/**
* @member {number}
* @default 0
*/
this.tx = 0;
/**
* @member {number}
* @default 0
*/
this.ty = 0;
}
Matrix.prototype.constructor = Matrix;
module.exports = Matrix;
/**
* Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows:
*
* a = array[0]
* b = array[1]
* c = array[3]
* d = array[4]
* tx = array[2]
* ty = array[5]
*
* @param array {number[]} The array that the matrix will be populated from.
*/
Matrix.prototype.fromArray = function (array)
{
this.a = array[0];
this.b = array[1];
this.c = array[3];
this.d = array[4];
this.tx = array[2];
this.ty = array[5];
};
/**
* Creates an array from the current Matrix object.
*
* @param transpose {boolean} Whether we need to transpose the matrix or not
* @return {number[]} the newly created array which contains the matrix
*/
Matrix.prototype.toArray = function (transpose)
{
if (!this.array)
{
this.array = new Float32Array(9);
}
var array = this.array;
if (transpose)
{
array[0] = this.a;
array[1] = this.b;
array[2] = 0;
array[3] = this.c;
array[4] = this.d;
array[5] = 0;
array[6] = this.tx;
array[7] = this.ty;
array[8] = 1;
}
else
{
array[0] = this.a;
array[1] = this.c;
array[2] = this.tx;
array[3] = this.b;
array[4] = this.d;
array[5] = this.ty;
array[6] = 0;
array[7] = 0;
array[8] = 1;
}
return array;
};
/**
* Get a new position with the current transformation applied.
* Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering)
*
* @param pos {Point} The origin
* @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input)
* @return {Point} The new point, transformed through this matrix
*/
Matrix.prototype.apply = function (pos, newPos)
{
newPos = newPos || new Point();
var x = pos.x;
var y = pos.y;
newPos.x = this.a * x + this.c * y + this.tx;
newPos.y = this.b * x + this.d * y + this.ty;
return newPos;
};
/**
* Get a new position with the inverse of the current transformation applied.
* Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input)
*
* @param pos {Point} The origin
* @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input)
* @return {Point} The new point, inverse-transformed through this matrix
*/
Matrix.prototype.applyInverse = function (pos, newPos)
{
newPos = newPos || new Point();
var id = 1 / (this.a * this.d + this.c * -this.b);
var x = pos.x;
var y = pos.y;
newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id;
newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id;
return newPos;
};
/**
* Translates the matrix on the x and y.
*
* @param {number} x
* @param {number} y
* @return {Matrix} This matrix. Good for chaining method calls.
*/
Matrix.prototype.translate = function (x, y)
{
this.tx += x;
this.ty += y;
return this;
};
/**
* Applies a scale transformation to the matrix.
*
* @param {number} x The amount to scale horizontally
* @param {number} y The amount to scale vertically
* @return {Matrix} This matrix. Good for chaining method calls.
*/
Matrix.prototype.scale = function (x, y)
{
this.a *= x;
this.d *= y;
this.c *= x;
this.b *= y;
this.tx *= x;
this.ty *= y;
return this;
};
/**
* Applies a rotation transformation to the matrix.
*
* @param {number} angle - The angle in radians.
* @return {Matrix} This matrix. Good for chaining method calls.
*/
Matrix.prototype.rotate = function (angle)
{
var cos = Math.cos( angle );
var sin = Math.sin( angle );
var a1 = this.a;
var c1 = this.c;
var tx1 = this.tx;
this.a = a1 * cos-this.b * sin;
this.b = a1 * sin+this.b * cos;
this.c = c1 * cos-this.d * sin;
this.d = c1 * sin+this.d * cos;
this.tx = tx1 * cos - this.ty * sin;
this.ty = tx1 * sin + this.ty * cos;
return this;
};
/**
* Appends the given Matrix to this Matrix.
*
* @param {Matrix} matrix
* @return {Matrix} This matrix. Good for chaining method calls.
*/
Matrix.prototype.append = function (matrix)
{
var a1 = this.a;
var b1 = this.b;
var c1 = this.c;
var d1 = this.d;
this.a = matrix.a * a1 + matrix.b * c1;
this.b = matrix.a * b1 + matrix.b * d1;
this.c = matrix.c * a1 + matrix.d * c1;
this.d = matrix.c * b1 + matrix.d * d1;
this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx;
this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty;
return this;
};
/**
* Prepends the given Matrix to this Matrix.
*
* @param {Matrix} matrix
* @return {Matrix} This matrix. Good for chaining method calls.
*/
Matrix.prototype.prepend = function(matrix)
{
var tx1 = this.tx;
if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1)
{
var a1 = this.a;
var c1 = this.c;
this.a = a1*matrix.a+this.b*matrix.c;
this.b = a1*matrix.b+this.b*matrix.d;
this.c = c1*matrix.a+this.d*matrix.c;
this.d = c1*matrix.b+this.d*matrix.d;
}
this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx;
this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty;
return this;
};
/**
* Inverts this matrix
*
* @return {Matrix} This matrix. Good for chaining method calls.
*/
Matrix.prototype.invert = function()
{
var a1 = this.a;
var b1 = this.b;
var c1 = this.c;
var d1 = this.d;
var tx1 = this.tx;
var n = a1*d1-b1*c1;
this.a = d1/n;
this.b = -b1/n;
this.c = -c1/n;
this.d = a1/n;
this.tx = (c1*this.ty-d1*tx1)/n;
this.ty = -(a1*this.ty-b1*tx1)/n;
return this;
};
/**
* Resets this Matix to an identity (default) matrix.
*
* @return {Matrix} This matrix. Good for chaining method calls.
*/
Matrix.prototype.identity = function ()
{
this.a = 1;
this.b = 0;
this.c = 0;
this.d = 1;
this.tx = 0;
this.ty = 0;
return this;
};
/**
* Creates a new Matrix object with the same values as this one.
*
* @return {Matrix} A copy of this matrix. Good for chaining method calls.
*/
Matrix.prototype.clone = function ()
{
var matrix = new Matrix();
matrix.a = this.a;
matrix.b = this.b;
matrix.c = this.c;
matrix.d = this.d;
matrix.tx = this.tx;
matrix.ty = this.ty;
return matrix;
};
/**
* Changes the values of the given matrix to be the same as the ones in this matrix
*
* @return {Matrix} The matrix given in parameter with its values updated.
*/
Matrix.prototype.copy = function (matrix)
{
matrix.a = this.a;
matrix.b = this.b;
matrix.c = this.c;
matrix.d = this.d;
matrix.tx = this.tx;
matrix.ty = this.ty;
return matrix;
};
/**
* A default (identity) matrix
*/
Matrix.IDENTITY = new Matrix();
/**
* A temp matrix
*/
Matrix.TEMP_MATRIX = new Matrix();
},{"./Point":21}],21:[function(require,module,exports){
/**
* The Point object represents a location in a two-dimensional coordinate system, where x represents
* the horizontal axis and y represents the vertical axis.
*
* @class
* @memberof PIXI.math
* @param [x=0] {number} position of the point on the x axis
* @param [y=0] {number} position of the point on the y axis
*/
function Point(x, y)
{
/**
* @member {number}
* @default 0
*/
this.x = x || 0;
/**
* @member {number}
* @default 0
*/
this.y = y || 0;
}
Point.prototype.constructor = Point;
module.exports = Point;
/**
* Creates a clone of this point
*
* @return {Point} a copy of the point
*/
Point.prototype.clone = function ()
{
return new Point(this.x, this.y);
};
/**
* Sets the point to a new x and y position.
* If y is omitted, both x and y will be set to x.
*
* @param [x=0] {number} position of the point on the x axis
* @param [y=0] {number} position of the point on the y axis
*/
Point.prototype.set = function (x, y)
{
this.x = x || 0;
this.y = y || ( (y !== 0) ? this.x : 0 ) ;
};
},{}],22:[function(require,module,exports){
/**
* @namespace PIXI.math
*/
module.exports = {
/**
* @property {number} PI_2 - Two Pi
* @constant
* @static
*/
PI_2: Math.PI * 2,
/**
* @property {number} RAD_TO_DEG - Constant conversion factor for converting radians to degrees
* @constant
* @static
*/
RAD_TO_DEG: 180 / Math.PI,
/**
* @property {Number} DEG_TO_RAD - Constant conversion factor for converting degrees to radians
* @constant
* @static
*/
DEG_TO_RAD: Math.PI / 180,
Point: require('./Point'),
Matrix: require('./Matrix'),
Circle: require('./shapes/Circle'),
Ellipse: require('./shapes/Ellipse'),
Polygon: require('./shapes/Polygon'),
Rectangle: require('./shapes/Rectangle'),
RoundedRectangle: require('./shapes/RoundedRectangle')
};
},{"./Matrix":20,"./Point":21,"./shapes/Circle":23,"./shapes/Ellipse":24,"./shapes/Polygon":25,"./shapes/Rectangle":26,"./shapes/RoundedRectangle":27}],23:[function(require,module,exports){
var Rectangle = require('./Rectangle'),
CONST = require('../../const');
/**
* The Circle object can be used to specify a hit area for displayObjects
*
* @class
* @memberof PIXI
* @param x {number} The X coordinate of the center of this circle
* @param y {number} The Y coordinate of the center of this circle
* @param radius {number} The radius of the circle
*/
function Circle(x, y, radius)
{
/**
* @member {number}
* @default 0
*/
this.x = x || 0;
/**
* @member {number}
* @default 0
*/
this.y = y || 0;
/**
* @member {number}
* @default 0
*/
this.radius = radius || 0;
/**
* The type of the object, mainly used to avoid `instanceof` checks
*
* @member {number}
*/
this.type = CONST.SHAPES.CIRC;
}
Circle.prototype.constructor = Circle;
module.exports = Circle;
/**
* Creates a clone of this Circle instance
*
* @return {Circle} a copy of the Circle
*/
Circle.prototype.clone = function ()
{
return new Circle(this.x, this.y, this.radius);
};
/**
* Checks whether the x and y coordinates given are contained within this circle
*
* @param x {number} The X coordinate of the point to test
* @param y {number} The Y coordinate of the point to test
* @return {boolean} Whether the x/y coordinates are within this Circle
*/
Circle.prototype.contains = function (x, y)
{
if (this.radius <= 0)
{
return false;
}
var dx = (this.x - x),
dy = (this.y - y),
r2 = this.radius * this.radius;
dx *= dx;
dy *= dy;
return (dx + dy <= r2);
};
/**
* Returns the framing rectangle of the circle as a Rectangle object
*
* @return {Rectangle} the framing rectangle
*/
Circle.prototype.getBounds = function ()
{
return new Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2);
};
},{"../../const":12,"./Rectangle":26}],24:[function(require,module,exports){
var Rectangle = require('./Rectangle'),
CONST = require('../../const');
/**
* The Ellipse object can be used to specify a hit area for displayObjects
*
* @class
* @memberof PIXI
* @param x {number} The X coordinate of the center of the ellipse
* @param y {number} The Y coordinate of the center of the ellipse
* @param width {number} The half width of this ellipse
* @param height {number} The half height of this ellipse
*/
function Ellipse(x, y, width, height)
{
/**
* @member {number}
* @default 0
*/
this.x = x || 0;
/**
* @member {number}
* @default 0
*/
this.y = y || 0;
/**
* @member {number}
* @default 0
*/
this.width = width || 0;
/**
* @member {number}
* @default 0
*/
this.height = height || 0;
/**
* The type of the object, mainly used to avoid `instanceof` checks
*
* @member {number}
*/
this.type = CONST.SHAPES.ELIP;
}
Ellipse.prototype.constructor = Ellipse;
module.exports = Ellipse;
/**
* Creates a clone of this Ellipse instance
*
* @return {Ellipse} a copy of the ellipse
*/
Ellipse.prototype.clone = function ()
{
return new Ellipse(this.x, this.y, this.width, this.height);
};
/**
* Checks whether the x and y coordinates given are contained within this ellipse
*
* @param x {number} The X coordinate of the point to test
* @param y {number} The Y coordinate of the point to test
* @return {boolean} Whether the x/y coords are within this ellipse
*/
Ellipse.prototype.contains = function (x, y)
{
if (this.width <= 0 || this.height <= 0)
{
return false;
}
//normalize the coords to an ellipse with center 0,0
var normx = ((x - this.x) / this.width),
normy = ((y - this.y) / this.height);
normx *= normx;
normy *= normy;
return (normx + normy <= 1);
};
/**
* Returns the framing rectangle of the ellipse as a Rectangle object
*
* @return {Rectangle} the framing rectangle
*/
Ellipse.prototype.getBounds = function ()
{
return new Rectangle(this.x - this.width, this.y - this.height, this.width, this.height);
};
},{"../../const":12,"./Rectangle":26}],25:[function(require,module,exports){
var Point = require('../Point'),
CONST = require('../../const');
/**
* @class
* @memberof PIXI
* @param points* {Point[]|number[]|...Point|...number} This can be an array of Points that form the polygon,
* a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arguments passed can be
* all the points of the polygon e.g. `new Polygon(new Point(), new Point(), ...)`, or the
* arguments passed can be flat x,y values e.g. `new Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are
* Numbers.
*/
function Polygon(points)
{
//if points isn't an array, use arguments as the array
if (!(points instanceof Array))
{
points = Array.prototype.slice.call(arguments);
}
//if this is a flat array of numbers, convert it to points
if (points[0] instanceof Point)
{
var p = [];
for (var i = 0, il = points.length; i < il; i++)
{
p.push(points[i].x, points[i].y);
}
points = p;
}
this.closed = true;
/**
* An array of the points of this polygon
*
* @member {Point[]}
*/
this.points = points;
/**
* The type of the object, mainly used to avoid `instanceof` checks
*
* @member {number}
*/
this.type = CONST.SHAPES.POLY;
}
Polygon.prototype.constructor = Polygon;
module.exports = Polygon;
/**
* Creates a clone of this polygon
*
* @return {Polygon} a copy of the polygon
*/
Polygon.prototype.clone = function ()
{
return new Polygon(this.points.slice());
};
/**
* Checks whether the x and y coordinates passed to this function are contained within this polygon
*
* @param x {number} The X coordinate of the point to test
* @param y {number} The Y coordinate of the point to test
* @return {boolean} Whether the x/y coordinates are within this polygon
*/
Polygon.prototype.contains = function (x, y)
{
var inside = false;
// use some raycasting to test hits
// https://github.com/substack/point-in-polygon/blob/master/index.js
var length = this.points.length / 2;
for (var i = 0, j = length - 1; i < length; j = i++)
{
var xi = this.points[i * 2], yi = this.points[i * 2 + 1],
xj = this.points[j * 2], yj = this.points[j * 2 + 1],
intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
if (intersect)
{
inside = !inside;
}
}
return inside;
};
},{"../../const":12,"../Point":21}],26:[function(require,module,exports){
var CONST = require('../../const');
/**
* the Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height.
*
* @class
* @memberof PIXI
* @param x {number} The X coordinate of the upper-left corner of the rectangle
* @param y {number} The Y coordinate of the upper-left corner of the rectangle
* @param width {number} The overall width of this rectangle
* @param height {number} The overall height of this rectangle
*/
function Rectangle(x, y, width, height)
{
/**
* @member {number}
* @default 0
*/
this.x = x || 0;
/**
* @member {number}
* @default 0
*/
this.y = y || 0;
/**
* @member {number}
* @default 0
*/
this.width = width || 0;
/**
* @member {number}
* @default 0
*/
this.height = height || 0;
/**
* The type of the object, mainly used to avoid `instanceof` checks
*
* @member {number}
*/
this.type = CONST.SHAPES.RECT;
}
Rectangle.prototype.constructor = Rectangle;
module.exports = Rectangle;
/**
* A constant empty rectangle.
*
* @static
* @constant
*/
Rectangle.EMPTY = new Rectangle(0, 0, 0, 0);
/**
* Creates a clone of this Rectangle
*
* @return {Rectangle} a copy of the rectangle
*/
Rectangle.prototype.clone = function ()
{
return new Rectangle(this.x, this.y, this.width, this.height);
};
/**
* Checks whether the x and y coordinates given are contained within this Rectangle
*
* @param x {number} The X coordinate of the point to test
* @param y {number} The Y coordinate of the point to test
* @return {boolean} Whether the x/y coordinates are within this Rectangle
*/
Rectangle.prototype.contains = function (x, y)
{
if (this.width <= 0 || this.height <= 0)
{
return false;
}
if (x >= this.x && x < this.x + this.width)
{
if (y >= this.y && y < this.y + this.height)
{
return true;
}
}
return false;
};
},{"../../const":12}],27:[function(require,module,exports){
var CONST = require('../../const');
/**
* The Rounded Rectangle object is an area that has nice rounded corners, as indicated by its top-left corner point (x, y) and by its width and its height and its radius.
*
* @class
* @memberof PIXI
* @param x {number} The X coordinate of the upper-left corner of the rounded rectangle
* @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle
* @param width {number} The overall width of this rounded rectangle
* @param height {number} The overall height of this rounded rectangle
* @param radius {number} Controls the radius of the rounded corners
*/
function RoundedRectangle(x, y, width, height, radius)
{
/**
* @member {number}
* @default 0
*/
this.x = x || 0;
/**
* @member {number}
* @default 0
*/
this.y = y || 0;
/**
* @member {number}
* @default 0
*/
this.width = width || 0;
/**
* @member {number}
* @default 0
*/
this.height = height || 0;
/**
* @member {number}
* @default 20
*/
this.radius = radius || 20;
/**
* The type of the object, mainly used to avoid `instanceof` checks
*
* @member {number}
*/
this.type = CONST.SHAPES.RREC;
}
RoundedRectangle.prototype.constructor = RoundedRectangle;
module.exports = RoundedRectangle;
/**
* Creates a clone of this Rounded Rectangle
*
* @return {RoundedRectangle} a copy of the rounded rectangle
*/
RoundedRectangle.prototype.clone = function ()
{
return new RoundedRectangle(this.x, this.y, this.width, this.height, this.radius);
};
/**
* Checks whether the x and y coordinates given are contained within this Rounded Rectangle
*
* @param x {number} The X coordinate of the point to test
* @param y {number} The Y coordinate of the point to test
* @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle
*/
RoundedRectangle.prototype.contains = function (x, y)
{
if (this.width <= 0 || this.height <= 0)
{
return false;
}
if (x >= this.x && x <= this.x + this.width)
{
if (y >= this.y && y <= this.y + this.height)
{
return true;
}
}
return false;
};
},{"../../const":12}],28:[function(require,module,exports){
var Container = require('../display/Container');
/**
* The ParticleContainer class is a really fast version of the Container built solely for speed,
* so use when you need a lot of sprites or particles. The tradeoff of the ParticleContainer is that advanced
* functionality will not work. ParticleContainer implements only the basic object transform (position, scale, rotation).
* Any other functionality like tinting, masking, etc will not work on sprites in this batch.
*
* It's extremely easy to use :
*
* ```js
* var container = new ParticleContainer();
*
* for (var i = 0; i < 100; ++i)
* {
* var sprite = new PIXI.Sprite.fromImage("myImage.png");
* container.addChild(sprite);
* }
* ```
*
* And here you have a hundred sprites that will be renderer at the speed of light.
*
* @class
* @extends Container
* @memberof PIXI
*
* @param size {number} The number of images in the SpriteBatch before it flushes.
* @param properties {object} The properties to be uploaded
*/
function ParticleContainer(size, properties)
{
Container.call(this);
// set properties to be dynamic (true) / static (false)
// TODO this could be easier to understand!
/* this._properties = {
scale : false,
position : true,
rotation : false,
uvs : false,
alpha : false
* }
*/
/**
* @member {object}
* @private
*/
this._properties = properties || [false, true, false, false, false];
/**
* @member {number}
* @private
*/
this._size = size || 15000;
/**
* @member {WebGLBuffer}
* @private
*/
this._buffers = null;
/**
* @member {boolean}
* @private
*/
this._updateStatic = false;
/**
* @member {boolean}
*
*/
this.interactiveChildren = false;
}
ParticleContainer.prototype = Object.create(Container.prototype);
ParticleContainer.prototype.constructor = ParticleContainer;
module.exports = ParticleContainer;
/**
* Updates the object transform for rendering
*
* @private
*/
ParticleContainer.prototype.updateTransform = function ()
{
// TODO don't need to!
this.displayObjectUpdateTransform();
// PIXI.Container.prototype.updateTransform.call( this );
};
/**
* Renders the container using the WebGL renderer
*
* @param renderer {WebGLRenderer} The webgl renderer
* @private
*/
ParticleContainer.prototype.renderWebGL = function (renderer)
{
if (!this.visible || this.worldAlpha <= 0 || !this.children.length || !this.renderable)
{
return;
}
renderer.setObjectRenderer( renderer.plugins.particle );
renderer.plugins.particle.render( this );
};
/**
* Adds a child to this particle container at a specified index. If the index is out of bounds an error will be thrown
*
* @param child {DisplayObject} The child to add
* @param index {Number} The index to place the child in
* @return {DisplayObject} The child that was added.
*/
ParticleContainer.prototype.addChildAt = function (child, index)
{
// prevent adding self as child
if (child === this)
{
return child;
}
if (index >= 0 && index <= this.children.length)
{
if (child.parent)
{
child.parent.removeChild(child);
}
child.parent = this;
this.children.splice(index, 0, child);
this._updateStatic = true;
return child;
}
else
{
throw new Error(child + 'addChildAt: The index '+ index +' supplied is out of bounds ' + this.children.length);
}
};
/**
* Removes a child from the specified index position.
*
* @param index {Number} The index to get the child from
* @return {DisplayObject} The child that was removed.
*/
ParticleContainer.prototype.removeChildAt = function (index)
{
var child = this.getChildAt(index);
child.parent = null;
this.children.splice(index, 1);
this._updateStatic = true;
return child;
};
/**
* Renders the object using the Canvas renderer
*
* @param renderer {CanvasRenderer} The canvas renderer
* @private
*/
ParticleContainer.prototype.renderCanvas = function (renderer)
{
if (!this.visible || this.worldAlpha <= 0 || !this.children.length || !this.renderable)
{
return;
}
var context = renderer.context;
var transform = this.worldTransform;
var isRotated = true;
context.globalAlpha = this.worldAlpha;
this.displayObjectUpdateTransform();
for (var i = 0; i < this.children.length; ++i)
{
var child = this.children[i];
if (!child.visible)
{
continue;
}
var frame = child.texture.frame;
context.globalAlpha = this.worldAlpha * child.alpha;
if (child.rotation % (Math.PI * 2) === 0)
{
// this is the fastest way to optimise! - if rotation is 0 then we can avoid any kind of setTransform call
if (isRotated)
{
context.setTransform(
transform.a,
transform.b,
transform.c,
transform.d,
transform.tx,
transform.ty
);
isRotated = false;
}
context.drawImage(
child.texture.baseTexture.source,
frame.x,
frame.y,
frame.width,
frame.height,
((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5) | 0,
((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5) | 0,
frame.width * child.scale.x,
frame.height * child.scale.y
);
}
else
{
if (!isRotated)
{
isRotated = true;
}
child.displayObjectUpdateTransform();
var childTransform = child.worldTransform;
if (renderer.roundPixels)
{
context.setTransform(
childTransform.a,
childTransform.b,
childTransform.c,
childTransform.d,
childTransform.tx | 0,
childTransform.ty | 0
);
}
else
{
context.setTransform(
childTransform.a,
childTransform.b,
childTransform.c,
childTransform.d,
childTransform.tx,
childTransform.ty
);
}
context.drawImage(
child.texture.baseTexture.source,
frame.x,
frame.y,
frame.width,
frame.height,
((child.anchor.x) * (-frame.width) + 0.5) | 0,
((child.anchor.y) * (-frame.height) + 0.5) | 0,
frame.width,
frame.height
);
}
}
};
},{"../display/Container":13}],29:[function(require,module,exports){
/**
* @author Mat Groves
*
* Big thanks to the very clever Matt DesLauriers <mattdesl> https://github.com/mattdesl/
* for creating the original pixi version!
* Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now share 4 bytes on the vertex buffer
*
* Heavily inspired by LibGDX's ParticleBuffer:
* https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/ParticleBuffer.java
*/
/**
*
* @class
* @private
* @memberof PIXI
* @param renderer {WebGLRenderer} The renderer this sprite batch works for.
*/
function ParticleBuffer(gl, properties, size)
{
/**
* the current WebGL drawing context
* @member {WebGLRenderingContext}
*/
this.gl = gl;
/**
*
*
* @member {number}
*/
this.vertSize = 2;
/**
*
*
* @member {number}
*/
this.vertByteSize = this.vertSize * 4;
/**
* The number of images in the SpriteBatch before it flushes.
*
* @member {number}
*/
this.size = size;
/**
*
*
* @member {Array}
*/
this.dynamicProperties = [];
/**
*
*
* @member {Array}
*/
this.staticProperties = [];
for (var i = 0; i < properties.length; i++)
{
var property = properties[i];
if(property.dynamic)
{
this.dynamicProperties.push(property);
}
else
{
this.staticProperties.push(property);
}
}
this.staticStride = 0;
this.staticBuffer = null;
this.staticData = null;
this.dynamicStride = 0;
this.dynamicBuffer = null;
this.dynamicData = null;
this.initBuffers();
}
ParticleBuffer.prototype.constructor = ParticleBuffer;
module.exports = ParticleBuffer;
/**
* Sets up the renderer context and necessary buffers.
*
* @private
* @param gl {WebGLRenderingContext} the current WebGL drawing context
*/
ParticleBuffer.prototype.initBuffers = function ()
{
var gl = this.gl;
var i;
var property;
var dynamicOffset = 0;
this.dynamicStride = 0;
for (i = 0; i < this.dynamicProperties.length; i++)
{
property = this.dynamicProperties[i];
property.offset = dynamicOffset;
dynamicOffset += property.size;
this.dynamicStride += property.size;
}
this.dynamicData = new Float32Array( this.size * this.dynamicStride * 4);
this.dynamicBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.dynamicBuffer);
gl.bufferData(gl.ARRAY_BUFFER, this.dynamicData, gl.DYNAMIC_DRAW);
// static //
var staticOffset = 0;
this.staticStride = 0;
for (i = 0; i < this.staticProperties.length; i++)
{
property = this.staticProperties[i];
property.offset = staticOffset;
staticOffset += property.size;
this.staticStride += property.size;
}
this.staticData = new Float32Array( this.size * this.staticStride * 4);
this.staticBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.staticBuffer);
gl.bufferData(gl.ARRAY_BUFFER, this.staticData, gl.DYNAMIC_DRAW);
};
ParticleBuffer.prototype.uploadDynamic = function(children, startIndex, amount)
{
var gl = this.gl;
for (var i = 0; i < this.dynamicProperties.length; i++)
{
var property = this.dynamicProperties[i];
property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset);
}
gl.bindBuffer(gl.ARRAY_BUFFER, this.dynamicBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.dynamicData);
};
ParticleBuffer.prototype.uploadStatic = function(children, startIndex, amount)
{
var gl = this.gl;
for (var i = 0; i < this.staticProperties.length; i++)
{
var property = this.staticProperties[i];
property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset);
}
gl.bindBuffer(gl.ARRAY_BUFFER, this.staticBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.staticData);
};
/**
* Starts a new sprite batch.
*
*/
ParticleBuffer.prototype.bind = function ()
{
var gl = this.gl;
var i, property;
gl.bindBuffer(gl.ARRAY_BUFFER, this.dynamicBuffer);
for (i = 0; i < this.dynamicProperties.length; i++)
{
property = this.dynamicProperties[i];
gl.vertexAttribPointer(property.attribute, property.size, gl.FLOAT, false, this.dynamicStride * 4, property.offset * 4);
}
gl.bindBuffer(gl.ARRAY_BUFFER, this.staticBuffer);
for (i = 0; i < this.staticProperties.length; i++)
{
property = this.staticProperties[i];
gl.vertexAttribPointer(property.attribute, property.size, gl.FLOAT, false, this.staticStride * 4, property.offset * 4);
}
};
/**
* Destroys the SpriteBatch.
*
*/
ParticleBuffer.prototype.destroy = function ()
{
//TODO implement this :) to busy making the fun bits..
};
},{}],30:[function(require,module,exports){
var ObjectRenderer = require('../../renderers/webgl/utils/ObjectRenderer'),
WebGLRenderer = require('../../renderers/webgl/WebGLRenderer'),
ParticleShader = require('./ParticleShader'),
ParticleBuffer = require('./ParticleBuffer'),
math = require('../../math');
/**
* @author Mat Groves
*
* Big thanks to the very clever Matt DesLauriers <mattdesl> https://github.com/mattdesl/
* for creating the original pixi version!
* Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now share 4 bytes on the vertex buffer
*
* Heavily inspired by LibGDX's ParticleRenderer:
* https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/ParticleRenderer.java
*/
/**
*
* @class
* @private
* @memberof PIXI
* @param renderer {WebGLRenderer} The renderer this sprite batch works for.
*/
function ParticleRenderer(renderer)
{
ObjectRenderer.call(this, renderer);
/**
* The number of images in the Particle before it flushes.
*
* @member {number}
*/
this.size = 15000;//CONST.SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop
var numIndices = this.size * 6;
/**
* Holds the indices
*
* @member {Uint16Array}
*/
this.indices = new Uint16Array(numIndices);
for (var i=0, j=0; i < numIndices; i += 6, j += 4)
{
this.indices[i + 0] = j + 0;
this.indices[i + 1] = j + 1;
this.indices[i + 2] = j + 2;
this.indices[i + 3] = j + 0;
this.indices[i + 4] = j + 2;
this.indices[i + 5] = j + 3;
}
/**
* The default shader that is used if a sprite doesn't have a more specific one.
*
* @member {Shader}
*/
this.shader = null;
this.tempMatrix = new math.Matrix();
}
ParticleRenderer.prototype = Object.create(ObjectRenderer.prototype);
ParticleRenderer.prototype.constructor = ParticleRenderer;
module.exports = ParticleRenderer;
WebGLRenderer.registerPlugin('particle', ParticleRenderer);
/**
* When there is a WebGL context change
*
* @private
*
*/
ParticleRenderer.prototype.onContextChange = function ()
{
var gl = this.renderer.gl;
// setup default shader
this.shader = new ParticleShader(this.renderer.shaderManager);
this.indexBuffer = gl.createBuffer();
// 65535 is max index, so 65535 / 6 = 10922.
//upload the index data
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW);
this.properties = [
//verticesData
{
attribute:this.shader.attributes.aVertexPosition,
dynamic:false,
size:2,
uploadFunction:this.uploadVertices,
offset:0
},
// positionData
{
attribute:this.shader.attributes.aPositionCoord,
dynamic:true,
size:2,
uploadFunction:this.uploadPosition,
offset:0
},
// rotationData
{
attribute:this.shader.attributes.aRotation,
dynamic:false,
size:1,
uploadFunction:this.uploadRotation,
offset:0
},
//u vsData
{
attribute:this.shader.attributes.aTextureCoord,
dynamic:false,
size:2,
uploadFunction:this.uploadUvs,
offset:0
},
// alphaData
{
attribute:this.shader.attributes.aColor,
dynamic:false,
size:1,
uploadFunction:this.uploadAlpha,
offset:0
}];
};
/**
* Starts a new sprite batch.
*
*/
ParticleRenderer.prototype.start = function ()
{
var gl = this.renderer.gl;
// bind the main texture
gl.activeTexture(gl.TEXTURE0);
// bind the buffers
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
var shader = this.shader;
this.renderer.shaderManager.setShader(shader);
};
/**
* Renders the sprite object.
*
* @param container {Container|Sprite} the sprite to render using this ParticleRenderer
*/
ParticleRenderer.prototype.render = function ( container )
{
var children = container.children,
totalChildren = children.length,
maxSize = container._size;
if(totalChildren === 0)
{
return;
}
else if(totalChildren > maxSize)
{
totalChildren = maxSize;
}
if(!container._buffers)
{
container._buffers = this.generateBuffers( container );
}
// if the uvs have not updated then no point rendering just yet!
//this.renderer.blendModeManager.setBlendMode(sprite.blendMode);
var gl = this.renderer.gl;
var m = container.worldTransform.copy( this.tempMatrix );
m.prepend( this.renderer.currentRenderTarget.projectionMatrix );
gl.uniformMatrix3fv(this.shader.uniforms.projectionMatrix._location, false, m.toArray(true));
// if this variable is true then we will upload the static contents as well as the dynamic contens
var uploadStatic = container._updateStatic;
// make sure the texture is bound..
var baseTexture = children[0]._texture.baseTexture;
if (!baseTexture._glTextures[gl.id])
{
this.renderer.updateTexture(baseTexture);
if(!this.properties[0].dynamic || !this.properties[3].dynamic)
{
uploadStatic = true;
}
}
else
{
gl.bindTexture(gl.TEXTURE_2D, baseTexture._glTextures[gl.id]);
}
// now lets upload and render the buffers..
var j = 0;
for (var i = 0; i < totalChildren; i+=this.size)
{
var amount = ( totalChildren - i);
if(amount > this.size)
{
amount = this.size;
}
var buffer = container._buffers[j++];
// we always upload the dynamic
buffer.uploadDynamic(children, i, amount);
// we only upload the static content when we have to!
if(uploadStatic)
{
buffer.uploadStatic(children, i, amount);
}
// bind the buffer
buffer.bind( this.shader );
// now draw those suckas!
gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0);
this.renderer.drawCount++;
}
container._updateStatic = false;
};
/**
* Creates one particle buffer for each child in the container we want to render and updates internal properties
*
* @param container {Container|Sprite} the sprite to render using this ParticleRenderer
*/
ParticleRenderer.prototype.generateBuffers = function ( container )
{
var gl = this.renderer.gl,
buffers = [],
size = container._size,
i;
// update the properties to match the state of the container..
for (i = 0; i < container._properties.length; i++)
{
this.properties[i].dynamic = container._properties[i];
}
for (i = 0; i < size; i += this.size)
{
buffers.push( new ParticleBuffer(gl, this.properties, this.size, this.shader) );
}
return buffers;
};
/**
*
* @param children {Array} the array of display objects to render
* @param startIndex {number} the index to start from in the children array
* @param amount {number} the amount of children that will have their vertices uploaded
* @param array {Array}
* @param stride {number}
* @param offset {number}
*/
ParticleRenderer.prototype.uploadVertices = function (children, startIndex, amount, array, stride, offset)
{
var sprite,
texture,
trim,
sx,
sy,
w0, w1, h0, h1;
for (var i = 0; i < amount; i++) {
sprite = children[startIndex + i];
texture = sprite._texture;
sx = sprite.scale.x;
sy = sprite.scale.y;
if (texture.trim)
{
// if the sprite is trimmed then we need to add the extra space before transforming the sprite coords..
trim = texture.trim;
w1 = trim.x - sprite.anchor.x * trim.width;
w0 = w1 + texture.crop.width;
h1 = trim.y - sprite.anchor.y * trim.height;
h0 = h1 + texture.crop.height;
}
else
{
w0 = (texture._frame.width ) * (1-sprite.anchor.x);
w1 = (texture._frame.width ) * -sprite.anchor.x;
h0 = texture._frame.height * (1-sprite.anchor.y);
h1 = texture._frame.height * -sprite.anchor.y;
}
array[offset] = w1 * sx;
array[offset + 1] = h1 * sy;
array[offset + stride] = w0 * sx;
array[offset + stride + 1] = h1 * sy;
array[offset + stride * 2] = w0 * sx;
array[offset + stride * 2 + 1] = h0 * sy;
array[offset + stride * 3] = w1 * sx;
array[offset + stride * 3 + 1] = h0 * sy;
offset += stride * 4;
}
};
/**
*
* @param children {Array} the array of display objects to render
* @param startIndex {number} the index to start from in the children array
* @param amount {number} the amount of children that will have their positions uploaded
* @param array {Array}
* @param stride {number}
* @param offset {number}
*/
ParticleRenderer.prototype.uploadPosition = function (children,startIndex, amount, array, stride, offset)
{
for (var i = 0; i < amount; i++)
{
var spritePosition = children[startIndex + i].position;
array[offset] = spritePosition.x;
array[offset + 1] = spritePosition.y;
array[offset + stride] = spritePosition.x;
array[offset + stride + 1] = spritePosition.y;
array[offset + stride * 2] = spritePosition.x;
array[offset + stride * 2 + 1] = spritePosition.y;
array[offset + stride * 3] = spritePosition.x;
array[offset + stride * 3 + 1] = spritePosition.y;
offset += stride * 4;
}
};
/**
*
* @param children {Array} the array of display objects to render
* @param startIndex {number} the index to start from in the children array
* @param amount {number} the amount of children that will have their rotation uploaded
* @param array {Array}
* @param stride {number}
* @param offset {number}
*/
ParticleRenderer.prototype.uploadRotation = function (children,startIndex, amount, array, stride, offset)
{
for (var i = 0; i < amount; i++)
{
var spriteRotation = children[startIndex + i].rotation;
array[offset] = spriteRotation;
array[offset + stride] = spriteRotation;
array[offset + stride * 2] = spriteRotation;
array[offset + stride * 3] = spriteRotation;
offset += stride * 4;
}
};
/**
*
* @param children {Array} the array of display objects to render
* @param startIndex {number} the index to start from in the children array
* @param amount {number} the amount of children that will have their Uvs uploaded
* @param array {Array}
* @param stride {number}
* @param offset {number}
*/
ParticleRenderer.prototype.uploadUvs = function (children,startIndex, amount, array, stride, offset)
{
for (var i = 0; i < amount; i++)
{
var textureUvs = children[startIndex + i]._texture._uvs;
if (textureUvs)
{
array[offset] = textureUvs.x0;
array[offset + 1] = textureUvs.y0;
array[offset + stride] = textureUvs.x1;
array[offset + stride + 1] = textureUvs.y1;
array[offset + stride * 2] = textureUvs.x2;
array[offset + stride * 2 + 1] = textureUvs.y2;
array[offset + stride * 3] = textureUvs.x3;
array[offset + stride * 3 + 1] = textureUvs.y3;
offset += stride * 4;
}
else
{
//TODO you know this can be easier!
array[offset] = 0;
array[offset + 1] = 0;
array[offset + stride] = 0;
array[offset + stride + 1] = 0;
array[offset + stride * 2] = 0;
array[offset + stride * 2 + 1] = 0;
array[offset + stride * 3] = 0;
array[offset + stride * 3 + 1] = 0;
offset += stride * 4;
}
}
};
/**
*
* @param children {Array} the array of display objects to render
* @param startIndex {number} the index to start from in the children array
* @param amount {number} the amount of children that will have their alpha uploaded
* @param array {Array}
* @param stride {number}
* @param offset {number}
*/
ParticleRenderer.prototype.uploadAlpha = function (children,startIndex, amount, array, stride, offset)
{
for (var i = 0; i < amount; i++)
{
var spriteAlpha = children[startIndex + i].alpha;
array[offset] = spriteAlpha;
array[offset + stride] = spriteAlpha;
array[offset + stride * 2] = spriteAlpha;
array[offset + stride * 3] = spriteAlpha;
offset += stride * 4;
}
};
/**
* Destroys the Particle.
*
*/
ParticleRenderer.prototype.destroy = function ()
{
this.shader.destroy();
//TODO implement this!
};
},{"../../math":22,"../../renderers/webgl/WebGLRenderer":38,"../../renderers/webgl/utils/ObjectRenderer":52,"./ParticleBuffer":29,"./ParticleShader":31}],31:[function(require,module,exports){
var TextureShader = require('../../renderers/webgl/shaders/TextureShader');
/**
* @class
* @extends TextureShader
* @memberof PIXI
* @param shaderManager {ShaderManager} The webgl shader manager this shader works for.
*/
function ParticleShader(shaderManager)
{
TextureShader.call(this,
shaderManager,
// vertex shader
[
'attribute vec2 aVertexPosition;',
'attribute vec2 aTextureCoord;',
'attribute float aColor;',
'attribute vec2 aPositionCoord;',
'attribute vec2 aScale;',
'attribute float aRotation;',
'uniform mat3 projectionMatrix;',
'varying vec2 vTextureCoord;',
'varying float vColor;',
'void main(void){',
' vec2 v = aVertexPosition;',
' v.x = (aVertexPosition.x) * cos(aRotation) - (aVertexPosition.y) * sin(aRotation);',
' v.y = (aVertexPosition.x) * sin(aRotation) + (aVertexPosition.y) * cos(aRotation);',
' v = v + aPositionCoord;',
' gl_Position = vec4((projectionMatrix * vec3(v, 1.0)).xy, 0.0, 1.0);',
' vTextureCoord = aTextureCoord;',
' vColor = aColor;',
'}'
].join('\n'),
// hello
[
'precision lowp float;',
'varying vec2 vTextureCoord;',
'varying float vColor;',
'uniform sampler2D uSampler;',
'void main(void){',
' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;',
'}'
].join('\n'),
// custom uniforms
null,
// custom attributes
{
aPositionCoord: 0,
// aScale: 0,
aRotation: 0
}
);
// TEMP HACK
}
ParticleShader.prototype = Object.create(TextureShader.prototype);
ParticleShader.prototype.constructor = ParticleShader;
module.exports = ParticleShader;
},{"../../renderers/webgl/shaders/TextureShader":51}],32:[function(require,module,exports){
var utils = require('../utils'),
math = require('../math'),
CONST = require('../const');
/**
* The CanvasRenderer draws the scene and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL.
* Don't forget to add the CanvasRenderer.view to your DOM or you will not see anything :)
*
* @class
* @memberof PIXI
* @param system {string} The name of the system this renderer is for.
* @param [width=800] {number} the width of the canvas view
* @param [height=600] {number} the height of the canvas view
* @param [options] {object} The optional renderer parameters
* @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional
* @param [options.transparent=false] {boolean} If the render view is transparent, default false
* @param [options.autoResize=false] {boolean} If the render view is automatically resized, default false
* @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment)
* @param [options.resolution=1] {number} the resolution of the renderer retina would be 2
* @param [options.clearBeforeRender=true] {boolean} This sets if the CanvasRenderer will clear the canvas or
* not before the new render pass.
*/
function SystemRenderer(system, width, height, options)
{
utils.sayHello(system);
// prepare options
if (options)
{
for (var i in CONST.DEFAULT_RENDER_OPTIONS)
{
if (typeof options[i] === 'undefined')
{
options[i] = CONST.DEFAULT_RENDER_OPTIONS[i];
}
}
}
else
{
options = CONST.DEFAULT_RENDER_OPTIONS;
}
/**
* The type of the renderer.
*
* @member {RENDERER_TYPE}
* @default CONT.RENDERER_TYPE.UNKNOWN
*/
this.type = CONST.RENDERER_TYPE.UNKNOWN;
/**
* The width of the canvas view
*
* @member {number}
* @default 800
*/
this.width = width || 800;
/**
* The height of the canvas view
*
* @member {number}
* @default 600
*/
this.height = height || 600;
/**
* The canvas element that everything is drawn to
*
* @member {HTMLCanvasElement}
*/
this.view = options.view || document.createElement('canvas');
/**
* The resolution of the renderer
*
* @member {number}
* @default 1
*/
this.resolution = options.resolution;
/**
* Whether the render view is transparent
*
* @member {boolean}
*/
this.transparent = options.transparent;
/**
* Whether the render view should be resized automatically
*
* @member {boolean}
*/
this.autoResize = options.autoResize || false;
/**
* Tracks the blend modes useful for this renderer.
*
* @member {object<string, mixed>}
*/
this.blendModes = null;
///////////////////////////
// TODO: Combine these!
/**
* The value of the preserveDrawingBuffer flag affects whether or not the contents of the stencil buffer is retained after rendering.
*
* @member {boolean}
*/
this.preserveDrawingBuffer = options.preserveDrawingBuffer;
/**
* This sets if the CanvasRenderer will clear the canvas or not before the new render pass.
* If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every frame to set the canvas background color.
* If the scene is transparent Pixi will use clearRect to clear the canvas every frame.
* Disable this by setting this to false. For example if your game has a canvas filling background image you often don't need this set.
*
* @member {boolean}
* @default
*/
this.clearBeforeRender = options.clearBeforeRender;
////////////////////////
/**
* The background color as a number.
*
* @member {number}
* @private
*/
this._backgroundColor = 0xFFFFFF;
/**
* The background color as an [R, G, B] array.
*
* @member {number[]}
* @private
*/
this._backgroundColorRgb = [1, 1, 1];
/**
* The background color as a string.
*
* @member {string}
* @private
*/
this._backgroundColorString = '#000000';
this.backgroundColor = options.backgroundColor || this._backgroundColor; // run bg color setter
/**
* This temporary display object used as the parent of the currently being rendered item
* @member {DisplayObject}
* @private
*/
this._tempDisplayObjectParent = {worldTransform:new math.Matrix(), worldAlpha:1, children:[]};
//
this._lastObjectRendered = this._tempDisplayObjectParent;
}
// constructor
SystemRenderer.prototype.constructor = SystemRenderer;
module.exports = SystemRenderer;
utils.eventTarget.mixin(SystemRenderer.prototype);
Object.defineProperties(SystemRenderer.prototype, {
/**
* The background color to fill if not transparent
*
* @member {number}
* @memberof SystemRenderer#
*/
backgroundColor:
{
get: function ()
{
return this._backgroundColor;
},
set: function (val)
{
this._backgroundColor = val;
this._backgroundColorString = utils.hex2string(val);
utils.hex2rgb(val, this._backgroundColorRgb);
}
}
});
/**
* Resizes the canvas view to the specified width and height
*
* @param width {number} the new width of the canvas view
* @param height {number} the new height of the canvas view
*/
SystemRenderer.prototype.resize = function (width, height) {
this.width = width * this.resolution;
this.height = height * this.resolution;
this.view.width = this.width;
this.view.height = this.height;
if (this.autoResize)
{
this.view.style.width = this.width / this.resolution + 'px';
this.view.style.height = this.height / this.resolution + 'px';
}
};
/**
* Removes everything from the renderer and optionally removes the Canvas DOM element.
*
* @param [removeView=false] {boolean} Removes the Canvas element from the DOM.
*/
SystemRenderer.prototype.destroy = function (removeView) {
if (removeView && this.view.parent)
{
this.view.parent.removeChild(this.view);
}
this.type = CONST.RENDERER_TYPE.UNKNOWN;
this.width = 0;
this.height = 0;
this.view = null;
this.resolution = 0;
this.transparent = false;
this.autoResize = false;
this.blendModes = null;
this.preserveDrawingBuffer = false;
this.clearBeforeRender = false;
this._backgroundColor = 0;
this._backgroundColorRgb = null;
this._backgroundColorString = null;
};
},{"../const":12,"../math":22,"../utils":66}],33:[function(require,module,exports){
var SystemRenderer = require('../SystemRenderer'),
CanvasMaskManager = require('./utils/CanvasMaskManager'),
utils = require('../../utils'),
math = require('../../math'),
CONST = require('../../const');
/**
* The CanvasRenderer draws the scene and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL.
* Don't forget to add the CanvasRenderer.view to your DOM or you will not see anything :)
*
* @class
* @memberof PIXI
* @extends SystemRenderer
* @param [width=800] {number} the width of the canvas view
* @param [height=600] {number} the height of the canvas view
* @param [options] {object} The optional renderer parameters
* @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional
* @param [options.transparent=false] {boolean} If the render view is transparent, default false
* @param [options.autoResize=false] {boolean} If the render view is automatically resized, default false
* @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment)
* @param [options.resolution=1] {number} the resolution of the renderer retina would be 2
* @param [options.clearBeforeRender=true] {boolean} This sets if the CanvasRenderer will clear the canvas or
* not before the new render pass.
*/
function CanvasRenderer(width, height, options)
{
SystemRenderer.call(this, 'Canvas', width, height, options);
this.type = CONST.RENDERER_TYPE.CANVAS;
/**
* The canvas 2d context that everything is drawn with.
*
* @member {CanvasRenderingContext2D}
*/
this.context = this.view.getContext('2d', { alpha: this.transparent });
/**
* Boolean flag controlling canvas refresh.
*
* @member {boolean}
*/
this.refresh = true;
/**
* Instance of a CanvasMaskManager, handles masking when using the canvas renderer.
*
* @member {CanvasMaskManager}
*/
this.maskManager = new CanvasMaskManager();
/**
* If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation.
* Handy for crisp pixel art and speed on legacy devices.
*
* @member {boolean}
*/
this.roundPixels = false;
/**
* Tracks the active scale mode for this renderer.
*
* @member {SCALE_MODE}
*/
this.currentScaleMode = CONST.SCALE_MODES.DEFAULT;
/**
* Tracks the active blend mode for this renderer.
*
* @member {SCALE_MODE}
*/
this.currentBlendMode = CONST.BLEND_MODES.NORMAL;
/**
* The canvas property used to set the canvas smoothing property.
*
* @member {string}
*/
this.smoothProperty = 'imageSmoothingEnabled';
if (!this.context.imageSmoothingEnabled)
{
if (this.context.webkitImageSmoothingEnabled)
{
this.smoothProperty = 'webkitImageSmoothingEnabled';
}
else if (this.context.mozImageSmoothingEnabled)
{
this.smoothProperty = 'mozImageSmoothingEnabled';
}
else if (this.context.oImageSmoothingEnabled)
{
this.smoothProperty = 'oImageSmoothingEnabled';
}
else if (this.context.msImageSmoothingEnabled)
{
this.smoothProperty = 'msImageSmoothingEnabled';
}
}
this.initPlugins();
this._mapBlendModes();
/**
* This temporary display object used as the parent of the currently being rendered item
*
* @member {DisplayObject}
* @private
*/
this._tempDisplayObjectParent = {
worldTransform: new math.Matrix(),
worldAlpha: 1
};
this.resize(width, height);
}
// constructor
CanvasRenderer.prototype = Object.create(SystemRenderer.prototype);
CanvasRenderer.prototype.constructor = CanvasRenderer;
module.exports = CanvasRenderer;
utils.pluginTarget.mixin(CanvasRenderer);
/**
* Renders the object to this canvas view
*
* @param object {DisplayObject} the object to be rendered
*/
CanvasRenderer.prototype.render = function (object)
{
var cacheParent = object.parent;
this._lastObjectRendered = object;
object.parent = this._tempDisplayObjectParent;
// update the scene graph
object.updateTransform();
object.parent = cacheParent;
this.context.setTransform(1, 0, 0, 1, 0, 0);
this.context.globalAlpha = 1;
this.currentBlendMode = CONST.BLEND_MODES.NORMAL;
this.context.globalCompositeOperation = this.blendModes[CONST.BLEND_MODES.NORMAL];
if (navigator.isCocoonJS && this.view.screencanvas)
{
this.context.fillStyle = 'black';
this.context.clear();
}
if (this.clearBeforeRender)
{
if (this.transparent)
{
this.context.clearRect(0, 0, this.width, this.height);
}
else
{
this.context.fillStyle = this._backgroundColorString;
this.context.fillRect(0, 0, this.width , this.height);
}
}
this.renderDisplayObject(object, this.context);
};
/**
* Removes everything from the renderer and optionally removes the Canvas DOM element.
*
* @param [removeView=false] {boolean} Removes the Canvas element from the DOM.
*/
CanvasRenderer.prototype.destroy = function (removeView)
{
this.destroyPlugins();
// call the base destroy
SystemRenderer.prototype.destroy.call(this, removeView);
this.context = null;
this.refresh = true;
this.maskManager.destroy();
this.maskManager = null;
this.roundPixels = false;
this.currentScaleMode = 0;
this.currentBlendMode = 0;
this.smoothProperty = null;
};
/**
* Renders a display object
*
* @param displayObject {DisplayObject} The displayObject to render
* @private
*/
CanvasRenderer.prototype.renderDisplayObject = function (displayObject, context)
{
var tempContext = this.context;
this.context = context;
displayObject.renderCanvas(this);
this.context = tempContext;
};
/**
* Maps Pixi blend modes to canvas blend modes.
*
* @private
*/
CanvasRenderer.prototype._mapBlendModes = function ()
{
if (!this.blendModes)
{
this.blendModes = {};
if (utils.canUseNewCanvasBlendModes())
{
this.blendModes[CONST.BLEND_MODES.NORMAL] = 'source-over';
this.blendModes[CONST.BLEND_MODES.ADD] = 'lighter'; //IS THIS OK???
this.blendModes[CONST.BLEND_MODES.MULTIPLY] = 'multiply';
this.blendModes[CONST.BLEND_MODES.SCREEN] = 'screen';
this.blendModes[CONST.BLEND_MODES.OVERLAY] = 'overlay';
this.blendModes[CONST.BLEND_MODES.DARKEN] = 'darken';
this.blendModes[CONST.BLEND_MODES.LIGHTEN] = 'lighten';
this.blendModes[CONST.BLEND_MODES.COLOR_DODGE] = 'color-dodge';
this.blendModes[CONST.BLEND_MODES.COLOR_BURN] = 'color-burn';
this.blendModes[CONST.BLEND_MODES.HARD_LIGHT] = 'hard-light';
this.blendModes[CONST.BLEND_MODES.SOFT_LIGHT] = 'soft-light';
this.blendModes[CONST.BLEND_MODES.DIFFERENCE] = 'difference';
this.blendModes[CONST.BLEND_MODES.EXCLUSION] = 'exclusion';
this.blendModes[CONST.BLEND_MODES.HUE] = 'hue';
this.blendModes[CONST.BLEND_MODES.SATURATION] = 'saturation';
this.blendModes[CONST.BLEND_MODES.COLOR] = 'color';
this.blendModes[CONST.BLEND_MODES.LUMINOSITY] = 'luminosity';
}
else
{
// this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough'
this.blendModes[CONST.BLEND_MODES.NORMAL] = 'source-over';
this.blendModes[CONST.BLEND_MODES.ADD] = 'lighter'; //IS THIS OK???
this.blendModes[CONST.BLEND_MODES.MULTIPLY] = 'source-over';
this.blendModes[CONST.BLEND_MODES.SCREEN] = 'source-over';
this.blendModes[CONST.BLEND_MODES.OVERLAY] = 'source-over';
this.blendModes[CONST.BLEND_MODES.DARKEN] = 'source-over';
this.blendModes[CONST.BLEND_MODES.LIGHTEN] = 'source-over';
this.blendModes[CONST.BLEND_MODES.COLOR_DODGE] = 'source-over';
this.blendModes[CONST.BLEND_MODES.COLOR_BURN] = 'source-over';
this.blendModes[CONST.BLEND_MODES.HARD_LIGHT] = 'source-over';
this.blendModes[CONST.BLEND_MODES.SOFT_LIGHT] = 'source-over';
this.blendModes[CONST.BLEND_MODES.DIFFERENCE] = 'source-over';
this.blendModes[CONST.BLEND_MODES.EXCLUSION] = 'source-over';
this.blendModes[CONST.BLEND_MODES.HUE] = 'source-over';
this.blendModes[CONST.BLEND_MODES.SATURATION] = 'source-over';
this.blendModes[CONST.BLEND_MODES.COLOR] = 'source-over';
this.blendModes[CONST.BLEND_MODES.LUMINOSITY] = 'source-over';
}
}
};
},{"../../const":12,"../../math":22,"../../utils":66,"../SystemRenderer":32,"./utils/CanvasMaskManager":36}],34:[function(require,module,exports){
/**
* Creates a Canvas element of the given size.
*
* @class
* @memberof PIXI
* @param width {number} the width for the newly created canvas
* @param height {number} the height for the newly created canvas
*/
function CanvasBuffer(width, height)
{
/**
* The Canvas object that belongs to this CanvasBuffer.
*
* @member {HTMLCanvasElement}
*/
this.canvas = document.createElement('canvas');
/**
* A CanvasRenderingContext2D object representing a two-dimensional rendering context.
*
* @member {CanvasRenderingContext2D}
*/
this.context = this.canvas.getContext('2d');
this.canvas.width = width;
this.canvas.height = height;
}
CanvasBuffer.prototype.constructor = CanvasBuffer;
module.exports = CanvasBuffer;
Object.defineProperties(CanvasBuffer.prototype, {
/**
* The width of the canvas buffer in pixels.
*
* @member {number}
* @memberof CanvasBuffer#
*/
width: {
get: function ()
{
return this.canvas.width;
},
set: function (val)
{
this.canvas.width = val;
}
},
/**
* The height of the canvas buffer in pixels.
*
* @member {number}
* @memberof CanvasBuffer#
*/
height: {
get: function ()
{
return this.canvas.height;
},
set: function (val)
{
this.canvas.height = val;
}
}
});
/**
* Clears the canvas that was created by the CanvasBuffer class.
*
* @private
*/
CanvasBuffer.prototype.clear = function ()
{
this.context.setTransform(1, 0, 0, 1, 0, 0);
this.context.clearRect(0,0, this.canvas.width, this.canvas.height);
};
/**
* Resizes the canvas to the specified width and height.
*
* @param width {number} the new width of the canvas
* @param height {number} the new height of the canvas
*/
CanvasBuffer.prototype.resize = function (width, height)
{
this.canvas.width = width;
this.canvas.height = height;
};
/**
* Destroys this canvas.
*
*/
CanvasBuffer.prototype.destroy = function ()
{
this.context = null;
this.canvas = null;
};
},{}],35:[function(require,module,exports){
var CONST = require('../../../const');
/**
* A set of functions used by the canvas renderer to draw the primitive graphics data.
* @static
* @memberof PIXI
*/
var CanvasGraphics = module.exports = {};
/*
* Renders a Graphics object to a canvas.
*
* @param graphics {Graphics} the actual graphics object to render
* @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas
*/
CanvasGraphics.renderGraphics = function (graphics, context)
{
var worldAlpha = graphics.worldAlpha;
if (graphics.dirty)
{
this.updateGraphicsTint(graphics);
graphics.dirty = false;
}
for (var i = 0; i < graphics.graphicsData.length; i++)
{
var data = graphics.graphicsData[i];
var shape = data.shape;
var fillColor = data._fillTint;
var lineColor = data._lineTint;
context.lineWidth = data.lineWidth;
if (data.type === CONST.SHAPES.POLY)
{
context.beginPath();
var points = shape.points;
context.moveTo(points[0], points[1]);
for (var j=1; j < points.length/2; j++)
{
context.lineTo(points[j * 2], points[j * 2 + 1]);
}
if (shape.closed)
{
context.lineTo(points[0], points[1]);
}
// 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])
{
context.closePath();
}
if (data.fill)
{
context.globalAlpha = data.fillAlpha * worldAlpha;
context.fillStyle = '#' + ('00000' + ( fillColor | 0).toString(16)).substr(-6);
context.fill();
}
if (data.lineWidth)
{
context.globalAlpha = data.lineAlpha * worldAlpha;
context.strokeStyle = '#' + ('00000' + ( lineColor | 0).toString(16)).substr(-6);
context.stroke();
}
}
else if (data.type === CONST.SHAPES.RECT)
{
if (data.fillColor || data.fillColor === 0)
{
context.globalAlpha = data.fillAlpha * worldAlpha;
context.fillStyle = '#' + ('00000' + ( fillColor | 0).toString(16)).substr(-6);
context.fillRect(shape.x, shape.y, shape.width, shape.height);
}
if (data.lineWidth)
{
context.globalAlpha = data.lineAlpha * worldAlpha;
context.strokeStyle = '#' + ('00000' + ( lineColor | 0).toString(16)).substr(-6);
context.strokeRect(shape.x, shape.y, shape.width, shape.height);
}
}
else if (data.type === CONST.SHAPES.CIRC)
{
// TODO - need to be Undefined!
context.beginPath();
context.arc(shape.x, shape.y, shape.radius,0,2*Math.PI);
context.closePath();
if (data.fill)
{
context.globalAlpha = data.fillAlpha * worldAlpha;
context.fillStyle = '#' + ('00000' + ( fillColor | 0).toString(16)).substr(-6);
context.fill();
}
if (data.lineWidth)
{
context.globalAlpha = data.lineAlpha * worldAlpha;
context.strokeStyle = '#' + ('00000' + ( lineColor | 0).toString(16)).substr(-6);
context.stroke();
}
}
else if (data.type === CONST.SHAPES.ELIP)
{
// ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
var w = shape.width * 2;
var h = shape.height * 2;
var x = shape.x - w/2;
var y = shape.y - h/2;
context.beginPath();
var kappa = 0.5522848,
ox = (w / 2) * kappa, // control point offset horizontal
oy = (h / 2) * kappa, // control point offset vertical
xe = x + w, // x-end
ye = y + h, // y-end
xm = x + w / 2, // x-middle
ym = y + h / 2; // y-middle
context.moveTo(x, ym);
context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
context.closePath();
if (data.fill)
{
context.globalAlpha = data.fillAlpha * worldAlpha;
context.fillStyle = '#' + ('00000' + ( fillColor | 0).toString(16)).substr(-6);
context.fill();
}
if (data.lineWidth)
{
context.globalAlpha = data.lineAlpha * worldAlpha;
context.strokeStyle = '#' + ('00000' + ( lineColor | 0).toString(16)).substr(-6);
context.stroke();
}
}
else if (data.type === CONST.SHAPES.RREC)
{
var rx = shape.x;
var ry = shape.y;
var width = shape.width;
var height = shape.height;
var radius = shape.radius;
var maxRadius = Math.min(width, height) / 2 | 0;
radius = radius > maxRadius ? maxRadius : radius;
context.beginPath();
context.moveTo(rx, ry + radius);
context.lineTo(rx, ry + height - radius);
context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height);
context.lineTo(rx + width - radius, ry + height);
context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius);
context.lineTo(rx + width, ry + radius);
context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry);
context.lineTo(rx + radius, ry);
context.quadraticCurveTo(rx, ry, rx, ry + radius);
context.closePath();
if (data.fillColor || data.fillColor === 0)
{
context.globalAlpha = data.fillAlpha * worldAlpha;
context.fillStyle = '#' + ('00000' + ( fillColor | 0).toString(16)).substr(-6);
context.fill();
}
if (data.lineWidth)
{
context.globalAlpha = data.lineAlpha * worldAlpha;
context.strokeStyle = '#' + ('00000' + ( lineColor | 0).toString(16)).substr(-6);
context.stroke();
}
}
}
};
/*
* Renders a graphics mask
*
* @private
* @param graphics {Graphics} the graphics which will be used as a mask
* @param context {CanvasRenderingContext2D} the context 2d method of the canvas
*/
CanvasGraphics.renderGraphicsMask = function (graphics, context)
{
var len = graphics.graphicsData.length;
if (len === 0)
{
return;
}
context.beginPath();
for (var i = 0; i < len; i++)
{
var data = graphics.graphicsData[i];
var shape = data.shape;
if (data.type === CONST.SHAPES.POLY)
{
var points = shape.points;
context.moveTo(points[0], points[1]);
for (var j=1; j < points.length/2; j++)
{
context.lineTo(points[j * 2], points[j * 2 + 1]);
}
// 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])
{
context.closePath();
}
}
else if (data.type === CONST.SHAPES.RECT)
{
context.rect(shape.x, shape.y, shape.width, shape.height);
context.closePath();
}
else if (data.type === CONST.SHAPES.CIRC)
{
// TODO - need to be Undefined!
context.arc(shape.x, shape.y, shape.radius, 0, 2 * Math.PI);
context.closePath();
}
else if (data.type === CONST.SHAPES.ELIP)
{
// ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
var w = shape.width * 2;
var h = shape.height * 2;
var x = shape.x - w/2;
var y = shape.y - h/2;
var kappa = 0.5522848,
ox = (w / 2) * kappa, // control point offset horizontal
oy = (h / 2) * kappa, // control point offset vertical
xe = x + w, // x-end
ye = y + h, // y-end
xm = x + w / 2, // x-middle
ym = y + h / 2; // y-middle
context.moveTo(x, ym);
context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
context.closePath();
}
else if (data.type === CONST.SHAPES.RREC)
{
var rx = shape.x;
var ry = shape.y;
var width = shape.width;
var height = shape.height;
var radius = shape.radius;
var maxRadius = Math.min(width, height) / 2 | 0;
radius = radius > maxRadius ? maxRadius : radius;
context.moveTo(rx, ry + radius);
context.lineTo(rx, ry + height - radius);
context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height);
context.lineTo(rx + width - radius, ry + height);
context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius);
context.lineTo(rx + width, ry + radius);
context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry);
context.lineTo(rx + radius, ry);
context.quadraticCurveTo(rx, ry, rx, ry + radius);
context.closePath();
}
}
};
/*
* Updates the tint of a graphics object
*
* @private
* @param graphics {Graphics} the graphics that will have its tint updated
*
*/
CanvasGraphics.updateGraphicsTint = function (graphics)
{
if (graphics.tint === 0xFFFFFF)
{
return;
}
var tintR = (graphics.tint >> 16 & 0xFF) / 255;
var tintG = (graphics.tint >> 8 & 0xFF) / 255;
var tintB = (graphics.tint & 0xFF)/ 255;
for (var i = 0; i < graphics.graphicsData.length; i++)
{
var data = graphics.graphicsData[i];
var fillColor = data.fillColor | 0;
var lineColor = data.lineColor | 0;
/*
var colorR = (fillColor >> 16 & 0xFF) / 255;
var colorG = (fillColor >> 8 & 0xFF) / 255;
var colorB = (fillColor & 0xFF) / 255;
colorR *= tintR;
colorG *= tintG;
colorB *= tintB;
fillColor = ((colorR*255 << 16) + (colorG*255 << 8) + colorB*255);
colorR = (lineColor >> 16 & 0xFF) / 255;
colorG = (lineColor >> 8 & 0xFF) / 255;
colorB = (lineColor & 0xFF) / 255;
colorR *= tintR;
colorG *= tintG;
colorB *= tintB;
lineColor = ((colorR*255 << 16) + (colorG*255 << 8) + colorB*255);
*/
// super inline cos im an optimization NAZI :)
data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255);
data._lineTint = (((lineColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((lineColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (lineColor & 0xFF) / 255 * tintB*255);
}
};
},{"../../../const":12}],36:[function(require,module,exports){
var CanvasGraphics = require('./CanvasGraphics');
/**
* A set of functions used to handle masking.
*
* @class
* @memberof PIXI
*/
function CanvasMaskManager()
{}
CanvasMaskManager.prototype.constructor = CanvasMaskManager;
module.exports = CanvasMaskManager;
/**
* This method adds it to the current stack of masks.
*
* @param maskData {object} the maskData that will be pushed
* @param renderer {WebGLRenderer|CanvasRenderer} The renderer context to use.
*/
CanvasMaskManager.prototype.pushMask = function (maskData, renderer)
{
renderer.context.save();
var cacheAlpha = maskData.alpha;
var transform = maskData.worldTransform;
var resolution = renderer.resolution;
renderer.context.setTransform(
transform.a * resolution,
transform.b * resolution,
transform.c * resolution,
transform.d * resolution,
transform.tx * resolution,
transform.ty * resolution
);
//TODO suport sprite alpha masks??
//lots of effort required. If demand is great enough..
if(!maskData.texture)
{
CanvasGraphics.renderGraphicsMask(maskData, renderer.context);
renderer.context.clip();
}
maskData.worldAlpha = cacheAlpha;
};
/**
* Restores the current drawing context to the state it was before the mask was applied.
*
* @param renderer {WebGLRenderer|CanvasRenderer} The renderer context to use.
*/
CanvasMaskManager.prototype.popMask = function (renderer)
{
renderer.context.restore();
};
},{"./CanvasGraphics":35}],37:[function(require,module,exports){
var utils = require('../../../utils');
/**
* Utility methods for Sprite/Texture tinting.
* @static
* @memberof PIXI
*/
var CanvasTinter = module.exports = {};
/**
* Basically this method just needs a sprite and a color and tints the sprite with the given color.
*
* @param sprite {Sprite} the sprite to tint
* @param color {number} the color to use to tint the sprite with
* @return {HTMLCanvasElement} The tinted canvas
*/
CanvasTinter.getTintedTexture = function (sprite, color)
{
var texture = sprite.texture;
color = CanvasTinter.roundColor(color);
var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6);
texture.tintCache = texture.tintCache || {};
if (texture.tintCache[stringColor])
{
return texture.tintCache[stringColor];
}
// clone texture..
var canvas = CanvasTinter.canvas || document.createElement('canvas');
//CanvasTinter.tintWithPerPixel(texture, stringColor, canvas);
CanvasTinter.tintMethod(texture, color, canvas);
if (CanvasTinter.convertTintToImage)
{
// is this better?
var tintImage = new Image();
tintImage.src = canvas.toDataURL();
texture.tintCache[stringColor] = tintImage;
}
else
{
texture.tintCache[stringColor] = canvas;
// if we are not converting the texture to an image then we need to lose the reference to the canvas
CanvasTinter.canvas = null;
}
return canvas;
};
/**
* Tint a texture using the 'multiply' operation.
*
* @param texture {Texture} the texture to tint
* @param color {number} the color to use to tint the sprite with
* @param canvas {HTMLCanvasElement} the current canvas
*/
CanvasTinter.tintWithMultiply = function (texture, color, canvas)
{
var context = canvas.getContext( '2d' );
var crop = texture.crop;
canvas.width = crop.width;
canvas.height = crop.height;
context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6);
context.fillRect(0, 0, crop.width, crop.height);
context.globalCompositeOperation = 'multiply';
context.drawImage(
texture.baseTexture.source,
crop.x,
crop.y,
crop.width,
crop.height,
0,
0,
crop.width,
crop.height
);
context.globalCompositeOperation = 'destination-atop';
context.drawImage(
texture.baseTexture.source,
crop.x,
crop.y,
crop.width,
crop.height,
0,
0,
crop.width,
crop.height
);
};
/**
* Tint a texture using the 'overlay' operation.
*
* @param texture {Texture} the texture to tint
* @param color {number} the color to use to tint the sprite with
* @param canvas {HTMLCanvasElement} the current canvas
*/
CanvasTinter.tintWithOverlay = function (texture, color, canvas)
{
var context = canvas.getContext( '2d' );
var crop = texture.crop;
canvas.width = crop.width;
canvas.height = crop.height;
context.globalCompositeOperation = 'copy';
context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6);
context.fillRect(0, 0, crop.width, crop.height);
context.globalCompositeOperation = 'destination-atop';
context.drawImage(
texture.baseTexture.source,
crop.x,
crop.y,
crop.width,
crop.height,
0,
0,
crop.width,
crop.height
);
// context.globalCompositeOperation = 'copy';
};
/**
* Tint a texture pixel per pixel.
*
* @param texture {Texture} the texture to tint
* @param color {number} the color to use to tint the sprite with
* @param canvas {HTMLCanvasElement} the current canvas
*/
CanvasTinter.tintWithPerPixel = function (texture, color, canvas)
{
var context = canvas.getContext( '2d' );
var crop = texture.crop;
canvas.width = crop.width;
canvas.height = crop.height;
context.globalCompositeOperation = 'copy';
context.drawImage(
texture.baseTexture.source,
crop.x,
crop.y,
crop.width,
crop.height,
0,
0,
crop.width,
crop.height
);
var rgbValues = utils.hex2rgb(color);
var r = rgbValues[0], g = rgbValues[1], b = rgbValues[2];
var pixelData = context.getImageData(0, 0, crop.width, crop.height);
var pixels = pixelData.data;
for (var i = 0; i < pixels.length; i += 4)
{
pixels[i+0] *= r;
pixels[i+1] *= g;
pixels[i+2] *= b;
}
context.putImageData(pixelData, 0, 0);
};
/**
* Rounds the specified color according to the CanvasTinter.cacheStepsPerColorChannel.
*
* @param color {number} the color to round, should be a hex color
*/
CanvasTinter.roundColor = function (color)
{
var step = CanvasTinter.cacheStepsPerColorChannel;
var rgbValues = utils.hex2rgb(color);
rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step);
rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step);
rgbValues[2] = Math.min(255, (rgbValues[2] / step) * step);
return utils.rgb2hex(rgbValues);
};
/**
* Number of steps which will be used as a cap when rounding colors.
*
* @member
*/
CanvasTinter.cacheStepsPerColorChannel = 8;
/**
* Tint cache boolean flag.
*
* @member
*/
CanvasTinter.convertTintToImage = false;
/**
* Whether or not the Canvas BlendModes are supported, consequently the ability to tint using the multiply method.
*
* @member
*/
CanvasTinter.canUseMultiply = utils.canUseNewCanvasBlendModes();
/**
* The tinting method that will be used.
*
*/
CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel;
},{"../../../utils":66}],38:[function(require,module,exports){
var SystemRenderer = require('../SystemRenderer'),
ShaderManager = require('./managers/ShaderManager'),
MaskManager = require('./managers/MaskManager'),
StencilManager = require('./managers/StencilManager'),
FilterManager = require('./managers/FilterManager'),
BlendModeManager = require('./managers/BlendModeManager'),
RenderTarget = require('./utils/RenderTarget'),
ObjectRenderer = require('./utils/ObjectRenderer'),
FXAAFilter = require('./filters/FXAAFilter'),
utils = require('../../utils'),
CONST = require('../../const');
/**
* The WebGLRenderer draws the scene and all its content onto a webGL enabled canvas. This renderer
* should be used for browsers that support webGL. This Render works by automatically managing webGLBatchs.
* So no need for Sprite Batches or Sprite Clouds.
* Don't forget to add the view to your DOM or you will not see anything :)
*
* @class
* @memberof PIXI
* @extends SystemRenderer
* @param [width=0] {number} the width of the canvas view
* @param [height=0] {number} the height of the canvas view
* @param [options] {object} The optional renderer parameters
* @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional
* @param [options.transparent=false] {boolean} If the render view is transparent, default false
* @param [options.autoResize=false] {boolean} If the render view is automatically resized, default false
* @param [options.antialias=false] {boolean} sets antialias. If not available natively then FXAA antialiasing is used
* @param [options.forceFXAA=false] {boolean} forces FXAA antialiasing to be used over native. FXAA is faster, but may not always lok as great
* @param [options.resolution=1] {number} the resolution of the renderer retina would be 2
* @param [options.clearBeforeRender=true] {boolean} This sets if the CanvasRenderer will clear the canvas or
* not before the new render pass.
* @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if
* you need to call toDataUrl on the webgl context.
*/
function WebGLRenderer(width, height, options)
{
options = options || {};
SystemRenderer.call(this, 'WebGL', width, height, options);
/**
* The type of this renderer as a standardised const
*
* @member {number}
*
*/
this.type = CONST.RENDERER_TYPE.WEBGL;
this.handleContextLost = this.handleContextLost.bind(this);
this.handleContextRestored = this.handleContextRestored.bind(this);
this._updateTextureBound = function(e){
this.updateTexture(e.target);
}.bind(this);
this._destroyTextureBound = function(e){
this.destroyTexture(e.target);
}.bind(this);
this.view.addEventListener('webglcontextlost', this.handleContextLost, false);
this.view.addEventListener('webglcontextrestored', this.handleContextRestored, false);
//TODO possibility to force FXAA as it may offer better performance?
/**
* Does it use FXAA ?
*
* @member {boolean}
* @private
*/
this._useFXAA = !!options.forceFXAA && options.antialias;
/**
* The fxaa filter
*
* @member {FXAAFilter}
* @private
*/
this._FXAAFilter = null;
/**
* The options passed in to create a new webgl context.
*
* @member {object}
* @private
*/
this._contextOptions = {
alpha: this.transparent,
antialias: options.antialias,
premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied',
stencil: true,
preserveDrawingBuffer: options.preserveDrawingBuffer
};
/**
* Counter for the number of draws made each frame
*
* @member {number}
*/
this.drawCount = 0;
/**
* Deals with managing the shader programs and their attribs.
*
* @member {ShaderManager}
*/
this.shaderManager = new ShaderManager(this);
/**
* Manages the masks using the stencil buffer.
*
* @member {MaskManager}
*/
this.maskManager = new MaskManager(this);
/**
* Manages the stencil buffer.
*
* @member {StencilManager}
*/
this.stencilManager = new StencilManager(this);
/**
* Manages the filters.
*
* @member {FilterManager}
*/
this.filterManager = new FilterManager(this);
/**
* Manages the blendModes
* @member {BlendModeManager}
*/
this.blendModeManager = new BlendModeManager(this);
/**
* Holds the current render target
* @member {Object}
*/
this.currentRenderTarget = this.renderTarget;
/**
* object renderer @alvin
* @member {ObjectRenderer}
*/
this.currentRenderer = new ObjectRenderer(this);
this.initPlugins();
// initialize the context so it is ready for the managers.
this._initContext();
// map some webGL blend modes..
this._mapBlendModes();
/**
* An array of render targets
* @member {Array}
* @private
*/
this._renderTargetStack = [];
}
// constructor
WebGLRenderer.prototype = Object.create(SystemRenderer.prototype);
WebGLRenderer.prototype.constructor = WebGLRenderer;
module.exports = WebGLRenderer;
utils.pluginTarget.mixin(WebGLRenderer);
WebGLRenderer.glContextId = 0;
/**
* Creates the WebGL context
* @private
*/
WebGLRenderer.prototype._initContext = function ()
{
var gl = this.view.getContext('webgl', this._contextOptions) || this.view.getContext('experimental-webgl', this._contextOptions);
this.gl = gl;
if (!gl)
{
// fail, not able to get a context
throw new Error('This browser does not support webGL. Try using the canvas renderer');
}
this.glContextId = WebGLRenderer.glContextId++;
gl.id = this.glContextId;
gl.renderer = this;
// set up the default pixi settings..
gl.disable(gl.DEPTH_TEST);
gl.disable(gl.CULL_FACE);
gl.enable(gl.BLEND);
this.renderTarget = new RenderTarget(this.gl, this.width, this.height, null, this.resolution, true);
this.emit('context', gl);
// setup the width/height properties and gl viewport
this.resize(this.width, this.height);
if(!this._useFXAA)
{
this._useFXAA = ( this._contextOptions.antialias && ! gl.getContextAttributes().antialias );
}
if(this._useFXAA)
{
window.console.warn('FXAA antialiasing being used instead of native antialiasing');
this._FXAAFilter = [new FXAAFilter()];
}
};
/**
* Renders the object to its webGL view
*
* @param object {DisplayObject} the object to be rendered
*/
WebGLRenderer.prototype.render = function (object)
{
// no point rendering if our context has been blown up!
if (this.gl.isContextLost())
{
return;
}
this._lastObjectRendered = object;
if(this._useFXAA)
{
this._FXAAFilter[0].uniforms.resolution.value.x = this.width;
this._FXAAFilter[0].uniforms.resolution.value.y = this.height;
object.filterArea = this.renderTarget.size;
object.filters = this._FXAAFilter;
}
var cacheParent = object.parent;
object.parent = this._tempDisplayObjectParent;
// update the scene graph
object.updateTransform();
object.parent = cacheParent;
var gl = this.gl;
// make sure we are bound to the main frame buffer
this.setRenderTarget(this.renderTarget);
if (this.clearBeforeRender)
{
if (this.transparent)
{
gl.clearColor(0, 0, 0, 0);
}
else
{
gl.clearColor(this._backgroundColorRgb[0], this._backgroundColorRgb[1], this._backgroundColorRgb[2], 1);
}
gl.clear(gl.COLOR_BUFFER_BIT);
}
this.renderDisplayObject(object, this.renderTarget);//this.projection);
};
/**
* Renders a Display Object.
*
* @param displayObject {DisplayObject} The DisplayObject to render
* @param renderTarget {RenderTarget} The render target to use to render this display object
*
*/
WebGLRenderer.prototype.renderDisplayObject = function (displayObject, renderTarget)//projection, buffer)
{
// TODO is this needed...
//this.blendModeManager.setBlendMode(CONST.BLEND_MODES.NORMAL);
this.setRenderTarget(renderTarget);
// start the filter manager
this.filterManager.setFilterStack( renderTarget.filterStack );
// render the scene!
displayObject.renderWebGL(this);
// finish the current renderer..
this.currentRenderer.flush();
};
/**
* Changes the current renderer to the one given in parameter
*
* @param objectRenderer {Object} TODO @alvin
*
*/
WebGLRenderer.prototype.setObjectRenderer = function (objectRenderer)
{
if (this.currentRenderer === objectRenderer)
{
return;
}
this.currentRenderer.stop();
this.currentRenderer = objectRenderer;
this.currentRenderer.start();
};
/**
* Changes the current render target to the one given in parameter
*
* @param renderTarget {RenderTarget} the new render target
*
*/
WebGLRenderer.prototype.setRenderTarget = function (renderTarget)
{
if( this.currentRenderTarget === renderTarget)
{
return;
}
// TODO - maybe down the line this should be a push pos thing? Leaving for now though.
this.currentRenderTarget = renderTarget;
this.currentRenderTarget.activate();
this.stencilManager.setMaskStack( renderTarget.stencilMaskStack );
};
/**
* Resizes the webGL view to the specified width and height.
*
* @param width {number} the new width of the webGL view
* @param height {number} the new height of the webGL view
*/
WebGLRenderer.prototype.resize = function (width, height)
{
SystemRenderer.prototype.resize.call(this, width, height);
// console.log(width)
this.filterManager.resize(width, height);
this.renderTarget.resize(width, height);
if(this.currentRenderTarget === this.renderTarget)
{
this.renderTarget.activate();
}
};
/**
* Updates and/or Creates a WebGL texture for the renderer's context.
*
* @param texture {BaseTexture|Texture} the texture to update
*/
WebGLRenderer.prototype.updateTexture = function (texture)
{
texture = texture.baseTexture || texture;
if (!texture.hasLoaded)
{
return;
}
var gl = this.gl;
if (!texture._glTextures[gl.id])
{
texture._glTextures[gl.id] = gl.createTexture();
texture.on('update', this._updateTextureBound);
texture.on('dispose', this._destroyTextureBound);
}
gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]);
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.SCALE_MODES.LINEAR ? gl.LINEAR : gl.NEAREST);
if (texture.mipmap && texture.isPowerOfTwo)
{
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.SCALE_MODES.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST);
gl.generateMipmap(gl.TEXTURE_2D);
}
else
{
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.SCALE_MODES.LINEAR ? gl.LINEAR : gl.NEAREST);
}
if (!texture.isPowerOfTwo)
{
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);
}
else
{
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
}
return texture._glTextures[gl.id];
};
/**
* Deletes the texture from WebGL
*
* @param texture {BaseTexture|Texture} the texture to destroy
*/
WebGLRenderer.prototype.destroyTexture = function (texture)
{
texture = texture.baseTexture || texture;
if (!texture.hasLoaded)
{
return;
}
if (texture._glTextures[this.gl.id])
{
this.gl.deleteTexture(texture._glTextures[this.gl.id]);
}
};
/**
* Handles a lost webgl context
*
* @param event {Event}
* @private
*/
WebGLRenderer.prototype.handleContextLost = function (event)
{
event.preventDefault();
};
/**
* Handles a restored webgl context
*
* @param event {Event}
* @private
*/
WebGLRenderer.prototype.handleContextRestored = function ()
{
this._initContext();
// empty all the old gl textures as they are useless now
for (var key in utils.BaseTextureCache)
{
utils.BaseTextureCache[key]._glTextures.length = 0;
}
};
/**
* Removes everything from the renderer (event listeners, spritebatch, etc...)
*
* @param [removeView=false] {boolean} Removes the Canvas element from the DOM.
*/
WebGLRenderer.prototype.destroy = function (removeView)
{
this.destroyPlugins();
// remove listeners
this.view.removeEventListener('webglcontextlost', this.handleContextLost);
this.view.removeEventListener('webglcontextrestored', this.handleContextRestored);
// call base destroy
SystemRenderer.prototype.destroy.call(this, removeView);
this.uuid = 0;
// destroy the managers
this.shaderManager.destroy();
this.maskManager.destroy();
this.stencilManager.destroy();
this.filterManager.destroy();
this.shaderManager = null;
this.maskManager = null;
this.filterManager = null;
this.blendModeManager = null;
this.handleContextLost = null;
this.handleContextRestored = null;
this._contextOptions = null;
this.drawCount = 0;
this.gl = null;
};
/**
* Maps Pixi blend modes to WebGL blend modes.
*
* @private
*/
WebGLRenderer.prototype._mapBlendModes = function ()
{
var gl = this.gl;
if (!this.blendModes)
{
this.blendModes = {};
this.blendModes[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
this.blendModes[CONST.BLEND_MODES.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA];
this.blendModes[CONST.BLEND_MODES.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA];
this.blendModes[CONST.BLEND_MODES.SCREEN] = [gl.SRC_ALPHA, gl.ONE];
this.blendModes[CONST.BLEND_MODES.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
this.blendModes[CONST.BLEND_MODES.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
this.blendModes[CONST.BLEND_MODES.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
this.blendModes[CONST.BLEND_MODES.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
this.blendModes[CONST.BLEND_MODES.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
this.blendModes[CONST.BLEND_MODES.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
this.blendModes[CONST.BLEND_MODES.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
this.blendModes[CONST.BLEND_MODES.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
this.blendModes[CONST.BLEND_MODES.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
this.blendModes[CONST.BLEND_MODES.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
this.blendModes[CONST.BLEND_MODES.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
this.blendModes[CONST.BLEND_MODES.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
this.blendModes[CONST.BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
}
};
},{"../../const":12,"../../utils":66,"../SystemRenderer":32,"./filters/FXAAFilter":40,"./managers/BlendModeManager":42,"./managers/FilterManager":43,"./managers/MaskManager":44,"./managers/ShaderManager":45,"./managers/StencilManager":46,"./utils/ObjectRenderer":52,"./utils/RenderTarget":54}],39:[function(require,module,exports){
var DefaultShader = require('../shaders/TextureShader');
/**
* This is the base class for creating a PIXI filter. Currently only WebGL supports filters.
* If you want to make a custom filter this should be your base class.
*
* @class
* @memberof PIXI
* @param vertexSrc {string|string[]} The vertex shader source as an array of strings.
* @param fragmentSrc {string|string[]} The fragment shader source as an array of strings.
* @param uniforms {object} An object containing the uniforms for this filter.
*/
function AbstractFilter(vertexSrc, fragmentSrc, uniforms)
{
/**
* An array of shaders
* @member {Shader[]}
* @private
*/
this.shaders = [];
/**
* The extra padding that the filter might need
* @member {number}
*/
this.padding = 0;
/**
* The uniforms as an object
* @member {object}
* @private
*/
this.uniforms = uniforms || {};
/**
* The code of the vertex shader
* @member {string[]}
* @private
*/
this.vertexSrc = vertexSrc || DefaultShader.defaultVertexSrc;
/**
* The code of the frament shader
* @member {string[]}
* @private
*/
this.fragmentSrc = fragmentSrc || DefaultShader.defaultFragmentSrc;
//TODO a reminder - would be cool to have lower res filters as this would give better performance.
//typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []);
}
AbstractFilter.prototype.constructor = AbstractFilter;
module.exports = AbstractFilter;
/*
* Grabs a shader from the current renderer
* @param renderer {WebGLRenderer} The renderer to retrieve the shader from
*
*/
AbstractFilter.prototype.getShader = function (renderer)
{
var gl = renderer.gl;
var shader = this.shaders[gl.id];
if (!shader)
{
shader = new DefaultShader(renderer.shaderManager,
this.vertexSrc,
this.fragmentSrc,
this.uniforms,
this.attributes
);
this.shaders[gl.id] = shader;
}
return shader;
};
/*
* Applies the filter
* @param renderer {WebGLRenderer} The renderer to retrieve the filter from
* @param input {RenderTarget}
* @param output {RenderTarget}
* @param clear {boolean} Whether or not we want to clear the outputTarget
*/
AbstractFilter.prototype.applyFilter = function (renderer, input, output, clear)
{
var shader = this.getShader(renderer);
renderer.filterManager.applyFilter(shader, input, output, clear);
};
/**
* Syncs a uniform between the class object and the shaders.
*
*/
AbstractFilter.prototype.syncUniform = function (uniform)
{
for (var i = 0, j = this.shaders.length; i < j; ++i)
{
this.shaders[i].syncUniform(uniform);
}
};
/*
AbstractFilter.prototype.apply = function (frameBuffer)
{
// TODO :)
};
*/
},{"../shaders/TextureShader":51}],40:[function(require,module,exports){
var AbstractFilter = require('./AbstractFilter');
/**
*
* Basic FXAA implementation based on the code on geeks3d.com with the
* modification that the texture2DLod stuff was removed since it's
* unsupported by WebGL.
*
* --
* From:
* https://github.com/mitsuhiko/webgl-meincraft
*
* @class
* @extends AbstractFilter
* @memberof PIXI
*
*/
function FXAAFilter()
{
AbstractFilter.call(this,
// vertex shader
"\nprecision mediump float;\n\nattribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\nattribute vec4 aColor;\n\nuniform mat3 projectionMatrix;\nuniform vec2 resolution;\n\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\n\nvarying vec2 vResolution;\n\n//texcoords computed in vertex step\n//to avoid dependent texture reads\nvarying vec2 v_rgbNW;\nvarying vec2 v_rgbNE;\nvarying vec2 v_rgbSW;\nvarying vec2 v_rgbSE;\nvarying vec2 v_rgbM;\n\n\nvoid texcoords(vec2 fragCoord, vec2 resolution,\n out vec2 v_rgbNW, out vec2 v_rgbNE,\n out vec2 v_rgbSW, out vec2 v_rgbSE,\n out vec2 v_rgbM) {\n vec2 inverseVP = 1.0 / resolution.xy;\n v_rgbNW = (fragCoord + vec2(-1.0, -1.0)) * inverseVP;\n v_rgbNE = (fragCoord + vec2(1.0, -1.0)) * inverseVP;\n v_rgbSW = (fragCoord + vec2(-1.0, 1.0)) * inverseVP;\n v_rgbSE = (fragCoord + vec2(1.0, 1.0)) * inverseVP;\n v_rgbM = vec2(fragCoord * inverseVP);\n}\n\nvoid main(void){\n gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n vTextureCoord = aTextureCoord;\n vColor = vec4(aColor.rgb * aColor.a, aColor.a);\n vResolution = resolution;\n\n //compute the texture coords and send them to varyings\n texcoords(aTextureCoord * resolution, resolution, v_rgbNW, v_rgbNE, v_rgbSW, v_rgbSE, v_rgbM);\n}\n",
// fragment shader
"precision lowp float;\n\n\n/**\nBasic FXAA implementation based on the code on geeks3d.com with the\nmodification that the texture2DLod stuff was removed since it's\nunsupported by WebGL.\n\n--\n\nFrom:\nhttps://github.com/mitsuhiko/webgl-meincraft\n\nCopyright (c) 2011 by Armin Ronacher.\n\nSome rights reserved.\n\nRedistribution and use in source and binary forms, with or without\nmodification, are permitted provided that the following conditions are\nmet:\n\n * Redistributions of source code must retain the above copyright\n notice, this list of conditions and the following disclaimer.\n\n * Redistributions in binary form must reproduce the above\n copyright notice, this list of conditions and the following\n disclaimer in the documentation and/or other materials provided\n with the distribution.\n\n * The names of the contributors may not be used to endorse or\n promote products derived from this software without specific\n prior written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS\n\"AS IS\" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT\nLIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR\nA PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT\nOWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,\nSPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT\nLIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,\nDATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY\nTHEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE\nOF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\n*/\n\n#ifndef FXAA_REDUCE_MIN\n #define FXAA_REDUCE_MIN (1.0/ 128.0)\n#endif\n#ifndef FXAA_REDUCE_MUL\n #define FXAA_REDUCE_MUL (1.0 / 8.0)\n#endif\n#ifndef FXAA_SPAN_MAX\n #define FXAA_SPAN_MAX 8.0\n#endif\n\n//optimized version for mobile, where dependent\n//texture reads can be a bottleneck\nvec4 fxaa(sampler2D tex, vec2 fragCoord, vec2 resolution,\n vec2 v_rgbNW, vec2 v_rgbNE,\n vec2 v_rgbSW, vec2 v_rgbSE,\n vec2 v_rgbM) {\n vec4 color;\n mediump vec2 inverseVP = vec2(1.0 / resolution.x, 1.0 / resolution.y);\n vec3 rgbNW = texture2D(tex, v_rgbNW).xyz;\n vec3 rgbNE = texture2D(tex, v_rgbNE).xyz;\n vec3 rgbSW = texture2D(tex, v_rgbSW).xyz;\n vec3 rgbSE = texture2D(tex, v_rgbSE).xyz;\n vec4 texColor = texture2D(tex, v_rgbM);\n vec3 rgbM = texColor.xyz;\n vec3 luma = vec3(0.299, 0.587, 0.114);\n float lumaNW = dot(rgbNW, luma);\n float lumaNE = dot(rgbNE, luma);\n float lumaSW = dot(rgbSW, luma);\n float lumaSE = dot(rgbSE, luma);\n float lumaM = dot(rgbM, luma);\n float lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE)));\n float lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE)));\n\n mediump vec2 dir;\n dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));\n dir.y = ((lumaNW + lumaSW) - (lumaNE + lumaSE));\n\n float dirReduce = max((lumaNW + lumaNE + lumaSW + lumaSE) *\n (0.25 * FXAA_REDUCE_MUL), FXAA_REDUCE_MIN);\n\n float rcpDirMin = 1.0 / (min(abs(dir.x), abs(dir.y)) + dirReduce);\n dir = min(vec2(FXAA_SPAN_MAX, FXAA_SPAN_MAX),\n max(vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX),\n dir * rcpDirMin)) * inverseVP;\n\n vec3 rgbA = 0.5 * (\n texture2D(tex, fragCoord * inverseVP + dir * (1.0 / 3.0 - 0.5)).xyz +\n texture2D(tex, fragCoord * inverseVP + dir * (2.0 / 3.0 - 0.5)).xyz);\n vec3 rgbB = rgbA * 0.5 + 0.25 * (\n texture2D(tex, fragCoord * inverseVP + dir * -0.5).xyz +\n texture2D(tex, fragCoord * inverseVP + dir * 0.5).xyz);\n\n float lumaB = dot(rgbB, luma);\n if ((lumaB < lumaMin) || (lumaB > lumaMax))\n color = vec4(rgbA, texColor.a);\n else\n color = vec4(rgbB, texColor.a);\n return color;\n}\n\n\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\nvarying vec2 vResolution;\n\n//texcoords computed in vertex step\n//to avoid dependent texture reads\nvarying vec2 v_rgbNW;\nvarying vec2 v_rgbNE;\nvarying vec2 v_rgbSW;\nvarying vec2 v_rgbSE;\nvarying vec2 v_rgbM;\n\nuniform sampler2D uSampler;\n\n\nvoid main(void){\n\n gl_FragColor = fxaa(uSampler, vTextureCoord * vResolution, vResolution, v_rgbNW, v_rgbNE, v_rgbSW, v_rgbSE, v_rgbM);\n\n}\n",
// uniforms
{
resolution: { type: 'v2', value: { x: 1, y: 1 } }
}
);
}
FXAAFilter.prototype = Object.create(AbstractFilter.prototype);
FXAAFilter.prototype.constructor = FXAAFilter;
module.exports = FXAAFilter;
FXAAFilter.prototype.applyFilter = function (renderer, input, output)
{
var filterManager = renderer.filterManager;
var shader = this.getShader( renderer );
// draw the filter...
filterManager.applyFilter(shader, input, output);
};
},{"./AbstractFilter":39}],41:[function(require,module,exports){
var AbstractFilter = require('./AbstractFilter'),
math = require('../../../math');
// fs needs to be decalred alone for brfs to pick it up properly.
/**
* The SpriteMaskFilter class
*
* @class
* @extends AbstractFilter
* @memberof PIXI
* @param sprite {Sprite} the target sprite
*/
function SpriteMaskFilter(sprite)
{
var maskMatrix = new math.Matrix();
AbstractFilter.call(this,
"attribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\nattribute vec4 aColor;\n\nuniform mat3 projectionMatrix;\nuniform mat3 otherMatrix;\n\nvarying vec2 vMaskCoord;\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\n\nvoid main(void)\n{\n gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n vTextureCoord = aTextureCoord;\n vMaskCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy;\n vColor = vec4(aColor.rgb * aColor.a, aColor.a);\n}\n",
"precision lowp float;\n\nvarying vec2 vMaskCoord;\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\n\nuniform sampler2D uSampler;\nuniform float alpha;\nuniform sampler2D mask;\n\nvoid main(void)\n{\n // check clip! this will stop the mask bleeding out from the edges\n vec2 text = abs( vMaskCoord - 0.5 );\n text = step(0.5, text);\n float clip = 1.0 - max(text.y, text.x);\n vec4 original = texture2D(uSampler, vTextureCoord);\n vec4 masky = texture2D(mask, vMaskCoord);\n original *= (masky.r * masky.a * alpha * clip);\n gl_FragColor = original;\n}\n",
{
mask: { type: 'sampler2D', value: sprite._texture },
alpha: { type: 'f', value: 1},
otherMatrix: { type: 'mat3', value: maskMatrix.toArray(true) }
}
);
this.maskSprite = sprite;
this.maskMatrix = maskMatrix;
}
SpriteMaskFilter.prototype = Object.create(AbstractFilter.prototype);
SpriteMaskFilter.prototype.constructor = SpriteMaskFilter;
module.exports = SpriteMaskFilter;
/**
* Applies the filter ? @alvin
*
* @param renderer {WebGLRenderer} A reference to the WebGL renderer
* @param input {RenderTarget}
* @param output {RenderTarget}
*/
SpriteMaskFilter.prototype.applyFilter = function (renderer, input, output)
{
var filterManager = renderer.filterManager;
this.uniforms.mask.value = this.maskSprite._texture;
filterManager.calculateMappedMatrix(input.frame, this.maskSprite, this.maskMatrix);
this.uniforms.otherMatrix.value = this.maskMatrix.toArray(true);
this.uniforms.alpha.value = this.maskSprite.worldAlpha;
var shader = this.getShader(renderer);
// draw the filter...
filterManager.applyFilter(shader, input, output);
};
Object.defineProperties(SpriteMaskFilter.prototype, {
/**
* The texture used for the displacement map. Must be power of 2 sized texture.
*
* @member {Texture}
* @memberof SpriteMaskFilter#
*/
map: {
get: function ()
{
return this.uniforms.mask.value;
},
set: function (value)
{
this.uniforms.mask.value = value;
}
},
/**
* The offset used to move the displacement map.
*
* @member {Point}
* @memberof SpriteMaskFilter#
*/
offset: {
get: function()
{
return this.uniforms.offset.value;
},
set: function(value)
{
this.uniforms.offset.value = value;
}
}
});
},{"../../../math":22,"./AbstractFilter":39}],42:[function(require,module,exports){
var WebGLManager = require('./WebGLManager');
/**
* @class
* @memberof PIXI
* @extends WebGlManager
* @param renderer {WebGLRenderer} The renderer this manager works for.
*/
function BlendModeManager(renderer)
{
WebGLManager.call(this, renderer);
/**
* @member {number}
*/
this.currentBlendMode = 99999;
}
BlendModeManager.prototype = Object.create(WebGLManager.prototype);
BlendModeManager.prototype.constructor = BlendModeManager;
module.exports = BlendModeManager;
/**
* Sets-up the given blendMode from WebGL's point of view.
*
* @param blendMode {number} the blendMode, should be a Pixi const, such as BlendModes.ADD
*/
BlendModeManager.prototype.setBlendMode = function (blendMode)
{
if (this.currentBlendMode === blendMode)
{
return false;
}
this.currentBlendMode = blendMode;
var mode = this.renderer.blendModes[this.currentBlendMode];
this.renderer.gl.blendFunc(mode[0], mode[1]);
return true;
};
},{"./WebGLManager":47}],43:[function(require,module,exports){
var WebGLManager = require('./WebGLManager'),
RenderTarget = require('../utils/RenderTarget'),
CONST = require('../../../const'),
Quad = require('../utils/Quad'),
math = require('../../../math');
/**
* @class
* @memberof PIXI
* @extends WebGLManager
* @param renderer {WebGLRenderer} The renderer this manager works for.
*/
function FilterManager(renderer)
{
WebGLManager.call(this, renderer);
/**
* @member {any[]}
*/
this.filterStack = [];
this.filterStack.push({
renderTarget:renderer.currentRenderTarget,
filter:[],
bounds:null
});
/**
* @member {any[]}
*/
this.texturePool = [];
// listen for context and update necessary buffers
//TODO make this dynamic!
//TODO test this out by forces power of two?
this.textureSize = new math.Rectangle( 0, 0, renderer.width, renderer.height );
this.currentFrame = null;
}
FilterManager.prototype = Object.create(WebGLManager.prototype);
FilterManager.prototype.constructor = FilterManager;
module.exports = FilterManager;
/**
* Called when there is a WebGL context change.
*
*/
FilterManager.prototype.onContextChange = function ()
{
this.texturePool.length = 0;
var gl = this.renderer.gl;
this.quad = new Quad(gl);
};
/**
* @param renderer {WebGLRenderer}
* @param buffer {ArrayBuffer}
*/
FilterManager.prototype.setFilterStack = function ( filterStack )
{
this.filterStack = filterStack;
};
/**
* Applies the filter and adds it to the current filter stack.
*
* @param filterBlock {object} the filter that will be pushed to the current filter stack
*/
FilterManager.prototype.pushFilter = function (target, filters)
{
// get the bounds of the object..
var bounds = target.filterArea || target.getBounds();
//bounds = bounds.clone();
// round off the rectangle to get a nice smoooooooth filter :)
bounds.x = bounds.x | 0;
bounds.y = bounds.y | 0;
bounds.width = bounds.width | 0;
bounds.height = bounds.height | 0;
// padding!
var padding = filters[0].padding | 0;
bounds.x -= padding;
bounds.y -= padding;
bounds.width += padding * 2;
bounds.height += padding * 2;
if(this.renderer.currentRenderTarget.transform)
{
//TODO this will break if the renderTexture transform is anything other than a translation.
//Will need to take the full matrix transform into acount..
var transform = this.renderer.currentRenderTarget.transform;
bounds.x += transform.tx;
bounds.y += transform.ty;
this.capFilterArea( bounds );
bounds.x -= transform.tx;
bounds.y -= transform.ty;
}
else
{
this.capFilterArea( bounds );
}
this.currentFrame = bounds;
var texture = this.getRenderTarget();
this.renderer.setRenderTarget(texture);
// clear the texture..
texture.clear();
// TODO get rid of object creation!
this.filterStack.push({
renderTarget: texture,
filter: filters
});
};
/**
* Removes the last filter from the filter stack and returns it.
*
*/
FilterManager.prototype.popFilter = function ()
{
var filterData = this.filterStack.pop();
var previousFilterData = this.filterStack[this.filterStack.length-1];
var input = filterData.renderTarget;
var output = previousFilterData.renderTarget;
// use program
var gl = this.renderer.gl;
this.currentFrame = input.frame;
this.quad.map(this.textureSize, input.frame);
// TODO.. this probably only needs to be done once!
gl.bindBuffer(gl.ARRAY_BUFFER, this.quad.vertexBuffer);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.quad.indexBuffer);
var filters = filterData.filter;
// assuming all filters follow the correct format??
gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 2 * 4 * 4);
gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aColor, 4, gl.FLOAT, false, 0, 4 * 4 * 4);
if (filters.length === 1)
{
// TODO (cengler) - There has to be a better way then setting this each time?
if (filters[0].uniforms.dimensions)
{
filters[0].uniforms.dimensions.value[0] = this.renderer.width;
filters[0].uniforms.dimensions.value[1] = this.renderer.height;
filters[0].uniforms.dimensions.value[2] = this.quad.vertices[0];
filters[0].uniforms.dimensions.value[3] = this.quad.vertices[5];
}
filters[0].applyFilter( this.renderer, input, output );
this.returnRenderTarget( input );
}
else
{
var flipTexture = input;
var flopTexture = this.getRenderTarget(true);
for (var i = 0; i < filters.length-1; i++)
{
var filter = filters[i];
// TODO (cengler) - There has to be a better way then setting this each time?
if (filter.uniforms.dimensions)
{
filter.uniforms.dimensions.value[0] = this.renderer.width;
filter.uniforms.dimensions.value[1] = this.renderer.height;
filter.uniforms.dimensions.value[2] = this.quad.vertices[0];
filter.uniforms.dimensions.value[3] = this.quad.vertices[5];
}
filter.applyFilter( this.renderer, flipTexture, flopTexture );
var temp = flipTexture;
flipTexture = flopTexture;
flopTexture = temp;
}
filters[filters.length-1].applyFilter( this.renderer, flipTexture, output );
this.returnRenderTarget( flipTexture );
this.returnRenderTarget( flopTexture );
}
return filterData.filter;
};
/**
* Grabs an render target from the internal pool
*
* @param clear {boolean} Whether or not we need to clear the RenderTarget
* @return {RenderTarget}
*/
FilterManager.prototype.getRenderTarget = function ( clear )
{
var renderTarget = this.texturePool.pop() || new RenderTarget(this.renderer.gl, this.textureSize.width, this.textureSize.height, CONST.SCALE_MODES.LINEAR, this.renderer.resolution * CONST.FILTER_RESOLUTION);
renderTarget.frame = this.currentFrame;
if (clear)
{
renderTarget.clear(true);
}
return renderTarget;
};
/*
* Returns a RenderTarget to the internal pool
* @param renderTarget {RenderTarget} The RenderTarget we want to return to the pool
*/
FilterManager.prototype.returnRenderTarget = function (renderTarget)
{
this.texturePool.push( renderTarget );
};
/*
* Applies the filter
* @param shader {Shader} The shader to upload
* @param inputTarget {RenderTarget}
* @param outputTarget {RenderTarget}
* @param clear {boolean} Whether or not we want to clear the outputTarget
*/
FilterManager.prototype.applyFilter = function (shader, inputTarget, outputTarget, clear)
{
var gl = this.renderer.gl;
this.renderer.setRenderTarget(outputTarget);
if (clear)
{
outputTarget.clear();
}
// set the shader
this.renderer.shaderManager.setShader(shader);
// TODO (cengler) - Can this be cached and not `toArray`ed each frame?
shader.uniforms.projectionMatrix.value = this.renderer.currentRenderTarget.projectionMatrix.toArray(true);
//TODO can this be optimised?
shader.syncUniforms();
/*
gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
gl.vertexAttribPointer(shader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 2 * 4 * 4);
gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false, 0, 4 * 4 * 4);
*/
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, inputTarget.texture);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 );
};
/*
* Calculates the mapped matrix
* @param filterArea {Rectangle} The filter area
* @param sprite {Sprite} the target sprite
* @param outputMatrix {Matrix} @alvin
*/
// TODO playing around here.. this is temporary - (will end up in the shader)
FilterManager.prototype.calculateMappedMatrix = function (filterArea, sprite, outputMatrix)
{
var worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX),
texture = sprite._texture.baseTexture;
var mappedMatrix = outputMatrix.identity();
// scale..
var ratio = this.textureSize.height / this.textureSize.width;
mappedMatrix.translate(filterArea.x / this.textureSize.width, filterArea.y / this.textureSize.height );
mappedMatrix.scale(1 , ratio);
var translateScaleX = (this.textureSize.width / texture.width);
var translateScaleY = (this.textureSize.height / texture.height);
worldTransform.tx /= texture.width * translateScaleX;
worldTransform.ty /= texture.width * translateScaleX;
worldTransform.invert();
mappedMatrix.prepend(worldTransform);
// apply inverse scale..
mappedMatrix.scale(1 , 1/ratio);
mappedMatrix.scale( translateScaleX , translateScaleY );
mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y);
return mappedMatrix;
// Keeping the orginal as a reminder to me on how this works!
//
// var m = new math.Matrix();
// // scale..
// var ratio = this.textureSize.height / this.textureSize.width;
// m.translate(filterArea.x / this.textureSize.width, filterArea.y / this.textureSize.height);
// m.scale(1 , ratio);
// var transform = wt.clone();
// var translateScaleX = (this.textureSize.width / 620);
// var translateScaleY = (this.textureSize.height / 380);
// transform.tx /= 620 * translateScaleX;
// transform.ty /= 620 * translateScaleX;
// transform.invert();
// transform.append(m);
// // apply inverse scale..
// transform.scale(1 , 1/ratio);
// transform.scale( translateScaleX , translateScaleY );
// return transform;
};
/*
* Constrains the filter area to the texture size
* @param filterArea {Rectangle} The filter area we want to cap
*/
FilterManager.prototype.capFilterArea = function (filterArea)
{
if (filterArea.x < 0)
{
filterArea.width += filterArea.x;
filterArea.x = 0;
}
if (filterArea.y < 0)
{
filterArea.height += filterArea.y;
filterArea.y = 0;
}
if ( filterArea.x + filterArea.width > this.textureSize.width )
{
filterArea.width = this.textureSize.width - filterArea.x;
}
if ( filterArea.y + filterArea.height > this.textureSize.height )
{
filterArea.height = this.textureSize.height - filterArea.y;
}
};
/*
* Resizes all the render targets in the pool
* @param width {number} the new width
* @param height {number} the new height
*/
FilterManager.prototype.resize = function ( width, height )
{
this.textureSize.width = width;
this.textureSize.height = height;
for (var i = 0; i < this.texturePool.length; i++)
{
this.texturePool[i].resize( width, height );
}
};
/**
* Destroys the filter and removes it from the filter stack.
*
*/
FilterManager.prototype.destroy = function ()
{
this.filterStack = null;
this.offsetY = 0;
// destroy textures
for (var i = 0; i < this.texturePool.length; i++)
{
this.texturePool[i].destroy();
}
this.texturePool = null;
};
},{"../../../const":12,"../../../math":22,"../utils/Quad":53,"../utils/RenderTarget":54,"./WebGLManager":47}],44:[function(require,module,exports){
var WebGLManager = require('./WebGLManager'),
AlphaMaskFilter = require('../filters/SpriteMaskFilter');
/**
* @class
* @memberof PIXI
* @param renderer {WebGLRenderer} The renderer this manager works for.
*/
function MaskManager(renderer)
{
WebGLManager.call(this, renderer);
this.stencilStack = [];
this.reverse = true;
this.count = 0;
this.alphaMaskPool = [];
}
MaskManager.prototype = Object.create(WebGLManager.prototype);
MaskManager.prototype.constructor = MaskManager;
module.exports = MaskManager;
/**
* Applies the Mask and adds it to the current filter stack.
*
* @param graphics {Graphics}
* @param webGLData {any[]}
*/
MaskManager.prototype.pushMask = function (target, maskData)
{
if (maskData.texture)
{
this.pushSpriteMask(target, maskData);
}
else
{
this.pushStencilMask(target, maskData);
}
};
/**
* Removes the last mask from the mask stack and doesn't return it.
*
* @param target {RenderTarget}
* @param maskData {any[]}
*/
MaskManager.prototype.popMask = function (target, maskData)
{
if (maskData.texture)
{
this.popSpriteMask(target, maskData);
}
else
{
this.popStencilMask(target, maskData);
}
};
/**
* Applies the Mask and adds it to the current filter stack.
*
* @param target {RenderTarget}
* @param maskData {any[]}
*/
MaskManager.prototype.pushSpriteMask = function (target, maskData)
{
var alphaMaskFilter = this.alphaMaskPool.pop();
if (!alphaMaskFilter)
{
alphaMaskFilter = [new AlphaMaskFilter(maskData)];
}
this.renderer.filterManager.pushFilter(target, alphaMaskFilter);
};
/**
* Removes the last filter from the filter stack and doesn't return it.
*
*/
MaskManager.prototype.popSpriteMask = function ()
{
var filters = this.renderer.filterManager.popFilter();
this.alphaMaskPool.push(filters);
};
/**
* Applies the Mask and adds it to the current filter stack.
*
* @param target {RenderTarget}
* @param maskData {any[]}
*/
MaskManager.prototype.pushStencilMask = function (target, maskData)
{
this.renderer.stencilManager.pushMask(maskData);
};
/**
* Removes the last filter from the filter stack and doesn't return it.
* @param target {RenderTarget}
* @param maskData {any[]}
*/
MaskManager.prototype.popStencilMask = function (target, maskData)
{
this.renderer.stencilManager.popMask(maskData);
};
},{"../filters/SpriteMaskFilter":41,"./WebGLManager":47}],45:[function(require,module,exports){
var WebGLManager = require('./WebGLManager'),
TextureShader = require('../shaders/TextureShader'),
ComplexPrimitiveShader = require('../shaders/ComplexPrimitiveShader'),
PrimitiveShader = require('../shaders/PrimitiveShader'),
utils = require('../../../utils');
/**
* @class
* @memberof PIXI
* @extends WebGLManager
* @param renderer {WebGLRenderer} The renderer this manager works for.
*/
function ShaderManager(renderer)
{
WebGLManager.call(this, renderer);
/**
* @member {number}
*/
this.maxAttibs = 10;
/**
* @member {any[]}
*/
this.attribState = [];
/**
* @member {any[]}
*/
this.tempAttribState = [];
for (var i = 0; i < this.maxAttibs; i++)
{
this.attribState[i] = false;
}
/**
* @member {any[]}
*/
this.stack = [];
/**
* @member {number}
* @private
*/
this._currentId = -1;
/**
* @member {Shader}
* @private
*/
this.currentShader = null;
// this.initPlugins();
}
ShaderManager.prototype = Object.create(WebGLManager.prototype);
ShaderManager.prototype.constructor = ShaderManager;
utils.pluginTarget.mixin(ShaderManager);
module.exports = ShaderManager;
/**
* Called when there is a WebGL context change.
*
*/
ShaderManager.prototype.onContextChange = function ()
{
this.initPlugins();
// TODO - Why are these not plugins? We can't decouple primitives unless they are....
this.defaultShader = new TextureShader(this);
this.primitiveShader = new PrimitiveShader(this);
this.complexPrimitiveShader = new ComplexPrimitiveShader(this);
};
/**
* Takes the attributes given in parameters and uploads them.
*
* @param attribs {Array} attribs
*/
ShaderManager.prototype.setAttribs = function (attribs)
{
// reset temp state
var i;
for (i = 0; i < this.tempAttribState.length; i++)
{
this.tempAttribState[i] = false;
}
// set the new attribs
for (var a in attribs)
{
this.tempAttribState[attribs[a]] = true;
}
var gl = this.renderer.gl;
for (i = 0; i < this.attribState.length; i++)
{
if (this.attribState[i] !== this.tempAttribState[i])
{
this.attribState[i] = this.tempAttribState[i];
if (this.attribState[i])
{
gl.enableVertexAttribArray(i);
}
else
{
gl.disableVertexAttribArray(i);
}
}
}
};
/**
* Sets the current shader.
*
* @param shader {Shader} the shader to upload
*/
ShaderManager.prototype.setShader = function (shader)
{
if (this._currentId === shader.uuid)
{
return false;
}
this._currentId = shader.uuid;
this.currentShader = shader;
this.renderer.gl.useProgram(shader.program);
this.setAttribs(shader.attributes);
return true;
};
/**
* Destroys this object.
*
*/
ShaderManager.prototype.destroy = function ()
{
WebGLManager.prototype.destroy.call(this);
this.destroyPlugins();
this.attribState = null;
this.tempAttribState = null;
};
},{"../../../utils":66,"../shaders/ComplexPrimitiveShader":48,"../shaders/PrimitiveShader":49,"../shaders/TextureShader":51,"./WebGLManager":47}],46:[function(require,module,exports){
var WebGLManager = require('./WebGLManager'),
utils = require('../../../utils');
/**
* @class
* @memberof PIXI
* @param renderer {WebGLRenderer} The renderer this manager works for.
*/
function WebGLMaskManager(renderer)
{
WebGLManager.call(this, renderer);
this.stencilMaskStack = null;
}
WebGLMaskManager.prototype = Object.create(WebGLManager.prototype);
WebGLMaskManager.prototype.constructor = WebGLMaskManager;
module.exports = WebGLMaskManager;
/**
* Changes the mask stack that is used by this manager
* @param stencilMaskStack {StencilMaskStack} The mask stack
*
*/
WebGLMaskManager.prototype.setMaskStack = function ( stencilMaskStack )
{
this.stencilMaskStack = stencilMaskStack;
var gl = this.renderer.gl;
if (stencilMaskStack.stencilStack.length === 0)
{
gl.disable(gl.STENCIL_TEST);
}
else
{
gl.enable(gl.STENCIL_TEST);
}
};
/**
* Applies the Mask and adds it to the current filter stack. @alvin
*
* @param graphics {Graphics}
* @param webGLData {any[]}
*/
WebGLMaskManager.prototype.pushStencil = function (graphics, webGLData)
{
this.renderer.currentRenderTarget.attachStencilBuffer();
var gl = this.renderer.gl,
sms = this.stencilMaskStack;
this.bindGraphics(graphics, webGLData, this.renderer);
if (sms.stencilStack.length === 0)
{
gl.enable(gl.STENCIL_TEST);
gl.clear(gl.STENCIL_BUFFER_BIT);
sms.reverse = true;
sms.count = 0;
}
sms.stencilStack.push(webGLData);
var level = sms.count;
gl.colorMask(false, false, false, false);
gl.stencilFunc(gl.ALWAYS,0,0xFF);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.INVERT);
// draw the triangle strip!
if (webGLData.mode === 1)
{
gl.drawElements(gl.TRIANGLE_FAN, webGLData.indices.length - 4, gl.UNSIGNED_SHORT, 0 );
if (sms.reverse)
{
gl.stencilFunc(gl.EQUAL, 0xFF - level, 0xFF);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR);
}
else
{
gl.stencilFunc(gl.EQUAL,level, 0xFF);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR);
}
// draw a quad to increment..
gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 );
if (sms.reverse)
{
gl.stencilFunc(gl.EQUAL,0xFF-(level+1), 0xFF);
}
else
{
gl.stencilFunc(gl.EQUAL,level+1, 0xFF);
}
sms.reverse = !sms.reverse;
}
else
{
if (!sms.reverse)
{
gl.stencilFunc(gl.EQUAL, 0xFF - level, 0xFF);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR);
}
else
{
gl.stencilFunc(gl.EQUAL,level, 0xFF);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR);
}
gl.drawElements(gl.TRIANGLE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0 );
if (!sms.reverse)
{
gl.stencilFunc(gl.EQUAL,0xFF-(level+1), 0xFF);
}
else
{
gl.stencilFunc(gl.EQUAL,level+1, 0xFF);
}
}
gl.colorMask(true, true, true, true);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
sms.count++;
};
/**
* TODO this does not belong here!
*
* @param graphics {Graphics}
* @param webGLData {Array}
*/
WebGLMaskManager.prototype.bindGraphics = function (graphics, webGLData)
{
//if (this._currentGraphics === graphics)return;
this._currentGraphics = graphics;
var gl = this.renderer.gl;
// bind the graphics object..
var shader;// = this.renderer.shaderManager.plugins.primitiveShader;
if (webGLData.mode === 1)
{
shader = this.renderer.shaderManager.complexPrimitiveShader;
this.renderer.shaderManager.setShader(shader);
gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true));
gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, this.renderer.currentRenderTarget.projectionMatrix.toArray(true));
gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint));
gl.uniform3fv(shader.uniforms.color._location, webGLData.color);
gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha);
gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer);
gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 2, 0);
// now do the rest..
// set the index buffer!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer);
}
else
{
//this.renderer.shaderManager.activatePrimitiveShader();
shader = this.renderer.shaderManager.primitiveShader;
this.renderer.shaderManager.setShader( shader );
gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true));
gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, this.renderer.currentRenderTarget.projectionMatrix.toArray(true));
gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint));
gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha);
gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer);
gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);
gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4);
// set the index buffer!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer);
}
};
/**
* TODO @alvin
* @param graphics {Graphics}
* @param webGLData {Array}
*/
WebGLMaskManager.prototype.popStencil = function (graphics, webGLData)
{
var gl = this.renderer.gl,
sms = this.stencilMaskStack;
sms.stencilStack.pop();
sms.count--;
if (sms.stencilStack.length === 0)
{
// the stack is empty!
gl.disable(gl.STENCIL_TEST);
}
else
{
var level = sms.count;
this.bindGraphics(graphics, webGLData, this.renderer);
gl.colorMask(false, false, false, false);
if (webGLData.mode === 1)
{
sms.reverse = !sms.reverse;
if (sms.reverse)
{
gl.stencilFunc(gl.EQUAL, 0xFF - (level+1), 0xFF);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR);
}
else
{
gl.stencilFunc(gl.EQUAL,level+1, 0xFF);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR);
}
// draw a quad to increment..
gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 );
gl.stencilFunc(gl.ALWAYS,0,0xFF);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.INVERT);
// draw the triangle strip!
gl.drawElements(gl.TRIANGLE_FAN, webGLData.indices.length - 4, gl.UNSIGNED_SHORT, 0 );
if (!sms.reverse)
{
gl.stencilFunc(gl.EQUAL,0xFF-(level), 0xFF);
}
else
{
gl.stencilFunc(gl.EQUAL,level, 0xFF);
}
}
else
{
// console.log("<<>>")
if (!sms.reverse)
{
gl.stencilFunc(gl.EQUAL, 0xFF - (level+1), 0xFF);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR);
}
else
{
gl.stencilFunc(gl.EQUAL,level+1, 0xFF);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR);
}
gl.drawElements(gl.TRIANGLE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0 );
if (!sms.reverse)
{
gl.stencilFunc(gl.EQUAL,0xFF-(level), 0xFF);
}
else
{
gl.stencilFunc(gl.EQUAL,level, 0xFF);
}
}
gl.colorMask(true, true, true, true);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
}
};
/**
* Destroys the mask stack.
*
*/
WebGLMaskManager.prototype.destroy = function ()
{
WebGLManager.prototype.destroy.call(this);
this.stencilMaskStack.stencilStack = null;
};
/**
* Applies the Mask and adds it to the current filter stack.
*
* @param maskData {any[]} The mask data structure to use
*/
WebGLMaskManager.prototype.pushMask = function (maskData)
{
this.renderer.setObjectRenderer(this.renderer.plugins.graphics);
if (maskData.dirty)
{
this.renderer.plugins.graphics.updateGraphics(maskData, this.renderer.gl);
}
if (!maskData._webGL[this.renderer.gl.id].data.length)
{
return;
}
this.pushStencil(maskData, maskData._webGL[this.renderer.gl.id].data[0], this.renderer);
};
/**
* Removes the last filter from the filter stack and doesn't return it.
*
* @param maskData {any[]}
*/
WebGLMaskManager.prototype.popMask = function (maskData)
{
this.renderer.setObjectRenderer(this.renderer.plugins.graphics);
this.popStencil(maskData, maskData._webGL[this.renderer.gl.id].data[0], this.renderer);
};
},{"../../../utils":66,"./WebGLManager":47}],47:[function(require,module,exports){
/**
* @class
* @memberof PIXI
* @param renderer {WebGLRenderer} The renderer this manager works for.
*/
function WebGLManager(renderer)
{
/**
* The renderer this manager works for.
*
* @member {WebGLRenderer}
*/
this.renderer = renderer;
var self = this;
this.renderer.on('context', this._onContextChangeFn = function(){
self.onContextChange();
});
}
WebGLManager.prototype.constructor = WebGLManager;
module.exports = WebGLManager;
/**
* Generic method called when there is a WebGL context change.
*
*/
WebGLManager.prototype.onContextChange = function ()
{
// do some codes init!
};
/**
* Generic destroy methods to be overridden by the subclass
*
*/
WebGLManager.prototype.destroy = function ()
{
this.renderer.off('context', this._onContextChangeFn);
this.renderer = null;
};
},{}],48:[function(require,module,exports){
var Shader = require('./Shader');
/**
* @class
* @memberof PIXI
* @extends Shader
* @param shaderManager {ShaderManager} The webgl shader manager this shader works for.
*/
function ComplexPrimitiveShader(shaderManager)
{
Shader.call(this,
shaderManager,
// vertex shader
[
'attribute vec2 aVertexPosition;',
'uniform mat3 translationMatrix;',
'uniform mat3 projectionMatrix;',
'uniform vec3 tint;',
'uniform float alpha;',
'uniform vec3 color;',
'varying vec4 vColor;',
'void main(void){',
' gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);',
' vColor = vec4(color * alpha * tint, alpha);',//" * vec4(tint * alpha, alpha);',
'}'
].join('\n'),
// fragment shader
[
'precision mediump float;',
'varying vec4 vColor;',
'void main(void){',
' gl_FragColor = vColor;',
'}'
].join('\n'),
// custom uniforms
{
tint: { type: '3f', value: [0, 0, 0] },
alpha: { type: '1f', value: 0 },
color: { type: '3f', value: [0,0,0] },
translationMatrix: { type: 'mat3', value: new Float32Array(9) },
projectionMatrix: { type: 'mat3', value: new Float32Array(9) }
},
// attributes
{
aVertexPosition:0
}
);
}
ComplexPrimitiveShader.prototype = Object.create(Shader.prototype);
ComplexPrimitiveShader.prototype.constructor = ComplexPrimitiveShader;
module.exports = ComplexPrimitiveShader;
},{"./Shader":50}],49:[function(require,module,exports){
var Shader = require('./Shader');
/**
* @class
* @memberof PIXI
* @extends Shader
* @param shaderManager {ShaderManager} The webgl shader manager this shader works for.
*/
function PrimitiveShader(shaderManager)
{
Shader.call(this,
shaderManager,
// vertex shader
[
'attribute vec2 aVertexPosition;',
'attribute vec4 aColor;',
'uniform mat3 translationMatrix;',
'uniform mat3 projectionMatrix;',
'uniform float alpha;',
'uniform float flipY;',
'uniform vec3 tint;',
'varying vec4 vColor;',
'void main(void){',
' gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);',
' vColor = aColor * vec4(tint * alpha, alpha);',
'}'
].join('\n'),
// fragment shader
[
'precision mediump float;',
'varying vec4 vColor;',
'void main(void){',
' gl_FragColor = vColor;',
'}'
].join('\n'),
// custom uniforms
{
tint: { type: '3f', value: [0, 0, 0] },
alpha: { type: '1f', value: 0 },
translationMatrix: { type: 'mat3', value: new Float32Array(9) },
projectionMatrix: { type: 'mat3', value: new Float32Array(9) }
},
// custom attributes
{
aVertexPosition:0,
aColor:0
}
);
}
PrimitiveShader.prototype = Object.create(Shader.prototype);
PrimitiveShader.prototype.constructor = PrimitiveShader;
module.exports = PrimitiveShader;
},{"./Shader":50}],50:[function(require,module,exports){
var utils = require('../../../utils'),
CONST = require('../../../const');
/**
* @class
* @memberof PIXI
* @param shaderManager {ShaderManager} The webgl shader manager this shader works for.
* @param [vertexSrc] {string} The source of the vertex shader.
* @param [fragmentSrc] {string} The source of the fragment shader.
* @param [uniforms] {object} Uniforms for this shader.
* @param [attributes] {object} Attributes for this shader.
*/
function Shader(shaderManager, vertexSrc, fragmentSrc, uniforms, attributes)
{
if (!vertexSrc || !fragmentSrc)
{
throw new Error('Pixi.js Error. Shader requires vertexSrc and fragmentSrc');
}
/**
* A unique id
* @member {number}
* @readonly
*/
this.uuid = utils.uuid();
/**
* The current WebGL drawing context
* @member {WebGLRenderingContext}
* @readonly
*/
this.gl = shaderManager.renderer.gl;
//TODO maybe we should pass renderer rather than shader manger?? food for thought..
this.shaderManager = shaderManager;
/**
* The WebGL program.
*
* @member {WebGLProgram}
* @readonly
*/
this.program = null;
/**
* The uniforms as an object
* @member {object}
* @private
*/
this.uniforms = uniforms || {};
/**
* The attributes as an object
* @member {object}
* @private
*/
this.attributes = attributes || {};
/**
* Internal texture counter
* @member {number}
* @private
*/
this.textureCount = 1;
/**
* The vertex shader as an array of strings
*
* @member {string}
*/
this.vertexSrc = vertexSrc;
/**
* The fragment shader as an array of strings
*
* @member {string}
*/
this.fragmentSrc = fragmentSrc;
this.init();
}
Shader.prototype.constructor = Shader;
module.exports = Shader;
/*
* Creates the shader and uses it
*
*/
Shader.prototype.init = function ()
{
this.compile();
this.gl.useProgram(this.program);
this.cacheUniformLocations(Object.keys(this.uniforms));
this.cacheAttributeLocations(Object.keys(this.attributes));
};
/*
* Caches the locations of the uniform for reuse
* @param keys {string} the uniforms to cache
*/
Shader.prototype.cacheUniformLocations = function (keys)
{
for (var i = 0; i < keys.length; ++i)
{
this.uniforms[keys[i]]._location = this.gl.getUniformLocation(this.program, keys[i]);
}
};
/*
* Caches the locations of the attribute for reuse
* @param keys {string} the attributes to cache
*/
Shader.prototype.cacheAttributeLocations = function (keys)
{
for (var i = 0; i < keys.length; ++i)
{
this.attributes[keys[i]] = this.gl.getAttribLocation(this.program, keys[i]);
}
// TODO: Check if this is needed anymore...
// Begin worst hack eva //
// WHY??? ONLY on my chrome pixel the line above returns -1 when using filters?
// maybe its something to do with the current state of the gl context.
// I'm convinced this is a bug in the chrome browser as there is NO reason why this should be returning -1 especially as it only manifests on my chrome pixel
// If theres any webGL people that know why could happen please help :)
// if (this.attributes.aColor === -1){
// this.attributes.aColor = 2;
// }
// End worst hack eva //
};
/*
* Attaches the shaders and creates the program
* @return {WebGLProgram}
*/
Shader.prototype.compile = function ()
{
var gl = this.gl;
var glVertShader = this._glCompile(gl.VERTEX_SHADER, this.vertexSrc);
var glFragShader = this._glCompile(gl.FRAGMENT_SHADER, this.fragmentSrc);
var program = gl.createProgram();
gl.attachShader(program, glVertShader);
gl.attachShader(program, glFragShader);
gl.linkProgram(program);
// if linking fails, then log and cleanup
if (!gl.getProgramParameter(program, gl.LINK_STATUS))
{
console.error('Pixi.js Error: Could not initialize shader.');
console.error('gl.VALIDATE_STATUS', gl.getProgramParameter(program, gl.VALIDATE_STATUS));
console.error('gl.getError()', gl.getError());
// if there is a program info log, log it
if (gl.getProgramInfoLog(program) !== '')
{
console.warn('Pixi.js Warning: gl.getProgramInfoLog()', gl.getProgramInfoLog(program));
}
gl.deleteProgram(program);
program = null;
}
// clean up some shaders
gl.deleteShader(glVertShader);
gl.deleteShader(glFragShader);
return (this.program = program);
};
/*
Shader.prototype.buildSync = function ()
{
// var str = ""
// str = "Shader.prototype.syncUniforms = function()";
// str += "{\n";
for (var key in this.uniforms)
{
var uniform = this.uniforms[key];
Object.defineProperty(this, key, {
get: function ()
{
return uniform.value
},
set: function (value)
{
this.setUniform(uniform, value);
}
});
console.log( makePropSetter( key, " bloop", uniform.type ) )
// Object.def
// location = uniform._location,
// value = uniform.value,
//i, il;
// str += "gl.uniform1i(this.uniforms."+ key +"._location, this.uniforms." + key + ".value );\n"
}
}*/
/**
* Adds a new uniform
*
* @param uniform {Object} the new uniform to attach
*/
Shader.prototype.syncUniform = function (uniform)
{
var location = uniform._location,
value = uniform.value,
gl = this.gl,
i, il;
switch (uniform.type)
{
// single int value
case 'i':
case '1i':
gl.uniform1i(location, value);
break;
// single float value
case 'f':
case '1f':
gl.uniform1f(location, value);
break;
// Float32Array(2) or JS Arrray
case '2f':
gl.uniform2f(location, value[0], value[1]);
break;
// Float32Array(3) or JS Arrray
case '3f':
gl.uniform3f(location, value[0], value[1], value[2]);
break;
// Float32Array(4) or JS Arrray
case '4f':
gl.uniform4f(location, value[0], value[1], value[2], value[3]);
break;
// a 2D Point object
case 'v2':
gl.uniform2f(location, value.x, value.y);
break;
// a 3D Point object
case 'v3':
gl.uniform3f(location, value.x, value.y, value.z);
break;
// a 4D Point object
case 'v4':
gl.uniform4f(location, value.x, value.y, value.z, value.w);
break;
// Int32Array or JS Array
case '1iv':
gl.uniform1iv(location, value);
break;
// Int32Array or JS Array
case '2iv':
gl.uniform2iv(location, value);
break;
// Int32Array or JS Array
case '3iv':
gl.uniform3iv(location, value);
break;
// Int32Array or JS Array
case '4iv':
gl.uniform4iv(location, value);
break;
// Float32Array or JS Array
case '1fv':
gl.uniform1fv(location, value);
break;
// Float32Array or JS Array
case '2fv':
gl.uniform2fv(location, value);
break;
// Float32Array or JS Array
case '3fv':
gl.uniform3fv(location, value);
break;
// Float32Array or JS Array
case '4fv':
gl.uniform4fv(location, value);
break;
// Float32Array or JS Array
case 'm2':
case 'mat2':
case 'Matrix2fv':
gl.uniformMatrix2fv(location, uniform.transpose, value);
break;
// Float32Array or JS Array
case 'm3':
case 'mat3':
case 'Matrix3fv':
gl.uniformMatrix3fv(location, uniform.transpose, value);
break;
// Float32Array or JS Array
case 'm4':
case 'mat4':
case 'Matrix4fv':
gl.uniformMatrix4fv(location, uniform.transpose, value);
break;
// a Color Value
case 'c':
if (typeof value === 'number')
{
value = utils.hex2rgb(value);
}
gl.uniform3f(location, value[0], value[1], value[2]);
break;
// flat array of integers (JS or typed array)
case 'iv1':
gl.uniform1iv(location, value);
break;
// flat array of integers with 3 x N size (JS or typed array)
case 'iv':
gl.uniform3iv(location, value);
break;
// flat array of floats (JS or typed array)
case 'fv1':
gl.uniform1fv(location, value);
break;
// flat array of floats with 3 x N size (JS or typed array)
case 'fv':
gl.uniform3fv(location, value);
break;
// array of 2D Point objects
case 'v2v':
if (!uniform._array)
{
uniform._array = new Float32Array(2 * value.length);
}
for (i = 0, il = value.length; i < il; ++i)
{
uniform._array[i * 2] = value[i].x;
uniform._array[i * 2 + 1] = value[i].y;
}
gl.uniform2fv(location, uniform._array);
break;
// array of 3D Point objects
case 'v3v':
if (!uniform._array)
{
uniform._array = new Float32Array(3 * value.length);
}
for (i = 0, il = value.length; i < il; ++i)
{
uniform._array[i * 3] = value[i].x;
uniform._array[i * 3 + 1] = value[i].y;
uniform._array[i * 3 + 2] = value[i].z;
}
gl.uniform3fv(location, uniform._array);
break;
// array of 4D Point objects
case 'v4v':
if (!uniform._array)
{
uniform._array = new Float32Array(4 * value.length);
}
for (i = 0, il = value.length; i < il; ++i)
{
uniform._array[i * 4] = value[i].x;
uniform._array[i * 4 + 1] = value[i].y;
uniform._array[i * 4 + 2] = value[i].z;
uniform._array[i * 4 + 3] = value[i].w;
}
gl.uniform4fv(location, uniform._array);
break;
// PIXI.Texture
case 't':
case 'sampler2D':
if (!uniform.value || !uniform.value.baseTexture.hasLoaded)
{
break;
}
// activate this texture
gl.activeTexture(gl['TEXTURE' + this.textureCount]);
var texture = uniform.value.baseTexture._glTextures[gl.id];
if (!texture)
{
this.initSampler2D(uniform);
}
// bind the texture
gl.bindTexture(gl.TEXTURE_2D, texture);
// set uniform to texture index
gl.uniform1i(uniform._location, this.textureCount);
// increment next texture id
this.textureCount++;
break;
default:
window.console.warn('Pixi.js Shader Warning: Unknown uniform type: ' + uniform.type);
}
};
/*
* Updates the shader uniform values.
*/
Shader.prototype.syncUniforms = function ()
{
this.textureCount = 1;
for (var key in this.uniforms)
{
this.syncUniform(this.uniforms[key]);
}
};
/**
* Initialises a Sampler2D uniform (which may only be available later on after initUniforms once the texture has loaded)
*
*/
Shader.prototype.initSampler2D = function (uniform)
{
var gl = this.gl;
var texture = uniform.value.baseTexture;
if(!texture.hasLoaded)
{
return;
}
if (uniform.textureData)
{
//TODO move this...
var data = uniform.textureData;
texture._glTextures[gl.id] = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]);
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha);
// GLTexture = mag linear, min linear_mipmap_linear, wrap repeat + gl.generateMipmap(gl.TEXTURE_2D);
// GLTextureLinear = mag/min linear, wrap clamp
// GLTextureNearestRepeat = mag/min NEAREST, wrap repeat
// GLTextureNearest = mag/min nearest, wrap clamp
// AudioTexture = whatever + luminance + width 512, height 2, border 0
// KeyTexture = whatever + luminance + width 256, height 2, border 0
// magFilter can be: gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR or gl.NEAREST
// wrapS/T can be: gl.CLAMP_TO_EDGE or gl.REPEAT
gl.texImage2D(gl.TEXTURE_2D, 0, data.luminance ? gl.LUMINANCE : gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, data.magFilter ? data.magFilter : gl.LINEAR );
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, data.wrapS ? data.wrapS : gl.CLAMP_TO_EDGE );
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, data.wrapS ? data.wrapS : gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, data.wrapT ? data.wrapT : gl.CLAMP_TO_EDGE);
}
else
{
this.shaderManager.renderer.updateTexture(texture);
}
};
/**
* Destroys the shader.
*
*/
Shader.prototype.destroy = function ()
{
this.gl.deleteProgram(this.program);
this.gl = null;
this.uniforms = null;
this.attributes = null;
this.vertexSrc = null;
this.fragmentSrc = null;
};
Shader.prototype._glCompile = function (type, src)
{
var shader = this.gl.createShader(type);
this.gl.shaderSource(shader, src);
this.gl.compileShader(shader);
if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS))
{
window.console.log(this.gl.getShaderInfoLog(shader));
return null;
}
return shader;
};
},{"../../../const":12,"../../../utils":66}],51:[function(require,module,exports){
var Shader = require('./Shader');
/**
* @class
* @memberof PIXI
* @extends Shader
* @param shaderManager {ShaderManager} The webgl shader manager this shader works for.
* @param [vertexSrc] {string} The source of the vertex shader.
* @param [fragmentSrc] {string} The source of the fragment shader.
* @param [customUniforms] {object} Custom uniforms to use to augment the built-in ones.
* @param [fragmentSrc] {string} The source of the fragment shader.
*/
function TextureShader(shaderManager, vertexSrc, fragmentSrc, customUniforms, customAttributes)
{
var uniforms = {
uSampler: { type: 'sampler2D', value: 0 },
projectionMatrix: { type: 'mat3', value: new Float32Array(1, 0, 0,
0, 1, 0,
0, 0, 1) }
};
if (customUniforms)
{
for (var u in customUniforms)
{
uniforms[u] = customUniforms[u];
}
}
var attributes = {
aVertexPosition: 0,
aTextureCoord: 0,
aColor: 0
};
if (customAttributes)
{
for (var a in customAttributes)
{
attributes[a] = customAttributes[a];
}
}
/**
* The vertex shader.
* @member {Array}
*/
vertexSrc = vertexSrc || TextureShader.defaultVertexSrc;
/**
* The fragment shader.
* @member {Array}
*/
fragmentSrc = fragmentSrc || TextureShader.defaultFragmentSrc;
Shader.call(this, shaderManager, vertexSrc, fragmentSrc, uniforms, attributes);
}
// constructor
TextureShader.prototype = Object.create(Shader.prototype);
TextureShader.prototype.constructor = TextureShader;
module.exports = TextureShader;
TextureShader.defaultVertexSrc = [
'precision lowp float;',
'attribute vec2 aVertexPosition;',
'attribute vec2 aTextureCoord;',
'attribute vec4 aColor;',
'uniform mat3 projectionMatrix;',
'varying vec2 vTextureCoord;',
'varying vec4 vColor;',
'void main(void){',
' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);',
' vTextureCoord = aTextureCoord;',
' vColor = vec4(aColor.rgb * aColor.a, aColor.a);',
'}'
].join('\n');
TextureShader.defaultFragmentSrc = [
'precision lowp float;',
'varying vec2 vTextureCoord;',
'varying vec4 vColor;',
'uniform sampler2D uSampler;',
'void main(void){',
' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;',
'}'
].join('\n');
},{"./Shader":50}],52:[function(require,module,exports){
var WebGLManager = require('../managers/WebGLManager');
/**
* Base for a common object renderer that can be used as a system renderer plugin.
*
* @class
* @extends WebGLManager
* @memberof PIXI
* @param renderer {WebGLRenderer} The renderer this object renderer works for.
*/
function ObjectRenderer(renderer)
{
WebGLManager.call(this, renderer);
}
ObjectRenderer.prototype = Object.create(WebGLManager.prototype);
ObjectRenderer.prototype.constructor = ObjectRenderer;
module.exports = ObjectRenderer;
/**
* Starts the renderer and sets the shader
*
*/
ObjectRenderer.prototype.start = function ()
{
// set the shader..
};
/**
* Stops the renderer
*
*/
ObjectRenderer.prototype.stop = function ()
{
this.flush();
};
/**
* flushes
*
*/
ObjectRenderer.prototype.flush = function ()
{
// flush!
};
/**
* Renders an object
*
*/
ObjectRenderer.prototype.render = function (object)
{
// render the object
};
},{"../managers/WebGLManager":47}],53:[function(require,module,exports){
/**
* Helper class to create a quad
* @class
* @memberof PIXI
* @param gl {WebGLRenderingContext} The gl context for this quad to use.
*/
function Quad(gl)
{
/*
* the current WebGL drawing context
*
* @member {WebGLRenderingContext}
*/
this.gl = gl;
// this.textures = new TextureUvs();
/**
* An array of vertices
*
* @member {Float32Array}
*/
this.vertices = new Float32Array([
0,0,
200,0,
200,200,
0,200
]);
/**
* The Uvs of the quad
*
* @member {Float32Array}
*/
this.uvs = new Float32Array([
0,0,
1,0,
1,1,
0,1
]);
// var white = (0xFFFFFF >> 16) + (0xFFFFFF & 0xff00) + ((0xFFFFFF & 0xff) << 16) + (1 * 255 << 24);
//TODO convert this to a 32 unsigned int array
/**
* The color components of the triangles
*
* @member {Float32Array}
*/
this.colors = new Float32Array([
1,1,1,1,
1,1,1,1,
1,1,1,1,
1,1,1,1
]);
/*
* @member {Uint16Array} An array containing the indices of the vertices
*/
this.indices = new Uint16Array([
0, 1, 2, 0, 3, 2
]);
/*
* @member {WebGLBuffer} The vertex buffer
*/
this.vertexBuffer = gl.createBuffer();
/*
* @member {WebGLBuffer} The index buffer
*/
this.indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, (8 + 8 + 16) * 4, gl.DYNAMIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW);
this.upload();
}
Quad.prototype.constructor = Quad;
/**
* Maps two Rectangle to the quad
* @param rect {Rectangle} the first rectangle
* @param rect2 {Rectangle} the second rectangle
*/
Quad.prototype.map = function(rect, rect2)
{
var x = 0; //rect2.x / rect.width;
var y = 0; //rect2.y / rect.height;
this.uvs[0] = x;
this.uvs[1] = y;
this.uvs[2] = x + rect2.width / rect.width;
this.uvs[3] = y;
this.uvs[4] = x + rect2.width / rect.width;
this.uvs[5] = y + rect2.height / rect.height;
this.uvs[6] = x;
this.uvs[7] = y + rect2.height / rect.height;
/// -----
x = rect2.x;
y = rect2.y;
this.vertices[0] = x;
this.vertices[1] = y;
this.vertices[2] = x + rect2.width;
this.vertices[3] = y;
this.vertices[4] = x + rect2.width;
this.vertices[5] = y + rect2.height;
this.vertices[6] = x;
this.vertices[7] = y + rect2.height;
this.upload();
};
/**
* Binds the buffer and uploads the data
*/
Quad.prototype.upload = function()
{
var gl = this.gl;
// TODO could probably be pushed into one upload!
gl.bindBuffer( gl.ARRAY_BUFFER, this.vertexBuffer );
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertices);
gl.bufferSubData(gl.ARRAY_BUFFER, 8 * 4, this.uvs);
gl.bufferSubData(gl.ARRAY_BUFFER, (8 + 8) * 4, this.colors);
};
module.exports = Quad;
},{}],54:[function(require,module,exports){
var math = require('../../../math'),
utils = require('../../../utils'),
CONST = require('../../../const'),
//StencilManager = require('../managers/StencilManager'),
StencilMaskStack = require('./StencilMaskStack');
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
* @class
* @memberof PIXI
* @param gl {WebGLRenderingContext} the current WebGL drawing context
* @param width {number} the horizontal range of the filter
* @param height {number} the vertical range of the filter
* @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values
* @param resolution {number} the current resolution
* @param root {boolean} Whether this object is the root element or not
*/
var RenderTarget = function(gl, width, height, scaleMode, resolution, root)
{
//TODO Resolution could go here ( eg low res blurs )
/**
* The current WebGL drawing context
* @member {WebGLRenderingContext}
*/
this.gl = gl;
// next time to create a frame buffer and texture
/**
* A frame buffer
* @member {WebGLFrameBuffer}
*/
this.frameBuffer = null;
/**
* @member {Texture}
*/
this.texture = null;
/**
* The size of the object as a rectangle
* @member {Rectangle}
*/
this.size = new math.Rectangle(0, 0, 1, 1);
/**
* The current resolution
* @member {number}
*/
this.resolution = resolution || CONST.RESOLUTION;
/**
* The projection matrix
* @member {Matrix}
*/
this.projectionMatrix = new math.Matrix();
/**
* The object's transform
* @member {Matrix}
*/
this.transform = null;
/**
*
* @member {Rectangle}
*/
this.frame = null;
/**
* The stencil buffer stores masking data for the render target
* @member {WebGLRenderBuffer}
*/
this.stencilBuffer = null;
/**
* The data structure for the stencil masks
* @member {StencilMaskStack}
*/
this.stencilMaskStack = new StencilMaskStack();
/**
* Stores filter data for the render target
* @member {Array}
*/
this.filterStack = [
{
renderTarget:this,
filter:[],
bounds:this.size
}
];
/**
* The scale mode
* @member {number}
* @default CONST.SCALE_MODES.DEFAULT
*/
this.scaleMode = scaleMode || CONST.SCALE_MODES.DEFAULT;
/**
* Whether this object is the root element or not
* @member {boolean}
*/
this.root = root;
if (!this.root)
{
// this.flipY = true;
this.frameBuffer = gl.createFramebuffer();
/*
A frame buffer needs a target to render to..
create a texture and bind it attach it to the framebuffer..
*/
this.texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, this.texture);
// set the scale properties of the texture..
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.SCALE_MODES.LINEAR ? gl.LINEAR : gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.SCALE_MODES.LINEAR ? gl.LINEAR : gl.NEAREST);
// check to see if the texture is a power of two!
var isPowerOfTwo = utils.isPowerOfTwo(width, height);
//TODO for 99% of use cases if a texture is power of two we should tile the texture...
if (!isPowerOfTwo)
{
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);
}
else
{
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
}
gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer );
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0);
}
this.resize(width, height);
};
RenderTarget.prototype.constructor = RenderTarget;
module.exports = RenderTarget;
/**
* Clears the filter texture.
*
*/
RenderTarget.prototype.clear = function(bind)
{
var gl = this.gl;
if(bind)
{
gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer);
}
gl.clearColor(0,0,0,0);
gl.clear(gl.COLOR_BUFFER_BIT);
};
/**
* Binds the stencil buffer.
*
*/
RenderTarget.prototype.attachStencilBuffer = function()
{
if ( this.stencilBuffer )
{
return;
}
/*
The stencil buffer is used for masking in pixi
lets create one and then add attach it to the framebuffer..
*/
if (!this.root)
{
var gl = this.gl;
this.stencilBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, this.stencilBuffer);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.stencilBuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, this.size.width * this.resolution , this.size.height * this.resolution );
}
};
/**
* Binds the buffers and initialises the viewport.
*
*/
RenderTarget.prototype.activate = function()
{
//TOOD refactor usage of frame..
var gl = this.gl;
gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer);
var projectionFrame = this.frame || this.size;
// TODO add a dirty flag to this of a setter for the frame?
this.calculateProjection( projectionFrame );
if(this.transform)
{
this.projectionMatrix.append(this.transform);
}
gl.viewport(0,0, projectionFrame.width * this.resolution, projectionFrame.height * this.resolution);
};
/**
* Updates the projection matrix based on a projection frame (which is a rectangle)
*
*/
RenderTarget.prototype.calculateProjection = function( projectionFrame )
{
var pm = this.projectionMatrix;
pm.identity();
if (!this.root)
{
pm.a = 1 / projectionFrame.width*2;
pm.d = 1 / projectionFrame.height*2;
pm.tx = -1 - projectionFrame.x * pm.a;
pm.ty = -1 - projectionFrame.y * pm.d;
}
else
{
pm.a = 1 / projectionFrame.width*2;
pm.d = -1 / projectionFrame.height*2;
pm.tx = -1 - projectionFrame.x * pm.a;
pm.ty = 1 - projectionFrame.y * pm.d;
}
};
/**
* Resizes the texture to the specified width and height
*
* @param width {Number} the new width of the texture
* @param height {Number} the new height of the texture
*/
RenderTarget.prototype.resize = function(width, height)
{
width = width | 0;
height = height | 0;
if (this.size.width === width && this.size.height === height) {
return;
}
this.size.width = width;
this.size.height = height;
if (!this.root)
{
var gl = this.gl;
gl.bindTexture(gl.TEXTURE_2D, this.texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width * this.resolution, height * this.resolution , 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
if (this.stencilBuffer )
{
// update the stencil buffer width and height
gl.bindRenderbuffer(gl.RENDERBUFFER, this.stencilBuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width * this.resolution, height * this.resolution );
}
}
var projectionFrame = this.frame || this.size;
this.calculateProjection( projectionFrame );
};
/**
* Destroys the render target.
*
*/
RenderTarget.prototype.destroy = function()
{
var gl = this.gl;
gl.deleteFramebuffer( this.frameBuffer );
gl.deleteTexture( this.texture );
this.frameBuffer = null;
this.texture = null;
};
},{"../../../const":12,"../../../math":22,"../../../utils":66,"./StencilMaskStack":55}],55:[function(require,module,exports){
/**
* Generic Mask Stack data structure
* @class
* @memberof PIXI
* @param renderer {WebGLRenderer} The renderer this manager works for.
*/
function StencilMaskStack()
{
/**
* The actual stack
*
* @member {Array}
*/
this.stencilStack = [];
/**
* TODO @alvin
*
* @member {boolean}
*/
this.reverse = true;
/**
* Internal count
*
* @member {number}
*/
this.count = 0;
}
StencilMaskStack.prototype.constructor = StencilMaskStack;
module.exports = StencilMaskStack;
},{}],56:[function(require,module,exports){
var math = require('../math'),
Texture = require('../textures/Texture'),
Container = require('../display/Container'),
CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'),
utils = require('../utils'),
CONST = require('../const'),
tempPoint = new math.Point();
/**
* The Sprite object is the base for all textured objects that are rendered to the screen
*
* A sprite can be created directly from an image like this:
*
* ```js
* var sprite = new PIXI.Sprite.fromImage('assets/image.png');
* ```
*
* @class
* @extends Container
* @memberof PIXI
* @param texture {Texture} The texture for this sprite
*/
function Sprite(texture)
{
Container.call(this);
/**
* The anchor sets the origin point of the texture.
* The default is 0,0 this means the texture's origin is the top left
* Setting the anchor to 0.5,0.5 means the texture's origin is centered
* Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner
*
* @member {Point}
*/
this.anchor = new math.Point();
/**
* The texture that the sprite is using
*
* @member {Texture}
* @private
*/
this._texture = null;
/**
* The width of the sprite (this is initially set by the texture)
*
* @member {number}
* @private
*/
this._width = 0;
/**
* The height of the sprite (this is initially set by the texture)
*
* @member {number}
* @private
*/
this._height = 0;
/**
* The tint applied to the sprite. This is a hex value. A value of 0xFFFFFF will remove any tint effect.
*
* @member {number}
* @default [0xFFFFFF]
*/
this.tint = 0xFFFFFF;
/**
* The blend mode to be applied to the sprite. Apply a value of blendModes.NORMAL to reset the blend mode.
*
* @member {number}
* @default CONST.BLEND_MODES.NORMAL;
*/
this.blendMode = CONST.BLEND_MODES.NORMAL;
/**
* The shader that will be used to render the sprite. Set to null to remove a current shader.
*
* @member {AbstractFilter}
*/
this.shader = null;
/**
* An internal cached value of the tint.
*
* @member {number}
* @default [0xFFFFFF]
*/
this.cachedTint = 0xFFFFFF;
// call texture setter
this.texture = texture || Texture.EMPTY;
}
// constructor
Sprite.prototype = Object.create(Container.prototype);
Sprite.prototype.constructor = Sprite;
module.exports = Sprite;
Object.defineProperties(Sprite.prototype, {
/**
* The width of the sprite, setting this will actually modify the scale to achieve the value set
*
* @member
* @memberof Sprite#
*/
width: {
get: function ()
{
return this.scale.x * this.texture._frame.width;
},
set: function (value)
{
this.scale.x = value / this.texture._frame.width;
this._width = value;
}
},
/**
* The height of the sprite, setting this will actually modify the scale to achieve the value set
*
* @member
* @memberof Sprite#
*/
height: {
get: function ()
{
return this.scale.y * this.texture._frame.height;
},
set: function (value)
{
this.scale.y = value / this.texture._frame.height;
this._height = value;
}
},
/**
* The height of the sprite, setting this will actually modify the scale to achieve the value set
*
* @member
* @memberof Sprite#
*/
texture: {
get: function ()
{
return this._texture;
},
set: function (value)
{
if (this._texture === value)
{
return;
}
this._texture = value;
this.cachedTint = 0xFFFFFF;
if (value)
{
// wait for the texture to load
if (value.baseTexture.hasLoaded)
{
this._onTextureUpdate();
}
else
{
value.once('update', this._onTextureUpdate.bind(this));
}
}
}
}
});
/**
* When the texture is updated, this event will fire to update the scale and frame
*
* @private
*/
Sprite.prototype._onTextureUpdate = function ()
{
// so if _width is 0 then width was not set..
if (this._width)
{
this.scale.x = this._width / this.texture.frame.width;
}
if (this._height)
{
this.scale.y = this._height / this.texture.frame.height;
}
};
/**
*
* Renders the object using the WebGL renderer
*
* @param renderer {WebGLRenderer}
*/
Sprite.prototype._renderWebGL = function (renderer)
{
renderer.setObjectRenderer(renderer.plugins.sprite);
renderer.plugins.sprite.render(this);
};
/**
* Returns the bounds of the Sprite as a rectangle. The bounds calculation takes the worldTransform into account.
*
* @param matrix {Matrix} the transformation matrix of the sprite
* @return {Rectangle} the framing rectangle
*/
Sprite.prototype.getBounds = function (matrix)
{
if(!this._currentBounds)
{
var width = this._texture._frame.width;
var height = this._texture._frame.height;
var w0 = width * (1-this.anchor.x);
var w1 = width * -this.anchor.x;
var h0 = height * (1-this.anchor.y);
var h1 = height * -this.anchor.y;
var worldTransform = matrix || this.worldTransform ;
var a = worldTransform.a;
var b = worldTransform.b;
var c = worldTransform.c;
var d = worldTransform.d;
var tx = worldTransform.tx;
var ty = worldTransform.ty;
var minX,
maxX,
minY,
maxY;
if (b === 0 && c === 0)
{
// scale may be negative!
if (a < 0)
{
a *= -1;
}
if (d < 0)
{
d *= -1;
}
// this means there is no rotation going on right? RIGHT?
// if thats the case then we can avoid checking the bound values! yay
minX = a * w1 + tx;
maxX = a * w0 + tx;
minY = d * h1 + ty;
maxY = d * h0 + ty;
}
else
{
var x1 = a * w1 + c * h1 + tx;
var y1 = d * h1 + b * w1 + ty;
var x2 = a * w0 + c * h1 + tx;
var y2 = d * h1 + b * w0 + ty;
var x3 = a * w0 + c * h0 + tx;
var y3 = d * h0 + b * w0 + ty;
var x4 = a * w1 + c * h0 + tx;
var y4 = d * h0 + b * w1 + ty;
minX = x1;
minX = x2 < minX ? x2 : minX;
minX = x3 < minX ? x3 : minX;
minX = x4 < minX ? x4 : minX;
minY = y1;
minY = y2 < minY ? y2 : minY;
minY = y3 < minY ? y3 : minY;
minY = y4 < minY ? y4 : minY;
maxX = x1;
maxX = x2 > maxX ? x2 : maxX;
maxX = x3 > maxX ? x3 : maxX;
maxX = x4 > maxX ? x4 : maxX;
maxY = y1;
maxY = y2 > maxY ? y2 : maxY;
maxY = y3 > maxY ? y3 : maxY;
maxY = y4 > maxY ? y4 : maxY;
}
var bounds = this._bounds;
bounds.x = minX;
bounds.width = maxX - minX;
bounds.y = minY;
bounds.height = maxY - minY;
// store a reference so that if this function gets called again in the render cycle we do not have to recalculate
this._currentBounds = bounds;
}
return this._currentBounds;
};
Sprite.prototype.getLocalBounds = function ()
{
this._bounds.x = -this._texture._frame.width * this.anchor.x;
this._bounds.y = -this._texture._frame.height * this.anchor.y;
this._bounds.width = this._texture._frame.width;
this._bounds.height = this._texture._frame.height;
return this._bounds;
};
/**
* Tests if a point is inside this sprite
*
* @param point {Point} the point to test
* @return {boolean} the result of the test
*/
Sprite.prototype.containsPoint = function( point )
{
this.worldTransform.applyInverse(point, tempPoint);
var width = this._texture._frame.width;
var height = this._texture._frame.height;
var x1 = -width * this.anchor.x;
var y1;
if ( tempPoint.x > x1 && tempPoint.x < x1 + width )
{
y1 = -height * this.anchor.y;
if ( tempPoint.y > y1 && tempPoint.y < y1 + height )
{
return true;
}
}
return false;
};
/**
* Renders the object using the Canvas renderer
*
* @param renderer {CanvasRenderer} The renderer
*/
Sprite.prototype._renderCanvas = function (renderer)
{
if (this.texture.crop.width <= 0 || this.texture.crop.height <= 0)
{
return;
}
if (this.blendMode !== renderer.currentBlendMode)
{
renderer.currentBlendMode = this.blendMode;
renderer.context.globalCompositeOperation = renderer.blendModes[renderer.currentBlendMode];
}
// Ignore null sources
if (this.texture.valid)
{
var texture = this._texture,
wt = this.worldTransform,
dx,
dy,
width,
height;
var resolution = texture.baseTexture.resolution / renderer.resolution;
renderer.context.globalAlpha = this.worldAlpha;
// If smoothingEnabled is supported and we need to change the smoothing property for this texture
if (renderer.smoothProperty && renderer.currentScaleMode !== texture.baseTexture.scaleMode)
{
renderer.currentScaleMode = texture.baseTexture.scaleMode;
renderer.context[renderer.smoothProperty] = (renderer.currentScaleMode === CONST.SCALE_MODES.LINEAR);
}
// If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions
if(texture.rotate)
{
// cheeky rotation!
var a = wt.a;
var b = wt.b;
wt.a = -wt.c;
wt.b = -wt.d;
wt.c = a;
wt.d = b;
width = texture.crop.height;
height = texture.crop.width;
dx = (texture.trim) ? texture.trim.y - this.anchor.y * texture.trim.height : this.anchor.y * -texture._frame.height;
dy = (texture.trim) ? texture.trim.x - this.anchor.x * texture.trim.width : this.anchor.x * -texture._frame.width;
}
else
{
width = texture.crop.width;
height = texture.crop.height;
dx = (texture.trim) ? texture.trim.x - this.anchor.x * texture.trim.width : this.anchor.x * -texture._frame.width;
dy = (texture.trim) ? texture.trim.y - this.anchor.y * texture.trim.height : this.anchor.y * -texture._frame.height;
}
// Allow for pixel rounding
if (renderer.roundPixels)
{
renderer.context.setTransform(
wt.a,
wt.b,
wt.c,
wt.d,
(wt.tx * renderer.resolution) | 0,
(wt.ty * renderer.resolution) | 0
);
dx = dx | 0;
dy = dy | 0;
}
else
{
renderer.context.setTransform(
wt.a,
wt.b,
wt.c,
wt.d,
wt.tx * renderer.resolution,
wt.ty * renderer.resolution
);
}
if (this.tint !== 0xFFFFFF)
{
if (this.cachedTint !== this.tint)
{
this.cachedTint = this.tint;
// TODO clean up caching - how to clean up the caches?
this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint);
}
renderer.context.drawImage(
this.tintedTexture,
0,
0,
width,
height,
dx / resolution,
dy / resolution,
width / resolution,
width / resolution
);
}
else
{
renderer.context.drawImage(
texture.baseTexture.source,
texture.crop.x,
texture.crop.y,
width,
height,
dx / resolution,
dy / resolution,
width / resolution,
height / resolution
);
}
}
};
/**
* Destroys this sprite and optionally its texture
*
* @param destroyTexture {boolean} Should it destroy the current texture of the sprite as well
* @param destroyBaseTexture {boolean} Should it destroy the base texture of the sprite as well
*/
Sprite.prototype.destroy = function (destroyTexture, destroyBaseTexture)
{
Container.prototype.destroy.call(this);
this.anchor = null;
if (destroyTexture)
{
this._texture.destroy(destroyBaseTexture);
}
this._texture = null;
this.shader = null;
};
// some helper functions..
/**
* Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId
* The frame ids are created when a Texture packer file has been loaded
*
* @static
* @param frameId {String} The frame Id of the texture in the cache
* @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId
* @param [crossorigin=(auto)] {boolean} if you want to specify the cross-origin parameter
* @param [scaleMode=scaleModes.DEFAULT] {number} if you want to specify the scale mode, see {@link SCALE_MODES} for possible values
*/
Sprite.fromFrame = function (frameId)
{
var texture = utils.TextureCache[frameId];
if (!texture)
{
throw new Error('The frameId "' + frameId + '" does not exist in the texture cache ' + this);
}
return new Sprite(texture);
};
/**
* Helper function that creates a sprite that will contain a texture based on an image url
* If the image is not in the texture cache it will be loaded
*
* @static
* @param imageId {String} The image url of the texture
* @return {Sprite} A new Sprite using a texture from the texture cache matching the image id
*/
Sprite.fromImage = function (imageId, crossorigin, scaleMode)
{
return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode));
};
},{"../const":12,"../display/Container":13,"../math":22,"../renderers/canvas/utils/CanvasTinter":37,"../textures/Texture":60,"../utils":66}],57:[function(require,module,exports){
var ObjectRenderer = require('../../renderers/webgl/utils/ObjectRenderer'),
Shader = require('../../renderers/webgl/shaders/Shader'),
WebGLRenderer = require('../../renderers/webgl/WebGLRenderer'),
CONST = require('../../const');
/**
* @author Mat Groves
*
* Big thanks to the very clever Matt DesLauriers <mattdesl> https://github.com/mattdesl/
* for creating the original pixi version!
* Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now share 4 bytes on the vertex buffer
*
* Heavily inspired by LibGDX's SpriteRenderer:
* https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/SpriteRenderer.java
*/
/**
*
* @class
* @private
* @memberof PIXI
* @extends ObjectRenderer
* @param renderer {WebGLRenderer} The renderer this sprite batch works for.
*/
function SpriteRenderer(renderer)
{
ObjectRenderer.call(this, renderer);
/**
*
*
* @member {number}
*/
this.vertSize = 5;
/**
*
*
* @member {number}
*/
this.vertByteSize = this.vertSize * 4;
/**
* The number of images in the SpriteBatch before it flushes.
*
* @member {number}
*/
this.size = CONST.SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop
// the total number of bytes in our batch
var numVerts = this.size * 4 * this.vertByteSize;
// the total number of indices in our batch
var numIndices = this.size * 6;
/**
* Holds the vertices
*
* @member {ArrayBuffer}
*/
this.vertices = new ArrayBuffer(numVerts);
/**
* View on the vertices as a Float32Array
*
* @member {Float32Array}
*/
this.positions = new Float32Array(this.vertices);
/**
* Holds the color components
*
* @member {Uint32Array}
*/
this.colors = new Uint32Array(this.vertices);
/**
* Holds the indices
*
* @member {Uint16Array}
*/
this.indices = new Uint16Array(numIndices);
/**
*
*
* @member {number}
*/
this.lastIndexCount = 0;
for (var i=0, j=0; i < numIndices; i += 6, j += 4)
{
this.indices[i + 0] = j + 0;
this.indices[i + 1] = j + 1;
this.indices[i + 2] = j + 2;
this.indices[i + 3] = j + 0;
this.indices[i + 4] = j + 2;
this.indices[i + 5] = j + 3;
}
/**
*
*
* @member {boolean}
*/
this.drawing = false;
/**
*
*
* @member {number}
*/
this.currentBatchSize = 0;
/**
*
*
* @member {BaseTexture}
*/
this.currentBaseTexture = null;
/**
*
*
* @member {Array}
*/
this.textures = [];
/**
*
*
* @member {Array}
*/
this.blendModes = [];
/**
*
*
* @member {Array}
*/
this.shaders = [];
/**
*
*
* @member {Array}
*/
this.sprites = [];
/**
* The default shader that is used if a sprite doesn't have a more specific one.
*
* @member {Shader}
*/
this.shader = null;
}
SpriteRenderer.prototype = Object.create(ObjectRenderer.prototype);
SpriteRenderer.prototype.constructor = SpriteRenderer;
module.exports = SpriteRenderer;
WebGLRenderer.registerPlugin('sprite', SpriteRenderer);
/**
* Sets up the renderer context and necessary buffers.
*
* @private
* @param gl {WebGLRenderingContext} the current WebGL drawing context
*/
SpriteRenderer.prototype.onContextChange = function ()
{
var gl = this.renderer.gl;
// setup default shader
this.shader = this.renderer.shaderManager.defaultShader;
// create a couple of buffers
this.vertexBuffer = gl.createBuffer();
this.indexBuffer = gl.createBuffer();
// 65535 is max index, so 65535 / 6 = 10922.
//upload the index data
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW);
this.currentBlendMode = 99999;
};
/**
* Renders the sprite object.
*
* @param sprite {Sprite} the sprite to render when using this spritebatch
*/
SpriteRenderer.prototype.render = function (sprite)
{
var texture = sprite._texture;
//TODO set blend modes..
// check texture..
if (this.currentBatchSize >= this.size)
{
this.flush();
this.currentBaseTexture = texture.baseTexture;
}
// get the uvs for the texture
var uvs = texture._uvs;
// if the uvs have not updated then no point rendering just yet!
if (!uvs)
{
return;
}
// TODO trim??
var aX = sprite.anchor.x;
var aY = sprite.anchor.y;
var w0, w1, h0, h1;
if (texture.trim)
{
// if the sprite is trimmed then we need to add the extra space before transforming the sprite coords..
var trim = texture.trim;
w1 = trim.x - aX * trim.width;
w0 = w1 + texture.crop.width;
h1 = trim.y - aY * trim.height;
h0 = h1 + texture.crop.height;
}
else
{
w0 = (texture._frame.width ) * (1-aX);
w1 = (texture._frame.width ) * -aX;
h0 = texture._frame.height * (1-aY);
h1 = texture._frame.height * -aY;
}
var index = this.currentBatchSize * this.vertByteSize;
var worldTransform = sprite.worldTransform;
var a = worldTransform.a;
var b = worldTransform.b;
var c = worldTransform.c;
var d = worldTransform.d;
var tx = worldTransform.tx;
var ty = worldTransform.ty;
var colors = this.colors;
var positions = this.positions;
if (this.renderer.roundPixels)
{
// xy
positions[index] = a * w1 + c * h1 + tx | 0;
positions[index+1] = d * h1 + b * w1 + ty | 0;
// xy
positions[index+5] = a * w0 + c * h1 + tx | 0;
positions[index+6] = d * h1 + b * w0 + ty | 0;
// xy
positions[index+10] = a * w0 + c * h0 + tx | 0;
positions[index+11] = d * h0 + b * w0 + ty | 0;
// xy
positions[index+15] = a * w1 + c * h0 + tx | 0;
positions[index+16] = d * h0 + b * w1 + ty | 0;
}
else
{
// xy
positions[index] = a * w1 + c * h1 + tx;
positions[index+1] = d * h1 + b * w1 + ty;
// xy
positions[index+5] = a * w0 + c * h1 + tx;
positions[index+6] = d * h1 + b * w0 + ty;
// xy
positions[index+10] = a * w0 + c * h0 + tx;
positions[index+11] = d * h0 + b * w0 + ty;
// xy
positions[index+15] = a * w1 + c * h0 + tx;
positions[index+16] = d * h0 + b * w1 + ty;
}
// uv
positions[index+2] = uvs.x0;
positions[index+3] = uvs.y0;
// uv
positions[index+7] = uvs.x1;
positions[index+8] = uvs.y1;
// uv
positions[index+12] = uvs.x2;
positions[index+13] = uvs.y2;
// uv
positions[index+17] = uvs.x3;
positions[index+18] = uvs.y3;
// color and alpha
var tint = sprite.tint;
colors[index+4] = colors[index+9] = colors[index+14] = colors[index+19] = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16) + (sprite.worldAlpha * 255 << 24);
// increment the batchsize
this.sprites[this.currentBatchSize++] = sprite;
};
/**
* Renders the content and empties the current batch.
*
*/
SpriteRenderer.prototype.flush = function ()
{
// If the batch is length 0 then return as there is nothing to draw
if (this.currentBatchSize === 0)
{
return;
}
var gl = this.renderer.gl;
var shader;
// upload the verts to the buffer
if (this.currentBatchSize > ( this.size * 0.5 ) )
{
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertices);
}
else
{
var view = this.positions.subarray(0, this.currentBatchSize * this.vertByteSize);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, view);
}
var nextTexture, nextBlendMode, nextShader;
var batchSize = 0;
var start = 0;
var currentBaseTexture = null;
var currentBlendMode = this.renderer.blendModeManager.currentBlendMode;
var currentShader = null;
var blendSwap = false;
var shaderSwap = false;
var sprite;
for (var i = 0, j = this.currentBatchSize; i < j; i++)
{
sprite = this.sprites[i];
nextTexture = sprite._texture.baseTexture;
nextBlendMode = sprite.blendMode;
nextShader = sprite.shader || this.shader;
blendSwap = currentBlendMode !== nextBlendMode;
shaderSwap = currentShader !== nextShader; // should I use uuidS???
if (currentBaseTexture !== nextTexture || blendSwap || shaderSwap)
{
this.renderBatch(currentBaseTexture, batchSize, start);
start = i;
batchSize = 0;
currentBaseTexture = nextTexture;
if (blendSwap)
{
currentBlendMode = nextBlendMode;
this.renderer.blendModeManager.setBlendMode( currentBlendMode );
}
if (shaderSwap)
{
currentShader = nextShader;
shader = currentShader.shaders ? currentShader.shaders[gl.id] : currentShader;
if (!shader)
{
shader = currentShader.getShader(this.renderer);
}
// set shader function???
this.renderer.shaderManager.setShader(shader);
//TODO - i KNOW this can be optimised! Once v3 is stable il look at this next...
shader.uniforms.projectionMatrix.value = this.renderer.currentRenderTarget.projectionMatrix.toArray(true);
//Make this a little more dynamic / intelligent!
shader.syncUniforms();
//TODO investigate some kind of texture state managment??
// need to make sure this texture is the active one for all the batch swaps..
gl.activeTexture(gl.TEXTURE0);
// both thease only need to be set if they are changing..
// set the projection
//gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, this.renderer.currentRenderTarget.projectionMatrix.toArray(true));
}
}
batchSize++;
}
this.renderBatch(currentBaseTexture, batchSize, start);
// then reset the batch!
this.currentBatchSize = 0;
};
/**
* Draws the currently batches sprites.
*
* @private
* @param texture {Texture}
* @param size {number}
* @param startIndex {number}
*/
SpriteRenderer.prototype.renderBatch = function (texture, size, startIndex)
{
if (size === 0)
{
return;
}
var gl = this.renderer.gl;
if (!texture._glTextures[gl.id])
{
this.renderer.updateTexture(texture);
}
else
{
// bind the current texture
gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]);
}
// now draw those suckas!
gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2);
// increment the draw count
this.renderer.drawCount++;
};
/**
* Starts a new sprite batch.
*
*/
SpriteRenderer.prototype.start = function ()
{
var gl = this.renderer.gl;
// bind the main texture
// bind the buffers
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
// this is the same for each shader?
var stride = this.vertByteSize;
gl.vertexAttribPointer(this.shader.attributes.aVertexPosition, 2, gl.FLOAT, false, stride, 0);
gl.vertexAttribPointer(this.shader.attributes.aTextureCoord, 2, gl.FLOAT, false, stride, 2 * 4);
// color attributes will be interpreted as unsigned bytes and normalized
gl.vertexAttribPointer(this.shader.attributes.aColor, 4, gl.UNSIGNED_BYTE, true, stride, 4 * 4);
};
/**
* Destroys the SpriteBatch.
*
*/
SpriteRenderer.prototype.destroy = function ()
{
this.renderer.gl.deleteBuffer(this.vertexBuffer);
this.renderer.gl.deleteBuffer(this.indexBuffer);
this.shader.destroy();
this.renderer = null;
this.vertices = null;
this.positions = null;
this.colors = null;
this.indices = null;
this.vertexBuffer = null;
this.indexBuffer = null;
this.currentBaseTexture = null;
this.drawing = false;
this.textures = null;
this.blendModes = null;
this.shaders = null;
this.sprites = null;
this.shader = null;
};
},{"../../const":12,"../../renderers/webgl/WebGLRenderer":38,"../../renderers/webgl/shaders/Shader":50,"../../renderers/webgl/utils/ObjectRenderer":52}],58:[function(require,module,exports){
var utils = require('../utils'),
CONST = require('../const');
/**
* A texture stores the information that represents an image. All textures have a base texture.
*
* @class
* @mixes eventTarget
* @memberof PIXI
* @param source {Image|Canvas} the source object of the texture.
* @param [scaleMode=scaleModes.DEFAULT] {number} See {@link SCALE_MODES} for possible values
* @param resolution {number} the resolution of the texture for devices with different pixel ratios
*/
function BaseTexture(source, scaleMode, resolution)
{
this.uuid = utils.uuid();
/**
* The Resolution of the texture.
*
* @member {number}
*/
this.resolution = resolution || 1;
/**
* The width of the base texture set when the image has loaded
*
* @member {number}
* @readOnly
*/
this.width = 100;
/**
* The height of the base texture set when the image has loaded
*
* @member {number}
* @readOnly
*/
this.height = 100;
// TODO docs
// used to store the actual dimensions of the source
/**
* Used to store the actual width of the source of this texture
*
* @member {number}
* @readOnly
*/
this.realWidth = 100;
/**
* Used to store the actual height of the source of this texture
*
* @member {number}
* @readOnly
*/
this.realHeight = 100;
/**
* The scale mode to apply when scaling this texture
*
* @member {{number}}
* @default scaleModes.LINEAR
*/
this.scaleMode = scaleMode || CONST.SCALE_MODES.DEFAULT;
/**
* Set to true once the base texture has successfully loaded.
*
* This is never true if the underlying source fails to load or has no texture data.
*
* @member {boolean}
* @readOnly
*/
this.hasLoaded = false;
/**
* Set to true if the source is currently loading.
*
* If an Image source is loading the 'loaded' or 'error' event will be
* dispatched when the operation ends. An underyling source that is
* immediately-available bypasses loading entirely.
*
* @member {boolean}
* @readonly
*/
this.isLoading = false;
/**
* The image source that is used to create the texture.
*
* TODO: Make this a setter that calls loadSource();
*
* @member {Image|Canvas}
* @readonly
*/
this.source = null; // set in loadSource, if at all
/**
* Controls if RGB channels should be pre-multiplied by Alpha (WebGL only)
*
* @member {boolean}
* @default true
*/
this.premultipliedAlpha = true;
/**
* @member {string}
*/
this.imageUrl = null;
/**
* Wether or not the texture is a power of two, try to use power of two textures as much as you can
* @member {boolean}
* @private
*/
this.isPowerOfTwo = false;
// used for webGL
/**
*
* Set this to true if a mipmap of this texture needs to be generated. This value needs to be set before the texture is used
* Also the texture must be a power of two size to work
*
* @member {boolean}
*/
this.mipmap = false;
/**
* A map of renderer IDs to webgl textures
*
* @member {object<number, WebGLTexture>}
* @private
*/
this._glTextures = [];
// if no source passed don't try to load
if (source)
{
this.loadSource(source);
}
/**
* Fired when a not-immediately-available source finishes loading.
*
* @event loaded
* @protected
*/
/**
* Fired when a not-immediately-available source fails to load.
*
* @event error
* @protected
*/
}
BaseTexture.prototype.constructor = BaseTexture;
module.exports = BaseTexture;
utils.eventTarget.mixin(BaseTexture.prototype);
/**
* Updates the texture on all the webgl renderers.
*
* @fires update
*/
BaseTexture.prototype.update = function () {
this.emit('update', this);
};
/**
* Load a source.
*
* If the source is not-immediately-available, such as an image that needs to be
* downloaded, then the 'loaded' or 'error' event will be dispatched in the future
* and `hasLoaded` will remain false after this call.
*
* The logic state after calling `loadSource` directly or indirectly (eg. `fromImage`, `new BaseTexture`) is:
*
* if (texture.hasLoaded)
{
* // texture ready for use
* } else if (texture.isLoading)
{
* // listen to 'loaded' and/or 'error' events on texture
* } else {
* // not loading, not going to load UNLESS the source is reloaded
* // (it may still make sense to listen to the events)
* }
*
* @protected
* @param source {Image|Canvas} the source object of the texture.
*/
BaseTexture.prototype.loadSource = function (source)
{
var wasLoading = this.isLoading;
this.hasLoaded = false;
this.isLoading = false;
if (wasLoading && this.source)
{
this.source.onload = null;
this.source.onerror = null;
}
this.source = source;
// Apply source if loaded. Otherwise setup appropriate loading monitors.
if ((this.source.complete || this.source.getContext) && this.source.width && this.source.height)
{
this._sourceLoaded();
}
else if (!source.getContext)
{
// Image fail / not ready
this.isLoading = true;
var scope = this;
source.onload = function ()
{
source.onload = null;
source.onerror = null;
if (!scope.isLoading)
{
return;
}
scope.isLoading = false;
scope._sourceLoaded();
scope.emit('loaded', scope);
};
source.onerror = function ()
{
source.onload = null;
source.onerror = null;
if (!scope.isLoading)
{
return;
}
scope.isLoading = false;
scope.emit('error', scope);
};
// Per http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element
// "The value of `complete` can thus change while a script is executing."
// So complete needs to be re-checked after the callbacks have been added..
// NOTE: complete will be true if the image has no src so best to check if the src is set.
if (source.complete && source.src)
{
this.isLoading = false;
// ..and if we're complete now, no need for callbacks
source.onload = null;
source.onerror = null;
if (source.width && source.height)
{
this._sourceLoaded();
// If any previous subscribers possible
if (wasLoading)
{
this.emit('loaded', this);
}
}
else
{
// If any previous subscribers possible
if (wasLoading)
{
this.emit('error', this);
}
}
}
}
};
/**
* Used internally to update the width, height, and some other tracking vars once
* a source has successfully loaded.
*
* @private
*/
BaseTexture.prototype._sourceLoaded = function ()
{
this.hasLoaded = true;
this.realWidth = this.source.naturalWidth || this.source.width;
this.realHeight = this.source.naturalHeight || this.source.height;
this.width = this.realWidth / this.resolution;
this.height = this.realHeight / this.resolution;
this.isPowerOfTwo = utils.isPowerOfTwo(this.width, this.height);
this.update();
};
/**
* Destroys this base texture
*
*/
BaseTexture.prototype.destroy = function ()
{
if (this.imageUrl)
{
delete utils.BaseTextureCache[this.imageUrl];
delete utils.TextureCache[this.imageUrl];
this.imageUrl = null;
if (!navigator.isCocoonJS)
{
this.source.src = '';
}
}
else if (this.source && this.source._pixiId)
{
delete utils.BaseTextureCache[this.source._pixiId];
}
this.source = null;
this.dispose();
};
/**
* Frees the texture from WebGL memory without destroying this texture object.
* This means you can still use the texture later which will upload it to GPU
* memory again.
*
*/
BaseTexture.prototype.dispose = function ()
{
this.emit('dispose', this);
};
/**
* Changes the source image of the texture.
* The original source must be an Image element.
*
* @param newSrc {string} the path of the image
*/
BaseTexture.prototype.updateSourceImage = function (newSrc)
{
this.source.src = newSrc;
this.loadSource(this.source);
};
/**
* Helper function that creates a base texture from the given image url.
* If the image is not in the base texture cache it will be created and loaded.
*
* @static
* @param imageUrl {string} The image url of the texture
* @param [crossorigin=(auto)] {boolean} Should use anonymous CORS? Defaults to true if the URL is not a data-URI.
* @param [scaleMode=scaleModes.DEFAULT] {number} See {@link SCALE_MODES} for possible values
* @return BaseTexture
*/
BaseTexture.fromImage = function (imageUrl, crossorigin, scaleMode)
{
var baseTexture = utils.BaseTextureCache[imageUrl];
if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0)
{
crossorigin = true;
}
if (!baseTexture)
{
// new Image() breaks tex loading in some versions of Chrome.
// See https://code.google.com/p/chromium/issues/detail?id=238071
var image = new Image();//document.createElement('img');
if (crossorigin)
{
image.crossOrigin = '';
}
baseTexture = new BaseTexture(image, scaleMode);
baseTexture.imageUrl = imageUrl;
image.src = imageUrl;
utils.BaseTextureCache[imageUrl] = baseTexture;
// if there is an @2x at the end of the url we are going to assume its a highres image
baseTexture.resolution = utils.getResolutionOfUrl(imageUrl);
}
return baseTexture;
};
/**
* Helper function that creates a base texture from the given canvas element.
*
* @static
* @param canvas {Canvas} The canvas element source of the texture
* @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values
* @return BaseTexture
*/
BaseTexture.fromCanvas = function (canvas, scaleMode)
{
if (!canvas._pixiId)
{
canvas._pixiId = 'canvas_' + utils.uuid();
}
var baseTexture = utils.BaseTextureCache[canvas._pixiId];
if (!baseTexture)
{
baseTexture = new BaseTexture(canvas, scaleMode);
utils.BaseTextureCache[canvas._pixiId] = baseTexture;
}
return baseTexture;
};
},{"../const":12,"../utils":66}],59:[function(require,module,exports){
var BaseTexture = require('./BaseTexture'),
Texture = require('./Texture'),
RenderTarget = require('../renderers/webgl/utils/RenderTarget'),
FilterManager = require('../renderers/webgl/managers/FilterManager'),
CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'),
math = require('../math'),
CONST = require('../const'),
tempMatrix = new math.Matrix();
/**
* A RenderTexture is a special texture that allows any Pixi display object to be rendered to it.
*
* __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded
* otherwise black rectangles will be drawn instead.
*
* A RenderTexture takes a snapshot of any Display Object given to its render method. The position
* and rotation of the given Display Objects is ignored. For example:
*
* ```js
* var renderTexture = new PIXI.RenderTexture(800, 600);
* var sprite = PIXI.Sprite.fromImage("spinObj_01.png");
*
* sprite.position.x = 800/2;
* sprite.position.y = 600/2;
* sprite.anchor.x = 0.5;
* sprite.anchor.y = 0.5;
*
* renderTexture.render(sprite);
* ```
*
* The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual
* position a Container should be used:
*
* ```js
* var doc = new Container();
*
* doc.addChild(sprite);
*
* renderTexture.render(doc); // Renders to center of renderTexture
* ```
*
* @class
* @extends Texture
* @memberof PIXI
* @param renderer {CanvasRenderer|WebGLRenderer} The renderer used for this RenderTexture
* @param [width=100] {number} The width of the render texture
* @param [height=100] {number} The height of the render texture
* @param [scaleMode] {number} See {@link SCALE_MODES} for possible values
* @param [resolution=1] {number} The resolution of the texture being generated
*/
function RenderTexture(renderer, width, height, scaleMode, resolution)
{
if (!renderer)
{
throw new Error('Unable to create RenderTexture, you must pass a renderer into the constructor.');
}
width = width || 100;
height = height || 100;
resolution = resolution || CONST.RESOLUTION;
/**
* The base texture object that this texture uses
*
* @member {BaseTexture}
*/
var baseTexture = new BaseTexture();
baseTexture.width = width;
baseTexture.height = height;
baseTexture.resolution = resolution;
baseTexture.scaleMode = scaleMode || CONST.SCALE_MODES.DEFAULT;
baseTexture.hasLoaded = true;
Texture.call(this,
baseTexture,
new math.Rectangle(0, 0, width, height)
);
/**
* The with of the render texture
*
* @member {number}
*/
this.width = width;
/**
* The height of the render texture
*
* @member {number}
*/
this.height = height;
/**
* The Resolution of the texture.
*
* @member {number}
*/
this.resolution = resolution;
/**
* The framing rectangle of the render texture
*
* @member {Rectangle}
*/
//this._frame = new math.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution);
/**
* This is the area of the BaseTexture image to actually copy to the Canvas / WebGL when rendering,
* irrespective of the actual frame size or placement (which can be influenced by trimmed texture atlases)
*
* @member {Rectangle}
*/
//this.crop = new math.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution);
/**
* Draw/render the given DisplayObject onto the texture.
*
* The displayObject and descendents are transformed during this operation.
* If `updateTransform` is true then the transformations will be restored before the
* method returns. Otherwise it is up to the calling code to correctly use or reset
* the transformed display objects.
*
* The display object is always rendered with a worldAlpha value of 1.
*
* @method
* @param displayObject {DisplayObject} The display object to render this texture on
* @param [matrix] {Matrix} Optional matrix to apply to the display object before rendering.
* @param [clear=false] {boolean} If true the texture will be cleared before the displayObject is drawn
* @param [updateTransform=true] {boolean} If true the displayObject's worldTransform/worldAlpha and all children
* transformations will be restored. Not restoring this information will be a little faster.
*/
this.render = null;
/**
* The renderer this RenderTexture uses. A RenderTexture can only belong to one renderer at the moment if its webGL.
*
* @member {CanvasRenderer|WebGLRenderer}
*/
this.renderer = renderer;
if (this.renderer.type === CONST.RENDERER_TYPE.WEBGL)
{
var gl = this.renderer.gl;
this.textureBuffer = new RenderTarget(gl, this.width, this.height, null, this.resolution);//, this.baseTexture.scaleMode);
this.baseTexture._glTextures[gl.id] = this.textureBuffer.texture;
//TODO refactor filter manager.. as really its no longer a manager if we use it here..
this.filterManager = new FilterManager(this.renderer);
this.filterManager.onContextChange();
this.filterManager.resize(width, height);
this.render = this.renderWebGL;
// the creation of a filter manager unbinds the buffers..
this.renderer.currentRenderer.start();
}
else
{
this.render = this.renderCanvas;
this.textureBuffer = new CanvasBuffer(this.width* this.resolution, this.height* this.resolution);
this.baseTexture.source = this.textureBuffer.canvas;
}
/**
* @member {boolean}
*/
this.valid = true;
this._updateUvs();
}
RenderTexture.prototype = Object.create(Texture.prototype);
RenderTexture.prototype.constructor = RenderTexture;
module.exports = RenderTexture;
/**
* Resizes the RenderTexture.
*
* @param width {number} The width to resize to.
* @param height {number} The height to resize to.
* @param updateBase {boolean} Should the baseTexture.width and height values be resized as well?
*/
RenderTexture.prototype.resize = function (width, height, updateBase)
{
if (width === this.width && height === this.height)
{
return;
}
this.valid = (width > 0 && height > 0);
this.width = this._frame.width = this.crop.width = width;
this.height = this._frame.height = this.crop.height = height;
if (updateBase)
{
this.baseTexture.width = this.width;
this.baseTexture.height = this.height;
}
if (this.renderer.type === CONST.RENDERER_TYPE.WEBGL)
{
this.projection.x = this.width / 2;
this.projection.y = -this.height / 2;
}
if (!this.valid)
{
return;
}
this.textureBuffer.resize(this.width * this.resolution, this.height * this.resolution);
if(this.filterManager)
{
this.filterManager.resize(this.width, this.height);
}
};
/**
* Clears the RenderTexture.
*
*/
RenderTexture.prototype.clear = function ()
{
if (!this.valid)
{
return;
}
if (this.renderer.type === CONST.RENDERER_TYPE.WEBGL)
{
this.renderer.gl.bindFramebuffer(this.renderer.gl.FRAMEBUFFER, this.textureBuffer.frameBuffer);
}
this.textureBuffer.clear();
};
/**
* Internal method assigned to the `render` property if using a CanvasRenderer.
*
* @private
* @param displayObject {DisplayObject} The display object to render this texture on
* @param [matrix] {Matrix} Optional matrix to apply to the display object before rendering.
* @param [clear=false] {boolean} If true the texture will be cleared before the displayObject is drawn
* @param [updateTransform=true] {boolean} If true the displayObject's worldTransform/worldAlpha and all children
* transformations will be restored. Not restoring this information will be a little faster.
*/
RenderTexture.prototype.renderWebGL = function (displayObject, matrix, clear, updateTransform)
{
if (!this.valid)
{
return;
}
//TODO this should be true by default
updateTransform = !!updateTransform;
this.textureBuffer.transform = matrix;
// setWorld Alpha to ensure that the object is renderer at full opacity
displayObject.worldAlpha = displayObject.alpha;
if (updateTransform)
{
// reset the matrix of the displatyObject..
displayObject.worldTransform.identity();
displayObject.currentBounds = null;
// Time to update all the children of the displayObject with the new matrix..
var children = displayObject.children;
var i, j;
for (i = 0, j = children.length; i < j; ++i)
{
children[i].updateTransform();
}
}
if (clear)
{
this.textureBuffer.clear();
}
//TODO rename textureBuffer to renderTarget..
var temp = this.renderer.filterManager;
this.renderer.filterManager = this.filterManager;
this.renderer.renderDisplayObject(displayObject, this.textureBuffer);
this.renderer.filterManager = temp;
};
/**
* Internal method assigned to the `render` property if using a CanvasRenderer.
*
* @private
* @param displayObject {DisplayObject} The display object to render this texture on
* @param [matrix] {Matrix} Optional matrix to apply to the display object before rendering.
* @param [clear] {boolean} If true the texture will be cleared before the displayObject is drawn
*/
RenderTexture.prototype.renderCanvas = function (displayObject, matrix, clear, updateTransform)
{
if (!this.valid)
{
return;
}
updateTransform = !!updateTransform;
var cachedWt = displayObject.worldTransform;
var wt = tempMatrix;
wt.identity();
if (matrix)
{
wt.append(matrix);
}
displayObject.worldTransform = wt;
// setWorld Alpha to ensure that the object is renderer at full opacity
displayObject.worldAlpha = 1;
// Time to update all the children of the displayObject with the new matrix..
var children = displayObject.children;
var i, j;
for (i = 0, j = children.length; i < j; ++i)
{
children[i].updateTransform();
}
if (clear)
{
this.textureBuffer.clear();
}
displayObject.worldTransform = cachedWt;
// this.textureBuffer.
var context = this.textureBuffer.context;
var realResolution = this.renderer.resolution;
this.renderer.resolution = this.resolution;
this.renderer.renderDisplayObject(displayObject, context);
this.renderer.resolution = realResolution;
// context.setTransform(1, 0, 0, 1, 0, 0);
// context.fillStyle ="#FF0000"
// context.fillRect(0, 0, 800, 600);
};
/**
* Destroys this texture
*
* @param destroyBase {boolean} Whether to destroy the base texture as well
*/
RenderTexture.prototype.destroy = function ()
{
Texture.prototype.destroy.call(this, true);
this.textureBuffer.destroy();
// destroy the filtermanager..
if(this.filterManager)
{
this.filterManager.destroy();
}
this.renderer = null;
};
/**
* Will return a HTML Image of the texture
*
* @return {Image}
*/
RenderTexture.prototype.getImage = function ()
{
var image = new Image();
image.src = this.getBase64();
return image;
};
/**
* Will return a a base64 encoded string of this texture. It works by calling RenderTexture.getCanvas and then running toDataURL on that.
*
* @return {string} A base64 encoded string of the texture.
*/
RenderTexture.prototype.getBase64 = function ()
{
return this.getCanvas().toDataURL();
};
/**
* Creates a Canvas element, renders this RenderTexture to it and then returns it.
*
* @return {HTMLCanvasElement} A Canvas element with the texture rendered on.
*/
RenderTexture.prototype.getCanvas = function ()
{
if (this.renderer.type === CONST.RENDERER_TYPE.WEBGL)
{
var gl = this.renderer.gl;
var width = this.textureBuffer.width;
var height = this.textureBuffer.height;
var webGLPixels = new Uint8Array(4 * width * height);
gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer);
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
var tempCanvas = new CanvasBuffer(width, height);
var canvasData = tempCanvas.context.getImageData(0, 0, width, height);
canvasData.data.set(webGLPixels);
tempCanvas.context.putImageData(canvasData, 0, 0);
return tempCanvas.canvas;
}
else
{
return this.textureBuffer.canvas;
}
};
},{"../const":12,"../math":22,"../renderers/canvas/utils/CanvasBuffer":34,"../renderers/webgl/managers/FilterManager":43,"../renderers/webgl/utils/RenderTarget":54,"./BaseTexture":58,"./Texture":60}],60:[function(require,module,exports){
var BaseTexture = require('./BaseTexture'),
VideoBaseTexture = require('./VideoBaseTexture'),
TextureUvs = require('./TextureUvs'),
eventTarget = require('../utils/eventTarget'),
math = require('../math'),
utils = require('../utils');
/**
* A texture stores the information that represents an image or part of an image. It cannot be added
* to the display list directly. Instead use it as the texture for a Sprite. If no frame is provided then the whole image is used.
*
* You can directly create a texture from an image and then reuse it multiple times like this :
*
* ```js
* var texture = PIXI.Texture.fromImage('assets/image.png');
* var sprite1 = new PIXI.Sprite(texture);
* var sprite2 = new PIXI.Sprite(texture);
* ```
*
* @class
* @mixes eventTarget
* @memberof PIXI
* @param baseTexture {BaseTexture} The base texture source to create the texture from
* @param [frame] {Rectangle} The rectangle frame of the texture to show
* @param [crop] {Rectangle} The area of original texture
* @param [trim] {Rectangle} Trimmed texture rectangle
* @param [rotate] {boolean} indicates whether the texture should be rotated by 90 degrees ( used by texture packer )
*/
function Texture(baseTexture, frame, crop, trim, rotate)
{
/**
* Does this Texture have any frame data assigned to it?
*
* @member {boolean}
*/
this.noFrame = false;
if (!frame)
{
this.noFrame = true;
frame = new math.Rectangle(0, 0, 1, 1);
}
if (baseTexture instanceof Texture)
{
baseTexture = baseTexture.baseTexture;
}
// console.log(frame);
/**
* The base texture that this texture uses.
*
* @member {BaseTexture}
*/
this.baseTexture = baseTexture;
/**
* The frame specifies the region of the base texture that this texture uses
*
* @member {Rectangle}
* @private
*/
this._frame = frame;
/**
* The texture trim data.
*
* @member {Rectangle}
*/
this.trim = trim;
/**
* This will let the renderer know if the texture is valid. If it's not then it cannot be rendered.
*
* @member {boolean}
*/
this.valid = false;
/**
* This will let a renderer know that a texture has been updated (used mainly for webGL uv updates)
*
* @member {boolean}
*/
this.requiresUpdate = false;
/**
* The WebGL UV data cache.
*
* @member {TextureUvs}
* @private
*/
this._uvs = null;
/**
* The width of the Texture in pixels.
*
* @member {number}
*/
this.width = 0;
/**
* The height of the Texture in pixels.
*
* @member {number}
*/
this.height = 0;
/**
* This is the area of the BaseTexture image to actually copy to the Canvas / WebGL when rendering,
* irrespective of the actual frame size or placement (which can be influenced by trimmed texture atlases)
*
* @member {Rectangle}
*/
this.crop = crop || frame;//new math.Rectangle(0, 0, 1, 1);
/**
* Indicates whether the texture should be rotated by 90 degrees
*
* @private
* @member {boolean}
*/
this.rotate = !!rotate;
if (baseTexture.hasLoaded)
{
if (this.noFrame)
{
frame = new math.Rectangle(0, 0, baseTexture.width, baseTexture.height);
}
this.frame = frame;
}
else
{
baseTexture.addEventListener('loaded', this.onBaseTextureLoaded.bind(this));
}
}
Texture.prototype.constructor = Texture;
module.exports = Texture;
eventTarget.mixin(Texture.prototype);
Object.defineProperties(Texture.prototype, {
frame: {
get: function ()
{
return this._frame;
},
set: function (frame)
{
this._frame = frame;
this.noFrame = false;
this.width = frame.width;
this.height = frame.height;
if (!this.trim && !this.rotate && (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);
}
//this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded;
this.valid = frame && frame.width && frame.height && this.baseTexture.hasLoaded;
if (this.trim)
{
this.width = this.trim.width;
this.height = this.trim.height;
this._frame.width = this.trim.width;
this._frame.height = this.trim.height;
}
else
{
this.crop = frame;
}
if (this.valid)
{
this._updateUvs();
}
}
}
});
/**
* Updates this texture on the gpu.
*
*/
Texture.prototype.update = function ()
{
this.baseTexture.update();
};
/**
* Called when the base texture is loaded
*
* @private
*/
Texture.prototype.onBaseTextureLoaded = function ()
{
var baseTexture = this.baseTexture;
baseTexture.removeEventListener('loaded', this.onLoaded);
// TODO this code looks confusing.. boo to abusing getters and setterss!
if (this.noFrame)
{
this.frame = new math.Rectangle(0, 0, baseTexture.width, baseTexture.height);
}
else
{
this.frame = this._frame;
}
this.emit( 'update', this );
};
/**
* Destroys this texture
*
* @param destroyBase {boolean} Whether to destroy the base texture as well
*/
Texture.prototype.destroy = function (destroyBase)
{
if (destroyBase)
{
this.baseTexture.destroy();
}
this.valid = false;
};
Texture.prototype.clone = function ()
{
return new Texture(this.baseTexture, this.frame, this.crop, this.trim, this.rotate);
};
/**
* Updates the internal WebGL UV cache.
*
* @private
*/
Texture.prototype._updateUvs = function ()
{
if (!this._uvs)
{
this._uvs = new TextureUvs();
}
this._uvs.set(this.crop, this.baseTexture, this.rotate);
};
/**
* Helper function that creates a Texture object from the given image url.
* If the image is not in the texture cache it will be created and loaded.
*
* @static
* @param imageUrl {string} The image url of the texture
* @param crossorigin {boolean} Whether requests should be treated as crossorigin
* @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values
* @return {Texture} The newly created texture
*/
Texture.fromImage = function (imageUrl, crossorigin, scaleMode)
{
var texture = utils.TextureCache[imageUrl];
if (!texture)
{
texture = new Texture(BaseTexture.fromImage(imageUrl, crossorigin, scaleMode));
utils.TextureCache[imageUrl] = texture;
}
return texture;
};
/**
* Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId
* The frame ids are created when a Texture packer file has been loaded
*
* @static
* @param frameId {String} The frame Id of the texture in the cache
* @return {Texture} The newly created texture
*/
Texture.fromFrame = function (frameId)
{
var texture = utils.TextureCache[frameId];
if (!texture)
{
throw new Error('The frameId "' + frameId + '" does not exist in the texture cache');
}
return texture;
};
/**
* Helper function that creates a new Texture based on the given canvas element.
*
* @static
* @param canvas {Canvas} The canvas element source of the texture
* @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values
* @return {Texture}
*/
Texture.fromCanvas = function (canvas, scaleMode)
{
return new Texture(BaseTexture.fromCanvas(canvas, scaleMode));
};
/**
* Helper function that creates a new Texture based on the given video element.
*
* @static
* @param video {HTMLVideoElement}
* @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values
* @return {Texture} A Texture
*/
Texture.fromVideo = function (video, scaleMode)
{
return new Texture(VideoBaseTexture.baseTextureFromVideo(video, scaleMode));
};
Texture.fromVideoUrl = function (videoUrl, scaleMode)
{
return new Texture(VideoBaseTexture.fromUrl(videoUrl, scaleMode));
};
/**
* Adds a texture to the global utils.TextureCache. This cache is shared across the whole PIXI object.
*
* @static
* @param texture {Texture} The Texture to add to the cache.
* @param id {string} The id that the texture will be stored against.
*/
Texture.addTextureToCache = function (texture, id)
{
utils.TextureCache[id] = texture;
};
/**
* Remove a texture from the global utils.TextureCache.
*
* @static
* @param id {string} The id of the texture to be removed
* @return {Texture} The texture that was removed
*/
Texture.removeTextureFromCache = function (id)
{
var texture = utils.TextureCache[id];
delete utils.TextureCache[id];
delete utils.BaseTextureCache[id];
return texture;
};
Texture.emptyTexture = new Texture(new BaseTexture());
},{"../math":22,"../utils":66,"../utils/eventTarget":65,"./BaseTexture":58,"./TextureUvs":61,"./VideoBaseTexture":62}],61:[function(require,module,exports){
/**
* A standard object to store the Uvs of a texture
*
* @class
* @private
*/
function TextureUvs()
{
this.x0 = 0;
this.y0 = 0;
this.x1 = 0;
this.y1 = 0;
this.x2 = 0;
this.y2 = 0;
this.x3 = 0;
this.y3 = 0;
}
module.exports = TextureUvs;
/**
* Sets the texture Uvs based on the given frame information
* @param frame {Rectangle}
* @param baseFrame {Rectangle}
* @param rotate {boolean} Whether or not the frame is rotated
* @private
*/
TextureUvs.prototype.set = function (frame, baseFrame, rotate)
{
var tw = baseFrame.width;
var th = baseFrame.height;
if(rotate)
{
this.x0 = (frame.x + frame.height) / tw;
this.y0 = frame.y / th;
this.x1 = (frame.x + frame.height) / tw;
this.y1 = (frame.y + frame.width) / th;
this.x2 = frame.x / tw;
this.y2 = (frame.y + frame.width) / th;
this.x3 = frame.x / tw;
this.y3 = frame.y / th;
}
else
{
this.x0 = frame.x / tw;
this.y0 = frame.y / th;
this.x1 = (frame.x + frame.width) / tw;
this.y1 = frame.y / th;
this.x2 = (frame.x + frame.width) / tw;
this.y2 = (frame.y + frame.height) / th;
this.x3 = frame.x / tw;
this.y3 = (frame.y + frame.height) / th;
}
};
},{}],62:[function(require,module,exports){
var BaseTexture = require('./BaseTexture'),
utils = require('../utils');
/**
* A texture of a [playing] Video.
*
* Video base textures mimic Pixi BaseTexture.from.... method in their creation process.
*
* This can be used in several ways, such as:
*
* ```js
* var texture = PIXI.VideoBaseTexture.fromUrl('http://mydomain.com/video.mp4');
*
* var texture = PIXI.VideoBaseTexture.fromUrl({ src: 'http://mydomain.com/video.mp4', mime: 'video/mp4' });
*
* var texture = PIXI.VideoBaseTexture.fromUrls(['/video.webm', '/video.mp4']);
*
* var texture = PIXI.VideoBaseTexture.fromUrls([
* { src: '/video.webm', mime: 'video/webm' },
* { src: '/video.mp4', mime: 'video/mp4' }
* ]);
* ```
*
* See the ["deus" demo](http://www.goodboydigital.com/pixijs/examples/deus/).
*
* @class
* @extends BaseTexture
* @memberof PIXI
* @param source {HTMLVideoElement}
* @param [scaleMode] {number} See {@link SCALE_MODES} for possible values
*/
function VideoBaseTexture(source, scaleMode)
{
if (!source)
{
throw new Error('No video source element specified.');
}
// hook in here to check if video is already available.
// BaseTexture looks for a source.complete boolean, plus width & height.
if ((source.readyState === source.HAVE_ENOUGH_DATA || source.readyState === source.HAVE_FUTURE_DATA) && source.width && source.height)
{
source.complete = true;
}
BaseTexture.call(this, source, scaleMode);
/**
* Should the base texture automatically update itself, set to true by default
*
* @member {boolean}
* @default true
*/
this.autoUpdate = false;
this._onUpdate = this._onUpdate.bind(this);
this._onCanPlay = this._onCanPlay.bind(this);
if (!source.complete)
{
source.addEventListener('canplay', this._onCanPlay);
source.addEventListener('canplaythrough', this._onCanPlay);
// started playing..
source.addEventListener('play', this._onPlayStart.bind(this));
source.addEventListener('pause', this._onPlayStop.bind(this));
}
this.__loaded = false;
}
VideoBaseTexture.prototype = Object.create(BaseTexture.prototype);
VideoBaseTexture.prototype.constructor = VideoBaseTexture;
module.exports = VideoBaseTexture;
/**
* The internal update loop of the video base texture, only runs when autoUpdate is set to true
* @private
*/
VideoBaseTexture.prototype._onUpdate = function ()
{
if (this.autoUpdate)
{
window.requestAnimationFrame(this._onUpdate);
this.update();
}
};
/**
* Runs the update loop when the video is ready to play
* @private
*/
VideoBaseTexture.prototype._onPlayStart = function ()
{
if (!this.autoUpdate)
{
window.requestAnimationFrame(this._onUpdate);
this.autoUpdate = true;
}
};
/**
* Fired when a pause event is triggered, stops the update loop
* @private
*/
VideoBaseTexture.prototype._onPlayStop = function ()
{
this.autoUpdate = false;
};
/**
* Fired when the video is loaded and ready to play
* @private
*/
VideoBaseTexture.prototype._onCanPlay = function ()
{
this.hasLoaded = true;
if (this.source)
{
this.source.removeEventListener('canplay', this._onCanPlay);
this.source.removeEventListener('canplaythrough', this._onCanPlay);
this.width = this.source.videoWidth;
this.height = this.source.videoHeight;
this.source.play();
// prevent multiple loaded dispatches..
if (!this.__loaded)
{
this.__loaded = true;
this.emit('loaded', this);
}
}
};
/**
* Destroys this texture
*
*/
VideoBaseTexture.prototype.destroy = function ()
{
if (this.source && this.source._pixiId)
{
utils.BaseTextureCache[ this.source._pixiId ] = null;
delete utils.BaseTextureCache[ this.source._pixiId ];
this.source._pixiId = null;
delete this.source._pixiId;
}
BaseTexture.prototype.destroy.call(this);
};
/**
* Mimic Pixi BaseTexture.from.... method.
*
* @static
* @param video {HTMLVideoElement}
* @param scaleMode {number} See {@link SCALE_MODES} for possible values
* @return {VideoBaseTexture}
*/
VideoBaseTexture.fromVideo = function (video, scaleMode)
{
if (!video._pixiId)
{
video._pixiId = 'video_' + utils.uuid();
}
var baseTexture = utils.BaseTextureCache[video._pixiId];
if (!baseTexture)
{
baseTexture = new VideoBaseTexture(video, scaleMode);
utils.BaseTextureCache[ video._pixiId ] = baseTexture;
}
return baseTexture;
};
/**
* Helper function that creates a new BaseTexture based on the given video element.
* This BaseTexture can then be used to create a texture
*
* @static
* @param videoSrc {string|object|string[]|object[]} The URL(s) for the video.
* @param [videoSrc.src] {string} One of the source urls for the video
* @param [videoSrc.mime] {string} The mimetype of the video (e.g. 'video/mp4'). If not specified
* the url's extension will be used as the second part of the mime type.
* @param scaleMode {number} See {@link SCALE_MODES} for possible values
* @return {VideoBaseTexture}
*/
VideoBaseTexture.fromUrl = function (videoSrc, scaleMode)
{
var video = document.createElement('video');
// array of objects or strings
if (Array.isArray(videoSrc))
{
for (var i = 0; i < videoSrc.length; ++i)
{
video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime));
}
}
// single object or string
else
{
video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime));
}
video.load();
video.play();
return VideoBaseTexture.fromVideo(video, scaleMode);
};
VideoBaseTexture.fromUrls = VideoBaseTexture.fromUrl;
function createSource(path, type)
{
if (!type)
{
type = 'video/' + path.substr(path.lastIndexOf('.') + 1);
}
var source = document.createElement('source');
source.src = path;
source.type = type;
return source;
}
},{"../utils":66,"./BaseTexture":58}],63:[function(require,module,exports){
/**
* Creates an homogenous object for tracking events so users can know what to expect.
*
* @class
* @memberof PIXI.utils
* @param target {object} The target object that the event is called on
* @param name {string} The string name of the event that was triggered
* @param data {object} Arbitrary event data to pass along
*/
function EventData(target, name, data)
{
// for duck typing in the ".on()" function
this.__isEventObject = true;
/**
* Tracks the state of bubbling propagation. Do not
* set this directly, instead use `event.stopPropagation()`
*
* @member {boolean}
* @private
* @readonly
*/
this.stopped = false;
/**
* Tracks the state of sibling listener propagation. Do not
* set this directly, instead use `event.stopImmediatePropagation()`
*
* @member {boolean}
* @private
* @readonly
*/
this.stoppedImmediate = false;
/**
* The original target the event triggered on.
*
* @member {object}
* @readonly
*/
this.target = target;
/**
* The string name of the event that this represents.
*
* @member {string}
* @readonly
*/
this.type = name;
/**
* The data that was passed in with this event.
*
* @member {object}
* @readonly
*/
this.data = data;
/**
* The timestamp when the event occurred.
*
* @member {number}
* @readonly
*/
this.timeStamp = Date.now();
}
EventData.prototype.constructor = EventData;
module.exports = EventData;
/**
* Stops the propagation of events up the scene graph (prevents bubbling).
*
*/
EventData.prototype.stopPropagation = function stopPropagation()
{
this.stopped = true;
};
/**
* Stops the propagation of events to sibling listeners (no longer calls any listeners).
*
*/
EventData.prototype.stopImmediatePropagation = function stopImmediatePropagation()
{
this.stoppedImmediate = true;
};
},{}],64:[function(require,module,exports){
//TODO: Have Graphics use https://github.com/mattdesl/shape2d
// and https://github.com/mattdesl/shape2d-triangulate instead of custom code.
/*
PolyK library
url: http://polyk.ivank.net
Released under MIT licence.
Copyright (c) 2012 Ivan Kuckir
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
This is an amazing lib!
Slightly modified by Mat Groves (matgroves.com);
*/
/**
* Based on the Polyk library http://polyk.ivank.net released under MIT licence.
* This is an amazing lib!
* Slightly modified by Mat Groves (matgroves.com);
*
* @memberof PIXI.utils
*/
var PolyK = module.exports = {};
/**
* Triangulates shapes for webGL graphic fills.
*
*/
PolyK.Triangulate = function (p)
{
var sign = true;
var n = p.length >> 1;
if (n < 3) return [];
var tgs = [];
var avl = [];
for (var i = 0; i < n; i++) avl.push(i);
i = 0;
var al = n;
while (al > 3)
{
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];
var bx = p[2*i1], by = p[2*i1+1];
var cx = p[2*i2], cy = p[2*i2+1];
var earFound = false;
if (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;
if (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)
{
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 null;
}
}
}
tgs.push(avl[0], avl[1], avl[2]);
return tgs;
};
/**
* Checks whether a point is within a triangle
*
* @param px {number} x coordinate of the point to test
* @param py {number} y coordinate of the point to test
* @param ax {number} x coordinate of the a point of the triangle
* @param ay {number} y coordinate of the a point of the triangle
* @param bx {number} x coordinate of the b point of the triangle
* @param by {number} y coordinate of the b point of the triangle
* @param cx {number} x coordinate of the c point of the triangle
* @param cy {number} y coordinate of the c point of the triangle
* @private
* @return {boolean}
*/
PolyK._PointInTriangle = function (px, py, ax, ay, bx, by, cx, cy)
{
var v0x = cx-ax;
var v0y = cy-ay;
var v1x = bx-ax;
var v1y = by-ay;
var v2x = px-ax;
var v2y = py-ay;
var dot00 = v0x*v0x+v0y*v0y;
var dot01 = v0x*v1x+v0y*v1y;
var dot02 = v0x*v2x+v0y*v2y;
var dot11 = v1x*v1x+v1y*v1y;
var dot12 = v1x*v2x+v1y*v2y;
var invDenom = 1 / (dot00 * dot11 - dot01 * dot01);
var u = (dot11 * dot02 - dot01 * dot12) * invDenom;
var v = (dot00 * dot12 - dot01 * dot02) * invDenom;
// Check if point is in triangle
return (u >= 0) && (v >= 0) && (u + v < 1);
};
/**
* Checks whether a shape is convex
*
* @private
* @return {boolean}
*/
PolyK._convex = function (ax, ay, bx, by, cx, cy, sign)
{
return ((ay-by)*(cx-bx) + (bx-ax)*(cy-by) >= 0) === sign;
};
},{}],65:[function(require,module,exports){
var EventData = require('./EventData');
var tempEventObject = new EventData(null, null, {});
/**
* Mixins event emitter functionality to an object.
*
* @mixin
* @memberof PIXI.utils
* @example
* function MyEmitter() {}
*
* eventTarget.mixin(MyEmitter.prototype);
*
* var em = new MyEmitter();
* em.emit('eventName', 'some data', 'some more data', {}, null, ...);
*/
function eventTarget(obj)
{
/**
* Return a list of assigned event listeners.
*
* @memberof eventTarget
* @param eventName {string} The events that should be listed.
* @return {Array} An array of listener functions
*/
obj.listeners = function listeners(eventName)
{
this._listeners = this._listeners || {};
return this._listeners[eventName] ? this._listeners[eventName].slice() : [];
};
/**
* Emit an event to all registered event listeners.
*
* @memberof eventTarget
* @alias dispatchEvent
* @param eventName {string} The name of the event.
* @return {boolean} Indication if we've emitted an event.
*/
obj.emit = obj.dispatchEvent = function emit(eventName, data)
{
this._listeners = this._listeners || {};
// fast return when there are no listeners
if (!this._listeners[eventName])
{
return;
}
//backwards compat with old method ".emit({ type: 'something' })"
//lets not worry about old ways of using stuff for v3
/*
if (typeof eventName === 'object')
{
data = eventName;
eventName = eventName.type;
}
*/
//ensure we are using a real pixi event
//instead of creating a new object lets use an the temp one ( save new creation for each event )
if ( !data || !data.__isEventObject )
{
tempEventObject.target= this;
tempEventObject.type = eventName;
tempEventObject.data = data;
data = tempEventObject;
}
//iterate the listeners
var listeners = this._listeners[eventName].slice(0),
length = listeners.length,
fn = listeners[0],
i;
for (i = 0; i < length; fn = listeners[++i])
{
//call the event listener scope is currently determined by binding the listener
//way faster than 'call'
fn(data);
//if "stopImmediatePropagation" is called, stop calling sibling events
if (data.stoppedImmediate)
{
return this;
}
}
//if "stopPropagation" is called then don't bubble the event
if (data.stopped)
{
return this;
}
return this;
};
/**
* Register a new EventListener for the given event.
*
* @memberof eventTarget
* @alias addEventListener
* @param eventName {string} Name of the event.
* @param callback {Functon} fn Callback function.
*/
obj.on = obj.addEventListener = function on(eventName, fn)
{
this._listeners = this._listeners || {};
(this._listeners[eventName] = this._listeners[eventName] || [])
.push(fn);
return this;
};
/**
* Add an EventListener that's only called once.
*
* @memberof eventTarget
* @param eventName {string} Name of the event.
* @param callback {Function} Callback function.
*/
obj.once = function once(eventName, fn)
{
this._listeners = this._listeners || {};
var self = this;
function onceHandlerWrapper()
{
fn.apply(self.off(eventName, onceHandlerWrapper), arguments);
}
onceHandlerWrapper._originalHandler = fn;
return this.on(eventName, onceHandlerWrapper);
};
/**
* Remove event listeners.
*
* @memberof eventTarget
* @alias removeEventListener
* @param eventName {string} The event we want to remove.
* @param callback {Function} The listener that we need to find.
*/
obj.off = obj.removeEventListener = function off(eventName, fn)
{
this._listeners = this._listeners || {};
if (!this._listeners[eventName])
{
return this;
}
var list = this._listeners[eventName],
i = fn ? list.length : 0;
while (i-- > 0)
{
if (list[i] === fn || list[i]._originalHandler === fn)
{
list.splice(i, 1);
}
}
if (list.length === 0)
{
// delete causes deoptimization
// lets set it to null
this._listeners[eventName] = null;
}
return this;
};
/**
* Remove all listeners or only the listeners for the specified event.
*
* @memberof eventTarget
* @param eventName {string} The event you want to remove all listeners for.
*/
obj.removeAllListeners = function removeAllListeners(eventName)
{
this._listeners = this._listeners || {};
if (!this._listeners[eventName])
{
return this;
}
// delete causes deoptimization
// lets set it to null
this._listeners[eventName] = null;
return this;
};
}
module.exports = {
/**
* Mixes in the properties of the eventTarget into another object
*
* @param object {object} The obj to mix into
*/
mixin: function mixin(obj)
{
eventTarget(obj);
}
};
},{"./EventData":63}],66:[function(require,module,exports){
var CONST = require('../const');
/**
* @namespace PIXI.utils
*/
var utils = module.exports = {
_uid: 0,
_saidHello: false,
RAFramePolyfill:require('./requestAnimationFramePolyfill'),
EventData: require('./EventData'),
eventTarget: require('./eventTarget'),
pluginTarget: require('./pluginTarget'),
PolyK: require('./PolyK'),
/**
* Gets the next uuid
*
* @return {number} The next uuid to use.
*/
uuid: function ()
{
return ++utils._uid;
},
/**
* Converts a hex color number to an [R, G, B] array
*
* @param hex {number}
* @return {number[]} An array representing the [R, G, B] of the color.
*/
hex2rgb: function (hex, out)
{
out = out || [];
out[0] = (hex >> 16 & 0xFF) / 255;
out[1] = (hex >> 8 & 0xFF) / 255;
out[2] = (hex & 0xFF) / 255;
return out;
},
/**
* Converts a hex color number to a string.
*
* @param hex {number}
* @return {string} The string color.
*/
hex2string: function (hex)
{
hex = hex.toString(16);
hex = '000000'.substr(0, 6 - hex.length) + hex;
return '#' + hex;
},
/**
* Converts a color as an [R, G, B] array to a hex number
*
* @param rgb {number[]}
* @return {number} The color number
*/
rgb2hex: function (rgb)
{
return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255);
},
/**
* Checks whether the Canvas BlendModes are supported by the current browser
*
* @return {boolean} whether they are supported
*/
canUseNewCanvasBlendModes: function ()
{
if (typeof document === 'undefined')
{
return false;
}
var pngHead = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABAQMAAADD8p2OAAAAA1BMVEX/';
var pngEnd = 'AAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==';
var magenta = new Image();
magenta.src = pngHead + 'AP804Oa6' + pngEnd;
var yellow = new Image();
yellow.src = pngHead + '/wCKxvRF' + pngEnd;
var canvas = document.createElement('canvas');
canvas.width = 6;
canvas.height = 1;
var context = canvas.getContext('2d');
context.globalCompositeOperation = 'multiply';
context.drawImage(magenta, 0, 0);
context.drawImage(yellow, 2, 0);
var data = context.getImageData(2,0,1,1).data;
return (data[0] === 255 && data[1] === 0 && data[2] === 0);
},
/**
* Given a number, this function returns the closest number that is a power of two
* this function is taken from Starling Framework as its pretty neat ;)
*
* @param number {number}
* @return {number} the closest number that is a power of two
*/
getNextPowerOfTwo: function (number)
{
// see: http://en.wikipedia.org/wiki/Power_of_two#Fast_algorithm_to_check_if_a_positive_number_is_a_power_of_two
if (number > 0 && (number & (number - 1)) === 0)
{
return number;
}
else
{
var result = 1;
while (result < number)
{
result <<= 1;
}
return result;
}
},
/**
* checks if the given width and height make a power of two rectangle
*
* @param width {number}
* @param height {number}
* @return {boolean}
*/
isPowerOfTwo: function (width, height)
{
return (width > 0 && (width & (width - 1)) === 0 && height > 0 && (height & (height - 1)) === 0);
},
/**
* get the resolution of an asset by looking for the prefix
* used by spritesheets and image urls
*
* @param url {string} the image path
* @return {boolean}
*/
getResolutionOfUrl: function (url)
{
var resolution = CONST.RETINA_PREFIX.exec(url);
if (resolution)
{
return parseFloat(resolution[1]);
}
return 1;
},
/**
* Logs out the version and renderer information for this running instance of PIXI.
* If you don't want to see this message you can set `PIXI.utils._saidHello = true;`
* so the library thinks it already said it. Keep in mind that doing that will forever
* makes you a jerk face.
*
* @param {string} type - The string renderer type to log.
* @constant
* @static
*/
sayHello: function (type)
{
if (utils._saidHello)
{
return;
}
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
{
var args = [
'%c %c %c Pixi.js ' + CONST.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ',
'background: #ff66a5',
'background: #ff66a5',
'color: #ff66a5; background: #030307;',
'background: #ff66a5',
'background: #ffc3dc',
'background: #ff66a5',
'color: #ff2424; background: #fff',
'color: #ff2424; background: #fff',
'color: #ff2424; background: #fff'
];
window.console.log.apply(console, args); //jshint ignore:line
}
else if (window.console)
{
window.console.log('Pixi.js ' + CONST.VERSION + ' - ' + type + ' - http://www.pixijs.com/'); //jshint ignore:line
}
utils._saidHello = true;
},
TextureCache: {},
BaseTextureCache: {}
};
},{"../const":12,"./EventData":63,"./PolyK":64,"./eventTarget":65,"./pluginTarget":67,"./requestAnimationFramePolyfill":68}],67:[function(require,module,exports){
/**
* Mixins functionality to make an object have "plugins".
*
* @mixin
* @memberof PIXI.utils
* @param obj {object} The object to mix into.
* @example
* function MyObject() {}
*
* pluginTarget.mixin(MyObject);
*/
function pluginTarget(obj)
{
obj.__plugins = {};
/**
* Adds a plugin to an object
*
* @param pluginName {string} The events that should be listed.
* @param ctor {Object} ?? @alvin
*/
obj.registerPlugin = function (pluginName, ctor)
{
obj.__plugins[pluginName] = ctor;
};
/**
* Instantiates all the plugins of this object
*
*/
obj.prototype.initPlugins = function ()
{
this.plugins = this.plugins || {};
for (var o in obj.__plugins)
{
this.plugins[o] = new (obj.__plugins[o])(this);
}
};
/**
* Removes all the plugins of this object
*
*/
obj.prototype.destroyPlugins = function ()
{
for (var o in this.plugins)
{
this.plugins[o].destroy();
this.plugins[o] = null;
}
this.plugins = null;
};
}
module.exports = {
/**
* Mixes in the properties of the pluginTarget into another object
*
* @param object {object} The obj to mix into
*/
mixin: function mixin(obj)
{
pluginTarget(obj);
}
};
},{}],68:[function(require,module,exports){
(function(window) {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
})(window);
},{}],69:[function(require,module,exports){
var core = require('./core'),
extras = require('./extras'),
mesh = require('./mesh'),
text = require('./text');
core.SpriteBatch = function ()
{
window.console.warn('SpriteBatch does not exist any more, please use the new ParticleContainer instead.');
};
core.AssetLoader = function () {
window.console.warn('The loader system was overhauled in pixi v3, please see the new PIXI.Loader class.');
};
Object.defineProperties(core, {
Stage: {
get: function ()
{
window.console.warn('You do not need to use a PIXI Stage any more, you can simply render any container.');
return new core.Container();
}
},
DisplayObjectContainer: {
get: function ()
{
window.console.warn('DisplayObjectContainer has been shortened to Container, please use Container from now on');
return new core.Container();
}
},
Strip: {
get: function ()
{
window.console.warn('The Strip class has been renamed to Mesh, please use Mesh from now on');
return new mesh.Mesh(texture);
}
}
});
core.Sprite.prototype.setTexture = function (texture)
{
this.texture = texture;
window.console.warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;');
};
text.BitmapText.prototype.setText = function (text)
{
this.text = text;
window.console.warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';');
};
text.Text.prototype.setText = function (text)
{
this.text = text;
window.console.warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';');
};
module.exports = {};
},{"./core":19,"./extras":75,"./mesh":116,"./text":124}],70:[function(require,module,exports){
var core = require('../core'),
Ticker = require('./Ticker');
/**
* A MovieClip is a simple way to display an animation depicted by a list of textures.
*
* ```js
* var alienImages = ["image_sequence_01.png","image_sequence_02.png","image_sequence_03.png","image_sequence_04.png"];
* var textureArray = [];
*
* for (var i=0; i < 4; i++)
* {
* var texture = PIXI.Texture.fromImage(alienImages[i]);
* textureArray.push(texture);
* };
*
* var mc = new PIXI.MovieClip(textureArray);
* ```
*
* @class
* @extends Sprite
* @memberof PIXI.extras
* @param textures {Texture[]} an array of {Texture} objects that make up the animation
*/
function MovieClip(textures)
{
core.Sprite.call(this, textures[0]);
/**
* The array of textures that make up the animation
*
* @member {Texture[]}
*/
this._textures = textures;
/**
* The speed that the MovieClip will play at. Higher is faster, lower is slower
*
* @member {number}
* @default 1
*/
this.animationSpeed = 1;
/**
* Whether or not the movie clip repeats after playing.
*
* @member {boolean}
* @default true
*/
this.loop = true;
/**
* Function to call when a MovieClip finishes playing
*
* @method
* @memberof MovieClip#
*/
this.onComplete = null;
/**
* The MovieClips current frame index (this may not have to be a whole number)
*
* @member {number}
* @default 0
* @readonly
*/
this.currentFrame = 0;
/**
* Indicates if the MovieClip is currently playing
*
* @member {boolean}
* @readonly
*/
this.playing = false;
/**
* private cache of the bound function
*
* @member {function}
*/
this._updateBound = this.update.bind(this);
}
// constructor
MovieClip.prototype = Object.create(core.Sprite.prototype);
MovieClip.prototype.constructor = MovieClip;
module.exports = MovieClip;
Object.defineProperties(MovieClip.prototype, {
/**
* totalFrames is the total number of frames in the MovieClip. This is the same as number of textures
* assigned to the MovieClip.
*
* @member
* @memberof MovieClip#
* @default 0
* @readonly
*/
totalFrames: {
get: function()
{
return this._textures.length;
}
},
/**
* The array of textures used for this MovieClip
*
* @member
* @memberof MovieClip#
*
*/
textures: {
get: function ()
{
return this._textures;
},
set: function (value)
{
this._textures = value;
this.texture = this._textures[Math.floor(this.currentFrame) % this._textures.length];
}
}
});
/**
* Stops the MovieClip
*
*/
MovieClip.prototype.stop = function ()
{
if(!this.playing)
{
return;
}
this.playing = false;
Ticker.off('tick', this._updateBound);
};
/**
* Plays the MovieClip
*
*/
MovieClip.prototype.play = function ()
{
if(this.playing)
{
return;
}
this.playing = true;
Ticker.on('tick', this._updateBound);
};
/**
* Stops the MovieClip and goes to a specific frame
*
* @param frameNumber {number} frame index to stop at
*/
MovieClip.prototype.gotoAndStop = function (frameNumber)
{
this.stop();
this.currentFrame = frameNumber;
var round = Math.floor(this.currentFrame);
this.texture = this._textures[round % this._textures.length];
};
/**
* Goes to a specific frame and begins playing the MovieClip
*
* @param frameNumber {number} frame index to start at
*/
MovieClip.prototype.gotoAndPlay = function (frameNumber)
{
this.currentFrame = frameNumber;
this.play();
};
/*
* Updates the object transform for rendering
* @private
*/
MovieClip.prototype.update = function ( event )
{
this.currentFrame += this.animationSpeed * event.data.deltaTime;
var floor = Math.floor(this.currentFrame);
if (floor < 0)
{
if (this.loop)
{
this.currentFrame += this._textures.length;
this.texture = this._textures[this.currentFrame];
}
else
{
this.gotoAndStop(0);
if (this.onComplete)
{
this.onComplete();
}
}
}
else if (this.loop || floor < this._textures.length)
{
this.texture = this._textures[floor % this._textures.length];
}
else if (floor >= this._textures.length)
{
this.gotoAndStop(this.textures.length - 1);
if (this.onComplete)
{
this.onComplete();
}
}
};
/*
* Stops the MovieClip and destroys it
*
*/
MovieClip.prototype.destroy = function ( )
{
this.stop();
core.Sprite.prototype.destroy.call(this);
};
/**
* A short hand way of creating a movieclip from an array of frame ids
*
* @static
* @param frames {string[]} the array of frames ids the movieclip will use as its texture frames
*/
MovieClip.fromFrames = function (frames)
{
var textures = [];
for (var i = 0; i < frames.length; ++i)
{
textures.push(new core.Texture.fromFrame(frames[i]));
}
return new MovieClip(textures);
};
/**
* A short hand way of creating a movieclip from an array of image ids
*
* @static
* @param images {string[]} the array of image urls the movieclip will use as its texture frames
*/
MovieClip.fromImages = function (images)
{
var textures = [];
for (var i = 0; i < images.length; ++i)
{
textures.push(new core.Texture.fromImage(images[i]));
}
return new MovieClip(textures);
};
},{"../core":19,"./Ticker":71}],71:[function(require,module,exports){
var eventTarget = require('../core/utils/eventTarget'),
EventData = require('../core/utils/EventData');
/**
* A Ticker class that runs an update loop that other objects listen to
*
* @class
* @memberof PIXI.extras
*/
var Ticker = function()
{
this.updateBind = this.update.bind(this);
/**
* Whether or not this ticker runs
*
* @member {boolean}
*/
this.active = false;
/**
* the event data for this ticker to dispatch the tick event
*
* @member {EventData}
*/
this.eventData = new EventData( this, 'tick', { deltaTime:1 } );
/**
* The deltaTime
*
* @member {number}
*/
this.deltaTime = 1;
/**
* The time between two frames
*
* @member {number}
*/
this.timeElapsed = 0;
/**
* The time at the last frame
*
* @member {number}
*/
this.lastTime = 0;
/**
* The speed
*
* @member {number}
*/
this.speed = 1;
// auto start ticking!
this.start();
};
eventTarget.mixin(Ticker.prototype);
/**
* Starts the ticker, automatically called by the constructor
*
*/
Ticker.prototype.start = function()
{
if(this.active)
{
return;
}
this.active = true;
requestAnimationFrame(this.updateBind);
};
/**
* Stops the ticker
*
*/
Ticker.prototype.stop = function()
{
if(!this.active)
{
return;
}
this.active = false;
};
/**
* The update loop, fires the 'tick' event
*
*/
Ticker.prototype.update = function()
{
if(this.active)
{
requestAnimationFrame(this.updateBind);
var currentTime = new Date().getTime();
var timeElapsed = currentTime - this.lastTime;
// cap the time!
if(timeElapsed > 100)
{
timeElapsed = 100;
}
this.deltaTime = (timeElapsed * 0.06);
this.deltaTime *= this.speed;
this.eventData.data.deltaTime = this.deltaTime;
this.emit( 'tick', this.eventData );
this.lastTime = currentTime;
}
};
module.exports = new Ticker();
},{"../core/utils/EventData":63,"../core/utils/eventTarget":65}],72:[function(require,module,exports){
var core = require('../core'),
TextureUvs = require('../core/textures/TextureUvs'),
RenderTexture = require('../core/textures/RenderTexture'),
// a sprite use dfor rendering textures..
tempSprite = new core.Sprite(),
tempPoint = new core.math.Point();
/**
* A tiling sprite is a fast way of rendering a tiling image
*
* @class
* @extends Sprite
* @memberof PIXI.extras
* @param texture {Texture} the texture of the tiling sprite
* @param width {number} the width of the tiling sprite
* @param height {number} the height of the tiling sprite
*/
function TilingSprite(texture, width, height)
{
core.Sprite.call(this, texture);
/**
* The scaling of the image that is being tiled
*
* @member {Point}
*/
this.tileScale = new core.math.Point(1,1);
/**
* The offset position of the image that is being tiled
*
* @member {Point}
*/
this.tilePosition = new core.math.Point(0,0);
///// private
/**
* The with of the tiling sprite
*
* @member {number}
* @private
*/
this._width = width || 100;
/**
* The height of the tiling sprite
*
* @member {number}
* @private
*/
this._height = height || 100;
/**
* A point that represents the scale of the texture object
*
* @member {Point}
* @private
*/
this._tileScaleOffset = new core.math.Point(1,1);
/**
*
*
* @member {boolean}
* @private
*/
this._tilingTexture = null;
/**
*
*
* @member {boolean}
* @private
*/
this._refreshTexture = false;
/**
* An internal WebGL UV cache.
*
* @member {TextureUvs}
* @private
*/
this._uvs = new TextureUvs();
}
TilingSprite.prototype = Object.create(core.Sprite.prototype);
TilingSprite.prototype.constructor = TilingSprite;
module.exports = TilingSprite;
Object.defineProperties(TilingSprite.prototype, {
/**
* The width of the sprite, setting this will actually modify the scale to achieve the value set
*
* @member {number}
* @memberof TilingSprite#
*/
width: {
get: function ()
{
return this._width;
},
set: function (value)
{
this._width = value;
}
},
/**
* The height of the TilingSprite, setting this will actually modify the scale to achieve the value set
*
* @member {number}
* @memberof TilingSprite#
*/
height: {
get: function ()
{
return this._height;
},
set: function (value)
{
this._height = value;
}
}
});
TilingSprite.prototype._onTextureUpdate = function ()
{
return;
};
/**
* Renders the object using the WebGL renderer
*
* @param renderer {WebGLRenderer}
*/
TilingSprite.prototype._renderWebGL = function (renderer)
{
if (!this._tilingTexture || this._refreshTexture)
{
this.generateTilingTexture(renderer, this.texture, true);
}
// tweak our texture temporarily..
var texture = this._tilingTexture;
if(!texture)
{
return;
}
var uvs = this._uvs;
this.tilePosition.x %= texture.baseTexture.width / this._tileScaleOffset.x;
this.tilePosition.y %= texture.baseTexture.height / this._tileScaleOffset.y;
var offsetX = this.tilePosition.x/(texture.baseTexture.width / this._tileScaleOffset.x);
var offsetY = this.tilePosition.y/(texture.baseTexture.height / this._tileScaleOffset.y);
var scaleX = (this._width / texture.baseTexture.width) * this._tileScaleOffset.x;
var scaleY = (this._height / texture.baseTexture.height) * this._tileScaleOffset.y;
scaleX /= this.tileScale.x;
scaleY /= this.tileScale.y;
uvs.x0 = 0 - offsetX;
uvs.y0 = 0 - offsetY;
uvs.x1 = (1 * scaleX) - offsetX;
uvs.y1 = 0 - offsetY;
uvs.x2 = (1 * scaleX) - offsetX;
uvs.y2 = (1 * scaleY) - offsetY;
uvs.x3 = 0 - offsetX;
uvs.y3 = (1 * scaleY) - offsetY;
var tempUvs = texture._uvs;
var tempWidth = texture._frame.width;
var tempHeight = texture._frame.height;
texture._uvs = uvs;
texture._frame.width = this.width;
texture._frame.height = this.height;
renderer.setObjectRenderer(renderer.plugins.sprite);
renderer.plugins.sprite.render(this);
texture._uvs = tempUvs;
texture._frame.width = tempWidth;
texture._frame.height = tempHeight;
};
/**
* Renders the object using the Canvas renderer
*
* @param renderer {CanvasRenderer} a reference to the canvas renderer
*/
TilingSprite.prototype._renderCanvas = function (renderer)
{
var context = renderer.context;
context.globalAlpha = this.worldAlpha;
var transform = this.worldTransform;
var resolution = renderer.resolution;
context.setTransform(transform.a * resolution,
transform.b * resolution,
transform.c * resolution,
transform.d * resolution,
transform.tx * resolution,
transform.ty * resolution);
if (!this.__tilePattern || this._refreshTexture)
{
this.generateTilingTexture(false);
if (this._tilingTexture)
{
this.__tilePattern = context.createPattern(this._tilingTexture.baseTexture.source, 'repeat');
}
else
{
return;
}
}
// check blend mode
if (this.blendMode !== renderer.currentBlendMode)
{
renderer.currentBlendMode = this.blendMode;
context.globalCompositeOperation = renderer.blendModes[renderer.currentBlendMode];
}
var tilePosition = this.tilePosition;
var tileScale = this.tileScale;
tilePosition.x %= this._tilingTexture.baseTexture.width;
tilePosition.y %= this._tilingTexture.baseTexture.height;
// offset - make sure to account for the anchor point..
context.scale(tileScale.x,tileScale.y);
context.translate(tilePosition.x + (this.anchor.x * -this._width), tilePosition.y + (this.anchor.y * -this._height));
context.fillStyle = this.__tilePattern;
context.fillRect(-tilePosition.x,
-tilePosition.y,
this._width / tileScale.x,
this._height / tileScale.y);
context.translate(-tilePosition.x + (this.anchor.x * this._width), -tilePosition.y + (this.anchor.y * this._height));
context.scale(1 / tileScale.x, 1 / tileScale.y);
};
/**
* Returns the framing rectangle of the sprite as a Rectangle object
*
* @return {Rectangle} the framing rectangle
*/
TilingSprite.prototype.getBounds = function ()
{
var width = this._width;
var height = this._height;
var w0 = width * (1-this.anchor.x);
var w1 = width * -this.anchor.x;
var h0 = height * (1-this.anchor.y);
var h1 = height * -this.anchor.y;
var worldTransform = this.worldTransform;
var a = worldTransform.a;
var b = worldTransform.b;
var c = worldTransform.c;
var d = worldTransform.d;
var tx = worldTransform.tx;
var ty = worldTransform.ty;
var x1 = a * w1 + c * h1 + tx;
var y1 = d * h1 + b * w1 + ty;
var x2 = a * w0 + c * h1 + tx;
var y2 = d * h1 + b * w0 + ty;
var x3 = a * w0 + c * h0 + tx;
var y3 = d * h0 + b * w0 + ty;
var x4 = a * w1 + c * h0 + tx;
var y4 = d * h0 + b * w1 + ty;
var minX,
maxX,
minY,
maxY;
minX = x1;
minX = x2 < minX ? x2 : minX;
minX = x3 < minX ? x3 : minX;
minX = x4 < minX ? x4 : minX;
minY = y1;
minY = y2 < minY ? y2 : minY;
minY = y3 < minY ? y3 : minY;
minY = y4 < minY ? y4 : minY;
maxX = x1;
maxX = x2 > maxX ? x2 : maxX;
maxX = x3 > maxX ? x3 : maxX;
maxX = x4 > maxX ? x4 : maxX;
maxY = y1;
maxY = y2 > maxY ? y2 : maxY;
maxY = y3 > maxY ? y3 : maxY;
maxY = y4 > maxY ? y4 : maxY;
var bounds = this._bounds;
bounds.x = minX;
bounds.width = maxX - minX;
bounds.y = minY;
bounds.height = maxY - minY;
// store a reference so that if this function gets called again in the render cycle we do not have to recalculate
this._currentBounds = bounds;
return bounds;
};
/**
* When the texture is updated, this event will fire to update the scale and frame
*
* @param event
* @private
*/
TilingSprite.prototype.onTextureUpdate = function ()
{
// overriding the sprite version of this!
};
/**
* Creates the tiling texture
* @param renderer {CanvasRenderer|WebGLRenderer} a reference to the current renderer
* @param texture {Texture} The texture to use to generate the tiling texture
* @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two
*/
TilingSprite.prototype.generateTilingTexture = function (renderer, texture, forcePowerOfTwo)
{
if (!this.texture.baseTexture.hasLoaded)
{
return;
}
texture = this.originalTexture || this._texture;
var frame = texture.frame;
var targetWidth, targetHeight;
// Check that the frame is the same size as the base texture.
var isFrame = frame.width !== texture.baseTexture.width || frame.height !== texture.baseTexture.height;
if ((forcePowerOfTwo && !texture.baseTexture.isPowerOfTwo) || isFrame)
{
targetWidth = core.utils.getNextPowerOfTwo(frame.width);
targetHeight = core.utils.getNextPowerOfTwo(frame.height);
tempSprite.texture = texture;
//TODO not create a new one each time you refresh
var renderTexture = new RenderTexture(renderer, targetWidth, targetHeight, texture.baseTexture.scaleMode, texture.baseTexture.resolution);
tempSprite.worldTransform.a = (targetWidth + 1) / (frame.width);
tempSprite.worldTransform.d = (targetHeight + 1) / (frame.height);
// fixes the odd fuzzy alpha line that happens..
tempSprite.worldTransform.tx -= 0.5;
tempSprite.worldTransform.ty -= 0.5;
var cachedRenderTarget = renderer.currentRenderTarget;
renderTexture.render( tempSprite, tempSprite.worldTransform, true, false );
renderer.setRenderTarget(cachedRenderTarget);
this._tileScaleOffset.x = targetWidth / frame.width;
this._tileScaleOffset.y = targetHeight / frame.height;
this._tilingTexture = renderTexture;
}
else
{
if (this._tilingTexture && this._tilingTexture.isTiling)
{
// destroy the tiling texture!
// TODO could store this somewhere?
this._tilingTexture.destroy(true);
}
this._tileScaleOffset.x = 1;
this._tileScaleOffset.y = 1;
this._tilingTexture = texture;
}
this._refreshTexture = false;
this.originalTexture = this.texture;
this._texture = this._tilingTexture;
};
/**
* Checks if a point is inside this tiling sprite
* @param point {Point} the point to check
*/
TilingSprite.prototype.containsPoint = function( point )
{
this.worldTransform.applyInverse(point, tempPoint);
var width = this._width;
var height = this._height;
var x1 = -width * this.anchor.x;
var y1;
if ( tempPoint.x > x1 && tempPoint.x < x1 + width )
{
y1 = -height * this.anchor.y;
if ( tempPoint.y > y1 && tempPoint.y < y1 + height )
{
return true;
}
}
return false;
};
/**
* Destroys this tiling sprite
*
*/
TilingSprite.prototype.destroy = function () {
core.Sprite.prototype.destroy.call(this);
this.tileScale = null;
this._tileScaleOffset = null;
this.tilePosition = null;
this._tilingTexture.destroy(true);
this._tilingTexture = null;
this._uvs = null;
};
/**
* Helper function that creates a tiling sprite that will use a texture from the TextureCache based on the frameId
* The frame ids are created when a Texture packer file has been loaded
*
* @static
* @param frameId {String} The frame Id of the texture in the cache
* @return {TilingSprite} A new TilingSprite using a texture from the texture cache matching the frameId
* @param width {number} the width of the tiling sprite
* @param height {number} the height of the tiling sprite
*/
TilingSprite.fromFrame = function (frameId,width,height)
{
var texture = core.utils.TextureCache[frameId];
if (!texture)
{
throw new Error('The frameId "' + frameId + '" does not exist in the texture cache ' + this);
}
return new TilingSprite(texture,width,height);
};
/**
* Helper function that creates a sprite that will contain a texture based on an image url
* If the image is not in the texture cache it will be loaded
*
* @static
* @param imageId {String} The image url of the texture
* @param width {number} the width of the tiling sprite
* @param height {number} the height of the tiling sprite
* @param [crossorigin=(auto)] {boolean} if you want to specify the cross-origin parameter
* @param [scaleMode=scaleModes.DEFAULT] {number} if you want to specify the scale mode, see {@link SCALE_MODES} for possible values
* @return {TilingSprite} A new TilingSprite using a texture from the texture cache matching the image id
*/
TilingSprite.fromImage = function (imageId, width, height, crossorigin, scaleMode)
{
return new TilingSprite(core.Texture.fromImage(imageId, crossorigin, scaleMode),width,height);
};
},{"../core":19,"../core/textures/RenderTexture":59,"../core/textures/TextureUvs":61}],73:[function(require,module,exports){
var math = require('../core/math'),
RenderTexture = require('../core/textures/RenderTexture'),
DisplayObject = require('../core/display/DisplayObject'),
Sprite = require('../core/sprites/Sprite'),
_tempMatrix = new math.Matrix();
DisplayObject.prototype._cacheAsBitmap = false;
DisplayObject.prototype._originalRenderWebGL = null;
DisplayObject.prototype._originalRenderCanvas = null;
DisplayObject.prototype._originalUpdateTransform = null;
DisplayObject.prototype._originalHitTest = null;
DisplayObject.prototype._cachedSprite = null;
Object.defineProperties(DisplayObject.prototype, {
/**
* Set this to true if you want this display object to be cached as a bitmap.
* This basically takes a snap shot of the display object as it is at that moment. It can provide a performance benefit for complex static displayObjects.
* To remove simply set this property to 'null'
*
* @member {boolean}
* @memberof DisplayObject#
*/
cacheAsBitmap: {
get: function ()
{
return this._cacheAsBitmap;
},
set: function (value)
{
if(this._cacheAsBitmap === value)
{
return;
}
this._cacheAsBitmap = value;
if(value)
{
this._originalRenderWebGL = this.renderWebGL;
this._originalRenderCanvas = this.renderCanvas;
this._originalUpdateTransform = this.updateTransform;
this._originalGetBounds = this.getBounds;
this._originalContainesPoint = this.containsPoint;
this.renderWebGL = this._renderCachedWebGL;
this.renderCanvas = this._renderCachedCanvas;
}
else
{
if(this._cachedSprite)
{
this._destroyCachedDisplayObject();
}
this.renderWebGL = this._originalRenderWebGL;
this.renderCanvas = this._originalRenderCanvas;
this.getBounds = this._originalGetBounds;
this.updateTransform = this._originalUpdateTransform;
this.containsPoint = this._originalContainsPoint;
}
}
}
});
/**
* Renders a cached version of the sprite with WebGL
*
* @param renderer {WebGLRenderer} the WebGL renderer
* @private
*/
DisplayObject.prototype._renderCachedWebGL = function(renderer)
{
this._initCachedDisplayObject( renderer );
this._cachedSprite.worldAlpha = this.worldAlpha;
renderer.setObjectRenderer(renderer.plugins.sprite);
renderer.plugins.sprite.render( this._cachedSprite );
};
/**
* Prepares the WebGL renderer to cache the sprite
*
* @param renderer {WebGLRenderer} the WebGL renderer
* @private
*/
DisplayObject.prototype._initCachedDisplayObject = function( renderer )
{
if(this._cachedSprite)
{
return;
}
// first we flush anything left in the renderer (otherwise it would get rendered to the cached texture)
renderer.currentRenderer.flush();
//this.filters= [];
// next we find the dimensions of the untransformed object
// this function also calls updatetransform on all its children as part of the measuring. This means we don't need to update the transform again in this function
// TODO pass an object to clone too? saves having to create a new one each time!
var bounds = this.getLocalBounds().clone();
// add some padding!
if(this._filters)
{
var padding = this._filters[0].padding;
bounds.x -= padding;
bounds.y -= padding;
bounds.width += padding * 2;
bounds.height += padding * 2;
}
// for now we cache the current renderTarget that the webGL renderer is currently using.
// this could be more elegent..
var cachedRenderTarget = renderer.currentRenderTarget;
// We also store the filter stack - I will definitely look to change how this works a little later down the line.
var stack = renderer.filterManager.filterStack;
// this renderTexture will be used to store the cached DisplayObject
var renderTexture = new RenderTexture(renderer, bounds.width | 0, bounds.height | 0);
// need to set //
var m = _tempMatrix;
m.tx = -bounds.x;
m.ty = -bounds.y;
// set all properties to there original so we can render to a texture
this.renderWebGL = this._originalRenderWebGL;
renderTexture.render(this, m, true);
// now restore the state be setting the new properties
renderer.setRenderTarget(cachedRenderTarget);
renderer.filterManager.filterStack = stack;
this.renderWebGL = this._renderCachedWebGL;
this.updateTransform = this.displayObjectUpdateTransform;
this.getBounds = this._getCachedBounds;
// create our cached sprite
this._cachedSprite = new Sprite(renderTexture);
this._cachedSprite.worldTransform = this.worldTransform;
this._cachedSprite.anchor.x = -( bounds.x / bounds.width );
this._cachedSprite.anchor.y = -( bounds.y / bounds.height );
// map the hit test..
this.containsPoint = this._cachedSprite.containsPoint.bind(this._cachedSprite);
};
/**
* Renders a cached version of the sprite with canvas
*
* @param renderer {CanvasRenderer} the Canvas renderer
* @private
*/
DisplayObject.prototype._renderCachedCanvas = function(renderer)
{
this._initCachedDisplayObjectCanvas( renderer );
this._cachedSprite.worldAlpha = this.worldAlpha;
this._cachedSprite.renderCanvas(renderer);
};
//TODO this can be the same as the webGL verison.. will need to do a little tweaking first though..
/**
* Prepares the Canvas renderer to cache the sprite
*
* @param renderer {CanvasRenderer} the Canvas renderer
* @private
*/
DisplayObject.prototype._initCachedDisplayObjectCanvas = function( renderer )
{
if(this._cachedSprite)
{
return;
}
//get bounds actually transforms the object for us already!
var bounds = this.getLocalBounds();
var cachedRenderTarget = renderer.context;
var renderTexture = new RenderTexture(renderer, bounds.width | 0, bounds.height | 0);
// need to set //
var m = _tempMatrix;
m.tx = -bounds.x;
m.ty = -bounds.y;
// set all properties to there original so we can render to a texture
this.renderCanvas = this._originalRenderCanvas;
renderTexture.render(this, m, true);
// now restore the state be setting the new properties
renderer.context = cachedRenderTarget;
this.renderCanvas = this._renderCachedCanvas;
this.updateTransform = this.displayObjectUpdateTransform;
this.getBounds = this._getCachedBounds;
// create our cached sprite
this._cachedSprite = new Sprite(renderTexture);
this._cachedSprite.worldTransform = this.worldTransform;
this._cachedSprite.anchor.x = -( bounds.x / bounds.width );
this._cachedSprite.anchor.y = -( bounds.y / bounds.height );
this.hitTest = this._cachedSprite.hitTest.bind(this._cachedSprite);
};
/**
* Calculates the bounds of the cached sprite
*
* @private
*/
DisplayObject.prototype._getCachedBounds = function()
{
this._cachedSprite._currentBounds = null;
return this._cachedSprite.getBounds();
};
/**
* Destroys the cached sprite.
*
* @private
*/
DisplayObject.prototype._destroyCachedDisplayObject = function()
{
this._cachedSprite._texture.destroy();
this._cachedSprite = null;
};
module.exports = {};
},{"../core/display/DisplayObject":14,"../core/math":22,"../core/sprites/Sprite":56,"../core/textures/RenderTexture":59}],74:[function(require,module,exports){
var DisplayObject = require('../core/display/DisplayObject'),
Container = require('../core/display/Container');
/**
* The instance name of the object.
*
* @member {string}
*/
DisplayObject.prototype.name = null;
/**
* Returns the display object in the container
*
* @param name {string} instance name
* @return {DisplayObject}
*/
Container.prototype.getChildByName = function (name)
{
for (var i = 0; i < this.children.length; i++)
{
if (this.children[i].name === name)
{
return this.children[i];
}
}
return null;
};
module.exports = {};
},{"../core/display/Container":13,"../core/display/DisplayObject":14}],75:[function(require,module,exports){
/**
* @file Main export of the PIXI extras library
* @author Mat Groves <mat@goodboydigital.com>
* @copyright 2013-2015 GoodBoyDigital
* @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License}
*/
/**
* @namespace PIXI.extras
*/
module.exports = {
Ticker: require('./Ticker'),
MovieClip: require('./MovieClip'),
TilingSprite: require('./TilingSprite'),
cacheAsBitmap: require('./cacheAsBitmap'),
getChildByName: require('./getChildByName')
};
},{"./MovieClip":70,"./Ticker":71,"./TilingSprite":72,"./cacheAsBitmap":73,"./getChildByName":74}],76:[function(require,module,exports){
var core = require('../../core');
// TODO (cengler) - The Y is flipped in this shader for some reason.
/**
* @author Vico @vicocotea
* original shader : https://www.shadertoy.com/view/lssGDj by @movAX13h
*/
/**
* An ASCII filter.
*
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
*/
function AsciiFilter()
{
core.AbstractFilter.call(this,
// vertex shader
null,
// fragment shader
"precision mediump float;\n\nuniform vec4 dimensions;\nuniform float pixelSize;\nuniform sampler2D uSampler;\n\nfloat character(float n, vec2 p)\n{\n p = floor(p*vec2(4.0, -4.0) + 2.5);\n if (clamp(p.x, 0.0, 4.0) == p.x && clamp(p.y, 0.0, 4.0) == p.y)\n {\n if (int(mod(n/exp2(p.x + 5.0*p.y), 2.0)) == 1) return 1.0;\n }\n return 0.0;\n}\n\nvoid main()\n{\n vec2 uv = gl_FragCoord.xy;\n\n vec3 col = texture2D(uSampler, floor( uv / pixelSize ) * pixelSize / dimensions.xy).rgb;\n\n float gray = (col.r + col.g + col.b) / 3.0;\n\n float n = 65536.0; // .\n if (gray > 0.2) n = 65600.0; // :\n if (gray > 0.3) n = 332772.0; // *\n if (gray > 0.4) n = 15255086.0; // o\n if (gray > 0.5) n = 23385164.0; // &\n if (gray > 0.6) n = 15252014.0; // 8\n if (gray > 0.7) n = 13199452.0; // @\n if (gray > 0.8) n = 11512810.0; // #\n\n vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);\n col = col * character(n, p);\n\n gl_FragColor = vec4(col, 1.0);\n}\n",
// custom uniforms
{
dimensions: { type: '4fv', value: new Float32Array([0, 0, 0, 0]) },
pixelSize: { type: '1f', value: 8 }
}
);
}
AsciiFilter.prototype = Object.create(core.AbstractFilter.prototype);
AsciiFilter.prototype.constructor = AsciiFilter;
module.exports = AsciiFilter;
Object.defineProperties(AsciiFilter.prototype, {
/**
* The pixel size used by the filter.
*
* @member {number}
* @memberof AsciiFilter#
*/
size: {
get: function ()
{
return this.uniforms.pixelSize.value;
},
set: function (value)
{
this.uniforms.pixelSize.value = value;
}
}
});
},{"../../core":19}],77:[function(require,module,exports){
var core = require('../../core'),
BlurXFilter = require('../blur/BlurXFilter'),
BlurYFilter = require('../blur/BlurYFilter');
/**
* The BloomFilter applies a Gaussian blur to an object.
* The strength of the blur can be set for x- and y-axis separately.
*
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
*/
function BloomFilter()
{
core.AbstractFilter.call(this);
this.blurXFilter = new BlurXFilter();
this.blurYFilter = new BlurYFilter();
this.defaultFilter = new core.AbstractFilter();
}
BloomFilter.prototype = Object.create(core.AbstractFilter.prototype);
BloomFilter.prototype.constructor = BloomFilter;
module.exports = BloomFilter;
BloomFilter.prototype.applyFilter = function (renderer, input, output)
{
var renderTarget = renderer.filterManager.getRenderTarget(true);
//TODO - copyTexSubImage2D could be used here?
this.defaultFilter.applyFilter(renderer, input, output);
this.blurXFilter.applyFilter(renderer, input, renderTarget);
renderer.blendModeManager.setBlendMode(core.CONST.BLEND_MODES.SCREEN);
this.blurYFilter.applyFilter(renderer, renderTarget, output);
renderer.blendModeManager.setBlendMode(core.CONST.BLEND_MODES.NORMAL);
renderer.filterManager.returnRenderTarget(renderTarget);
};
Object.defineProperties(BloomFilter.prototype, {
/**
* Sets the strength of both the blurX and blurY properties simultaneously
*
* @member {number}
* @memberOf BloomFilter#
* @default 2
*/
blur: {
get: function ()
{
return this.blurXFilter.blur;
},
set: function (value)
{
this.blurXFilter.blur = this.blurYFilter.blur = value;
}
},
/**
* Sets the strength of the blurX property
*
* @member {number}
* @memberOf BloomFilter#
* @default 2
*/
blurX: {
get: function ()
{
return this.blurXFilter.blur;
},
set: function (value)
{
this.blurXFilter.blur = value;
}
},
/**
* Sets the strength of the blurY property
*
* @member {number}
* @memberOf BloomFilter#
* @default 2
*/
blurY: {
get: function ()
{
return this.blurYFilter.blur;
},
set: function (value)
{
this.blurYFilter.blur = value;
}
}
});
},{"../../core":19,"../blur/BlurXFilter":79,"../blur/BlurYFilter":80}],78:[function(require,module,exports){
var core = require('../../core'),
BlurXFilter = require('./BlurXFilter'),
BlurYFilter = require('./BlurYFilter');
/**
* The BlurFilter applies a Gaussian blur to an object.
* The strength of the blur can be set for x- and y-axis separately.
*
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
*/
function BlurFilter()
{
core.AbstractFilter.call(this);
this.blurXFilter = new BlurXFilter();
this.blurYFilter = new BlurYFilter();
}
BlurFilter.prototype = Object.create(core.AbstractFilter.prototype);
BlurFilter.prototype.constructor = BlurFilter;
module.exports = BlurFilter;
BlurFilter.prototype.applyFilter = function (renderer, input, output)
{
var renderTarget = renderer.filterManager.getRenderTarget(true);
this.blurXFilter.applyFilter(renderer, input, renderTarget);
this.blurYFilter.applyFilter(renderer, renderTarget, output);
renderer.filterManager.returnRenderTarget(renderTarget);
};
Object.defineProperties(BlurFilter.prototype, {
/**
* Sets the strength of both the blurX and blurY properties simultaneously
*
* @member {number}
* @memberOf BlurFilter#
* @default 2
*/
blur: {
get: function ()
{
return this.blurXFilter.blur;
},
set: function (value)
{
this.padding = value * 0.5;
this.blurXFilter.blur = this.blurYFilter.blur = value;
}
},
/**
* Sets the number of passes for blur. More passes means higher quaility bluring.
*
* @member {number}
* @memberof BlurYFilter#
* @default 1
*/
passes: {
get: function ()
{
return this.blurXFilter.passes;
},
set: function (value)
{
this.blurXFilter.passes = this.blurYFilter.passes = value;
}
},
/**
* Sets the strength of the blurX property
*
* @member {number}
* @memberOf BlurFilter#
* @default 2
*/
blurX: {
get: function ()
{
return this.blurXFilter.blur;
},
set: function (value)
{
this.blurXFilter.blur = value;
}
},
/**
* Sets the strength of the blurY property
*
* @member {number}
* @memberOf BlurFilter#
* @default 2
*/
blurY: {
get: function ()
{
return this.blurYFilter.blur;
},
set: function (value)
{
this.blurYFilter.blur = value;
}
}
});
},{"../../core":19,"./BlurXFilter":79,"./BlurYFilter":80}],79:[function(require,module,exports){
var core = require('../../core');
/**
* The BlurXFilter applies a horizontal Gaussian blur to an object.
*
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
*/
function BlurXFilter()
{
core.AbstractFilter.call(this,
// vertex shader
"attribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\nattribute vec4 aColor;\n\nuniform float strength;\nuniform mat3 projectionMatrix;\n\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\nvarying vec2 vBlurTexCoords[6];\n\nvoid main(void)\n{\n gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0);\n vTextureCoord = aTextureCoord;\n\n vBlurTexCoords[ 0] = aTextureCoord + vec2(-0.012 * strength, 0.0);\n vBlurTexCoords[ 1] = aTextureCoord + vec2(-0.008 * strength, 0.0);\n vBlurTexCoords[ 2] = aTextureCoord + vec2(-0.004 * strength, 0.0);\n vBlurTexCoords[ 3] = aTextureCoord + vec2( 0.004 * strength, 0.0);\n vBlurTexCoords[ 4] = aTextureCoord + vec2( 0.008 * strength, 0.0);\n vBlurTexCoords[ 5] = aTextureCoord + vec2( 0.012 * strength, 0.0);\n\n vColor = vec4(aColor.rgb * aColor.a, aColor.a);\n}\n",
// fragment shader
"precision lowp float;\n\nvarying vec2 vTextureCoord;\nvarying vec2 vBlurTexCoords[6];\nvarying vec4 vColor;\n\nuniform sampler2D uSampler;\n\nvoid main(void)\n{\n gl_FragColor = vec4(0.0);\n\n gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 0])*0.004431848411938341;\n gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 1])*0.05399096651318985;\n gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 2])*0.2419707245191454;\n gl_FragColor += texture2D(uSampler, vTextureCoord )*0.3989422804014327;\n gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 3])*0.2419707245191454;\n gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 4])*0.05399096651318985;\n gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 5])*0.004431848411938341;\n}\n",
// set the uniforms
{
strength: { type: '1f', value: 1 }
}
);
/**
* Sets the number of passes for blur. More passes means higher quaility bluring.
*
* @member {number}
* @memberof BlurXFilter#
* @default 1
*/
this.passes = 1;
this.strength = 4;
}
BlurXFilter.prototype = Object.create(core.AbstractFilter.prototype);
BlurXFilter.prototype.constructor = BlurXFilter;
module.exports = BlurXFilter;
BlurXFilter.prototype.applyFilter = function (renderer, input, output, clear)
{
var shader = this.getShader(renderer);
this.uniforms.strength.value = this.strength / 4 / this.passes * (input.frame.width / input.size.width);
if(this.passes === 1)
{
renderer.filterManager.applyFilter(shader, input, output, clear);
}
else
{
var renderTarget = renderer.filterManager.getRenderTarget(true);
var flip = input;
var flop = renderTarget;
for(var i = 0; i < this.passes-1; i++)
{
renderer.filterManager.applyFilter(shader, flip, flop, clear);
var temp = flop;
flop = flip;
flip = temp;
}
renderer.filterManager.applyFilter(shader, flip, output, clear);
renderer.filterManager.returnRenderTarget(renderTarget);
}
};
Object.defineProperties(BlurXFilter.prototype, {
/**
* Sets the strength of both the blur.
*
* @member {number}
* @memberof BlurXFilter#
* @default 2
*/
blur: {
get: function ()
{
return this.strength;
},
set: function (value)
{
this.padding = value * 0.5;
this.strength = value;
}
},
});
},{"../../core":19}],80:[function(require,module,exports){
var core = require('../../core');
/**
* The BlurYFilter applies a horizontal Gaussian blur to an object.
*
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
*/
function BlurYFilter()
{
core.AbstractFilter.call(this,
// vertex shader
"attribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\nattribute vec4 aColor;\n\nuniform float strength;\nuniform mat3 projectionMatrix;\n\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\nvarying vec2 vBlurTexCoords[6];\n\nvoid main(void)\n{\n gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0);\n vTextureCoord = aTextureCoord;\n\n vBlurTexCoords[ 0] = aTextureCoord + vec2(0.0, -0.012 * strength);\n vBlurTexCoords[ 1] = aTextureCoord + vec2(0.0, -0.008 * strength);\n vBlurTexCoords[ 2] = aTextureCoord + vec2(0.0, -0.004 * strength);\n vBlurTexCoords[ 3] = aTextureCoord + vec2(0.0, 0.004 * strength);\n vBlurTexCoords[ 4] = aTextureCoord + vec2(0.0, 0.008 * strength);\n vBlurTexCoords[ 5] = aTextureCoord + vec2(0.0, 0.012 * strength);\n\n vColor = vec4(aColor.rgb * aColor.a, aColor.a);\n}\n",
// fragment shader
"precision lowp float;\n\nvarying vec2 vTextureCoord;\nvarying vec2 vBlurTexCoords[6];\nvarying vec4 vColor;\n\nuniform sampler2D uSampler;\n\nvoid main(void)\n{\n gl_FragColor = vec4(0.0);\n\n gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 0])*0.004431848411938341;\n gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 1])*0.05399096651318985;\n gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 2])*0.2419707245191454;\n gl_FragColor += texture2D(uSampler, vTextureCoord )*0.3989422804014327;\n gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 3])*0.2419707245191454;\n gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 4])*0.05399096651318985;\n gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 5])*0.004431848411938341;\n}\n",
// set the uniforms
{
strength: { type: '1f', value: 1 }
}
);
this.passes = 1;
this.strength = 4;
}
BlurYFilter.prototype = Object.create(core.AbstractFilter.prototype);
BlurYFilter.prototype.constructor = BlurYFilter;
module.exports = BlurYFilter;
BlurYFilter.prototype.applyFilter = function (renderer, input, output, clear)
{
var shader = this.getShader(renderer);
this.uniforms.strength.value = this.strength / 4 / this.passes * (input.frame.height / input.size.height);
if(this.passes === 1)
{
renderer.filterManager.applyFilter(shader, input, output, clear);
}
else
{
var renderTarget = renderer.filterManager.getRenderTarget(true);
var flip = input;
var flop = renderTarget;
for(var i = 0; i < this.passes-1; i++)
{
renderer.filterManager.applyFilter(shader, flip, flop, clear);
var temp = flop;
flop = flip;
flip = temp;
}
renderer.filterManager.applyFilter(shader, flip, output, clear);
renderer.filterManager.returnRenderTarget(renderTarget);
}
};
Object.defineProperties(BlurYFilter.prototype, {
/**
* Sets the strength of both the blur.
*
* @member {number}
* @memberof BlurYFilter#
* @default 2
*/
blur: {
get: function ()
{
return this.strength;
},
set: function (value)
{
this.padding = value * 0.5;
this.strength = value;
}
},
});
},{"../../core":19}],81:[function(require,module,exports){
var core = require('../../core');
/**
* A Smart Blur Filter.
*
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
*/
function SmartBlurFilter()
{
core.AbstractFilter.call(this,
// vertex shader
null,
// fragment shader
"precision mediump float;\n\nvarying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\nconst vec2 delta = vec2(1.0/10.0, 0.0);\n\nfloat random(vec3 scale, float seed)\n{\n return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);\n}\n\nvoid main(void)\n{\n vec4 color = vec4(0.0);\n float total = 0.0;\n\n float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);\n\n for (float t = -30.0; t <= 30.0; t++)\n {\n float percent = (t + offset - 0.5) / 30.0;\n float weight = 1.0 - abs(percent);\n vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);\n sample.rgb *= sample.a;\n color += sample * weight;\n total += weight;\n }\n\n gl_FragColor = color / total;\n gl_FragColor.rgb /= gl_FragColor.a + 0.00001;\n}\n"
);
}
SmartBlurFilter.prototype = Object.create(core.AbstractFilter.prototype);
SmartBlurFilter.prototype.constructor = SmartBlurFilter;
module.exports = SmartBlurFilter;
},{"../../core":19}],82:[function(require,module,exports){
var core = require('../../core');
/**
* The ColorMatrixFilter class lets you apply a 5x5 matrix transformation on the RGBA
* color and alpha values of every pixel on your displayObject to produce a result
* with a new set of RGBA color and alpha values. It's pretty powerful!
*
* ```js
* var colorMatrix = new PIXI.ColorMatrixFilter();
* container.filters = [colorMatrix];
* colorMatrix.contrast(2);
* ```
* @author Clément Chenebault <clement@goodboydigital.com>
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
*/
function ColorMatrixFilter()
{
core.AbstractFilter.call(this,
// vertex shader
null,
// fragment shader
"precision mediump float;\n\nvarying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\nuniform float m[24];\n\nuniform vec4 d;\n\nvoid main(void)\n{\n \n vec4 c = texture2D(uSampler, vTextureCoord);\n\n\tgl_FragColor.r = m[0] * c.r + m[1] * c.g + m[2] * c.b + m[3] * c.a + m[4];\n\tgl_FragColor.g = m[5] * c.r + m[6] * c.g + m[7] * c.b + m[8] * c.a + m[9];\n\tgl_FragColor.b = m[10] * c.r + m[11] * c.g + m[12] * c.b + m[13] * c.a + m[14];\n\tgl_FragColor.a = c.a;\n}\n",
// custom uniforms
{
m: { type: '1fv', value: [1, 0, 0, 0, 0,
0, 1, 0, 0, 0,
0, 0, 1, 0, 0,
0, 0, 0, 1, 0,
0, 0, 0, 0, 1] },
}
);
}
ColorMatrixFilter.prototype = Object.create(core.AbstractFilter.prototype);
ColorMatrixFilter.prototype.constructor = ColorMatrixFilter;
module.exports = ColorMatrixFilter;
/**
* Transforms current matrix and set the new one
*
* @param matrix {array} (mat 5x5)
* @param multiply {boolean} if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix
*/
ColorMatrixFilter.prototype._loadMatrix = function(matrix, multiply)
{
multiply = !!multiply;
var newMatrix = matrix;
if(multiply)
{
this._multiply(newMatrix, this.uniforms.m.value, matrix);
newMatrix = this._colorMatrix(newMatrix);
}
// set the new matrix
this.uniforms.m.value = newMatrix;
};
/**
* Multiplies two mat5's
*
* @param out {array} (mat 5x5) the receiving matrix
* @param a {array} (mat 5x5) the first operand
* @param b {array} (mat 5x5) the second operand
* @returns out {array} (mat 5x5)
*/
ColorMatrixFilter.prototype._multiply = function (out, a, b) {
// first line
out[0] = a[0]*b[0] + a[1]*b[5] + a[2]*b[10] + a[3]*b[15] + a[4]*b[20];
out[1] = a[0]*b[1] + a[1]*b[6] + a[2]*b[11] + a[3]*b[16] +a[4]*b[21];
out[2] = a[0]*b[2] + a[1]*b[7] + a[2]*b[12] + a[3]*b[17] +a[4]*b[22];
out[3] = a[0]*b[3] + a[1]*b[8] + a[2]*b[13] + a[3]*b[18] +a[4]*b[23];
out[4] = a[0]*b[4] + a[1]*b[9] + a[2]*b[14] + a[3]*b[19]+a[4]*b[24];
// second line
out[5] = a[5]*b[0] + a[6]*b[5] + a[7]*b[10]+ a[8]*b[15]+a[9]*b[20];
out[6] = a[5]*b[1] + a[6]*b[6] + a[7]*b[11]+ a[8]*b[16]+a[9]*b[21];
out[7] = a[5]*b[2] + a[6]*b[7] + a[7]*b[12]+ a[8]*b[17]+a[9]*b[22];
out[8] = a[5]*b[3] + a[6]*b[8] + a[7]*b[13]+ a[8]*b[18]+a[9]*b[23];
out[9] = a[5]*b[4] + a[6]*b[9] + a[7]*b[14]+ a[8]*b[19]+a[9]*b[24];
// third line
out[10] = a[10]*b[0] + a[11]*b[5] + a[12]*b[10]+ a[13]*b[15]+a[14]*b[20];
out[11] = a[10]*b[1] + a[11]*b[6] + a[12]*b[11]+ a[13]*b[16]+a[14]*b[21];
out[12] = a[10]*b[2] + a[11]*b[7] + a[12]*b[12]+ a[13]*b[17]+a[14]*b[22];
out[13] = a[10]*b[3] + a[11]*b[8] + a[12]*b[13]+ a[13]*b[18]+a[14]*b[23];
out[14] = a[10]*b[4] + a[11]*b[9] + a[12]*b[14]+ a[13]*b[19]+a[14]*b[24];
// fourth line
out[15] = a[15]*b[0] + a[16]*b[5] + a[17]*b[10]+ a[18]*b[15]+a[19]*b[20];
out[16] = a[15]*b[1] + a[16]*b[6] + a[17]*b[11]+ a[18]*b[16]+a[19]*b[21];
out[17] = a[15]*b[2] + a[16]*b[7] + a[17]*b[12]+ a[18]*b[17]+a[19]*b[22];
out[18] = a[15]*b[3] + a[16]*b[8] + a[17]*b[13]+ a[18]*b[18]+a[19]*b[23];
out[19] = a[15]*b[4] + a[16]*b[9] + a[17]*b[14]+ a[18]*b[19]+a[19]*b[24];
// fifth line
out[20] = a[20]*b[0] + a[21]*b[5] + a[22]*b[10]+ a[23]*b[15]+a[24]*b[20];
out[21] = a[20]*b[1] + a[21]*b[6] + a[22]*b[11]+ a[23]*b[16]+a[24]*b[21];
out[22] = a[20]*b[2] + a[21]*b[7] + a[22]*b[12]+ a[23]*b[17]+a[24]*b[22];
out[23] = a[20]*b[3] + a[21]*b[8] + a[22]*b[13]+ a[23]*b[18]+a[24]*b[23];
out[24] = a[20]*b[4] + a[21]*b[9] + a[22]*b[14]+ a[23]*b[19]+a[24]*b[24];
return out;
};
/**
* Create a Float32 Array and normalize the offset component to 0-1
*
* @param matrix {array} (mat 5x5)
* @return m { array } (mat 5x5) with all values between 0-1
*/
ColorMatrixFilter.prototype._colorMatrix = function( matrix )
{
// Create a Float32 Array and normalize the offset component to 0-1
var m = new Float32Array(matrix);
m[4] /= 255;
m[9] /= 255;
m[14] /= 255;
m[19] /= 255;
return m;
};
/**
* Adjusts brightness
*
* Multiply the current matrix
* @param b {number} value of the brigthness (0 is black)
* @param multiply {boolean} refer to ._loadMatrix() method
*/
ColorMatrixFilter.prototype.brightness = function(b, multiply)
{
var matrix = [
b, 0, 0, 0, 0,
0, b, 0, 0, 0,
0, 0, b, 0, 0,
0, 0, 0, 1, 0,
0, 0, 0, 0, 1
];
this._loadMatrix(matrix, multiply);
};
/**
* Set the matrices in grey scales
*
* Multiply the current matrix
* @param scale {number} value of the grey (0 is black)
* @param multiply {boolean} refer to ._loadMatrix() method
*/
ColorMatrixFilter.prototype.greyscale = function(scale, multiply)
{
var matrix = [
scale, scale, scale, 0, 0,
scale, scale, scale, 0, 0,
scale, scale, scale, 0, 0,
0,0,0,1,0,
0,0,0,0,1
];
this._loadMatrix(matrix, multiply);
};
/**
* Set the black and white matrice
* Multiply the current matrix
*
* @param multiply {boolean} refer to ._loadMatrix() method
*/
ColorMatrixFilter.prototype.blackAndWhite = function(multiply)
{
var matrix = [
0.3, 0.6, 0.1, 0, 0,
0.3, 0.6, 0.1, 0, 0,
0.3, 0.6, 0.1, 0, 0,
0, 0, 0, 1, 0,
0, 0, 0, 0, 1
];
this._loadMatrix(matrix, multiply);
};
/**
* Set the hue propertie of the color
*
* Multiply the current matrix
* @param rotation {number} in degrees
* @param multiply {boolean} refer to ._loadMatrix() method
*/
ColorMatrixFilter.prototype.hue = function(rotation, multiply)
{
rotation = (rotation || 0)/180 * Math.PI;
var cos = Math.cos(rotation),
sin = Math.sin(rotation);
// luminanceRed, luminanceGreen, luminanceBlue
var lumR = 0.213, // or 0.3086
lumG = 0.715, // or 0.6094
lumB = 0.072; // or 0.0820
var matrix = [
lumR+cos*(1-lumR)+sin*(-lumR), lumG+cos*(-lumG)+sin*(-lumG), lumB+cos*(-lumB)+sin*(1-lumB), 0, 0,
lumR+cos*(-lumR)+sin*(0.143), lumG+cos*(1-lumG)+sin*(0.140), lumB+cos*(-lumB)+sin*(-0.283), 0, 0,
lumR+cos*(-lumR)+sin*(-(1-lumR)), lumG+cos*(-lumG)+sin*(lumG), lumB+cos*(1-lumB)+sin*(lumB), 0, 0,
0, 0, 0, 1, 0,
0, 0, 0, 0, 1
];
this._loadMatrix(matrix, multiply);
};
/**
* Set the contrast matrix, increase the separation between dark and bright
* Increase contrast : shadows darker and highlights brighter
* Decrease contrast : bring the shadows up and the highlights down
*
* @param amount {number} value of the contrast
* @param multiply {boolean} refer to ._loadMatrix() method
*/
ColorMatrixFilter.prototype.contrast = function(amount, multiply)
{
var v = (amount || 0) + 1;
var o = -128 * (v-1);
var matrix = [
v, 0, 0, 0, o,
0, v, 0, 0, o,
0, 0, v, 0, o,
0, 0, 0, 1, 0,
0, 0, 0, 0, 1
];
this._loadMatrix(matrix, multiply);
};
/**
* Set the saturation matrix, increase the separation between colors
* Increase saturation : increase contrast, brightness, and sharpness
* @param amount {number}
* @param multiply {boolean} refer to ._loadMatrix() method
*/
ColorMatrixFilter.prototype.saturation = function(amount, multiply)
{
var x = (amount || 0) * 2/3 + 1;
var y = ((x-1) *-0.5);
var matrix = [
x, y, y, 0, 0,
y, x, y, 0, 0,
y, y, x, 0, 0,
0, 0, 0, 1, 0,
0, 0, 0, 0, 1
];
this._loadMatrix(matrix, multiply);
};
/**
* Desaturate image (remove color)
*
* Call the saturate function
*
* @param multiply {boolean} refer to ._loadMatrix() method
*/
ColorMatrixFilter.prototype.desaturate = function(multiply)
{
this.saturation(-1);
};
/**
* Negative image (inverse of classic rgb matrix)
*
* @param multiply {boolean} refer to ._loadMatrix() method
*/
ColorMatrixFilter.prototype.negative = function(multiply)
{
var matrix = [
0, 1, 1, 0, 0,
1, 0, 1, 0, 0,
1, 1, 0, 0, 0,
0, 0, 0, 1, 0,
0, 0, 0, 0, 1
];
this._loadMatrix(matrix, multiply);
};
/**
* Sepia image
*
* @param multiply {boolean} refer to ._loadMatrix() method
*/
ColorMatrixFilter.prototype.sepia = function(multiply)
{
var matrix = [
0.393, 0.7689999, 0.18899999, 0, 0,
0.349, 0.6859999, 0.16799999, 0, 0,
0.272, 0.5339999, 0.13099999, 0, 0,
0, 0, 0, 1, 0,
0, 0, 0, 0, 1];
this._loadMatrix(matrix, multiply);
};
/**
* Color motion picture process invented in 1916 (thanks Dominic Szablewski)
*
* @param multiply {boolean} refer to ._loadMatrix() method
*/
ColorMatrixFilter.prototype.technicolor = function(multiply)
{
var matrix = [
1.9125277891456083,-0.8545344976951645,-0.09155508482755585,0,11.793603434377337,
-0.3087833385928097,1.7658908555458428,-0.10601743074722245,0,-70.35205161461398,
-0.231103377548616,-0.7501899197440212,1.847597816108189,0,30.950940869491138,
0, 0, 0, 1, 0,
0, 0, 0, 0, 0];
this._loadMatrix(matrix, multiply);
};
/**
* Polaroid filter
*
* @param multiply {boolean} refer to ._loadMatrix() method
*/
ColorMatrixFilter.prototype.polaroid = function(multiply)
{
var matrix = [
1.438,-0.062,-0.062,0,0,
-0.122,1.378,-0.122,0,0,
-0.016,-0.016,1.483,0,0,
0,0,0,1,0,
0,0,0,0,1];
this._loadMatrix(matrix, multiply);
};
/**
* Filter who transforms : Red -> Blue and Blue -> Red
*
* @param multiply {boolean} refer to ._loadMatrix() method
*/
ColorMatrixFilter.prototype.toBGR = function(multiply)
{
var matrix = [
0,0,1,0,0,
0,1,0,0,0,
1,0,0,0,0,
0,0,0,1,0,
0,0,0,0,1
];
this._loadMatrix(matrix, multiply);
};
/**
* Color reversal film introduced by Eastman Kodak in 1935. (thanks Dominic Szablewski)
*
* @param multiply {boolean} refer to ._loadMatrix() method
*/
ColorMatrixFilter.prototype.kodachrome = function(multiply)
{
var matrix = [
1.1285582396593525,-0.3967382283601348,-0.03992559172921793,0,63.72958762196502,
-0.16404339962244616,1.0835251566291304,-0.05498805115633132,0,24.732407896706203,
-0.16786010706155763,-0.5603416277695248,1.6014850761964943,0,35.62982807460946,
0,0,0,1,0,
0,0,0,0,1
];
this._loadMatrix(matrix, multiply);
};
/**
* Brown delicious browni filter (thanks Dominic Szablewski)
*
* @param multiply {boolean} refer to ._loadMatrix() method
*/
ColorMatrixFilter.prototype.browni = function(multiply)
{
var matrix = [
0.5997023498159715,0.34553243048391263,-0.2708298674538042,0,47.43192855600873,
-0.037703249837783157,0.8609577587992641,0.15059552388459913,0,-36.96841498319127,
0.24113635128153335,-0.07441037908422492,0.44972182064877153,0,-7.562075277591283,
0,0,0,1,0,
0,0,0,0,1
];
this._loadMatrix(matrix, multiply);
};
/*
* Vintage filter (thanks Dominic Szablewski)
*
* @param multiply {boolean} refer to ._loadMatrix() method
*/
ColorMatrixFilter.prototype.vintage = function(multiply)
{
var matrix = [
0.6279345635605994,0.3202183420819367,-0.03965408211312453,0,9.651285835294123,
0.02578397704808868,0.6441188644374771,0.03259127616149294,0,7.462829176470591,
0.0466055556782719,-0.0851232987247891,0.5241648018700465,0,5.159190588235296,
0,0,0,1,0,
0,0,0,0,1,
];
this._loadMatrix(matrix, multiply);
};
/*
* We don't know exactly what it does, kind of gradient map, but funny to play with!
*
* @param desaturation {number}
* @param toned {number}
* @param lightColor {string} (example : "0xFFE580")
* @param darkColor {string} (example : "0xFFE580")
*
* @param multiply {boolean} refer to ._loadMatrix() method
*/
ColorMatrixFilter.prototype.colorTone = function(desaturation, toned, lightColor, darkColor, multiply)
{
desaturation = desaturation || 0.2;
toned = toned || 0.15;
lightColor = lightColor || 0xFFE580;
darkColor = darkColor || 0x338000;
var lR = ((lightColor >> 16) & 0xFF) / 255;
var lG = ((lightColor >> 8) & 0xFF) / 255;
var lB = (lightColor & 0xFF) / 255;
var dR = ((darkColor >> 16) & 0xFF) / 255;
var dG = ((darkColor >> 8) & 0xFF) / 255;
var dB = (darkColor & 0xFF) / 255;
var matrix = [
0.3, 0.59, 0.11, 0, 0,
lR, lG, lB, desaturation, 0,
dR, dG, dB, toned, 0,
lR-dR, lG-dG, lB-dB, 0, 0,
0, 0, 0, 0, 1
];
this._loadMatrix(matrix, multiply);
};
/*
* Night effect
*
* @param intensity {number}
* @param multiply {boolean} refer to ._loadMatrix() method
*/
ColorMatrixFilter.prototype.night = function(intensity, multiply)
{
intensity = intensity || 0.1;
var matrix = [
intensity * ( -2.0), -intensity, 0, 0, 0,
-intensity, 0, intensity, 0, 0,
0, intensity, intensity * 2.0, 0, 0,
0,0,0,1,0,
0,0,0,0,1
];
this._loadMatrix(matrix, multiply);
};
/*
* Predator effect
*
* Erase the current matrix by setting a new indepent one
*
* @param amount {number} how much the predator feels his future victim
* @param multiply {boolean} refer to ._loadMatrix() method
*/
ColorMatrixFilter.prototype.predator = function(amount, multiply)
{
var matrix = [
11.224130630493164*amount, -4.794486999511719*amount, -2.8746118545532227*amount, 0*amount, 0.40342438220977783*amount,
-3.6330697536468506*amount, 9.193157196044922*amount, -2.951810836791992*amount, 0*amount, -1.316135048866272*amount,
-3.2184197902679443*amount, -4.2375030517578125*amount, 7.476448059082031*amount, 0*amount, 0.8044459223747253*amount,
0, 0, 0, 1, 0,
0, 0, 0, 0, 0
];
this._loadMatrix(matrix, multiply);
};
/*
* LSD effect
*
* Multiply the current matrix
*
* @param amount {number} How crazy is your effect
* @param multiply {boolean} refer to ._loadMatrix() method
*/
ColorMatrixFilter.prototype.lsd = function(multiply)
{
var matrix = [
2, -0.4, 0.5, 0, 0,
-0.5, 2, -0.4, 0, 0,
-0.4, -0.5, 3, 0, 0,
0,0,0,1,0,
0,0,0,0,1
];
this._loadMatrix(matrix, multiply);
};
/*
* Reset function
*
* Erase the current matrix by setting the default one
*
*/
ColorMatrixFilter.prototype.reset = function()
{
var matrix = [
1,0,0,0,0,
0,1,0,0,0,
0,0,1,0,0,
0,0,0,1,0,
0,0,0,0,1
];
this._loadMatrix(matrix, false);
};
Object.defineProperties(ColorMatrixFilter.prototype, {
/**
* Sets the matrix of the color matrix filter
*
* @member {number[]}
* @memberof ColorMatrixFilter#
* @default [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]
*/
matrix: {
get: function ()
{
return this.uniforms.matrix.value;
},
set: function (value)
{
this.uniforms.matrix.value = value;
}
}
});
},{"../../core":19}],83:[function(require,module,exports){
var core = require('../../core');
/**
* This lowers the color depth of your image by the given amount, producing an image with a smaller palette.
*
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
*/
function ColorStepFilter()
{
core.AbstractFilter.call(this,
// vertex shader
null,
// fragment shader
"precision mediump float;\n\nvarying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\nuniform float step;\n\nvoid main(void)\n{\n vec4 color = texture2D(uSampler, vTextureCoord);\n\n color = floor(color * step) / step;\n\n gl_FragColor = color;\n}\n",
// custom uniforms
{
step: { type: '1f', value: 5 }
}
);
}
ColorStepFilter.prototype = Object.create(core.AbstractFilter.prototype);
ColorStepFilter.prototype.constructor = ColorStepFilter;
module.exports = ColorStepFilter;
Object.defineProperties(ColorStepFilter.prototype, {
/**
* The number of steps to reduce the palette by.
*
* @member {number}
* @memberof ColorStepFilter#
*/
step: {
get: function ()
{
return this.uniforms.step.value;
},
set: function (value)
{
this.uniforms.step.value = value;
}
}
});
},{"../../core":19}],84:[function(require,module,exports){
var core = require('../../core');
/**
* The ConvolutionFilter class applies a matrix convolution filter effect.
* A convolution combines pixels in the input image with neighboring pixels to produce a new image.
* A wide variety of image effects can be achieved through convolutions, including blurring, edge
* detection, sharpening, embossing, and beveling. The matrix should be specified as a 9 point Array.
* See http://docs.gimp.org/en/plug-in-convmatrix.html for more info.
*
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
* @param matrix {number[]} An array of values used for matrix transformation. Specified as a 9 point Array.
* @param width {number} Width of the object you are transforming
* @param height {number} Height of the object you are transforming
*/
function ConvolutionFilter(matrix, width, height)
{
core.AbstractFilter.call(this,
// vertex shader
null,
// fragment shader
"precision mediump float;\n\nvarying mediump vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\nuniform vec2 texelSize;\nuniform float matrix[9];\n\nvoid main(void)\n{\n vec4 c11 = texture2D(uSampler, vTextureCoord - texelSize); // top left\n vec4 c12 = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - texelSize.y)); // top center\n vec4 c13 = texture2D(uSampler, vec2(vTextureCoord.x + texelSize.x, vTextureCoord.y - texelSize.y)); // top right\n\n vec4 c21 = texture2D(uSampler, vec2(vTextureCoord.x - texelSize.x, vTextureCoord.y)); // mid left\n vec4 c22 = texture2D(uSampler, vTextureCoord); // mid center\n vec4 c23 = texture2D(uSampler, vec2(vTextureCoord.x + texelSize.x, vTextureCoord.y)); // mid right\n\n vec4 c31 = texture2D(uSampler, vec2(vTextureCoord.x - texelSize.x, vTextureCoord.y + texelSize.y)); // bottom left\n vec4 c32 = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + texelSize.y)); // bottom center\n vec4 c33 = texture2D(uSampler, vTextureCoord + texelSize); // bottom right\n\n gl_FragColor =\n c11 * matrix[0] + c12 * matrix[1] + c13 * matrix[2] +\n c21 * matrix[3] + c22 * matrix[4] + c23 * matrix[5] +\n c31 * matrix[6] + c32 * matrix[7] + c33 * matrix[8];\n\n gl_FragColor.a = c22.a;\n}\n",
// custom uniforms
{
matrix: { type: '1fv', value: new Float32Array(matrix) },
texelSize: { type: '2v', value: { x: 1 / width, y: 1 / height } }
}
);
}
ConvolutionFilter.prototype = Object.create(core.AbstractFilter.prototype);
ConvolutionFilter.prototype.constructor = ConvolutionFilter;
module.exports = ConvolutionFilter;
Object.defineProperties(ConvolutionFilter.prototype, {
/**
* An array of values used for matrix transformation. Specified as a 9 point Array.
*
* @member {number[]}
* @memberof ConvolutionFilter#
*/
matrix: {
get: function ()
{
return this.uniforms.matrix.value;
},
set: function (value)
{
this.uniforms.matrix.value = new Float32Array(value);
}
},
/**
* Width of the object you are transforming
*
* @member {number}
* @memberof ConvolutionFilter#
*/
width: {
get: function ()
{
return 1/this.uniforms.texelSize.value.x;
},
set: function (value)
{
this.uniforms.texelSize.value.x = 1/value;
}
},
/**
* Height of the object you are transforming
*
* @member {number}
* @memberof ConvolutionFilter#
*/
height: {
get: function ()
{
return 1/this.uniforms.texelSize.value.y;
},
set: function (value)
{
this.uniforms.texelSize.value.y = 1/value;
}
}
});
},{"../../core":19}],85:[function(require,module,exports){
var core = require('../../core');
/**
* A Cross Hatch effect filter.
*
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
*/
function CrossHatchFilter()
{
core.AbstractFilter.call(this,
// vertex shader
null,
// fragment shader
"precision mediump float;\n\nvarying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\n\nvoid main(void)\n{\n float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);\n\n gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n\n if (lum < 1.00)\n {\n if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0)\n {\n gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n }\n }\n\n if (lum < 0.75)\n {\n if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0)\n {\n gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n }\n }\n\n if (lum < 0.50)\n {\n if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0)\n {\n gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n }\n }\n\n if (lum < 0.3)\n {\n if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0)\n {\n gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n }\n }\n}\n"
);
}
CrossHatchFilter.prototype = Object.create(core.AbstractFilter.prototype);
CrossHatchFilter.prototype.constructor = CrossHatchFilter;
module.exports = CrossHatchFilter;
},{"../../core":19}],86:[function(require,module,exports){
var core = require('../../core');
/**
* The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object.
* You can use this filter to apply all manor of crazy warping effects
* Currently the r property of the texture is used to offset the x and the g property of the texture is used to offset the y.
*
* @class
* @extends AbstractFilter
* @namespace PIXI
* @param texture {Texture} The texture used for the displacement map * must be power of 2 texture at the moment
*/
function DisplacementFilter(sprite)
{
var maskMatrix = new core.math.Matrix();
sprite.renderable = false;
core.AbstractFilter.call(this,
// vertex shader
"attribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\nattribute vec4 aColor;\n\nuniform mat3 projectionMatrix;\nuniform mat3 otherMatrix;\n\nvarying vec2 vMapCoord;\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\n\nvoid main(void)\n{\n gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n vTextureCoord = aTextureCoord;\n vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy;\n vColor = vec4(aColor.rgb * aColor.a, aColor.a);\n}\n",
// fragment shader
"precision lowp float;\n\nvarying vec2 vMapCoord;\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\n\nuniform vec2 scale;\n\nuniform sampler2D uSampler;\nuniform sampler2D mapSampler;\n\nvoid main(void)\n{\n vec4 original = texture2D(uSampler, vTextureCoord);\n vec4 map = texture2D(mapSampler, vMapCoord);\n\n map -= 0.5;\n map.xy *= scale;\n\n gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + map.x, vTextureCoord.y + map.y));\n}\n",
// uniforms
{
mapSampler: { type: 'sampler2D', value: sprite.texture },
otherMatrix: { type: 'mat3', value: maskMatrix.toArray(true) },
scale: { type: 'v2', value: { x: 1, y: 1 } }
}
);
this.maskSprite = sprite;
this.maskMatrix = maskMatrix;
this.scale = new core.math.Point(20,20);
}
DisplacementFilter.prototype = Object.create(core.AbstractFilter.prototype);
DisplacementFilter.prototype.constructor = DisplacementFilter;
module.exports = DisplacementFilter;
DisplacementFilter.prototype.applyFilter = function (renderer, input, output)
{
var filterManager = renderer.filterManager;
filterManager.calculateMappedMatrix(input.frame, this.maskSprite, this.maskMatrix);
this.uniforms.otherMatrix.value = this.maskMatrix.toArray(true);
this.uniforms.scale.value.x = this.scale.x * (1/input.frame.width);
this.uniforms.scale.value.y = this.scale.y * (1/input.frame.height);
var shader = this.getShader(renderer);
// draw the filter...
filterManager.applyFilter(shader, input, output);
};
Object.defineProperties(DisplacementFilter.prototype, {
/**
* The texture used for the displacement map. Must be power of 2 sized texture.
*
* @member {Texture}
* @memberof DisplacementFilter#
*/
map: {
get: function ()
{
return this.uniforms.mapSampler.value;
},
set: function (value)
{
this.uniforms.mapSampler.value = value;
}
}
});
},{"../../core":19}],87:[function(require,module,exports){
var core = require('../../core');
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
* original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js
*/
/**
* This filter applies a dotscreen effect making display objects appear to be made out of
* black and white halftone dots like an old printer.
*
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
*/
function DotScreenFilter()
{
core.AbstractFilter.call(this,
// vertex shader
null,
// fragment shader
"precision mediump float;\n\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\n\nuniform vec4 dimensions;\nuniform sampler2D uSampler;\n\nuniform float angle;\nuniform float scale;\n\nfloat pattern()\n{\n float s = sin(angle), c = cos(angle);\n vec2 tex = vTextureCoord * dimensions.xy;\n vec2 point = vec2(\n c * tex.x - s * tex.y,\n s * tex.x + c * tex.y\n ) * scale;\n return (sin(point.x) * sin(point.y)) * 4.0;\n}\n\nvoid main()\n{\n vec4 color = texture2D(uSampler, vTextureCoord);\n float average = (color.r + color.g + color.b) / 3.0;\n gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);\n}\n",
// custom uniforms
{
scale: { type: '1f', value: 1 },
angle: { type: '1f', value: 5 },
dimensions: { type: '4fv', value: [0, 0, 0, 0] }
}
);
}
DotScreenFilter.prototype = Object.create(core.AbstractFilter.prototype);
DotScreenFilter.prototype.constructor = DotScreenFilter;
module.exports = DotScreenFilter;
Object.defineProperties(DotScreenFilter.prototype, {
/**
* The scale of the effect.
* @member {number}
* @memberof DotScreenFilter#
*/
scale: {
get: function ()
{
return this.uniforms.scale.value;
},
set: function (value)
{
this.uniforms.scale.value = value;
}
},
/**
* The radius of the effect.
* @member {number}
* @memberof DotScreenFilter#
*/
angle: {
get: function ()
{
return this.uniforms.angle.value;
},
set: function (value)
{
this.uniforms.angle.value = value;
}
}
});
},{"../../core":19}],88:[function(require,module,exports){
var core = require('../../core'),
blurFactor = 1 / 7000;
/**
* The BlurYTintFilter applies a vertical Gaussian blur to an object.
*
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
*/
function BlurYTintFilter()
{
core.AbstractFilter.call(this,
// vertex shader
"attribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\nattribute vec4 aColor;\n\nuniform float strength;\nuniform vec2 offset;\n\nuniform mat3 projectionMatrix;\n\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\nvarying vec2 vBlurTexCoords[6];\n\nvoid main(void)\n{\n gl_Position = vec4((projectionMatrix * vec3((aVertexPosition+offset), 1.0)).xy, 0.0, 1.0);\n vTextureCoord = aTextureCoord;\n\n vBlurTexCoords[ 0] = aTextureCoord + vec2(0.0, -0.012 * strength);\n vBlurTexCoords[ 1] = aTextureCoord + vec2(0.0, -0.008 * strength);\n vBlurTexCoords[ 2] = aTextureCoord + vec2(0.0, -0.004 * strength);\n vBlurTexCoords[ 3] = aTextureCoord + vec2(0.0, 0.004 * strength);\n vBlurTexCoords[ 4] = aTextureCoord + vec2(0.0, 0.008 * strength);\n vBlurTexCoords[ 5] = aTextureCoord + vec2(0.0, 0.012 * strength);\n\n vColor = vec4(aColor.rgb * aColor.a, aColor.a);\n}\n",
// fragment shader
"precision lowp float;\n\nvarying vec2 vTextureCoord;\nvarying vec2 vBlurTexCoords[6];\nvarying vec4 vColor;\n\nuniform vec3 color;\nuniform float alpha;\n\nuniform sampler2D uSampler;\n\nvoid main(void)\n{\n vec4 sum = vec4(0.0);\n\n sum += texture2D(uSampler, vBlurTexCoords[ 0])*0.004431848411938341;\n sum += texture2D(uSampler, vBlurTexCoords[ 1])*0.05399096651318985;\n sum += texture2D(uSampler, vBlurTexCoords[ 2])*0.2419707245191454;\n sum += texture2D(uSampler, vTextureCoord )*0.3989422804014327;\n sum += texture2D(uSampler, vBlurTexCoords[ 3])*0.2419707245191454;\n sum += texture2D(uSampler, vBlurTexCoords[ 4])*0.05399096651318985;\n sum += texture2D(uSampler, vBlurTexCoords[ 5])*0.004431848411938341;\n\n gl_FragColor = vec4( color.rgb * sum.a * alpha, sum.a * alpha );\n}\n",
// set the uniforms
{
blur: { type: '1f', value: 1 / 512 },
color: { type: 'c', value: [0,0,0]},
alpha: { type: '1f', value: 0.7 },
offset: { type: '2f', value:[5, 5]},
strength: { type: '1f', value:1}
}
);
this.passes = 1;
this.strength = 4;
}
BlurYTintFilter.prototype = Object.create(core.AbstractFilter.prototype);
BlurYTintFilter.prototype.constructor = BlurYTintFilter;
module.exports = BlurYTintFilter;
BlurYTintFilter.prototype.applyFilter = function (renderer, input, output, clear)
{
var shader = this.getShader(renderer);
this.uniforms.strength.value = this.strength / 4 / this.passes * (input.frame.height / input.size.height);
if(this.passes === 1)
{
renderer.filterManager.applyFilter(shader, input, output, clear);
}
else
{
var renderTarget = renderer.filterManager.getRenderTarget(true);
var flip = input;
var flop = renderTarget;
for(var i = 0; i < this.passes-1; i++)
{
renderer.filterManager.applyFilter(shader, flip, flop, clear);
var temp = flop;
flop = flip;
flip = temp;
}
renderer.filterManager.applyFilter(shader, flip, output, clear);
renderer.filterManager.returnRenderTarget(renderTarget);
}
};
Object.defineProperties(BlurYTintFilter.prototype, {
/**
* Sets the strength of both the blur.
*
* @member {number}
* @memberof BlurYFilter#
* @default 2
*/
blur: {
get: function ()
{
return this.strength;
},
set: function (value)
{
this.padding = value * 0.5;
this.strength = value;
}
},
});
},{"../../core":19}],89:[function(require,module,exports){
var core = require('../../core'),
BlurXFilter = require('../blur/BlurXFilter'),
BlurYTintFilter = require('./BlurYTintFilter');
/**
* The DropShadowFilter applies a Gaussian blur to an object.
* The strength of the blur can be set for x- and y-axis separately.
*
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
*/
function DropShadowFilter()
{
core.AbstractFilter.call(this);
this.blurXFilter = new BlurXFilter();
this.blurYTintFilter = new BlurYTintFilter();
this.defaultFilter = new core.AbstractFilter();
this.padding = 30;
this._dirtyPosition = true;
this._angle = 45 * Math.PI / 180;
this._distance = 10;
this.alpha = 0.75;
this.hideObject = false;
this.blendMode = core.CONST.BLEND_MODES.MULTIPLY;
}
DropShadowFilter.prototype = Object.create(core.AbstractFilter.prototype);
DropShadowFilter.prototype.constructor = DropShadowFilter;
module.exports = DropShadowFilter;
DropShadowFilter.prototype.applyFilter = function (renderer, input, output)
{
var renderTarget = renderer.filterManager.getRenderTarget(true);
//TODO - copyTexSubImage2D could be used here?
if(this._dirtyPosition)
{
this._dirtyPosition = false;
this.blurYTintFilter.uniforms.offset.value[0] = Math.sin(this._angle) * this._distance;
this.blurYTintFilter.uniforms.offset.value[1] = Math.cos(this._angle) * this._distance;
}
this.blurXFilter.applyFilter(renderer, input, renderTarget);
renderer.blendModeManager.setBlendMode(this.blendMode);
this.blurYTintFilter.applyFilter(renderer, renderTarget, output);
renderer.blendModeManager.setBlendMode(core.CONST.BLEND_MODES.NORMAL);
if(!this.hideObject)
{
this.defaultFilter.applyFilter(renderer, input, output);
}
renderer.filterManager.returnRenderTarget(renderTarget);
};
Object.defineProperties(DropShadowFilter.prototype, {
/**
* Sets the strength of both the blurX and blurY properties simultaneously
*
* @member {number}
* @memberOf DropShadowFilter#
* @default 2
*/
blur: {
get: function ()
{
return this.blurXFilter.blur;
},
set: function (value)
{
this.blurXFilter.blur = this.blurYTintFilter.blur = value;
}
},
/**
* Sets the strength of the blurX property
*
* @member {number}
* @memberOf DropShadowFilter#
* @default 2
*/
blurX: {
get: function ()
{
return this.blurXFilter.blur;
},
set: function (value)
{
this.blurXFilter.blur = value;
}
},
/**
* Sets the strength of the blurY property
*
* @member {number}
* @memberOf DropShadowFilter#
* @default 2
*/
blurY: {
get: function ()
{
return this.blurYTintFilter.blur;
},
set: function (value)
{
this.blurYTintFilter.blur = value;
}
},
color: {
get: function ()
{
return core.utils.rgb2hex( this.blurYTintFilter.uniforms.color.value );
},
set: function (value)
{
this.blurYTintFilter.uniforms.color.value = core.utils.hex2rgb(value);
}
},
alpha: {
get: function ()
{
return this.blurYTintFilter.uniforms.alpha.value;
},
set: function (value)
{
this.blurYTintFilter.uniforms.alpha.value = value;
}
},
distance: {
get: function ()
{
return this._distance;
},
set: function (value)
{
this._dirtyPosition = true;
this._distance = value;
}
},
angle: {
get: function ()
{
return this._angle;
},
set: function (value)
{
this._dirtyPosition = true;
this._angle = value;
}
}
});
},{"../../core":19,"../blur/BlurXFilter":79,"./BlurYTintFilter":88}],90:[function(require,module,exports){
var core = require('../../core');
/**
* This greyscales the palette of your Display Objects.
*
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
*/
function GrayFilter()
{
core.AbstractFilter.call(this,
// vertex shader
null,
// fragment shader
"precision mediump float;\n\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\n\nuniform sampler2D uSampler;\nuniform float gray;\n\nvoid main(void)\n{\n gl_FragColor = texture2D(uSampler, vTextureCoord);\n gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);\n}\n",
// set the uniforms
{
gray: { type: '1f', value: 1 }
}
);
}
GrayFilter.prototype = Object.create(core.AbstractFilter.prototype);
GrayFilter.prototype.constructor = GrayFilter;
module.exports = GrayFilter;
Object.defineProperties(GrayFilter.prototype, {
/**
* The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color.
*
* @member {number}
* @memberof GrayFilter#
*/
gray: {
get: function ()
{
return this.uniforms.gray.value;
},
set: function (value)
{
this.uniforms.gray.value = value;
}
}
});
},{"../../core":19}],91:[function(require,module,exports){
/**
* @file Main export of the PIXI filters library
* @author Mat Groves <mat@goodboydigital.com>
* @copyright 2013-2015 GoodBoyDigital
* @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License}
*/
/**
* @namespace PIXI.filters
*/
module.exports = {
// expose some internal filters...
AbstractFilter: require('../core/renderers/webgl/filters/AbstractFilter'),
FXAAFilter: require('../core/renderers/webgl/filters/FXAAFilter'),
SpriteMaskFilter: require('../core/renderers/webgl/filters/SpriteMaskFilter'),
// add the rest!
AsciiFilter: require('./ascii/AsciiFilter'),
BloomFilter: require('./bloom/BloomFilter'),
BlurFilter: require('./blur/BlurFilter'),
BlurXFilter: require('./blur/BlurXFilter'),
BlurYFilter: require('./blur/BlurYFilter'),
ColorMatrixFilter: require('./color/ColorMatrixFilter'),
ColorStepFilter: require('./color/ColorStepFilter'),
ConvolutionFilter: require('./convolution/ConvolutionFilter'),
CrossHatchFilter: require('./crosshatch/CrossHatchFilter'),
DisplacementFilter: require('./displacement/DisplacementFilter'),
DotScreenFilter: require('./dot/DotScreenFilter'),
GrayFilter: require('./gray/GrayFilter'),
DropShadowFilter: require('./dropshadow/DropShadowFilter'),
InvertFilter: require('./invert/InvertFilter'),
NoiseFilter: require('./noise/NoiseFilter'),
NormalMapFilter: require('./normal/NormalMapFilter'),
PixelateFilter: require('./pixelate/PixelateFilter'),
RGBSplitFilter: require('./rgb/RGBSplitFilter'),
ShockwaveFilter: require('./shockwave/ShockwaveFilter'),
SepiaFilter: require('./sepia/SepiaFilter'),
SmartBlurFilter: require('./blur/SmartBlurFilter'),
TiltShiftFilter: require('./tiltshift/TiltShiftFilter'),
TiltShiftXFilter: require('./tiltshift/TiltShiftXFilter'),
TiltShiftYFilter: require('./tiltshift/TiltShiftYFilter'),
TwistFilter: require('./twist/TwistFilter')
};
},{"../core/renderers/webgl/filters/AbstractFilter":39,"../core/renderers/webgl/filters/FXAAFilter":40,"../core/renderers/webgl/filters/SpriteMaskFilter":41,"./ascii/AsciiFilter":76,"./bloom/BloomFilter":77,"./blur/BlurFilter":78,"./blur/BlurXFilter":79,"./blur/BlurYFilter":80,"./blur/SmartBlurFilter":81,"./color/ColorMatrixFilter":82,"./color/ColorStepFilter":83,"./convolution/ConvolutionFilter":84,"./crosshatch/CrossHatchFilter":85,"./displacement/DisplacementFilter":86,"./dot/DotScreenFilter":87,"./dropshadow/DropShadowFilter":89,"./gray/GrayFilter":90,"./invert/InvertFilter":92,"./noise/NoiseFilter":93,"./normal/NormalMapFilter":94,"./pixelate/PixelateFilter":95,"./rgb/RGBSplitFilter":96,"./sepia/SepiaFilter":97,"./shockwave/ShockwaveFilter":98,"./tiltshift/TiltShiftFilter":100,"./tiltshift/TiltShiftXFilter":101,"./tiltshift/TiltShiftYFilter":102,"./twist/TwistFilter":103}],92:[function(require,module,exports){
var core = require('../../core');
/**
* This inverts your Display Objects colors.
*
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
*/
function InvertFilter()
{
core.AbstractFilter.call(this,
// vertex shader
null,
// fragment shader
"precision mediump float;\n\nvarying vec2 vTextureCoord;\n\nuniform float invert;\nuniform sampler2D uSampler;\n\nvoid main(void)\n{\n gl_FragColor = texture2D(uSampler, vTextureCoord);\n\n gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);\n}\n",
// custom uniforms
{
invert: { type: '1f', value: 1 }
}
);
}
InvertFilter.prototype = Object.create(core.AbstractFilter.prototype);
InvertFilter.prototype.constructor = InvertFilter;
module.exports = InvertFilter;
Object.defineProperties(InvertFilter.prototype, {
/**
* The strength of the invert. `1` will fully invert the colors, and
* `0` will make the object its normal color.
*
* @member {number}
* @memberof InvertFilter#
*/
invert: {
get: function ()
{
return this.uniforms.invert.value;
},
set: function (value)
{
this.uniforms.invert.value = value;
}
}
});
},{"../../core":19}],93:[function(require,module,exports){
var core = require('../../core');
/**
* @author Vico @vicocotea
* original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/noise.js
*/
/**
* A Noise effect filter.
*
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
*/
function NoiseFilter()
{
core.AbstractFilter.call(this,
// vertex shader
null,
// fragment shader
"precision mediump float;\n\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\n\nuniform float noise;\nuniform sampler2D uSampler;\n\nfloat rand(vec2 co)\n{\n return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);\n}\n\nvoid main()\n{\n vec4 color = texture2D(uSampler, vTextureCoord);\n\n float diff = (rand(vTextureCoord) - 0.5) * noise;\n\n color.r += diff;\n color.g += diff;\n color.b += diff;\n\n gl_FragColor = color;\n}\n",
// custom uniforms
{
noise: { type: '1f', value: 0.5 }
}
);
}
NoiseFilter.prototype = Object.create(core.AbstractFilter.prototype);
NoiseFilter.prototype.constructor = NoiseFilter;
module.exports = NoiseFilter;
Object.defineProperties(NoiseFilter.prototype, {
/**
* The amount of noise to apply.
*
* @member {number}
* @memberof NoiseFilter#
* @default 0.5
*/
noise: {
get: function ()
{
return this.uniforms.noise.value;
},
set: function (value)
{
this.uniforms.noise.value = value;
}
}
});
},{"../../core":19}],94:[function(require,module,exports){
var core = require('../../core');
/**
* The NormalMapFilter class uses the pixel values from the specified texture (called the normal map)
* to project lighting onto an object.
*
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
* @param texture {Texture} The texture used for the normal map, must be power of 2 texture at the moment
*/
function NormalMapFilter(texture)
{
core.AbstractFilter.call(this,
// vertex shader
null,
// fragment shader
"precision mediump float;\n\nvarying vec2 vTextureCoord;\nvarying float vColor;\n\nuniform sampler2D displacementMap;\nuniform sampler2D uSampler;\n\nuniform vec4 dimensions;\n\nconst vec2 Resolution = vec2(1.0,1.0); //resolution of screen\nuniform vec3 LightPos; //light position, normalized\nconst vec4 LightColor = vec4(1.0, 1.0, 1.0, 1.0); //light RGBA -- alpha is intensity\nconst vec4 AmbientColor = vec4(1.0, 1.0, 1.0, 0.5); //ambient RGBA -- alpha is intensity\nconst vec3 Falloff = vec3(0.0, 1.0, 0.2); //attenuation coefficients\n\nuniform vec3 LightDir; // = vec3(1.0, 0.0, 1.0);\n\nuniform vec2 mapDimensions; // = vec2(256.0, 256.0);\n\n\nvoid main(void)\n{\n vec2 mapCords = vTextureCoord.xy;\n\n vec4 color = texture2D(uSampler, vTextureCoord.st);\n vec3 nColor = texture2D(displacementMap, vTextureCoord.st).rgb;\n\n\n mapCords *= vec2(dimensions.x/512.0, dimensions.y/512.0);\n\n mapCords.y *= -1.0;\n mapCords.y += 1.0;\n\n // RGBA of our diffuse color\n vec4 DiffuseColor = texture2D(uSampler, vTextureCoord);\n\n // RGB of our normal map\n vec3 NormalMap = texture2D(displacementMap, mapCords).rgb;\n\n // The delta position of light\n // vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);\n vec3 LightDir = vec3(LightPos.xy - (mapCords.xy), LightPos.z);\n\n // Correct for aspect ratio\n // LightDir.x *= Resolution.x / Resolution.y;\n\n // Determine distance (used for attenuation) BEFORE we normalize our LightDir\n float D = length(LightDir);\n\n // normalize our vectors\n vec3 N = normalize(NormalMap * 2.0 - 1.0);\n vec3 L = normalize(LightDir);\n\n // Pre-multiply light color with intensity\n // Then perform 'N dot L' to determine our diffuse term\n vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);\n\n // pre-multiply ambient color with intensity\n vec3 Ambient = AmbientColor.rgb * AmbientColor.a;\n\n // calculate attenuation\n float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );\n\n // the calculation which brings it all together\n vec3 Intensity = Ambient + Diffuse * Attenuation;\n vec3 FinalColor = DiffuseColor.rgb * Intensity;\n gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);\n\n // gl_FragColor = vec4(1.0, 0.0, 0.0, Attenuation); // vColor * vec4(FinalColor, DiffuseColor.a);\n\n/*\n // normalise color\n vec3 normal = normalize(nColor * 2.0 - 1.0);\n\n vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );\n\n float lambert = clamp(dot(normal, lightDir), 0.0, 1.0);\n\n float d = sqrt(dot(deltaPos, deltaPos));\n float att = 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) );\n\n vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;\n result *= color.rgb;\n\n gl_FragColor = vec4(result, 1.0);\n*/\n}\n",
// custom uniforms
{
displacementMap: { type: 'sampler2D', value: texture },
scale: { type: '2f', value: { x: 15, y: 15 } },
offset: { type: '2f', value: { x: 0, y: 0 } },
mapDimensions: { type: '2f', value: { x: 1, y: 1 } },
dimensions: { type: '4f', value: [0, 0, 0, 0] },
// LightDir: { type: 'f3', value: [0, 1, 0] },
LightPos: { type: '3f', value: [0, 1, 0] }
}
);
texture.baseTexture._powerOf2 = true;
if (texture.baseTexture.hasLoaded)
{
this.onTextureLoaded();
}
else
{
texture.baseTexture.once('loaded', this.onTextureLoaded.bind(this));
}
}
NormalMapFilter.prototype = Object.create(core.AbstractFilter.prototype);
NormalMapFilter.prototype.constructor = NormalMapFilter;
module.exports = NormalMapFilter;
/**
* Sets the map dimensions uniforms when the texture becomes available.
*
* @private
*/
NormalMapFilter.prototype.onTextureLoaded = function ()
{
this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width;
this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height;
};
Object.defineProperties(NormalMapFilter.prototype, {
/**
* The texture used for the displacement map. Must be power of 2 texture.
*
* @member {Texture}
* @memberof NormalMapFilter#
*/
map: {
get: function ()
{
return this.uniforms.displacementMap.value;
},
set: function (value)
{
this.uniforms.displacementMap.value = value;
}
},
/**
* The multiplier used to scale the displacement result from the map calculation.
*
* @member {Point}
* @memberof NormalMapFilter#
*/
scale: {
get: function ()
{
return this.uniforms.scale.value;
},
set: function (value)
{
this.uniforms.scale.value = value;
}
},
/**
* The offset used to move the displacement map.
*
* @member {Point}
* @memberof NormalMapFilter#
*/
offset: {
get: function ()
{
return this.uniforms.offset.value;
},
set: function (value)
{
this.uniforms.offset.value = value;
}
}
});
},{"../../core":19}],95:[function(require,module,exports){
var core = require('../../core');
/**
* This filter applies a pixelate effect making display objects appear 'blocky'.
*
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
*/
function PixelateFilter()
{
core.AbstractFilter.call(this,
// vertex shader
null,
// fragment shader
"precision mediump float;\n\nvarying vec2 vTextureCoord;\n\nuniform vec4 dimensions;\nuniform vec2 pixelSize;\nuniform sampler2D uSampler;\n\nvoid main(void)\n{\n vec2 coord = vTextureCoord;\n\n vec2 size = dimensions.xy / pixelSize;\n\n vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;\n\n gl_FragColor = texture2D(uSampler, color);\n}\n",
// custom uniforms
{
dimensions: { type: '4fv', value: new Float32Array([0, 0, 0, 0]) },
pixelSize: { type: 'v2', value: { x: 10, y: 10 } }
}
);
}
PixelateFilter.prototype = Object.create(core.AbstractFilter.prototype);
PixelateFilter.prototype.constructor = PixelateFilter;
module.exports = PixelateFilter;
Object.defineProperties(PixelateFilter.prototype, {
/**
* This a point that describes the size of the blocks.
* x is the width of the block and y is the height.
*
* @member {Point}
* @memberof PixelateFilter#
*/
size: {
get: function ()
{
return this.uniforms.pixelSize.value;
},
set: function (value)
{
this.uniforms.pixelSize.value = value;
}
}
});
},{"../../core":19}],96:[function(require,module,exports){
var core = require('../../core');
/**
* An RGB Split Filter.
*
* @class
* @extends AbstractFilter
* @namespace PIXI
*/
function RGBSplitFilter()
{
core.AbstractFilter.call(this,
// vertex shader
null,
// fragment shader
"precision mediump float;\n\nvarying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\nuniform vec4 dimensions;\nuniform vec2 red;\nuniform vec2 green;\nuniform vec2 blue;\n\nvoid main(void)\n{\n gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;\n gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;\n gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;\n gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;\n}\n",
// custom uniforms
{
red: { type: 'v2', value: { x: 20, y: 20 } },
green: { type: 'v2', value: { x: -20, y: 20 } },
blue: { type: 'v2', value: { x: 20, y: -20 } },
dimensions: { type: '4fv', value: [0, 0, 0, 0] }
}
);
}
RGBSplitFilter.prototype = Object.create(core.AbstractFilter.prototype);
RGBSplitFilter.prototype.constructor = RGBSplitFilter;
module.exports = RGBSplitFilter;
Object.defineProperties(RGBSplitFilter.prototype, {
/**
* Red channel offset.
*
* @member {Point}
* @memberof RGBSplitFilter#
*/
red: {
get: function ()
{
return this.uniforms.red.value;
},
set: function (value)
{
this.uniforms.red.value = value;
}
},
/**
* Green channel offset.
*
* @member {Point}
* @memberof RGBSplitFilter#
*/
green: {
get: function ()
{
return this.uniforms.green.value;
},
set: function (value)
{
this.uniforms.green.value = value;
}
},
/**
* Blue offset.
*
* @member {Point}
* @memberof RGBSplitFilter#
*/
blue: {
get: function ()
{
return this.uniforms.blue.value;
},
set: function (value)
{
this.uniforms.blue.value = value;
}
}
});
},{"../../core":19}],97:[function(require,module,exports){
var core = require('../../core');
/**
* This applies a sepia effect to your Display Objects.
*
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
*/
function SepiaFilter()
{
core.AbstractFilter.call(this,
// vertex shader
null,
// fragment shader
"precision mediump float;\n\nvarying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\nuniform float sepia;\n\nconst mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);\n\nvoid main(void)\n{\n gl_FragColor = texture2D(uSampler, vTextureCoord);\n gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);\n}\n",
// custom uniforms
{
sepia: { type: '1f', value: 1 }
}
);
}
SepiaFilter.prototype = Object.create(core.AbstractFilter.prototype);
SepiaFilter.prototype.constructor = SepiaFilter;
module.exports = SepiaFilter;
Object.defineProperties(SepiaFilter.prototype, {
/**
* The strength of the sepia. `1` will apply the full sepia effect, and
* `0` will make the object its normal color.
*
* @member {number}
* @memberof SepiaFilter#
*/
sepia: {
get: function ()
{
return this.uniforms.sepia.value;
},
set: function (value)
{
this.uniforms.sepia.value = value;
}
}
});
},{"../../core":19}],98:[function(require,module,exports){
var core = require('../../core');
/**
* The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA
* color and alpha values of every pixel on your displayObject to produce a result
* with a new set of RGBA color and alpha values. It's pretty powerful!
*
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
*/
function ShockwaveFilter()
{
core.AbstractFilter.call(this,
// vertex shader
null,
// fragment shader
"precision lowp float;\n\nvarying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\n\nuniform vec2 center;\nuniform vec3 params; // 10.0, 0.8, 0.1\nuniform float time;\n\nvoid main()\n{\n vec2 uv = vTextureCoord;\n vec2 texCoord = uv;\n\n float dist = distance(uv, center);\n\n if ( (dist <= (time + params.z)) && (dist >= (time - params.z)) )\n {\n float diff = (dist - time);\n float powDiff = 1.0 - pow(abs(diff*params.x), params.y);\n\n float diffTime = diff * powDiff;\n vec2 diffUV = normalize(uv - center);\n texCoord = uv + (diffUV * diffTime);\n }\n\n gl_FragColor = texture2D(uSampler, texCoord);\n}\n",
// custom uniforms
{
center: { type: 'v2', value: { x: 0.5, y: 0.5 } },
params: { type: 'v3', value: { x: 10, y: 0.8, z: 0.1 } },
time: { type: '1f', value: 0 }
}
);
}
ShockwaveFilter.prototype = Object.create(core.AbstractFilter.prototype);
ShockwaveFilter.prototype.constructor = ShockwaveFilter;
module.exports = ShockwaveFilter;
Object.defineProperties(ShockwaveFilter.prototype, {
/**
* Sets the center of the shockwave in normalized screen coords. That is
* (0,0) is the top-left and (1,1) is the bottom right.
*
* @member {object<string, number>}
* @memberof ShockwaveFilter#
*/
center: {
get: function ()
{
return this.uniforms.center.value;
},
set: function (value)
{
this.uniforms.center.value = value;
}
},
/**
* Sets the params of the shockwave. These modify the look and behavior of
* the shockwave as it ripples out.
*
* @member {object<string, number>}
* @memberof ShockwaveFilter#
*/
params: {
get: function ()
{
return this.uniforms.params.value;
},
set: function (value)
{
this.uniforms.params.value = value;
}
},
/**
* Sets the elapsed time of the shockwave. This controls the speed at which
* the shockwave ripples out.
*
* @member {number}
* @memberof ShockwaveFilter#
*/
time: {
get: function ()
{
return this.uniforms.time.value;
},
set: function (value)
{
this.uniforms.time.value = value;
}
}
});
},{"../../core":19}],99:[function(require,module,exports){
var core = require('../../core');
/**
* @author Vico @vicocotea
* original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/
*/
/**
* A TiltShiftAxisFilter.
*
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
*/
function TiltShiftAxisFilter()
{
core.AbstractFilter.call(this,
// vertex shader
null,
// fragment shader
"precision mediump float;\n\nvarying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\nuniform float blur;\nuniform float gradientBlur;\nuniform vec2 start;\nuniform vec2 end;\nuniform vec2 delta;\nuniform vec2 texSize;\n\nfloat random(vec3 scale, float seed)\n{\n return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);\n}\n\nvoid main(void)\n{\n vec4 color = vec4(0.0);\n float total = 0.0;\n\n float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);\n vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));\n float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;\n\n for (float t = -30.0; t <= 30.0; t++)\n {\n float percent = (t + offset - 0.5) / 30.0;\n float weight = 1.0 - abs(percent);\n vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);\n sample.rgb *= sample.a;\n color += sample * weight;\n total += weight;\n }\n\n gl_FragColor = color / total;\n gl_FragColor.rgb /= gl_FragColor.a + 0.00001;\n}\n",
// custom uniforms
{
blur: { type: '1f', value: 100 },
gradientBlur: { type: '1f', value: 600 },
start: { type: 'v2', value: { x: 0, y: window.innerHeight / 2 } },
end: { type: 'v2', value: { x: 600, y: window.innerHeight / 2 } },
delta: { type: 'v2', value: { x: 30, y: 30 } },
texSize: { type: 'v2', value: { x: window.innerWidth, y: window.innerHeight } }
}
);
this.updateDelta();
}
TiltShiftAxisFilter.prototype = Object.create(core.AbstractFilter.prototype);
TiltShiftAxisFilter.prototype.constructor = TiltShiftAxisFilter;
module.exports = TiltShiftAxisFilter;
/**
* Updates the filter delta values.
* This is overridden in the X and Y filters, does nothing for this class.
*
*/
TiltShiftAxisFilter.prototype.updateDelta = function ()
{
this.uniforms.delta.value.x = 0;
this.uniforms.delta.value.y = 0;
};
Object.defineProperties(TiltShiftAxisFilter.prototype, {
/**
* The strength of the blur.
*
* @member {number}
* @memberof TiltShiftAxisFilter#
*/
blur: {
get: function ()
{
return this.uniforms.blur.value;
},
set: function (value)
{
this.uniforms.blur.value = value;
}
},
/**
* The strength of the gradient blur.
*
* @member {number}
* @memberof TiltShiftAxisFilter#
*/
gradientBlur: {
get: function ()
{
return this.uniforms.gradientBlur.value;
},
set: function (value)
{
this.uniforms.gradientBlur.value = value;
}
},
/**
* The X value to start the effect at.
*
* @member {Point}
* @memberof TiltShiftAxisFilter#
*/
start: {
get: function ()
{
return this.uniforms.start.value;
},
set: function (value)
{
this.uniforms.start.value = value;
this.updateDelta();
}
},
/**
* The X value to end the effect at.
*
* @member {Point}
* @memberof TiltShiftAxisFilter#
*/
end: {
get: function ()
{
return this.uniforms.end.value;
},
set: function (value)
{
this.uniforms.end.value = value;
this.updateDelta();
}
}
});
},{"../../core":19}],100:[function(require,module,exports){
var core = require('../../core'),
TiltShiftXFilter = require('./TiltShiftXFilter'),
TiltShiftYFilter = require('./TiltShiftYFilter');
/**
* @author Vico @vicocotea
* original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/
*/
/**
* A TiltShift Filter. Manages the pass of both a TiltShiftXFilter and TiltShiftYFilter.
*
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
*/
function TiltShiftFilter()
{
core.AbstractFilter.call(this);
this.tiltShiftXFilter = new TiltShiftXFilter();
this.tiltShiftYFilter = new TiltShiftYFilter();
}
TiltShiftFilter.prototype = Object.create(core.AbstractFilter.prototype);
TiltShiftFilter.prototype.constructor = TiltShiftFilter;
module.exports = TiltShiftFilter;
TiltShiftFilter.prototype.applyFilter = function (renderer, input, output)
{
var renderTarget = renderer.filterManager.getRenderTarget(true);
this.tiltShiftXFilter.applyFilter(renderer, input, renderTarget);
this.tiltShiftYFilter.applyFilter(renderer, renderTarget, output);
renderer.filterManager.returnRenderTarget(renderTarget);
};
Object.defineProperties(TiltShiftFilter.prototype, {
/**
* The strength of the blur.
*
* @member {number}
* @memberof TiltShiftFilter#
*/
blur: {
get: function ()
{
return this.tiltShiftXFilter.blur;
},
set: function (value)
{
this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value;
}
},
/**
* The strength of the gradient blur.
*
* @member {number}
* @memberof TiltShiftFilter#
*/
gradientBlur: {
get: function ()
{
return this.tiltShiftXFilter.gradientBlur;
},
set: function (value)
{
this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value;
}
},
/**
* The Y value to start the effect at.
*
* @member {number}
* @memberof TiltShiftFilter#
*/
start: {
get: function ()
{
return this.tiltShiftXFilter.start;
},
set: function (value)
{
this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value;
}
},
/**
* The Y value to end the effect at.
*
* @member {number}
* @memberof TiltShiftFilter#
*/
end: {
get: function ()
{
return this.tiltShiftXFilter.end;
},
set: function (value)
{
this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value;
}
}
});
},{"../../core":19,"./TiltShiftXFilter":101,"./TiltShiftYFilter":102}],101:[function(require,module,exports){
var TiltShiftAxisFilter = require('./TiltShiftAxisFilter');
/**
* @author Vico @vicocotea
* original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/
*/
/**
* A TiltShiftXFilter.
*
* @class
* @extends TiltShiftAxisFilter
* @memberof PIXI.filters
*/
function TiltShiftXFilter()
{
TiltShiftAxisFilter.call(this);
}
TiltShiftXFilter.prototype = Object.create(TiltShiftAxisFilter.prototype);
TiltShiftXFilter.prototype.constructor = TiltShiftXFilter;
module.exports = TiltShiftXFilter;
/**
* Updates the filter delta values.
*
*/
TiltShiftXFilter.prototype.updateDelta = function ()
{
var dx = this.uniforms.end.value.x - this.uniforms.start.value.x;
var dy = this.uniforms.end.value.y - this.uniforms.start.value.y;
var d = Math.sqrt(dx * dx + dy * dy);
this.uniforms.delta.value.x = dx / d;
this.uniforms.delta.value.y = dy / d;
};
},{"./TiltShiftAxisFilter":99}],102:[function(require,module,exports){
var TiltShiftAxisFilter = require('./TiltShiftAxisFilter');
/**
* @author Vico @vicocotea
* original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/
*/
/**
* A TiltShiftYFilter.
*
* @class
* @extends TiltShiftAxisFilter
* @memberof PIXI.filters
*/
function TiltShiftYFilter()
{
TiltShiftAxisFilter.call(this);
}
TiltShiftYFilter.prototype = Object.create(TiltShiftAxisFilter.prototype);
TiltShiftYFilter.prototype.constructor = TiltShiftYFilter;
module.exports = TiltShiftYFilter;
/**
* Updates the filter delta values.
*
*/
TiltShiftYFilter.prototype.updateDelta = function ()
{
var dx = this.uniforms.end.value.x - this.uniforms.start.value.x;
var dy = this.uniforms.end.value.y - this.uniforms.start.value.y;
var d = Math.sqrt(dx * dx + dy * dy);
this.uniforms.delta.value.x = -dy / d;
this.uniforms.delta.value.y = dx / d;
};
},{"./TiltShiftAxisFilter":99}],103:[function(require,module,exports){
var core = require('../../core');
/**
* This filter applies a twist effect making display objects appear twisted in the given direction.
*
* @class
* @extends AbstractFilter
* @memberof PIXI.filters
*/
function TwistFilter()
{
core.AbstractFilter.call(this,
// vertex shader
null,
// fragment shader
"precision mediump float;\n\nvarying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\nuniform float radius;\nuniform float angle;\nuniform vec2 offset;\n\nvoid main(void)\n{\n vec2 coord = vTextureCoord - offset;\n float dist = length(coord);\n\n if (dist < radius)\n {\n float ratio = (radius - dist) / radius;\n float angleMod = ratio * ratio * angle;\n float s = sin(angleMod);\n float c = cos(angleMod);\n coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);\n }\n\n gl_FragColor = texture2D(uSampler, coord+offset);\n}\n",
// custom uniforms
{
radius: { type: '1f', value: 0.5 },
angle: { type: '1f', value: 5 },
offset: { type: 'v2', value: { x: 0.5, y: 0.5 } }
}
);
}
TwistFilter.prototype = Object.create(core.AbstractFilter.prototype);
TwistFilter.prototype.constructor = TwistFilter;
module.exports = TwistFilter;
Object.defineProperties(TwistFilter.prototype, {
/**
* This point describes the the offset of the twist.
*
* @member {Point}
* @memberof TwistFilter#
*/
offset: {
get: function ()
{
return this.uniforms.offset.value;
},
set: function (value)
{
this.uniforms.offset.value = value;
}
},
/**
* This radius of the twist.
*
* @member {number}
* @memberof TwistFilter#
*/
radius: {
get: function ()
{
return this.uniforms.radius.value;
},
set: function (value)
{
this.uniforms.radius.value = value;
}
},
/**
* This angle of the twist.
*
* @member {number}
* @memberof TwistFilter#
*/
angle: {
get: function ()
{
return this.uniforms.angle.value;
},
set: function (value)
{
this.uniforms.angle.value = value;
}
}
});
},{"../../core":19}],104:[function(require,module,exports){
var core = require('../core');
/**
* Holds all information related to an Interaction event
*
* @class
* @memberof PIXI.interaction
*/
function InteractionData()
{
/**
* This point stores the global coords of where the touch/mouse event happened
*
* @member {Point}
*/
this.global = new core.math.Point();
/**
* The target Sprite that was interacted with
*
* @member {Sprite}
*/
this.target = null;
/**
* When passed to an event handler, this will be the original DOM Event that was captured
*
* @member {Event}
*/
this.originalEvent = null;
}
InteractionData.prototype.constructor = InteractionData;
module.exports = InteractionData;
/**
* This will return the local coordinates of the specified displayObject for this InteractionData
*
* @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off
* @param [point] {Point} A Point object in which to store the value, optional (otherwise will create a new point)
* @return {Point} A point containing the coordinates of the InteractionData position relative to the DisplayObject
*/
InteractionData.prototype.getLocalPosition = function (displayObject, point)
{
var worldTransform = displayObject.worldTransform;
var global = this.global;
// do a cheeky transform to get the mouse coords;
var a00 = worldTransform.a, a01 = worldTransform.c, a02 = worldTransform.tx,
a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty,
id = 1 / (a00 * a11 + a01 * -a10);
point = point || new core.math.Point();
point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id;
point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id;
// set the mouse coords...
return point;
};
},{"../core":19}],105:[function(require,module,exports){
var core = require('../core'),
InteractionData = require('./InteractionData');
// TODO: Obviously rewrite this...
var INTERACTION_FREQUENCY = 10;
var AUTO_PREVENT_DEFAULT = true;
/**
* The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive
* if its interactive parameter is set to true
* This manager also supports multitouch.
*
* @class
* @memberof PIXI.interaction
* @param renderer {CanvasRenderer|WebGLRenderer} A reference to the current renderer
*/
function InteractionManager( renderer )
{
this.renderer = renderer;
/**
* The mouse data
*
* @member {InteractionData}
*/
this.mouse = new InteractionData();
/**
* An event data object to handle all the event tracking/dispatching
*
* @member {EventData}
*/
this.eventData = new core.utils.EventData();
this.eventData.data = this.mouse;
/**
* Tiny little interactiveData pool !
*
* @member {Array}
*/
this.interactiveDataPool = [];
/**
* The DOM element to bind to.
*
* @member {HTMLElement}
* @private
*/
this.interactionDOMElement = null;
/**
* Have events been attached to the dom element?
*
* @member {boolean}
* @private
*/
this.eventsAdded = false;
//this will make it so that you don't have to call bind all the time
/**
* @member {Function}
*/
this.onMouseUp = this.onMouseUp.bind(this);
this.processMouseUp = this.processMouseUp.bind( this );
/**
* @member {Function}
*/
this.onMouseDown = this.onMouseDown.bind(this);
this.processMouseDown = this.processMouseDown.bind( this );
/**
* @member {Function}
*/
this.onMouseMove = this.onMouseMove.bind( this );
this.processMouseMove = this.processMouseMove.bind( this );
/**
* @member {Function}
*/
this.onMouseOut = this.onMouseOut.bind(this);
this.processMouseOverOut = this.processMouseOverOut.bind( this );
/**
* @member {Function}
*/
this.onTouchStart = this.onTouchStart.bind(this);
this.processTouchStart = this.processTouchStart.bind(this);
/**
* @member {Function}
*/
this.onTouchEnd = this.onTouchEnd.bind(this);
this.processTouchEnd = this.processTouchEnd.bind(this);
/**
* @member {Function}
*/
this.onTouchMove = this.onTouchMove.bind(this);
this.processTouchMove = this.processTouchMove.bind(this);
/**
* @member {number}
*/
this.last = 0;
/**
* The css style of the cursor that is being used
* @member {string}
*/
this.currentCursorStyle = 'inherit';
/**
* Internal cached var
* @member {Point}
* @private
*/
this._tempPoint = new core.math.Point();
/**
* The current resolution
* @member {number}
*/
this.resolution = 1;
this.setTargetElement(this.renderer.view, this.renderer.resolution);
this.update();
}
InteractionManager.prototype.constructor = InteractionManager;
module.exports = InteractionManager;
/**
* Sets the DOM element which will receive mouse/touch events. This is useful for when you have
* other DOM elements on top of the renderers Canvas element. With this you'll be bale to deletegate
* another DOM element to receive those events.
*
* @param element {HTMLElement} the DOM element which will receive mouse and touch events.
* @param [resolution=1] {number} THe resolution of the new element (relative to the canvas).
* @private
*/
InteractionManager.prototype.setTargetElement = function (element, resolution)
{
this.removeEvents();
this.interactionDOMElement = element;
this.resolution = resolution || 1;
this.addEvents();
};
/**
* Registers all the DOM events
* @private
*/
InteractionManager.prototype.addEvents = function ()
{
if (!this.interactionDOMElement)
{
return;
}
if (window.navigator.msPointerEnabled)
{
this.interactionDOMElement.style['-ms-content-zooming'] = 'none';
this.interactionDOMElement.style['-ms-touch-action'] = 'none';
}
this.interactionDOMElement.addEventListener('mousemove', this.onMouseMove, true);
this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true);
this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true);
this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true);
this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true);
this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true);
window.addEventListener('mouseup', this.onMouseUp, true);
this.eventsAdded = true;
};
/**
* Removes all the DOM events that were previously registered
* @private
*/
InteractionManager.prototype.removeEvents = function ()
{
if (!this.interactionDOMElement)
{
return;
}
if (window.navigator.msPointerEnabled)
{
this.interactionDOMElement.style['-ms-content-zooming'] = '';
this.interactionDOMElement.style['-ms-touch-action'] = '';
}
this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true);
this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true);
this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true);
this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true);
this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true);
this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true);
this.interactionDOMElement = null;
window.removeEventListener('mouseup', this.onMouseUp, true);
this.eventsAdded = false;
};
/**
* updates the state of interactive objects
*
* @private
*/
InteractionManager.prototype.update = function ()
{
requestAnimationFrame(this.update.bind(this));
if( this.throttleUpdate() || !this.interactionDOMElement)
{
return;
}
// if the user move the mouse this check has already been dfone using the mouse move!
if(this.didMove)
{
this.didMove = false;
return;
}
this.cursor = 'inherit';
this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered , this.processMouseOverOut.bind(this) , true );
if (this.currentCursorStyle !== this.cursor)
{
this.currentCursorStyle = this.cursor;
this.interactionDOMElement.style.cursor = this.cursor;
}
//TODO
};
/**
* Dispatches an event on the display object that was interacted with
* @param displayObject {Container|Sprite|TilingSprite} the display object in question
* @param eventString {string} the name of the event (e.g, mousedown)
* @param eventData {EventData} the event data object
* @private
*/
InteractionManager.prototype.dispatchEvent = function ( displayObject, eventString, eventData )
{
if(!eventData.stopped)
{
eventData.target = displayObject;
eventData.type = eventString;
displayObject.emit( eventString, eventData );
if( displayObject[eventString] )
{
displayObject[eventString]( eventData );
}
}
};
/**
* Ensures the interaction checks don't happen too often by delaying the update loop
* @private
*/
InteractionManager.prototype.throttleUpdate = function ()
{
// frequency of 30fps??
var now = Date.now();
var diff = now - this.last;
diff = (diff * INTERACTION_FREQUENCY ) / 1000;
if (diff < 1)
{
return true;
}
this.last = now;
return false;
};
/**
* Maps x and y coords from a DOM object and maps them correctly to the pixi view. The resulting value is stored in the point.
* This takes into account the fact that the DOM element could be scaled and positioned anywhere on the screen.
*
* @param {Point} point the point that the result will be stored in
* @param {number} x the x coord of the position to map
* @param {number} y the y coord of the position to map
*/
InteractionManager.prototype.mapPositionToPoint = function ( point, x, y )
{
var rect = this.interactionDOMElement.getBoundingClientRect();
point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution;
point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution;
};
/**
* This function is provides a neat way of crawling through the scene graph and running a specified function on all interactive objects it finds.
* It will also take care of hit testing the interactive objects and passes the hit across in the function.
*
* @param {Point} point the point that is tested for collision
* @param {Container|Sprite|TilingSprite} displayObject the displayObject that will be hit test (recurcsivly crawls its children)
* @param {function} func the function that will be called on each interactive object. The displayObject and hit will be passed to the function
* @param {boolean} hitTest this indicates if the objects inside should be hit test against the point
* @return {boolean} returns true if the displayObject hit the point
*/
InteractionManager.prototype.processInteractive = function (point, displayObject, func, hitTest, interactive )
{
if(!displayObject.visible)
{
return false;
}
var children = displayObject.children;
var hit = false;
// if the object is interactive we must hit test all its children..
interactive = interactive || displayObject.interactive;
if(displayObject.interactiveChildren)
{
for (var i = children.length-1; i >= 0; i--)
{
if(! hit && hitTest)
{
hit = this.processInteractive(point, children[i], func, true, interactive );
}
else
{
// now we know we can miss it all!
this.processInteractive(point, children[i], func, false, false );
}
}
}
if(interactive)
{
if(hitTest)
{
if(displayObject.hitArea)
{
// lets use the hit object first!
displayObject.worldTransform.applyInverse(point, this._tempPoint);
hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y );
}
else if(displayObject.containsPoint)
{
hit = displayObject.containsPoint(point);
}
}
if(displayObject.interactive)
{
func(displayObject, hit);
}
}
return hit;
};
/**
* Is called when the mouse button is pressed down on the renderer element
*
* @param event {Event} The DOM event of a mouse button being pressed down
* @private
*/
InteractionManager.prototype.onMouseDown = function (event)
{
this.mouse.originalEvent = event;
this.eventData.data = this.mouse;
this.eventData.stopped = false;
if (AUTO_PREVENT_DEFAULT)
{
this.mouse.originalEvent.preventDefault();
}
this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true );
};
/**
* Processes the result of the mouse down check and dispatches the event if need be
*
* @param displayObject {Container|Sprite|TilingSprite} The display object that was tested
* @param hit {boolean} the result of the hit test on the dispay object
* @private
*/
InteractionManager.prototype.processMouseDown = function ( displayObject, hit )
{
var e = this.mouse.originalEvent;
var isRightButton = e.button === 2 || e.which === 3;
if(hit)
{
displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true;
this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData );
}
};
/**
* Is called when the mouse button is released on the renderer element
*
* @param event {Event} The DOM event of a mouse button being released
* @private
*/
InteractionManager.prototype.onMouseUp = function (event)
{
this.mouse.originalEvent = event;
this.eventData.data = this.mouse;
this.eventData.stopped = false;
this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true );
};
/**
* Processes the result of the mouse up check and dispatches the event if need be
*
* @param displayObject {Container|Sprite|TilingSprite} The display object that was tested
* @param hit {boolean} the result of the hit test on the display object
* @private
*/
InteractionManager.prototype.processMouseUp = function ( displayObject, hit )
{
var e = this.mouse.originalEvent;
var isRightButton = e.button === 2 || e.which === 3;
var isDown = isRightButton ? '_isRightDown' : '_isLeftDown';
if(hit)
{
this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData );
if( displayObject[ isDown ] )
{
displayObject[ isDown ] = false;
this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData );
}
}
else
{
if( displayObject[ isDown ] )
{
displayObject[ isDown ] = false;
this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData );
}
}
};
/**
* Is called when the mouse moves across the renderer element
*
* @param event {Event} The DOM event of the mouse moving
* @private
*/
InteractionManager.prototype.onMouseMove = function (event)
{
this.mouse.originalEvent = event;
this.eventData.data = this.mouse;
this.eventData.stopped = false;
this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY);
this.didMove = true;
this.cursor = 'inherit';
this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true );
if (this.currentCursorStyle !== this.cursor)
{
this.currentCursorStyle = this.cursor;
this.interactionDOMElement.style.cursor = this.cursor;
}
//TODO BUG for parents ineractive object (border order issue)
};
/**
* Processes the result of the mouse move check and dispatches the event if need be
*
* @param displayObject {Container|Sprite|TilingSprite} The display object that was tested
* @param hit {boolean} the result of the hit test on the display object
* @private
*/
InteractionManager.prototype.processMouseMove = function ( displayObject, hit )
{
this.dispatchEvent( displayObject, 'mousemove', this.eventData);
this.processMouseOverOut(displayObject, hit);
};
/**
* Is called when the mouse is moved out of the renderer element
*
* @param event {Event} The DOM event of a mouse being moved out
* @private
*/
InteractionManager.prototype.onMouseOut = function (event)
{
this.mouse.originalEvent = event;
this.eventData.stopped = false;
this.interactionDOMElement.style.cursor = 'inherit';
// TODO optimize by not check EVERY TIME! maybe half as often? //
this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY );
this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false );
};
/**
* Processes the result of the mouse over/out check and dispatches the event if need be
*
* @param displayObject {Container|Sprite|TilingSprite} The display object that was tested
* @param hit {boolean} the result of the hit test on the display object
* @private
*/
InteractionManager.prototype.processMouseOverOut = function ( displayObject, hit )
{
if(hit)
{
if(!displayObject._over)
{
displayObject._over = true;
this.dispatchEvent( displayObject, 'mouseover', this.eventData );
}
if (displayObject.buttonMode)
{
this.cursor = displayObject.defaultCursor;
}
}
else
{
if(displayObject._over)
{
displayObject._over = false;
this.dispatchEvent( displayObject, 'mouseout', this.eventData);
}
}
};
/**
* Is called when a touch is started on the renderer element
*
* @param event {Event} The DOM event of a touch starting on the renderer view
* @private
*/
InteractionManager.prototype.onTouchStart = function (event)
{
if (AUTO_PREVENT_DEFAULT)
{
event.preventDefault();
}
var changedTouches = event.changedTouches;
for (var i=0; i < changedTouches.length; i++)
{
var touchEvent = changedTouches[i];
//TODO POOL
var touchData = this.getTouchData( touchEvent );
touchData.originalEvent = event;
this.eventData.data = touchData;
this.eventData.stopped = false;
this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true );
this.returnTouchData( touchData );
}
};
/**
* Processes the result of a touch check and dispatches the event if need be
*
* @param displayObject {Container|Sprite|TilingSprite} The display object that was tested
* @param hit {boolean} the result of the hit test on the display object
* @private
*/
InteractionManager.prototype.processTouchStart = function ( displayObject, hit )
{
//console.log("hit" + hit)
if(hit)
{
displayObject._touchDown = true;
this.dispatchEvent( displayObject, 'touchstart', this.eventData );
}
};
/**
* Is called when a touch ends on the renderer element
* @param event {Event} The DOM event of a touch ending on the renderer view
*
*/
InteractionManager.prototype.onTouchEnd = function (event)
{
if (AUTO_PREVENT_DEFAULT)
{
event.preventDefault();
}
var changedTouches = event.changedTouches;
for (var i=0; i < changedTouches.length; i++)
{
var touchEvent = changedTouches[i];
var touchData = this.getTouchData( touchEvent );
touchData.originalEvent = event;
//TODO this should be passed along.. no set
this.eventData.data = touchData;
this.eventData.stopped = false;
this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true );
this.returnTouchData( touchData );
}
};
/**
* Processes the result of the end of a touch and dispatches the event if need be
*
* @param displayObject {Container|Sprite|TilingSprite} The display object that was tested
* @param hit {boolean} the result of the hit test on the display object
* @private
*/
InteractionManager.prototype.processTouchEnd = function ( displayObject, hit )
{
if(hit)
{
this.dispatchEvent( displayObject, 'touchend', this.eventData );
if( displayObject._touchDown )
{
displayObject._touchDown = false;
this.dispatchEvent( displayObject, 'tap', this.eventData );
}
}
else
{
if( displayObject._touchDown )
{
displayObject._touchDown = false;
this.dispatchEvent( displayObject, 'touchendoutside', this.eventData );
}
}
};
/**
* Is called when a touch is moved across the renderer element
*
* @param event {Event} The DOM event of a touch moving across the renderer view
* @private
*/
InteractionManager.prototype.onTouchMove = function (event)
{
if (AUTO_PREVENT_DEFAULT)
{
event.preventDefault();
}
var changedTouches = event.changedTouches;
for (var i=0; i < changedTouches.length; i++)
{
var touchEvent = changedTouches[i];
var touchData = this.getTouchData( touchEvent );
touchData.originalEvent = event;
this.eventData.data = touchData;
this.eventData.stopped = false;
this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, false );
this.returnTouchData( touchData );
}
};
/**
* Processes the result of a touch move check and dispatches the event if need be
*
* @param displayObject {Container|Sprite|TilingSprite} The display object that was tested
* @param hit {boolean} the result of the hit test on the display object
* @private
*/
InteractionManager.prototype.processTouchMove = function ( displayObject, hit )
{
hit = hit;
this.dispatchEvent( displayObject, 'touchmove', this.eventData);
};
/**
* Grabs an interaction data object from the internal pool
*
* @param touchEvent {EventData} The touch event we need to pair with an interactionData object
*
* @private
*/
InteractionManager.prototype.getTouchData = function (touchEvent)
{
var touchData = this.interactiveDataPool.pop();
if(!touchData)
{
touchData = new InteractionData();
}
touchData.identifier = touchEvent.identifier;
this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY );
return touchData;
};
/**
* Returns an interaction data object to the internal pool
*
* @param touchData {InteractionData} The touch data object we want to return to the pool
*
* @private
*/
InteractionManager.prototype.returnTouchData = function ( touchData )
{
this.interactiveDataPool.push( touchData );
};
core.WebGLRenderer.registerPlugin('interaction', InteractionManager);
core.CanvasRenderer.registerPlugin('interaction', InteractionManager);
},{"../core":19,"./InteractionData":104}],106:[function(require,module,exports){
/**
* @file Main export of the PIXI interactions library
* @author Mat Groves <mat@goodboydigital.com>
* @copyright 2013-2015 GoodBoyDigital
* @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License}
*/
/**
* @namespace PIXI.interaction
*/
module.exports = {
InteractionData: require('./InteractionData'),
InteractionManager: require('./InteractionManager'),
interactiveTarget: require('./interactiveTarget')
};
},{"./InteractionData":104,"./InteractionManager":105,"./interactiveTarget":107}],107:[function(require,module,exports){
var core = require('../core');
core.DisplayObject.prototype.interactive = false;
core.DisplayObject.prototype.buttonMode = false;
core.DisplayObject.prototype.interactiveChildren = true;
core.DisplayObject.prototype.defaultCursor = 'pointer';
// some internal checks..
core.DisplayObject.prototype._over = false;
core.DisplayObject.prototype._touchDown = false;
module.exports = {};
},{"../core":19}],108:[function(require,module,exports){
var Resource = require('resource-loader').Resource,
core = require('../core'),
text = require('../text');
module.exports = function ()
{
return function (resource, next)
{
if (!resource.data || navigator.isCocoonJS)
{
if (window.DOMParser)
{
var domparser = new DOMParser();
resource.data = domparser.parseFromString(this.xhr.responseText, 'text/xml');
}
else
{
var div = document.createElement('div');
div.innerHTML = this.xhr.responseText;
resource.data = div;
}
}
var name = resource.data.nodeName;
// skip if no data
if (!resource.data || !name || (name.toLowerCase() !== '#document' && name.toLowerCase() !== 'div'))
{
return next();
}
var textureUrl = resource.data.getElementsByTagName('page')[0].getAttribute('file');
var loadOptions = {
crossOrigin: resource.crossOrigin,
loadType: Resource.LOAD_TYPE.IMAGE
};
// load the texture for the font
this.add(resource.name + '_image', textureUrl, loadOptions, function (res)
{
var data = {};
var info = resource.data.getElementsByTagName('info')[0];
var common = resource.data.getElementsByTagName('common')[0];
data.font = info.getAttribute('face');
data.size = parseInt(info.getAttribute('size'), 10);
data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10);
data.chars = {};
//parse letters
var letters = resource.data.getElementsByTagName('char');
for (var i = 0; i < letters.length; i++)
{
var charCode = parseInt(letters[i].getAttribute('id'), 10);
var textureRect = new core.math.Rectangle(
parseInt(letters[i].getAttribute('x'), 10),
parseInt(letters[i].getAttribute('y'), 10),
parseInt(letters[i].getAttribute('width'), 10),
parseInt(letters[i].getAttribute('height'), 10)
);
data.chars[charCode] = {
xOffset: parseInt(letters[i].getAttribute('xoffset'), 10),
yOffset: parseInt(letters[i].getAttribute('yoffset'), 10),
xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10),
kerning: {},
texture: core.utils.TextureCache[charCode] = new core.Texture(res.texture.baseTexture, textureRect)
};
}
//parse kernings
var kernings = resource.data.getElementsByTagName('kerning');
for (i = 0; i < kernings.length; i++)
{
var first = parseInt(kernings[i].getAttribute('first'), 10);
var second = parseInt(kernings[i].getAttribute('second'), 10);
var amount = parseInt(kernings[i].getAttribute('amount'), 10);
data.chars[second].kerning[first] = amount;
}
resource.bitmapFont = data;
// I'm leaving this as a temporary fix so we can test the bitmap fonts in v3
// but it's very likely to change
text.BitmapText.fonts[data.font] = data;
next();
});
};
};
},{"../core":19,"../text":124,"resource-loader":7}],109:[function(require,module,exports){
/**
* @file Main export of the PIXI loaders library
* @author Mat Groves <mat@goodboydigital.com>
* @copyright 2013-2015 GoodBoyDigital
* @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License}
*/
/**
* @namespace PIXI.loaders
*/
module.exports = {
Loader: require('./loader'),
// parsers
bitmapFontParser: require('./bitmapFontParser'),
spineAtlasParser: require('./spineAtlasParser'),
spritesheetParser: require('./spritesheetParser'),
textureParser: require('./textureParser')
};
module.exports.loader = new module.exports.Loader();
},{"./bitmapFontParser":108,"./loader":110,"./spineAtlasParser":111,"./spritesheetParser":112,"./textureParser":113}],110:[function(require,module,exports){
var ResourceLoader = require('resource-loader'),
textureParser = require('./textureParser'),
spritesheetParser = require('./spritesheetParser'),
spineAtlasParser = require('./spineAtlasParser'),
bitmapFontParser = require('./bitmapFontParser');
/**
*
* The new loader, extends Resource Loader by Chad Engler : https://github.com/englercj/resource-loader
*
* ```js
* var loader = new PIXI.loader();
*
* loader.add('spineboy',"data/spineboy.json");
*
* loader.once('complete',onAssetsLoaded);
*
* loader.load();
* ```
*
* @class
* @extends ResourceLoader
* @memberof PIXI.loaders
*/
var Loader = function()
{
ResourceLoader.call(this);
// parse any json strings into objects
this.use(ResourceLoader.middleware.parsing.json())
// parse any blob into more usable objects (e.g. Image)
.use(ResourceLoader.middleware.parsing.blob())
// parse any Image objects into textures
.use(textureParser())
// parse any spritesheet data into multiple textures
.use(spritesheetParser())
// parse any spine data into a spine object
.use(spineAtlasParser())
// parse any spritesheet data into multiple textures
.use(bitmapFontParser());
};
Loader.prototype = Object.create(ResourceLoader.prototype);
Loader.prototype.constructor = Loader;
module.exports = Loader;
},{"./bitmapFontParser":108,"./spineAtlasParser":111,"./spritesheetParser":112,"./textureParser":113,"resource-loader":7}],111:[function(require,module,exports){
var Resource = require('resource-loader').Resource,
async = require('async'),
spine = require('../spine');
module.exports = function ()
{
return function (resource, next)
{
// if this is a spritesheet object
if (resource.data && resource.data.bones)
{
/**
* use a bit of hackery to load the atlas file, here we assume that the .json, .atlas and .png files
* that correspond to the spine file are in the same base URL and that the .json and .atlas files
* have the same name
*/
var atlasPath = resource.url.substr(0, resource.url.lastIndexOf('.')) + '.atlas';
var atlasOptions = {
crossOrigin: resource.crossOrigin,
xhrType: Resource.XHR_RESPONSE_TYPE.TEXT
};
var baseUrl = resource.url.substr(0, resource.url.lastIndexOf('/') + 1);
this.add(resource.name + '_atlas', atlasPath, atlasOptions, function (res)
{
// create a spine atlas using the loaded text
var spineAtlas = new spine.SpineRuntime.Atlas(this.xhr.responseText, baseUrl, res.crossOrigin);
// spine animation
var spineJsonParser = new spine.SpineRuntime.SkeletonJsonParser(new spine.SpineRuntime.AtlasAttachmentParser(spineAtlas));
var skeletonData = spineJsonParser.readSkeletonData(resource.data);
resource.spineData = skeletonData;
resource.spineAtlas = spineAtlas;
// Go through each spineAtlas.pages and wait for page.rendererObject (a baseTexture) to
// load. Once all loaded, then call the next function.
async.each(spineAtlas.pages, function (page, done)
{
if (page.rendererObject.hasLoaded)
{
done();
}
else
{
page.rendererObject.once('loaded', done);
}
}, next);
});
}
else {
next();
}
};
};
},{"../spine":121,"async":1,"resource-loader":7}],112:[function(require,module,exports){
var Resource = require('resource-loader').Resource,
path = require('path'),
core = require('../core');
module.exports = function ()
{
return function (resource, next)
{
// if this is a spritesheet object
if (resource.data && resource.data.frames)
{
var loadOptions = {
crossOrigin: resource.crossOrigin,
loadType: Resource.LOAD_TYPE.IMAGE
};
var route = path.dirname(resource.url.replace(this.baseUrl, ''));
var resolution = core.utils.getResolutionOfUrl( resource.url );
// load the image for this sheet
this.add(resource.name + '_image', route + '/' + resource.data.meta.image, loadOptions, function (res)
{
resource.textures = {};
var frames = resource.data.frames;
for (var i in frames)
{
var rect = frames[i].frame;
if (rect)
{
var size = null;
var trim = null;
if (frames[i].rotated) {
size = new core.math.Rectangle(rect.x, rect.y, rect.h, rect.w);
}
else {
size = new core.math.Rectangle(rect.x, rect.y, rect.w, rect.h);
}
// Check to see if the sprite is trimmed
if (frames[i].trimmed)
{
trim = new core.math.Rectangle(
frames[i].spriteSourceSize.x / resolution,
frames[i].spriteSourceSize.y / resolution,
frames[i].sourceSize.w / resolution,
frames[i].sourceSize.h / resolution
);
}
// flip the width and height!
if (frames[i].rotated)
{
var temp = size.width;
size.width = size.height;
size.height = temp;
}
size.x /= resolution;
size.y /= resolution;
size.width /= resolution;
size.height /= resolution;
resource.textures[i] = new core.Texture(res.texture.baseTexture, size, size.clone(), trim, frames[i].rotated);
// lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions
core.utils.TextureCache[i] = resource.textures[i];
}
}
next();
});
}
else {
next();
}
};
};
},{"../core":19,"path":2,"resource-loader":7}],113:[function(require,module,exports){
var core = require('../core');
module.exports = function ()
{
return function (resource, next)
{
// create a new texture if the data is an Image object
if (resource.data && resource.data.nodeName && resource.data.nodeName.toLowerCase() === 'img')
{
resource.texture = new core.Texture(new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)));
// lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions
core.utils.TextureCache[resource.url] = resource.texture;
}
next();
};
};
},{"../core":19}],114:[function(require,module,exports){
var core = require('../core');
/**
* Base mesh class
* @class
* @extends Container
* @memberof PIXI.extras
* @param texture {Texture} The texture to use
* @param [vertices] {Float32Arrif you want to specify the vertices
* @param [uvs] {Float32Array} if you want to specify the uvs
* @param [indices] {Uint16Array} if you want to specify the indices
* @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts
*/
function Mesh(texture, vertices, uvs, indices, drawMode)
{
core.Container.call(this);
/**
* The texture of the Mesh
*
* @member {Texture}
*/
this.texture = texture;
/**
* The Uvs of the Mesh
*
* @member {Float32Array}
*/
this.uvs = uvs || new Float32Array([0, 1,
1, 1,
1, 0,
0, 1]);
/**
* An array of vertices
*
* @member {Float32Array}
*/
this.vertices = vertices || new Float32Array([0, 0,
100, 0,
100, 100,
0, 100]);
/*
* @member {Uint16Array} An array containing the indices of the vertices
*/
// TODO auto generate this based on draw mode!
this.indices = indices || new Uint16Array([0, 1, 2, 3]);
/**
* Whether the Mesh is dirty or not
*
* @member {boolean}
*/
this.dirty = true;
/**
* The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode.
*
* @member {number}
* @default CONST.BLEND_MODES.NORMAL;
*/
this.blendMode = core.CONST.BLEND_MODES.NORMAL;
/**
* Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other.
*
* @member {number}=
*/
this.canvasPadding = 0;
/**
* The way the Mesh should be drawn, can be any of the Mesh.DRAW_MODES consts
*
* @member {number}
*/
this.drawMode = drawMode || Mesh.DRAW_MODES.TRIANGLE_MESH;
}
// constructor
Mesh.prototype = Object.create(core.Container.prototype);
Mesh.prototype.constructor = Mesh;
module.exports = Mesh;
/**
* Renders the object using the WebGL renderer
*
* @param renderer {WebGLRenderer} a reference to the WebGL renderer
*/
Mesh.prototype._renderWebGL = function (renderer)
{
renderer.setObjectRenderer(renderer.plugins.mesh);
renderer.plugins.mesh.render(this);
};
/**
* Renders the object using the Canvas renderer
*
* @param renderer {CanvasRenderer}
*/
Mesh.prototype._renderCanvas = function (renderer)
{
var context = renderer.context;
var transform = this.worldTransform;
if (renderer.roundPixels)
{
context.setTransform(transform.a, transform.b, transform.c, transform.d, transform.tx | 0, transform.ty | 0);
}
else
{
context.setTransform(transform.a, transform.b, transform.c, transform.d, transform.tx, transform.ty);
}
if (this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH)
{
this._renderCanvasTriangleMesh(context);
}
else
{
this._renderCanvasTriangles(context);
}
};
/**
* Draws the object in Triangle Mesh mode using canvas
*
* @param context {CanvasRenderingContext2D} the current drawing context
* @private
*/
Mesh.prototype._renderCanvasTriangleMesh = function (context)
{
// draw triangles!!
var vertices = this.vertices;
var uvs = this.uvs;
var length = vertices.length / 2;
// this.count++;
for (var i = 0; i < length - 2; i++)
{
// draw some triangles!
var index = i * 2;
this._renderCanvasDrawTriangle(context, vertices, uvs, index, (index + 2), (index + 4));
}
};
/**
* Draws the object in triangle mode using canvas
*
* @param context {CanvasRenderingContext2D} the current drawing context
* @private
*/
Mesh.prototype._renderCanvasTriangles = function (context)
{
// draw triangles!!
var vertices = this.vertices;
var uvs = this.uvs;
var indices = this.indices;
var length = indices.length;
// this.count++;
for (var i = 0; i < length; i += 3)
{
// draw some triangles!
var index0 = indices[i] * 2, index1 = indices[i + 1] * 2, index2 = indices[i + 2] * 2;
this._renderCanvasDrawTriangle(context, vertices, uvs, index0, index1, index2);
}
};
/**
* Draws one of the triangles that form this Mesh
*
* @param context {CanvasRenderingContext2D} the current drawing context
* @param vertices {Float32Array} a reference to the vertices of the Mesh
* @param uvs {Float32Array} a reference to the uvs of the Mesh
* @param index0 {number} the index of the first vertex
* @param index1 {number} the index of the second vertex
* @param index2 {number} the index of the third vertex
* @private
*/
Mesh.prototype._renderCanvasDrawTriangle = function (context, vertices, uvs, index0, index1, index2)
{
var textureSource = this.texture.baseTexture.source;
var textureWidth = this.texture.width;
var textureHeight = this.texture.height;
var x0 = vertices[index0], x1 = vertices[index1], x2 = vertices[index2];
var y0 = vertices[index0 + 1], y1 = vertices[index1 + 1], y2 = vertices[index2 + 1];
var u0 = uvs[index0] * textureWidth, u1 = uvs[index1] * textureWidth, u2 = uvs[index2] * textureWidth;
var v0 = uvs[index0 + 1] * textureHeight, v1 = uvs[index1 + 1] * textureHeight, v2 = uvs[index2 + 1] * textureHeight;
if (this.canvasPadding > 0)
{
var paddingX = this.canvasPadding / this.worldTransform.a;
var paddingY = this.canvasPadding / this.worldTransform.d;
var centerX = (x0 + x1 + x2) / 3;
var centerY = (y0 + y1 + y2) / 3;
var normX = x0 - centerX;
var normY = y0 - centerY;
var dist = Math.sqrt(normX * normX + normY * normY);
x0 = centerX + (normX / dist) * (dist + paddingX);
y0 = centerY + (normY / dist) * (dist + paddingY);
//
normX = x1 - centerX;
normY = y1 - centerY;
dist = Math.sqrt(normX * normX + normY * normY);
x1 = centerX + (normX / dist) * (dist + paddingX);
y1 = centerY + (normY / dist) * (dist + paddingY);
normX = x2 - centerX;
normY = y2 - centerY;
dist = Math.sqrt(normX * normX + normY * normY);
x2 = centerX + (normX / dist) * (dist + paddingX);
y2 = centerY + (normY / dist) * (dist + paddingY);
}
context.save();
context.beginPath();
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.closePath();
context.clip();
// Compute matrix transform
var delta = (u0 * v1) + (v0 * u2) + (u1 * v2) - (v1 * u2) - (v0 * u1) - (u0 * v2);
var deltaA = (x0 * v1) + (v0 * x2) + (x1 * v2) - (v1 * x2) - (v0 * x1) - (x0 * v2);
var deltaB = (u0 * x1) + (x0 * u2) + (u1 * x2) - (x1 * u2) - (x0 * u1) - (u0 * x2);
var deltaC = (u0 * v1 * x2) + (v0 * x1 * u2) + (x0 * u1 * v2) - (x0 * v1 * u2) - (v0 * u1 * x2) - (u0 * x1 * v2);
var deltaD = (y0 * v1) + (v0 * y2) + (y1 * v2) - (v1 * y2) - (v0 * y1) - (y0 * v2);
var deltaE = (u0 * y1) + (y0 * u2) + (u1 * y2) - (y1 * u2) - (y0 * u1) - (u0 * y2);
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(textureSource, 0, 0);
context.restore();
};
/**
* Renders a flat Mesh
*
* @param Mesh {Mesh} The Mesh to render
* @private
*/
Mesh.prototype.renderMeshFlat = function (Mesh)
{
var context = this.context;
var vertices = Mesh.vertices;
var length = vertices.length/2;
// this.count++;
context.beginPath();
for (var i=1; i < length-2; i++)
{
// draw some triangles!
var index = i*2;
var x0 = vertices[index], x1 = vertices[index+2], x2 = vertices[index+4];
var y0 = vertices[index+1], y1 = vertices[index+3], y2 = vertices[index+5];
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
}
context.fillStyle = '#FF0000';
context.fill();
context.closePath();
};
/*
Mesh.prototype.setTexture = function (texture)
{
//TODO SET THE TEXTURES
//TODO VISIBILITY
//TODO SETTER
// stop current texture
this.texture = texture;
this.width = texture.frame.width;
this.height = texture.frame.height;
this.updateFrame = true;
};
*/
/**
* When the texture is updated, this event will fire to update the scale and frame
*
* @param event
* @private
*/
Mesh.prototype.onTextureUpdate = function ()
{
this.updateFrame = true;
};
/**
* Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account.
*
* @param matrix {Matrix} the transformation matrix of the sprite
* @return {Rectangle} the framing rectangle
*/
Mesh.prototype.getBounds = function (matrix)
{
var worldTransform = matrix || this.worldTransform;
var a = worldTransform.a;
var b = worldTransform.b;
var c = worldTransform.c;
var d = worldTransform.d;
var tx = worldTransform.tx;
var ty = worldTransform.ty;
var maxX = -Infinity;
var maxY = -Infinity;
var minX = Infinity;
var minY = Infinity;
var vertices = this.vertices;
for (var i = 0, n = vertices.length; i < n; i += 2)
{
var rawX = vertices[i], rawY = vertices[i + 1];
var x = (a * rawX) + (c * rawY) + tx;
var y = (d * rawY) + (b * rawX) + ty;
minX = x < minX ? x : minX;
minY = y < minY ? y : minY;
maxX = x > maxX ? x : maxX;
maxY = y > maxY ? y : maxY;
}
if (minX === -Infinity || maxY === Infinity)
{
return core.math.Rectangle.EMPTY;
}
var bounds = this._bounds;
bounds.x = minX;
bounds.width = maxX - minX;
bounds.y = minY;
bounds.height = maxY - minY;
// store a reference so that if this function gets called again in the render cycle we do not have to recalculate
this._currentBounds = bounds;
return bounds;
};
/**
* Different drawing buffer modes supported
*
* @static
* @constant
* @property {object} DRAW_MODES
* @property {number} DRAW_MODES.TRIANGLE_MESH
* @property {number} DRAW_MODES.TRIANGLES
*/
Mesh.DRAW_MODES = {
TRIANGLE_MESH: 0,
TRIANGLES: 1
};
},{"../core":19}],115:[function(require,module,exports){
var Mesh = require('./Mesh');
/**
* The rope allows you to draw a texture across several points and them manipulate these points
*
*```js
* for (var i = 0; i < 20; i++) {
* points.push(new PIXI.Point(i * 50, 0));
* };
* var rope = new PIXI.Rope(PIXI.Texture.fromImage("snake.png"), points);
* ```
*
* @class
* @extends Mesh
* @memberof PIXI.extras
* @param {Texture} texture - The texture to use on the rope.
* @param {Array} points - An array of {Point} objects to construct this rope.
*
*/
function Rope(texture, points)
{
Mesh.call(this, texture);
/*
* @member {Array} An array of points that determine the rope
*/
this.points = points;
/*
* @member {Float32Array} An array of vertices used to construct this rope.
*/
this.vertices = new Float32Array(points.length * 4);
/*
* @member {Float32Array} The WebGL Uvs of the rope.
*/
this.uvs = new Float32Array(points.length * 4);
/*
* @member {Float32Array} An array containing the color components
*/
this.colors = new Float32Array(points.length * 2);
/*
* @member {Uint16Array} An array containing the indices of the vertices
*/
this.indices = new Uint16Array(points.length * 2);
this.refresh();
}
// constructor
Rope.prototype = Object.create(Mesh.prototype);
Rope.prototype.constructor = Rope;
module.exports = Rope;
/**
* Refreshes
*
*/
Rope.prototype.refresh = function ()
{
var points = this.points;
if (points.length < 1)
{
return;
}
var uvs = this.uvs;
var indices = this.indices;
var colors = this.colors;
// this.count -= 0.2;
uvs[0] = 0;
uvs[1] = 0;
uvs[2] = 0;
uvs[3] = 1;
colors[0] = 1;
colors[1] = 1;
indices[0] = 0;
indices[1] = 1;
var total = points.length,
point, index, amount;
for (var i = 1; i < total; i++)
{
point = points[i];
index = i * 4;
// time to do some smart drawing!
amount = i / (total-1);
if (i%2)
{
uvs[index] = amount;
uvs[index+1] = 0;
uvs[index+2] = amount;
uvs[index+3] = 1;
}
else
{
uvs[index] = amount;
uvs[index+1] = 0;
uvs[index+2] = amount;
uvs[index+3] = 1;
}
index = i * 2;
colors[index] = 1;
colors[index+1] = 1;
index = i * 2;
indices[index] = index;
indices[index + 1] = index + 1;
}
};
/*
* Updates the object transform for rendering
*
* @private
*/
Rope.prototype.updateTransform = function ()
{
var points = this.points;
if (points.length < 1)
{
return;
}
var lastPoint = points[0];
var nextPoint;
var perpX = 0;
var perpY = 0;
// this.count -= 0.2;
var vertices = this.vertices;
var total = points.length,
point, index, ratio, perpLength, num;
for (var i = 0; i < total; i++)
{
point = points[i];
index = i * 4;
if (i < points.length-1)
{
nextPoint = points[i+1];
}
else
{
nextPoint = point;
}
perpY = -(nextPoint.x - lastPoint.x);
perpX = nextPoint.y - lastPoint.y;
ratio = (1 - (i / (total-1))) * 10;
if (ratio > 1)
{
ratio = 1;
}
perpLength = Math.sqrt(perpX * perpX + perpY * perpY);
num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio;
perpX /= perpLength;
perpY /= perpLength;
perpX *= num;
perpY *= num;
vertices[index] = point.x + perpX;
vertices[index+1] = point.y + perpY;
vertices[index+2] = point.x - perpX;
vertices[index+3] = point.y - perpY;
lastPoint = point;
}
this.containerUpdateTransform();
};
},{"./Mesh":114}],116:[function(require,module,exports){
/**
* @file Main export of the PIXI extras library
* @author Mat Groves <mat@goodboydigital.com>
* @copyright 2013-2015 GoodBoyDigital
* @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License}
*/
/**
* @namespace PIXI.extras
*/
module.exports = {
Mesh: require('./Mesh'),
Rope: require('./Rope'),
MeshRenderer: require('./webgl/MeshRenderer'),
MeshShader: require('./webgl/MeshShader')
};
},{"./Mesh":114,"./Rope":115,"./webgl/MeshRenderer":117,"./webgl/MeshShader":118}],117:[function(require,module,exports){
var ObjectRenderer = require('../../core/renderers/webgl/utils/ObjectRenderer'),
WebGLRenderer = require('../../core/renderers/webgl/WebGLRenderer');
/**
* @author Mat Groves
*
* Big thanks to the very clever Matt DesLauriers <mattdesl> https://github.com/mattdesl/
* for creating the original pixi version!
* Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now share 4 bytes on the vertex buffer
*
* Heavily inspired by LibGDX's MeshRenderer:
* https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/MeshRenderer.java
*/
/**
*
* @class
* @private
* @memberof PIXI
* @extends ObjectRenderer
* @param renderer {WebGLRenderer} The renderer this sprite batch works for.
*/
function MeshRenderer(renderer)
{
ObjectRenderer.call(this, renderer);
/**
* Holds the indices
*
* @member {Uint16Array}
*/
this.indices = new Uint16Array(15000);
//TODO this could be a single buffer shared amongst all renderers as we reuse this set up in most renderers
for (var i=0, j=0; i < 15000; i += 6, j += 4)
{
this.indices[i + 0] = j + 0;
this.indices[i + 1] = j + 1;
this.indices[i + 2] = j + 2;
this.indices[i + 3] = j + 0;
this.indices[i + 4] = j + 2;
this.indices[i + 5] = j + 3;
}
}
MeshRenderer.prototype = Object.create(ObjectRenderer.prototype);
MeshRenderer.prototype.constructor = MeshRenderer;
module.exports = MeshRenderer;
WebGLRenderer.registerPlugin('mesh', MeshRenderer);
/**
* Sets up the renderer context and necessary buffers.
*
* @private
* @param gl {WebGLRenderingContext} the current WebGL drawing context
*/
MeshRenderer.prototype.onContextChange = function ()
{
};
/**
* Renders the sprite object.
*
* @param mesh {Mesh} the mesh to render
*/
MeshRenderer.prototype.render = function (mesh)
{
// return;
if(!mesh._vertexBuffer)
{
this._initWebGL(mesh);
}
var renderer = this.renderer,
gl = renderer.gl,
texture = mesh.texture.baseTexture,
shader = renderer.shaderManager.plugins.meshShader;
// var drawMode = mesh.drawMode === Strip.DRAW_MODES.TRIANGLE_STRIP ? gl.TRIANGLE_STRIP : gl.TRIANGLES;
var drawMode = gl.TRIANGLE_STRIP;
renderer.blendModeManager.setBlendMode(mesh.blendMode);
// set uniforms
gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, mesh.worldTransform.toArray(true));
gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true));
gl.uniform1f(shader.uniforms.alpha._location, mesh.worldAlpha);
if (!mesh.dirty)
{
gl.bindBuffer(gl.ARRAY_BUFFER, mesh._vertexBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, mesh.vertices);
gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
// update the uvs
gl.bindBuffer(gl.ARRAY_BUFFER, mesh._uvBuffer);
gl.vertexAttribPointer(shader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0);
if (!texture._glTextures[gl.id])
{
this.renderer.updateTexture(texture);
}
else
{
// bind the current texture
gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]);
}
}
else
{
mesh.dirty = false;
gl.bindBuffer(gl.ARRAY_BUFFER, mesh._vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, mesh.vertices, gl.STATIC_DRAW);
gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
// update the uvs
gl.bindBuffer(gl.ARRAY_BUFFER, mesh._uvBuffer);
gl.bufferData(gl.ARRAY_BUFFER, mesh.uvs, gl.STATIC_DRAW);
gl.vertexAttribPointer(shader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0);
if (!texture._glTextures[gl.id])
{
this.renderer.updateTexture(texture);
}
else
{
// bind the current texture
gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]);
}
// dont need to upload!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, mesh._indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, mesh.indices, gl.STATIC_DRAW);
}
gl.drawElements(drawMode, mesh.indices.length, gl.UNSIGNED_SHORT, 0);
};
/**
* Prepares all the buffers to render this mesh
* @param mesh {Mesh} the mesh to render
*/
MeshRenderer.prototype._initWebGL = function (mesh)
{
// build the strip!
var gl = this.renderer.gl;
mesh._vertexBuffer = gl.createBuffer();
mesh._indexBuffer = gl.createBuffer();
mesh._uvBuffer = gl.createBuffer();
mesh._colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, mesh._vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, mesh.vertices, gl.DYNAMIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, mesh._uvBuffer);
gl.bufferData(gl.ARRAY_BUFFER, mesh.uvs, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, mesh._colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, mesh.colors, gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, mesh._indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, mesh.indices, gl.STATIC_DRAW);
};
/**
* Empties the current batch.
*
*/
MeshRenderer.prototype.flush = function ()
{
};
/**
* Starts a new mesh renderer.
*
*/
MeshRenderer.prototype.start = function ()
{
var gl = this.renderer.gl,
shader = this.renderer.shaderManager.plugins.meshShader;
this.renderer.shaderManager.setShader(shader);
// dont need to upload!
//gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indices);
// this.s
};
/**
* Destroys the Mesh renderer
*
*/
MeshRenderer.prototype.destroy = function ()
{
};
},{"../../core/renderers/webgl/WebGLRenderer":38,"../../core/renderers/webgl/utils/ObjectRenderer":52}],118:[function(require,module,exports){
var core = require('../../core');
/**
* @class
* @extends Shader
* @memberof PIXI.extras
* @param shaderManager {ShaderManager} The WebGL shader manager this shader works for.
*/
function StripShader(shaderManager)
{
core.Shader.call(this,
shaderManager,
// vertex shader
[
'precision lowp float;',
'attribute vec2 aVertexPosition;',
'attribute vec2 aTextureCoord;',
'uniform mat3 translationMatrix;',
'uniform mat3 projectionMatrix;',
'varying vec2 vTextureCoord;',
'void main(void){',
' gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);',
' vTextureCoord = aTextureCoord;',
'}'
].join('\n'),
[
'precision lowp float;',
'varying vec2 vTextureCoord;',
'uniform float alpha;',
'uniform sampler2D uSampler;',
'void main(void){',
' gl_FragColor = texture2D(uSampler, vTextureCoord) * alpha ;',
'}'
].join('\n'),
// custom uniforms
{
alpha: { type: '1f', value: 0 },
translationMatrix: { type: 'mat3', value: new Float32Array(9) },
projectionMatrix: { type: 'mat3', value: new Float32Array(9) }
},
// custom attributes
{
aVertexPosition:0,
aTextureCoord:0
}
);
}
StripShader.prototype = Object.create(core.Shader.prototype);
StripShader.prototype.constructor = StripShader;
module.exports = StripShader;
core.ShaderManager.registerPlugin('meshShader', StripShader);
},{"../../core":19}],119:[function(require,module,exports){
var core = require('../core'),
spine = require('./SpineRuntime');
/* Esoteric Software SPINE wrapper for pixi.js */
spine.Bone.yDown = true;
/**
* A class that enables the you to import and run your spine animations in pixi.
* The Spine animation data needs to be loaded using either the Loader or a SpineLoader before it can be used by this class
* See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source
*
* ```js
* var spineAnimation = new PIXI.Spine(spineData);
* ```
*
* @class
* @extends Container
* @memberof PIXI.spine
* @param spineData {object} The spine data loaded from a spine atlas.
*/
function Spine(spineData)
{
core.Container.call(this);
if (!spineData)
{
throw new Error('The spineData param is required.');
}
/**
* The spineData object
*
* @member {object}
*/
this.spineData = spineData;
/**
* A spine Skeleton object
*
* @member {object}
*/
this.skeleton = new spine.Skeleton(spineData);
this.skeleton.updateWorldTransform();
/**
* A spine AnimationStateData object created from the spine data passed in the constructor
*
* @member {object}
*/
this.stateData = new spine.AnimationStateData(spineData);
/**
* A spine AnimationState object created from the spine AnimationStateData object
*
* @member {object}
*/
this.state = new spine.AnimationState(this.stateData);
/**
* An array of containers
*
* @member {Container[]}
*/
this.slotContainers = [];
for (var i = 0, n = this.skeleton.drawOrder.length; i < n; i++)
{
var slot = this.skeleton.drawOrder[i];
var attachment = slot.attachment;
var slotContainer = new core.Container();
this.slotContainers.push(slotContainer);
this.addChild(slotContainer);
if (attachment instanceof spine.RegionAttachment)
{
var spriteName = attachment.rendererObject.name;
var sprite = this.createSprite(slot, attachment);
slot.currentSprite = sprite;
slot.currentSpriteName = spriteName;
slotContainer.addChild(sprite);
}
else if (attachment instanceof spine.MeshAttachment)
{
var mesh = this.createMesh(slot, attachment);
slot.currentMesh = mesh;
slot.currentMeshName = attachment.name;
slotContainer.addChild(mesh);
}
else
{
continue;
}
}
/**
* Should the Spine object update its transforms
*
* @member {boolean}
*/
this.autoUpdate = true;
}
Spine.prototype = Object.create(core.Container.prototype);
Spine.prototype.constructor = Spine;
module.exports = Spine;
Object.defineProperties(Spine.prototype, {
/**
* If this flag is set to true, the spine animation will be autoupdated every time
* the object id drawn. The down side of this approach is that the delta time is
* automatically calculated and you could miss out on cool effects like slow motion,
* pause, skip ahead and the sorts. Most of these effects can be achieved even with
* autoupdate enabled but are harder to achieve.
*
* @member {boolean}
* @memberof Spine#
* @default true
*/
autoUpdate: {
get: function ()
{
return (this.updateTransform === Spine.prototype.autoUpdateTransform);
},
set: function (value)
{
this.updateTransform = value ? Spine.prototype.autoUpdateTransform : core.Container.prototype.updateTransform;
}
}
});
/**
* Update the spine skeleton and its animations by delta time (dt)
*
* @param dt {number} Delta time. Time by which the animation should be updated
*/
Spine.prototype.update = function (dt)
{
this.state.update(dt);
this.state.apply(this.skeleton);
this.skeleton.updateWorldTransform();
var drawOrder = this.skeleton.drawOrder;
for (var i = 0, n = drawOrder.length; i < n; i++)
{
var slot = drawOrder[i];
var attachment = slot.attachment;
var slotContainer = this.slotContainers[i];
if (!attachment)
{
slotContainer.visible = false;
continue;
}
var type = attachment.type;
if (type === spine.AttachmentType.region)
{
if (attachment.rendererObject)
{
if (!slot.currentSpriteName || slot.currentSpriteName !== attachment.rendererObject.name)
{
var spriteName = attachment.rendererObject.name;
if (slot.currentSprite !== undefined)
{
slot.currentSprite.visible = false;
}
slot.sprites = slot.sprites || {};
if (slot.sprites[spriteName] !== undefined)
{
slot.sprites[spriteName].visible = true;
}
else
{
var sprite = this.createSprite(slot, attachment);
slotContainer.addChild(sprite);
}
slot.currentSprite = slot.sprites[spriteName];
slot.currentSpriteName = spriteName;
}
}
var bone = slot.bone;
slotContainer.position.x = bone.worldX + attachment.x * bone.m00 + attachment.y * bone.m01;
slotContainer.position.y = bone.worldY + attachment.x * bone.m10 + attachment.y * bone.m11;
slotContainer.scale.x = bone.worldScaleX;
slotContainer.scale.y = bone.worldScaleY;
slotContainer.rotation = -(slot.bone.worldRotation * spine.degRad);
slot.currentSprite.tint = core.utils.rgb2hex([slot.r,slot.g,slot.b]);
}
else if (type === spine.AttachmentType.skinnedmesh)
{
if (!slot.currentMeshName || slot.currentMeshName !== attachment.name)
{
var meshName = attachment.name;
if (slot.currentMesh !== undefined)
{
slot.currentMesh.visible = false;
}
slot.meshes = slot.meshes || {};
if (slot.meshes[meshName] !== undefined)
{
slot.meshes[meshName].visible = true;
}
else
{
var mesh = this.createMesh(slot, attachment);
slotContainer.addChild(mesh);
}
slot.currentMesh = slot.meshes[meshName];
slot.currentMeshName = meshName;
}
attachment.computeWorldVertices(slot.bone.skeleton.x, slot.bone.skeleton.y, slot, slot.currentMesh.vertices);
}
else
{
slotContainer.visible = false;
continue;
}
slotContainer.visible = true;
slotContainer.alpha = slot.a;
}
};
/**
* When autoupdate is set to yes this function is used as pixi's updateTransform function
*
* @private
*/
Spine.prototype.autoUpdateTransform = function ()
{
this.lastTime = this.lastTime || Date.now();
var timeDelta = (Date.now() - this.lastTime) * 0.001;
this.lastTime = Date.now();
this.update(timeDelta);
core.Container.prototype.updateTransform.call(this);
};
/**
* Create a new sprite to be used with spine.RegionAttachment
*
* @param slot {spine.Slot} The slot to which the attachment is parented
* @param attachment {spine.RegionAttachment} The attachment that the sprite will represent
* @private
*/
Spine.prototype.createSprite = function (slot, attachment)
{
var descriptor = attachment.rendererObject;
var baseTexture = descriptor.page.rendererObject;
var spriteRect = new core.math.Rectangle(descriptor.x,
descriptor.y,
descriptor.rotate ? descriptor.height : descriptor.width,
descriptor.rotate ? descriptor.width : descriptor.height);
var spriteTexture = new core.Texture(baseTexture, spriteRect);
var sprite = new core.Sprite(spriteTexture);
var baseRotation = descriptor.rotate ? Math.PI * 0.5 : 0.0;
sprite.scale.set(descriptor.width / descriptor.originalWidth, descriptor.height / descriptor.originalHeight);
sprite.rotation = baseRotation - (attachment.rotation * spine.degRad);
sprite.anchor.x = sprite.anchor.y = 0.5;
slot.sprites = slot.sprites || {};
slot.sprites[descriptor.name] = sprite;
return sprite;
};
/**
* Creates a Strip from the spine data
* @param slot {spine.Slot} The slot to which the attachment is parented
* @param attachment {spine.RegionAttachment} The attachment that the sprite will represent
* @private
*/
Spine.prototype.createMesh = function (slot, attachment)
{
var descriptor = attachment.rendererObject;
var baseTexture = descriptor.page.rendererObject;
var texture = new core.Texture(baseTexture);
var strip = new core.Strip(texture);
strip.drawMode = core.Strip.DRAW_MODES.TRIANGLES;
strip.canvasPadding = 1.5;
strip.vertices = new Float32Array(attachment.uvs.length);
strip.uvs = attachment.uvs;
strip.indices = attachment.triangles;
slot.meshes = slot.meshes || {};
slot.meshes[attachment.name] = strip;
return strip;
};
},{"../core":19,"./SpineRuntime":120}],120:[function(require,module,exports){
/******************************************************************************
* Spine Runtimes Software License
* Version 2.1
*
* Copyright (c) 2013, Esoteric Software
* All rights reserved.
*
* You are granted a perpetual, non-exclusive, non-sublicensable and
* non-transferable license to install, execute and perform the Spine Runtimes
* Software (the "Software") solely for internal use. Without the written
* permission of Esoteric Software (typically granted by licensing Spine), you
* may not (a) modify, translate, adapt or otherwise create derivative works,
* improvements of the Software or develop new applications using the Software
* or (b) remove, delete, alter or obscure any trademarks or any copyright,
* trademark, patent or other intellectual property or proprietary rights
* notices on or in the Software, including any copy thereof. Redistributions
* in binary or source form must include this license and terms.
*
* THIS SOFTWARE IS PROVIDED BY ESOTERIC SOFTWARE "AS IS" AND ANY EXPRESS OR
* IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO
* EVENT SHALL ESOTERIC SOFTARE BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
* OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
* WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
* OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
* ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
var core = require('../core');
var spine = module.exports = {
radDeg: 180 / Math.PI,
degRad: Math.PI / 180,
temp: [],
Float32Array: (typeof(Float32Array) === 'undefined') ? Array : Float32Array,
Uint16Array: (typeof(Uint16Array) === 'undefined') ? Array : Uint16Array
};
spine.BoneData = function (name, parent)
{
this.name = name;
this.parent = parent;
};
spine.BoneData.prototype = {
length: 0,
x: 0, y: 0,
rotation: 0,
scaleX: 1, scaleY: 1,
inheritScale: true,
inheritRotation: true,
flipX: false, flipY: false
};
spine.SlotData = function (name, boneData)
{
this.name = name;
this.boneData = boneData;
};
spine.SlotData.prototype = {
r: 1, g: 1, b: 1, a: 1,
attachmentName: null,
additiveBlending: false
};
spine.IkConstraintData = function (name)
{
this.name = name;
this.bones = [];
};
spine.IkConstraintData.prototype = {
target: null,
bendDirection: 1,
mix: 1
};
spine.Bone = function (boneData, skeleton, parent)
{
this.data = boneData;
this.skeleton = skeleton;
this.parent = parent;
this.setToSetupPose();
};
spine.Bone.yDown = false;
spine.Bone.prototype = {
x: 0, y: 0,
rotation: 0, rotationIK: 0,
scaleX: 1, scaleY: 1,
flipX: false, flipY: false,
m00: 0, m01: 0, worldX: 0, // a b x
m10: 0, m11: 0, worldY: 0, // c d y
worldRotation: 0,
worldScaleX: 1, worldScaleY: 1,
worldFlipX: false, worldFlipY: false,
updateWorldTransform: function ()
{
var parent = this.parent;
if (parent)
{
this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX;
this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY;
if (this.data.inheritScale)
{
this.worldScaleX = parent.worldScaleX * this.scaleX;
this.worldScaleY = parent.worldScaleY * this.scaleY;
} else {
this.worldScaleX = this.scaleX;
this.worldScaleY = this.scaleY;
}
this.worldRotation = this.data.inheritRotation ? (parent.worldRotation + this.rotationIK) : this.rotationIK;
this.worldFlipX = parent.worldFlipX != this.flipX;
this.worldFlipY = parent.worldFlipY != this.flipY;
} else {
var skeletonFlipX = this.skeleton.flipX, skeletonFlipY = this.skeleton.flipY;
this.worldX = skeletonFlipX ? -this.x : this.x;
this.worldY = (skeletonFlipY != spine.Bone.yDown) ? -this.y : this.y;
this.worldScaleX = this.scaleX;
this.worldScaleY = this.scaleY;
this.worldRotation = this.rotationIK;
this.worldFlipX = skeletonFlipX != this.flipX;
this.worldFlipY = skeletonFlipY != this.flipY;
}
var radians = this.worldRotation * spine.degRad;
var cos = Math.cos(radians);
var sin = Math.sin(radians);
if (this.worldFlipX)
{
this.m00 = -cos * this.worldScaleX;
this.m01 = sin * this.worldScaleY;
} else {
this.m00 = cos * this.worldScaleX;
this.m01 = -sin * this.worldScaleY;
}
if (this.worldFlipY != spine.Bone.yDown)
{
this.m10 = -sin * this.worldScaleX;
this.m11 = -cos * this.worldScaleY;
} else {
this.m10 = sin * this.worldScaleX;
this.m11 = cos * this.worldScaleY;
}
},
setToSetupPose: function ()
{
var data = this.data;
this.x = data.x;
this.y = data.y;
this.rotation = data.rotation;
this.rotationIK = this.rotation;
this.scaleX = data.scaleX;
this.scaleY = data.scaleY;
this.flipX = data.flipX;
this.flipY = data.flipY;
},
worldToLocal: function (world)
{
var dx = world[0] - this.worldX, dy = world[1] - this.worldY;
var m00 = this.m00, m10 = this.m10, m01 = this.m01, m11 = this.m11;
if (this.worldFlipX != (this.worldFlipY != spine.Bone.yDown))
{
m00 = -m00;
m11 = -m11;
}
var invDet = 1 / (m00 * m11 - m01 * m10);
world[0] = dx * m00 * invDet - dy * m01 * invDet;
world[1] = dy * m11 * invDet - dx * m10 * invDet;
},
localToWorld: function (local)
{
var localX = local[0], localY = local[1];
local[0] = localX * this.m00 + localY * this.m01 + this.worldX;
local[1] = localX * this.m10 + localY * this.m11 + this.worldY;
}
};
spine.Slot = function (slotData, bone)
{
this.data = slotData;
this.bone = bone;
this.setToSetupPose();
};
spine.Slot.prototype = {
r: 1, g: 1, b: 1, a: 1,
_attachmentTime: 0,
attachment: null,
attachmentVertices: [],
setAttachment: function (attachment)
{
this.attachment = attachment;
this._attachmentTime = this.bone.skeleton.time;
this.attachmentVertices.length = 0;
},
setAttachmentTime: function (time)
{
this._attachmentTime = this.bone.skeleton.time - time;
},
getAttachmentTime: function ()
{
return this.bone.skeleton.time - this._attachmentTime;
},
setToSetupPose: function ()
{
var data = this.data;
this.r = data.r;
this.g = data.g;
this.b = data.b;
this.a = data.a;
var slotDatas = this.bone.skeleton.data.slots;
for (var i = 0, n = slotDatas.length; i < n; i++)
{
if (slotDatas[i] == data)
{
this.setAttachment(!data.attachmentName ? null : this.bone.skeleton.getAttachmentBySlotIndex(i, data.attachmentName));
break;
}
}
}
};
spine.IkConstraint = function (data, skeleton)
{
this.data = data;
this.mix = data.mix;
this.bendDirection = data.bendDirection;
this.bones = [];
for (var i = 0, n = data.bones.length; i < n; i++)
this.bones.push(skeleton.findBone(data.bones[i].name));
this.target = skeleton.findBone(data.target.name);
};
spine.IkConstraint.prototype = {
apply: function ()
{
var target = this.target;
var bones = this.bones;
switch (bones.length)
{
case 1:
spine.IkConstraint.apply1(bones[0], target.worldX, target.worldY, this.mix);
break;
case 2:
spine.IkConstraint.apply2(bones[0], bones[1], target.worldX, target.worldY, this.bendDirection, this.mix);
break;
}
}
};
/** Adjusts the bone rotation so the tip is as close to the target position as possible. The target is specified in the world
* coordinate system. */
spine.IkConstraint.apply1 = function (bone, targetX, targetY, alpha)
{
var parentRotation = (!bone.data.inheritRotation || !bone.parent) ? 0 : bone.parent.worldRotation;
var rotation = bone.rotation;
var rotationIK = Math.atan2(targetY - bone.worldY, targetX - bone.worldX) * spine.radDeg - parentRotation;
bone.rotationIK = rotation + (rotationIK - rotation) * alpha;
};
/** Adjusts the parent and child bone rotations so the tip of the child is as close to the target position as possible. The
* target is specified in the world coordinate system.
* @param child Any descendant bone of the parent. */
spine.IkConstraint.apply2 = function (parent, child, targetX, targetY, bendDirection, alpha)
{
var childRotation = child.rotation, parentRotation = parent.rotation;
if (!alpha)
{
child.rotationIK = childRotation;
parent.rotationIK = parentRotation;
return;
}
var positionX, positionY, tempPosition = spine.temp;
var parentParent = parent.parent;
if (parentParent)
{
tempPosition[0] = targetX;
tempPosition[1] = targetY;
parentParent.worldToLocal(tempPosition);
targetX = (tempPosition[0] - parent.x) * parentParent.worldScaleX;
targetY = (tempPosition[1] - parent.y) * parentParent.worldScaleY;
} else {
targetX -= parent.x;
targetY -= parent.y;
}
if (child.parent == parent)
{
positionX = child.x;
positionY = child.y;
} else {
tempPosition[0] = child.x;
tempPosition[1] = child.y;
child.parent.localToWorld(tempPosition);
parent.worldToLocal(tempPosition);
positionX = tempPosition[0];
positionY = tempPosition[1];
}
var childX = positionX * parent.worldScaleX, childY = positionY * parent.worldScaleY;
var offset = Math.atan2(childY, childX);
var len1 = Math.sqrt(childX * childX + childY * childY), len2 = child.data.length * child.worldScaleX;
// Based on code by Ryan Juckett with permission: Copyright (c) 2008-2009 Ryan Juckett, http://www.ryanjuckett.com/
var cosDenom = 2 * len1 * len2;
if (cosDenom < 0.0001)
{
child.rotationIK = childRotation + (Math.atan2(targetY, targetX) * spine.radDeg - parentRotation - childRotation) * alpha;
return;
}
var cos = (targetX * targetX + targetY * targetY - len1 * len1 - len2 * len2) / cosDenom;
if (cos < -1)
cos = -1;
else if (cos > 1)
cos = 1;
var childAngle = Math.acos(cos) * bendDirection;
var adjacent = len1 + len2 * cos, opposite = len2 * Math.sin(childAngle);
var parentAngle = Math.atan2(targetY * adjacent - targetX * opposite, targetX * adjacent + targetY * opposite);
var rotation = (parentAngle - offset) * spine.radDeg - parentRotation;
if (rotation > 180)
rotation -= 360;
else if (rotation < -180) //
rotation += 360;
parent.rotationIK = parentRotation + rotation * alpha;
rotation = (childAngle + offset) * spine.radDeg - childRotation;
if (rotation > 180)
rotation -= 360;
else if (rotation < -180) //
rotation += 360;
child.rotationIK = childRotation + (rotation + parent.worldRotation - child.parent.worldRotation) * alpha;
};
spine.Skin = function (name)
{
this.name = name;
this.attachments = {};
};
spine.Skin.prototype = {
addAttachment: function (slotIndex, name, attachment)
{
this.attachments[slotIndex + ":" + name] = attachment;
},
getAttachment: function (slotIndex, name)
{
return this.attachments[slotIndex + ":" + name];
},
_attachAll: function (skeleton, oldSkin)
{
for (var key in oldSkin.attachments)
{
var colon = key.indexOf(":");
var slotIndex = parseInt(key.substring(0, colon));
var name = key.substring(colon + 1);
var slot = skeleton.slots[slotIndex];
if (slot.attachment && slot.attachment.name == name)
{
var attachment = this.getAttachment(slotIndex, name);
if (attachment) slot.setAttachment(attachment);
}
}
}
};
spine.Animation = function (name, timelines, duration)
{
this.name = name;
this.timelines = timelines;
this.duration = duration;
};
spine.Animation.prototype = {
apply: function (skeleton, lastTime, time, loop, events)
{
if (loop && this.duration != 0)
{
time %= this.duration;
lastTime %= this.duration;
}
var timelines = this.timelines;
for (var i = 0, n = timelines.length; i < n; i++)
timelines[i].apply(skeleton, lastTime, time, events, 1);
},
mix: function (skeleton, lastTime, time, loop, events, alpha)
{
if (loop && this.duration != 0)
{
time %= this.duration;
lastTime %= this.duration;
}
var timelines = this.timelines;
for (var i = 0, n = timelines.length; i < n; i++)
timelines[i].apply(skeleton, lastTime, time, events, alpha);
}
};
spine.Animation.binarySearch = function (values, target, step)
{
var low = 0;
var high = Math.floor(values.length / step) - 2;
if (!high) return step;
var current = high >>> 1;
while (true)
{
if (values[(current + 1) * step] <= target)
low = current + 1;
else
high = current;
if (low == high) return (low + 1) * step;
current = (low + high) >>> 1;
}
};
spine.Animation.binarySearch1 = function (values, target)
{
var low = 0;
var high = values.length - 2;
if (!high) return 1;
var current = high >>> 1;
while (true)
{
if (values[current + 1] <= target)
low = current + 1;
else
high = current;
if (low == high) return low + 1;
current = (low + high) >>> 1;
}
};
spine.Animation.linearSearch = function (values, target, step)
{
for (var i = 0, last = values.length - step; i <= last; i += step)
if (values[i] > target) return i;
return -1;
};
spine.Curves = function (frameCount)
{
this.curves = []; // type, x, y, ...
//this.curves.length = (frameCount - 1) * 19/*BEZIER_SIZE*/;
};
spine.Curves.prototype = {
setLinear: function (frameIndex)
{
this.curves[frameIndex * 19/*BEZIER_SIZE*/] = 0/*LINEAR*/;
},
setStepped: function (frameIndex)
{
this.curves[frameIndex * 19/*BEZIER_SIZE*/] = 1/*STEPPED*/;
},
/** Sets the control handle positions for an interpolation bezier curve used to transition from this keyframe to the next.
* cx1 and cx2 are from 0 to 1, representing the percent of time between the two keyframes. cy1 and cy2 are the percent of
* the difference between the keyframe's values. */
setCurve: function (frameIndex, cx1, cy1, cx2, cy2)
{
var subdiv1 = 1 / 10/*BEZIER_SEGMENTS*/, subdiv2 = subdiv1 * subdiv1, subdiv3 = subdiv2 * subdiv1;
var pre1 = 3 * subdiv1, pre2 = 3 * subdiv2, pre4 = 6 * subdiv2, pre5 = 6 * subdiv3;
var tmp1x = -cx1 * 2 + cx2, tmp1y = -cy1 * 2 + cy2, tmp2x = (cx1 - cx2) * 3 + 1, tmp2y = (cy1 - cy2) * 3 + 1;
var dfx = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv3, dfy = cy1 * pre1 + tmp1y * pre2 + tmp2y * subdiv3;
var ddfx = tmp1x * pre4 + tmp2x * pre5, ddfy = tmp1y * pre4 + tmp2y * pre5;
var dddfx = tmp2x * pre5, dddfy = tmp2y * pre5;
var i = frameIndex * 19/*BEZIER_SIZE*/;
var curves = this.curves;
curves[i++] = 2/*BEZIER*/;
var x = dfx, y = dfy;
for (var n = i + 19/*BEZIER_SIZE*/ - 1; i < n; i += 2)
{
curves[i] = x;
curves[i + 1] = y;
dfx += ddfx;
dfy += ddfy;
ddfx += dddfx;
ddfy += dddfy;
x += dfx;
y += dfy;
}
},
getCurvePercent: function (frameIndex, percent)
{
percent = percent < 0 ? 0 : (percent > 1 ? 1 : percent);
var curves = this.curves;
var i = frameIndex * 19/*BEZIER_SIZE*/;
var type = curves[i];
if (type === 0/*LINEAR*/) return percent;
if (type == 1/*STEPPED*/) return 0;
i++;
var x = 0;
for (var start = i, n = i + 19/*BEZIER_SIZE*/ - 1; i < n; i += 2)
{
x = curves[i];
if (x >= percent)
{
var prevX, prevY;
if (i == start)
{
prevX = 0;
prevY = 0;
} else {
prevX = curves[i - 2];
prevY = curves[i - 1];
}
return prevY + (curves[i + 1] - prevY) * (percent - prevX) / (x - prevX);
}
}
var y = curves[i - 1];
return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1.
}
};
spine.RotateTimeline = function (frameCount)
{
this.curves = new spine.Curves(frameCount);
this.frames = []; // time, angle, ...
this.frames.length = frameCount * 2;
};
spine.RotateTimeline.prototype = {
boneIndex: 0,
getFrameCount: function ()
{
return this.frames.length / 2;
},
setFrame: function (frameIndex, time, angle)
{
frameIndex *= 2;
this.frames[frameIndex] = time;
this.frames[frameIndex + 1] = angle;
},
apply: function (skeleton, lastTime, time, firedEvents, alpha)
{
var frames = this.frames;
if (time < frames[0]) return; // Time is before first frame.
var bone = skeleton.bones[this.boneIndex];
if (time >= frames[frames.length - 2])
{ // Time is after last frame.
var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation;
while (amount > 180)
amount -= 360;
while (amount < -180)
amount += 360;
bone.rotation += amount * alpha;
return;
}
// Interpolate between the previous frame and the current frame.
var frameIndex = spine.Animation.binarySearch(frames, time, 2);
var prevFrameValue = frames[frameIndex - 1];
var frameTime = frames[frameIndex];
var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*PREV_FRAME_TIME*/] - frameTime);
percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent);
var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - prevFrameValue;
while (amount > 180)
amount -= 360;
while (amount < -180)
amount += 360;
amount = bone.data.rotation + (prevFrameValue + amount * percent) - bone.rotation;
while (amount > 180)
amount -= 360;
while (amount < -180)
amount += 360;
bone.rotation += amount * alpha;
}
};
spine.TranslateTimeline = function (frameCount)
{
this.curves = new spine.Curves(frameCount);
this.frames = []; // time, x, y, ...
this.frames.length = frameCount * 3;
};
spine.TranslateTimeline.prototype = {
boneIndex: 0,
getFrameCount: function ()
{
return this.frames.length / 3;
},
setFrame: function (frameIndex, time, x, y)
{
frameIndex *= 3;
this.frames[frameIndex] = time;
this.frames[frameIndex + 1] = x;
this.frames[frameIndex + 2] = y;
},
apply: function (skeleton, lastTime, time, firedEvents, alpha)
{
var frames = this.frames;
if (time < frames[0]) return; // Time is before first frame.
var bone = skeleton.bones[this.boneIndex];
if (time >= frames[frames.length - 3])
{ // Time is after last frame.
bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha;
bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha;
return;
}
// Interpolate between the previous frame and the current frame.
var frameIndex = spine.Animation.binarySearch(frames, time, 3);
var prevFrameX = frames[frameIndex - 2];
var prevFrameY = frames[frameIndex - 1];
var frameTime = frames[frameIndex];
var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*PREV_FRAME_TIME*/] - frameTime);
percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent);
bone.x += (bone.data.x + prevFrameX + (frames[frameIndex + 1/*FRAME_X*/] - prevFrameX) * percent - bone.x) * alpha;
bone.y += (bone.data.y + prevFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - prevFrameY) * percent - bone.y) * alpha;
}
};
spine.ScaleTimeline = function (frameCount)
{
this.curves = new spine.Curves(frameCount);
this.frames = []; // time, x, y, ...
this.frames.length = frameCount * 3;
};
spine.ScaleTimeline.prototype = {
boneIndex: 0,
getFrameCount: function ()
{
return this.frames.length / 3;
},
setFrame: function (frameIndex, time, x, y)
{
frameIndex *= 3;
this.frames[frameIndex] = time;
this.frames[frameIndex + 1] = x;
this.frames[frameIndex + 2] = y;
},
apply: function (skeleton, lastTime, time, firedEvents, alpha)
{
var frames = this.frames;
if (time < frames[0]) return; // Time is before first frame.
var bone = skeleton.bones[this.boneIndex];
if (time >= frames[frames.length - 3])
{ // Time is after last frame.
bone.scaleX += (bone.data.scaleX * frames[frames.length - 2] - bone.scaleX) * alpha;
bone.scaleY += (bone.data.scaleY * frames[frames.length - 1] - bone.scaleY) * alpha;
return;
}
// Interpolate between the previous frame and the current frame.
var frameIndex = spine.Animation.binarySearch(frames, time, 3);
var prevFrameX = frames[frameIndex - 2];
var prevFrameY = frames[frameIndex - 1];
var frameTime = frames[frameIndex];
var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*PREV_FRAME_TIME*/] - frameTime);
percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent);
bone.scaleX += (bone.data.scaleX * (prevFrameX + (frames[frameIndex + 1/*FRAME_X*/] - prevFrameX) * percent) - bone.scaleX) * alpha;
bone.scaleY += (bone.data.scaleY * (prevFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - prevFrameY) * percent) - bone.scaleY) * alpha;
}
};
spine.ColorTimeline = function (frameCount)
{
this.curves = new spine.Curves(frameCount);
this.frames = []; // time, r, g, b, a, ...
this.frames.length = frameCount * 5;
};
spine.ColorTimeline.prototype = {
slotIndex: 0,
getFrameCount: function ()
{
return this.frames.length / 5;
},
setFrame: function (frameIndex, time, r, g, b, a)
{
frameIndex *= 5;
this.frames[frameIndex] = time;
this.frames[frameIndex + 1] = r;
this.frames[frameIndex + 2] = g;
this.frames[frameIndex + 3] = b;
this.frames[frameIndex + 4] = a;
},
apply: function (skeleton, lastTime, time, firedEvents, alpha)
{
var frames = this.frames;
if (time < frames[0]) return; // Time is before first frame.
var r, g, b, a;
if (time >= frames[frames.length - 5])
{
// Time is after last frame.
var i = frames.length - 1;
r = frames[i - 3];
g = frames[i - 2];
b = frames[i - 1];
a = frames[i];
} else {
// Interpolate between the previous frame and the current frame.
var frameIndex = spine.Animation.binarySearch(frames, time, 5);
var prevFrameR = frames[frameIndex - 4];
var prevFrameG = frames[frameIndex - 3];
var prevFrameB = frames[frameIndex - 2];
var prevFrameA = frames[frameIndex - 1];
var frameTime = frames[frameIndex];
var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*PREV_FRAME_TIME*/] - frameTime);
percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent);
r = prevFrameR + (frames[frameIndex + 1/*FRAME_R*/] - prevFrameR) * percent;
g = prevFrameG + (frames[frameIndex + 2/*FRAME_G*/] - prevFrameG) * percent;
b = prevFrameB + (frames[frameIndex + 3/*FRAME_B*/] - prevFrameB) * percent;
a = prevFrameA + (frames[frameIndex + 4/*FRAME_A*/] - prevFrameA) * percent;
}
var slot = skeleton.slots[this.slotIndex];
if (alpha < 1)
{
slot.r += (r - slot.r) * alpha;
slot.g += (g - slot.g) * alpha;
slot.b += (b - slot.b) * alpha;
slot.a += (a - slot.a) * alpha;
} else {
slot.r = r;
slot.g = g;
slot.b = b;
slot.a = a;
}
}
};
spine.AttachmentTimeline = function (frameCount)
{
this.curves = new spine.Curves(frameCount);
this.frames = []; // time, ...
this.frames.length = frameCount;
this.attachmentNames = [];
this.attachmentNames.length = frameCount;
};
spine.AttachmentTimeline.prototype = {
slotIndex: 0,
getFrameCount: function ()
{
return this.frames.length;
},
setFrame: function (frameIndex, time, attachmentName)
{
this.frames[frameIndex] = time;
this.attachmentNames[frameIndex] = attachmentName;
},
apply: function (skeleton, lastTime, time, firedEvents, alpha)
{
var frames = this.frames;
if (time < frames[0])
{
if (lastTime > time) this.apply(skeleton, lastTime, Number.MAX_VALUE, null, 0);
return;
} else if (lastTime > time) //
lastTime = -1;
var frameIndex = time >= frames[frames.length - 1] ? frames.length - 1 : spine.Animation.binarySearch1(frames, time) - 1;
if (frames[frameIndex] < lastTime) return;
var attachmentName = this.attachmentNames[frameIndex];
skeleton.slots[this.slotIndex].setAttachment(
!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName));
}
};
spine.EventTimeline = function (frameCount)
{
this.frames = []; // time, ...
this.frames.length = frameCount;
this.events = [];
this.events.length = frameCount;
};
spine.EventTimeline.prototype = {
getFrameCount: function ()
{
return this.frames.length;
},
setFrame: function (frameIndex, time, event)
{
this.frames[frameIndex] = time;
this.events[frameIndex] = event;
},
/** Fires events for frames > lastTime and <= time. */
apply: function (skeleton, lastTime, time, firedEvents, alpha)
{
if (!firedEvents) return;
var frames = this.frames;
var frameCount = frames.length;
if (lastTime > time)
{ // Fire events after last time for looped animations.
this.apply(skeleton, lastTime, Number.MAX_VALUE, firedEvents, alpha);
lastTime = -1;
} else if (lastTime >= frames[frameCount - 1]) // Last time is after last frame.
return;
if (time < frames[0]) return; // Time is before first frame.
var frameIndex;
if (lastTime < frames[0])
frameIndex = 0;
else
{
frameIndex = spine.Animation.binarySearch1(frames, lastTime);
var frame = frames[frameIndex];
while (frameIndex > 0)
{ // Fire multiple events with the same frame.
if (frames[frameIndex - 1] != frame) break;
frameIndex--;
}
}
var events = this.events;
for (; frameIndex < frameCount && time >= frames[frameIndex]; frameIndex++)
firedEvents.push(events[frameIndex]);
}
};
spine.DrawOrderTimeline = function (frameCount)
{
this.frames = []; // time, ...
this.frames.length = frameCount;
this.drawOrders = [];
this.drawOrders.length = frameCount;
};
spine.DrawOrderTimeline.prototype = {
getFrameCount: function ()
{
return this.frames.length;
},
setFrame: function (frameIndex, time, drawOrder)
{
this.frames[frameIndex] = time;
this.drawOrders[frameIndex] = drawOrder;
},
apply: function (skeleton, lastTime, time, firedEvents, alpha)
{
var frames = this.frames;
if (time < frames[0]) return; // Time is before first frame.
var frameIndex;
if (time >= frames[frames.length - 1]) // Time is after last frame.
frameIndex = frames.length - 1;
else
frameIndex = spine.Animation.binarySearch1(frames, time) - 1;
var drawOrder = skeleton.drawOrder;
var slots = skeleton.slots;
var drawOrderToSetupIndex = this.drawOrders[frameIndex];
if (!drawOrderToSetupIndex)
{
for (var i = 0, n = slots.length; i < n; i++)
drawOrder[i] = slots[i];
} else {
for (var i = 0, n = drawOrderToSetupIndex.length; i < n; i++)
drawOrder[i] = skeleton.slots[drawOrderToSetupIndex[i]];
}
}
};
spine.FfdTimeline = function (frameCount)
{
this.curves = new spine.Curves(frameCount);
this.frames = [];
this.frames.length = frameCount;
this.frameVertices = [];
this.frameVertices.length = frameCount;
};
spine.FfdTimeline.prototype = {
slotIndex: 0,
attachment: 0,
getFrameCount: function ()
{
return this.frames.length;
},
setFrame: function (frameIndex, time, vertices)
{
this.frames[frameIndex] = time;
this.frameVertices[frameIndex] = vertices;
},
apply: function (skeleton, lastTime, time, firedEvents, alpha)
{
var slot = skeleton.slots[this.slotIndex];
if (slot.attachment != this.attachment) return;
var frames = this.frames;
if (time < frames[0]) return; // Time is before first frame.
var frameVertices = this.frameVertices;
var vertexCount = frameVertices[0].length;
var vertices = slot.attachmentVertices;
if (vertices.length != vertexCount) alpha = 1;
vertices.length = vertexCount;
if (time >= frames[frames.length - 1])
{ // Time is after last frame.
var lastVertices = frameVertices[frames.length - 1];
if (alpha < 1)
{
for (var i = 0; i < vertexCount; i++)
vertices[i] += (lastVertices[i] - vertices[i]) * alpha;
} else {
for (var i = 0; i < vertexCount; i++)
vertices[i] = lastVertices[i];
}
return;
}
// Interpolate between the previous frame and the current frame.
var frameIndex = spine.Animation.binarySearch1(frames, time);
var frameTime = frames[frameIndex];
var percent = 1 - (time - frameTime) / (frames[frameIndex - 1] - frameTime);
percent = this.curves.getCurvePercent(frameIndex - 1, percent < 0 ? 0 : (percent > 1 ? 1 : percent));
var prevVertices = frameVertices[frameIndex - 1];
var nextVertices = frameVertices[frameIndex];
if (alpha < 1)
{
for (var i = 0; i < vertexCount; i++)
{
var prev = prevVertices[i];
vertices[i] += (prev + (nextVertices[i] - prev) * percent - vertices[i]) * alpha;
}
} else {
for (var i = 0; i < vertexCount; i++)
{
var prev = prevVertices[i];
vertices[i] = prev + (nextVertices[i] - prev) * percent;
}
}
}
};
spine.IkConstraintTimeline = function (frameCount)
{
this.curves = new spine.Curves(frameCount);
this.frames = []; // time, mix, bendDirection, ...
this.frames.length = frameCount * 3;
};
spine.IkConstraintTimeline.prototype = {
ikConstraintIndex: 0,
getFrameCount: function ()
{
return this.frames.length / 3;
},
setFrame: function (frameIndex, time, mix, bendDirection)
{
frameIndex *= 3;
this.frames[frameIndex] = time;
this.frames[frameIndex + 1] = mix;
this.frames[frameIndex + 2] = bendDirection;
},
apply: function (skeleton, lastTime, time, firedEvents, alpha)
{
var frames = this.frames;
if (time < frames[0]) return; // Time is before first frame.
var ikConstraint = skeleton.ikConstraints[this.ikConstraintIndex];
if (time >= frames[frames.length - 3])
{ // Time is after last frame.
ikConstraint.mix += (frames[frames.length - 2] - ikConstraint.mix) * alpha;
ikConstraint.bendDirection = frames[frames.length - 1];
return;
}
// Interpolate between the previous frame and the current frame.
var frameIndex = spine.Animation.binarySearch(frames, time, 3);
var prevFrameMix = frames[frameIndex + -2/*PREV_FRAME_MIX*/];
var frameTime = frames[frameIndex];
var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*PREV_FRAME_TIME*/] - frameTime);
percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent);
var mix = prevFrameMix + (frames[frameIndex + 1/*FRAME_MIX*/] - prevFrameMix) * percent;
ikConstraint.mix += (mix - ikConstraint.mix) * alpha;
ikConstraint.bendDirection = frames[frameIndex + -1/*PREV_FRAME_BEND_DIRECTION*/];
}
};
spine.FlipXTimeline = function (frameCount)
{
this.curves = new spine.Curves(frameCount);
this.frames = []; // time, flip, ...
this.frames.length = frameCount * 2;
};
spine.FlipXTimeline.prototype = {
boneIndex: 0,
getFrameCount: function ()
{
return this.frames.length / 2;
},
setFrame: function (frameIndex, time, flip)
{
frameIndex *= 2;
this.frames[frameIndex] = time;
this.frames[frameIndex + 1] = flip ? 1 : 0;
},
apply: function (skeleton, lastTime, time, firedEvents, alpha)
{
var frames = this.frames;
if (time < frames[0])
{
if (lastTime > time) this.apply(skeleton, lastTime, Number.MAX_VALUE, null, 0);
return;
} else if (lastTime > time) //
lastTime = -1;
var frameIndex = (time >= frames[frames.length - 2] ? frames.length : spine.Animation.binarySearch(frames, time, 2)) - 2;
if (frames[frameIndex] < lastTime) return;
skeleton.bones[boneIndex].flipX = frames[frameIndex + 1] != 0;
}
};
spine.FlipYTimeline = function (frameCount)
{
this.curves = new spine.Curves(frameCount);
this.frames = []; // time, flip, ...
this.frames.length = frameCount * 2;
};
spine.FlipYTimeline.prototype = {
boneIndex: 0,
getFrameCount: function ()
{
return this.frames.length / 2;
},
setFrame: function (frameIndex, time, flip)
{
frameIndex *= 2;
this.frames[frameIndex] = time;
this.frames[frameIndex + 1] = flip ? 1 : 0;
},
apply: function (skeleton, lastTime, time, firedEvents, alpha)
{
var frames = this.frames;
if (time < frames[0])
{
if (lastTime > time) this.apply(skeleton, lastTime, Number.MAX_VALUE, null, 0);
return;
} else if (lastTime > time) //
lastTime = -1;
var frameIndex = (time >= frames[frames.length - 2] ? frames.length : spine.Animation.binarySearch(frames, time, 2)) - 2;
if (frames[frameIndex] < lastTime) return;
skeleton.bones[boneIndex].flipY = frames[frameIndex + 1] != 0;
}
};
spine.SkeletonData = function ()
{
this.bones = [];
this.slots = [];
this.skins = [];
this.events = [];
this.animations = [];
this.ikConstraints = [];
};
spine.SkeletonData.prototype = {
name: null,
defaultSkin: null,
width: 0, height: 0,
version: null, hash: null,
/** @return May be null. */
findBone: function (boneName)
{
var bones = this.bones;
for (var i = 0, n = bones.length; i < n; i++)
if (bones[i].name == boneName) return bones[i];
return null;
},
/** @return -1 if the bone was not found. */
findBoneIndex: function (boneName)
{
var bones = this.bones;
for (var i = 0, n = bones.length; i < n; i++)
if (bones[i].name == boneName) return i;
return -1;
},
/** @return May be null. */
findSlot: function (slotName)
{
var slots = this.slots;
for (var i = 0, n = slots.length; i < n; i++)
{
if (slots[i].name == slotName) return slot[i];
}
return null;
},
/** @return -1 if the bone was not found. */
findSlotIndex: function (slotName)
{
var slots = this.slots;
for (var i = 0, n = slots.length; i < n; i++)
if (slots[i].name == slotName) return i;
return -1;
},
/** @return May be null. */
findSkin: function (skinName)
{
var skins = this.skins;
for (var i = 0, n = skins.length; i < n; i++)
if (skins[i].name == skinName) return skins[i];
return null;
},
/** @return May be null. */
findEvent: function (eventName)
{
var events = this.events;
for (var i = 0, n = events.length; i < n; i++)
if (events[i].name == eventName) return events[i];
return null;
},
/** @return May be null. */
findAnimation: function (animationName)
{
var animations = this.animations;
for (var i = 0, n = animations.length; i < n; i++)
if (animations[i].name == animationName) return animations[i];
return null;
},
/** @return May be null. */
findIkConstraint: function (ikConstraintName)
{
var ikConstraints = this.ikConstraints;
for (var i = 0, n = ikConstraints.length; i < n; i++)
if (ikConstraints[i].name == ikConstraintName) return ikConstraints[i];
return null;
}
};
spine.Skeleton = function (skeletonData)
{
this.data = skeletonData;
this.bones = [];
for (var i = 0, n = skeletonData.bones.length; i < n; i++)
{
var boneData = skeletonData.bones[i];
var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)];
this.bones.push(new spine.Bone(boneData, this, parent));
}
this.slots = [];
this.drawOrder = [];
for (var i = 0, n = skeletonData.slots.length; i < n; i++)
{
var slotData = skeletonData.slots[i];
var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)];
var slot = new spine.Slot(slotData, bone);
this.slots.push(slot);
this.drawOrder.push(slot);
}
this.ikConstraints = [];
for (var i = 0, n = skeletonData.ikConstraints.length; i < n; i++)
this.ikConstraints.push(new spine.IkConstraint(skeletonData.ikConstraints[i], this));
this.boneCache = [];
this.updateCache();
};
spine.Skeleton.prototype = {
x: 0, y: 0,
skin: null,
r: 1, g: 1, b: 1, a: 1,
time: 0,
flipX: false, flipY: false,
/** Caches information about bones and IK constraints. Must be called if bones or IK constraints are added or removed. */
updateCache: function ()
{
var ikConstraints = this.ikConstraints;
var ikConstraintsCount = ikConstraints.length;
var arrayCount = ikConstraintsCount + 1;
var boneCache = this.boneCache;
if (boneCache.length > arrayCount) boneCache.length = arrayCount;
for (var i = 0, n = boneCache.length; i < n; i++)
boneCache[i].length = 0;
while (boneCache.length < arrayCount)
boneCache[boneCache.length] = [];
var nonIkBones = boneCache[0];
var bones = this.bones;
outer:
for (var i = 0, n = bones.length; i < n; i++)
{
var bone = bones[i];
var current = bone;
do {
for (var ii = 0; ii < ikConstraintsCount; ii++)
{
var ikConstraint = ikConstraints[ii];
var parent = ikConstraint.bones[0];
var child= ikConstraint.bones[ikConstraint.bones.length - 1];
while (true)
{
if (current == child)
{
boneCache[ii].push(bone);
boneCache[ii + 1].push(bone);
continue outer;
}
if (child == parent) break;
child = child.parent;
}
}
current = current.parent;
} while (current);
nonIkBones[nonIkBones.length] = bone;
}
},
/** Updates the world transform for each bone. */
updateWorldTransform: function ()
{
var bones = this.bones;
for (var i = 0, n = bones.length; i < n; i++)
{
var bone = bones[i];
bone.rotationIK = bone.rotation;
}
var i = 0, last = this.boneCache.length - 1;
while (true)
{
var cacheBones = this.boneCache[i];
for (var ii = 0, nn = cacheBones.length; ii < nn; ii++)
cacheBones[ii].updateWorldTransform();
if (i == last) break;
this.ikConstraints[i].apply();
i++;
}
},
/** Sets the bones and slots to their setup pose values. */
setToSetupPose: function ()
{
this.setBonesToSetupPose();
this.setSlotsToSetupPose();
},
setBonesToSetupPose: function ()
{
var bones = this.bones;
for (var i = 0, n = bones.length; i < n; i++)
bones[i].setToSetupPose();
var ikConstraints = this.ikConstraints;
for (var i = 0, n = ikConstraints.length; i < n; i++)
{
var ikConstraint = ikConstraints[i];
ikConstraint.bendDirection = ikConstraint.data.bendDirection;
ikConstraint.mix = ikConstraint.data.mix;
}
},
setSlotsToSetupPose: function ()
{
var slots = this.slots;
var drawOrder = this.drawOrder;
for (var i = 0, n = slots.length; i < n; i++)
{
drawOrder[i] = slots[i];
slots[i].setToSetupPose(i);
}
},
/** @return May return null. */
getRootBone: function ()
{
return this.bones.length ? this.bones[0] : null;
},
/** @return May be null. */
findBone: function (boneName)
{
var bones = this.bones;
for (var i = 0, n = bones.length; i < n; i++)
if (bones[i].data.name == boneName) return bones[i];
return null;
},
/** @return -1 if the bone was not found. */
findBoneIndex: function (boneName)
{
var bones = this.bones;
for (var i = 0, n = bones.length; i < n; i++)
if (bones[i].data.name == boneName) return i;
return -1;
},
/** @return May be null. */
findSlot: function (slotName)
{
var slots = this.slots;
for (var i = 0, n = slots.length; i < n; i++)
if (slots[i].data.name == slotName) return slots[i];
return null;
},
/** @return -1 if the bone was not found. */
findSlotIndex: function (slotName)
{
var slots = this.slots;
for (var i = 0, n = slots.length; i < n; i++)
if (slots[i].data.name == slotName) return i;
return -1;
},
setSkinByName: function (skinName)
{
var skin = this.data.findSkin(skinName);
if (!skin) throw "Skin not found: " + skinName;
this.setSkin(skin);
},
/** Sets the skin used to look up attachments before looking in the {@link SkeletonData#getDefaultSkin() default skin}.
* Attachments from the new skin are attached if the corresponding attachment from the old skin was attached. If there was
* no old skin, each slot's setup mode attachment is attached from the new skin.
* @param newSkin May be null. */
setSkin: function (newSkin)
{
if (newSkin)
{
if (this.skin)
newSkin._attachAll(this, this.skin);
else
{
var slots = this.slots;
for (var i = 0, n = slots.length; i < n; i++)
{
var slot = slots[i];
var name = slot.data.attachmentName;
if (name)
{
var attachment = newSkin.getAttachment(i, name);
if (attachment) slot.setAttachment(attachment);
}
}
}
}
this.skin = newSkin;
},
/** @return May be null. */
getAttachmentBySlotName: function (slotName, attachmentName)
{
return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName);
},
/** @return May be null. */
getAttachmentBySlotIndex: function (slotIndex, attachmentName)
{
if (this.skin)
{
var attachment = this.skin.getAttachment(slotIndex, attachmentName);
if (attachment) return attachment;
}
if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName);
return null;
},
/** @param attachmentName May be null. */
setAttachment: function (slotName, attachmentName)
{
var slots = this.slots;
for (var i = 0, n = slots.length; i < n; i++)
{
var slot = slots[i];
if (slot.data.name == slotName)
{
var attachment = null;
if (attachmentName)
{
attachment = this.getAttachmentBySlotIndex(i, attachmentName);
if (!attachment) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName;
}
slot.setAttachment(attachment);
return;
}
}
throw "Slot not found: " + slotName;
},
/** @return May be null. */
findIkConstraint: function (ikConstraintName)
{
var ikConstraints = this.ikConstraints;
for (var i = 0, n = ikConstraints.length; i < n; i++)
if (ikConstraints[i].data.name == ikConstraintName) return ikConstraints[i];
return null;
},
update: function (delta)
{
this.time += delta;
}
};
spine.EventData = function (name)
{
this.name = name;
};
spine.EventData.prototype = {
intValue: 0,
floatValue: 0,
stringValue: null
};
spine.Event = function (data)
{
this.data = data;
};
spine.Event.prototype = {
intValue: 0,
floatValue: 0,
stringValue: null
};
spine.AttachmentType = {
region: 0,
boundingbox: 1,
mesh: 2,
skinnedmesh: 3
};
spine.RegionAttachment = function (name)
{
this.name = name;
this.offset = [];
this.offset.length = 8;
this.uvs = [];
this.uvs.length = 8;
};
spine.RegionAttachment.prototype = {
type: spine.AttachmentType.region,
x: 0, y: 0,
rotation: 0,
scaleX: 1, scaleY: 1,
width: 0, height: 0,
r: 1, g: 1, b: 1, a: 1,
path: null,
rendererObject: null,
regionOffsetX: 0, regionOffsetY: 0,
regionWidth: 0, regionHeight: 0,
regionOriginalWidth: 0, regionOriginalHeight: 0,
setUVs: function (u, v, u2, v2, rotate)
{
var uvs = this.uvs;
if (rotate)
{
uvs[2/*X2*/] = u;
uvs[3/*Y2*/] = v2;
uvs[4/*X3*/] = u;
uvs[5/*Y3*/] = v;
uvs[6/*X4*/] = u2;
uvs[7/*Y4*/] = v;
uvs[0/*X1*/] = u2;
uvs[1/*Y1*/] = v2;
} else {
uvs[0/*X1*/] = u;
uvs[1/*Y1*/] = v2;
uvs[2/*X2*/] = u;
uvs[3/*Y2*/] = v;
uvs[4/*X3*/] = u2;
uvs[5/*Y3*/] = v;
uvs[6/*X4*/] = u2;
uvs[7/*Y4*/] = v2;
}
},
updateOffset: function ()
{
var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX;
var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY;
var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX;
var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY;
var localX2 = localX + this.regionWidth * regionScaleX;
var localY2 = localY + this.regionHeight * regionScaleY;
var radians = this.rotation * spine.degRad;
var cos = Math.cos(radians);
var sin = Math.sin(radians);
var localXCos = localX * cos + this.x;
var localXSin = localX * sin;
var localYCos = localY * cos + this.y;
var localYSin = localY * sin;
var localX2Cos = localX2 * cos + this.x;
var localX2Sin = localX2 * sin;
var localY2Cos = localY2 * cos + this.y;
var localY2Sin = localY2 * sin;
var offset = this.offset;
offset[0/*X1*/] = localXCos - localYSin;
offset[1/*Y1*/] = localYCos + localXSin;
offset[2/*X2*/] = localXCos - localY2Sin;
offset[3/*Y2*/] = localY2Cos + localXSin;
offset[4/*X3*/] = localX2Cos - localY2Sin;
offset[5/*Y3*/] = localY2Cos + localX2Sin;
offset[6/*X4*/] = localX2Cos - localYSin;
offset[7/*Y4*/] = localYCos + localX2Sin;
},
computeVertices: function (x, y, bone, vertices)
{
x += bone.worldX;
y += bone.worldY;
var m00 = bone.m00, m01 = bone.m01, m10 = bone.m10, m11 = bone.m11;
var offset = this.offset;
vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x;
vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y;
vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x;
vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y;
vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x;
vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y;
vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x;
vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y;
}
};
spine.MeshAttachment = function (name)
{
this.name = name;
};
spine.MeshAttachment.prototype = {
type: spine.AttachmentType.mesh,
vertices: null,
uvs: null,
regionUVs: null,
triangles: null,
hullLength: 0,
r: 1, g: 1, b: 1, a: 1,
path: null,
rendererObject: null,
regionU: 0, regionV: 0, regionU2: 0, regionV2: 0, regionRotate: false,
regionOffsetX: 0, regionOffsetY: 0,
regionWidth: 0, regionHeight: 0,
regionOriginalWidth: 0, regionOriginalHeight: 0,
edges: null,
width: 0, height: 0,
updateUVs: function ()
{
var width = this.regionU2 - this.regionU, height = this.regionV2 - this.regionV;
var n = this.regionUVs.length;
if (!this.uvs || this.uvs.length != n)
{
this.uvs = new spine.Float32Array(n);
}
if (this.regionRotate)
{
for (var i = 0; i < n; i += 2)
{
this.uvs[i] = this.regionU + this.regionUVs[i + 1] * width;
this.uvs[i + 1] = this.regionV + height - this.regionUVs[i] * height;
}
} else {
for (var i = 0; i < n; i += 2)
{
this.uvs[i] = this.regionU + this.regionUVs[i] * width;
this.uvs[i + 1] = this.regionV + this.regionUVs[i + 1] * height;
}
}
},
computeWorldVertices: function (x, y, slot, worldVertices)
{
var bone = slot.bone;
x += bone.worldX;
y += bone.worldY;
var m00 = bone.m00, m01 = bone.m01, m10 = bone.m10, m11 = bone.m11;
var vertices = this.vertices;
var verticesCount = vertices.length;
if (slot.attachmentVertices.length == verticesCount) vertices = slot.attachmentVertices;
for (var i = 0; i < verticesCount; i += 2)
{
var vx = vertices[i];
var vy = vertices[i + 1];
worldVertices[i] = vx * m00 + vy * m01 + x;
worldVertices[i + 1] = vx * m10 + vy * m11 + y;
}
}
};
spine.SkinnedMeshAttachment = function (name)
{
this.name = name;
};
spine.SkinnedMeshAttachment.prototype = {
type: spine.AttachmentType.skinnedmesh,
bones: null,
weights: null,
uvs: null,
regionUVs: null,
triangles: null,
hullLength: 0,
r: 1, g: 1, b: 1, a: 1,
path: null,
rendererObject: null,
regionU: 0, regionV: 0, regionU2: 0, regionV2: 0, regionRotate: false,
regionOffsetX: 0, regionOffsetY: 0,
regionWidth: 0, regionHeight: 0,
regionOriginalWidth: 0, regionOriginalHeight: 0,
edges: null,
width: 0, height: 0,
updateUVs: function (u, v, u2, v2, rotate)
{
var width = this.regionU2 - this.regionU, height = this.regionV2 - this.regionV;
var n = this.regionUVs.length;
if (!this.uvs || this.uvs.length != n)
{
this.uvs = new spine.Float32Array(n);
}
if (this.regionRotate)
{
for (var i = 0; i < n; i += 2)
{
this.uvs[i] = this.regionU + this.regionUVs[i + 1] * width;
this.uvs[i + 1] = this.regionV + height - this.regionUVs[i] * height;
}
} else {
for (var i = 0; i < n; i += 2)
{
this.uvs[i] = this.regionU + this.regionUVs[i] * width;
this.uvs[i + 1] = this.regionV + this.regionUVs[i + 1] * height;
}
}
},
computeWorldVertices: function (x, y, slot, worldVertices)
{
var skeletonBones = slot.bone.skeleton.bones;
var weights = this.weights;
var bones = this.bones;
var w = 0, v = 0, b = 0, f = 0, n = bones.length, nn;
var wx, wy, bone, vx, vy, weight;
if (!slot.attachmentVertices.length)
{
for (; v < n; w += 2)
{
wx = 0;
wy = 0;
nn = bones[v++] + v;
for (; v < nn; v++, b += 3)
{
bone = skeletonBones[bones[v]];
vx = weights[b];
vy = weights[b + 1];
weight = weights[b + 2];
wx += (vx * bone.m00 + vy * bone.m01 + bone.worldX) * weight;
wy += (vx * bone.m10 + vy * bone.m11 + bone.worldY) * weight;
}
worldVertices[w] = wx + x;
worldVertices[w + 1] = wy + y;
}
} else {
var ffd = slot.attachmentVertices;
for (; v < n; w += 2)
{
wx = 0;
wy = 0;
nn = bones[v++] + v;
for (; v < nn; v++, b += 3, f += 2)
{
bone = skeletonBones[bones[v]];
vx = weights[b] + ffd[f];
vy = weights[b + 1] + ffd[f + 1];
weight = weights[b + 2];
wx += (vx * bone.m00 + vy * bone.m01 + bone.worldX) * weight;
wy += (vx * bone.m10 + vy * bone.m11 + bone.worldY) * weight;
}
worldVertices[w] = wx + x;
worldVertices[w + 1] = wy + y;
}
}
}
};
spine.BoundingBoxAttachment = function (name)
{
this.name = name;
this.vertices = [];
};
spine.BoundingBoxAttachment.prototype = {
type: spine.AttachmentType.boundingbox,
computeWorldVertices: function (x, y, bone, worldVertices)
{
x += bone.worldX;
y += bone.worldY;
var m00 = bone.m00, m01 = bone.m01, m10 = bone.m10, m11 = bone.m11;
var vertices = this.vertices;
for (var i = 0, n = vertices.length; i < n; i += 2)
{
var px = vertices[i];
var py = vertices[i + 1];
worldVertices[i] = px * m00 + py * m01 + x;
worldVertices[i + 1] = px * m10 + py * m11 + y;
}
}
};
spine.AnimationStateData = function (skeletonData)
{
this.skeletonData = skeletonData;
this.animationToMixTime = {};
};
spine.AnimationStateData.prototype = {
defaultMix: 0,
setMixByName: function (fromName, toName, duration)
{
var from = this.skeletonData.findAnimation(fromName);
if (!from) throw "Animation not found: " + fromName;
var to = this.skeletonData.findAnimation(toName);
if (!to) throw "Animation not found: " + toName;
this.setMix(from, to, duration);
},
setMix: function (from, to, duration)
{
this.animationToMixTime[from.name + ":" + to.name] = duration;
},
getMix: function (from, to)
{
var key = from.name + ":" + to.name;
return this.animationToMixTime.hasOwnProperty(key) ? this.animationToMixTime[key] : this.defaultMix;
}
};
spine.TrackEntry = function ()
{};
spine.TrackEntry.prototype = {
next: null, previous: null,
animation: null,
loop: false,
delay: 0, time: 0, lastTime: -1, endTime: 0,
timeScale: 1,
mixTime: 0, mixDuration: 0, mix: 1,
onStart: null, onEnd: null, onComplete: null, onEvent: null
};
spine.AnimationState = function (stateData)
{
this.data = stateData;
this.tracks = [];
this.events = [];
};
spine.AnimationState.prototype = {
onStart: null,
onEnd: null,
onComplete: null,
onEvent: null,
timeScale: 1,
update: function (delta)
{
delta *= this.timeScale;
for (var i = 0; i < this.tracks.length; i++)
{
var current = this.tracks[i];
if (!current) continue;
current.time += delta * current.timeScale;
if (current.previous)
{
var previousDelta = delta * current.previous.timeScale;
current.previous.time += previousDelta;
current.mixTime += previousDelta;
}
var next = current.next;
if (next)
{
next.time = current.lastTime - next.delay;
if (next.time >= 0) this.setCurrent(i, next);
} else {
// End non-looping animation when it reaches its end time and there is no next entry.
if (!current.loop && current.lastTime >= current.endTime) this.clearTrack(i);
}
}
},
apply: function (skeleton)
{
for (var i = 0; i < this.tracks.length; i++)
{
var current = this.tracks[i];
if (!current) continue;
this.events.length = 0;
var time = current.time;
var lastTime = current.lastTime;
var endTime = current.endTime;
var loop = current.loop;
if (!loop && time > endTime) time = endTime;
var previous = current.previous;
if (!previous)
{
if (current.mix == 1)
current.animation.apply(skeleton, current.lastTime, time, loop, this.events);
else
current.animation.mix(skeleton, current.lastTime, time, loop, this.events, current.mix);
} else {
var previousTime = previous.time;
if (!previous.loop && previousTime > previous.endTime) previousTime = previous.endTime;
previous.animation.apply(skeleton, previousTime, previousTime, previous.loop, null);
var alpha = current.mixTime / current.mixDuration * current.mix;
if (alpha >= 1)
{
alpha = 1;
current.previous = null;
}
current.animation.mix(skeleton, current.lastTime, time, loop, this.events, alpha);
}
for (var ii = 0, nn = this.events.length; ii < nn; ii++)
{
var event = this.events[ii];
if (current.onEvent) current.onEvent(i, event);
if (this.onEvent) this.onEvent(i, event);
}
// Check if completed the animation or a loop iteration.
if (loop ? (lastTime % endTime > time % endTime) : (lastTime < endTime && time >= endTime))
{
var count = Math.floor(time / endTime);
if (current.onComplete) current.onComplete(i, count);
if (this.onComplete) this.onComplete(i, count);
}
current.lastTime = current.time;
}
},
clearTracks: function ()
{
for (var i = 0, n = this.tracks.length; i < n; i++)
this.clearTrack(i);
this.tracks.length = 0;
},
clearTrack: function (trackIndex)
{
if (trackIndex >= this.tracks.length) return;
var current = this.tracks[trackIndex];
if (!current) return;
if (current.onEnd) current.onEnd(trackIndex);
if (this.onEnd) this.onEnd(trackIndex);
this.tracks[trackIndex] = null;
},
_expandToIndex: function (index)
{
if (index < this.tracks.length) return this.tracks[index];
while (index >= this.tracks.length)
this.tracks.push(null);
return null;
},
setCurrent: function (index, entry)
{
var current = this._expandToIndex(index);
if (current)
{
var previous = current.previous;
current.previous = null;
if (current.onEnd) current.onEnd(index);
if (this.onEnd) this.onEnd(index);
entry.mixDuration = this.data.getMix(current.animation, entry.animation);
if (entry.mixDuration > 0)
{
entry.mixTime = 0;
// If a mix is in progress, mix from the closest animation.
if (previous && current.mixTime / current.mixDuration < 0.5)
entry.previous = previous;
else
entry.previous = current;
}
}
this.tracks[index] = entry;
if (entry.onStart) entry.onStart(index);
if (this.onStart) this.onStart(index);
},
setAnimationByName: function (trackIndex, animationName, loop)
{
var animation = this.data.skeletonData.findAnimation(animationName);
if (!animation) throw "Animation not found: " + animationName;
return this.setAnimation(trackIndex, animation, loop);
},
/** Set the current animation. Any queued animations are cleared. */
setAnimation: function (trackIndex, animation, loop)
{
var entry = new spine.TrackEntry();
entry.animation = animation;
entry.loop = loop;
entry.endTime = animation.duration;
this.setCurrent(trackIndex, entry);
return entry;
},
addAnimationByName: function (trackIndex, animationName, loop, delay)
{
var animation = this.data.skeletonData.findAnimation(animationName);
if (!animation) throw "Animation not found: " + animationName;
return this.addAnimation(trackIndex, animation, loop, delay);
},
/** Adds an animation to be played delay seconds after the current or last queued animation.
* @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */
addAnimation: function (trackIndex, animation, loop, delay)
{
var entry = new spine.TrackEntry();
entry.animation = animation;
entry.loop = loop;
entry.endTime = animation.duration;
var last = this._expandToIndex(trackIndex);
if (last)
{
while (last.next)
last = last.next;
last.next = entry;
} else
this.tracks[trackIndex] = entry;
if (delay <= 0)
{
if (last)
delay += last.endTime - this.data.getMix(last.animation, animation);
else
delay = 0;
}
entry.delay = delay;
return entry;
},
/** May be null. */
getCurrent: function (trackIndex)
{
if (trackIndex >= this.tracks.length) return null;
return this.tracks[trackIndex];
}
};
spine.SkeletonJsonParser = function (attachmentLoader)
{
this.attachmentLoader = attachmentLoader;
};
spine.SkeletonJsonParser.prototype = {
scale: 1,
readSkeletonData: function (root, name)
{
var skeletonData = new spine.SkeletonData();
skeletonData.name = name;
// Skeleton.
var skeletonMap = root["skeleton"];
if (skeletonMap)
{
skeletonData.hash = skeletonMap["hash"];
skeletonData.version = skeletonMap["spine"];
skeletonData.width = skeletonMap["width"] || 0;
skeletonData.height = skeletonMap["height"] || 0;
}
// Bones.
var bones = root["bones"];
for (var i = 0, n = bones.length; i < n; i++)
{
var boneMap = bones[i];
var parent = null;
if (boneMap["parent"])
{
parent = skeletonData.findBone(boneMap["parent"]);
if (!parent) throw "Parent bone not found: " + boneMap["parent"];
}
var boneData = new spine.BoneData(boneMap["name"], parent);
boneData.length = (boneMap["length"] || 0) * this.scale;
boneData.x = (boneMap["x"] || 0) * this.scale;
boneData.y = (boneMap["y"] || 0) * this.scale;
boneData.rotation = (boneMap["rotation"] || 0);
boneData.scaleX = boneMap.hasOwnProperty("scaleX") ? boneMap["scaleX"] : 1;
boneData.scaleY = boneMap.hasOwnProperty("scaleY") ? boneMap["scaleY"] : 1;
boneData.inheritScale = boneMap.hasOwnProperty("inheritScale") ? boneMap["inheritScale"] : true;
boneData.inheritRotation = boneMap.hasOwnProperty("inheritRotation") ? boneMap["inheritRotation"] : true;
skeletonData.bones.push(boneData);
}
// IK constraints.
var ik = root["ik"];
if (ik)
{
for (var i = 0, n = ik.length; i < n; i++)
{
var ikMap = ik[i];
var ikConstraintData = new spine.IkConstraintData(ikMap["name"]);
var bones = ikMap["bones"];
for (var ii = 0, nn = bones.length; ii < nn; ii++)
{
var bone = skeletonData.findBone(bones[ii]);
if (!bone) throw "IK bone not found: " + bones[ii];
ikConstraintData.bones.push(bone);
}
ikConstraintData.target = skeletonData.findBone(ikMap["target"]);
if (!ikConstraintData.target) throw "Target bone not found: " + ikMap["target"];
ikConstraintData.bendDirection = (!ikMap.hasOwnProperty("bendPositive") || ikMap["bendPositive"]) ? 1 : -1;
ikConstraintData.mix = ikMap.hasOwnProperty("mix") ? ikMap["mix"] : 1;
skeletonData.ikConstraints.push(ikConstraintData);
}
}
// Slots.
var slots = root["slots"];
for (var i = 0, n = slots.length; i < n; i++)
{
var slotMap = slots[i];
var boneData = skeletonData.findBone(slotMap["bone"]);
if (!boneData) throw "Slot bone not found: " + slotMap["bone"];
var slotData = new spine.SlotData(slotMap["name"], boneData);
var color = slotMap["color"];
if (color)
{
slotData.r = this.toColor(color, 0);
slotData.g = this.toColor(color, 1);
slotData.b = this.toColor(color, 2);
slotData.a = this.toColor(color, 3);
}
slotData.attachmentName = slotMap["attachment"];
slotData.additiveBlending = slotMap["additive"] && slotMap["additive"] == "true";
skeletonData.slots.push(slotData);
}
// Skins.
var skins = root["skins"];
for (var skinName in skins)
{
if (!skins.hasOwnProperty(skinName)) continue;
var skinMap = skins[skinName];
var skin = new spine.Skin(skinName);
for (var slotName in skinMap)
{
if (!skinMap.hasOwnProperty(slotName)) continue;
var slotIndex = skeletonData.findSlotIndex(slotName);
var slotEntry = skinMap[slotName];
for (var attachmentName in slotEntry)
{
if (!slotEntry.hasOwnProperty(attachmentName)) continue;
var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]);
if (attachment) skin.addAttachment(slotIndex, attachmentName, attachment);
}
}
skeletonData.skins.push(skin);
if (skin.name == "default") skeletonData.defaultSkin = skin;
}
// Events.
var events = root["events"];
for (var eventName in events)
{
if (!events.hasOwnProperty(eventName)) continue;
var eventMap = events[eventName];
var eventData = new spine.EventData(eventName);
eventData.intValue = eventMap["int"] || 0;
eventData.floatValue = eventMap["float"] || 0;
eventData.stringValue = eventMap["string"] || null;
skeletonData.events.push(eventData);
}
// Animations.
var animations = root["animations"];
for (var animationName in animations)
{
if (!animations.hasOwnProperty(animationName)) continue;
this.readAnimation(animationName, animations[animationName], skeletonData);
}
return skeletonData;
},
readAttachment: function (skin, name, map)
{
name = map["name"] || name;
var type = spine.AttachmentType[map["type"] || "region"];
var path = map["path"] || name;
var scale = this.scale;
if (type == spine.AttachmentType.region)
{
var region = this.attachmentLoader.newRegionAttachment(skin, name, path);
if (!region) return null;
region.path = path;
region.x = (map["x"] || 0) * scale;
region.y = (map["y"] || 0) * scale;
region.scaleX = map.hasOwnProperty("scaleX") ? map["scaleX"] : 1;
region.scaleY = map.hasOwnProperty("scaleY") ? map["scaleY"] : 1;
region.rotation = map["rotation"] || 0;
region.width = (map["width"] || 0) * scale;
region.height = (map["height"] || 0) * scale;
var color = map["color"];
if (color)
{
region.r = this.toColor(color, 0);
region.g = this.toColor(color, 1);
region.b = this.toColor(color, 2);
region.a = this.toColor(color, 3);
}
region.updateOffset();
return region;
} else if (type == spine.AttachmentType.mesh)
{
var mesh = this.attachmentLoader.newMeshAttachment(skin, name, path);
if (!mesh) return null;
mesh.path = path;
mesh.vertices = this.getFloatArray(map, "vertices", scale);
mesh.triangles = this.getIntArray(map, "triangles");
mesh.regionUVs = this.getFloatArray(map, "uvs", 1);
mesh.updateUVs();
color = map["color"];
if (color)
{
mesh.r = this.toColor(color, 0);
mesh.g = this.toColor(color, 1);
mesh.b = this.toColor(color, 2);
mesh.a = this.toColor(color, 3);
}
mesh.hullLength = (map["hull"] || 0) * 2;
if (map["edges"]) mesh.edges = this.getIntArray(map, "edges");
mesh.width = (map["width"] || 0) * scale;
mesh.height = (map["height"] || 0) * scale;
return mesh;
} else if (type == spine.AttachmentType.skinnedmesh)
{
var mesh = this.attachmentLoader.newSkinnedMeshAttachment(skin, name, path);
if (!mesh) return null;
mesh.path = path;
var uvs = this.getFloatArray(map, "uvs", 1);
var vertices = this.getFloatArray(map, "vertices", 1);
var weights = [];
var bones = [];
for (var i = 0, n = vertices.length; i < n; )
{
var boneCount = vertices[i++] | 0;
bones[bones.length] = boneCount;
for (var nn = i + boneCount * 4; i < nn; )
{
bones[bones.length] = vertices[i];
weights[weights.length] = vertices[i + 1] * scale;
weights[weights.length] = vertices[i + 2] * scale;
weights[weights.length] = vertices[i + 3];
i += 4;
}
}
mesh.bones = bones;
mesh.weights = weights;
mesh.triangles = this.getIntArray(map, "triangles");
mesh.regionUVs = uvs;
mesh.updateUVs();
color = map["color"];
if (color)
{
mesh.r = this.toColor(color, 0);
mesh.g = this.toColor(color, 1);
mesh.b = this.toColor(color, 2);
mesh.a = this.toColor(color, 3);
}
mesh.hullLength = (map["hull"] || 0) * 2;
if (map["edges"]) mesh.edges = this.getIntArray(map, "edges");
mesh.width = (map["width"] || 0) * scale;
mesh.height = (map["height"] || 0) * scale;
return mesh;
} else if (type == spine.AttachmentType.boundingbox)
{
var attachment = this.attachmentLoader.newBoundingBoxAttachment(skin, name);
var vertices = map["vertices"];
for (var i = 0, n = vertices.length; i < n; i++)
attachment.vertices.push(vertices[i] * scale);
return attachment;
}
throw "Unknown attachment type: " + type;
},
readAnimation: function (name, map, skeletonData)
{
var timelines = [];
var duration = 0;
var slots = map["slots"];
for (var slotName in slots)
{
if (!slots.hasOwnProperty(slotName)) continue;
var slotMap = slots[slotName];
var slotIndex = skeletonData.findSlotIndex(slotName);
for (var timelineName in slotMap)
{
if (!slotMap.hasOwnProperty(timelineName)) continue;
var values = slotMap[timelineName];
if (timelineName == "color")
{
var timeline = new spine.ColorTimeline(values.length);
timeline.slotIndex = slotIndex;
var frameIndex = 0;
for (var i = 0, n = values.length; i < n; i++)
{
var valueMap = values[i];
var color = valueMap["color"];
var r = this.toColor(color, 0);
var g = this.toColor(color, 1);
var b = this.toColor(color, 2);
var a = this.toColor(color, 3);
timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a);
this.readCurve(timeline, frameIndex, valueMap);
frameIndex++;
}
timelines.push(timeline);
duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]);
} else if (timelineName == "attachment")
{
var timeline = new spine.AttachmentTimeline(values.length);
timeline.slotIndex = slotIndex;
var frameIndex = 0;
for (var i = 0, n = values.length; i < n; i++)
{
var valueMap = values[i];
timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]);
}
timelines.push(timeline);
duration = Math.max(duration, timeline.frames[timeline.getFrameCount() - 1]);
} else
throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")";
}
}
var bones = map["bones"];
for (var boneName in bones)
{
if (!bones.hasOwnProperty(boneName)) continue;
var boneIndex = skeletonData.findBoneIndex(boneName);
if (boneIndex == -1) throw "Bone not found: " + boneName;
var boneMap = bones[boneName];
for (var timelineName in boneMap)
{
if (!boneMap.hasOwnProperty(timelineName)) continue;
var values = boneMap[timelineName];
if (timelineName == "rotate")
{
var timeline = new spine.RotateTimeline(values.length);
timeline.boneIndex = boneIndex;
var frameIndex = 0;
for (var i = 0, n = values.length; i < n; i++)
{
var valueMap = values[i];
timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]);
this.readCurve(timeline, frameIndex, valueMap);
frameIndex++;
}
timelines.push(timeline);
duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]);
} else if (timelineName == "translate" || timelineName == "scale")
{
var timeline;
var timelineScale = 1;
if (timelineName == "scale")
timeline = new spine.ScaleTimeline(values.length);
else
{
timeline = new spine.TranslateTimeline(values.length);
timelineScale = this.scale;
}
timeline.boneIndex = boneIndex;
var frameIndex = 0;
for (var i = 0, n = values.length; i < n; i++)
{
var valueMap = values[i];
var x = (valueMap["x"] || 0) * timelineScale;
var y = (valueMap["y"] || 0) * timelineScale;
timeline.setFrame(frameIndex, valueMap["time"], x, y);
this.readCurve(timeline, frameIndex, valueMap);
frameIndex++;
}
timelines.push(timeline);
duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]);
} else if (timelineName == "flipX" || timelineName == "flipY")
{
var x = timelineName == "flipX";
var timeline = x ? new spine.FlipXTimeline(values.length) : new spine.FlipYTimeline(values.length);
timeline.boneIndex = boneIndex;
var field = x ? "x" : "y";
var frameIndex = 0;
for (var i = 0, n = values.length; i < n; i++)
{
var valueMap = values[i];
timeline.setFrame(frameIndex, valueMap["time"], valueMap[field] || false);
frameIndex++;
}
timelines.push(timeline);
duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]);
} else
throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")";
}
}
var ikMap = map["ik"];
for (var ikConstraintName in ikMap)
{
if (!ikMap.hasOwnProperty(ikConstraintName)) continue;
var ikConstraint = skeletonData.findIkConstraint(ikConstraintName);
var values = ikMap[ikConstraintName];
var timeline = new spine.IkConstraintTimeline(values.length);
timeline.ikConstraintIndex = skeletonData.ikConstraints.indexOf(ikConstraint);
var frameIndex = 0;
for (var i = 0, n = values.length; i < n; i++)
{
var valueMap = values[i];
var mix = valueMap.hasOwnProperty("mix") ? valueMap["mix"] : 1;
var bendDirection = (!valueMap.hasOwnProperty("bendPositive") || valueMap["bendPositive"]) ? 1 : -1;
timeline.setFrame(frameIndex, valueMap["time"], mix, bendDirection);
this.readCurve(timeline, frameIndex, valueMap);
frameIndex++;
}
timelines.push(timeline);
duration = Math.max(duration, timeline.frames[timeline.frameCount * 3 - 3]);
}
var ffd = map["ffd"];
for (var skinName in ffd)
{
var skin = skeletonData.findSkin(skinName);
var slotMap = ffd[skinName];
for (slotName in slotMap)
{
var slotIndex = skeletonData.findSlotIndex(slotName);
var meshMap = slotMap[slotName];
for (var meshName in meshMap)
{
var values = meshMap[meshName];
var timeline = new spine.FfdTimeline(values.length);
var attachment = skin.getAttachment(slotIndex, meshName);
if (!attachment) throw "FFD attachment not found: " + meshName;
timeline.slotIndex = slotIndex;
timeline.attachment = attachment;
var isMesh = attachment.type == spine.AttachmentType.mesh;
var vertexCount;
if (isMesh)
vertexCount = attachment.vertices.length;
else
vertexCount = attachment.weights.length / 3 * 2;
var frameIndex = 0;
for (var i = 0, n = values.length; i < n; i++)
{
var valueMap = values[i];
var vertices;
if (!valueMap["vertices"])
{
if (isMesh)
vertices = attachment.vertices;
else
{
vertices = [];
vertices.length = vertexCount;
}
} else {
var verticesValue = valueMap["vertices"];
var vertices = [];
vertices.length = vertexCount;
var start = valueMap["offset"] || 0;
var nn = verticesValue.length;
if (this.scale == 1)
{
for (var ii = 0; ii < nn; ii++)
vertices[ii + start] = verticesValue[ii];
} else {
for (var ii = 0; ii < nn; ii++)
vertices[ii + start] = verticesValue[ii] * this.scale;
}
if (isMesh)
{
var meshVertices = attachment.vertices;
for (var ii = 0, nn = vertices.length; ii < nn; ii++)
vertices[ii] += meshVertices[ii];
}
}
timeline.setFrame(frameIndex, valueMap["time"], vertices);
this.readCurve(timeline, frameIndex, valueMap);
frameIndex++;
}
timelines[timelines.length] = timeline;
duration = Math.max(duration, timeline.frames[timeline.frameCount - 1]);
}
}
}
var drawOrderValues = map["drawOrder"];
if (!drawOrderValues) drawOrderValues = map["draworder"];
if (drawOrderValues)
{
var timeline = new spine.DrawOrderTimeline(drawOrderValues.length);
var slotCount = skeletonData.slots.length;
var frameIndex = 0;
for (var i = 0, n = drawOrderValues.length; i < n; i++)
{
var drawOrderMap = drawOrderValues[i];
var drawOrder = null;
if (drawOrderMap["offsets"])
{
drawOrder = [];
drawOrder.length = slotCount;
for (var ii = slotCount - 1; ii >= 0; ii--)
drawOrder[ii] = -1;
var offsets = drawOrderMap["offsets"];
var unchanged = [];
unchanged.length = slotCount - offsets.length;
var originalIndex = 0, unchangedIndex = 0;
for (var ii = 0, nn = offsets.length; ii < nn; ii++)
{
var offsetMap = offsets[ii];
var slotIndex = skeletonData.findSlotIndex(offsetMap["slot"]);
if (slotIndex == -1) throw "Slot not found: " + offsetMap["slot"];
// Collect unchanged items.
while (originalIndex != slotIndex)
unchanged[unchangedIndex++] = originalIndex++;
// Set changed items.
drawOrder[originalIndex + offsetMap["offset"]] = originalIndex++;
}
// Collect remaining unchanged items.
while (originalIndex < slotCount)
unchanged[unchangedIndex++] = originalIndex++;
// Fill in unchanged items.
for (var ii = slotCount - 1; ii >= 0; ii--)
if (drawOrder[ii] == -1) drawOrder[ii] = unchanged[--unchangedIndex];
}
timeline.setFrame(frameIndex++, drawOrderMap["time"], drawOrder);
}
timelines.push(timeline);
duration = Math.max(duration, timeline.frames[timeline.getFrameCount() - 1]);
}
var events = map["events"];
if (events)
{
var timeline = new spine.EventTimeline(events.length);
var frameIndex = 0;
for (var i = 0, n = events.length; i < n; i++)
{
var eventMap = events[i];
var eventData = skeletonData.findEvent(eventMap["name"]);
if (!eventData) throw "Event not found: " + eventMap["name"];
var event = new spine.Event(eventData);
event.intValue = eventMap.hasOwnProperty("int") ? eventMap["int"] : eventData.intValue;
event.floatValue = eventMap.hasOwnProperty("float") ? eventMap["float"] : eventData.floatValue;
event.stringValue = eventMap.hasOwnProperty("string") ? eventMap["string"] : eventData.stringValue;
timeline.setFrame(frameIndex++, eventMap["time"], event);
}
timelines.push(timeline);
duration = Math.max(duration, timeline.frames[timeline.getFrameCount() - 1]);
}
skeletonData.animations.push(new spine.Animation(name, timelines, duration));
},
readCurve: function (timeline, frameIndex, valueMap)
{
var curve = valueMap["curve"];
if (!curve)
timeline.curves.setLinear(frameIndex);
else if (curve == "stepped")
timeline.curves.setStepped(frameIndex);
else if (curve instanceof Array)
timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]);
},
toColor: function (hexString, colorIndex)
{
if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString;
return parseInt(hexString.substring(colorIndex * 2, (colorIndex * 2) + 2), 16) / 255;
},
getFloatArray: function (map, name, scale)
{
var list = map[name];
var values = new spine.Float32Array(list.length);
var i = 0, n = list.length;
if (scale == 1)
{
for (; i < n; i++)
values[i] = list[i];
} else {
for (; i < n; i++)
values[i] = list[i] * scale;
}
return values;
},
getIntArray: function (map, name)
{
var list = map[name];
var values = new spine.Uint16Array(list.length);
for (var i = 0, n = list.length; i < n; i++)
values[i] = list[i] | 0;
return values;
}
};
spine.Atlas = function (atlasText, baseUrl, crossOrigin)
{
if (baseUrl && baseUrl.indexOf('/') !== baseUrl.length)
{
baseUrl += '/';
}
this.pages = [];
this.regions = [];
this.texturesLoading = 0;
var self = this;
var reader = new spine.AtlasReader(atlasText);
var tuple = [];
tuple.length = 4;
var page = null;
while (true)
{
var line = reader.readLine();
if (line === null) break;
line = reader.trim(line);
if (!line.length)
page = null;
else if (!page)
{
page = new spine.AtlasPage();
page.name = line;
if (reader.readTuple(tuple) == 2)
{ // size is only optional for an atlas packed with an old TexturePacker.
page.width = parseInt(tuple[0]);
page.height = parseInt(tuple[1]);
reader.readTuple(tuple);
}
page.format = spine.Atlas.Format[tuple[0]];
reader.readTuple(tuple);
page.minFilter = spine.Atlas.TextureFilter[tuple[0]];
page.magFilter = spine.Atlas.TextureFilter[tuple[1]];
var direction = reader.readValue();
page.uWrap = spine.Atlas.TextureWrap.clampToEdge;
page.vWrap = spine.Atlas.TextureWrap.clampToEdge;
if (direction == "x")
page.uWrap = spine.Atlas.TextureWrap.repeat;
else if (direction == "y")
page.vWrap = spine.Atlas.TextureWrap.repeat;
else if (direction == "xy")
page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat;
page.rendererObject = core.BaseTexture.fromImage(baseUrl + line, crossOrigin);
this.pages.push(page);
} else {
var region = new spine.AtlasRegion();
region.name = line;
region.page = page;
region.rotate = reader.readValue() == "true";
reader.readTuple(tuple);
var x = parseInt(tuple[0]);
var y = parseInt(tuple[1]);
reader.readTuple(tuple);
var width = parseInt(tuple[0]);
var height = parseInt(tuple[1]);
region.u = x / page.width;
region.v = y / page.height;
if (region.rotate)
{
region.u2 = (x + height) / page.width;
region.v2 = (y + width) / page.height;
} else {
region.u2 = (x + width) / page.width;
region.v2 = (y + height) / page.height;
}
region.x = x;
region.y = y;
region.width = Math.abs(width);
region.height = Math.abs(height);
if (reader.readTuple(tuple) == 4)
{ // split is optional
region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])];
if (reader.readTuple(tuple) == 4)
{ // pad is optional, but only present with splits
region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])];
reader.readTuple(tuple);
}
}
region.originalWidth = parseInt(tuple[0]);
region.originalHeight = parseInt(tuple[1]);
reader.readTuple(tuple);
region.offsetX = parseInt(tuple[0]);
region.offsetY = parseInt(tuple[1]);
region.index = parseInt(reader.readValue());
this.regions.push(region);
}
}
};
spine.Atlas.prototype = {
findRegion: function (name)
{
var regions = this.regions;
for (var i = 0, n = regions.length; i < n; i++)
if (regions[i].name == name) return regions[i];
return null;
},
dispose: function ()
{
var pages = this.pages;
for (var i = 0, n = pages.length; i < n; i++)
pages[i].rendererObject.destroy(true);
},
updateUVs: function (page)
{
var regions = this.regions;
for (var i = 0, n = regions.length; i < n; i++)
{
var region = regions[i];
if (region.page != page) continue;
region.u = region.x / page.width;
region.v = region.y / page.height;
if (region.rotate)
{
region.u2 = (region.x + region.height) / page.width;
region.v2 = (region.y + region.width) / page.height;
} else {
region.u2 = (region.x + region.width) / page.width;
region.v2 = (region.y + region.height) / page.height;
}
}
}
};
spine.Atlas.Format = {
alpha: 0,
intensity: 1,
luminanceAlpha: 2,
rgb565: 3,
rgba4444: 4,
rgb888: 5,
rgba8888: 6
};
spine.Atlas.TextureFilter = {
nearest: 0,
linear: 1,
mipMap: 2,
mipMapNearestNearest: 3,
mipMapLinearNearest: 4,
mipMapNearestLinear: 5,
mipMapLinearLinear: 6
};
spine.Atlas.TextureWrap = {
mirroredRepeat: 0,
clampToEdge: 1,
repeat: 2
};
spine.AtlasPage = function ()
{};
spine.AtlasPage.prototype = {
name: null,
format: null,
minFilter: null,
magFilter: null,
uWrap: null,
vWrap: null,
rendererObject: null,
width: 0,
height: 0
};
spine.AtlasRegion = function ()
{};
spine.AtlasRegion.prototype = {
page: null,
name: null,
x: 0, y: 0,
width: 0, height: 0,
u: 0, v: 0, u2: 0, v2: 0,
offsetX: 0, offsetY: 0,
originalWidth: 0, originalHeight: 0,
index: 0,
rotate: false,
splits: null,
pads: null
};
spine.AtlasReader = function (text)
{
this.lines = text.split(/\r\n|\r|\n/);
};
spine.AtlasReader.prototype = {
index: 0,
trim: function (value)
{
return value.replace(/^\s+|\s+$/g, "");
},
readLine: function ()
{
if (this.index >= this.lines.length) return null;
return this.lines[this.index++];
},
readValue: function ()
{
var line = this.readLine();
var colon = line.indexOf(":");
if (colon == -1) throw "Invalid line: " + line;
return this.trim(line.substring(colon + 1));
},
/** Returns the number of tuple values read (1, 2 or 4). */
readTuple: function (tuple)
{
var line = this.readLine();
var colon = line.indexOf(":");
if (colon == -1) throw "Invalid line: " + line;
var i = 0, lastMatch = colon + 1;
for (; i < 3; i++)
{
var comma = line.indexOf(",", lastMatch);
if (comma == -1) break;
tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch));
lastMatch = comma + 1;
}
tuple[i] = this.trim(line.substring(lastMatch));
return i + 1;
}
};
spine.AtlasAttachmentParser = function (atlas)
{
this.atlas = atlas;
};
spine.AtlasAttachmentParser.prototype = {
newRegionAttachment: function (skin, name, path)
{
var region = this.atlas.findRegion(path);
if (!region) throw "Region not found in atlas: " + path + " (region attachment: " + name + ")";
var attachment = new spine.RegionAttachment(name);
attachment.rendererObject = region;
attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate);
attachment.regionOffsetX = region.offsetX;
attachment.regionOffsetY = region.offsetY;
attachment.regionWidth = region.width;
attachment.regionHeight = region.height;
attachment.regionOriginalWidth = region.originalWidth;
attachment.regionOriginalHeight = region.originalHeight;
return attachment;
},
newMeshAttachment: function (skin, name, path)
{
var region = this.atlas.findRegion(path);
if (!region) throw "Region not found in atlas: " + path + " (mesh attachment: " + name + ")";
var attachment = new spine.MeshAttachment(name);
attachment.rendererObject = region;
attachment.regionU = region.u;
attachment.regionV = region.v;
attachment.regionU2 = region.u2;
attachment.regionV2 = region.v2;
attachment.regionRotate = region.rotate;
attachment.regionOffsetX = region.offsetX;
attachment.regionOffsetY = region.offsetY;
attachment.regionWidth = region.width;
attachment.regionHeight = region.height;
attachment.regionOriginalWidth = region.originalWidth;
attachment.regionOriginalHeight = region.originalHeight;
return attachment;
},
newSkinnedMeshAttachment: function (skin, name, path)
{
var region = this.atlas.findRegion(path);
if (!region) throw "Region not found in atlas: " + path + " (skinned mesh attachment: " + name + ")";
var attachment = new spine.SkinnedMeshAttachment(name);
attachment.rendererObject = region;
attachment.regionU = region.u;
attachment.regionV = region.v;
attachment.regionU2 = region.u2;
attachment.regionV2 = region.v2;
attachment.regionRotate = region.rotate;
attachment.regionOffsetX = region.offsetX;
attachment.regionOffsetY = region.offsetY;
attachment.regionWidth = region.width;
attachment.regionHeight = region.height;
attachment.regionOriginalWidth = region.originalWidth;
attachment.regionOriginalHeight = region.originalHeight;
return attachment;
},
newBoundingBoxAttachment: function (skin, name)
{
return new spine.BoundingBoxAttachment(name);
}
};
spine.SkeletonBounds = function ()
{
this.polygonPool = [];
this.polygons = [];
this.boundingBoxes = [];
};
spine.SkeletonBounds.prototype = {
minX: 0, minY: 0, maxX: 0, maxY: 0,
update: function (skeleton, updateAabb)
{
var slots = skeleton.slots;
var slotCount = slots.length;
var x = skeleton.x, y = skeleton.y;
var boundingBoxes = this.boundingBoxes;
var polygonPool = this.polygonPool;
var polygons = this.polygons;
boundingBoxes.length = 0;
for (var i = 0, n = polygons.length; i < n; i++)
polygonPool.push(polygons[i]);
polygons.length = 0;
for (var i = 0; i < slotCount; i++)
{
var slot = slots[i];
var boundingBox = slot.attachment;
if (boundingBox.type != spine.AttachmentType.boundingbox) continue;
boundingBoxes.push(boundingBox);
var poolCount = polygonPool.length, polygon;
if (poolCount > 0)
{
polygon = polygonPool[poolCount - 1];
polygonPool.splice(poolCount - 1, 1);
} else
polygon = [];
polygons.push(polygon);
polygon.length = boundingBox.vertices.length;
boundingBox.computeWorldVertices(x, y, slot.bone, polygon);
}
if (updateAabb) this.aabbCompute();
},
aabbCompute: function ()
{
var polygons = this.polygons;
var minX = Number.MAX_VALUE, minY = Number.MAX_VALUE, maxX = Number.MIN_VALUE, maxY = Number.MIN_VALUE;
for (var i = 0, n = polygons.length; i < n; i++)
{
var vertices = polygons[i];
for (var ii = 0, nn = vertices.length; ii < nn; ii += 2)
{
var x = vertices[ii];
var y = vertices[ii + 1];
minX = Math.min(minX, x);
minY = Math.min(minY, y);
maxX = Math.max(maxX, x);
maxY = Math.max(maxY, y);
}
}
this.minX = minX;
this.minY = minY;
this.maxX = maxX;
this.maxY = maxY;
},
/** Returns true if the axis aligned bounding box contains the point. */
aabbContainsPoint: function (x, y)
{
return x >= this.minX && x <= this.maxX && y >= this.minY && y <= this.maxY;
},
/** Returns true if the axis aligned bounding box intersects the line segment. */
aabbIntersectsSegment: function (x1, y1, x2, y2)
{
var minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY;
if ((x1 <= minX && x2 <= minX) || (y1 <= minY && y2 <= minY) || (x1 >= maxX && x2 >= maxX) || (y1 >= maxY && y2 >= maxY))
return false;
var m = (y2 - y1) / (x2 - x1);
var y = m * (minX - x1) + y1;
if (y > minY && y < maxY) return true;
y = m * (maxX - x1) + y1;
if (y > minY && y < maxY) return true;
var x = (minY - y1) / m + x1;
if (x > minX && x < maxX) return true;
x = (maxY - y1) / m + x1;
if (x > minX && x < maxX) return true;
return false;
},
/** Returns true if the axis aligned bounding box intersects the axis aligned bounding box of the specified bounds. */
aabbIntersectsSkeleton: function (bounds)
{
return this.minX < bounds.maxX && this.maxX > bounds.minX && this.minY < bounds.maxY && this.maxY > bounds.minY;
},
/** Returns the first bounding box attachment that contains the point, or null. When doing many checks, it is usually more
* efficient to only call this method if {@link #aabbContainsPoint(float, float)} returns true. */
containsPoint: function (x, y)
{
var polygons = this.polygons;
for (var i = 0, n = polygons.length; i < n; i++)
if (this.polygonContainsPoint(polygons[i], x, y)) return this.boundingBoxes[i];
return null;
},
/** Returns the first bounding box attachment that contains the line segment, or null. When doing many checks, it is usually
* more efficient to only call this method if {@link #aabbIntersectsSegment(float, float, float, float)} returns true. */
intersectsSegment: function (x1, y1, x2, y2)
{
var polygons = this.polygons;
for (var i = 0, n = polygons.length; i < n; i++)
if (polygons[i].intersectsSegment(x1, y1, x2, y2)) return this.boundingBoxes[i];
return null;
},
/** Returns true if the polygon contains the point. */
polygonContainsPoint: function (polygon, x, y)
{
var nn = polygon.length;
var prevIndex = nn - 2;
var inside = false;
for (var ii = 0; ii < nn; ii += 2)
{
var vertexY = polygon[ii + 1];
var prevY = polygon[prevIndex + 1];
if ((vertexY < y && prevY >= y) || (prevY < y && vertexY >= y))
{
var vertexX = polygon[ii];
if (vertexX + (y - vertexY) / (prevY - vertexY) * (polygon[prevIndex] - vertexX) < x) inside = !inside;
}
prevIndex = ii;
}
return inside;
},
/** Returns true if the polygon contains the line segment. */
polygonIntersectsSegment: function (polygon, x1, y1, x2, y2)
{
var nn = polygon.length;
var width12 = x1 - x2, height12 = y1 - y2;
var det1 = x1 * y2 - y1 * x2;
var x3 = polygon[nn - 2], y3 = polygon[nn - 1];
for (var ii = 0; ii < nn; ii += 2)
{
var x4 = polygon[ii], y4 = polygon[ii + 1];
var det2 = x3 * y4 - y3 * x4;
var width34 = x3 - x4, height34 = y3 - y4;
var det3 = width12 * height34 - height12 * width34;
var x = (det1 * width34 - width12 * det2) / det3;
if (((x >= x3 && x <= x4) || (x >= x4 && x <= x3)) && ((x >= x1 && x <= x2) || (x >= x2 && x <= x1)))
{
var y = (det1 * height34 - height12 * det2) / det3;
if (((y >= y3 && y <= y4) || (y >= y4 && y <= y3)) && ((y >= y1 && y <= y2) || (y >= y2 && y <= y1))) return true;
}
x3 = x4;
y3 = y4;
}
return false;
},
getPolygon: function (attachment)
{
var index = this.boundingBoxes.indexOf(attachment);
return index == -1 ? null : this.polygons[index];
},
getWidth: function ()
{
return this.maxX - this.minX;
},
getHeight: function ()
{
return this.maxY - this.minY;
}
};
},{"../core":19}],121:[function(require,module,exports){
/**
* @file Main export of the PIXI spine library
* @author Mat Groves <mat@goodboydigital.com>
* @copyright 2013-2015 GoodBoyDigital
* @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License}
*/
/**
* @namespace PIXI.spine
*/
module.exports = {
Spine: require('./Spine'),
SpineRuntime: require('./SpineRuntime')
};
},{"./Spine":119,"./SpineRuntime":120}],122:[function(require,module,exports){
var core = require('../core');
/**
* A BitmapText object will create a line or multiple lines of text using bitmap font. To
* split a line you can use '\n', '\r' or '\r\n' in your string. You can generate the fnt files using:
*
* A BitmapText can only be created when the font is loaded
*
* ```js
* // in this case the font is in a file called 'desyrel.fnt'
* var bitmapText = new PIXI.BitmapText("text using a fancy font!", {font: "35px Desyrel", align: "right"});
* ```
*
*
* http://www.angelcode.com/products/bmfont/ for windows or
* http://www.bmglyph.com/ for mac.
*
* @class
* @extends Container
* @memberof PIXI.text
* @param text {string} The copy that you would like the text to display
* @param style {object} The style parameters
* @param style.font {string|object} The font descriptor for the object, can be passed as a string of form
* "24px FontName" or "FontName" or as an object with explicit name/size properties.
* @param [style.font.size] {number} The size of the font in pixels, e.g. 24
* @param [style.font.name] {string} The bitmap font id
* @param [style.align='left'] {string} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text
*/
function BitmapText(text, style)
{
core.Container.call(this);
/**
* The width of the overall text, different from fontSize,
* which is defined in the style object
*
* @member {number}
* @readOnly
*/
this.textWidth = 0;
/**
* The height of the overall text, different from fontSize,
* which is defined in the style object
*
* @member {number}
* @readOnly
*/
this.textHeight = 0;
/**
* Private tracker for the letter sprite pool.
*
* @member {Sprite[]}
* @private
*/
this._glyphs = [];
/**
* Private tracker for the current style.
*
* @member {object}
* @private
*/
this._font = {
tint: style.tint,
align: style.align,
name: null,
size: 0
};
/**
* Private tracker for the current font.
*
* @member {object}
* @private
*/
this.font = style.font; // run font setter
/**
* Private tracker for the current text.
*
* @member {string}
* @private
*/
this._text = text;
/**
* The max width of this bitmap text in pixels. If the text provided is longer than the value provided, line breaks will be automatically inserted in the last whitespace.
* Disable by setting value to 0
*
* @member {number}
*/
this.maxWidth = 0;
/**
* The dirty state of this object.
*
* @member {boolean}
*/
this.dirty = false;
this.updateText();
}
// constructor
BitmapText.prototype = Object.create(core.Container.prototype);
BitmapText.prototype.constructor = BitmapText;
module.exports = BitmapText;
Object.defineProperties(BitmapText.prototype, {
/**
* The tint of the BitmapText object
*
* @member {number}
* @memberof BitmapText#
*/
tint: {
get: function ()
{
return this._font.tint;
},
set: function (value)
{
this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF;
this.dirty = true;
}
},
/**
* The alignment of the BitmapText object
*
* @member {string}
* @default 'left'
* @memberof BitmapText#
*/
align: {
get: function ()
{
return this._font.align;
},
set: function (value)
{
this._font.align = value;
this.dirty = true;
}
},
/**
* The font descriptor of the BitmapText object
*
* @member {Font}
* @memberof BitmapText#
*/
font: {
get: function ()
{
return this._font;
},
set: function (value)
{
if (typeof value === 'string') {
value = value.split(' ');
this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' ');
this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size;
}
else {
this._font.name = value.name;
this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10);
}
this.dirty = true;
}
},
/**
* The text of the BitmapText object
*
* @member {string}
* @memberof BitmapText#
*/
text: {
get: function ()
{
return this._text;
},
set: function (value)
{
this._text = value;
this.dirty = true;
}
}
});
/**
* Renders text and updates it when needed
*
* @private
*/
BitmapText.prototype.updateText = function ()
{
var data = BitmapText.fonts[this._font.name];
var pos = new core.math.Point();
var prevCharCode = null;
var chars = [];
var lastLineWidth = 0;
var maxLineWidth = 0;
var lineWidths = [];
var line = 0;
var scale = this._font.size / data.size;
var lastSpace = -1;
for (var i = 0; i < this.text.length; i++)
{
var charCode = this.text.charCodeAt(i);
lastSpace = /(\s)/.test(this.text.charAt(i)) ? i : lastSpace;
if (/(?:\r\n|\r|\n)/.test(this.text.charAt(i)))
{
lineWidths.push(lastLineWidth);
maxLineWidth = Math.max(maxLineWidth, lastLineWidth);
line++;
pos.x = 0;
pos.y += data.lineHeight;
prevCharCode = null;
continue;
}
if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth)
{
chars.splice(lastSpace, i - lastSpace);
i = lastSpace;
lastSpace = -1;
lineWidths.push(lastLineWidth);
maxLineWidth = Math.max(maxLineWidth, lastLineWidth);
line++;
pos.x = 0;
pos.y += data.lineHeight;
prevCharCode = null;
continue;
}
var charData = data.chars[charCode];
if (!charData)
{
continue;
}
if (prevCharCode && charData.kerning[prevCharCode])
{
pos.x += charData.kerning[prevCharCode];
}
chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.math.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
lastLineWidth = pos.x + (charData.texture.width + charData.xOffset);
pos.x += charData.xAdvance;
prevCharCode = charCode;
}
lineWidths.push(lastLineWidth);
maxLineWidth = Math.max(maxLineWidth, lastLineWidth);
var lineAlignOffsets = [];
for (i = 0; i <= line; i++)
{
var alignOffset = 0;
if (this._font.align === 'right')
{
alignOffset = maxLineWidth - lineWidths[i];
}
else if (this._font.align === 'center')
{
alignOffset = (maxLineWidth - lineWidths[i]) / 2;
}
lineAlignOffsets.push(alignOffset);
}
var lenChars = chars.length;
var tint = this.tint;
for (i = 0; i < lenChars; i++)
{
var c = this._glyphs[i]; // get the next glyph sprite
if (c)
{
c.texture = chars[i].texture;
}
else
{
c = new core.Sprite(chars[i].texture);
this._glyphs.push(c);
}
c.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
c.position.y = chars[i].position.y * scale;
c.scale.x = c.scale.y = scale;
c.tint = tint;
if (!c.parent)
{
this.addChild(c);
}
}
// remove unnecessary children.
for (i = lenChars; i < this._glyphs.length; ++i)
{
this.removeChild(this._glyphs[i]);
}
this.textWidth = maxLineWidth * scale;
this.textHeight = (pos.y + data.lineHeight) * scale;
};
/**
* Updates the transform of this object
*
* @private
*/
BitmapText.prototype.updateTransform = function ()
{
if (this.dirty)
{
this.updateText();
this.dirty = false;
}
this.containerUpdateTransform();
};
BitmapText.fonts = {};
},{"../core":19}],123:[function(require,module,exports){
var core = require('../core');
/**
* A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string,
* or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object.
*
* A Text can be created directly from a string and a style object
*
* ```js
* var text = new PIXI.Text('This is a pixi text',{font : '24px Arial', fill : 0xff1010, align : 'center'});
* ```
*
* @class
* @extends Sprite
* @memberof PIXI.text
* @param text {string} The copy that you would like the text to display
* @param [style] {object} The style parameters
* @param [style.font] {string} default 'bold 20px Arial' The style and size of the font
* @param [style.fill='black'] {String|Number} A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'
* @param [style.align='left'] {string} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text
* @param [style.stroke] {String|Number} A canvas fillstyle that will be used on the text stroke e.g 'blue', '#FCFF00'
* @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.wordWrapWidth=100] {number} The width at which text will wrap, it needs wordWrap to be set to true
* @param [style.lineHeight] {number} The line height, a number that represents the vertical space that a letter uses
* @param [style.dropShadow=false] {boolean} Set a drop shadow for the text
* @param [style.dropShadowColor='#000000'] {string} A fill style to be used on the dropshadow e.g 'red', '#00FF00'
* @param [style.dropShadowAngle=Math.PI/4] {number} Set a angle of the drop shadow
* @param [style.dropShadowDistance=5] {number} Set a distance of the drop shadow
* @param [style.padding=0] {number} Occasionally some fonts are cropped. Adding some padding will prevent this from happening
*/
function Text(text, style, resolution)
{
/**
* The canvas element that everything is drawn to
*
* @member {HTMLCanvasElement}
*/
this.canvas = document.createElement('canvas');
/**
* The canvas 2d context that everything is drawn with
* @member {HTMLCanvasElement}
*/
this.context = this.canvas.getContext('2d');
/**
* The resolution of the canvas.
* @member {number}
*/
this.resolution = resolution || core.RESOLUTION;
/**
* Private tracker for the current text.
*
* @member {string}
* @private
*/
this._text = null;
/**
* Private tracker for the current style.
*
* @member {object}
* @private
*/
this._style = null;
var texture = core.Texture.fromCanvas(this.canvas);
texture.trim = new core.math.Rectangle();
core.Sprite.call(this, texture);
this.text = text;
this.style = style;
}
// constructor
Text.prototype = Object.create(core.Sprite.prototype);
Text.prototype.constructor = Text;
module.exports = Text;
Text.fontPropertiesCache = {};
Text.fontPropertiesCanvas = document.createElement('canvas');
Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d');
Object.defineProperties(Text.prototype, {
/**
* The width of the Text, setting this will actually modify the scale to achieve the value set
*
* @member {number}
* @memberof Text#
*/
width: {
get: function ()
{
if (this.dirty)
{
this.updateText();
}
return this.scale.x * this._texture._frame.width;
},
set: function (value)
{
this.scale.x = value / this._texture._frame.width;
this._width = value;
}
},
/**
* The height of the Text, setting this will actually modify the scale to achieve the value set
*
* @member {number}
* @memberof Text#
*/
height: {
get: function ()
{
if (this.dirty)
{
this.updateText();
}
return this.scale.y * this._texture._frame.height;
},
set: function (value)
{
this.scale.y = value / this._texture._frame.height;
this._height = value;
}
},
/**
* Set the style of the text
*
* @param [style] {object} The style parameters
* @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.align='left'] {string} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text
* @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.wordWrap=false] {boolean} Indicates if word wrap should be used
* @param [style.wordWrapWidth=100] {number} The width at which text will wrap
* @param [style.lineHeight] {number} The line height, a number that represents the vertical space that a letter uses
* @param [style.dropShadow=false] {boolean} Set a drop shadow for the text
* @param [style.dropShadowColor='#000000'] {string} A fill style to be used on the dropshadow e.g 'red', '#00FF00'
* @param [style.dropShadowAngle=Math.PI/6] {number} Set a angle of the drop shadow
* @param [style.dropShadowDistance=5] {number} Set a distance of the drop shadow
* @param [style.padding=0] {number} Occasionally some fonts are cropped. Adding some padding will prevent this from happening
* @memberof Text#
*/
style: {
get: function ()
{
return this._style;
},
set: function (style)
{
style = style || {};
style.font = style.font || 'bold 20pt Arial';
style.fill = style.fill || 'black';
style.align = style.align || 'left';
style.stroke = style.stroke || 'black'; //provide a default, see: https://github.com/GoodBoyDigital/pixi.js/issues/136
style.strokeThickness = style.strokeThickness || 0;
style.wordWrap = style.wordWrap || false;
style.wordWrapWidth = style.wordWrapWidth || 100;
style.dropShadow = style.dropShadow || false;
style.dropShadowColor = style.dropShadowColor || '#000000';
style.dropShadowAngle = style.dropShadowAngle || Math.PI / 6;
style.dropShadowDistance = style.dropShadowDistance || 5;
style.padding = style.padding || 0;
this._style = style;
this.dirty = true;
}
},
/**
* Set the copy for the text object. To split a line you can use '\n'.
*
* @param text {string} The copy that you would like the text to display
* @memberof Text#
*/
text: {
get: function()
{
return this._text;
},
set: function (text){
text = text.toString() || ' ';
if (this._text === text)
{
return;
}
this._text = text;
this.dirty = true;
}
}
});
/**
* Renders text and updates it when needed
*
* @private
*/
Text.prototype.updateText = function ()
{
var style = this._style;
this.context.font = style.font;
// word wrap
// preserve original text
var outputText = style.wordWrap ? this.wordWrap(this._text) : this._text;
// split text into lines
var lines = outputText.split(/(?:\r\n|\r|\n)/);
// calculate text width
var lineWidths = new Array(lines.length);
var maxLineWidth = 0;
var fontProperties = this.determineFontProperties(style.font);
for (var i = 0; i < lines.length; i++)
{
var lineWidth = this.context.measureText(lines[i]).width;
lineWidths[i] = lineWidth;
maxLineWidth = Math.max(maxLineWidth, lineWidth);
}
var width = maxLineWidth + style.strokeThickness;
if (style.dropShadow)
{
width += style.dropShadowDistance;
}
this.canvas.width = ( width + this.context.lineWidth ) * this.resolution;
// calculate text height
var lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness;
var height = lineHeight * lines.length;
if (style.dropShadow)
{
height += style.dropShadowDistance;
}
this.canvas.height = ( height + this._style.padding * 2 ) * this.resolution;
this.context.scale( this.resolution, this.resolution);
if (navigator.isCocoonJS)
{
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
//this.context.fillStyle="#FF0000";
//this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
this.context.font = style.font;
this.context.strokeStyle = style.stroke;
this.context.lineWidth = style.strokeThickness;
this.context.textBaseline = 'alphabetic';
//this.context.lineJoin = 'round';
var linePositionX;
var linePositionY;
if (style.dropShadow)
{
this.context.fillStyle = style.dropShadowColor;
var xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance;
var yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance;
for (i = 0; i < lines.length; i++)
{
linePositionX = style.strokeThickness / 2;
linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent;
if (style.align === 'right')
{
linePositionX += maxLineWidth - lineWidths[i];
}
else if (style.align === 'center')
{
linePositionX += (maxLineWidth - lineWidths[i]) / 2;
}
if (style.fill)
{
this.context.fillText(lines[i], linePositionX + xShadowOffset, linePositionY + yShadowOffset + this._style.padding);
}
}
}
//set canvas text styles
this.context.fillStyle = style.fill;
//draw lines line by line
for (i = 0; i < lines.length; i++)
{
linePositionX = style.strokeThickness / 2;
linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent;
if (style.align === 'right')
{
linePositionX += maxLineWidth - lineWidths[i];
}
else if (style.align === 'center')
{
linePositionX += (maxLineWidth - lineWidths[i]) / 2;
}
if (style.stroke && style.strokeThickness)
{
this.context.strokeText(lines[i], linePositionX, linePositionY + this._style.padding);
}
if (style.fill)
{
this.context.fillText(lines[i], linePositionX, linePositionY + this._style.padding);
}
}
this.updateTexture();
};
/**
* Updates texture size based on canvas size
*
* @private
*/
Text.prototype.updateTexture = function ()
{
var texture = this._texture;
texture.baseTexture.hasLoaded = true;
texture.baseTexture.resolution = this.resolution;
texture.baseTexture.width = this.canvas.width / this.resolution;
texture.baseTexture.height = this.canvas.height / this.resolution;
texture.crop.width = texture._frame.width = this.canvas.width / this.resolution;
texture.crop.height = texture._frame.height = this.canvas.height / this.resolution;
texture.trim.x = 0;
texture.trim.y = -this._style.padding;
texture.trim.width = texture._frame.width;
texture.trim.height = texture._frame.height - this._style.padding*2;
this._width = this.canvas.width / this.resolution;
this._height = this.canvas.height / this.resolution;
texture.update();
this.dirty = false;
};
/**
* Renders the object using the WebGL renderer
*
* @param renderer {WebGLRenderer}
*/
Text.prototype.renderWebGL = function (renderer)
{
if (this.dirty)
{
//this.resolution = 1//renderer.resolution;
this.updateText();
}
core.Sprite.prototype.renderWebGL.call(this, renderer);
};
/**
* Renders the object using the Canvas renderer
*
* @param renderer {CanvasRenderer}
*/
Text.prototype._renderCanvas = function (renderer)
{
if (this.dirty)
{
// this.resolution = 1//renderer.resolution;
this.updateText();
}
core.Sprite.prototype._renderCanvas.call(this, renderer);
};
/**
* Calculates the ascent, descent and fontSize of a given fontStyle
*
* @param fontStyle {object}
* @private
*/
Text.prototype.determineFontProperties = function (fontStyle)
{
var properties = Text.fontPropertiesCache[fontStyle];
if (!properties)
{
properties = {};
var canvas = Text.fontPropertiesCanvas;
var context = Text.fontPropertiesContext;
context.font = fontStyle;
var width = Math.ceil(context.measureText('|MÉq').width);
var baseline = Math.ceil(context.measureText('M').width);
var height = 2 * baseline;
baseline = baseline * 1.4 | 0;
canvas.width = width;
canvas.height = height;
context.fillStyle = '#f00';
context.fillRect(0, 0, width, height);
context.font = fontStyle;
context.textBaseline = 'alphabetic';
context.fillStyle = '#000';
context.fillText('|MÉq', 0, baseline);
var imagedata = context.getImageData(0, 0, width, height).data;
var pixels = imagedata.length;
var line = width * 4;
var i, j;
var idx = 0;
var stop = false;
// ascent. scan from top to bottom until we find a non red pixel
for (i = 0; i < baseline; i++)
{
for (j = 0; j < line; j += 4)
{
if (imagedata[idx + j] !== 255)
{
stop = true;
break;
}
}
if (!stop)
{
idx += line;
}
else
{
break;
}
}
properties.ascent = baseline - i;
idx = pixels - line;
stop = false;
// descent. scan from bottom to top until we find a non red pixel
for (i = height; i > baseline; i--)
{
for (j = 0; j < line; j += 4)
{
if (imagedata[idx + j] !== 255)
{
stop = true;
break;
}
}
if (!stop)
{
idx -= line;
}
else
{
break;
}
}
properties.descent = i - baseline;
properties.fontSize = properties.ascent + properties.descent;
Text.fontPropertiesCache[fontStyle] = properties;
}
return properties;
};
/**
* Applies newlines to a string to have it optimally fit into the horizontal
* bounds set by the Text object's wordWrapWidth property.
*
* @param text {string}
* @private
*/
Text.prototype.wordWrap = function (text)
{
// Greedy wrapping algorithm that will wrap words as the line grows longer
// than its horizontal bounds.
var result = '';
var lines = text.split('\n');
var wordWrapWidth = this._style.wordWrapWidth;
for (var i = 0; i < lines.length; i++)
{
var spaceLeft = wordWrapWidth;
var words = lines[i].split(' ');
for (var j = 0; j < words.length; j++)
{
var wordWidth = this.context.measureText(words[j]).width;
var wordWidthWithSpace = wordWidth + this.context.measureText(' ').width;
if (j === 0 || wordWidthWithSpace > spaceLeft)
{
// Skip printing the newline if it's the first word of the line that is
// greater than the word wrap width.
if (j > 0)
{
result += '\n';
}
result += words[j];
spaceLeft = wordWrapWidth - wordWidth;
}
else
{
spaceLeft -= wordWidthWithSpace;
result += ' ' + words[j];
}
}
if (i < lines.length-1)
{
result += '\n';
}
}
return result;
};
/**
* Returns the bounds of the Text as a rectangle. The bounds calculation takes the worldTransform into account.
*
* @param matrix {Matrix} the transformation matrix of the Text
* @return {Rectangle} the framing rectangle
*/
Text.prototype.getBounds = function (matrix)
{
if (this.dirty)
{
this.updateText();
}
return core.Sprite.prototype.getBounds.call(this, matrix);
};
/**
* Destroys this text object.
*
* @param destroyBaseTexture {boolean} whether to destroy the base texture as well
*/
Text.prototype.destroy = function (destroyBaseTexture)
{
// make sure to reset the the context and canvas.. dont want this hanging around in memory!
this.context = null;
this.canvas = null;
this._texture.destroy(destroyBaseTexture === undefined ? true : destroyBaseTexture);
};
},{"../core":19}],124:[function(require,module,exports){
/**
* @file Main export of the PIXI text library
* @author Mat Groves <mat@goodboydigital.com>
* @copyright 2013-2015 GoodBoyDigital
* @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License}
*/
/**
* @namespace PIXI.text
*/
module.exports = {
Text: require('./Text'),
BitmapText: require('./BitmapText')
};
},{"./BitmapText":122,"./Text":123}],"pixi.js":[function(require,module,exports){
var core = require('./core');
extendCore(require('./extras'));
extendCore(require('./mesh'));
extendCore(require('./filters'));
extendCore(require('./interaction'));
extendCore(require('./loaders'));
extendCore(require('./spine'));
extendCore(require('./text'));
extendCore(require('./deprecation'));
function extendCore(obj)
{
for(var key in obj)
{
core[key] = obj[key];
}
}
module.exports = core;
},{"./core":19,"./deprecation":69,"./extras":75,"./filters":91,"./interaction":106,"./loaders":109,"./mesh":116,"./spine":121,"./text":124}]},{},["pixi.js"])("pixi.js")
});
//# sourceMappingURL=pixi.js.map
