Quantcast
Channel: Pixi.js Latest Topics
Viewing all articles
Browse latest Browse all 3978

FPS drops on mousemove

$
0
0

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


Viewing all articles
Browse latest Browse all 3978

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>