Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Scaling a background for different devices — Gideros Forum
  • Home
    • ›

    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

    Tagged:
    +1 -1 (+0 / -1 )Share on Facebook

    Comments

    • Cliff76Cliff76 Member
      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).
      +1 -1Share on Facebook
    • 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
      +1 -1Share on Facebook
    • 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

      http://appcodingeasy.com/Gideros-Mobile
      +1 -1 (+1 / -0 )Share on Facebook
    • Cliff76Cliff76 Member
      @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!
      +1 -1Share on Facebook
    • 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

      Nevermore Labs • Facebook • Google+
      +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
      Nevermore Labs • Facebook • Google+
      +1 -1Share on Facebook
    Sign In or Register to comment.