Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Need help with setLayoutParameters and setLayoutConstraints — Gideros Forum

Need help with setLayoutParameters and setLayoutConstraints

As the title says I am trying to find an example or a more full fledged description of the parameters for these two methods. I read the Java reference that the documentation has, but it only talks about the constraints.

I would create a Pixel and center that on the screen and then fill that container with a set of 8 x8 images. I am sure this is probably simple but Im missing something.

To start off, I am just putting two squares on the screen just to try to understand this. The part of the code I am starting with (this is going on an empty Sprite background).

local bkGround = Pixel.new(0xEEEEEE, 1, width, height*.60)
bkGround:setPosition(0, height*.20)
bkGround:setLayoutParameters({
--columnWeights = {1,0,0},
--rowWeights = {0,0,1},
columnWidths={10, 10, 10, 10, 10},
rowHeights={10,10,10, 10, 10, 10},
})

self:addChild(bkGround)


redDot = Pixel.new(0xff0000,1)
redDot:setLayoutConstraints({
--gridwidth = 1,
--gridheight = 1,
gridx = 1,
gridy = 2,
fill=Sprite.LAYOUT_FILL_BOTH
})
bkGround:addChild(redDot)

cyanDot = Pixel.new(0x00ffff,1)
cyanDot:setLayoutConstraints({
--gridwidth = 1,
--gridheight = 1,
gridx = 0,
gridy = 0,
fill=Sprite.LAYOUT_FILL_BOTH
})
bkGround:addChild(cyanDot)

image.png
650 x 1038 - 78K

