Updated to PixiJS v5.
This commit is contained in:
parent
a775126f9c
commit
ebe0b1253f
97803
dist/iwmlib.3rdparty.js
vendored
97803
dist/iwmlib.3rdparty.js
vendored
File diff suppressed because one or more lines are too long
2
dist/iwmlib.3rdparty.min.js
vendored
2
dist/iwmlib.3rdparty.min.js
vendored
File diff suppressed because one or more lines are too long
1117
dist/iwmlib.js
vendored
1117
dist/iwmlib.js
vendored
File diff suppressed because it is too large
Load Diff
76
dist/iwmlib.pixi.js
vendored
76
dist/iwmlib.pixi.js
vendored
@ -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 => {
|
||||
|
||||
|
1595
package-lock.json
generated
1595
package-lock.json
generated
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
Block a user