Zoom in/out with the The Ultimate "config.lua"

Hi,

I changed my config.lua according to the latest tutorial by Rob Miracle to fit my needs.

Now, I want to use the Pinch Zoom XL code to zoom in and out of the screen. I changed the code, regarding the comments to prevent showing black area to the player and also, made a little change to let it work for all the group(just changed the image:touch to levelgroup:touch).

It worked perfectly when I stretched the image but now I want to prevent the user from seeing black bars and bleed areas but I can’t seem to find a way to modify the code to work this way.

It’s a bit long, sorry for that but I’m not sure how to fix my problem so here is the latest version for the Pinch Zoom XL:

[lua]local function calculateDelta( previousTouches, event )

local id,touch = next( previousTouches )
if event.id == id then
id,touch = next( previousTouches, id )
assert( id ~= event.id )
end

local dx = touch.x - event.x
local dy = touch.y - event.y
return dx, dy
end

local function calculateCenter( previousTouches, event )

local id,touch = next( previousTouches )
if event.id == id then
id,touch = next( previousTouches, id )
assert( id ~= event.id )
end

local cx = math.floor( ( touch.x + event.x ) * 0.5 )
local cy = math.floor( ( touch.y + event.y ) * 0.5 )
return cx, cy

end

function levelGroup:touch(event)
if (not touchActive) then
local phase = event.phase
local eventTime = event.time
local previousTouches = self.previousTouches

if not self.xScaleStart then
self.xScaleStart, self.yScaleStart = self.xScale, self.yScale
end

local numTotalTouches = 1
if previousTouches then
– add in total from previousTouches, subtract one if event is already in the array
numTotalTouches = numTotalTouches + self.numPreviousTouches
if previousTouches[event.id] then
numTotalTouches = numTotalTouches - 1
end
end

if “began” == phase then
– Very first “began” event
if not self.isFocus then
– Subsequent touch events will target button even if they are outside the contentBounds of button
display.getCurrentStage():setFocus( self )
self.isFocus = true

– Store initial position
self.x0 = event.x - self.x
self.y0 = event.y - self.y

previousTouches = {}
self.previousTouches = previousTouches
self.numPreviousTouches = 0
self.firstTouch = event

elseif not self.distance then
local dx,dy
local cx,cy

if previousTouches and numTotalTouches >= 2 then
dx,dy = calculateDelta( previousTouches, event )
cx,cy = calculateCenter( previousTouches, event )
end

– initialize to distance between two touches
if dx and dy then
local d = math.sqrt( dx*dx + dy*dy )
if d > 0 then
self.distance = d
self.xScaleOriginal = self.xScale
self.yScaleOriginal = self.yScale

self.x0 = cx - self.x
self.y0 = cy - self.y

end
end

end

if not previousTouches[event.id] then
self.numPreviousTouches = self.numPreviousTouches + 1
end
previousTouches[event.id] = event

elseif self.isFocus then
if “moved” == phase then
if self.distance then
local dx,dy
local cx,cy
if previousTouches and numTotalTouches == 2 then
dx,dy = calculateDelta( previousTouches, event )
cx,cy = calculateCenter( previousTouches, event )
end

if dx and dy then
local newDistance = math.sqrt( dx*dx + dy*dy )
local scale = newDistance / self.distance

if ( scale > 0 and self.xScaleOriginal * scale <= 1.5 and self.xScaleOriginal * scale >= 1) then
self.xScale = self.xScaleOriginal * scale
self.yScale = self.yScaleOriginal * scale

self.x = cx - ( self.x0 * scale )
if self.x > 0 then
self.x = 0
elseif (self.x + self.width * self.xScale) < display.contentWidth then
self.x = display.contentWidth - self.width * self.xScale
end

self.y = cy - ( self.y0 * scale )
if self.y > 0 then
self.y = 0
elseif (self.y + self.height * self.yScale) < display.contentHeight then
self.y = display.contentHeight - self.height * self.yScale
end
end
end
else
if event.id == self.firstTouch.id then
– don’t move unless this is the first touch id.
– Make object move (we subtract self.x0, self.y0 so that moves are
– relative to initial grab point, rather than object “snapping”).
self.x = event.x - self.x0
if self.x > 0 then
self.x = 0
elseif (self.x + self.width * self.xScale) < display.contentWidth then
self.x = display.contentWidth - self.width * self.xScale
end