Comments

  • hgy29hgy29 Maintainer
    Accepted Answer
    setLayerParameters() allows to explicitly specify the minimum width/height or each column/row of the grid used to layout children, and the eventual weight of row/columns, that is how much of the extra space should be allocated to this row/column, if any remaining after checking the size constraints of the children.

    In your exemple, you create a 5x5 grid with each cell having a minimum 10x10 size. Your children have no size constraints (no minimum) so the grid will stay at its minimum size of 50x50 pixels, that is 5x5 cells of 10x10 each. That grid is centered in the parent sprite.

    Likes: Apollo14

    +1 -1 (+1 / -0 )Share on Facebook
  • So, if I want an 8x8 grid with each cell being the size of an image I should not set the widths and heights in the parameters? And then on the constraints, create a Pixel with a texture image, and give it a constraint of what row and column to place it in, and then add it to the bkGround pixel?
  • ok, modified a bit and tried different variations and am still missing something. The modified code:
    bkGroundHeight = devHeight*.65
    local cellWidth = devWidth/8
    local cellHeight = bkGroundHeight/8
    local bkGround = Pixel.new(0xEEEEEE, 1, devWidth, bkGroundHeight)
    bkGround:setPosition(0, height*.20)
    bkGround:setLayoutParameters({
    columnWidths={cellWidth, cellWidth, cellWidth, cellWidth, cellWidth, cellWidth, cellWidth, cellWidth},
    rowHeights={cellHeight,cellHeight,cellHeight, cellHeight, cellHeight, cellHeight, cellHeight, cellHeight, cellHeight},
    })

    self:addChild(bkGround)


    for col = 0, (side - 1) do
    for row = 0, (side -1) do
    local emptyDot = Pixel.new(emptyImage)
    --local imageWidth, imageHeight = redDot:getDimensions()
    emptyDot:setLayoutConstraints({
    --minWidth = imageWidth,
    --minHeight = imageHeight,
    gridWidth = 1,
    gridHeight = 1,
    gridx = col,
    gridy = row,
    anchor = Sprite.LAYOUT_ANCHOR_CENTER,
    fill=Sprite.LAYOUT_FILL_BOTH
    })
    bkGround:addChild(emptyDot)
    end
    end

    Screen Shot 2019-08-11 at 6.38.59 PM.png
    650 x 1186 - 191K
  • When I use the Layout.lua code I am able to get close to what I want, but the limitations of Layout precludes me from going any further using it. The code for it is:

    side = 8
    emptyDot = Texture.new("gfx/empty.png")
    grid = Layout.new{
    bgrC = 0xEEEEEE, bgrA = 0.25,
    cellRelW = 1/side, cellRelH = 1/side,
    --relH = 0.8,
    }

    for col = 0, side do
    for row = 0, side do
    grid:addChild(Layout.new{
    col = col, row = row,
    texA = 0.5, texS = 0.5,
    texture = Texture.new("gfx/empty.png"),
    })
    end
    end

    gameScreen = Layout.new({
    cols = 1, rows = 6,
    --cellBrdW = 5, cellBrdH = 5,
    cellRelH = 1/6,
    --Layout.new{col = 0, row = 1, sprM = Layout.CROP, cellW = 3},
    Layout.new{col = 0, row = 0, bgrC = 0xff0000, bgrA = 1},
    Layout.new{grid, col = 0, row = 1, cellH = 4},
    Layout.new{rotateGrid, col = 0, row = 1, cellH = 4},
    Layout.new{col = 0, row = 5, bgrC = 0x0000ff, bgrA = 1},
    })
    stage:addChild(gameScreen)

    The screen shot shows proper scale and resizes appropriately. I would think I would be able to do something similar with a Pixel box for that middle portion and then layout the dots in an 8x8 grid that will scale and resize for the device (in portrait mode)
    Screen Shot 2019-08-11 at 6.47.32 PM.png
    638 x 1178 - 60K
  • I do not understand what you are trying to do!? You want to put 8 * 8 images inside a container and align them? Are your images the same size?
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • olegoleg Member
    edited August 2019
    @Nanocore You don't need Layout
    Just set the 'scale mode' you want
    Additionally, you can bind the elements to the edges of the screen using application:getLogicalBounds
    minX,minY,maxX,maxY=application:getLogicalBounds()
    image
    111.PNG
    778 x 628 - 39K
    111.PNG 39.1K
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • I found this piece of code (warning not using layout parameters nor constraints) for drawing a grid (you can copy paste to see it works)
    -- DRAW A GRID <a href="https://forum.giderosmobile.com/profile/aditya" rel="nofollow">@aditya</a>
    function drawRect(left, top, width, height)
    	local shape = Shape.new()
    	shape:setFillStyle(Shape.SOLID, 0xff0000, 0.8)
    	shape:beginPath()
    	shape:moveTo(left,top)
    	shape:lineTo(left + width, top)
    	shape:lineTo(left + width, top+height)
    	shape:lineTo(left, top+height)
     
    	shape:closePath()
    	shape:endPath()
    	return shape
    end
     
    function changeColor(event)
    	local t = event:getTarget()
    	if(t:hitTestPoint(event.x, event.y)) then
    		t:setColorTransform(0, 1, 0)
    	end
    end
     
    local tx = 0
    local ty = 0
    local s = 50
    local temp
     
    local gap = 5 --Change the gap between the nodes
    local cols = 4 --Number of columns in the grid
    --local totalNodes = 25 --Total number of nodes in the grid
    local totalNodes = cols * cols --Total number of nodes in the grid
     
    for i = 1, totalNodes do
    	temp = drawRect(tx, ty, s, s)
    	stage:addChild(temp)
    	tx = tx + s + gap
    	temp:addEventListener(Event.MOUSE_DOWN, changeColor)
     
    	if(i % cols == 0) then
    		ty = ty + s + gap
    		tx = 0
    	end
    end
    Hope that helps?!
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • hgy29hgy29 Maintainer
    Your issue here is that your images (Pixels) are created at full size of the texture, and thus exceed your layout available space at first sight, and it looks like gideros doesn't deal with that case very well. It tries to though, but there is probably a bug somewhere prventing the job to be done correctly.

    First change: create your images with a 0x0 size:
    local emptyDot = Pixel.new(0,0,emptyImage)
    Second thing is that you are computing the expected sizes yourself, which leads to problem due to rounding issues. You should leave the grid system compute the sizes itself based on weight. Second change:
    bkGround:setLayoutParameters({
    columnWeights={1,1,1,1,1,1,1,1},
    rowWeights={1,1,1,1,1,1,1,1},
    })
  • @MoKaLux thanks for the extra effort, I will certainly give that a try and that is all very basic so I am confident that I can make that work. @hgy29 hmm, interesting. Not quite what I would have thought, but I will make the changes and see.
  • @hgy29 ok, I tried it with the parameters all set to 1 and all I got was one tiny black square in the middle of the screen (I did make the change for the initial size of 0,0). I then changed back to what I had calculated for the width and height and got the resulting output which is WAY closer.
    Screen Shot 2019-08-12 at 9.19.19 AM.png
    640 x 1188 - 126K
  • hgy29hgy29 Maintainer
    @Nanocore, be careful, the parameters set 1 aren't the same as you used, they are columnWeights and rowWeights, not columnWidths and rowHeights
  • ah, my bad, and YES, that makes it work like what I was looking for. Thank you!
    +1 -1 (+3 / -0 )Share on Facebook
Sign In or Register to comment.