Clarification about LetterBoxing

Solar2D General Questions/Discussion
#1

I have a question:

I want to keep my aspect ratio to 16:9.

I use the ultimate confing.lua.

Now let’s say I have a 16:9 background.png image.

In a 16:9 device it will cover the whole screen.

BUT, in a 4:3 device, the letterboxed 16:9 image, aligned to “center” based in ultimate confing.lua, will have blank space up and bottom of the device screen.

Am I correct or wrong? Do I get it right or not?

Just that, that is my question.

EDIT: The orientation is landscape.

#2

Yup there will be blank space on the top and bottom in that scenario.

You can still render graphics in that blank space, and if you have any particle effects or other moving graphics they can still appear there.

I wrote some code to draw black bars to fill up excess space, and it brings them to the top on every enterFrame event. Probably not the most efficient, but it helps to not have to worry about how your app will look on different aspect ratio devices.

[lua]

– Example

– in main.lua:
– local barGenerator = require( “0utsideBars” )
– local bars = display.newGroup()
– local function barsToFront() bars:toFront() end

– local shouldDrawBars = barGenerator.shouldDrawBars()
– if shouldDrawBars then
– Runtime:addEventListener( “enterFrame”, blackBarsToFront )
– local blackBarTop, blackBarBottom, blackBarLeft, blackBarRight = blackBarGenerator.generateBars()
– if blackBarTop ~= nil then blackBars:insert( blackBarTop ) end
– if blackBarBottom ~= nil then blackBars:insert( blackBarBottom ) end
– if blackBarLeft ~= nil then blackBars:insert( blackBarLeft ) end
– if blackBarRight ~= nil then blackBars:insert( blackBarRight ) end
– end

local blackBars = {}

local screenWidth, screenHeight = display.contentWidth, display.contentHeight

local halfScreenWidth, halfScreenHeight = screenWidth/2, screenHeight/2

local contentWidth, contentHeight = display.contentWidth,display.contentHeight

local originX, originY = display.screenOriginX,display.screenOriginY

local scaleX, scaleY = display.contentScaleX, display.contentScaleY

local scaleMultiplierX,scaleMultiplierY = 1/scaleX, 1/scaleY

blackBars.shouldDrawBars = function()

   if display.contentScaleX == 1 and display.contentScaleY == 1 then 

      return false 

   else

      return true 

   end

end

blackBars.generateBars = function( colors )

   local blackBarTop, blackBarBottom

   local blackBarLeft, blackBarRight

   

   local deviceWidthPixels  = math.round( (display.contentWidth -  (display.screenOriginX * 2)) / display.contentScaleX )

   local deviceHeightPixels = math.round( (display.contentHeight - (display.screenOriginY * 2)) / display.contentScaleY )

   

   

   local blackBarHeight = math.ceil( ((deviceHeightPixels/scaleMultiplierY)-screenHeight)/2 )

   local blackBarWidth   = math.ceil( ((deviceWidthPixels/scaleMultiplierX)-screenWidth)/2 )

   

   if blackBarHeight > 0 then

      blackBarTop = display.newRect( display.screenOriginX, display.screenOriginY, screenWidth, blackBarHeight )

      if not colors then blackBarTop:setFillColor(0,0,0)

      else blackBarTop:setFillColor( colors[1],colors[2], colors[3]) end

      blackBarBottom = display.newRect( display.screenOriginX, screenHeight, screenWidth, blackBarHeight )

      if not colors then blackBarBottom:setFillColor(0,0,0)

      else blackBarBottom:setFillColor( colors[1],colors[2], colors[3]) end

   end

   if blackBarWidth > 0 then

      blackBarLeft = display.newRect( -blackBarWidth, 0, blackBarWidth, screenHeight )

      if not colors then blackBarLeft:setFillColor(0,0,0)

      else blackBarLeft:setFillColor( colors[1],colors[2], colors[3]) end

      blackBarRight = display.newRect( screenWidth, 0, blackBarWidth, screenHeight )

      if not colors then blackBarRight:setFillColor(0,0,0)

      else blackBarRight:setFillColor( colors[1],colors[2], colors[3]) end

   end

   if blackBarHeight == 0 then

      return nil, nil, blackBarLeft, blackBarRight

   end

   if blackBarWidth == 0 then

      return blackBarTop, blackBarBottom, nil, nil

   end

   return blackBarTop, blackBarBottom, blackBarLeft, blackBarRight

