Camera Zoom

Ive been trying to implement a camera that zooms in on my game. Im having trouble though after the camera zooms in… I have a drag feature on the game where you drag the objects around on the screen, when the camera zooms in this movement gets screwed up… cant figure out why… main.lua code below

[code]
– The blue dot on the screen is a zoom button
– The red square is the object
– the white circles are vertex that you can drag the object to, supposed to be able to “drop” the letter on the vertex, and it will snap
– to it, not working for some reason? If this were working, the camera would zoom into the location where the object was dropped… via
– changing the reference point of the camera group

–Main problem… when the camera zooms in… the drag movement for the object messes up? How can I fix this?
cameraGroup = display.newGroup()
gameGroup = display.newGroup()
local zoom = false

–functions
local touch
local objectCollision
local physics = require(“physics”)

physics.start()
physics.setGravity( 0, 0 )
physics.setDrawMode( “hybrid” )
local newX – supposed to be popupated when the object collides with one of the vertexes… not working right now?
local newY – supposed to be popupated when the object collides with one of the vertexes… not working right now?
local object = display.newRect(0, 0, 25, 25)
object:setFillColor(255, 0, 0)
object.x = 210
object.y = 260
object.xScale = .9
object.yScale = .9
physics.addBody( object,{isSensor = true} )
object.collision = objectCollision
object:addEventListener( “collision”, object )
cameraGroup:insert(object)
local vertex = {}
local count = 1
for i = 1, 3 do
for j = 1, 3 do

vertex[count] = display.newCircle( 0, 0, 10)
vertex[count].x = (j*120) - 45
vertex[count].y = (i*80) - 15
physics.addBody( vertex[count], { isSensor = true } )
cameraGroup:insert(vertex[count])
count = count + 1

end
end
objectCollision = function(self, event)
if event.phase == “began” then
self.xScale = .75
self.yScale = .75
newX = event.other.x
newY = event.other.y
print(newX)
end
end

touch = function(event)

local phase = event.phase
if “began” == phase then
object = event.target
object:toFront()
print(object.x …“objectx”)
print(object.y …“objecty”)
print(event.x …“eventX”)
print(event.y …“eventY”)
– if zoom == false then
– gameGroup:insert(object)
– end
if zoom == false then
cameraGroup:insert(object)
end
display.getCurrentStage():setFocus( object )
object.isFocus = true
newX = object.xOrigin
newY = object.yOrigin
object.x0 = event.x - object.x
object.y0 = event.y - object.y
end

if object.isFocus then
if “moved” == phase then

if zoom == false then
object.x = event.x - object.x0
object.y = event.y - object.y0
end

if zoom == true then – this was my attempt to fix problem… doesnt work
object.x = event.x - object.x0
object.y = event.y - object.y0
end
end
if “ended” == phase then
object.x = newX
object.y = newY

object.xScale = .75
object.yScale = .75
cameraGroup:insert(object)

display.getCurrentStage():setFocus( nil )
object.isFocus = false
end
end
end

local function onCameraTouch(event)
if event.phase == “began” then

zoom = true

if newX <= 135 then
if newY <= 75 then
cameraGroup:setReferencePoint(display.TopLeftReferencePoint)
elseif newY > 75 and newY < 165 then
cameraGroup:setReferencePoint(display.CenterLeftReferencePoint)
elseif newY >= 165 then
cameraGroup:setReferencePoint(display.BottomLeftReferencePoint)
end
end

if newX > 135 and newY < 285 then
if newY <= 75 then
cameraGroup:setReferencePoint(display.TopCenterReferencePoint)
elseif newY > 75 and newY < 165 then
cameraGroup:setReferencePoint(display.CenterReferencePoint)
elseif newY >= 165 then
cameraGroup:setReferencePoint(display.BottomCenterReferencePoint)
end
end

if newX >= 285 then
if newY <= 75 then
cameraGroup:setReferencePoint(display.TopRightReferencePoint)
elseif newY > 75 and newY < 165 then
cameraGroup:setReferencePoint(display.CenterRightReferencePoint)
elseif newY >= 165 then
cameraGroup:setReferencePoint(display.BottomRightReferencePoint)
end
end
timer.performWithDelay(12, function()cameraGroup.xScale = cameraGroup.xScale + .01;
cameraGroup.yScale = cameraGroup.yScale + .01 end, 50)

end
end

local btnCamera = display.newCircle( 500, 200, 10 )
btnCamera:setFillColor(0,0,255)
btnCamera.x = 240
btnCamera.y = 300
gameGroup:insert(btnCamera)
btnCamera:addEventListener(“touch”, onCameraTouch)

