Jump to content

Can i ignore input event?


Recommended Posts



my game had many layeres to input.


when i click screen i get all event from trigger..



for example  layer like under 

all layer is contaner or object derived from container



MainContainer -> Game        -> Map  -> BG

                                                            -> Character

                        ->  UILayer ->  stash

                                           -> inventory



i click screen on position of inventory.

and then i get inventory and BG or Character if Character or BG is behind inventory


how can i prevent this.. i wanna get only top event.




Link to comment
Share on other sites

How are you appending your click handler? Can you post a snippet just showing the click handler?


Pixi v2 had an interaction manager, v3 implements event handling via a plugin, or you might be using DOM.


If DOM then usually adding `event.stopPropagation()` to your handler would solve it, but there are other ways too. This is a good primer on browser event propagation.

Link to comment
Share on other sites

Thx mattstyles and xerver..


mattstyles's jsfiddle code is normal...  it can get only one event by each image.


but it has only one layer 
   stage -> image

             -> image 



so i changed your code 




this is example code to my situation..


Stage -> Image(0) Parent  -> Image(1)
                                          -> Image(2)

                                          -> Image(3)

                                          -> Image(4)

                                          -> Imag.....


and then i can get more event from interactiveManager at current frame







Link to comment
Share on other sites

Like I mentioned, I think you are looking for stopPropagation():



sprite.on('mousedown', function (e) {  e.stopPropagation();  console.log(i, this);  })

Without the call to stopPropagation, it will bubble the event to other items that would get hit by the event as well as the parents. This is similar to how the DOM behaves.

Link to comment
Share on other sites

i have other problem for 'OVER' and  'OUT';


Goblins of Red Outline are 'OVER'


Normal Goblins are normal.. 








Mouse move To Yellow arrow

and then goblin can't get OUT EVENT until Last goblin get  'OUT' EVENT





<!doctype html><html><head>    <title>S Proejct by Pixi 2.2.7</title>    <meta charset='utf-8'>    <meta name="viewport" content="width=device-width, initial-scale=1.0,  minimum-scale=1.0">    <link rel="stylesheet" type="text/css" href="../../css/jandi.css"/>    <style>        body { width: 100%; height:100%; margin: 0; padding: 0; background-color: #1c94c4; }    </style>    <script type="text/javascript" src="../../js/libe/pixi.3.0.8.js"></script>    <script type="text/javascript" src="../../js/libe/pixi-spine.js"></script>    <script type="text/javascript" src="../../js/libe/pixi-extra-filters.js"></script>    <script type="text/javascript" src="main.js"></script></head><body><select id="select"></select><input type="file"></label><div id="stat"></div><div id="main" width=1280' height='720'></div><!-- main --><script>runMain()</script></body></html>

Source Code

var spineContainer = null;function runMain() {    var renderer = PIXI.autoDetectRenderer(1920, 1080);    document.body.appendChild(renderer.view);// create the root of the scene graph    var stage = new PIXI.Container();// load spine data    PIXI.loader        //.add('f1', './f1_default/f1.json')        //.add('f1', './f1_rotate/f1.json')        //.add('f1', './f1/f1.json')        .add('f1', './raptor/raptor.json')        //.add('f1', './goblin/goblins-mesh.json')        //.add('f1', './goblin/goblins.json')        //.add('f1', './goblin/goblins-mesh-leak.json')        //.add('f1', './goblin/goblins-mesh_all_delete.json')        .load(onAssetsLoaded);    var dragon = null;    var dragonCage = new PIXI.Container();    spineContainer = dragonCage;    // add the container to the stage    stage.addChild(dragonCage);    function onAssetsLoaded(loader,res)    {        for(var i = 0; i < 1; ++i){            // instantiate the spine animation            dragon = new PIXI.spine.Spine(res.f1.spineData);            dragon.skeleton.setToSetupPose();            dragon.update(0);            dragon.autoUpdate = false;            dragon.interactive = true;            dragon.inex = i;            dragon.on('mousedown', function(){                console.log('mousedown', this.inex);            });            dragon.on('mouseover', function(){                console.log('mouseover', this.inex);                this.filters = [                    new PIXI.filters.GlowFilter(                        this.width,                        this.height,                        1,                        1.1,                        0,                        0xEF0000,                        //parseInt(0xff00000, 16),                        3                    )                ]            });            dragon.on('mouseout', function(){                console.log('mouseout', this.inex);                this.filters = null;            });            // create a container for the spine animation and add the animation to it            dragonCage.addChild(dragon);            if(0){                var skeleton = dragon.skeleton;                skeleton.setSkinByName("goblin");                skeleton.setSlotsToSetupPose();            }            if(1){                // measure the spine animation and position it inside its container to align it to the origin                var localRect = dragon.getLocalBounds();                dragon.position.set(500 + (i*50)%1500, 500 + parseInt(((i*50)/1700))*70 );                //dragon.position.set(-localRect.x + JLib.random(-500, 1920 -  1500), JLib.random(1000, 1000));                var scale = 0.5;//JLib.randomf(0.5, 0.5);                dragon.scale.set(scale, scale);            }            // once position and scaled, set the animation to play            dragon.state.setAnimationByName(0, 'walk', true);        }        animate();    }    var elased = Date.now();    var delta = 0;    function animate() {        delta = (Date.now() - elased)/1000;        elased = Date.now();        requestAnimationFrame(animate);        for (var i in spineContainer.children) {            //stage.children[i].children[0].update(0.0166666);            spineContainer.children[i].update(delta/100);        }        renderer.render(stage);    }};


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...