I have one stage and 4-5 layers with images and shapes on every layer. Every time I add an object in a layer that layer takes a greater z-index , index and comes at the top of the other layers.
.moveToTop .setZIndex or other functions don't work on layers. I tested it with the latest version 4.3.0.
How can I define the z-index of the layers and stay that way each time I add/edit an object?
Please help.
When you first create the layers, you have:
layer1 = new Kinetic.Layer();
layer2 = new Kinetic.Layer();
Then you add them to the stage:
stage.add(layer1);
stage.add(layer2);
This adding to stage defines your z-index initially;
To change the index you have to do layer1.remove() to remove it from the stage and then add it again to bring it to the top.
Related
I am creating a fighting game. I've got a spritesheet for the hero and a spritesheet for a monster. Since both will be able to do multiple attacks I would like to avoid to merge them in a single spritesheet. And I am intending to create more characters.
Now I am creating a SpriteBatchNode for each spritesheet and add them to layer.
CCLayer* stage = CCLayer::create();
CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("character_hero.plist");
this->characterHeroBatchNode = CCSpriteBatchNode::create("character_hero.pvr.ccz");
CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("character_monster.plist");
this->characterMonsterBatchNode = CCSpriteBatchNode::create("character_monster.pvr.ccz");
stage->addChild(characterHeroBatchNode);
stage->addChild(characterMonsterBatchNode);
Now I have one sprite in characterHeroBatchNode and multiple in characterMonsterBatchNode.
How can I reorder the monsters and the heros z-Order based on their PositionY attribute.
For example>
monster1->setPositionY(10); // In monster batch node
hero->setPositionY(24); // In hero batch node
monster2->setPositionY(43); // In monster batch node
I want the monster 1 behind the hero. And the hero behind monster2.
In the past, I've had to create games where I wanted some sprites in the foreground and others in the background. The sprites were in different sheets, like you have them.
To get them in the order I wanted, I put the "front" sprites into one CCLayer and the "back" sprites into another CCLayer. I added the layers to the scene in the order I wanted them to appear. I also manipulated each the respective layers to make them fade in/out as needed. So you could have the hero in the scene and then have the enemies appear behind him.
If you want to mix and match, you can have 3 layers, one for the "middle ground", one for "front", and one for "back", and dynamically move the sprites between the layers.
Was this what you were looking for?
If I understand what you're asking, the answer is, you can't. Consider each CCSpriteBatchNode to be its own container. You can adjust the Z order of the sprites inside the CCSpriteBatchNode, but when you add the batch to the CCLayer the whole CCSpriteBatchNode is applied to the CCLayer in whatever Z order you added it at. So in order to do what you want you would need another batch of monsters. Or use CCSprites and add/adjust them on the CCLayer in the way you want, but then you obviously lose the CCSpriteBatchNode benefits.
I have an application where user have to draw a line on the canvas without overlapping it. Is there a way to test the overlapping? I have googled already but found result with circles and rectangle overlapping. My case is different. Here user will draw lines on canvas without overlap the line itself. May be I am missing something so any guidance is appreciated. Thanks
I take it you mean the user draws a line with some sort of pen tool, using the mouse.
Here's what I would do:
First, hold the path of the line drawn in a BitmapData object.
var lineBitmapData:BitmapData = new BitmapData(display.width,display.height,true,0x00000000);
This creates a transparent bitmap object with the user's line on it.
On each frame (or timer event, if you use timer) do the following:
1.capture the current mouse position and put it into a Point object.
var currentMousePosition:Point = new Point(mouse.x,mouse.y);
you will also need a point representing the upper-left corner of your bitmapData.
var pt1:Point = new Point(1,1);
2.perform collision detection between the current mouse position and the lineBitmapData
var result:Boolean = lineBitmapData.hitTest(pt1, 0xFF, currentMousePosition);
the second parameter in the hitTest method is the threshhold value. Basically, this needs to be set to the minimum alpha value that you want to count as a hit.
3.check the result of the hitTest. If it's false, this means what the user is about to draw this frame does not intersect what was already drawn. In this case, you add the bit that was drawn during the last frame to the lineBitmapData.
If the hitTest returns true, however, that means the user is about to make his line intersect, so your program needs to stop the drawing (or whatever behavior you want).
if(result){
myPenTool.stopDrawing();}else{
var drawnLastFrame:BitmapData = myPenTool.drawSingleFrameLine();
lineBitmapData.draw(drawnLastFrame);}
4.Update what the user sees on the screen with the new lineBitmapData
I am playing with animation in AS3 and flex4, and I've come into a problem. My application is a game board (like a chess board), where each field is a border container added to some position.
Also I am adding a child element (shape), to this container on mouse click. What I want to achieve is to be able to move shapes smoothly from one field to another. But it appears that the shape goes behind the neighbor field this way http://screencast.com/t/iZ3DCdobs.
I believe this happens because shape is a child of specific border container, and to make it visible over every other container, I would need to use layers somehow....
I would be happy if anybody could suggest a solution
Yes you're right on that. You should add the movable objects to a different layer.
As there are no typical layers in AS, you could try to drop the fields in one sprite and any other objects to a different an than place them on each other, so that when you will move a object it won't go behind other objects.
If you place both sprites in the same position you will still have accurate x,y positions between movable objects and fields.
You have two options:
First one is to have different layers for your DisplayObjects: as an example, the bottom layer would hold all the boards, and the upper layer would hold all the pieces.
Second option is to manipulate the index of the objects with swapChildren(), swapChildrenAt(), and setChildIndex(). So to bring a MovieClip to the topmost front, you would do MovieClip(parent).setChildIndex(this, 0);
If the situation is that always the shape object gets hidden behind the next ( right side ) grid container, the I suggest you create your grid in reverse.
Suppose you are creating a chess grid. that is a 8x8 grid. Normally you would create your grid using 2 for loops, looping from 0 to 8 with say the x and y points starting at 0,0 for the first grid and going on till the end. What I suggest you to do is to create from 8,8 to 0,0.
Display objects in flash are stacked on top of each other based on their child index.
For example: If you create two objects. Rectangle and Circle as follows
var rect:Rectangle = new Rectangle();
this.addChild(rect);
var circ:Circle = new Circle();
this.addChild(circ);
The circle will always be on top of the rectangle in this scenario because the circle was added after the rectangle to the display list.
So if you reverse the order of creation of your grid, the right grid cell will be added to the display list first and so the grid cells to the left will always be on top of the right ones. Hence, the problem that you are facing will not occur.
I have added some backgrounds on stage and then on top of that adding another background and all these are movieclips.
At some time i have to remove the backgrounds and then it should be added but here problem am facing is the background become coming front.
so is there any function like send to back or bring to frond based on the movie clip names.
You want to experiment with :
setChildIndex(object, z-value)
This set the depth of the object on the stage.
swapChildren (object1, object2)
This exchange the position of two objects on the stage.
setChildIndex
swapChildren
swapChildrenAt
addChildAt
Use addChildAt(index);
http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/flash/display/DisplayObjectContainer.html#addChildAt()
As of right now, I am trying to create a tiling effect for a game I am creating. I am using a tilesheet and I am loading the tiles to the sprite like so...
this.graphics.beginBitmapFill(tileImage);
this.graphics.drawRect(30, 0,tWidth ,tHeight );
var tileImage is the bitMapData. 30 is the Number of pixels to move retangle. then tWidth and tHeight is how big the rectangle is. which is 30x30
This is what I do to change the bitmap when I role over the tile
this.graphics.clear();
this.graphics.beginBitmapFill(tileImage);
this.graphics.drawRect(60, 0,tWidth ,tHeight );
I clear the sprite canvas. I then rewrite to another position on tileImage.
My problem is....
It removes the old tile completely but the new tile positions farther to the right then where the old bitmap appeared.
My tile sheet is only 90px wide by 30px height. On top of that, it appears my new tile is drawn behind the old tile. Is there any better way to perfect this.
again, all i want is for the bitmap to change colors
You could try to load the whole tilesheet in your sprite, and then redefine the scrollRect property each time you need to.
this.scrollRect = new Rectangle( 30, 0, tWidth ,tHeight );
Note that you can't just edit scrollRect.x, .y, .width or .height ; you have to redefine a new Rectangle each time.
Using scrollRect will probably be much faster that redrawing part of the bitmap.
You can read this excellent article from Grant Skinner for more informations about scrollRect.