GBear Posted December 1, 2015 Share Posted December 1, 2015 hi.. 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. THX.. Quote Link to comment Share on other sites More sharing options...
mattstyles Posted December 1, 2015 Share Posted December 1, 2015 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. Quote Link to comment Share on other sites More sharing options...
GBear Posted December 1, 2015 Author Share Posted December 1, 2015 thx..a lot.but i can't use DOM.. , i want not using DOM at all.. .... if i can't control with interactiveManager.. i will be append my handler.. you have any idea? T-T/ Quote Link to comment Share on other sites More sharing options...
mattstyles Posted December 1, 2015 Share Posted December 1, 2015 You can set `mousedown` (or other events ) directly on to interactive containers Does this fiddle help? Quote Link to comment Share on other sites More sharing options...
xerver Posted December 1, 2015 Share Posted December 1, 2015 You can also stop propagation of interaction events, the same way you do it in DOM. Quote Link to comment Share on other sites More sharing options...
GBear Posted December 1, 2015 Author Share Posted December 1, 2015 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 http://jsfiddle.net/p2owbd23/2/ 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 thx.. Quote Link to comment Share on other sites More sharing options...
xerver Posted December 1, 2015 Share Posted December 1, 2015 Like I mentioned, I think you are looking for stopPropagation(): http://jsfiddle.net/p2owbd23/3/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. Quote Link to comment Share on other sites More sharing options...
GBear Posted December 1, 2015 Author Share Posted December 1, 2015 Oh.. !! thx alot~~~ ..really..This seems like i'm looking for to do for event..thx.. xerver Quote Link to comment Share on other sites More sharing options...
GBear Posted December 2, 2015 Author Share Posted December 2, 2015 i have other problem for 'OVER' and 'OUT'; Goblins of Red Outline are 'OVER' Normal Goblins are normal.. OVER : HAS OUTLINE FILTEROUT: DELETE OUTLINE FILTER Mouse move To Yellow arrowand 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 Codevar 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); }}; Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.