Jump to content

Has any one got a 2D camera?


Recommended Posts



I'm looking for a camera that on mouse drag changes the cameras' position smoothly along the x and y axis, and on mouse scroll zooms in and out 


Is this something that already exists (or is close) or do I need to start looking into extending one of the existing cameras? 

Link to comment
Share on other sites

The closest camera I've seen is the one implemented here by one of our members: 


Though I'm still not 100% sure how it is implemented, the problem is that it requires mouse hover at the side of the screen like a traditional rts but I'm not sure this approach works on mobile, mouse drag for x and y would be ideal I think 

Link to comment
Share on other sites

I've reverse engineered enough to get zoom in and out on the z axis on mouse scroll

(though I've yet to make a mobile equivalent I'll tackle that when my app is slightly more fleshed out) 

basically use this polyfill to catch the event: http://snipplr.com/view/68762/ then modify the z position of your active camera 


still not sure on how to get x and y position movement on drag yet

Link to comment
Share on other sites

Attempted to rewrite the attachControl method through the prototype chain when I realised I'm using a minified version

of babylon those function names aren't going to what I expect them to be, bleh, I tried building a version of babylon the other day using the build tool provided and the build of babylon it gave me was over a megabyte 


I'm assuming that build tool is only concatenating? and I'll have to extend one of the camera before the minification process? 


I feel like I'm going the long way around with this approach is moving cameras via drag really not a common requirement? 


I guess the other approach is using hand.js's events and nullifying any events in the original camera though not sure how to calculate a offset to move by passed on a drag's start and end event..

Link to comment
Share on other sites

okay I've extended the free camera: 



I'm not sure why the mouse events are private members of the method this code could have been a lot shorter if I didn't have to override all of the methods the only real change is in mousemove

As a result the method is quite brittle so I wouldn't recommend this for anything important 


but basically initialise your free camera, pass it into this method and you should get a 2D camera which you can then call attachControl() on,

change the camera's angularSensibility prior to passing it and you can control the scroll speed, a lower value is a faster speed, though wouldn't take much code to inverse that if need be



example call:

var camera = Camera2D(new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 0, -20), scene))
Link to comment
Share on other sites

seems like I'm having some problems with prospective, things closer to the edge of the screen are getting viewed from an angle 


looking at the code it seems like I need a ORTHOGRAPHIC_CAMERA, so I've enabled that with camera.mode = 1 but now my z controls don't seem to be working


and my scene is tiny, like it's now in the distance, here's the pseudo code  

var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 0, 0), scene),camera.mode = 1;

why isn't my camera close to my scene any more? and how come controlling the z axis appears to make no difference? 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...