Published unlisted
Edited
Jul 13, 2020
1 fork
Insert cell
md`# Pixi Spritesheet Loader`
Insert cell
delay = 200
Insert cell
url = "https://vikusviewer.fh-potsdam.de/smb/beide/data/sprites-jpg/web_web_full.json"
Insert cell
baseUrl = url.substring(0, url.lastIndexOf('/')) + "/"
Insert cell
Insert cell
Insert cell
async function* getTextureStream() {
const textures = [];
const baseTextures = [];
invalidation.then(() => {
console.log("invalidate textures");
for (const [id, texture] of textures) {
texture.destroy();
}
for (const texture of baseTextures) {
texture.destroy();
}
});
for (const sprites of data.spritesheets) {
const baseTexture = await loadTexture(baseUrl + sprites.image);
baseTextures.push(baseTexture);
for (const spritedata of sprites.sprites) {
const texture = extractSpriteTexture(baseTexture, spritedata);
const tuple = [spritedata.name, texture]
textures.push(tuple)
yield tuple
}
if (delay) await Promises.delay(delay);
}
}
Insert cell
sprites = {
const sprites = new Map();
const textureStream = getTextureStream();
invalidation.then(() => {
for (const sprite of sprites.values()) {
container.removeChild(sprite);
sprite.destroy();
}
});

for await (const [id, texture] of textureStream) {
const sprite = new PIXI.Sprite(texture);
sprite.anchor.set(0.5);
sprite.x = Math.random() * width;
sprite.y = Math.random() * height;
sprite.scale.set(0.1);
container.addChild(sprite);
sprites.set(id, sprite);
}
return sprites
}
Insert cell
Insert cell
{
sprites;
return container.children.length; //return PIXI.js container size to confirm only new sprites/Textures are created
}
Insert cell
Insert cell
loop = {
const x = (1.5 + Math.sin(now/1000))*4;
container.scale.set(x)
renderer.render(container)
}
Insert cell
PIXI.utils
Insert cell
import { renderer, container, PIXI, width, height } from "@cpietsch/pixi-renderer"
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more