Skip to content
Snippets Groups Projects
Commit 3fe2b42e authored by Christopher Pietsch's avatar Christopher Pietsch
Browse files

update pixijs

parent c18093e9
Branches
No related tags found
No related merge requests found
...@@ -191,12 +191,10 @@ function Canvas() { ...@@ -191,12 +191,10 @@ function Canvas() {
var renderOptions = { var renderOptions = {
resolution: 1, resolution: 1,
antialiasing: false, antialiasing: false,
width: width + margin.left + margin.right,
height: height,
}; };
renderer = new PIXI.WebGLRenderer( renderer = new PIXI.Renderer(renderOptions);
width + margin.left + margin.right,
height,
renderOptions
);
renderer.backgroundColor = parseInt( renderer.backgroundColor = parseInt(
config.style.canvasBackground.substring(1), config.style.canvasBackground.substring(1),
16 16
...@@ -827,7 +825,7 @@ function Canvas() { ...@@ -827,7 +825,7 @@ function Canvas() {
// console.log("load", d) // console.log("load", d)
var url = config.loader.textures.detail.url + d.id + ".jpg"; var url = config.loader.textures.detail.url + d.id + ".jpg";
var texture = new PIXI.Texture.fromImage(url, true); var texture = new PIXI.Texture.fromImage(url);
var sprite = new PIXI.Sprite(texture); var sprite = new PIXI.Sprite(texture);
var update = function () { var update = function () {
...@@ -862,7 +860,7 @@ function Canvas() { ...@@ -862,7 +860,7 @@ function Canvas() {
var page = d.page ? "_" + d.page : ""; var page = d.page ? "_" + d.page : "";
var url = config.loader.textures.big.url + d.id + page + ".jpg"; var url = config.loader.textures.big.url + d.id + page + ".jpg";
var texture = new PIXI.Texture.fromImage(url, true); var texture = new PIXI.Texture.from(url);
var sprite = new PIXI.Sprite(texture); var sprite = new PIXI.Sprite(texture);
var res = config.loader.textures.big.size; var res = config.loader.textures.big.size;
......
...@@ -21,16 +21,15 @@ function Loader(url){ ...@@ -21,16 +21,15 @@ function Loader(url){
return loader; return loader;
}; };
loader.progress = function () { loader.progress = function () {
total = (d3.event.total == 0) ? 80333701 : d3.event.total; total = d3.event.total == 0 ? 80333701 : d3.event.total;
loaded = d3.event.loaded; loaded = d3.event.loaded;
progress = parseInt((loaded / total) * 100); progress = parseInt((loaded / total) * 100);
indicator.style("height", progress + "%"); indicator.style("height", progress + "%");
//console.log(progress); //console.log(progress);
} };
loader.load = function () { loader.load = function () {
container = d3.select(".detailLoader"); container = d3.select(".detailLoader");
container.selectAll("div").remove(); container.selectAll("div").remove();
...@@ -42,7 +41,7 @@ function Loader(url){ ...@@ -42,7 +41,7 @@ function Loader(url){
.on("progress", loader.progress) .on("progress", loader.progress)
.on("load", function (data) { .on("load", function (data) {
finished(data); finished(data);
container.selectAll("div")//.remove(); container.selectAll("div"); //.remove();
}) })
.get(); .get();
}; };
...@@ -69,15 +68,13 @@ function LoaderSprites(){ ...@@ -69,15 +68,13 @@ function LoaderSprites(){
var loader = {}; var loader = {};
var progress = function () {}; var progress = function () {};
var pixiloader = new PIXI.loaders.Loader(); var pixiloader = new PIXI.Loader();
pixiloader pixiloader.use(pixiPackerParser(PIXI)).on("progress", function (p, r) {
.use(pixiPackerParser(PIXI))
.on("progress", function (p,r) {
// console.log("progress", p.progress); // console.log("progress", p.progress);
indicator.style("height", p.progress + "%"); indicator.style("height", p.progress + "%");
if(!r.textures) return if (!r.textures) return;
progress(r.textures) progress(r.textures);
}) });
loader.progress = function (value) { loader.progress = function (value) {
if (!arguments.length) return progress; if (!arguments.length) return progress;
...@@ -86,13 +83,11 @@ function LoaderSprites(){ ...@@ -86,13 +83,11 @@ function LoaderSprites(){
}; };
loader.load = function (url) { loader.load = function (url) {
pixiloader pixiloader.add(url).load(function (r) {
.add(url)
.load(function (r) {
console.log("done", r); console.log("done", r);
container.selectAll("div").remove(); container.selectAll("div").remove();
}); });
} };
return loader; return loader;
} }
...@@ -115,22 +110,19 @@ function LoaderSingleImage(){ ...@@ -115,22 +110,19 @@ function LoaderSingleImage(){
var finished = function () {}; var finished = function () {};
var pixiloader = new PIXI.loaders.Loader(); var pixiloader = new PIXI.loaders.Loader();
pixiloader pixiloader.on("progress", function (p, r) {
.on("progress", function (p,r) {
console.log("progress", p.progress); console.log("progress", p.progress);
indicator.style("height", p.progress + "%"); indicator.style("height", p.progress + "%");
}) });
loader.load = function (url) { loader.load = function (url) {
pixiloader pixiloader.add(url).load(function (r, s) {
.add(url)
.load(function (r,s) {
// console.log("done", r, s); // console.log("done", r, s);
container.selectAll("div").remove(); container.selectAll("div").remove();
finished(s[url].texture) finished(s[url].texture);
}); });
return loader return loader;
} };
loader.finished = function (value) { loader.finished = function (value) {
if (!arguments.length) return finished; if (!arguments.length) return finished;
...@@ -141,7 +133,6 @@ function LoaderSingleImage(){ ...@@ -141,7 +133,6 @@ function LoaderSingleImage(){
return loader; return loader;
} }
function LoaderBlob(url) { function LoaderBlob(url) {
var progress = 0, var progress = 0,
loaded = 0, loaded = 0,
...@@ -158,14 +149,14 @@ function LoaderBlob(url){ ...@@ -158,14 +149,14 @@ function LoaderBlob(url){
return loader; return loader;
}; };
loader.progress = function () { loader.progress = function () {
total = (d3.event.total == 0) ? 80333701 : d3.event.total; total = d3.event.total == 0 ? 80333701 : d3.event.total;
loaded = d3.event.loaded; loaded = d3.event.loaded;
progress = parseInt((loaded / total) * 100); progress = parseInt((loaded / total) * 100);
indicator.style("height", progress + "%"); indicator.style("height", progress + "%");
//console.log(progress); //console.log(progress);
} };
loader.load = function () { loader.load = function () {
//console.log("load", url) //console.log("load", url)
...@@ -192,20 +183,15 @@ function LoaderBlob(url){ ...@@ -192,20 +183,15 @@ function LoaderBlob(url){
return loader; return loader;
} }
function LoaderMultiple(url) { function LoaderMultiple(url) {
var progress = 0, var progress = 0,
loaded = 0, loaded = 0,
total = 0; total = 0;
var size = 9; var size = 9;
var urls = d3.range(size+1).map(function(d){ return url + d + ".gz.csv"}); var urls = d3.range(size + 1).map(function (d) {
return url + d + ".gz.csv";
});
var index = 0; var index = 0;
var itemsLoaded = 0; var itemsLoaded = 0;
var totalProgress = 0; var totalProgress = 0;
...@@ -223,16 +209,16 @@ function LoaderMultiple(url){ ...@@ -223,16 +209,16 @@ function LoaderMultiple(url){
loader.progress = function () { loader.progress = function () {
//console.log(d3.event.total, d3.event.loaded) //console.log(d3.event.total, d3.event.loaded)
total = (d3.event.total == 0) ? 8497147 : d3.event.total; total = d3.event.total == 0 ? 8497147 : d3.event.total;
loaded = d3.event.loaded; loaded = d3.event.loaded;
progress = parseInt((loaded / total) * 100); progress = parseInt((loaded / total) * 100);
totalProgress = (itemsLoaded + parseInt(progress*1.20)); totalProgress = itemsLoaded + parseInt(progress * 1.2);
label.text("loading " + totalProgress + " sketches"); label.text("loading " + totalProgress + " sketches");
indicator.style("height", (totalProgress/15) + "%"); indicator.style("height", totalProgress / 15 + "%");
// console.log(totalProgress,progress); // console.log(totalProgress,progress);
} };
loader.load = function (url) { loader.load = function (url) {
//console.log("loading", url); //console.log("loading", url);
...@@ -255,18 +241,16 @@ function LoaderMultiple(url){ ...@@ -255,18 +241,16 @@ function LoaderMultiple(url){
}; };
loader.init = function () { loader.init = function () {
container = d3.select(".detailLoader") container = d3.select(".detailLoader");
container.selectAll("div").remove(); container.selectAll("div").remove();
label = container.append("div").classed("label", true).text("loading"); label = container.append("div").classed("label", true).text("loading");
indicator = container.append("div").classed("indicator", true); indicator = container.append("div").classed("indicator", true);
loader.load(urls[index]); loader.load(urls[index]);
} };
loader.init(); loader.init();
return loader; return loader;
} }
...@@ -16,25 +16,32 @@ function WaitForAll(count, allDone) { ...@@ -16,25 +16,32 @@ function WaitForAll(count, allDone) {
}; };
} }
window.pixiPackerParser = function (PIXI) window.pixiPackerParser = function (PIXI) {
{ return function (resource, next) {
return function (resource, next)
{
// skip if no data, its not json, or it isn't a pixi-packer manifest // skip if no data, its not json, or it isn't a pixi-packer manifest
if (!resource.data || resource.type !== PIXI.loaders.Resource.TYPE.JSON || !resource.data.meta || resource.data.meta.type !== "pixi-packer") { if (
!resource.data ||
resource.type !== PIXI.LoaderResource.TYPE.JSON ||
!resource.data.meta ||
resource.data.meta.type !== "pixi-packer"
) {
return next(); return next();
} }
if (resource.data.meta.version > 1) { if (resource.data.meta.version > 1) {
throw new Error("pixi-packer manifest version " + resource.data.meta.version + " not supported"); throw new Error(
"pixi-packer manifest version " +
resource.data.meta.version +
" not supported"
);
} }
var loader = this; var loader = this;
var loadOptions = { var loadOptions = {
crossOrigin: resource.crossOrigin, crossOrigin: resource.crossOrigin,
loadType: PIXI.loaders.Resource.LOAD_TYPE.IMAGE, loadType: PIXI.LoaderResource.LOAD_TYPE.IMAGE,
parentResource: resource parentResource: resource,
}; };
var urlForManifest = resource.url.replace(loader.baseUrl, ""); var urlForManifest = resource.url.replace(loader.baseUrl, "");
...@@ -103,7 +110,13 @@ window.pixiPackerParser = function (PIXI) ...@@ -103,7 +110,13 @@ window.pixiPackerParser = function (PIXI)
} }
} }
res.textures[sprite.name] = new PIXI.Texture(res.texture.baseTexture, frame, crop, trim, false); res.textures[sprite.name] = new PIXI.Texture(
res.texture.baseTexture,
frame,
crop,
trim,
false
);
// lets also add the frame to pixi's global cache for fromFrame and fromImage functions // lets also add the frame to pixi's global cache for fromFrame and fromImage functions
PIXI.utils.TextureCache[sprite.name] = res.textures[sprite.name]; PIXI.utils.TextureCache[sprite.name] = res.textures[sprite.name];
......
Source diff could not be displayed: it is too large. Options to address this: view the blob.
Source diff could not be displayed: it is too large. Options to address this: view the blob.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment