🎉 Celebrating 25 Years of GameDev.net! 🎉

Not many can claim 25 years on the Internet! Join us in celebrating this milestone. Learn more about our history, and thank you for being a part of our community!

How to position an object's X/Y properly when scaling for a zoom effect?

Started by
16 comments, last by SkipD 2 years, 5 months ago

So lets say i have an image, and i want to zoom it to give the illusion that its coming towards you or back sorta deal…..i know that the more you scale an image, the more it appears as if it's

X+Width is moving to the right and Y+Height is moving down.

Ive been trying to work this out but complications from a TBI make these kinds of things really hard for me.

Could someone please show me how to adjust the image's X, Y accordingly??

Thanks

Advertisement

I have two questions, if I may:

First, where is the origin of the image--that is, is the image positioned by its centre-point, or its bottom-left corner, or some other position besides?

And second, how do you want the image to appear to move: should it appear to move directly towards the player's position, or as though it might fly past the player's head, or along some other track?

MWAHAHAHAHAHAHA!!!

My Twitter Account: @EbornIan

Thaumaturge got it exactly correct. A “zoom effect” does not exist in a vacuum. Nearly all visual effects adjust multiple elements at once. Compound effects can have tremendous add-on effects. The anchor point for rotation may be different from the anchor point of a zoom, making an effect appear to spiral instead of rotate and shrink in place.

Changes to the size have add-ons to other spacial elements. Anchor points matter. If the anchor point is in the center then the outer edges all shrink. Anchor points in a corner can make a zoom appear to move an object. If the object is attached to something else, then it should have an anchor point relative to the parent object which may be anywhere. Consider a Christmas stocking hung on the mantelpiece, if you are scaling each object you must scale the mantelpiece, scale the sock, and move both, all at the same rate.

In graphic scripts it is common to nest elements to compensate. Each nested layer will have its own anchor point, motion, scale, transparency, and whatever effect you want. Sometimes the anchor point itself will animate, moving over time. You might have one effect level anchored in the center, another in the top-center, nested again inside a center anchor.

Skilled VFX artists make it look effortless, but it takes quite a lot to make it visually smooth.

@undefined @undefined

Thaumaturge said:

I have two questions, if I may:

First, where is the origin of the image--that is, is the image positioned by its centre-point, or its bottom-left corner, or some other position besides?

And second, how do you want the image to appear to move: should it appear to move directly towards the player's position, or as though it might fly past the player's head, or along some other track?

Wow this site i cant get working on mobile or desktop. I posted a whole reply but it just shows a quote and erases it all…

Wow whats with this website?? On destop it covers half this box and the post button so u cant post, and mobile it does the post above after deleting all i typed. Cant reply or quote ether.. Says undefined

I was saying my anchor point would be the center, and all images are just 2D with X/Y upper left corner. Its only on one object at a time, and the anchor point could be changed every iteration with the command that scales. Its just a simplistic thing not meant to be perfect or anything. I almost figured out how to do this zooming but my head is so unclear…..i was working with the difference like for example, subtracting from X the difference from the old X+width and the new one or something i dunno why i cant get my mind to work on this….i know theres a way ive done similar things before but…. This anchor point seems an interesing idea tho not sure how to work with it

Ah, I see!

In that case, I think that you were pretty close to being correct in your first post: if I'm not much mistaken, if your anchor-point is at the centre of the image, then--relative to the image--the position of the top- and right-hand- sides should be as follows:

x_right = (image_width / 2) * scale
y_top = (image_height / 2) * scale

You then simply add the current position of the anchor-point to those values (and the similar ones for the left and bottom) to find the relevant positions on the screen, I believe.

As to the movement of the anchor-point, if it's coming directly at the position of the viewer, then it should appear to not move at all. If it's moving “past” the viewer, then it should move along a straight line across the screen. (And move faster the closer it is to the viewer.)

MWAHAHAHAHAHAHA!!!

My Twitter Account: @EbornIan

@thaumaturge

Thanks soooo much! It was really giving me trouble.

Im not sure what u mean with adding the anchor point position.

I dont have a scale though….i think it such scales to an X and Y size so i dunno how to set scale that way

Like when i call the function to scale it takes source width,height destination width,height

Sorry im extra confused today (health has not been good past few years) so im having trouble

SkipD said:
Sorry im extra confused today (health has not been good past few years) so im having trouble

It's not a problem--and I'm sorry to read of your troubles!

SkipD said:
Im not sure what u mean with adding the anchor point position.

Essentially, the formulae that I gave you, above, just scale an object “in place”--they don't account for the location of the object.

In order to get the actual position of, say, the right-hand side of the object, it's called for to account for that location--after all, the right-hand side of the object will be located at a different coordinate if the object is at a different location.

In this case, all that's called for, I believe, is to add that location to the value that's calculated using those formulae that I gave.

SkipD said:
Like when i call the function to scale it takes source width,height destination width,height

Ah, I see--you're doing things in a different manner to what I imagined, then! (Which is fair.)

Okay, in that case, do you want the scaling function to instantaneously change the size of the object, or do you intend to use those source- and destination- values to change the size of the object over time?

MWAHAHAHAHAHAHA!!!

My Twitter Account: @EbornIan

@thaumaturge

Yeah i want to make it appear like its moving, by repeatedly calling the function in a loop

The source x,y i believe stays the same as its asking for the original size and the destination is the width and height scale i want

Ah, I see, I believe.

So, I presume that you can't just set the image's width directly, otherwise your function would just do that--how do you set the size of the image, then?

(Or am I mistaken about which part of the process you're having trouble with?)

[edit]

Or is that you already have a function that scales the image, and you just want to know how to position the image…?

I'll confess that I'm now a little confused as to what it is that's proving troublesome for you… ^^;

MWAHAHAHAHAHAHA!!!

My Twitter Account: @EbornIan

This topic is closed to new replies.

Advertisement