Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
User interface custom image, how to resize? (PSD files) — Gideros Forum
  • Home
    • ›

    User interface custom image, how to resize? (PSD files)

    vabattavabatta Member
    edited October 2012 in Game & application design
    Hi all,
    I'm playing with the user interface, and I'm trying to implement a button like this: http://designmoo.com/1111/blue-button/
    But if I change the device dimensions, he will go too big or too little. How can I implement a method to have the button always with the right dimensions?

    Thanks :D

    Dislikes: goncho, clement

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

    Comments

    • ar2rsawseenar2rsawseen Maintainer
      edited October 2012
      You need to set logical dimensions you will use inside app and set a scaling mode, for example "letterbox".
      --set logical dimensions (always like these, no matter if portrait or lanscape)
application:setLogicalDimensions(480, 800)
--set orientation
application:setOrientation(Application.PORTRAIT)
--set scaling mode
application:setScaleMode("letterbox")
      And don't forget to use filtering for textures.

      You can read this thread for more info:
      http://www.giderosmobile.com/forum/discussion/1929/understanding-scaling-and-resolution-on-different-devices.#Item_16

      Likes: vabatta

      http://appcodingeasy.com/Gideros-Mobile
      +1 -1 (+1 / -0 )Share on Facebook
    • vabattavabatta Member
      Okay thanks,
      but I have problems, because I'm trying to create a function to make dynamic button based on the png but I have lots of problems... For example to set text on the button.
      +1 -1Share on Facebook
    • vabattavabatta Member
      Test proj, I don't understand how to use scale mode to have the right pattern and how to use the button image and have it scaled.
      Without using scale mode I got all working, but I'm always stuck to the button...
      zip
      zip
      test.zip
      50K
      +1 -1Share on Facebook
    • ar2rsawseenar2rsawseen Maintainer
      @vabatta ok so as I understood you want to scale button to match the text.
      It's actually a simple math problem. Also it is not recommended to scale buttons so much, but you can do it like that:
      App = {}; -- Main table of the app
local App = App;
 
function App:init()
 
	application:setOrientation(Application.LANDSCAPE_RIGHT);
 
 
	local textureBase = Texture.new("gfx/texture.png", true, {wrap = Texture.REPEAT});
	local regioneBase = TextureRegion.new(textureBase, 0, 0, application:getContentWidth(), application:getContentHeight());
	stage:addChild(Bitmap.new(regioneBase));
 
	local fontSize = application:getContentWidth() / 16;
	local fontTitle = TTFont.new("fonts/coolvetica.ttf", fontSize);
	local titleApp = TextField.new(fontTitle, "A test title - Really long to fit");
	titleApp:setPosition((application:getContentWidth() - titleApp:getWidth()) / 2, fontSize);
	titleApp:setTextColor(0x878787);
 
	--text width plus padding
	local padding = 20
	local textWidth = titleApp:getWidth() + padding*2
	local textHeight = titleApp:getHeight() + padding*2
 
	local btn = Bitmap.new(Texture.new("gfx/btn-n.png", true))
 
	local newXScale = textWidth/btn:getWidth()
	local newYScale = textHeight/btn:getHeight()
	local textX, textY = titleApp:getBounds(stage)
 
	btn:setScale(newXScale, newYScale)
	btn:setPosition(textX-padding, textY-padding)
 
	stage:addChild(btn)
	stage:addChild(titleApp);
 
 
end
      http://appcodingeasy.com/Gideros-Mobile
      +1 -1Share on Facebook
    Sign In or Register to comment.