hello! introduction stuff CAMERAS ARE COOL
they work well with all sorts of 2d games [1], and people already know how to implement a basic camera
you only need two global variables, two object variables, and an understanding of subtraction
see? I just made an example with like four blocks
thing is
that’s only positioning
sure, zooming is not harder to implement, just multiply values and scale stuff but WHAT ABOUT ROTATION?
this is where things get tricky.
real quick have a fun poll
- With positioning
- With zooming
- With rotating
- None
this poll is anonymous by the way
just make a circle
circles are easy to make, you take your basic cos() and sin() functions with an extra variable to determine where we are drawing
and when we run we get
…okay don’t forget to offset it that is a good step
trail art aside, we already know how to draw a basic circle [2]
only thing, how do we implement it with positions??
offsetting
if we look at a line rotating, and mark points, we can see that bigger and bigger circles can resolve this
the same can apply for the y axis too
buuut now we have a problem
we can easily determine a radius for any point ON either axis
but things get tricky if it’s NOT
sure, we can use good ol’ pythagoream theorem to get the radius, but what about knowing WHERE to place it? [3]
[4]
circles and circles
what if I told you
we use cos() and sin()
TWICE
wow so revolutionary
what’s nice about this method is that both circles rotate, accounting for the X and Y position of the dot [5]
what is this math wise though?
(cos(r) * 2 + cos(r + 90) * 4, sin(r) * 2 + sin(r + 90) * 4)
ok lets break this down
we’re defining a point here,
cos(r) and sin(r) account for the first circle, while * 2 is the dot’s X position
+ cos(r + 90) and + sin(r + 90) account for the second circle, rotating by 90 degrees so it points upwards (also * 4 for the Y position of the dot)
adding both together, we get the final position
now we have:
(r is camera rotation, x and cx are the object X and camera X positions, y and cy are the object Y and camera Y positions)
(cos(r) * (x - cx) + cos(r + 90) * (y - cy),
sin(r) * (x - cx) + sin(r + 90) * (y - cy))
zooming!!
obviously, rotations is enough for most games, but zooming is also great as well
it’s not hard to implement actually, just multiply the x - cx and y - cy part by the camera’s zoom
(z is the camera’s zoom)
(cos(r) * ((x - cx) * z) + cos(r + 90) * (y - cy),
sin(r) * ((x - cx * z)) + sin(r + 90) * (y - cy))
everything here was taught to me by myself! if there’s any corrections you would suggest or need further explanation on something please do tell me!
regular feedback is welcome too!