local cameraDrag = display.newRoundedRect(0, 0, 420, 240, 2)
cameraDrag.isVisible = false
cameraDrag.isHitTestable = true

local function dragCamera(event) – I was also hoping to be able to move the camera around, not sure how to limit its movement though.
local phase = event.phase
if zoom == true then
if “began” == phase then
cameraGroup:setReferencePoint(display.CenterReferencePoint)
display.getCurrentStage():setFocus( cameraDrag )
cameraDrag.isFocus = true
cameraDrag.x0 = event.x - cameraDrag.x
cameraDrag.y0 = event.y - cameraDrag.y
end

if cameraDrag.isFocus then
if “moved” == phase then
–if cameraGroup.x > 0 and cameraGroup.x < 420 and cameraGroup.y > 0 and cameraGroup.y < 240 then – this doesnt work
cameraGroup.x = event.x - cameraDrag.x0
cameraGroup.y = event.y - cameraDrag.y0
–end
end
if “ended” == phase then
display.getCurrentStage():setFocus( nil )
cameraDrag.isFocus = false
end
end
end
end

cameraDrag:addEventListener(“touch”, dragCamera)
object:addEventListener(“touch”, touch)
[/code] [import]uid: 28912 topic_id: 13212 reply_id: 313212[/import]

my first observation was that you are not adding any collision listener to vertex or object.

let me confirm the result you actually want.
you want to drag the object(red square) on to any of the vertex ( white circle) and the object snaps in to the vertex. once this happens you want the camera to be zoomed in to that vertex. right ? [import]uid: 71210 topic_id: 13212 reply_id: 48511[/import]

yes, that is part of what I want… I actually have that part of the code working in my real project… I just copied this here… trying to simplify the code… and couldnt figure out what was wrong with the “snap” part of the code for the life of me…

But primarily what I am seeking… and if you run this is the simulator you will see what I mean… if you press the blue dot (the camera zoom btn) and then try to move the object to one of the vertex points… you will notice the movement is way off, like the movement is being calculated wrong. I believe this has something to do with the event.x and event.y values being changed for some reason when the camera is zoomed in. [import]uid: 28912 topic_id: 13212 reply_id: 48515[/import]

Just a quick edit… the reason the snap was not working was because the objects collision function was defined below the object… Here is the revised code

[code]
– The blue dot on the screen is a zoom button
– The red square is the object
– the white circles are vertex that you can drag the object to, supposed to be able to “drop” the letter on the vertex, and it will snap
– to it, not working for some reason? If this were working, the camera would zoom into the location where the object was dropped… via
– changing the reference point of the camera group

–Main problem… when the camera zooms in… the drag movement for the object messes up? How can I fix this?
cameraGroup = display.newGroup()
gameGroup = display.newGroup()
local zoom = false

–functions
local touch
local objectCollision
local physics = require(“physics”)

physics.start()
physics.setGravity( 0, 0 )
physics.setDrawMode( “hybrid” )
local newX – supposed to be popupated when the object collides with one of the vertexes… not working right now?
local newY – supposed to be popupated when the object collides with one of the vertexes… not working right now?

objectCollision = function(self, event)
–if event.phase == “began” then
self.xScale = .75
self.yScale = .75
newX = event.other.x
newY = event.other.y
print(newX)
–end
end
local object = display.newRect(0, 0, 25, 25)
object:setFillColor(255, 0, 0)
object.x = 210
object.y = 260
object.xScale = .9
object.yScale = .9
physics.addBody( object,{isSensor = true} )
object.collision = objectCollision
object:addEventListener( “collision”, object )
cameraGroup:insert(object)
local vertex = {}
local count = 1
for i = 1, 3 do
for j = 1, 3 do

vertex[count] = display.newCircle( 0, 0, 10)
vertex[count].x = (j*120) - 45
vertex[count].y = (i*80) - 15
physics.addBody( vertex[count], { isSensor = true } )
cameraGroup:insert(vertex[count])
count = count + 1

end
end

touch = function(event)

local phase = event.phase
if “began” == phase then
object = event.target
object:toFront()
print(object.x …“objectx”)
print(object.y …“objecty”)
print(event.x …“eventX”)
print(event.y …“eventY”)
– if zoom == false then
– gameGroup:insert(object)
– end
if zoom == false then
cameraGroup:insert(object)
end
display.getCurrentStage():setFocus( object )
object.isFocus = true
newX = object.xOrigin
newY = object.yOrigin
object.x0 = event.x - object.x
object.y0 = event.y - object.y
end

