How can i create circular scrollable layout .
I tried to add all icons in Group & than tried to rotate it , but no success because of jadgy edges.
I tried to rotate an image & according to this image rotation , i tried to set positions of icons.
Is there any other alternative to perfectly do it.
Put the circle and its icons in a movieclip and make sure its registrationpoint matches the center of the circle. You can then rotate that movieclip. To avoid aliasing you can enable 'allow smoothing' in the properties of your bitmaps. For vectors you can enable hinting. Also to avoid aliasing it's generally a good idea to place objects on integer coordinates. So rounding the x,y coordinates of the movieclip and its contents (looping through them after rotating) might help too.
Related
I want to implement rotating rectangle around cicrle in such way, that circle has no rotation, and rectangle has. All object's are Box2D Body objects. Here is picture, what I want to have:
In my case rectangle touches circle, but I think it doesn't matter.
At first I tried to do it with two Fictures for same Body, but there was a problem with rotation: I couldn't have one ficture with rotation and another without.
I think, it should be somehow connected with joints, but I don't know what exactly Joint I should use. Maybe are there another solutions?
I think DistanceJointDef will do the tricks
you could put the radius if the circle as the distance with a little margin if you want
you also have to reduce the friction of bodies so the rectangle can move smoothly
DistanceJointDef djd = new DistanceJointDef();
djd.bodyA = bodyRactangle;
djd.bodyB = bodyCirlce;
djd.length = radius + margin;
world.createJoint(djd);
bodyRactangle is a dynamic body
bodyCirlce is a static body
try that for a start, hope it is helpful
Good luck !!
I have a single pixel sprite. To this sprite I add four sprites, each a quarter of a square. To offset the sprites, all i do is change their anchor points.
For example:
top right square is at anchor: (0,0);
bottom right : (0,1);
bottom left : (1,1);
top left : (1,0);
I expected the sprite edges to meet perfectly so that it looks like one big square. Instead there are black lines between the edges of each square so it looks like I have placed four squares close together.
I use texture packer to create a sprite sheet, containing the various squares.
Is there some setting in cocos2d-x or some code I must change to get the sprites to align perfectly ?
Edit: This is for cocos2d-x 3.1.1 and higher. Changing the anchor point is necessary and unavoidable.
EDIT: I use sprite frames from a sprite sheet created using TexturePacker. This was the problem. See my answer below.
The problem has something to do with using a sprite sheet (created using TexturePacker) to hold the pieces together. When you place the frames from the sprite sheet together to form a complete image the lines appear.
You can make the black lines disappear by setting the "Extrude" option in Texturepacker to at least 1.
EDIT: For those of you updating sprite positions based on a physics simulation, black lines can be caused by "sub pixel" positions. Try to either move your objects by complete pixels. Or search for answers with "sub pixel" for other solutions.
casting positions calculations to int type didn't help ?
Generally after certain float calculations like multiplying and divide and then complier auto demoting to to int may result in variation of 1px.
for example 26.500123 can be treated as pixel 26 or 27, depending to your casting methodology.
Test Case:
Are you saying you did this ?
auto testNode = Node::create();
auto s1 = Sprite::create("Images/1.png");
s1->cocos2d::Node::setAnchorPoint(Point(1,0));
auto s2 = Sprite::create("Images/2.png");
s2->cocos2d::Node::setAnchorPoint(Point(0,0));
auto s3 = Sprite::create("Images/3.png");
s3->cocos2d::Node::setAnchorPoint(Point(1,1));
auto s4 = Sprite::create("Images/4.png");
s4->cocos2d::Node::setAnchorPoint(Point(0,1));
testNode->addChild(s1);
testNode->addChild(s2);
testNode->addChild(s3);
testNode->addChild(s4);
testNode->setPosition(Point(screenSize.width/2,screenSize.height/2));
this->addChild(testNode);
and you got 1px gap ? i did that same with cocos2dx 3.1
i got this fine lady
Don't change anchorPoint, you'll regret it later. Calculate the correct position for each sprite.
Make sure the position x/y are on pixel boundaries. Casting to int will do the trick though Retina devices allow for 0.5 positions as well due to pixel density being 2x the point resolution.
Point #2 is also why you shouldn't use anchorPoint because you can't cast the position to integers when offsetting the texture with the anchorPoint.
I have an hourglass like vector shape and I'd like to use it to mask an image. I'd like to feather the edges - have a soft falloff in transparency that follows the contours of the hour glass. Any ideas how I can do this?
I tried using a gradient fill on a closed shape (using beginGradientFill() and curveTo() functions) but that falloff doesn't follow the contour of the vector shape, it can only go one direction.
Maybe there is a better solution but until somebody comes up with it... I assume you could do the following:
Draw whatever shape you want to use as mask into a transparent bitmap.
Scale a bit the bitmap down (or use a matrix while drawing its bitmapdata).
Apply a blur filter to it.
Put the bitmap's center to the masked clip's center so they are aligned.
Set the masked clip's cacheAsBitmap property to true.
I have a bit problem with rotationX and rotationY.
It's cool if i just do a roationX and rotaionY below
_eventParent.rotationY =_differentX;
_eventParent.rotationX =_differentY;
However once i have assign a mouse move to the _eventParent. The roationX and roationY change perspectively while the mouse is moving. so instead the item remain the same size. it increase and decrease size prospectively. any idea why is it doing this? is there a possibility to stop this behavior?
Thanks
Please find the image below.
Perspective allows part of your shape to look closer to you than other parts. The problem is that perspective has a center, or "vanishing point" and by default, it is fixed. As you move your shape farther away from the vanishing point, the perspective changes, causing your shape to widen or narrow.
You can fix this by updating the vanishing point so that it is always at the same coordinates as your shape. Since the shape will always be at the vanishing point, the perspective shouldn't change.
To do this, create a perspectiveProjection for your shape:
_eventParent.transform.perspectiveProjection = new PerspectiveProjection();
PerspectiveProjection is located in the flash.geom package, so don't forget to import it.
Then whenever you update your shape's position, update it's vanishing point:
_eventParent.transform.perspectiveProjection.projectionCenter =
new Point(_eventParent.x, _eventParent.y);
You might need to offset the vanishing point by a set number of pixels to get the perspective looking the way you want it to.
Correct me if I misunderstood your question. Your question is that if you apply rotation to the movieClip object, then why does the size appear to be changing?
For simplification, Let's not apply rotation on both X and Y axis. Let's take a rectangular movie clip and onMouseMove we do ++myMovieClip.rotationX;
Now, this statement is going to apply rotation on the object about the X-axis and one would get a perspective of the movie clip flipping across X -axis and this flipping will show as change in size of the object.
The same applies to rotating across y-axis.
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.