Gideros Camera Move

Here is a tutorial to create a camera move on Gideros Box2d world. Camera will stick to jumbing ball up to world border, so called "smart" camera. Meaning it won't go outside defined world border.

So let's take Gideros Box2D basics project as start and modify it to create moving camera.

We will create world which is twice as bigger as screen. I set default screen resolution as 800x4800, meaning our created world will be 1600x960px big. I've simply googled and selected first wallpaper that came in this size and added to project, just to demonstrate that there is a movement.

So let's start by modifying init function. We add background to see that ball is actually moving:

--set up background to see it's moving
local bg = Bitmap.new(Texture.new("Background.jpg", true))
bg:setPosition(0,0)
self:addChild(bg)

Then define world boundaries and create box2d objects surrounding world and not screen:

--get screen dimensions
local screenW = application:getContentWidth()
local screenH = application:getContentHeight()
	
--set world dimensions 
--x2 for this example
self.worldW = screenW*2
self.worldH = screenH*2
	
--create bounding walls to surround world
--and not screen
self:wall(0,self.worldH/2,10,self.worldH/2*2)
self:wall(self.worldW/2,0,self.worldW,10)
self:wall(self.worldW,self.worldH/2,10,self.worldH)
self:wall(self.worldW/2,self.worldH,self.worldW,10)

And then add mouse event to screen, just to apply some random force to ball, so it would move:

--create and store refrence to ball
self.ball = self:ball(100, 100)
	
-- create a mouse joint on mouse down
function self:onMouseDown(event)
	if self:hitTestPoint(event.x, event.y) then
		local x, y = self.ball:getPosition()
		local xVect = (math.random(0,200)-100)*100
		local yVect = (math.random(0,200)-100)*100
		self.ball.body:applyForce(xVect, yVect, x, y)
	end
end

-- register for mouse events
self:addEventListener(Event.MOUSE_DOWN, self.onMouseDown, self)

And after that inside onEnterFrame function we simply get position of ball and calculate offset for screen and apply it to current scene and that's it

--get screen dimensions
local screenW = application:getContentWidth()
local screenH = application:getContentHeight()
	
--define offsets
local offsetX = 0;
local offsetY = 0;
	
--check if we are not too close to left or right wall
--so we won't go further that wall
if((self.worldW - self.ball:getX()) < screenW/2) then
	offsetX = -self.worldW + screenW 
elseif(self.ball:getX() >= screenW/2) then
	offsetX = -(self.ball:getX() - screenW/2)
end
	
--apply offset so scene
self:setX(offsetX)
	
--check if we are not too close to upper or bottom wall
--so we won't go further that wall
if((self.worldH - self.ball:getY()) < screenH/2) then
	offsetY = -self.worldH + screenH 
elseif(self.ball:getY()>= screenH/2) then
	offsetY = -(self.ball:getY() - screenH/2)
end
	
--apply offset so scene
self:setY(offsetY)

As usually, here is a video demonstration of this example:

and of course sample Gideros project to download.