self.y = event.y - self.y0
if self.y > 0 then
self.y = 0
print “ready”
elseif (self.y + self.height * self.yScale) < display.contentHeight then
self.y = display.contentHeight - self.height * self.yScale
end
end
end

if event.id == self.firstTouch.id then
self.firstTouch = event
end

if not previousTouches[event.id] then
self.numPreviousTouches = self.numPreviousTouches + 1
end
previousTouches[event.id] = event

elseif “ended” == phase or “cancelled” == phase then
if previousTouches[event.id] then
self.numPreviousTouches = self.numPreviousTouches - 1
previousTouches[event.id] = nil
end

if self.numPreviousTouches == 1 then
– must be at least 2 touches remaining to pinch/zoom
self.distance = nil
– reset initial position
local id,touch = next( previousTouches )
self.x0 = touch.x - self.x
self.y0 = touch.y - self.y
self.firstTouch = touch

elseif self.numPreviousTouches == 0 then
– previousTouches is empty so no more fingers are touching the screen
– Allow touch events to be sent normally to the objects they “hit”
display.getCurrentStage():setFocus( nil )
self.isFocus = false
self.distance = nil
self.xScaleOriginal = nil
self.yScaleOriginal = nil

– reset array
self.previousTouches = nil
self.numPreviousTouches = nil
end
end
end
end
return true
end[/lua] [import]uid: 191500 topic_id: 33713 reply_id: 333713[/import]

is the background part of the levelGroup? I’m not sure this can be prevented without putting in some logic on your pinch to say if the group becomes smaller than the width or height of the content area, top scaling it down.

 local curXscale = self.xScale  
 local curYscale = self.yScale  
 self.xScale = self.xScaleOriginal \* scale  
 self.yScale = self.yScaleOriginal \* scale  
  
 if self.xScale \* self.width \< display.contentWidth or self.yScale \* self.height \< display.contentHeight then  
 self.xScale = curXscale  
 self.yScale = curYscale  
 end  

or something similar. [import]uid: 199310 topic_id: 33713 reply_id: 134156[/import]

Yes, it is. Well, we abandoned the idea to limit the user to the safe area so now, I need a way to not let user see any black areas, when navigating the screen, left-right or top-bottom. What can I change in the code to achieve that? [import]uid: 191500 topic_id: 33713 reply_id: 134167[/import]

That code should do the trick (or something similar) since it won’t change the scale if the resulting image size becomes too small to show any black.
[import]uid: 199310 topic_id: 33713 reply_id: 134222[/import]

is the background part of the levelGroup? I’m not sure this can be prevented without putting in some logic on your pinch to say if the group becomes smaller than the width or height of the content area, top scaling it down.

 local curXscale = self.xScale  
 local curYscale = self.yScale  
 self.xScale = self.xScaleOriginal \* scale  
 self.yScale = self.yScaleOriginal \* scale  
  
 if self.xScale \* self.width \< display.contentWidth or self.yScale \* self.height \< display.contentHeight then  
 self.xScale = curXscale  
 self.yScale = curYscale  
 end  

or something similar. [import]uid: 199310 topic_id: 33713 reply_id: 134156[/import]

Yes, it is. Well, we abandoned the idea to limit the user to the safe area so now, I need a way to not let user see any black areas, when navigating the screen, left-right or top-bottom. What can I change in the code to achieve that? [import]uid: 191500 topic_id: 33713 reply_id: 134167[/import]

Sorry to reply that late but we gave up on the ultimate config because of some screen design differences.

I hope I’m getting your solution the right way, the above code already works for images that fit the screen.
Considering those, where should I put the limit for both zoom and sliding the screen?

I want to use the same background image, which is 1136x640, for both iPhone 4/4S and iPhone 5. In iPhone 5, the user will be able to see the whole background but in iPhone 4/4S, there will be a bit of scrolling.

This is how I create the background image.

[lua]local background = display.newImageRect(“image.jpg”, 568, 320)
background.x, background.y = display.contentCenterX, display.contentCenterY
levelGroup:insert(background)[/lua]

And here is my config.lua.

[lua]if ( string.sub( system.getInfo(“model”), 1, 2 ) == “iP” and display.pixelHeight > 960 ) then --iphone 5 - ipod touch tall
application =
{
content =
{
width = 320,
height = 568,
scale = “letterBox”,
xAlign = “center”,
yAlign = “center”,
imageSuffix =
{
["@2x"] = 2,
},
},
}
elseif ( string.sub( system.getInfo(“model”), 1, 2 ) == “iP” ) then --iphone 3GS - 4/4S
application =
{
content =
{
width = 320,
height = 480,
scale = “letterBox”,
xAlign = “center”,
yAlign = “center”,
imageSuffix =
{
["@2x"] = 2,
},
},
}
end[/lua]