if object.isFocus then
if “moved” == phase then

if zoom == false then
object.x = event.x - object.x0
object.y = event.y - object.y0
end

if zoom == true then – this was my attempt to fix problem… doesnt work
object.x = event.x - object.x0
object.y = event.y - object.y0
end
end
if “ended” == phase then
object.x = newX
object.y = newY

object.xScale = .75
object.yScale = .75
cameraGroup:insert(object)

display.getCurrentStage():setFocus( nil )
object.isFocus = false
end
end
end

local function onCameraTouch(event)
if event.phase == “began” then

zoom = true

if newX <= 135 then
if newY <= 75 then
cameraGroup:setReferencePoint(display.TopLeftReferencePoint)
elseif newY > 75 and newY < 165 then
cameraGroup:setReferencePoint(display.CenterLeftReferencePoint)
elseif newY >= 165 then
cameraGroup:setReferencePoint(display.BottomLeftReferencePoint)
end
end

if newX > 135 and newY < 285 then
if newY <= 75 then
cameraGroup:setReferencePoint(display.TopCenterReferencePoint)
elseif newY > 75 and newY < 165 then
cameraGroup:setReferencePoint(display.CenterReferencePoint)
elseif newY >= 165 then
cameraGroup:setReferencePoint(display.BottomCenterReferencePoint)
end
end

if newX >= 285 then
if newY <= 75 then
cameraGroup:setReferencePoint(display.TopRightReferencePoint)
elseif newY > 75 and newY < 165 then
cameraGroup:setReferencePoint(display.CenterRightReferencePoint)
elseif newY >= 165 then
cameraGroup:setReferencePoint(display.BottomRightReferencePoint)
end
end
timer.performWithDelay(12, function()cameraGroup.xScale = cameraGroup.xScale + .01;
cameraGroup.yScale = cameraGroup.yScale + .01 end, 50)

end
end

local btnCamera = display.newCircle( 500, 200, 10 )
btnCamera:setFillColor(0,0,255)
btnCamera.x = 240
btnCamera.y = 300
gameGroup:insert(btnCamera)
btnCamera:addEventListener(“touch”, onCameraTouch)

local cameraDrag = display.newRoundedRect(0, 0, 420, 240, 2)
cameraDrag.isVisible = false
cameraDrag.isHitTestable = true

local function dragCamera(event) – I was also hoping to be able to move the camera around, not sure how to limit its movement though.
local phase = event.phase
if zoom == true then
if “began” == phase then
cameraGroup:setReferencePoint(display.CenterReferencePoint)
display.getCurrentStage():setFocus( cameraDrag )
cameraDrag.isFocus = true
cameraDrag.x0 = event.x - cameraDrag.x
cameraDrag.y0 = event.y - cameraDrag.y
end

if cameraDrag.isFocus then
if “moved” == phase then
–if cameraGroup.x > 0 and cameraGroup.x < 420 and cameraGroup.y > 0 and cameraGroup.y < 240 then – this doesnt work
cameraGroup.x = event.x - cameraDrag.x0
cameraGroup.y = event.y - cameraDrag.y0
–end
end
if “ended” == phase then
display.getCurrentStage():setFocus( nil )
cameraDrag.isFocus = false
end
end
end
end

cameraDrag:addEventListener(“touch”, dragCamera)
object:addEventListener(“touch”, touch)
[/code] [import]uid: 28912 topic_id: 13212 reply_id: 48517[/import]

I tried to simplify your code. am getting the same issue as you told… the object is running away from mouse when the camera is zoomed… let me see whats happening…
this is what I have so far
[lua]cameraGroup = display.newGroup()
gameGroup = display.newGroup()

– to store X and Y position of vertex on collision
local snapX
local snapY
–functions
local touch
local onCameraTouch
local objectCollision

local physics = require(“physics”)
physics.start()
physics.setGravity( 0, 0 )
physics.setDrawMode( “hybrid” )

local newX – supposed to be popupated when the object collides with one of the vertexes… not working right now?
local newY – supposed to be popupated when the object collides with one of the vertexes… not working right now?

local vertex = {}
local count = 1
for i = 1, 3 do
for j = 1, 3 do

vertex[count] = display.newCircle( 0, 0, 10)
vertex[count].x = (j*120) - 45
vertex[count].y = (i*80) - 15
physics.addBody( vertex[count], { isSensor = true } )
vertex[count]:addEventListener(“collision”,objectCollision)
cameraGroup:insert(vertex[count])
count = count + 1

