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

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

    +1 -1 (+1 / -0 )Share on Facebook
  • 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.
  • 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
  • @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
Sign In or Register to comment.