Any help will be much appreciated. [import]uid: 191500 topic_id: 33713 reply_id: 134420[/import]

Is your app going to run on iPads? [import]uid: 199310 topic_id: 33713 reply_id: 134435[/import]

That code should do the trick (or something similar) since it won’t change the scale if the resulting image size becomes too small to show any black.
[import]uid: 199310 topic_id: 33713 reply_id: 134222[/import]

Yes but I’m thinking of using a different build for the iPads. I will specify images that are perfect fit. The below config works for that specific code.

[lua]if ( string.sub( system.getInfo(“model”), 1, 4 ) == “iPad” ) then
application =
{
content =
{
width = 768,
height = 1024,
scale = “letterBox”,
xAlign = “center”,
yAlign = “center”,
imageSuffix =
{
["@2x"] = 2.0,
},
},
}
end[/lua] [import]uid: 191500 topic_id: 33713 reply_id: 134468[/import]

The config.lua from my tutorial is based on using bleed areas. There is no way while maintaining the aspect ratio without having part of it off screen or having black areas if the image isn’t the same shape as the screen unless you are going to have specific shaped backgrounds for each aspect ratio. You can make a determination in your code to load an iPad background or iPhone 5 background etc.

[import]uid: 199310 topic_id: 33713 reply_id: 134555[/import]

Thank your for your effort Mr. Miracle, I will update and address my issue in another topic without the ultimate config.lua because the problem is mostly different now.

Serkan [import]uid: 191500 topic_id: 33713 reply_id: 134600[/import]

Sorry to reply that late but we gave up on the ultimate config because of some screen design differences.

I hope I’m getting your solution the right way, the above code already works for images that fit the screen.
Considering those, where should I put the limit for both zoom and sliding the screen?

I want to use the same background image, which is 1136x640, for both iPhone 4/4S and iPhone 5. In iPhone 5, the user will be able to see the whole background but in iPhone 4/4S, there will be a bit of scrolling.

This is how I create the background image.

[lua]local background = display.newImageRect(“image.jpg”, 568, 320)
background.x, background.y = display.contentCenterX, display.contentCenterY
levelGroup:insert(background)[/lua]

And here is my config.lua.

[lua]if ( string.sub( system.getInfo(“model”), 1, 2 ) == “iP” and display.pixelHeight > 960 ) then --iphone 5 - ipod touch tall
application =
{
content =
{
width = 320,
height = 568,
scale = “letterBox”,
xAlign = “center”,
yAlign = “center”,
imageSuffix =
{
["@2x"] = 2,
},
},
}
elseif ( string.sub( system.getInfo(“model”), 1, 2 ) == “iP” ) then --iphone 3GS - 4/4S
application =
{
content =
{
width = 320,
height = 480,
scale = “letterBox”,
xAlign = “center”,
yAlign = “center”,
imageSuffix =
{
["@2x"] = 2,
},
},
}
end[/lua]

Any help will be much appreciated. [import]uid: 191500 topic_id: 33713 reply_id: 134420[/import]

Is your app going to run on iPads? [import]uid: 199310 topic_id: 33713 reply_id: 134435[/import]

Yes but I’m thinking of using a different build for the iPads. I will specify images that are perfect fit. The below config works for that specific code.

[lua]if ( string.sub( system.getInfo(“model”), 1, 4 ) == “iPad” ) then
application =
{
content =
{
width = 768,
height = 1024,
scale = “letterBox”,
xAlign = “center”,
yAlign = “center”,
imageSuffix =
{
["@2x"] = 2.0,
},
},
}
end[/lua] [import]uid: 191500 topic_id: 33713 reply_id: 134468[/import]

The config.lua from my tutorial is based on using bleed areas. There is no way while maintaining the aspect ratio without having part of it off screen or having black areas if the image isn’t the same shape as the screen unless you are going to have specific shaped backgrounds for each aspect ratio. You can make a determination in your code to load an iPad background or iPhone 5 background etc.

[import]uid: 199310 topic_id: 33713 reply_id: 134555[/import]

Thank your for your effort Mr. Miracle, I will update and address my issue in another topic without the ultimate config.lua because the problem is mostly different now.

Serkan [import]uid: 191500 topic_id: 33713 reply_id: 134600[/import]