Display only part of large image

[jose.coimbras]

Hello, thanks for reading.

I have a large image file. 

I wish to display only a part of it on a “rectangle”, but not a part of it from the center of the large image. Using a container is posible to display a part but always focus on center of image.

Imagine a large map in 5000x5000, you need to focus a window on somewhere of that map in a 200x200 window, its like a zoom to certain part of image.

Already read abaout “Mask” but it not seems what i´m looking for.

I think in the container should be some “anchor” but it does not work.

Any help?? The following code, put the imagem, and display part of it, but centered…

[lua]

local function Mapa()

[lua] container = display.newContainer( 350, 350 )
container:translate( 350, 800 )
local mapatodo = display.newImage( “map.png” )
container:insert( mapatodo, false ) – insert and center bkgd[/lua]

end

[/lua]

[nick_sherman]

I’d have thought you can use a container, and move the image within it (mapatodo in your case) to view the part you want.

A warning though, not many devices can handle images that are 5000 x 5000, you might need to chop that up and put the pieces into a group.

[jose.coimbras]

Hello nick sherman, 5000 was only to people view that is a large image, not displayed all on screen, in reality is like 2000x2000.

move in container? how?

thanks,

[roaminggamer]

Assuming you can load the image into memory, just put it in a container, then move the image, not the container.

(Tip: Textures over 4096x4096 won’t work on old and under powered  mobile devices)

i.e. Changing the x,y position of the image moves it inside the container.

https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2018/04/containerExample.zip

local container = display.newContainer( 300, 400 ) container.x = display.contentCenterX container.y = display.contentCenterY local image = display.newImageRect( container, "image.jpg", 3769, 2513 ) image.touch = function( self, event ) if( event.phase == "began" ) then self.x0 = self.x self.y0 = self.y else self.x = event.x - event.xStart + self.x0 self.y = event.y - event.yStart + self.y0 end end image:addEventListener("touch") 

[jose.coimbras]

Thanks roaminggamer.

i´ll try after dinner.

[roaminggamer]

Tip: As nick and I have pointed out, using textures that large is not a good practice.

It is not how much of the image you are showing that you have to be concerned with. 

If the source image dimension is larger than the largest texture buffer, you can’t load it.  Many android devices cap out at 4096 x 4096.

Also, a 5000 x 5000 texture will actually require an 8192 x 8192 texture buffer to load.

While you can display just part of a texture, you still have to load the whole thing into memory.

Most PCs have at least 8192 x 8192 texture buffers, so we it is easy to assume everything will work fine, till you get to the actual mobile devices.

Note: All modern apple mobile devices have 8192 x 8192 or larger.

[nick_sherman]

I’d have thought you can use a container, and move the image within it (mapatodo in your case) to view the part you want.

A warning though, not many devices can handle images that are 5000 x 5000, you might need to chop that up and put the pieces into a group.

[jose.coimbras]

Hello nick sherman, 5000 was only to people view that is a large image, not displayed all on screen, in reality is like 2000x2000.

move in container? how?

thanks,

[roaminggamer]

Assuming you can load the image into memory, just put it in a container, then move the image, not the container.

(Tip: Textures over 4096x4096 won’t work on old and under powered  mobile devices)

i.e. Changing the x,y position of the image moves it inside the container.

https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2018/04/containerExample.zip

local container = display.newContainer( 300, 400 ) container.x = display.contentCenterX container.y = display.contentCenterY local image = display.newImageRect( container, "image.jpg", 3769, 2513 ) image.touch = function( self, event ) if( event.phase == "began" ) then self.x0 = self.x self.y0 = self.y else self.x = event.x - event.xStart + self.x0 self.y = event.y - event.yStart + self.y0 end end image:addEventListener("touch") 

[jose.coimbras]

Thanks roaminggamer.

i´ll try after dinner.

[roaminggamer]

Tip: As nick and I have pointed out, using textures that large is not a good practice.

It is not how much of the image you are showing that you have to be concerned with. 

If the source image dimension is larger than the largest texture buffer, you can’t load it.  Many android devices cap out at 4096 x 4096.

Also, a 5000 x 5000 texture will actually require an 8192 x 8192 texture buffer to load.

While you can display just part of a texture, you still have to load the whole thing into memory.

Most PCs have at least 8192 x 8192 texture buffers, so we it is easy to assume everything will work fine, till you get to the actual mobile devices.

Note: All modern apple mobile devices have 8192 x 8192 or larger.