pixijs / layers Goto Github PK
View Code? Open in Web Editor NEWSeparate the z-hierarchy of your scene tree from its canonical structure.
Home Page: https://pixijs.io/layers/docs/
License: MIT License
Separate the z-hierarchy of your scene tree from its canonical structure.
Home Page: https://pixijs.io/layers/docs/
License: MIT License
Hey Ivan,
I've stumbled upon this library when trying to do some work to create a image/content editor with Pixi as the rendering engine. Basically Fabric.js/Illustrator but with Pixi for the WebGL.
I was going to write a lot of my own stuff but I saw the pixi-layers branch and all the great work/demos that went into that. Great job and docs too!
I then also saw that pixi-display had a few commits as well. Are you forking the projects? The way the pixi-layers readme reads pixi-layers has a more advanced version of pixi-display in it.
I'm going to start with pixi-layers as a starting point but I'd like to know/understand your plans moving forward and if in my using this library I can be of any help.
I'm trying to use this addon, but I'm getting errors like this one: DisplayGroup is not a constructor
when I try to import from pixi-display
.
How can I use it if there is no export statement?
Thank you
So I'm experiencing this problem right now:
[1-Major] Basically, no matter what I tried, I couldn't make childrens of a sprite, appear below the sprite (they are on the same layer, aka, PIXI.DisplayGroup
) - so basically I want wings to appear behind the body, but just doesn't happen
[2-Minor] I had pixi-layers 0.1.7 - now I got the latest 0.1.7 - it's a lengthier one, has some sortPriority
code - I tried setting it to several places but didn't change anything - I think the version should've increased it at one point, to 0.1.8
[3-Major-Opinion-Request] I could solve this problem with tools at hand, make the body a children of the container, rather than the container itself, but looking for the optimal solution, I also apply filters to the body, I want the additional parts like the head etc. to have the filters too, if they were actually one Sprite, this would be the case, but I'm guessing there's no actual solution to this problem now? Example: If I applied an outline filter to sprites, the head and body will be outlined individually now?
import * as PIXI from 'pixi.js';
import 'pixi-layers';
doesn't work, tried a lot of other variations also but to no avail.
Please advise how we can import it with Angular 9, thanks!
So one of the most common exceptions of PIXI is going outside the texture boundaries with a frame
I think pixi-display might be amplifying the situation when this happens, the exception is replicated by pixi-display, things freeze
I don't know whether anything can or should be done about this, just sharing my experience - the solution is obviously to hunt and prevent exceptions
@ivanpopelyshev
hey, thank you first and bravos.
I just rewrote all Update core Rmmv with pixi-display.js
Your plugin allows me to get amazing performances in my little project RMMV!
Performance && setup preview:
https://youtu.be/8oGkRMTnReQ
Now my project can old more than 400 interactive events on a map with spines
Before only 100!! and a lot fps drop with the basic rmmv z rendering core.
My actual config on my map are:
i have question about how add i can add elements to a layer groups
in my example i have
var groupMap = new PIXI.display.Group(0, true);// all element type map
var lG_groupMap = new PIXI.display.Layer(groupMap);
this.addChild(lG_groupMap); //ELEMENTS MAPS
why i can add specific element to lG_groupMap
example i need to do
this.addChild(spriteElement); // work
//but
lG_groupMap.addChild(spriteElement); // not Work ??
full code experimental code
Stage.prototype = Object.create(PIXI.display.Stage.prototype); //
Stage.prototype.constructor = Stage;
Stage.prototype.initialize = function() {
PIXI.display.Stage.call(this);
// The interactive flag causes a memory leak.
this.interactive = false;
this.group.enableSort = true;
};
// LAYERS SYSTEM ASIGNATION FOR ZINDEX ZORDER :see pixi-display.js
//↓↓↓□-▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇-□-Spriteset_Map-□-▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇-□↓↓↓//
Spriteset_Base.prototype.initialize = function() {
Sprite.prototype.initialize.call(this);
//this.setFrame(0, 0, Graphics.width, Graphics.height);
//this._tone = [0, 0, 0, 0];
this.opaque = true;
this.createLowerLayer();
//this.createToneChanger();
//this.createUpperLayer();
this.update();
};
Spriteset_Base.prototype.update = function() {
Sprite.prototype.update.call(this);
//this.updateScreenSprites();
//this.updateToneChanger();
this.updatePosition();
};
Spriteset_Map.prototype.update = function() {
Spriteset_Base.prototype.update.call(this);
//this.updateTileset();
this.updateParallax();
//this.updateTilemap();
//this.updateShadow();
//this.updateWeather();
};
// LAYER ASIGNATION TO MAP
Spriteset_Map.prototype.createLowerLayer = function() {
Spriteset_Base.prototype.createLowerLayer.call(this);
var groupMap = new PIXI.display.Group(0, true);// all element type map
var groupGui = new PIXI.display.Group(1, true);// all element type guy over map
var groupMenu = new PIXI.display.Group(2, true);// all element menue show
var lG_groupMap = new PIXI.display.Layer(groupMap);
var lG_groupGui = new PIXI.display.Layer(groupGui);
var lG_groupMenu = new PIXI.display.Layer(groupMenu);
this.addChild(lG_groupMap); //ELEMENTS MAPS
this.addChild(lG_groupGui); // GUI
this.addChild(lG_groupMenu); // MENU
this.createParallax(); // Create parralaxe and add parralaxe layers
//this.createTilemap();
this.createCharacters(lG_groupMap, groupMap); // pass as para the groupe
//this.createShadow();
//this.createDestination(); // TODO: OK
//this.createWeather();
this.createPixiSA(groupMap);
};
Spriteset_Map.prototype.createParallax = function() {
this._parallax = new TilingSprite();
this._parallax.move(0, 0, Graphics.width, Graphics.height);
this._baseSprite.addChild(this._parallax);
};
// create and assign a elements to groupe
Spriteset_Map.prototype.createCharacters = function(lG, G) { // lG_groupMap, group
this._characterSprites = [];
$gameMap.events().forEach(function(event) {
this._characterSprites.push(new Sprite_Character(event));
}, this);
$gamePlayer.followers().reverseEach(function(follower) {
this._characterSprites.push(new Sprite_Character(follower));
}, this);
this._characterSprites.push(new Sprite_Character($gamePlayer));
for (var i = 0; i < this._characterSprites.length; i++) {
var element = this._characterSprites[i];
this.addChild(element); // add self
element.parentGroup = G; // zIndex= local , zOrder = global
element.zIndex = 0;
element.y
console.log(' element.y: ', element.y);
console.log(' this._characterSprites[i]: ', this._characterSprites[i],this._characterSprites[i]._characterName);
}
};
Sprite_Character.prototype.updatePosition = function() {
this.x = this._character.screenX();
this.y = this._character.screenY();
//this.z = this._character.screenZ();
this.zIndex = this.y; // PIXI-LAYER.JS UPDATE INDEX GROUPE
};
// ADD ALL ELEMENT PIXI SPRITE
Spriteset_Map.prototype.createPixiSA = function() {
console.log('createPixiSA: ', 'createPixiSA');
};
thank for help if you have time
Hi
So I've just started using pixi-display, first thing I noticed is that the children of a sprite are not directly visible, they are invisible, I should probably give them a displayGroup too, however, I think shouldn't need to
Any ideas?
Very strange: some items just disappear completely in internet explorer. Don't know exactly why, but it seems to be related to the zOrder property.
The elements disappearing al have a zOrder lower then ~180, elements with a higher zIndex seem to work. (I'm calculating zIndex by distance from the bottom of the screen)
I've attached two screenshots, one in chrome and another, from the same game, in IE (11).
Anyway, I don't have more information right now, I'll probably look further into it later. (Maybe I'm doing something strange, I dunno)
I'm using the layers branch and I've got this very basic setup:
const stage = new PIXI.display.Stage();
stage.group.enableSort = true;
const overlay = new PIXI.display.Group(10, false);
stage.addChild(new PIXI.display.Layer(overlay));
If I set the parentGroup
of a display object to overlay
it works just fine visually, the object is rendered on top of anything else in the stage
, but if the parent of that object has a mask, while still displayed correctly, the interactions don't work unless the object is within the bounds of the mask.
Seems like a pretty nasty problem since the decision is made before even getting to the object that has a parentGroup set
https://github.com/pixijs/pixi-display/blob/25a2a0e06269c6fde4241308a54727bffb9405d2/src/InteractionManagerMixin.ts#L45
so I'm hoping that I just overlooked some easy way around this.
Ok, so I installed this through npm i pixi-display
and it took me a few hours to discover that actually the branch being used right now is the Layer branch. So I had to run github:pixijs/pixi-display#layers
to make things actually work.
So please move it to a new repo or make the layer the main branch. It's non sense to keep it like this with the code examples being in a huge difference between the main branch right now.
Pixi 5.0.0 is released now. Any plans to support it? We'd like to use Pixi v5 in our project because of its new features, but we use layers a lot too.
hum what this supposed to do ?
http://pixijs.io/examples/#/layers/lighting.js
line:58
bunny.update = updateBunny;
In my setup the app.stage owns a DipslayList object and each player has its own DisplayGroup. I will add new sprites onto the player and new ones will be covered by its existing sprites. I have compared with and without using pixi-display plugin. Sometimes it drops about 10 frames. Sometimes it's OK. Is there a recommended use of this plugin?
I am experimenting something.
Is it possible to create our own patterns of light with sprites?
How i can perform this ?
example here
new PIXI.lights.PointLight(0xffffff, 2, texturePatterns); ??
or a way to convert a sprite to a light patern ?
Patterns.parentGroup = PIXI.lights.lightGroup not work
thank
So in my game there is a character, character carries around it's name on top of it's head
I've noticed that after some time playing, that name became bolder and bolder, extremely bold at one point
I think pixi-display might somehow be replicating the children, is this possible?
(Couldn't verify the issue yet, will update the thread if it's something else or if it's definitely pixi-display)
any solution to add a single mask to parent container instead of each children ?
in this scenario , i would like to assign mask to master.mask
But it only work if a asign mask to each child's.
Any solution or suggest ? i search issue, but can't find code example.
_menu_items.prototype.initialize = function() {
const dataBase = $Loader.Data2.menueItems;
const master = new PIXI.Container();
var d = new PIXI.Sprite(dataBase.textures.bgMaster);
var n = new PIXI.Sprite(dataBase.textures_n.bgDiag_n);
d.parentGroup = PIXI.lights.diffuseGroup;
n.parentGroup = PIXI.lights.normalGroup;
master.addChild(d,n);
// FIXME: add single mask to master.mask instead of d,n
const mask_d = new PIXI.Sprite(PIXI.Texture.WHITE);
mask_d.width = d.width/2, mask_d.height = d.height/2;
const mask_n = new PIXI.Sprite(PIXI.Texture.WHITE);
mask_n.width = d.width/2, mask_n.height = d.height/2;
// add mask to diffuse,normal
d.mask = mask_d;
n.mask = mask_n;
this.parentGroup = $displayGroup.group[4];
this.addChild(master,mask_d,mask_n);
this.position.set(260,460);
};
I was wondering, because of migration issues, if there will be support for pixi v5 when it's released?
I've been trying to get my tilemap to render underneath all of the sprites but it always comes out on top no matter what z-index I set the DisplayGroup to be. Also, once I set stage.displayList = new PIXI.DisplayList();
the tilemap won't render at all.
Here is a code snippet:
// Basic pixi-tilemap example from https://github.com/pixijs/pixi-tilemap
var loader = new PIXI.loaders.Loader();
loader.add('atlas', 'basic/atlas.json');
loader.load(function(loader, resources) {
//third parameter is "true" ONLY IF YOUR TILES ARE SQUARES
var tilemap = new PIXI.tilemap.CompositeRectTileLayer(0, [resources['atlas_image'].texture], true);
var size = 32;
// bah, im too lazy, i just want to specify filenames from atlas
for (var i=0;i<7;i++)
for (var j=0;j<7;j++) {
tilemap.addFrame("grass.png", i*size, j*size);
if (i%2==1 && j%2==1)
tilemap.addFrame("tough.png", i*size, j*size);
}
var ground = new PIXI.DisplayGroup(0, false)
var groundContainer = new PIXI.Container()
groundContainer.displayGroup = ground
groundContainer.addChild(tilemap)
stage.addChild(groundContainer)
})
Here I even tried adding a tilemap to a container and then adding the container to the stage but it still either
stage.displayList
is set, orstage.displayList
is not setAny idea as to why this is happening? I'm pretty sure I've followed the examples correctly but of course I could be missing something.
Hi,
I tried to put pixi-layers in a viewport (with pixi-viewport).
I have achivied a render but interactions are not working...
see source sample : https://stackblitz.com/edit/rxjs-xupagq
oddly when commenting the line 74 (lighting not working) -> interactions are working again
Is pixi-display recommended to use for basic z-index management?
In my case I have a simple tile-engine where I need to handle z-index for the game character.
Similar to this http://labs.phaser.io/view.html?src=src\depth%20sorting\Depth%20Sorting.js
The charater is only one image (no shadows etc).
I understand that pixi-display has a lot of clever features for handling z-index. But I am wondering if it worth using for more simple depth sorting as the one above.
My own idea was just to keep all displayobjects in a array and sort them on yPos and then re-add them to the displaylist on each update.
hey, am not remember if it possible or how to do a sorting if i have a simple video element (Background) and if a need rendering sprites elements hover video, with diffuse,normal
.
What i can do for make video rendering below all elements diffuse and normal?
example script here, in order i create createBackground
and createTitleLogo
:
Asignet to parentGroup
.
But the cage
of the title seem are rendering below the cage of video ?
maybe i do something wrong or am not remember the triks.
Scene_Title.prototype.createBackground = function() {
const cage = new PIXI.Container();
// setup : see custom PIXI _this.autoPlay = false; from video source
const video = $Loader.ress.video.original_intro1Loop;
const video_texture = PIXI.Texture.fromVideo(video.data);
const video_controler = video_texture.baseTexture; // controler from source
const video_sprite = new PIXI.Sprite(video_texture);
// asign group display
cage.parentGroup = $displayGroup.group[0];
cage.zIndex = 1;
// parenting
cage.addChild(video_sprite);
this.addChild(cage);
//reference
this.bgVideo = video_controler;
// setup or hack
video_sprite.width = 1920, video_sprite.height = 1080;
};
Scene_Title.prototype.createTitleLogo = function() {
const data = $Loader.ress.tmp.titleLogoAni;
const cage = new PIXI.Container(); // TODO: MAKE CUSTOM CONTROLER ANI CLASS
const tex_d = data.textures;
const tex_n = data.textures_n;
const sprite_d = new PIXI.extras.AnimatedSprite(tex_d);
const sprite_n = new PIXI.Sprite(tex_n[0]);
sprite_d.normalWith(sprite_n, tex_n); // convert ani to [diff,normal]
// asign group display
sprite_n.parentGroup = PIXI.lights.normalGroup;
sprite_d.parentGroup = PIXI.lights.diffuseGroup;
cage.parentGroup = $displayGroup.group[0];
cage.zIndex = 2;
// parenting
cage.addChild(sprite_d, sprite_n);
this.addChild(cage);
// reference
cage.name = data.name;
// setup or hack
sprite_d.play();
};
here how the stage look like in children
thanks
Hello there,
both...
require('pixi-layers)
...and...
import {Stage, Layer} from 'pixi-layers', or import * as Layers from 'pixi-layers'
...fails.
Uncaught ReferenceError: PIXI is not defined
I did import PIXI before the import call.
import 'pixi.js'
or import PIXI from 'pixi.js'
I also tried require.
Nothing works... same error. The layers plugin is not compatible with cjs and es imports?
Hello,
I installed pixi.js and pixi-layers by
yarn add pixi.js pixi-layers
and then I tried following code:
import 'pixi-layers'
import * as PIXI from 'pixi.js'
const test = new PIXI.display.Group(100, false)
but it throws an error:
./src/index.tsx
Attempted import error: 'display' is not exported from 'pixi.js' (imported as 'PIXI').
Hello I'm trying to pass resolution param in that example https://pixijs.io/examples/#/layers/normals.js, for correct support retina and etc.
const options = {
width,
height,
resolution: window.devicePixelRatio || 1
};
const app = new PIXI.Application(options);
document.body.appendChild(app.view);
...
But unfortunately cursor position is incorrect detected. Could you please chech it.
Thanks!
Since several interfaces have renamed from "types/pixi.js" v4.5.0+, lib/pixi.js/index.d.ts was outdated in this repo.
When I'm using pixi-layers with "types/pixi.js" v4.5.0+, there will be an error in my console:
ERROR in [at-loader] ./node_modules/pixi-layers/bin/pixi-layers.d.ts:99:35
TS2694: Namespace 'PIXI' has no exported member 'IDestroyOptions'.
Hi ivan
I have a small crash experimenting with pixi light and the layer system.
I do not know if these my group system would cause this?
I separated the process in 2 steps for easy debug.
Step1, the loader will inject resource in a global variable.
at this step are all fine.
// ┌------------------------------------------------------------------------------┐
// PIXI LOADER for light ressources (testing)
//└------------------------------------------------------------------------------┘
_SLL.prototype.load_pixiLight = function() {
const loader_light = new PIXI.loaders.Loader();
loader_light.add('bg_diffuse', 'lightIMG/BGTextureTest.jpg')
.add('bg_normal', 'lightIMG/BGTextureNORM.jpg')
.add('block_diffuse', 'lightIMG/block.png')
.add('block_normal', 'lightIMG/blockNormalMap.png');
loader_light.load(onAssetsLoaded);
function onAssetsLoaded(loader, res) {
$SLL.resourceLight = { // add reference to $SLL global (debug only)
bg:[res.bg_diffuse.texture, res.bg_normal.texture],
block:[res.block_diffuse.texture, res.block_normal.texture],
block1:[res.block_diffuse.texture, res.block_normal.texture],
block2:[res.block_diffuse.texture, res.block_normal.texture]
}
};
loader_light.onComplete.add(() => {$SLL.setLightLoaded()}); // tell the light loader are finish
};
step2 i initialise my layers system (original)
and after inject light feature in the stage.
the stage "this
" are initialise before in other module.
stage
Stage.prototype = Object.create(PIXI.display.Stage.prototype);
Stage.prototype.constructor = Stage;
Stage.prototype.initialize = function() {
PIXI.display.Stage.call(this);
this.interactive = false; // The interactive flag causes a memory leak.
};
step2 look at end on // PIXI LIGHT TEST IMPLEMENTATION
// LAYER ASIGNATION TO MAP STAGE
Spriteset_Map.prototype.createLowerLayer = function() {
Spriteset_Base.prototype.createLowerLayer.call(this);
// TODO: create global display.Group for avoid init each time new map loaded
this.displayGroup = [
new PIXI.display.Group(0, false), // backgroud Map. BG tile elements will no update and no interaction
new PIXI.display.Group(1, true), // map elements default player, chara and all basic sprite update z and interaction
new PIXI.display.Group(2, true), // map elements 2er
new PIXI.display.Group(3, true), // map elements 3er
new PIXI.display.Group(4, false), //levelGui: GUI Elements over maps
new PIXI.display.Group(5, false), //levelMenu: MENU Elements over maps
new PIXI.display.Group(6, false), //levelTxt: txt bubble, or SFX over all
];
this.displayLayers = [];
for (let l = 0, len = this.displayGroup.length; l < len; l++) {
const DG = this.displayGroup[l];
const DL = new PIXI.display.Layer(DG);
this.displayLayers.push(DL);//(debugOnly) reference acces ref
this.addChild(DL); // add to Stage PIXI.display
};
// PIXI LIGHT TEST IMPLEMENTATION
var light = new PIXI.lights.PointLight(0xffffff, 1);
this.addChild(new PIXI.display.Layer(PIXI.lights.diffuseGroup));
this.addChild(new PIXI.display.Layer(PIXI.lights.normalGroup));
this.addChild(new PIXI.display.Layer(PIXI.lights.lightGroup));
// create ligth and normal
function createPair(diffuseTex, normalTex) {
var container = new PIXI.Container();
var diffuseSprite = new PIXI.Sprite(diffuseTex);
diffuseSprite.parentGroup = PIXI.lights.diffuseGroup;
var normalSprite = new PIXI.Sprite(normalTex);
normalSprite.parentGroup = PIXI.lights.normalGroup;
container.addChild(diffuseSprite);
container.addChild(normalSprite);
return container;
}
let PAIR = {};
for (const key in $SLL.resourceLight) {
const res = $SLL.resourceLight[key];
PAIR[key] = createPair(res[0], res[1]);
}
console.log('PAIR: ', PAIR); // add to stage
this.addChild(PAIR.bg);
this.addChild(PAIR.block);
this.addChild(PAIR.block1);
this.addChild(PAIR.block2);
this.addChild(new PIXI.lights.AmbientLight(null, 0.4)); // GET ERROR !!!
//... other stuff
};
at the line this.addChild(new PIXI.lights.AmbientLight(null, 0.4));
i get a error texLayer.getRenderTexture is not a function
if i remove this line, i can see all the element normal seem loaded.
did you know what i'm doing wrong in my context ?
i think it where and how i add light with new PIXI.display.Group?
thank
import 'pixi-layers';
import * as PIXI from 'pixi.js';
import Application = PIXI.Application;
ERROR in node_modules/@types/pixi.js/index.d.ts(7,1): error TS6200: Definitions of the following identifiers conflict with those in another file: VERSION, PI_2, RAD_TO_DEG, DEG_TO_RAD, RENDERER_TYPE, BLEND_MODES, DRAW_MODES, SCALE_MODES, WRAP_MODES, TRANSFORM_MODE, PRECISION, GC_MODES, SHAPES, TEXT_GRADIENT, UPDATE_PRIORITY, loader, TARGET_FPMS, MIPMAP_TEXTURES, RESOLUTION, FILTER_RESOLUTION, SPRITE_MAX_TEXTURES, SPRITE_BATCH_SIZE, RETINA_PREFIX, RENDER_OPTIONS, GC_MODE, GC_MAX_IDLE, GC_MAX_CHECK_COUNT, WRAP_MODE, SCALE_MODE, PRECISION_VERTEX, PRECISION_FRAGMENT, UPLOADS_PER_FRAME, CAN_UPLOAD_SAME_BUFFER, MESH_CANVAS_PADDING, AccessibilityManager, URL_FILE_EXTENSION, DATA_URI, SVG_SIZE, Application, Bounds, Container, DisplayObject, TransformBase, TransformStatic, Transform, GraphicsData, Graphics, CanvasGraphicsRenderer, GraphicsRenderer, WebGLGraphicsData, PrimitiveShader, E, SE, S, SW, W, NW, N, NE, MIRROR_HORIZONTAL, MIRROR_VERTICAL, Matrix, PointLike, ObservablePoint, Point, Circle, Ellipse, Polygon, Rectangle, RoundedRectangle, SystemRenderer, CanvasRenderer, CanvasMaskManager, CanvasRenderTarget, WebGLRenderer, WebGLState, TextureManager, TextureGarbageCollector, ObjectRenderer, Quad, RenderTarget, BlendModeManager, FilterManager, StencilMaskStack, MaskManager, StencilManager, WebGLManager, UniformDataMap, Filter, SpriteMaskFilter, Sprite, BatchBuffer, SpriteRenderer, CanvasSpriteRenderer, cacheStepsPerColorChannel, convertTintToImage, canUseMultiply, tintMethod, TextStyle, TextMetrics, Text, BaseRenderTexture, BaseTexture, RenderTexture, Texture, TextureMatrix, TextureUvs, Spritesheet, VideoBaseTexture, shared, TickerListener, Ticker, Shader, CanvasExtract, WebGLExtract, BitmapText, AnimatedSprite, TilingSprite, TilingSpriteRenderer, MovieClip, TextureTranform, FXAAFilter, BlurFilter, BlurXFilter, BlurYFilter, ColorMatrixFilter, DisplacementFilter, AlphaFilter, NoiseFilter, VoidFilter, InteractionData, InteractionPointerEvents, InteractionTouchEvents, InteractionMouseEvents, InteractionPixiEvents, InteractionEventTypes, InteractionManager, MiniSignalBinding, MiniSignal, Loader, Resource, Mesh, CanvasMeshRenderer, MeshRenderer, Plane, NineSlicePlane, Rope, ParticleContainer, ParticleBuffer, ParticleRenderer, AddHook, UploadHook, BasePrepare, CanvasPrepare, WebGLPrepare, CountLimiter, TimeLimiter, GLBuffer, GLFramebuffer, GLShader, GLTexture, VertexArrayObject, premultiplyBlendMode, TextureCache, BaseTextureCache, apple, android, amazon, windows, seven_inch, other, any, phone, tablet, EventEmitter, SpriteBatch, AssetLoader, Stage, DisplayObjectContainer, Strip, math, AbstractFilter, TransformManual, DEFAULT_RENDER_OPTIONS, gl, PIXI
node_modules/@types/pixi.js/index.d.ts(3092,13): error TS2374: Duplicate string index signature.
node_modules/@types/pixi.js/index.d.ts(3234,13): error TS2374: Duplicate string index signature.
node_modules/pixi.js/dist/pixi.d.ts(7,1): error TS6200: Definitions of the following identifiers conflict with those in another file: VERSION, PI_2, RAD_TO_DEG, DEG_TO_RAD, RENDERER_TYPE, BLEND_MODES, DRAW_MODES, SCALE_MODES, WRAP_MODES, TRANSFORM_MODE, PRECISION, GC_MODES, SHAPES, TEXT_GRADIENT, UPDATE_PRIORITY, loader, TARGET_FPMS, MIPMAP_TEXTURES, RESOLUTION, FILTER_RESOLUTION, SPRITE_MAX_TEXTURES, SPRITE_BATCH_SIZE, RETINA_PREFIX, RENDER_OPTIONS, GC_MODE, GC_MAX_IDLE, GC_MAX_CHECK_COUNT, WRAP_MODE, SCALE_MODE, PRECISION_VERTEX, PRECISION_FRAGMENT, UPLOADS_PER_FRAME, CAN_UPLOAD_SAME_BUFFER, MESH_CANVAS_PADDING, AccessibilityManager, URL_FILE_EXTENSION, DATA_URI, SVG_SIZE, Application, Bounds, Container, DisplayObject, TransformBase, TransformStatic, Transform, GraphicsData, Graphics, CanvasGraphicsRenderer, GraphicsRenderer, WebGLGraphicsData, PrimitiveShader, E, SE, S, SW, W, NW, N, NE, MIRROR_HORIZONTAL, MIRROR_VERTICAL, Matrix, PointLike, ObservablePoint, Point, Circle, Ellipse, Polygon, Rectangle, RoundedRectangle, SystemRenderer, CanvasRenderer, CanvasMaskManager, CanvasRenderTarget, WebGLRenderer, WebGLState, TextureManager, TextureGarbageCollector, ObjectRenderer, Quad, RenderTarget, BlendModeManager, FilterManager, StencilMaskStack, MaskManager, StencilManager, WebGLManager, UniformDataMap, Filter, SpriteMaskFilter, Sprite, BatchBuffer, SpriteRenderer, CanvasSpriteRenderer, cacheStepsPerColorChannel, convertTintToImage, canUseMultiply, tintMethod, TextStyle, TextMetrics, Text, BaseRenderTexture, BaseTexture, RenderTexture, Texture, TextureMatrix, TextureUvs, Spritesheet, VideoBaseTexture, shared, TickerListener, Ticker, Shader, CanvasExtract, WebGLExtract, BitmapText, AnimatedSprite, TilingSprite, TilingSpriteRenderer, MovieClip, TextureTranform, FXAAFilter, BlurFilter, BlurXFilter, BlurYFilter, ColorMatrixFilter, DisplacementFilter, AlphaFilter, NoiseFilter, VoidFilter, InteractionData, InteractionPointerEvents, InteractionTouchEvents, InteractionMouseEvents, InteractionPixiEvents, InteractionEventTypes, InteractionManager, MiniSignalBinding, MiniSignal, Loader, Resource, Mesh, CanvasMeshRenderer, MeshRenderer, Plane, NineSlicePlane, Rope, ParticleContainer, ParticleBuffer, ParticleRenderer, AddHook, UploadHook, BasePrepare, CanvasPrepare, WebGLPrepare, CountLimiter, TimeLimiter, GLBuffer, GLFramebuffer, GLShader, GLTexture, VertexArrayObject, premultiplyBlendMode, TextureCache, BaseTextureCache, apple, android, amazon, windows, seven_inch, other, any, phone, tablet, EventEmitter, SpriteBatch, AssetLoader, Stage, DisplayObjectContainer, Strip, math, AbstractFilter, TransformManual, DEFAULT_RENDER_OPTIONS, gl, PIXI
src/app/components/place/place.component.ts(30,31): error TS2339: Property 'display' does not exist on type 'typeof display'.
hi @ivanpopelyshev , i know you're really busy, but i just want tell you that the dev from texturePacker just add new update to v4.7 for support normal map and make easy to manage in pixi loader.
Version 4.7.0 (2018-05-09)
Features
Added support for FaceBook AR Studio
Added normal_map reference to json file's meta section (Pixi, Phaser, Generic)
Enabled support for rotated sprites in Phaser
So now the meta has a new property called normal_map:
That will allow the loader to detect and make special textures tag.
do you think you will have the time to update this soon ?
thank a lot for all your work my friend.
both pixi.js & pixi-layers are installed by npm packages
After importing pixi-layers, theAnimatedSprite
can't pass type check when being added as a child ofContainer
.
It seems that the error is caused by different function signatures. The paramter renderer
of function renderWebGL
in class Layer
is of type PIXI.WebGLRenderer
, whereas it's PIXI.Renderer
in Container
.
Which one is correct? And how can I make a quick fix for this temperorily?
Here's the compiling error:
TS2345: Argument of type 'AnimatedSprite' is not assignable to parameter of type 'DisplayObject'.
Types of property 'renderWebGL' are incompatible.
Type '(renderer: Renderer) => void' is not assignable to type '(renderer: WebGLRenderer) => void'.
Types of parameters 'renderer' and 'renderer' are incompatible.
Type 'WebGLRenderer' is missing the following properties from type 'Renderer': globalUniforms, mask, context, shader, and 10 more.
thanks you ~
How to use sort for Group,
look this code,i use homepage demo code for my code,but it not to work...i don't understand。
//this demo for pixi.js homepage
var greenGroup = new PIXI.display.Group(0, true);
greenGroup.on('sort', function (sprite) {
//no work,sprite.zIndex is diy arrt
sprite.zOrder = sprite.zIndex;
});
when i fix sprite.zIndex,sort
function will auto run ? or i must be to run Group.sort()
?
this render who Container?? new PIXI.display.Stage()
ornew Container()
?
I've just migrated from pixi-display to pixi-layers and my masks become broken.
Previously all I need to do is just applying Rectangle mask to Container with multiple children and all worked fine regardless of their displayGroups.
https://jsfiddle.net/SvDenys/2om9fn3s/
Now I can't understand how to do this. I made a fiddle from the bunny example. The most important here is this line:
bunniesOdd.mask = mask
Interactivity works fine, but displaying are not. Could you please help me?
pixi-layers does not work if the containers it works on are not within PIXI.Stage. It just happened my app does not use Stage (nor Application) at all. It was not a problem to change it to have one Stage instead of Viewport, but I have had no clue it is needed.
Would it be possible to add this mention in readme? Thanks!
I saw in #5 you were referring to what's happening with the core library but in the meantime I can't for the life of me get my project to let your Augments work... I can pull in pixi_display
but it won't merge up with the core PIXI namespace.
For the moment I'm manually adjusting a .d.ts file but I didn't know if you had a trick to get it to work
Something like;
this.displayList = new PIXI.DisplayList(); // if this line is present, mask ignored.
var mask = new PIXI.Graphics();
mask.beginFill(0xFFFFFF);
mask.drawRect(0, 0, 100, 100);
this.mask = mask;
var sprite = new PIXI.Sprite(someTexture);
sprite.displayGroup = new PIXI.DisplayGroup();
this.addChild(sprite);
sprite.position.set(300, 300); // visible
I added to pixi.js.d.ts
the bare minimum to integrate pixi-display, you can see it here.
There doesn't seem to be a nice way to share this kind of change until Typescript 2.0 which implements module augmentation.
I have code like below which creates many masked hearts.
public createHeart(index: number) {
let container = new PIXI.Container();
let heartFull = new PIXI.Sprite();
heartFull.position = new PIXI.Point(index * 2.5, 0);
heartFull.texture = PIXI.utils.TextureCache["healthGauge.png"]
heart.parentGroup = uiGroup
let heart = new PIXI.Sprite();
heart.position = new PIXI.Point(index * 2.5, 0);
heart.texture = PIXI.utils.TextureCache["heartMask.png"]
heart.parentGroup = uiMaskGroup
container.addChild(heartFull, heart);
app.stage.addChild(container);
heartFull.mask = heart
}
which creates output as below.
But when inspected from WebGL inspector extension of chrome,
I checked webGL useProgram() for masking operation is called n times for n hearts.
Is there any way to execute multiple mask operation as single operation?
Or should I merge masking sprites using renderTexture?
Thank you!
this was fixed in pixi.js as addressed in
"Make Interaction events closer to Browser behavior #3963"
and originally in
"Expose event properties on InteractionData (originally from #3890)"
exception thrown in pixi.js line 34546
"InteractionManager.prototype.processPointerMove = function processPointerMove(interactionEvent, displayObject, hit) {
var data = interactionEvent.data;
"
with interactionEvent.data being undefined.
again at pixi.js 34614
"InteractionManager.prototype.processPointerOverOut = function processPointerOverOut(interactionEvent, displayObject, hit) {
var data = interactionEvent.data;
"
for the same reason.
thanks
Hello, first of all thanks for awesome work with layers and lighting.
I'm trying to migrate my project on a new version of pixi-layers and pixi-lighting and got some issue.
My application consists of several parts:
So, i've got some issue with mainStage opacity, I can't understand why is this happening and tried to use layers, groups, change bgStage type to layer or stage, nothing fix it.
Can you help me?
Here is example:
https://codepen.io/Fire7/pen/zaPKNQ
So, background and bunny should not be visible
Hey Ivan, this is a important issue that I've noticed for a while.
So i take the time to show you this with a pixiplayground;
if you have some time and a magic tricks in your bag to allow this? :)
See line 86;
https://www.pixiplayground.com/#/edit/F3q8I0nGtZZr5hCjoMCg3
Need able to add filters in containers.
thank you so much if you able
link in README.md should
href="https://pixijs.io/examples/#/layers/normals-drag.js" Normals with sorting
instead of
href="http://pixijs.github.io/examples/#/layers/normals.js" Normals with sorting
🥇
Hello. With using pixi-layers
events pointerover
/mouseover
stopped working
Example with pixi-layers
: https://jsfiddle.net/7a2spnxu/4/ (not working)
Example without pixi-layers
: https://jsfiddle.net/7a2spnxu/5/ (working)
Can this problem be solved?
Hello. I am using webpack
//like in Readme
import * as PIXI from 'pixi.js'
window.PIXI = PIXI
require('pixi-layers')
After updating pixi.js to 5.1.4, I get error:
Uncaught TypeError: renderer.incDisplayOrder is not a function
at Stage.Layer._preRender (pixi-layers.js:563)
at Stage.Layer.render (pixi-layers.js:583)
at Renderer.render (core.es.js:11310)
at Application.render (app.es.js:77)
at TickerListener.emit (ticker.es.js:139)
at Ticker.update (ticker.es.js:678)
at Ticker._tick (ticker.es.js:377)
Please deal with this problem. So far rolled back to 5.1.3. Thank you!
When you put a container into a layer from pixi-layers, renderer.generateTexture no longer works to create a texture from a container.
Check out this example:
https://www.pixiplayground.com/#/edit/0VYy5repkmlke0oaUvA2v
If you comment out the line:
// TODO: comment out this line to see generateTexture working
container.parentLayer = layer;
You will see that the generating of a texture starts working again.
I'm hunting an event propagation issue, even though I don't .stopPropagation, the event doesn't bubble under an entity
I've created a small test case, however, in the test case, event bubbles as expected
I'm just wondering whether the way pixi-display shuffles entities could cause the event issue I'm experiencing
pixi-layers doesn't seem to be added to npm yet, only pixi-display. Any ETA on this? Should I put it there myself?
Am not sure if it come from the last update of module pixi-display or the pixi-light with normal.
But now if i try snap rendering the Stage, I got a strange mirror bitmap cropped and not the full stage rendering !?
the current stage i try to snap
it look weird and coped like this !
function snapMap(options) {
const fs = require('fs');
const pathName = `img/parallaxes/${$dataMap.parallaxName}.png`;
const snap = Bitmap.snap2(Scene);
const urlData = snap._canvas.toDataURL();
const base64Data = urlData.replace(/^data:image\/png;base64,/, "");
fs.writeFile(pathName, base64Data, 'base64', function(error){
if (error !== undefined && error !== null) { console.error('An error occured while saving the screenshot', error); }
});
};
Bitmap.snap2 = function(stage) {
var width = $dataMap.width*48;
var height = $dataMap.height*48;
var bitmap = new Bitmap(width, height);
var context = bitmap._context;
var renderTexture = PIXI.RenderTexture.create(width, height);
if (stage) {
Renderer.render(stage, renderTexture);
stage.worldTransform.identity();
var canvas = null;
if (Graphics.isWebGL()) {
canvas = Renderer.extract.canvas(renderTexture);
} else {
canvas = renderTexture.baseTexture._canvasRenderTarget.canvas;
}
context.drawImage(canvas, 0, 0);
} else {
}
renderTexture.destroy({ destroyBase: true });
bitmap._setDirty();
return bitmap;
};
am trying add multi options rendering
is it come from me , or it maybe a bug inside one of two pixi module ?
I am trying to create a mesh that has layers of series of sprites both horizontal and vertical.
All the boxes are sprites. I have two layer L1 and L2. And there is one sprite shared between two layers.
But looks like the common sprite can only belong to either L1 or L2.
Is there a way to share sprite between two layers?
Thank you in advance! :)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.