end

return blackBars

[/lua]

#3

Thanks for you response! That’s what I needed to know. And thanks for your handy code. :slight_smile:

#4

You’re very welcome, happy to help!

#5

Yup there will be blank space on the top and bottom in that scenario.

You can still render graphics in that blank space, and if you have any particle effects or other moving graphics they can still appear there.

I wrote some code to draw black bars to fill up excess space, and it brings them to the top on every enterFrame event. Probably not the most efficient, but it helps to not have to worry about how your app will look on different aspect ratio devices.

[lua]

– Example

– in main.lua:
– local barGenerator = require( “0utsideBars” )
– local bars = display.newGroup()
– local function barsToFront() bars:toFront() end

– local shouldDrawBars = barGenerator.shouldDrawBars()
– if shouldDrawBars then
– Runtime:addEventListener( “enterFrame”, blackBarsToFront )
– local blackBarTop, blackBarBottom, blackBarLeft, blackBarRight = blackBarGenerator.generateBars()
– if blackBarTop ~= nil then blackBars:insert( blackBarTop ) end
– if blackBarBottom ~= nil then blackBars:insert( blackBarBottom ) end
– if blackBarLeft ~= nil then blackBars:insert( blackBarLeft ) end
– if blackBarRight ~= nil then blackBars:insert( blackBarRight ) end
– end

local blackBars = {}

local screenWidth, screenHeight = display.contentWidth, display.contentHeight

local halfScreenWidth, halfScreenHeight = screenWidth/2, screenHeight/2

local contentWidth, contentHeight = display.contentWidth,display.contentHeight

local originX, originY = display.screenOriginX,display.screenOriginY

local scaleX, scaleY = display.contentScaleX, display.contentScaleY

local scaleMultiplierX,scaleMultiplierY = 1/scaleX, 1/scaleY

blackBars.shouldDrawBars = function()

   if display.contentScaleX == 1 and display.contentScaleY == 1 then 

      return false 

   else

      return true 

   end

end

blackBars.generateBars = function( colors )

   local blackBarTop, blackBarBottom

   local blackBarLeft, blackBarRight

   

   local deviceWidthPixels  = math.round( (display.contentWidth -  (display.screenOriginX * 2)) / display.contentScaleX )

   local deviceHeightPixels = math.round( (display.contentHeight - (display.screenOriginY * 2)) / display.contentScaleY )

   

   

   local blackBarHeight = math.ceil( ((deviceHeightPixels/scaleMultiplierY)-screenHeight)/2 )

   local blackBarWidth   = math.ceil( ((deviceWidthPixels/scaleMultiplierX)-screenWidth)/2 )

   

   if blackBarHeight > 0 then

      blackBarTop = display.newRect( display.screenOriginX, display.screenOriginY, screenWidth, blackBarHeight )

      if not colors then blackBarTop:setFillColor(0,0,0)

      else blackBarTop:setFillColor( colors[1],colors[2], colors[3]) end

      blackBarBottom = display.newRect( display.screenOriginX, screenHeight, screenWidth, blackBarHeight )

      if not colors then blackBarBottom:setFillColor(0,0,0)

      else blackBarBottom:setFillColor( colors[1],colors[2], colors[3]) end

   end

   if blackBarWidth > 0 then

      blackBarLeft = display.newRect( -blackBarWidth, 0, blackBarWidth, screenHeight )

      if not colors then blackBarLeft:setFillColor(0,0,0)

      else blackBarLeft:setFillColor( colors[1],colors[2], colors[3]) end

      blackBarRight = display.newRect( screenWidth, 0, blackBarWidth, screenHeight )

      if not colors then blackBarRight:setFillColor(0,0,0)

      else blackBarRight:setFillColor( colors[1],colors[2], colors[3]) end

   end

   if blackBarHeight == 0 then

      return nil, nil, blackBarLeft, blackBarRight

   end

   if blackBarWidth == 0 then

      return blackBarTop, blackBarBottom, nil, nil

   end

   return blackBarTop, blackBarBottom, blackBarLeft, blackBarRight

end

return blackBars

[/lua]

#6

Thanks for you response! That’s what I needed to know. And thanks for your handy code. :slight_smile:

#7

You’re very welcome, happy to help!