clifftm

Members
  • Content Count

    22
  • Joined

  • Last visited

About clifftm

  • Rank
    Member

Recent Profile Visitors

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

  1. For example, like this this.app.renderer.plugins.interaction.search.recursiveFindHit = function(interactionEvent, displayObject, func, hitTest, interactive) { let type = interactionEvent.data.originalEvent.type; if ((/.*(move|leave|out|over).*/.test(type) && displayObject.allowMove === false) || (/.*(up|down|click|cancel).*/.test(type) && displayObject.allowClick === false)) { return false; } else { return this.__proto__.recursiveFindHit.call(this, interactionEvent, displayObject, func, hitTest, interactive); } }; and then in the code you just need to this.instance.interactive = true; // enable interactive this.instance.allowMove = false; // ignore mouse moving this.instance.allowClick = true; // or just make it undefined. allow clicks Again. You have a dragonbone\spine robot with head, 2 hands, 2 legs, body and a gun = 7 mesh\sprites. You create 100x100 robots and just want to click on them and show alert(clicked robot #...) Every mouse move you will make tree traversal of all robots * 7 children, so 70000 checks if dispayobject.contains(cursor)
  2. Yes, that's another variant of disabling event. But that 2 solutions looks like: "Doctor i have a bruise on the leg, can you help me?" "Sure, lets cut off your leg"
  3. Yes, but how to disable that? Let IM found target only when mousedown, not on every pointer move. Setting interactiveChildren to armature makes it not responsible for clicks at all, even if armature.interactive = true; Again. You have 900 robots from pixi example, that have different animations (idle, run, jump, death). You need determine what robot was clicked. They can overlap if their position is near. So creating a container around each robot like this: let boundContainer = new PIXI.Container(); boundContainer.interactive = true; boundContainer.interactiveChildren = false; boundContainer.addChild(armatureDisplay); boundContainer.position.set( lb.width*i*armatureDisplay.scale.x*0.5, lb.height*j*armatureDisplay.scale.y*0.5); boundContainer.hitArea = boundContainer.getLocalBounds(); boundContainer.on('click',()=>{console.log(i*10+j)}); app.stage.addChild(boundContainer); You cant determine which robot was actually clicked left or right or upper or you just clicked in black space: That will appear even with "interactivity layer". The animations can be complex, for example like death animation, and that bound box container should be recalculated every armature animation frame. I have nothing against how IM determine object on click. Let him check all objects. But figuratively i'm interacting with robots only with mouseclick, and IM forcibly checks hitArea on every mousemove. I can give you another analogy of what's happening. You have an antivirus with a button => onClick(check all computer for viruses). When pressing it, the process is starting. At the same time that process will also starting on every mouse move. And you just recommend me to exclude all folders from checking or just to check parent forlders on the disk without subfolders on each mousemove. And I just want to check computer only by pressing a button Thanks
  4. So many developers on forum and no one has encountered a large number of objects and the problem of moving the cursor?
  5. Found a solution but it seems very rude window.document.removeEventListener('mousemove', app.renderer.plugins.interaction.onPointerMove, true); window.document.removeEventListener('pointermove', app.renderer.plugins.interaction.onPointerMove, true); is there any way to do this more softly?
  6. Hello. If u paste this code (just a source code with a little modifications) here https://pixijs.io/examples/#/plugin-dragonbones/robot.js const app = new PIXI.Application({ antialias: true }); document.body.appendChild(app.view); //That will help with fps, but all children become not interactive //app.stage.interactiveChildren = false; app.stop(); // load spine data PIXI.Loader.shared .add('skeleton', 'examples/assets/pixi-dragonbones/robot/mecha_1002_101d_show_ske.json') .add('texture_json', 'examples/assets/pixi-dragonbones/robot/mecha_1002_101d_show_tex.json') .add('texture_png', 'examples/assets/pixi-dragonbones/robot/mecha_1002_101d_show_tex.png') .load(onAssetsLoaded); function onAssetsLoaded(loader, res) { const factory = dragonBones.PixiFactory.factory; factory.parseDragonBonesData(res.skeleton.data); factory.parseTextureAtlasData(res.texture_json.data, res.texture_png.texture); let scale = 0.1; for (let i = 0; i < 10; i++) for (let j = 0; j < 10; j++) { const armatureDisplay = factory.buildArmatureDisplay('mecha_1002_101d', 'mecha_1002_101d_show'); let lb = armatureDisplay.getLocalBounds(); //That makes better fps if uncomment //armatureDisplay.hitArea = new PIXI.Rectangle(lb.x, lb.y, lb.width, lb.height); armatureDisplay.pivot.set(lb.x, lb.y); armatureDisplay.scale.set(scale, scale); armatureDisplay.position.set( lb.width*i*armatureDisplay.scale.x, lb.height*j*armatureDisplay.scale.y); armatureDisplay.interactive = true; armatureDisplay.on('click',()=>{console.log(i*10+j)}); armatureDisplay.animation.play('idle'); app.stage.addChild(armatureDisplay); } app.start(); } and then move a mouse over a canvas FPS drops from ~20-25 frames to 1 frame. How can i avoid that dropping? As i understand ParticleContainer not working with DB or Spine. I'v tried disable mousemove events app.view.addEventListener('mousemove',(e)=> {e.stopPropagation()}) but that not helped. if i set app.stage.interactiveChildren = false; that helps with FPS a little, but in that case armatureDisplay.interactive = true will discarded and can't register any on('click') events , like armatureDisplay.on('click',()=>{console.log(i*31+j)}); I can agree that 900 dragonbones objects reduce total FPS from 60 to 30, but don't understand why it falls down on mouse move events. Probably the main problem is in hitArea, because setting it to the rounding box of the robot makes fps drops much smaller. If that true, how can i setup to check hitArea only on click, not on mouseMove? Thanks
  7. Hello. I studied Pixi when it was 4v and took a break. Now it's v5, and i want release my dream in using pixi.js+vue-cli. If you don't want to read all my steps, just read last clause in the post 😃 So first of all i've did that installed npm npm install -g @vue/cli vue create my-project The vue-cli 4.4.1 has such structure: node_modules public libs pixi.js index.html src I'v tried to install pixi.js in 2 ways: just put pixi.js in public/libs and insert it to index.html. As a result in .vue\.js files i can use PIXI without any imports. But popup messages with available PIXI functions are not available npm i pixi.js and then write import * as PIXI from 'pixi.js' => I .vue\.js files i have to write import, but now i'v see a help popup messages I choose 2 way I make a simple scene with pixi, using spritesheet atlas, tillingsprite's and everything is working. The next step for me is insert input field to the page. I went to https://github.com/pixijs/pixi.js/wiki/v5-Resources and tried to use pixi-ui.js with that example: let app = new PIXI.Application({ resizeTo: window, view: document.getElementById("app-cvs"), antialias: true }); const uxStage = new PUXI.Stage({ width: 100, height: 100 }); let button = new PUXI.Button({ text: "Hello world!" }); button.setBackground(0xff); button.setLayoutOptions(new PUXI.FastLayoutOptions({ width: 300, height: 200, x: 100, y: 100 })); uxStage.addChild(button); app.stage.addChild(uxStage); Btw, as you can see resizeTo: window is set. Is it a bad choice to make fullwindow canvas with full screen pixi application in it? Or it's better to make a lot of small canvas'es inside divs (for a ground, character and so on) ? First method public libs pixi.js puxi.js <script src="./libs/pixi.js"></script> <script src="./libs/puxi.js"></script> npm run serve => exception TypeError: PUXI.Stage is not a constructor 1 hour for find any fix and... you need to add this <script src="./libs/pixi.js"></script> <script src="https://cdn.jsdelivr.net/npm/@pixi/filter-kawase-blur@3.1.1/dist/filter-kawase-blur.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@pixi/filter-drop-shadow@3.1.1/dist/filter-drop-shadow.min.js"></script> <script src="./libs/puxi.js"></script> finally the button appeared on the screen. Second method npm i puxi.js . it also installed filter-kawase and filter-drop import * as PIXI from 'pixi.js' and import * as PUXI from 'puxi.js' npm run serve => tons of exeptions like error in ./node_modules/puxi.js/lib/puxi.mjs Can't import the named export 'Texture' from non EcmaScript module (only default export is available) 30 minutes for find any fix and you need create vue.config.js with module.exports = { configureWebpack: { module: { rules: [ { test: /\.mjs$/, include: /node_modules/, type: "javascript/auto" } ] } } } and even after that i'v got an error vue.runtime.esm.js?2b0e:1888 TypeError: Cannot redefine property: ticker at Function.defineProperty (<anonymous>) at Application.TickerPlugin.init (ticker.es.js?e3e9:775) at eval (app.es.js?568e:52) at Array.forEach (<anonymous>) at new Application (app.es.js?568e:51) at VueComponent.mounted (App.vue?234e:15) at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854) at callHook (vue.runtime.esm.js?2b0e:4219) at Object.insert (vue.runtime.esm.js?2b0e:3139) at invokeInsertHook (vue.runtime.esm.js?2b0e:6346) and here i'm stucked. As puxi.js worked via html so it should work and via "npm". What's a proper way to connect puxi.js with pixi.js via npm?
  8. 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.
  9. 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 https://github.com/pixijs/pixi.js/issues/4710 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
  10. 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!
  11. That exactly what i'm trying to do, but i want that my "SuperPuperContainer" will work even with based pixi objects
  12. 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
  13. 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 https://pixijs.io/examples/#/basics/container.js 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
  14. 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: https://codepen.io/clf/pen/RJXXqM 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.
  15. Thanks for help and fixing it. Please don't close the topic. I feel it's not the last trouble with masks for me 😃