end
end
local object = display.newRect(0, 0, 25, 25)
object:setFillColor(255, 0, 0)
object.x = 210
object.y = 260
object.xScale = .9
object.yScale = .9
physics.addBody( object,{isSensor = true} )
cameraGroup:insert(object)

local function objectDrag(event)
local phase = event.phase
if “began” == phase then
object = event.target
object:toFront()
display.getCurrentStage():setFocus( object )
object.isFocus = true
object.x0 = event.x - object.x
object.y0 = event.y - object.y
end

if object.isFocus then
if “moved” == phase then
object.x = event.x - object.x0
object.y = event.y - object.y0
end
if “ended” == phase then
display.getCurrentStage():setFocus( nil )
object.isFocus = false
object.x = snapX
object.y = snapY
onCameraTouch()
end
end
end

object:addEventListener(“touch”, objectDrag)

function objectCollision(event)
print(“collided”)
snapX = event.target.x
snapY = event.target.y
end

function onCameraTouch(event)
newX = snapX
newY =snapY

if newX <= 135 then
if newY <= 75 then
cameraGroup:setReferencePoint(display.TopLeftReferencePoint)
elseif newY > 75 and newY < 165 then
cameraGroup:setReferencePoint(display.CenterLeftReferencePoint)
elseif newY >= 165 then
cameraGroup:setReferencePoint(display.BottomLeftReferencePoint)
end
end

if newX > 135 and newY < 285 then
if newY <= 75 then
cameraGroup:setReferencePoint(display.TopCenterReferencePoint)
elseif newY > 75 and newY < 165 then
cameraGroup:setReferencePoint(display.CenterReferencePoint)
elseif newY >= 165 then
cameraGroup:setReferencePoint(display.BottomCenterReferencePoint)
end
end

if newX >= 285 then
if newY <= 75 then
cameraGroup:setReferencePoint(display.TopRightReferencePoint)
elseif newY > 75 and newY < 165 then
cameraGroup:setReferencePoint(display.CenterRightReferencePoint)
elseif newY >= 165 then
cameraGroup:setReferencePoint(display.BottomRightReferencePoint)
end
end

timer.performWithDelay(12, function()cameraGroup.xScale = cameraGroup.xScale + .01;
cameraGroup.yScale = cameraGroup.yScale + .01 end, 50)
end
[/lua] [import]uid: 71210 topic_id: 13212 reply_id: 48518[/import]

yeah I am stumped… The only idea I have is I wonder if changing the reference point of the display group is messing with the movement? [import]uid: 28912 topic_id: 13212 reply_id: 48521[/import]

I think this happens coz X and Y of object is relative to cameraGroup.
can you try removing [lua]cameraGroup:insert(object)[/lua] from your code and see how it works ? [import]uid: 71210 topic_id: 13212 reply_id: 48522[/import]

I went thru and took all the cameraGroup:insert(object) parts out of the code… doesnt look like it worked. Ill have to look at it more tomorrow. [import]uid: 28912 topic_id: 13212 reply_id: 48523[/import]

It works fine for me… just check the below code.
[lua]cameraGroup = display.newGroup()
gameGroup = display.newGroup()

local snapX
local snapY

–functions
local touch
local onCameraTouch
local physics = require(“physics”)
physics.start()
physics.setGravity( 0, 0 )
–pysics.setDrawMode( “hybrid” )

local function objectCollision(event)
print(“collided”)
snapX = event.target.x
snapY = event.target.y
end

local vertex = {}
local count = 1
for i = 1, 3 do
for j = 1, 3 do

vertex[count] = display.newCircle( 0, 0, 10)
vertex[count].x = (j*120) - 45
vertex[count].y = (i*80) - 15
physics.addBody( vertex[count], { isSensor = true } )
vertex[count]:addEventListener(“collision”,objectCollision)
cameraGroup:insert(vertex[count])
count = count + 1

end
end
local object = display.newRect(0, 0, 25, 25)
object:setFillColor(255, 0, 0)
object.x = 210
object.y = 260
physics.addBody( object,{isSensor = true} )
–cameraGroup:insert(object)

– to store X and Y position of vertex on collision
snapX = object.x
snapY = object.y
local function objectDrag(event)
local phase = event.phase
if “began” == phase then
object = event.target
object:toFront()
display.getCurrentStage():setFocus( object )
object.isFocus = true
object.x0 = event.x - object.x
object.y0 = event.y - object.y
end

if object.isFocus then
if “moved” == phase then
object.xOrigin = event.x - object.x0
object.yOrigin = event.y - object.y0
end
if “ended” == phase then
display.getCurrentStage():setFocus( nil )
object.isFocus = false
object.x = snapX
object.y = snapY
onCameraTouch()
end
end
end

