• 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. clifftm

    Pixi.js Sprite and Mask

    Thanks for help and fixing it. Please don't close the topic. I feel it's not the last trouble with masks for me 😃
  2. clifftm

    Pixi.js Sprite and Mask

    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)?
  3. clifftm

    Pixi.js Sprite and Mask

    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)?
  4. clifftm

    Pixi.js Sprite and Mask

    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 =(
  5. clifftm

    Pixi.js Sprite and Mask

    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😃
  6. clifftm

    PIXI-Display + PIXI-UI zIndex\Order

    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?
  7. 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.
  8. 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