Having trouble using Containers

Audio and Graphics
#1

Hey guys,

I am using containers to split an image into square pieces. I have a 450 x 450 image which I am trying to split in 9 equal square pieces (all of them 150 x 150). Once I split them, my goal is to put those containers next to each other in the exact location so the image is reconstructed.

This is the code I am trying. However, each of the 9 containers only show the middle of the original image. So I end up with 9 square containers  that all have the same view of the original image instead of each showing different part of the image. Any help/suggestion on how I can do that? 

Thanks a lot.

Here is a 450x450 Image.

Code:

local x\_location = display.contentCenterX local y\_location = display.contentCenterY;local sizer=150;local y\_start=70; local startx=x\_location-sizer local starty=y\_location-sizer-y\_start local pic={} for p=1,9 do pic[p]=display.newImageRect('Sample\_2D.png',3\*sizer,3\*sizer);pic[p].x=0; pic[p].y=0; pic[p]:toBack() if pic[p].x\> 2\*sizer then pic[p].x= 0 pic[p].y=pic[p].y+sizer end end startx=x\_location-sizer starty=y\_location-sizer-y\_start local box={} for bx=1,9 do print(bx) box[bx] = display.newContainer(sizer,sizer);box[bx].x=startx;box[bx].y=starty; box[bx]:insert(pic[bx]) box[bx].anchorChildren = false startx=startx+sizer if startx\> x\_location+sizer then startx= x\_location-sizer starty=starty+sizer end end
#2

Try this:

local segmentWidth, segmentHeight = 150, 150 local function produceSegment( parent, imagepath, row, col ) local container = display.newContainer( parent, segmentWidth, segmentHeight ) local image = display.newImage( imagepath ) container:insert( image, true ) image.x = (image.width\*.5-segmentWidth) - ((col-1.5) \* segmentWidth) image.y = (image.height\*.5-segmentHeight) - ((row-1.5) \* segmentHeight) container.x, container.y = (col-.5)\*segmentWidth, (row-.5)\*segmentHeight local r = display.newRect( 0, 0, segmentWidth, segmentHeight ) r:setFillColor( 0,0,0,0 ) r:setStrokeColor( 1,0,0 ) r.strokeWidth = 5 container:insert( r, true ) return container end local function divideImage( imagepath ) local group = display.newGroup() for r=1, 3 do for c=1, 3 do local segment = produceSegment( group, imagepath, r, c ) end end return group end local piecesGroup = divideImage( "sky.jpg" )
#3

Hi
Woudn’ it be easier to use an image sheet instead of containers?
Just for curiosity :wink:

#4

Hi Sciacchitano, as to your question, you are right. Image sheet would be very easy indeed. However, Image sheets must be part of the assets of an app bundle, i.e created with the app. My problem is I would let the user take a picture of an object and then use that picture as a display object. I won’t know what the image is, so a sprite sheet is not not a viable solution. I need to be able to split the image within the app.  

#5

Hey Horacebury,

Thank you very much. 

Your solution is working  :slight_smile:

#6

Just to add one question, let’s say I wanted to swap the segment at r=1 c=1 with the segment at r=2 and c=1. 

Would that be possible ?

Thank you. 

#7

The cells in the display group are arranged columns then rows, so the location of the first cell in row 2 is:

group[(row-1)\*3 + cell]

Once you know how to locate the cells you can get their x,y positions and swap them.

#8

Yes, that is what I was able to do.

Thanks a lot.

#9

Try this:

local segmentWidth, segmentHeight = 150, 150 local function produceSegment( parent, imagepath, row, col ) local container = display.newContainer( parent, segmentWidth, segmentHeight ) local image = display.newImage( imagepath ) container:insert( image, true ) image.x = (image.width\*.5-segmentWidth) - ((col-1.5) \* segmentWidth) image.y = (image.height\*.5-segmentHeight) - ((row-1.5) \* segmentHeight) container.x, container.y = (col-.5)\*segmentWidth, (row-.5)\*segmentHeight local r = display.newRect( 0, 0, segmentWidth, segmentHeight ) r:setFillColor( 0,0,0,0 ) r:setStrokeColor( 1,0,0 ) r.strokeWidth = 5 container:insert( r, true ) return container end local function divideImage( imagepath ) local group = display.newGroup() for r=1, 3 do for c=1, 3 do local segment = produceSegment( group, imagepath, r, c ) end end return group end local piecesGroup = divideImage( "sky.jpg" )
#10

Hi
Woudn’ it be easier to use an image sheet instead of containers?
Just for curiosity :wink:

#11

Hi Sciacchitano, as to your question, you are right. Image sheet would be very easy indeed. However, Image sheets must be part of the assets of an app bundle, i.e created with the app. My problem is I would let the user take a picture of an object and then use that picture as a display object. I won’t know what the image is, so a sprite sheet is not not a viable solution. I need to be able to split the image within the app.  

#12

Hey Horacebury,

Thank you very much. 

Your solution is working  :slight_smile:

#13

Just to add one question, let’s say I wanted to swap the segment at r=1 c=1 with the segment at r=2 and c=1. 

Would that be possible ?

Thank you. 

#14

The cells in the display group are arranged columns then rows, so the location of the first cell in row 2 is:

group[(row-1)\*3 + cell]

Once you know how to locate the cells you can get their x,y positions and swap them.

#15

Yes, that is what I was able to do.

Thanks a lot.