object:addEventListener(“touch”, objectDrag)

function onCameraTouch(event)
local newX = snapX
local newY =snapY

if newX <= 135 then
if newY <= 75 then
cameraGroup:setReferencePoint(display.TopLeftReferencePoint)
elseif newY > 75 and newY < 165 then
cameraGroup:setReferencePoint(display.CenterLeftReferencePoint)
elseif newY >= 165 then
cameraGroup:setReferencePoint(display.BottomLeftReferencePoint)
end
end

if newX > 135 and newY < 285 then
if newY <= 75 then
cameraGroup:setReferencePoint(display.TopCenterReferencePoint)
elseif newY > 75 and newY < 165 then
cameraGroup:setReferencePoint(display.CenterReferencePoint)
elseif newY >= 165 then
cameraGroup:setReferencePoint(display.BottomCenterReferencePoint)
end
end

if newX >= 285 then
if newY <= 75 then
cameraGroup:setReferencePoint(display.TopRightReferencePoint)
elseif newY > 75 and newY < 165 then
cameraGroup:setReferencePoint(display.CenterRightReferencePoint)
elseif newY >= 165 then
cameraGroup:setReferencePoint(display.BottomRightReferencePoint)
end
end

timer.performWithDelay(12, function()cameraGroup.xScale = cameraGroup.xScale + .01;
cameraGroup.yScale = cameraGroup.yScale + .01 ; object.xScale = object.xScale + .01 end, 50)
end
[/lua] [import]uid: 71210 topic_id: 13212 reply_id: 48524[/import]

Sorry… I din’t notice your edited code… will try to work on that and see what the problem is… :slight_smile: [import]uid: 71210 topic_id: 13212 reply_id: 48525[/import]

I think I know why your code behaving bad
when you change xScale and yScale of cameraGroup the event.y and event.x of touch event is also getting multiplied. so just divide it with the scale factor to get correct.
see the code below
[lua]local cameraGroup = display.newGroup()

– to store zoom xscale and yscale
local dx,dy = 1,1

local vertex = display.newCircle( 140, 140, 30)
cameraGroup:insert(vertex)

local object = display.newRect(0, 0, 25, 25)
object.x = 210; object.y = 260
cameraGroup:insert(object)

local function dragItem(event)
local phase = event.phase
if “began” == phase then
display.getCurrentStage():setFocus( object )
object.isFocus = true
object.x0 = event.x/dx - object.x
object.y0 = event.y/dy - object.y
end
if object.isFocus then
if “moved” == phase then
object.x = event.x / dx - object.x0
object.y = event.y / dy - object.y0
end
if “ended” == phase then
display.getCurrentStage():setFocus( nil )
object.isFocus = false
end
end
end

object:addEventListener(“touch”, dragItem)

local function Zoom(event)
timer.performWithDelay(12, function()cameraGroup.xScale = cameraGroup.xScale + .01;
cameraGroup.yScale = cameraGroup.yScale + .01 ;
dx = cameraGroup.xScale + .01 ;
dy = cameraGroup.yScale + .01 ; end, 50)
end

local zoomBTN = display.newText( “Zoom”,50,400,nil,35 )
zoomBTN:addEventListener(“tap”, Zoom)[/lua] [import]uid: 71210 topic_id: 13212 reply_id: 48542[/import]

When zoomed in, is there a way to make the ‘camera’ follow the red square around? [import]uid: 14218 topic_id: 13212 reply_id: 48594[/import]

@spoggles the code posted above by HavocHare have that feature just put the above fix in that code and you will get the expected result. :slight_smile: [import]uid: 71210 topic_id: 13212 reply_id: 48604[/import]

Thanks that solution worked very well… Its so hard for me to conceptualize the idea of groups… and zooming them in… just couldnt come up with the solution… I have a nother question as well… involving the actual movement of the camera… and trying to limit that movement so you cant view areas outside of the “map”

–note there is a big white box when you load up this as main.lua… this just represents a hit box the user can touch to start dragging the camera.

[code]

– The next thing I cant seem to solve is how to move the camera around, while the screen is zoomed in. Ive made a green border around the
– edges of the screen, if you can imagine this is the map border… and we dont want the camera to be allowed to view outside of its bounds
– the code for this starts at around line 178… I have a white box drawn, which when the user drags on it, the camera will move… I thought
– I could make something like a viewport… and move that white box(aka the viewport) in the opposite direction the user moves the camera…
– and just have a physics boundary to where the white box wouldnt be allowed to pass through… in an attempt to limit the range
– of the camera… not sure if this will work though. Any ideas?

