b2spirit Posted December 15, 2015 Share Posted December 15, 2015 Hello all, I am quite new to working with pixi and my intention is to create a hierarchical tree structure kind of thing with nodes which are draggable. I have done some work and I currently have trouble getting the lines to move with the draggable nodes. My question is there any examples of full scene graphs with hierachies that I can refer to? Cheers! Quote Link to comment Share on other sites More sharing options...
grovesNL Posted December 15, 2015 Share Posted December 15, 2015 I am working on something like this currently, but it's not generic enough to be shared. I'm using a single PIXI.Graphics instance to draw lines between nodes. Each time a node is dragged, I clear the Graphics instance and redraw the updated lines. This achieves the functionality you described. I do some optimizations here such as culling nodes outside of the viewport and lines that do not pass through the viewport. I also separate inactive lines (ie. lines that do not connect to the current node) to a separate container so I can continuously update active lines only (the lines that are moving with the current dragging action). My solution works very well for tens of thousands of nodes, but there is noticeable lag when 10,000+ pipelines are drawn on the screen at once (you may never have this problem). To improve this I plan to move away from the Graphics approach to draw thick lines in the shader directly, but you may never require this if your hierarchies are not very complex. If you want to share an example (either publicly or privately), I can try to assist. Quote Link to comment Share on other sites More sharing options...
xerver Posted December 15, 2015 Share Posted December 15, 2015 Pixi is a scene graph, if you move a parent container. The children will move with it. Quote Link to comment Share on other sites More sharing options...
d13 Posted December 15, 2015 Share Posted December 15, 2015 My question is there any examples of full scene graphs with hierachies that I can refer to? Are you trying to create a drag and drop interface for Pixi sprites? Quote Link to comment Share on other sites More sharing options...
grovesNL Posted December 16, 2015 Share Posted December 16, 2015 Typically a node graph is similar to the following structure: The nodes are the circles which would be draggable. In my case the circles are Pixi sprite and the lines are drawn in a Graphics instance. Quote Link to comment Share on other sites More sharing options...
b2spirit Posted December 17, 2015 Author Share Posted December 17, 2015 Are you trying to create a drag and drop interface for Pixi sprites? Sorry for the late reply. Yes, the nodes are dragging properly without issue, but the problem is with the lines. They duplicate. As Groves mentioned, I will try deleting the graphics instance. Quote Link to comment Share on other sites More sharing options...
TheBuffer Posted December 17, 2015 Share Posted December 17, 2015 This project may help you: https://github.com/felixmaier/Lamella Screenshot's say: Quote Link to comment Share on other sites More sharing options...
grovesNL Posted December 17, 2015 Share Posted December 17, 2015 Sorry for the late reply. Yes, the nodes are dragging properly without issue, but the problem is with the lines. They duplicate. As Groves mentioned, I will try deleting the graphics instance. I don't delete it entirely - just graphics.clear() should be ok. Quote Link to comment Share on other sites More sharing options...
b2spirit Posted December 18, 2015 Author Share Posted December 18, 2015 Thanks Grove, I got it to work . This is taking a bit of time since I am quite new to javascript programming and I am doing it outside my normal work. So my progress is quite slow. I'll probably have more questions later on . Quote Link to comment Share on other sites More sharing options...
grovesNL Posted December 18, 2015 Share Posted December 18, 2015 No problem, glad to help! 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.