I need a way to convert screen coordinates obtained from mouse clicks to world coordinates in my 2D game.
To create a zoom effect controlled by the user, before drawing a model I will scale all of it's points by a world scale value.
The screen origin (0,0) is at the top left corner while the world has it's center (0,0) at the center of the screen (width/2, height/2).
I need a function to convert the coords obtained by mouse clicks (screen coords) to the corresponding scaled-world coordinates, so that I can determine what world element is clicked by the user in this scaled world.
Any of my approaches worked as required and unfortunately none of the found solutions where aplicable to my case.
This is a very simple example JS Bin:
- Use the mouse wheel to zoom in/out
- Click on the screen to set a point