• Content Count

  • Joined

  • Last visited

About clifftm

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Hello again! My stage contains 60000 sprites that i want to tween over it, so i wrote code to manipulate props of the objects and add update function to PIXI.ticker.shared.add(this._update, this); The final action on this._update is to update props of tweening object. In that way of updating i'v got 22 FPS object['alpha'] = start + (end - start) * percent; // OR object.alpha = start + (end - start) * percent; But i'v got about 5 - FPS drop if an update property name is located in other object this.props = [ 'alpha','rotation','tint','something'] function _update(delta){ ... for(let i = 0 ; i < this.props.length; i++) upd( object, this.props[i], start, end, percent) ... } function upd( object, key, start,end, percent){ //15FPS object[key] = start + (end - start) * percent; } And if I'll add 2 checks, than again got 22FPS this.props = [ 'alpha','rotation','tint','something'] function _update(delta){ ... for(let i = 0 ; i < this.props.length; i++) upd( object, this.props[i], start, end, percent) ... } function upd( object, key, start,end, percent){ // 20 - 22FPS if(key == 'alpha') object.alpha = start + (end - start) * percent; else if(key == 'rotation') object.rotation = start + (end - start) * percent; } Can someone help me, how to iterate through dynamical props names without getting fps drop? Thanks.
  2. Thanks. But does PIXI have an instrument to transform colored sprite\texture to a proper mask or i have to draw it by myself in paint\photoshop? Here you said that mask is using alpha and red channel, so i assume the mask should looks like in attachment, and can't imagine how it can be achived only with pixi The closest way i found is to use let colorMatrix = new PIXI.filters.ColorMatrixFilter(); m.filters = [colorMatrix]; colorMatrix.technicolor(); Then somehow to convert it to black, not pink and then somehow to inverse the result to make it like in attachment
  3. Ok, seems nobody interested in that bug Then maybe somebody could help me to understand how to apply sprite mask to a container and put the same sprite in it? Should i always have to draw black\white mask for a sprite in a separate file, or that can be done in code for source texture? I'v tried to use filters with no luck, and didn't find anything on the forum var c = new PIXI.Container(); var bunny = new PIXI.Sprite(texture); var m = new PIXI.Sprite(texture); // The equals to bunny let colorMatrix = new PIXI.filters.ColorMatrixFilter(); colorMatrix.greyscale(0); m.filters = [colorMatrix]; c.mask = m; c.addChild(m,bunny); Thanks!
  4. That exactly what i'm trying to do, but i want that my "SuperPuperContainer" will work even with based pixi objects
  5. I know that width\height of a container is changing dynamically depending on its children position But let's assume you have 2 containers on a stage(also container) with a separate sprites 500x500 and 500x500. And you created 30000 small sprites and trying to add them exactly in that 500x500 bounds. Sprite has a getter get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } So adding 30000 children directly on it works fine, exept that i need to scale all children position\scale by sprite.scale.x\y when my texture is not 500x500 and sprite created like here var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); document.body.appendChild(app.view); var sprite = new PIXI.Sprite(PIXI.Texture.WHITE); sprite.width = 800; sprite.height = 600; app.stage.addChild(sprite); var texture = PIXI.Texture.fromImage('required/assets/basics/bunny.png'); function bug(){ let w = this.parent.width; let h = this.parent.height; this.x /= this.parent.scale.x; this.y /= this.parent.scale.y; this.scale.x /= this.parent.scale.x; this.scale.y /= this.parent.scale.y; this.alpha /= this.parent.alpha; } for (var i = 0; i < 1000; i++) { var bunny = new PIXI.Sprite(texture); bunny.on('added',bug,bunny); bunny.x = Math.random()*800; bunny.y = Math.random()*600; sprite.addChild(bunny); } and watch on alpha of the children, if i don't want to change it. By the way this.scale.x /= this.parent.scale.x makes bunny look blurry. But if i incapsulate that sprite into container, that troubles are gone. I have a "background" sprite with it's own alpha\scale and other children with their private props. I can even set alpha's separately to a container\background sprite\bunnys. var container = new PIXI.Container(); container.addChild(sprite); app.stage.addChild(container); But now dropping bunnys on a container, will recalculate parent bounds for every bunny, when it's actual width\height won't change, because container has 1 big child sprite 500x500 and all other put in that area. I have 30000 small bunnys and want to drop to an x = 10%*newParent.width, and y=10%*newParent.height on drag&drop, and i don't know on what "component" its dropping: Container\Stage or Sprite But code logic should be the same for all cases, right? (Look at the attachment) . Bunny say "just put me to an X= 10% of that object on what you dropped me. I don't care who is it, even if Darth Vader" It's very strange, that a "Container" doesn't store it's biggest child size and didn't check if adding child is in that bound at first and stops recalculate bound if true
  6. Hello. I'v got a trouble and don't understand how to fix it. I need to store a percent of width\height of a child object according to its parent. Those children can change its parents. So every child do that on a constructor: constructor(){ this.on('added', onAdded, this) } onAdded(){ this.percentWidth = this.width / this.parent.width; this.percentHeight = this.height / this.parent.height; } When i'v got small number of children everything is ok. But if i am trying to add 30000+ children to a container\stage, this.parent.width begin to recalculate its bounds in exponential time, and causes page to hang. Overriding _calculateBounds won't help because parent.width will go again through 30000 children and calculate 30000*30000 times its bound. when calling addChild, a parent container do //core/display/Container.js addChild(child) { ... this._boundsID++; and causes to execute calculateBounds again even if skipUpdate = true //core/display/DisplayObject.js getBounds(skipUpdate, rect) { if (!skipUpdate) { if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.updateTransform(); this.parent = null; } else { this._recursivePostUpdateTransform(); this.updateTransform(); } } if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } You can see that online at and paste this var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); document.body.appendChild(app.view); var container = new PIXI.Container(); app.stage.addChild(container); var texture = PIXI.Texture.fromImage('required/assets/basics/bunny.png'); function bug(){ let w = 0; //this.parent.width; let h = 0; //this.parent.height; } for (var i = 0; i < 30000; i++) { var bunny = new PIXI.Sprite(texture); bunny.on('added',bug,bunny); bunny.anchor.set(0.5); bunny.x = Math.random()*800; bunny.y = Math.random()*600; container.addChild(bunny); } // Center on the screen container.x = (app.screen.width - container.width) / 2; container.y = (app.screen.height - container.height) / 2; So is there any way to operate parent.width\height when child is added to a parent? Probably the best way is to calculate this.percentWidth\Height on a getter, but may be there is some other way out Thanks. Sorry for bad english and long post
  7. Hello again ๐Ÿ˜ƒ Was in vacation and didn't test fix for well. But in the first test with moving yellow square to the left it dissapears when touch red square border. When i move it to the right i can see only 1px verctical line instead of square. Here is an example: Pressing <<< will move yellow square from 10x10 to -100x10, and pressing >>> will move it to 100x10. Didn't find any new releases from v5-alpha3 on github Thanks for help.
  8. Thanks for help and fixing it. Please don't close the topic. I feel it's not the last trouble with masks for me ๐Ÿ˜ƒ
  9. Ok. nobody want's to help with upper issue. I will post another: Look at example in codepen : So in that example - we have 2 containers red and yellow. Each of them contains two pixi sprites - background sprite (red 100x100 or yellow 80x80) and mask sprite (100x100 for red sprite, and 80x80 for yellow). Yellow container is a child of red container. In v4 the result looks like this : but in V5 the result looks like this: You can press "<<" and ">>" buttons to move red square from 100x100 to 0x0 position, and see very very strange result. Notice, if you click on yellow "v4" area in v5 version, the mouse events will dispatch in proper bounds at same time. Is that a bug or "you are a stupid! read the sources"(c)?
  10. var app = new PIXI.Application(); document.body.appendChild(app.view); app.stage.interactive = true; var left = new PIXI.Sprite(PIXI.Texture.WHITE); left.width = 400; left.height = 600; var right = new PIXI.Sprite(PIXI.Texture.WHITE); right.x = 400; right.width = 400; right.height = 600; var maskG = new PIXI.Graphics() //maskG.lineStyle(1,0xFF0000) <- TRY TO UNCOMMENT TO SEE DIFF maskG.beginFill(0x555555) maskG.drawRect(0, 0, 100, 100) //<- COMMENT THIS //maskG.drawRect(300, 0, 100, 100) <- AND TRY THIS TO SEE DIF IN Y POS maskG.endFill() var maskS = new PIXI.Sprite(PIXI.Texture.WHITE); maskS.y = 0; maskS.x = 400; maskS.width = 100; maskS.height = 100; left.mask = maskG; right.mask = maskS; app.stage.addChild(maskG,maskS,left,right); app.ticker.add(function() { maskG.x += 0.1; maskG.y += 0.1; maskS.x += 0.1; maskS.y += 0.1; }); Paste that example here and look at the difference. Left mask is jiggling while moving, but if you uncomment maskG.lineStyle(1,0) that distortions will dissapear. And another thing - sprite mask position offset up than graphics for about 1 px. As i understand it's possible not to add Graphic mask on the stage.addChild(), but i have to add sprite, so an example works identically with this: app.stage.addChild(maskS,left,right); // vs app.stage.addChild(maskG,maskS,left,right); So it's not clear for me, what mask is better to use? "For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as a mask" - is that actual information? I like how squares moves in that example, but if you try change version from 3.0.6 to 4.x that lines wont work together this.getLocalBounds = function() { return new PIXI.Rectangle(-2, -2, this.size+4, this.size+4); }; this.cacheAsBitmap=true; Look how that example works in 4.8.1 and in 5.0.0 without that lines. Is it possible to make exactly same behavior in 4.8.1 ? I feel that devgroup concentrated on 5.0.0, and understand that implement 2 fixes in two branches is difficult, so another question : should i use 5.0.0 or it contains more bugs then 4.8.1, does 5.0.0 have backward compatibility with 4.8.1 (because i want to use DragonBonesJS wich has only 4.x PIXI support)?
  11. I'm searching for about 12 hours to find proper way of simple operation - give a rectangle mask to a sprite, and move it with that mask from left to right without any distortions. if i use Sprite as Mask instead of graphics i'v got no shaking at borders, but turn it on\off makes first sprite to look brightly\darkness, because parent alpha is applying to mask If i put Sprite and Mask(Sprite) inside a container and move it , then all works as expected, (except antialiasing workaround of wich i will search later). If i add a blur filter to a sprite or container ,then distortions appears again, and turn on\off mask in that example blow my mind... what's happening? So I can't put mask directly on sprite, and can't use graphics as mask, and can't use AA or Filters when want masked object? Really, i'm trying to understand a simple things but nothing comes out... I'v read: , where you said But look at example 3 ( any filter brokes movement where Bubamara said ok. i'm going to 2d way and use PIXI.Sprite(PIXI.Texture.WHITE), and have the same troubles in your fix of you add lines to a container so as i understand the graphic rectangles in that container cached as "textures" and you increase bounds for animation to avoid jigglings, but in that example rectangles don't use masks For AA most of users advises not to use {antialias:false}, because it supported only in Chrome and have performace issues. And as you said it doesn't works with masks. i'v tried {forceFXAA:true}, and stage.filters[new PIXI.filters.FXAAFilters()] with crutch of PIXI.settings.PRECISION_FRAGMENT = PIXI.PRECISION.HIGH; and nothing helps me to equal an issue. and the last your advise is to look at pixi-display and learn how example works and explore sources of getRenderTexture. I wonder, that for a SIMPLEST task to make SPRITE with MASK and force it to move smoothly from x1 to x2 there is NO ways to achive that for a newbie as me =(
  12. Hello again. Please help me , how to proper use a mask inside a sprite. I'v made a codepen , when mask is on and object is moving, his borders starts twitching. But If i disable mask the object moves correctly. So what i do wrong? How to move object with mask without shaking his border? And is it possible to make moving more smoothly (setting antialias:true in options make it moving much better, but i don't know is it a proper way)? Thanks๐Ÿ˜ƒ
  13. Thanks for answer. I'v Made a codepen . I understand, that layer will display a sort group of elements by zOrder\zIndex that "registered" to it by .parentLayer \ .parentGroup. Try to uncomment 12 line and containers become brightener. Why? And yes, UI.Stage extends a PIXI.Container. But only stage, other UI elements contains their children in UIObject.container, so that's why i have to write leftContainer.container.zIndex = 10 Another thing i don't understand - for example - i have a layer that adds a shadow to the objects wich he is displaying like this LAYER_WITH_SHADOW_FILTER.on('display', (element) => { let blurFilter = new PIXI.filters.BlurFilter(); let shadowFilter = new PIXI.filters.DropShadowFilter(); element.filters = [shadowFilter]; }); ok, but is there any event on wich i can clear that filter element.filters = null; when my object changes his parentLayer ? that shadow exists even if i set SOME_ELEMENT.parentLayer = LAYER_WITH_SHADOW_FILTER; SOME_ELEMENT.parentLayer = ANOTHER_LAYER_WITHOUT_FILTERS; I'm confusing that "sending" element with one state to some layer, it "returns" from it with unpredictable props, that i have to control outside that layer. Didn't find reference to emit events neither in pixi.js nor pixi-layers.js PS: Don't know if that forum will give a ban for answering on "ru", but for me it will be easy to understand @bQvle last visited June 29, 2017 ... Is he alive?
  14. Hello. In additional to this issue ( dublicate here, because i'm afraid that nobody reads those issues (the last was on 2 mart with no response) ), can you give me an advice: Here some sample code /* Init PIXI */ = new PIXI.Application(1200,800,{view: document.getElementById("cvs")}); /* Init PIXI-Display */ = new PIXI.display.Stage(); /* Init PIXI-UI */ this.uiStage = new PIXI.UI.Stage(app.renderer.width, app.renderer.height); /* Create test layer */ this.layer = new PIXI.display.Layer(); = true; /* Add layer and uiStage on display-stage */;; /* Create left container */ let leftContainer = new PIXI.UI.SliceSprite(background_img, 4); leftContainer.container.zIndex = 10; //UIBase.js in pixi-ui doesn't implements zIndex and zOrder property, so i need to modify "inner private property" container, what is ugly... <--- Problem is here leftContainer.parentLayer = this.layer ; //UIBase.js in pixi-ui implements parentLayer property /* Create right container */ let rightContainer = new PIXI.UI.SliceSprite(background_img, 4); rightContainer.container.zIndex = 9; rightContainer.parentLayer = this.layer ; /* Add them to ui-stage */ this.uiStage.addChild(leftContainer); this.uiStage.addChild(rightContainer) /* Move left container to the right */ PIXI.UI.Tween.fromTo(leftContainer, 2,{left: "0%"},{ left: "100%" }, PIXI.UI.Ease.Sine.SineOut); so is it possible to implement zIndex and zOrder props in UIBase? like zIndex: { get: function () { return this.container.zIndex; }, set: function (val) { this.container.zIndex = val; } and another question: Why if i add this.uiStage.parentLayer = this.layer; a brightness of my container is increasing? ( notice that a containers also have .parentLayer = this.Layer ) I feel that they render twice, but not sure (attached 2 images, with and without that line) Thanks.
  15. clifftm

    PIXI InputBox

    Hello. Please don't kill me for my stupid question, may be i'm wrong in a core approach becase i'm noob in webdev and animation. I'm trying to build a webpage based on canvas animation (created in DragonBones) using PIXI.js. The canvas is stretching by width\height of it's parent div, so my background and objects are scaled\stretched too. I want to put an inputText on the canvas, not as DOM inside a div on the canvas, so user can enter login\password in it. I found a CanvasInput and this example ( based on Phaser, but don't understand how to use it with PIXI. var myCanvas = document.getElementById("cvs") = new PIXI.Application({view: myCanvas}); var input = new CanvasInput({canvas: ???????}); // an exeption if canvas: myCanvas ?????? ); // don't understand what to write here In codePen example they do: var bmd = this.add.bitmapData(400, 50); var myInput =, y, bmd); myInput.canvasInput = new CanvasInput({ canvas: bmd.canvas }); // add instance of CanvasInput to Sprite property? How to implement that code in PIXI? How to create Sprite with empty texture? and how to setup CanvasInput canvas on it? I was trying with no luck let graphics = new PIXI.Graphics(); graphics.beginFill(0xFFFFFF); graphics.drawRect(0, 0, 500, 500); graphics.endFill(); let texture =; let sprite = new PIXI.Sprite(texture); // can't figure out how to create it in a proper way let cvs =; var input = new CanvasInput({ canvas: texture // or // canvas: sprite.texture // or // canvas: cvs });; Or maybe that CanvasInput not compatible with PIXI v4 ? Also tried that : and can't able to make it work I wonder why in 2018 there is no Input examples with PIXI in whole internet. I want to learn, but have nobody for ask a question. I've also read that topic where TickleMeElmo said : Other way and in my opinion, better way, would be to just build a new text input for pixi. Add event listener for key up event and filter out all unwanted keystrokes, add registered key to stored string and just display that string as PIXI.Text. This way it's also quite easy to later on add some fancy stuff to the input. I think that i would be difficult for me to make a blink cursor for example or tab for 2 inputs... Anyway i will explore to understand main approach Please, give me an advice how to equal my problem. Thanks, and sorry for my bad english