Updated to PixiJS v5.
This commit is contained in:
parent
a775126f9c
commit
ebe0b1253f
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
@ -2894,7 +2894,7 @@
|
|||
}
|
||||
|
||||
const url = Button.iconIsUrl(icon) ? icon : `../../assets/icons/${icon}.png`;
|
||||
const iconTexture = PIXI.Texture.fromImage(url, true);
|
||||
const iconTexture = PIXI.Texture.from(url);
|
||||
|
||||
const sprite = new PIXI.Sprite(iconTexture);
|
||||
sprite.tint = color;
|
||||
|
@ -3728,7 +3728,7 @@
|
|||
// closeButton
|
||||
//-----------------
|
||||
if (this.opts.closeButton) {
|
||||
let closeButton = PIXI.Sprite.fromImage('../../assets/icons/close.png', true);
|
||||
let closeButton = PIXI.Sprite.from('../../assets/icons/close.png');
|
||||
closeButton.width = this.headerStyle.fontSize;
|
||||
closeButton.height = closeButton.width;
|
||||
closeButton.tint = this.theme.color2;
|
||||
|
@ -4312,8 +4312,7 @@
|
|||
resolution,
|
||||
autoResize,
|
||||
backgroundColor,
|
||||
forceCanvas,
|
||||
roundPixels // not needed for PixiJS >= 5
|
||||
forceCanvas
|
||||
});
|
||||
|
||||
this.width = width;
|
||||
|
@ -4944,7 +4943,7 @@
|
|||
* }).setup().run()
|
||||
*
|
||||
* // Add a video sprite
|
||||
* const sprite = new PIXI.Sprite(PIXI.Texture.fromVideo("assets/blurfilter.mp4"))
|
||||
* const sprite = new PIXI.Sprite(PIXI.Texture.from("assets/blurfilter.mp4"))
|
||||
* sprite.width = app.size.width
|
||||
* sprite.height = app.size.height
|
||||
* app.scene.addChild(sprite)
|
||||
|
@ -4970,10 +4969,15 @@
|
|||
}
|
||||
|
||||
apply(filterManager, input, output) {
|
||||
let renderTarget = filterManager.getRenderTarget(true);
|
||||
let renderTarget = filterManager.getFilterTexture();
|
||||
this.tiltShiftXFilter.apply(filterManager, input, renderTarget);
|
||||
this.tiltShiftYFilter.apply(filterManager, renderTarget, output);
|
||||
filterManager.returnRenderTarget(renderTarget);
|
||||
filterManager.returnFilterTexture(renderTarget);
|
||||
|
||||
// let renderTarget = filterManager.getRenderTarget(true)
|
||||
// this.tiltShiftXFilter.apply(filterManager, input, renderTarget)
|
||||
// this.tiltShiftYFilter.apply(filterManager, renderTarget, output)
|
||||
// filterManager.returnRenderTarget(renderTarget)
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -5050,19 +5054,23 @@
|
|||
|
||||
uniform mat3 projectionMatrix;
|
||||
|
||||
varying vec2 vVertexPosition;
|
||||
varying vec2 vTextureCoord;
|
||||
|
||||
void main(void) {
|
||||
gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
|
||||
vVertexPosition = aVertexPosition;
|
||||
vTextureCoord = aTextureCoord;
|
||||
gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const fragment = `
|
||||
|
||||
varying vec2 vVertexPosition;
|
||||
varying vec2 vTextureCoord;
|
||||
|
||||
uniform vec4 filterArea;
|
||||
uniform sampler2D uSampler;
|
||||
|
||||
uniform int shape;
|
||||
uniform vec4 rectangle;
|
||||
uniform vec3 circle;
|
||||
|
@ -5075,15 +5083,12 @@
|
|||
}
|
||||
|
||||
void main(void) {
|
||||
// textureCoord to pixelCoord
|
||||
vec2 pixelCoord = vTextureCoord * filterArea.xy - vec2(4.0, 4.0); // FIXME: There's a shift of 4 * 4 pixels, don't know why...
|
||||
|
||||
bool inside = false;
|
||||
|
||||
if (shape == 1) {
|
||||
inside = distance(pixelCoord, circle.xy) <= circle.z;
|
||||
inside = distance(vVertexPosition, circle.xy) <= circle.z;
|
||||
} else if (shape == 2) {
|
||||
inside = pixelCoord.x >= rectangle.x && pixelCoord.x <= rectangle.z && pixelCoord.y >= rectangle.y && pixelCoord.y <= rectangle.w;
|
||||
inside = vVertexPosition.x >= rectangle.x && vVertexPosition.x <= rectangle.z && vVertexPosition.y >= rectangle.y && vVertexPosition.y <= rectangle.w;
|
||||
}
|
||||
|
||||
if (inside) {
|
||||
|
@ -6396,9 +6401,7 @@
|
|||
for (let j = 0; j < elements.length; j++) {
|
||||
// if(elements[j].tagName == "svg") return false;
|
||||
|
||||
const target = elements[j];
|
||||
|
||||
let hammer = new Hammer(target, opts);
|
||||
let hammer = new Hammer(elements[j], opts);
|
||||
|
||||
if (window.propagating !== 'undefined') {
|
||||
hammer = propagating(hammer);
|
||||
|
@ -6419,23 +6422,16 @@
|
|||
hammer.get('tap').set(opts);
|
||||
}
|
||||
|
||||
console.log('APPLY HAMMER ON', type);
|
||||
|
||||
target.addEventListener("click", ()=>{
|
||||
console.log("Hello");
|
||||
});
|
||||
|
||||
hammer.on(type, event => {
|
||||
console.log('FIRED');
|
||||
cb(event);
|
||||
});
|
||||
|
||||
if (Hammer.__hammers.has(target)) {
|
||||
const elementHammers = Hammer.__hammers.get(target);
|
||||
if (Hammer.__hammers.has(elements[j])) {
|
||||
const elementHammers = Hammer.__hammers.get(elements[j]);
|
||||
elementHammers.push(hammer);
|
||||
Hammer.__hammers.set(target, elementHammers);
|
||||
Hammer.__hammers.set(elements[j], elementHammers);
|
||||
} else {
|
||||
Hammer.__hammers.set(target, [hammer]);
|
||||
Hammer.__hammers.set(elements[j], [hammer]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
|
@ -8501,7 +8497,7 @@
|
|||
}
|
||||
|
||||
/**
|
||||
* Loads a tile from image using the PIXI.Texture.fromImage method.
|
||||
* Loads a tile from image using the PIXI.Texture.from method.
|
||||
*
|
||||
* @static
|
||||
* @param {*} imageId
|
||||
|
@ -8511,7 +8507,7 @@
|
|||
* @memberof Tile
|
||||
*/
|
||||
static fromImage(imageId, crossorigin, scaleMode) {
|
||||
return new Tile(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode), imageId)
|
||||
return new Tile(PIXI.Texture.from(imageId, crossorigin, scaleMode), imageId)
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -8762,7 +8758,7 @@
|
|||
constructor(tiles, compression) {
|
||||
super(tiles);
|
||||
this.destroyed = false;
|
||||
this.loader = new PIXI.loaders.Loader();
|
||||
this.loader = new PIXI.Loader();
|
||||
this.loader.on('load', this._onLoaded.bind(this));
|
||||
this.loader.on('error', this._onError.bind(this));
|
||||
if (compression) {
|
||||
|
@ -9868,7 +9864,7 @@
|
|||
* @return {Sprite} sprite - A sprite with a single tile texture
|
||||
*/
|
||||
thumbnail() {
|
||||
return new PIXI.Sprite.fromImage(this.info.baseURL)
|
||||
return new PIXI.Sprite.from(this.info.baseURL)
|
||||
}
|
||||
|
||||
/** Returns a list of all tiles of a given level.
|
||||
|
@ -10368,7 +10364,7 @@
|
|||
let canvas = globalScatterLoaderCanvas;
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
let renderer = new PIXI.WebGLRenderer(w, h, {
|
||||
let renderer = new PIXI.Renderer(w, h, {
|
||||
view: canvas,
|
||||
resolution: resolution
|
||||
});
|
||||
|
@ -10627,8 +10623,8 @@
|
|||
* Class that represents a PixiJS Flippable.
|
||||
*
|
||||
* @example
|
||||
* const front = PIXI.Sprite.fromImage('./assets/front.jpg')
|
||||
* const back = PIXI.Sprite.fromImage('./assets/back.jpg')
|
||||
* const front = PIXI.Sprite.from('./assets/front.jpg')
|
||||
* const back = PIXI.Sprite.from('./assets/back.jpg')
|
||||
* app.scene.addChild(front)
|
||||
*
|
||||
* // Create the flippable
|
||||
|
@ -10649,7 +10645,7 @@
|
|||
* @constructor
|
||||
* @param {PIXI.DisplayObject} front - The object to show initially. Should have been added to the scene.
|
||||
* @param {PIXI.DisplayObject} back - The object to show on the backside. Should have not been added to the scene.
|
||||
* @param {PIXI.WebGLRenderer|PIXI.CanvasRenderer} renderer - The renderer of the application.
|
||||
* @param {PIXI.Renderer|PIXI.CanvasRenderer} renderer - The renderer of the application.
|
||||
* @param {object} [opts] - An options object which can contain the following properties.
|
||||
* @param {number} [opts.duration=1] - The duration of the flip animation in seconds.
|
||||
* @param {GSAP.Ease} [opts.ease=Power2.easeOut] - The ease of the flip animation.
|
||||
|
@ -10733,7 +10729,7 @@
|
|||
|
||||
// shadow
|
||||
//--------------------
|
||||
const shadow = new PIXI.projection.Sprite3d(PIXI.Texture.fromImage('../../assets/images/shadow.png'));
|
||||
const shadow = new PIXI.projection.Sprite3d(PIXI.Texture.from('../../assets/images/shadow.png'));
|
||||
shadow.renderable = false;
|
||||
shadow.anchor.set(0.5);
|
||||
shadow.scale3d.set(0.98);
|
||||
|
@ -11384,7 +11380,7 @@
|
|||
if (child.scatter) {
|
||||
let polygon = child.scatter.polygon;
|
||||
let shape = new PIXI.Polygon(polygon.flatAbsolutePoints());
|
||||
shape.close();
|
||||
//shape.close() not possible in PixiJS v5
|
||||
this.drawShape(shape);
|
||||
}
|
||||
}
|
||||
|
@ -15522,8 +15518,8 @@
|
|||
* Class that represents a PixiJS List.
|
||||
*
|
||||
* @example
|
||||
* const elephant1 = PIXI.Sprite.fromImage('./assets/elephant-1.jpg')
|
||||
* const elephant2 = PIXI.Sprite.fromImage('./assets/elephant-2.jpg')
|
||||
* const elephant1 = PIXI.Sprite.from('./assets/elephant-1.jpg')
|
||||
* const elephant2 = PIXI.Sprite.from('./assets/elephant-2.jpg')
|
||||
*
|
||||
* // Create the list
|
||||
* const list = new List([elephant1, elephant2])
|
||||
|
|
|
@ -13,7 +13,7 @@ function vendors() {
|
|||
'./node_modules/propagating-hammerjs/propagating.js',
|
||||
'./node_modules/pixi.js/dist/pixi.js',
|
||||
'./node_modules/pixi-compressed-textures/lib/crn_decomp.js',
|
||||
'./node_modules/pixi-compressed-textures/bin/pixi-compressed-textures.js',
|
||||
'./node_modules/pixi-compressed-textures/dist/pixi-compressed-textures.js',
|
||||
'./node_modules/pixi-filters/dist/pixi-filters.js',
|
||||
'./node_modules/pixi-particles/dist/pixi-particles.js',
|
||||
'./node_modules/pixi-projection/dist/pixi-projection.js',
|
||||
|
|
|
@ -116,8 +116,7 @@ export default class PIXIApp extends PIXI.Application {
|
|||
resolution,
|
||||
autoResize,
|
||||
backgroundColor,
|
||||
forceCanvas,
|
||||
roundPixels // not needed for PixiJS >= 5
|
||||
forceCanvas
|
||||
})
|
||||
|
||||
this.width = width
|
||||
|
|
|
@ -23,7 +23,7 @@
|
|||
document.body.appendChild(app.view)
|
||||
|
||||
// ex, add display objects
|
||||
const sprite = PIXI.Sprite.fromImage('./assets/app-circle.png')
|
||||
const sprite = PIXI.Sprite.from('./assets/app-circle.png')
|
||||
sprite.scale.set(.3, .3)
|
||||
app.stage.addChild(sprite)
|
||||
|
||||
|
|
|
@ -121,11 +121,11 @@
|
|||
})
|
||||
|
||||
let sprite1 = new PIXI.Sprite(
|
||||
PIXI.Texture.fromVideo('./assets/badge-1.mp4')
|
||||
PIXI.Texture.from('./assets/badge-1.mp4')
|
||||
)
|
||||
sprite1.scale.set(0.05, 0.05)
|
||||
|
||||
let texture1 = PIXI.Texture.fromVideo('./assets/badge-1.mp4')
|
||||
let texture1 = PIXI.Texture.from('./assets/badge-1.mp4')
|
||||
texture1.baseTexture.on('loaded', e => {
|
||||
let sprite1 = new PIXI.Sprite(texture1)
|
||||
sprite1.scale.set(0.05, 0.05)
|
||||
|
|
|
@ -36,7 +36,7 @@ const app = new PIXIApp({
|
|||
}).setup().run()
|
||||
|
||||
// Load a video and add it to the scene
|
||||
const videoSprite = new PIXI.Sprite(PIXI.Texture.fromVideo("assets/blurfilter.mp4"))
|
||||
const videoSprite = new PIXI.Sprite(PIXI.Texture.from("assets/blurfilter.mp4"))
|
||||
videoSprite.width = app.size.width
|
||||
videoSprite.height = app.size.height
|
||||
app.scene.addChild(videoSprite)
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
* }).setup().run()
|
||||
*
|
||||
* // Add a video sprite
|
||||
* const sprite = new PIXI.Sprite(PIXI.Texture.fromVideo("assets/blurfilter.mp4"))
|
||||
* const sprite = new PIXI.Sprite(PIXI.Texture.from("assets/blurfilter.mp4"))
|
||||
* sprite.width = app.size.width
|
||||
* sprite.height = app.size.height
|
||||
* app.scene.addChild(sprite)
|
||||
|
@ -41,10 +41,15 @@ export default class BlurFilter extends PIXI.Filter {
|
|||
}
|
||||
|
||||
apply(filterManager, input, output) {
|
||||
let renderTarget = filterManager.getRenderTarget(true)
|
||||
let renderTarget = filterManager.getFilterTexture()
|
||||
this.tiltShiftXFilter.apply(filterManager, input, renderTarget)
|
||||
this.tiltShiftYFilter.apply(filterManager, renderTarget, output)
|
||||
filterManager.returnRenderTarget(renderTarget)
|
||||
filterManager.returnFilterTexture(renderTarget)
|
||||
|
||||
// let renderTarget = filterManager.getRenderTarget(true)
|
||||
// this.tiltShiftXFilter.apply(filterManager, input, renderTarget)
|
||||
// this.tiltShiftYFilter.apply(filterManager, renderTarget, output)
|
||||
// filterManager.returnRenderTarget(renderTarget)
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -121,19 +126,23 @@ class TiltShiftAxisFilter extends PIXI.Filter {
|
|||
|
||||
uniform mat3 projectionMatrix;
|
||||
|
||||
varying vec2 vVertexPosition;
|
||||
varying vec2 vTextureCoord;
|
||||
|
||||
void main(void) {
|
||||
gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
|
||||
vVertexPosition = aVertexPosition;
|
||||
vTextureCoord = aTextureCoord;
|
||||
gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
|
||||
}
|
||||
`
|
||||
|
||||
const fragment = `
|
||||
|
||||
varying vec2 vVertexPosition;
|
||||
varying vec2 vTextureCoord;
|
||||
|
||||
uniform vec4 filterArea;
|
||||
uniform sampler2D uSampler;
|
||||
|
||||
uniform int shape;
|
||||
uniform vec4 rectangle;
|
||||
uniform vec3 circle;
|
||||
|
@ -146,15 +155,12 @@ class TiltShiftAxisFilter extends PIXI.Filter {
|
|||
}
|
||||
|
||||
void main(void) {
|
||||
// textureCoord to pixelCoord
|
||||
vec2 pixelCoord = vTextureCoord * filterArea.xy - vec2(4.0, 4.0); // FIXME: There's a shift of 4 * 4 pixels, don't know why...
|
||||
|
||||
bool inside = false;
|
||||
|
||||
if (shape == 1) {
|
||||
inside = distance(pixelCoord, circle.xy) <= circle.z;
|
||||
inside = distance(vVertexPosition, circle.xy) <= circle.z;
|
||||
} else if (shape == 2) {
|
||||
inside = pixelCoord.x >= rectangle.x && pixelCoord.x <= rectangle.z && pixelCoord.y >= rectangle.y && pixelCoord.y <= rectangle.w;
|
||||
inside = vVertexPosition.x >= rectangle.x && vVertexPosition.x <= rectangle.z && vVertexPosition.y >= rectangle.y && vVertexPosition.y <= rectangle.w;
|
||||
}
|
||||
|
||||
if (inside) {
|
||||
|
|
|
@ -664,7 +664,7 @@ export default class Button extends PIXI.Container {
|
|||
}
|
||||
|
||||
const url = Button.iconIsUrl(icon) ? icon : `../../assets/icons/${icon}.png`
|
||||
const iconTexture = PIXI.Texture.fromImage(url, true)
|
||||
const iconTexture = PIXI.Texture.from(url)
|
||||
|
||||
const sprite = new PIXI.Sprite(iconTexture)
|
||||
sprite.tint = color
|
||||
|
|
|
@ -64,7 +64,7 @@
|
|||
super.setup()
|
||||
let x = 30
|
||||
let y = 30
|
||||
let sprite = PIXI.Sprite.fromImage('../examples/women.jpeg')
|
||||
let sprite = PIXI.Sprite.from('../examples/women.jpeg')
|
||||
sprite.interactive = true
|
||||
let scatter = new DisplayObjectScatter(sprite, this.renderer,
|
||||
{
|
||||
|
|
|
@ -126,7 +126,7 @@
|
|||
app.scene.addChild(deepZoomImage)
|
||||
|
||||
//Set info text.
|
||||
info.innerHTML = "resolution: " + app._options.resolution +
|
||||
info.innerHTML = "resolution: " + app.renderer.resolution +
|
||||
"<br>high resolution: " + !!state;
|
||||
}
|
||||
|
||||
|
|
|
@ -595,7 +595,7 @@ export class DeepZoomImage extends PIXI.Container {
|
|||
* @return {Sprite} sprite - A sprite with a single tile texture
|
||||
*/
|
||||
thumbnail() {
|
||||
return new PIXI.Sprite.fromImage(this.info.baseURL)
|
||||
return new PIXI.Sprite.from(this.info.baseURL)
|
||||
}
|
||||
|
||||
/** Returns a list of all tiles of a given level.
|
||||
|
|
|
@ -84,7 +84,7 @@ export class PIXITileLoader extends TileLoader {
|
|||
constructor(tiles, compression) {
|
||||
super(tiles)
|
||||
this.destroyed = false
|
||||
this.loader = new PIXI.loaders.Loader()
|
||||
this.loader = new PIXI.Loader()
|
||||
this.loader.on('load', this._onLoaded.bind(this))
|
||||
this.loader.on('error', this._onError.bind(this))
|
||||
if (compression) {
|
||||
|
@ -256,7 +256,7 @@ export class RequestTileLoader extends TileLoader {
|
|||
}
|
||||
xhr.send()
|
||||
} else {
|
||||
let texture = PIXI.Texture.fromImage('assets/image.png')
|
||||
let texture = PIXI.Texture.from('assets/image.png')
|
||||
this._textureAvailable(url, col, row, texture)
|
||||
if (callback) callback()
|
||||
}
|
||||
|
|
|
@ -52,7 +52,7 @@ export default class Tile extends PIXI.Sprite {
|
|||
}
|
||||
|
||||
/**
|
||||
* Loads a tile from image using the PIXI.Texture.fromImage method.
|
||||
* Loads a tile from image using the PIXI.Texture.from method.
|
||||
*
|
||||
* @static
|
||||
* @param {*} imageId
|
||||
|
@ -62,7 +62,7 @@ export default class Tile extends PIXI.Sprite {
|
|||
* @memberof Tile
|
||||
*/
|
||||
static fromImage(imageId, crossorigin, scaleMode) {
|
||||
return new Tile(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode), imageId)
|
||||
return new Tile(PIXI.Texture.from(imageId, crossorigin, scaleMode), imageId)
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -75,13 +75,13 @@ class ScatterApp extends PIXIApp {
|
|||
setup() {
|
||||
super.setup()
|
||||
let urls = ['../examples/women.jpeg', '../examples/king.jpeg']
|
||||
PIXI.loader.add(urls).load((loader) => {
|
||||
PIXI.Loader.shared.add(urls).load((loader) => {
|
||||
// We need a loader because the size of the sprite must be known
|
||||
// when the scatter is defined
|
||||
let x = 30
|
||||
let y = 30
|
||||
for(let url in loader.resources) {
|
||||
let sprite = PIXI.Sprite.fromImage(url)
|
||||
let sprite = PIXI.Sprite.from(url)
|
||||
sprite.interactive = true
|
||||
let scatter = new DisplayObjectScatter(sprite, this.renderer,
|
||||
{ x: x, y: y,
|
||||
|
|
|
@ -45,7 +45,7 @@ export class ScatterLoader extends CardLoader {
|
|||
let canvas = globalScatterLoaderCanvas
|
||||
canvas.width = w
|
||||
canvas.height = h
|
||||
let renderer = new PIXI.WebGLRenderer(w, h, {
|
||||
let renderer = new PIXI.Renderer(w, h, {
|
||||
view: canvas,
|
||||
resolution: resolution
|
||||
})
|
||||
|
|
|
@ -26,8 +26,8 @@
|
|||
* Class that represents a PixiJS Flippable.
|
||||
*
|
||||
* @example
|
||||
* const front = PIXI.Sprite.fromImage('./assets/front.jpg')
|
||||
* const back = PIXI.Sprite.fromImage('./assets/back.jpg')
|
||||
* const front = PIXI.Sprite.from('./assets/front.jpg')
|
||||
* const back = PIXI.Sprite.from('./assets/back.jpg')
|
||||
* app.scene.addChild(front)
|
||||
*
|
||||
* // Create the flippable
|
||||
|
@ -48,7 +48,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
|||
* @constructor
|
||||
* @param {PIXI.DisplayObject} front - The object to show initially. Should have been added to the scene.
|
||||
* @param {PIXI.DisplayObject} back - The object to show on the backside. Should have not been added to the scene.
|
||||
* @param {PIXI.WebGLRenderer|PIXI.CanvasRenderer} renderer - The renderer of the application.
|
||||
* @param {PIXI.Renderer|PIXI.CanvasRenderer} renderer - The renderer of the application.
|
||||
* @param {object} [opts] - An options object which can contain the following properties.
|
||||
* @param {number} [opts.duration=1] - The duration of the flip animation in seconds.
|
||||
* @param {GSAP.Ease} [opts.ease=Power2.easeOut] - The ease of the flip animation.
|
||||
|
@ -132,7 +132,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
|||
|
||||
// shadow
|
||||
//--------------------
|
||||
const shadow = new PIXI.projection.Sprite3d(PIXI.Texture.fromImage('../../assets/images/shadow.png'))
|
||||
const shadow = new PIXI.projection.Sprite3d(PIXI.Texture.from('../../assets/images/shadow.png'))
|
||||
shadow.renderable = false
|
||||
shadow.anchor.set(0.5)
|
||||
shadow.scale3d.set(0.98)
|
||||
|
|
|
@ -68,7 +68,7 @@ app.scene.addChild(scatterContainer)
|
|||
|
||||
// scatter
|
||||
//--------------------
|
||||
const sprite1 = PIXI.Sprite.fromImage('./assets/fruit-1.jpg')
|
||||
const sprite1 = PIXI.Sprite.from('./assets/fruit-1.jpg')
|
||||
sprite1.interactive = true
|
||||
sprite1.scatter = new DisplayObjectScatter(sprite1, app.renderer, {
|
||||
x: 20,
|
||||
|
@ -81,7 +81,7 @@ scatterContainer.addChild(sprite1)
|
|||
|
||||
// flippable
|
||||
//--------------------
|
||||
const sprite2 = PIXI.Sprite.fromImage('./assets/fruit-2.jpg')
|
||||
const sprite2 = PIXI.Sprite.from('./assets/fruit-2.jpg')
|
||||
const flippable = new Flippable(sprite1, sprite2, app.renderer)
|
||||
|
||||
// button1
|
||||
|
|
|
@ -7,8 +7,8 @@ import Events from '../events.js'
|
|||
* Class that represents a PixiJS List.
|
||||
*
|
||||
* @example
|
||||
* const elephant1 = PIXI.Sprite.fromImage('./assets/elephant-1.jpg')
|
||||
* const elephant2 = PIXI.Sprite.fromImage('./assets/elephant-2.jpg')
|
||||
* const elephant1 = PIXI.Sprite.from('./assets/elephant-1.jpg')
|
||||
* const elephant2 = PIXI.Sprite.from('./assets/elephant-2.jpg')
|
||||
*
|
||||
* // Create the list
|
||||
* const list = new List([elephant1, elephant2])
|
||||
|
|
|
@ -129,7 +129,7 @@ let button6 = new Button({
|
|||
}
|
||||
})
|
||||
|
||||
let img = PIXI.Sprite.fromImage('./assets/modal-1.jpg')
|
||||
let img = PIXI.Sprite.from('./assets/modal-1.jpg')
|
||||
img.scale.set(.2, .2)
|
||||
|
||||
let button7 = new Button({
|
||||
|
|
|
@ -73,7 +73,7 @@ export class InteractivePopup extends AbstractPopup {
|
|||
// closeButton
|
||||
//-----------------
|
||||
if (this.opts.closeButton) {
|
||||
let closeButton = PIXI.Sprite.fromImage('../../assets/icons/close.png', true)
|
||||
let closeButton = PIXI.Sprite.from('../../assets/icons/close.png')
|
||||
closeButton.width = this.headerStyle.fontSize
|
||||
closeButton.height = closeButton.width
|
||||
closeButton.tint = this.theme.color2
|
||||
|
|
|
@ -43,7 +43,7 @@
|
|||
let x = 30
|
||||
let y = 30
|
||||
for (let key of ['women', 'king']) {
|
||||
let sprite = PIXI.Sprite.fromImage('../examples/' + key + '.jpeg')
|
||||
let sprite = PIXI.Sprite.from('../examples/' + key + '.jpeg')
|
||||
sprite.interactive = true
|
||||
let scatter = new DisplayObjectScatter(sprite, this.renderer,
|
||||
{
|
||||
|
@ -98,7 +98,7 @@
|
|||
this.scene.addChild(this.scatterContainerFront)
|
||||
|
||||
// Add the queen to ScatterContainer one
|
||||
let sprite1 = PIXI.Sprite.fromImage('../examples/women.jpeg')
|
||||
let sprite1 = PIXI.Sprite.from('../examples/women.jpeg')
|
||||
sprite1.interactive = true
|
||||
let scatter1 = new DisplayObjectScatter(sprite1, this.renderer, {
|
||||
x: 20,
|
||||
|
@ -108,7 +108,7 @@
|
|||
this.scatterContainerBack.addChild(sprite1)
|
||||
|
||||
// Add the king to ScatterContainer two
|
||||
let sprite2 = PIXI.Sprite.fromImage('../examples/king.jpeg')
|
||||
let sprite2 = PIXI.Sprite.from('../examples/king.jpeg')
|
||||
sprite2.interactive = true
|
||||
let scatter2 = new DisplayObjectScatter(sprite2, this.renderer, {
|
||||
x: 280,
|
||||
|
@ -151,7 +151,7 @@
|
|||
|
||||
|
||||
// Add the queen to ScatterContainer one
|
||||
let woman = PIXI.Sprite.fromImage('../examples/women.jpeg')
|
||||
let woman = PIXI.Sprite.from('../examples/women.jpeg')
|
||||
woman.interactive = true
|
||||
new DisplayObjectScatter(woman, this.renderer, {
|
||||
x: 20,
|
||||
|
@ -161,21 +161,21 @@
|
|||
})
|
||||
this.scene.addChild(woman)
|
||||
|
||||
let nestedKing = PIXI.Sprite.fromImage('../examples/king.jpeg')
|
||||
let nestedKing = PIXI.Sprite.from('../examples/king.jpeg')
|
||||
nestedKing.interactive = true
|
||||
new DisplayObjectScatter(nestedKing, this.renderer, {
|
||||
x: 20, y: 20, startScale: 0.3
|
||||
})
|
||||
woman.addChild(nestedKing)
|
||||
|
||||
let nestedQueen = PIXI.Sprite.fromImage('../examples/women.jpeg')
|
||||
let nestedQueen = PIXI.Sprite.from('../examples/women.jpeg')
|
||||
nestedQueen.interactive = true
|
||||
new DisplayObjectScatter(nestedQueen, this.renderer, {
|
||||
x: 40, y: 40, startScale: 0.3
|
||||
})
|
||||
woman.addChild(nestedQueen)
|
||||
|
||||
let king = PIXI.Sprite.fromImage('../examples/king.jpeg')
|
||||
let king = PIXI.Sprite.from('../examples/king.jpeg')
|
||||
king.interactive = true
|
||||
new DisplayObjectScatter(king, this.renderer, {
|
||||
x: 200, y: 20, startScale: 1
|
||||
|
|
|
@ -137,7 +137,7 @@ export class ScatterContainer extends PIXI.Graphics {
|
|||
if (child.scatter) {
|
||||
let polygon = child.scatter.polygon
|
||||
let shape = new PIXI.Polygon(polygon.flatAbsolutePoints())
|
||||
shape.close()
|
||||
//shape.close() not possible in PixiJS v5
|
||||
this.drawShape(shape)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -58,9 +58,9 @@ app.loadSprites([
|
|||
text.pivot.set(text.width / 2, text.height / 2)
|
||||
container.addChild(text)
|
||||
|
||||
// PIXI.extras.BitmapText
|
||||
// PIXI.BitmapText
|
||||
//--------------------
|
||||
const bitmapText = new PIXI.extras.BitmapText('Bibliothek\nStuttgart', {
|
||||
const bitmapText = new PIXI.BitmapText('Bibliothek\nStuttgart', {
|
||||
font: '50px Arial',
|
||||
align: 'left'
|
||||
})
|
||||
|
|
|
@ -143,7 +143,7 @@ app.loadSprites([
|
|||
textStyle: {lineHeight: 22, fontSize: 18, fill: ['#843d39','#ae4a4a', '#d7626c'], fontStyle: 'italic'}
|
||||
})
|
||||
|
||||
let texture1 = PIXI.Texture.fromVideo('./assets/tooltip-3.mp4')
|
||||
let texture1 = PIXI.Texture.from('./assets/tooltip-3.mp4')
|
||||
|
||||
texture1.baseTexture.on('loaded', e => {
|
||||
|
||||
|
|
File diff suppressed because it is too large
Load Diff
16
package.json
16
package.json
|
@ -27,9 +27,9 @@
|
|||
"author": "",
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"devDependencies": {
|
||||
"@pixi/jsdoc-template": "^2.4.2",
|
||||
"eslint": "^6.1.0",
|
||||
"eslint-config-prettier": "^6.0.0",
|
||||
"@pixi/jsdoc-template": "^2.4.3",
|
||||
"eslint": "^6.3.0",
|
||||
"eslint-config-prettier": "^6.2.0",
|
||||
"eslint-plugin-prettier": "^3.1.0",
|
||||
"fs-extra": "^8.0.1",
|
||||
"gulp": "^4.0.2",
|
||||
|
@ -48,11 +48,13 @@
|
|||
"gsap": "^2.1.3",
|
||||
"hammerjs": "^2.0.8",
|
||||
"optimal-select": "^4.0.1",
|
||||
"pixi-compressed-textures": "^1.1.8",
|
||||
"pixi-filters": "^2.7.1",
|
||||
"pixi-compressed-textures": "^2.0.0",
|
||||
"pixi-ease": "^2.4.0",
|
||||
"pixi-filters": "^3.0.3",
|
||||
"pixi-particles": "^4.1.1",
|
||||
"pixi-projection": "^0.2.8",
|
||||
"pixi.js": "^4.8.8",
|
||||
"pixi-projection": "^0.3.5",
|
||||
"pixi-viewport": "^4.2.2",
|
||||
"pixi.js": "^5.1.3",
|
||||
"propagating-hammerjs": "^1.4.7"
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue