Every time I create a sprite to use as css background-image, I have to crunch the math and remind myself how to remember the X and the Y coordinates in pixels. How can I remember it or see it visually to keep it straight?
I came up with this graphic, hope it's helpful to someone else as well.
Think 'Y' rhymes with 'SKY' so thats your top measurement (distance in px) from the top. That leaves 'X' as the remaining distance (distance from left in pixels)
When I say distance from left and distance from top, I am referring to the distance in pixels from the side of your overall image to when the part you want to show, begins.
I usually keep the images anywhere on the Sprite sheet and then check out there co-ordinates by clicking on each graphic element in Fireworks(i use fireworks) and then negating the co-ordinates. For eg:if an element is at x=23px and y=20px, then in the CSS, i use background-position:-23px -20px. This always does the work.
Related
I have an object rotated around point (0,0). I can't change the anchor point. The rotation is done by another system and I can't influence that. All I have control of is the position of the element (and I can access the rotation value).
Now, I'd like to adjust the element position to make it appear like it's rotating around a specific pivot point.
How it is:
How I want it to be:
I could be wrong (your description honestly isn't great) but it looks to me like you just want to have the anchor point (that you have no control over) in the center of your image. So you just need to know the anchor point, and then calculate, probably, the top-left corner of your image based on the center of it being at the same point as the anchor. If the anchor point is (a,b), the width and height of your image are w and h, respectively, then the top-left corner of your image should go at the point (a - w/2, b - h/2). That is you need to subtract off half of both dimensions.
I'm trying to implement 2d zoom for a basic game. I have the images scaling. I also have a basic zoom that fails on occasion. Like...it pretty much looks legit until you start testing heavily. Sometimes when I zoom in, and move two objects close to each other, and I zoom back out, the objects now overlap, although the zoomed in version suggests otherwise.
zoom_level starts at 1.
zoomIn():
zoom_level *=1.2;
for sprite in sprites:
//make sprites 1.2 times their current size
sprite.x *= (zoom_level * zoom_level);
sprite.y *= (zoom_level * zoom_level);
It's really hard to give a proper answer, since no engine/platform/language is given.
Explained in a general way:
You will want to scale the x/y coordinates of your sprites by the same factor as you want to scale their dimensions. And the corner closest to your "zoom-point" should be the anchor point for your scaling. [Meaning if you zoom in to the x/y-coordinates of your sprite it will be enough to scale the width/height. But if you want to zoom in to the center of a sprite, the x/y-coordinates will also change since they will be pushed towards the edge of the screen.]
But most of the time you shouldn't handle zooming/transforming by changing the sprites' actual world-positions/dimensions. Most engines use a "Camera" or "Viewport" to project the world-coordinates of object to screen-coordinates. Meaning they scale/transform all images at render-time, leaving the world-coordinates untouched. You should use whatever is the equivalent of that in your engine.
As an example, given a square at (1,1) with dimensions of 1x1, if we zoom in by a factor of 2 (effectively doubling everything) using the coordinate origin as the anchor, we end up with a square rendered at (2,2) and dimensions of 2x2 in screen space.
Specific to your given code snippet:
Why to you square your zoom level in this line?
sprite.x *= (zoom_level * zoom_level);
seems to be wrong, are you sure a simple
sprite.x *= zoom_level;
isn't enough?
And as far as I can tell, this will only scale the position of the sprites but not their dimension, you should probably scale their width/height too.
OTOH, if your engine already handles camera/viewport scaling, you probably don't want to change the x/y-coordinates of your sprites at all or else you might be double transforming them.
Anyway, I'd recommend reading documentation/tutorials specific to your engine.
I am fiddling around with CSS3 perspectives & transformations. Starting from this great 3D cube example, I would like to modify the cube such that it does not just rotate around its center, but roll over its edges.
I got the first left tilt working by rotating the cube around the z-axis, with -webkit-transform-origin: bottom left (see fiddle; example limited to left tilts for simplicity). For a subsequent left tilt, I am struggling how to further adjust the origin. Conceptually, I would need to set the origin relative to the parent container (i.e. for consecutive left tilts, it should gradually wander to the left in 200px steps).
Any help is greatly appreciated!
I've had a go at this and I think you'll need to look into the css matrix transformations available to you to get exactly what you want.
Unfortunately it's not as simple as rotate, then move transform origin.
What happens is the cube is rotated around that edge, but then if you move the point of transform it applies the previous transform to the cube using this new point of origin.
What's more you need to also translate the position of the cube. You can't move it along purely using rotations.
Matrices should solve all of this I think (I don't know an awful lot about them I'm afraid)
You can see the modified jsfiddle I created where the cube is rotated and translated.
The point of translation is the center though, so it doesn't look like the cube is "rolling".
here's the crucial extra code:
...
//left
zAngle -= 90;
xPos -= 50;
//rotate and translate the position of the cube
$('#cube')[0].style["WebkitTransform"]="translateX("+xPos+"px) rotateZ("+zAngle+"deg)";
...
js Fiddle here: http://jsfiddle.net/DigitalBiscuits/evYYm/20/
Hope this helps you!
I think this tutorial may help you.
http://desandro.github.io/3dtransforms/docs/cube.html
If you want to roll over its edges, just rotateZ and translateX. but how fast you want rotate, you may have to caculate it.
http://desandro.github.io/3dtransforms/examples/cube-02-show-sides.html
I have a rectangle of any arbitrary width and height. I know X,Y, width, and height. How do I solve the upper right hand coordinates when the rectangle is rotated N degrees? I realized if it were axis aligned I would simply solve for (x,y+width). Unforunatly this doesn't hold true when I apply a transform matrix on the rectangle to rotate it around its center.
It's usually easiest and fastest to let Flash's display code do these kinds of things for you. Create an empty Sprite and put it inside the rectangle's display object at the corner you want to track. Then, find the location of that sprite in the coordinate space of your choice:
var p:Point = new Point(0,0);
myRectangle.myCornerSprite.localToGlobal( p );
someDisplayObject.globalToLocal( p ); // for a coord space besides the stage
This gets you out of making any assumptions about the rectangle's design (i.e. registration point), and works even if the rectangle should be skewed or scaled as well as being rotated. Plus, this will be much easier to implement and maintain then a mess of cosines and whatnot.
(Note that the code above assumes that "upper right" refers to a specific corner - if you want to examine whichever corner happens to upper-rightmost at the moment, I'd simply add do the same thing with a sprite at all four corners, and pick whichever is to the upper right in global coords.)
You just have to calculate the point on a circle for the given radius. The center of your rectangle will be the circle's origin and any corner will be a point on the circle's circumference. You need to use trigonometry to calculate the new point using the rotation. I don't have time right now to explain all this, but here is a link to a decent 2D Javascript library I've used in the past and which should give you everything you need (bearing in mind that the math is virtually the same in Javascript and ActionScript) to work it out for yourself.
http://jsdraw2d.jsfiction.com/viewsourcecode.htm
I was playing around with an image on a site just for practice, and I was wondering if anyone could help me with a question.
I am trying to get the branch the snake is on extend both directions. (using background-repeat for x) However it will only match up with one side or the other. Is there a way to get x to repeat only for one side of the image, so I can use two slivers of the tree image and it will match on both sides?
Thanks for any input or insight you might have!
How would that work? Imagine an image as being a sequence of characters xyz.
To repeat the image I need to use:
xyz,xyz,xyz,xyz
Unless the sides of the image (the x and the z) match, there's no way to repeat it without getting mismatches at the boundaries between repeats.
In other words, fix your image so that the sides match up.
No, you can't specify this.
What you should do is split your page in 3 zones: snake, left, right. Then use different repeating backgrounds for left and right.
You could also fix the snake image so it matches up.
You can use background-position xpos ypos to set the starting point of the background. Move it up to coincide with the picture of the snake.