I am working on trying to change the anchor point of a sprite.
Most of the examples I have seen look something like this:
this.asset.anchor.setTo(0.5, 0.5);
But I am not really clear on how the this keyword is used in javascript.
How do I adjust the anchor point of a sprite?
For more information about the "this" keyword in JavaScript, I encourage you to have a look at the questions that deal about this specific problem, such as this one : How does the "this" keyword work?
However, from the Phaser point of view, the anchor point is the anchor of Phaser Sprite or a Phaser Image, so to change the anchor point of any sprite, change it after the sprite has been created :
var sprite = game.add.sprite(10,10,'');
// and then
sprite.anchor.set(0.5);
Also your example was not super clear, "this.assets" isn't super explicit in my opinion as a sprite doesn't necessarily come from an asset, which example were you looking at ?
Related
In the Phaser 3 docs I can see that the biggest difference between Sprite and Image is that you cannot animate or add a physics body to an Image, but in Image properties you can see an animationManager. I'm a little confused about this. Can anyone clarify this?
Actually, according to the official docs Phaser.GameObjects.Image does not have a AnimationManager property.
Phaser.GameObjects.Sprite on the other hand does have an anims that can access animations, but doesn't include a direct property of type AnimationManager. Both can be confirmed by using the TypeScript defintions.
This is because AnimationManager is global, and handles all animations. In Phaser 2 all objects would handle their own animations. See for example Phaser 2 CE's Phaser.Image docs.
So just as the documentation says, Image is effectively a static, lighter-weight, Sprite.
I want to bring an ArcadeSprite element in front of all other elements.
Is there any function in phaser 3 to do it?
Thanks in advance
ArcadeSprites have the Depth component that you can use to control which elements are displayed on top of others (think of it as a z-index).
You can do something like myArcadeSprite.depth = SOME_NUMBER_HERE.
I want to say there are also some bringToFront type of methods floating around somewhere in Phaser, but I can't seem to find them.
I am trying to implement a d3 visualization based on the sunburst diagram, and i have found an almost perfect online example of this which i have got working http://tributary.io/inlet/4127332/:
My main issue is that I need to also Clip the text to the segment,I have tried using the svg clip path but my meager d3 skills have let me down. Any help with this is appreciated.
So my first attempt to clip the text did not work and I think this is because the arc's coordinate space does not line up with the text's coordinate space in the way that you want if you are using the arc generator, as you are.
I found that if I apply the clip to the groups you make for each node then it worked like a charm. There was one caveat. When I tried generating my clip path and then applying them the order that the nodes were joined to the elements differed and so the wrong path were clipping the wrong text. I got around this by adding an id to each data element. You can see the final version here
The important parts are adding the clip paths (note the use of the new id field):
svg.append('defs')
.selectAll("clipPath")
.data(partition.nodes)
.enter().append('svg:clipPath')
.attr('id', function(d,i) { return d.id;})
.append('path').attr('d', arc);
Then you simply have to reference them on your node groups (again using the id):
group =
svg.selectAll("g")
.data(partition.nodes)
.enter().append('svg:g')
.attr('clip-path', function(d,i) { return 'url(#' + d.id + ')';});
In the tributary I put the svg data join first so that the "defs" node would appear in the usual place (first after the svg tag), but I do not think this is technically necessary.
I have an SVG image of the united states which I've drawn with a little bit of help from Raphaël js:
http://jsfiddle.net/zCRkg/2/
What I want to do is place some text to the right of each state when you hover over it. The problem is that, since each state is a path, its quite difficult to determine the x & y coordinates for where to place the label.
So, does anyone know a way of calculating the centre of a path using Raphaël? If failing that anyone know how to do this given a an array of vectors?
What you're looking for is the getBBox function in Raphaël. It will give you a bounding box object that you can use to calculate the central point of the path:
var bbox = st.getBBox();
var text = r.text(bbox.x + bbox.width/2, bbox.y + bbox.height/2, "Foo");
I forked your fiddle and made it show a static text in the middle of each state on hover. Picking up the state name from your data is left as an exercise.
the average of the difference between each coord should give you the centre, but thats probably not the most efficient way
I'm using andengine to create a physic simulation via box2d.
The bodies are created through PhysicsFactory using Sprites.
My idea is to procedurally position these sprites, following this pattern:
basically one central sprites which represent my world coordinates center, and a series of cloned sprites that are created by rotating the base sprite around myWorld center (the "X" inside the circle).
I've tried to use opengl way inside andengine (translate, rotate, back-translate)
super(stamiRadious, 0, image); //stamiDoadious is te distance from radix (world center) and "petal" attach point
this.setRotationCenter(0, 0);
this.setRotation((float) Math.toDegrees(angleRad));
this.setPosition(this.getX()+radixX, this.getY()+radixY);
but i failed: results are not right (wrong final position, and wrong box2d body property as if the sprite is much larger than the image)
I belive part of the problem relies on my interpretation on setRotation and setRotationCenter, and in general on my understanding of andengine coordinates system + box2d cordinates system.
Any thoughts/links to doc/explanation?
Once you created a Physics representation (Body) of a Sprite, you should be very careful on how you modify the Sprite! Usually you don't modify the Sprite anymore at all, but instead modify the Body, by calling
someBody.setTransform(); // Note that positions must be divided by PhysicsConstants.PIXEL_TO_METER_RATIO_DEFAULT!
Hope that helped :)