cameraGroup = display.newGroup()
gameGroup = display.newGroup()
local zoom = false – determines if camera is zoomed or not zoomed

–functions
local touch
local objectCollision
local physics = require(“physics”)

physics.start()
physics.setGravity( 0, 0 )
physics.setDrawMode( “hybrid” )
local dX = 1-- holds scale value of camera group
local dY = 1
local newX
local newY

objectCollision = function(self, event)
if event.phase == “began” then
self.xScale = .75
self.yScale = .75
newX = event.other.x
newY = event.other.y
end
end
local object = display.newRect(0, 0, 25, 25)
object:setFillColor(255, 0, 0)
object.x = 210
object.y = 260
object.xScale = .9
object.yScale = .9
physics.addBody( object,{isSensor = true} )
object.collision = objectCollision
object:addEventListener( “collision”, object )
gameGroup:insert(object)
local topBorder = display.newLine (0, 0, 480,0 )
topBorder:setColor(0, 255, 0, 255)
topBorder.width = 4
cameraGroup:insert(topBorder)

local bottomBorder = display.newLine (0, 320, 480,320 )
bottomBorder:setColor(0, 255, 0, 255)
bottomBorder.width = 4
cameraGroup:insert(bottomBorder)

local leftBorder = display.newLine (0, 0, 0,320 )
leftBorder:setColor(0, 255, 0, 255)
leftBorder.width = 4
cameraGroup:insert(leftBorder)

local rightBorder = display.newLine (480, 0, 480,320 )
rightBorder:setColor(0, 255, 0, 255)
rightBorder.width = 4
cameraGroup:insert(rightBorder)

local vertex = {}
local count = 1
for i = 1, 3 do
for j = 1, 3 do

vertex[count] = display.newCircle( 0, 0, 10)
vertex[count].x = (j*120) - 45
vertex[count].y = (i*80) - 15
physics.addBody( vertex[count], { isSensor = true } )
cameraGroup:insert(vertex[count])
count = count + 1

end
end
touch = function(event)

local phase = event.phase
if “began” == phase then
object = event.target
object:toFront()
cameraGroup:insert(object)
display.getCurrentStage():setFocus( object )
object.isFocus = true
object.x0 = event.x / dX - object.x
object.y0 = event.y / dY - object.y
end

if object.isFocus then
if “moved” == phase then
object.x = event.x / dX - object.x0
object.y = event.y / dY - object.y0
end

if “ended” == phase then
object.x = newX
object.y = newY
object.xScale = .75
object.yScale = .75
cameraGroup:insert(object)
display.getCurrentStage():setFocus( nil )
object.isFocus = false
end
end
end

local function onCameraTouch(event)
if event.phase == “began” then

zoom = true

if newX <= 135 then
if newY <= 75 then
cameraGroup:setReferencePoint(display.TopLeftReferencePoint)
elseif newY > 75 and newY < 165 then
cameraGroup:setReferencePoint(display.CenterLeftReferencePoint)
elseif newY >= 165 then
cameraGroup:setReferencePoint(display.BottomLeftReferencePoint)
end
end

if newX > 135 and newY < 285 then
if newY <= 75 then
cameraGroup:setReferencePoint(display.TopCenterReferencePoint)
elseif newY > 75 and newY < 165 then
cameraGroup:setReferencePoint(display.CenterReferencePoint)
elseif newY >= 165 then
cameraGroup:setReferencePoint(display.BottomCenterReferencePoint)
end
end

if newX >= 285 then
if newY <= 75 then
cameraGroup:setReferencePoint(display.TopRightReferencePoint)
elseif newY > 75 and newY < 165 then
cameraGroup:setReferencePoint(display.CenterRightReferencePoint)
elseif newY >= 165 then
cameraGroup:setReferencePoint(display.BottomRightReferencePoint)
end
end
timer.performWithDelay(12, function()cameraGroup.xScale = cameraGroup.xScale + .01;
cameraGroup.yScale = cameraGroup.yScale + .01;
dX = cameraGroup.xScale + .01;
dY = cameraGroup.yScale + .01;
end, 50)

end
end

local btnCamera = display.newCircle( 500, 200, 10 )
btnCamera:setFillColor(0,0,255)
btnCamera.x = 240
btnCamera.y = 300
gameGroup:insert(btnCamera)
btnCamera:addEventListener(“touch”, onCameraTouch)

