Simple 2D top-down camera

I’m currently working on a project that is using 2D top-down view and draws everything into one grid. What I need now is a way to move around this “map”. After searching for solution I found only tutorials for ofEasyCam which is not what I need. I’ve also tried using ofTranslate to move the view but for some to me unknown reason whenever I move the view so left-top most corner of my grid goes out of window, everything dissapears.
I’m in a bit of hurry so I would be really grateful for fast answers.
Thank you.

You can use an ofCamera camera, which is a basic camera in OF.

Asuming your map is in (x,y,0) coordiates, call camera.setPosition(ofPoint(0,0,-20)) for example, to place the camera on top of the “map”, and call camera.lookAt(camera.getPosition + ofVec3f(0,0,-1), ofVec3f(0,1,0)) to look vertically down on the “map”

Then you can move around using camera.dolly(), camera.truck(), camera.boom(), or if its more convenient, camera.move(x,y,0) methods.

Thanks, that’s exactly what I’m looking for. However I have no idea how to use ofCamera. There are no tutorial for it anywhere. Could you please write a really simple code that uses this camera? Something like drawing a rectangle into the middle of the screen and being able to move the view around with arrow keys?

hey Try this addon I made

try the example. is super easy to use.
all the best!

Wow thanks that’s exactly what I was looking for.
I have few questions though:

  1. is there any documentation available?
  2. how can I prevent it crashing the app when I move mouse outside of the window?
  3. how can I make it easily follow an object?
  4. is there some easy way to get canvas mouse x and y and not the window mouse x and y?
    Thanks a lot!!

EDIT: It also crashes when I resize the window…
EDIT2: Is there a way to tell if object is in camera view or not?

Hi @Maros_Betko,
1.- I’m afraid the only documentation is the one available inline (commented in the code itself and by looking at the code.).
2.- I have never had a crash with it and I use it a lot. Which OS and OF versions are you using?
3.-Yes, there’s a setTranslation() method. just pass it the coordinates that you want (of the thing that you want it to follow. be aware of using the screenToWorld method if you want it to follow something on screen space, otherwise, on world space you don’t need to transform coordinate spaces, as what setTranslation takes in are world space coordinates.

4.-yes, there are a screenToWorld and worldToScreen functions, that are quite handy.

Also there’s a kind of experimental function there, called setOverrideMouse(). call it passing true as the parameter and it will override ALL of the of mouse event’s so these are in world space and not screen space, these are already in the world space so you dont need to worry about transforming when you try to hit or grab anything. It is experimental as it kind of hijacks the mouseevents and modifies them. I haven’t had any problems with it but it might, that’s why it is experimental. It will work incorrectly with anything drawn outside the begin() and end(). So, for example if you want to use an ofxGui object, you will have to place it’s draw function between begin and end, and not outside.

To check if an object is in camera view, just pass it’s coordinates to the cameras worldToScreen method and check if it’s result is inside screen.


Hey I just updated the documentation. check the readme file in github

Thanks, everything works as it should. Also the reason why it’s crashing for me is that I am using mouse X and mouse Y every update event and it fails when I resize the window.
I just have one more question. Is it possible to get worldToScreen coordinates one at a time? Because when I want to check if the targeted object is in view using ofVec3f and comparing it’s x and y coordinates to view borders it is really slow when I have more than 10k objects in one canvas.
Well I guess there would be some other optimization for my problem but instead of ofVe3f getting only 2 floats that I can immediately compare would help a lot.

I dont see any reason for the app to crash because of calling mouse on the update. Did you check the github issues?

As for your question,
no, there’s no implementation for getting separate coordinates for screenToWorld.
Although, you should look at the that functions code and re implement as you need. Anyways 10k objects is a lot.
You might consider doing such on the GPU. There are some examples in OF for using the GPU in such way.