Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat
Scaling a background for different devices - Gideros Forum

Scaling a background for different devices

Cliff76Cliff76 Member
edited March 2012 in General questions
I am trying to draw a background image in an app that should run on devices of different sizes (Android, iPhone/iPad) and I'm having trouble. The image is 1024x768 iPad resolution so I thought I could do something like this:
function scene:rectangularShape(x, y, width, height, fillTexture)
	local rectangle = Shape.new()
	if fillTexture then rectangle:setFillStyle(Shape.TEXTURE, fillTexture) end
	rectangle:beginPath()
	rectangle:moveTo(-width/2,-height/2)
    rectangle:lineTo(width/2, -height/2)
    rectangle:lineTo(width/2, height/2)
    rectangle:lineTo(-width/2, height/2)
    rectangle:closePath()
    rectangle:endPath()
    rectangle:setPosition(x,y)
	return rectangle
end
 
function scene:init()
    local screenW = application:getContentWidth()
    local screenH = application:getContentHeight()
	local background = self:rectangularShape(screenW/2, screenH/4, screenW, screenH, Texture.new("background.png"))
	stage:addChild(background)
end
But when that runs I get the attached screenshot. I've tried all renditions of x,y, width, height and I'm confused as to wether there is scaling cropping issues going on or what. I'm attaching the background image as well. Please advise, thanks in advance.

Dislikes: beunn

background.png
1024 x 768 - 122K
screenshot.png
320 x 536 - 43K
+1 -1 (+0 / -1 ) Share on Facebook

Comments

  • one more thing. When I switch from running on the iPad to running on the iPhone I change the project properties from Landscape left (iPad) to portrait (iPhone).
  • evsevs Member
    Hello,

    This will scale the image in landscape mode - with Scale set to stretch or other scaling mode in project properties
    application:setOrientation(Application.LANDSCAPE_LEFT)
     
    local bitmap = Bitmap.new(Texture.new("background.png"))
     
    local scaleX = application:getContentWidth() / 1024
     
    local scaleY = application:getContentHeight() / 768
     
    bitmap:setScaleX(scaleX)
    bitmap:setScaleY(scaleY)
    bitmap:setPosition(-1024 * scaleX / 2 + application:getContentWidth() / 2, -768 * scaleY / 2 + application:getContentHeight() /2 )
     
    stage:addChild(bitmap)

    cheers

    evs
  • ar2rsawseenar2rsawseen Maintainer
    Hi
    why don't you use auto scaling?
    Simply set logical sizes (smallest first and greatest second = 768 x 1024) of your background image and set scaling to Letterbox and it should look fine in same orientation in different resolutions.

    Likes: MikeHart

    +1 -1 (+1 / -0 ) Share on Facebook
  • @Evs: I figured out much the same last night during my tinkering, thanks!
    @ar2rsawseen: I'll try autoscaling too. But it'll have to wait until later when I have time. Thanks for all the good advice!
  • andybarillaandybarilla Member
    edited March 2012
    What I'm currently doing is that I have three different files for each image.

    gameBackground.png - 512x320
    gameBackground@1.5x.png - 1024x640
    gameBackground@2x.png - 1280x800

    Then in the project properties I set:
    Scale Mode: Letterbox
    Logical Dimensions: 320 x 480

    Image Scales:
    @2x - 2
    @1.5x - 1.5

    So far this looks great on my tablet and phone.

    If you use a different scaling you'll want to check out the different aspect ratios of various devices to make sure you have enough bleed room so the important parts don't get cut off.

    [edited: mistyped 1200 instead of 1280]

    Dislikes: tytadas

    +1 -1 (+0 / -1 ) Share on Facebook
  • andybarillaandybarilla Member
    edited March 2012
    I thought I would elaborate.

    If you want to use Crop you'll loose part of the background so you need to leave an area which has more of the background but has parts that can be cut off. I use this template (based off a 1280x800 screen) to do that: http://www.nevermorelabs.com/share/bleedTemplate.png The white area is the area that will be visible across all devices and the grey areas are those that might get cut off. The white area is 1067x720.

    I created this based of the aspect ratios for various devices. I've compiled a spreadsheet here of a bunch of devices which is open to the public to tweak: http://goo.gl/VVZ1u
Sign In or Register to comment.