local cameraDrag = display.newRoundedRect(0, 0, 420, 240, 2)
cameraDrag.isVisible = true
cameraDrag.isHitTestable = true

local function dragCamera(event) – I was also hoping to be able to move the camera around, not sure how to limit its movement though.
local phase = event.phase
if zoom == true then
if “began” == phase then
cameraGroup:setReferencePoint(display.CenterReferencePoint)
display.getCurrentStage():setFocus( cameraDrag )
cameraDrag.isFocus = true
cameraDrag.x1 = -event.x / dX - cameraDrag.x – added code in attempt to get camera to move when zoomed
cameraDrag.y1 = -event.y / dY - cameraDrag.y
cameraDrag.x0 = event.x / dX - cameraDrag.x
cameraDrag.y0 = event.y / dY - cameraDrag.y
end

if cameraDrag.isFocus then
if “moved” == phase then
cameraDrag.x = -event.x / dX - cameraDrag.x1 – added code in attempt to get camera to move when zoomed
cameraDrag.y = -event.y / dY - cameraDrag.y1
cameraGroup.x = event.x / dX - cameraDrag.x0
cameraGroup.y = event.y / dY - cameraDrag.y0

end
if “ended” == phase then
display.getCurrentStage():setFocus( nil )
cameraDrag.isFocus = false
end
end
end
end

cameraDrag:addEventListener(“touch”, dragCamera)
object:addEventListener(“touch”, touch)
[/code] [import]uid: 28912 topic_id: 13212 reply_id: 48701[/import]

Hi HavocHare
good to know that it worked.
for your above question my understanding of your need is as below

  1. the green border you have drawn is ur game boundary.
  2. the white box is view port
  3. when the viewport is moved you get a camera movement effect

these are my initial thoughts

  1. don’t add the borders into cameraGroup
  2. inside dragCamera function set limit for x and y

check the below code and let me if this is what you are expecting.
*the camera movement is not smooth we can tweak it later.

[lua]-- The next thing I cant seem to solve is how to move the camera around, while the screen is zoomed in. Ive made a green border around the
– edges of the screen, if you can imagine this is the map border… and we dont want the camera to be allowed to view outside of its bounds
– the code for this starts at around line 178… I have a white box drawn, which when the user drags on it, the camera will move… I thought
– I could make something like a viewport… and move that white box(aka the viewport) in the opposite direction the user moves the camera…
– and just have a physics boundary to where the white box wouldnt be allowed to pass through… in an attempt to limit the range
– of the camera… not sure if this will work though. Any ideas?

cameraGroup = display.newGroup()
gameGroup = display.newGroup()

local zoom = false – determines if camera is zoomed or not zoomed

–functions
local touch
local objectCollision

local physics = require(“physics”)

physics.start()
physics.setGravity( 0, 0 )
physics.setDrawMode( “hybrid” )

local dX = 1-- holds scale value of camera group
local dY = 1
local newX
local newY

objectCollision = function(self, event)
if event.phase == “began” then
self.xScale = .75
self.yScale = .75
newX = event.other.x
newY = event.other.y
end
end

local object = display.newRect(0, 0, 25, 25)
object:setFillColor(255, 0, 0)
object.x = 210
object.y = 260
object.xScale = .9
object.yScale = .9
physics.addBody( object,{isSensor = true} )
object.collision = objectCollision
object:addEventListener( “collision”, object )
gameGroup:insert(object)

local topBorder = display.newLine (0, 0, 480,0 )
topBorder:setColor(0, 255, 0, 255)
topBorder.width = 4
–cameraGroup:insert(topBorder)

local bottomBorder = display.newLine (0, 320, 480,320 )
bottomBorder:setColor(0, 255, 0, 255)
bottomBorder.width = 4
–cameraGroup:insert(bottomBorder)

local leftBorder = display.newLine (0, 0, 0,320 )
leftBorder:setColor(0, 255, 0, 255)
leftBorder.width = 4
–cameraGroup:insert(leftBorder)

local rightBorder = display.newLine (480, 0, 480,320 )
rightBorder:setColor(0, 255, 0, 255)
rightBorder.width = 4
–cameraGroup:insert(rightBorder)

local vertex = {}
local count = 1
for i = 1, 3 do
for j = 1, 3 do

vertex[count] = display.newCircle( 0, 0, 10)
vertex[count].x = (j*120) - 45
vertex[count].y = (i*80) - 15
physics.addBody( vertex[count], { isSensor = true } )
cameraGroup:insert(vertex[count])
count = count + 1

end
end

touch = function(event)

