Comments (8)
Check out Container.addChildAt():
http://easeljs.com/docs/symbols/Container.html#addChildAt
(Stage extends Container).
Does this do what you are looking for?
Also, if you re-add an existing child to the stage, it will move it to the top of the z-index.
i.e.
var a = new DisplayObject();
var b = new DisplayObject();
stage.addChild(a);
stage.addChild(b);//b is on top
stage.addChild(a);//a is on top
from easeljs.
Yes, but this is not anywhere as simple as
a.zindex++
Not only CSS and html and javascript can set zindex, but so does flex.
from easeljs.
Maybe I am missing something, but the Flex example looked similar to the EaselJS API:
idParentCanvas.setChildIndex(idChildCanvas, newIndex );
Could you suggest the API you think would work better, and we could consider that.
from easeljs.
The last example goes like this:
private function changeZIndex( direction:int ): void {
var newIndex:int = idParentCanvas.getChildIndex(idChildCanvas) + direction;
if( newIndex >= 0 && newIndex < idParentCanvas.numChildren ) {
idParentCanvas.setChildIndex(idChildCanvas, newIndex );
}
}
<mx:Button label="Move Up" x="10" y="10" click="changeZIndex(1);"/>
<mx:Button label="Move Down" x="92" y="10" click="changeZIndex(-1);" />
So, taking out the horrible xml verbose noise, it can be simpler.
from easeljs.
Having worked extensively with both relative and absolute depths, I would much prefer to stick with relative depths. They have less overhead, and are (in general) easier to work with. That said, we do provide sortChildren, which would make it fairly straightforward to implement a z-index system if you'd like one.
The changeZIndex example above is functionally identical to addChildAt, with a range check added. This is what it would look like in EaselJS:
if (index >= 0 && index < container.getNumChildren()) {
container.addChildAt(child, index);
}
from easeljs.
Yes, but if I have 5 types of N elements, on the screen, each having a different z-index, adding another element will take O(N), O(NlgN) if sorting is needed (well, can be back to O(N) using linear time sorting algorithms). Using a better data-structure, such as a Hash the takes a z-index and points to a list of elements, changing the z-index of any element and adding/removing any element would take only O(1).
But ignoring performance, it keeps the user design simpler. For instance, you can do all easeljs does in pure canvas. It is just not simple. Or convenient.
from easeljs.
I know this is rather old but this issue is a real showstopper for more complex scenes.
As mike pointed out it is possible to emulate a dynamic Zindex via addChildAt() but that would require the user to maintain a separate Zindex property, handle all stage.add/remove (to fixup indices), sort on each frame or maintain a dirty flag and sort only after Z has changed.
While all this can be done it is very cumbersome, not maintainable and feels kinda hacky.
Is it possible that everyone is coding platformers where the Zindex is only marginally important?
EDIT:
The desired behavior is:
- allow assigning an arbitrary Z index (range 0-max value - not limited to a contiguous sequence from 0-numOfChildren-1)
- internally resort objects based on Z index (before next tick but only after a Z has changed)
- take care when inserting new objects that the Z list updated accordingly (so an expensive sort is not done on every addChild)
- render stage objects based on the Z index list
from easeljs.
while conceptually different than what CSS devs are used to, relative depths is more flexible, vastly more efficient (for the reasons stated by enriko), and easier to extend & maintain.
from easeljs.
Related Issues (20)
- Graphics new method 'drawPolygon' HOT 7
- sortChildren on Chrome not working - works in Firefox HOT 1
- Easel JS not working on codepen HOT 1
- Android text lineheight doesn't match Web or Windows HOT 2
- Memory leak when tween assigned HOT 1
- getBounds returns unexpected result after caching with a non-1 scale HOT 2
- can not cache with StageGL instance get "TypeError: Cannot create property 'width' on boolean" HOT 2
- Shadow "Stroke" appears on top of shape when using fill and strokestyle. HOT 4
- New touch issues on touch-screen boards with new Chrome HOT 4
- CreateJS touch 'pressmove' event
- Is it possible to make webgl mask work in animation? HOT 1
- Bitmap class - new createjs.Bitmap - SVG not loading at viewbox size HOT 1
- Text is still compressed when maxWidth is null HOT 1
- Mousemovement Performance improvement HOT 2
- Different Luminence values for Saturation vs Hue HOT 3
- Hit area detection on Samsung Internet Browser HOT 1
- When will you update createjs2.0? The current version of movieclip is incorrect, and stageGL cannot be used. HOT 4
- Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true HOT 6
- The Typescript Typings in DefinitelyTyped are missing Graphics.StrokeDash HOT 4
- Createjs website dose not work ! HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from easeljs.