Scaling challenge question (with code attached) - anyone help?

greg886 · July 25, 2013, 9:39am

Can someone correct where I’m going wrong here (my head is starting to hurt). How should I scale this groupObject & set config.lua such that I achieve this goal?

Goal: For each device type that:
(a) Vertical Content Area takes up full vertical size of the device and
(b) Desired vertical content to display on screen (VERT_PIXCEL_HEIGHT_TO_DISPLAY) is scaled to the Vertical Content Area

Therefore the test is to run through permutations of (a) VERT_PIXCEL_HEIGHT_TO_DISPLAY and (b) device type on the simulator

Question: How to setup (a) config.lua and (b) scaling of “contentGroup” below to achieve this?

main.lua

-- Setup display.setStatusBar( display.HiddenStatusBar ) -- Input Parameter to Manipulate local VERT\_PIXCEL\_HEIGHT\_TO\_DISPLAY = 300&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-- Could be say 300, 400 or 500 -- Grid Pattern local contentGroup = display.newGroup() for x=1,10 do &nbsp;&nbsp;&nbsp;&nbsp;for y=1,5 do &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;local myRectangle = display.newRect(contentGroup, 0, 0, 100,100) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myRectangle.strokeWidth = 2 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myRectangle:setFillColor(140, 140, 140, 50) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myRectangle:setStrokeColor(180, 180, 180) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myRectangle:setReferencePoint(display.TopLeftReferencePoint) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myRectangle.x, myRectangle.y = (x-1)\*100, (y-1)\*100 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;local myText = display.newText(contentGroup, x .. ',' ..y , 0, 0, native.systemFont, 16) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myText:setTextColor(255, 255, 255) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myText:setReferencePoint(display.TopLeftReferencePoint) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myText.x, myText.y = (x-1)\*100, (y-1)\*100 &nbsp;&nbsp;&nbsp;&nbsp;end end -- Attempt to scale local vertScaleFactor = display.contentHeight / VERT\_PIXCEL\_HEIGHT\_TO\_DISPLAY contentGroup:scale(vertScaleFactor, vertScaleFactor) print("vertScaleFactor", vertScaleFactor) -- ISSUES WITH THE ABOVE: -- iPhone: Good -- iPhone4: Good -- iPhone5: Bad, a black margin on the left appears -- iPad: Bad, part of row 4 appears at the bottom -- iPad Retina: Bad, part of row 4 appears at the bottom -- Droid: Bad, a black margin on the left appears -- Content Area - Red Rectangle (just for info) local myRectangle = display.newRect(0, 0, display.contentWidth, display.contentHeight) myRectangle.strokeWidth = 2 myRectangle:setFillColor(0, 0, 140,0) myRectangle:setStrokeColor(200, 0, 0) &nbsp;

build.settings

-- Supported values for orientation: -- portrait, portraitUpsideDown, landscapeLeft, landscapeRight settings = { &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;orientation = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default = "landscape", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;supported = &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"landscape" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;

config.lua

application = { &nbsp; &nbsp; &nbsp; &nbsp; content = &nbsp; &nbsp; &nbsp; &nbsp; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width = 320, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height = 480, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-- scale = "zoomEven", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale = "letterbox", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xAlign = "left", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;yAligh = "center", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-- imageSuffix =&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-- { &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-- &nbsp; &nbsp; ["\_2"] = 1.5, &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-- &nbsp; &nbsp; ["\_3"] = 3.0, &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-- }, &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, } &nbsp;