Depth ordering

[EdeMeijer]

I really like the simplicity of working with Two.js so far, but I was wondering if there is any explicit way to control the depth/z order of objects. I couldn't find anything about that in the docs, and it seems like everything is ordered according to insertion order. Is is possible for example to insert an object 'under' another object already in the scene?

[jonobr1]

Glad you like Two.js! Unfortunately the only way to secure ordering is through the Two.Groups API. E.g:

var background = two.makeGroup();
var foreground = two.makeGroup();

// add stuff to foreground
var rectangle = two.makeRectangle(25, 25, 33, 33);
foreground.add(rectangle);

// add stuff to background
var circle = two.makeCircle(30, 30, 15);
background.add(circle);

This is not something that will make the next stable release but will certainly be top of the list for v0.8.0. Thanks again for reporting!

[jonobr1]

FYI: I'll post my thoughts for a potential API here.

[EdeMeijer]

A few groups acting as layers should do the trick in my case, thanks. Just working on a little game where I might need to add objects underneath the player at times, but a background and foreground layer will work.

Just my 2 cents, I think something like this would be nice as an API:

var group = two.makeGroup();

var obj1 = two.makeCircle(30, 30, 15);
var obj2 = two.makeCircle(50, 50, 10);

group.add(obj1)
group.insertBefore(obj2, obj1);

Or maybe

obj2.insertBefore(obj1);

but the latter case requires you to find the group the object is currently a child of, not sure if that's desired.

I'm sure you'll cook up something nice :)

[jonobr1]

That sounds good! One thing I'd like to do is also have an Adobe Illustrator style where you can say, "Send to Back/Front". Keep you posted.

[jonobr1]

If you're using the current v0.7.0 dev branch or v0.7.0-alpha.1 release tag then you can directly push, shift, unshift, splice, and other array methods directly onto the Two.Group.children array. Two.Group.add still exists, but for more complex sorting you can do something like this:

var group = two.makeGroup();

var obj1 = two.makeCircle(30, 30, 15);
var obj2 = two.makeCircle(50, 50, 10);

group.add(obj1);
group.children.unshift(obj2); // or group.children.splice(0, 0, obj2);

The events should be hooked up correctly so that order stays intact when rendering. I still want to make a bringForward, bringFront, sendBackward, sendBack set of functions e.g:

[meetzaveri]

Hey @jonobr1 . Using group.children.unshift() solution worked for me.

Can I know what exactly unshift,shift or push does here (in this context i.e. children)?

[jonobr1]

The children object resembles the functionality of a plain JavaScript Array. The order of elements in the children object reflect the order that those objects will be drawn to the screen. The functions on the children object reflect prototypical JavaScript Array functions.

shift: removes the first element in the children (and returns it for any other use).
unshift: adds an element to the children's object.
push: appends elements to the children.

Hope that helps!