Need help with setLayoutParameters and setLayoutConstraints

Nanocore · August 2019

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)

hgy29 · August 2019

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.

Nanocore · August 2019

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?

Nanocore · August 2019

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

Nanocore · August 2019

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)

MoKaLux · August 2019

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?

oleg · 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()

MoKaLux · August 2019

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.gideros.rocks/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?!

hgy29 · August 2019

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},
})

Nanocore · August 2019

@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.

Nanocore · August 2019

@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.

hgy29 · August 2019

@Nanocore, be careful, the parameters set 1 aren't the same as you used, they are columnWeights and rowWeights, not columnWidths and rowHeights

Nanocore · August 2019

ah, my bad, and YES, that makes it work like what I was looking for. Thank you!

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Need help with setLayoutParameters and setLayoutConstraints

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Need help with setLayoutParameters and setLayoutConstraints

Comments