local phase = event.phase
if “began” == phase then
object = event.target
object:toFront()
cameraGroup:insert(object)
display.getCurrentStage():setFocus( object )
object.isFocus = true
object.x0 = event.x / dX - object.x
object.y0 = event.y / dY - object.y
end

if object.isFocus then
if “moved” == phase then
object.x = event.x / dX - object.x0
object.y = event.y / dY - object.y0
end

if “ended” == phase then
object.x = newX
object.y = newY
object.xScale = .75
object.yScale = .75
cameraGroup:insert(object)
display.getCurrentStage():setFocus( nil )
object.isFocus = false
end
end
end

local function onCameraTouch(event)
if event.phase == “began” then

zoom = true

if newX <= 135 then
if newY <= 75 then
cameraGroup:setReferencePoint(display.TopLeftReferencePoint)
elseif newY > 75 and newY < 165 then
cameraGroup:setReferencePoint(display.CenterLeftReferencePoint)
elseif newY >= 165 then
cameraGroup:setReferencePoint(display.BottomLeftReferencePoint)
end
end

if newX > 135 and newY < 285 then
if newY <= 75 then
cameraGroup:setReferencePoint(display.TopCenterReferencePoint)
elseif newY > 75 and newY < 165 then
cameraGroup:setReferencePoint(display.CenterReferencePoint)
elseif newY >= 165 then
cameraGroup:setReferencePoint(display.BottomCenterReferencePoint)
end
end

if newX >= 285 then
if newY <= 75 then
cameraGroup:setReferencePoint(display.TopRightReferencePoint)
elseif newY > 75 and newY < 165 then
cameraGroup:setReferencePoint(display.CenterRightReferencePoint)
elseif newY >= 165 then
cameraGroup:setReferencePoint(display.BottomRightReferencePoint)
end
end

timer.performWithDelay(12, function()cameraGroup.xScale = cameraGroup.xScale + .01;
cameraGroup.yScale = cameraGroup.yScale + .01;
dX = cameraGroup.xScale + .01;
dY = cameraGroup.yScale + .01;

end, 50)

end
end

local btnCamera = display.newCircle( 500, 200, 10 )
btnCamera:setFillColor(0,0,255)
btnCamera.x = 240
btnCamera.y = 300
gameGroup:insert(btnCamera)
btnCamera:addEventListener(“touch”, onCameraTouch)

local cameraDrag = display.newRoundedRect(0, 0, 420, 240, 2)
cameraDrag.isVisible = true
cameraDrag.isHitTestable = true

local function dragCamera(event) – I was also hoping to be able to move the camera around, not sure how to limit its movement though.
local phase = event.phase
if zoom == true then
if “began” == phase then
cameraGroup:setReferencePoint(display.CenterReferencePoint)
display.getCurrentStage():setFocus( cameraDrag )
cameraDrag.isFocus = true
cameraDrag.x1 = -event.x / dX - cameraDrag.x – added code in attempt to get camera to move when zoomed
cameraDrag.y1 = -event.y / dY - cameraDrag.y
cameraDrag.x0 = event.x / dX - cameraDrag.x
cameraDrag.y0 = event.y / dY - cameraDrag.y
end

if cameraDrag.isFocus then
if “moved” == phase then
if (-event.x / dX - cameraDrag.x1) < 210 or (-event.x / dX - cameraDrag.x1) > 269 or (-event.y / dY - cameraDrag.y1) < 120 or (-event.y / dY - cameraDrag.y1) > 198 then
return true
end

cameraDrag.x = -event.x / dX - cameraDrag.x1 – added code in attempt to get camera to move when zoomed
cameraDrag.y = -event.y / dY - cameraDrag.y1
cameraGroup.x = event.x / dX - cameraDrag.x0
cameraGroup.y = event.y / dY - cameraDrag.y0
–used this below code to find the position of cameradrag
–print(“x=”…cameraDrag.x…" y="…cameraDrag.y)

end
if “ended” == phase then
display.getCurrentStage():setFocus( nil )
cameraDrag.isFocus = false
end
end
end
end

cameraDrag:addEventListener(“touch”, dragCamera)
object:addEventListener(“touch”, touch)[/lua] [import]uid: 71210 topic_id: 13212 reply_id: 48726[/import]

This camera stuff is driving me crazy. If I post a more complete picture of my project somewhere, I wonder if you could take a look at it technowand? [import]uid: 28912 topic_id: 13212 reply_id: 50783[/import]

sure… you can send it to my mail also. renjith@technowand.com [import]uid: 71210 topic_id: 13212 reply_id: 50801[/import]