I think this is great step in the right direction. I took the liberty of adapting your code to accept any arbitrary width and height (which is the issue that spawned this thread).
local name = 'images/conveyor\_trimmed' local sheetInfo = require("images.conveyor\_trimmed") local imageSheet = graphics.newImageSheet( "images/conveyor\_trimmed.png", sheetInfo:getSheet() ) local map = display.newGroup() map.x, map.y = display.contentWidth / 2, display.contentHeight / 2 local targetWidth = 90 local targetHeight = 90 local mapSize = 4 for y = -mapSize / 2, mapSize / 2 do for x = -mapSize / 2, mapSize / 2 do -- Grid pattern local rect = display.newRect(map, x \* targetWidth, y \* targetHeight, targetWidth, targetHeight) rect:setFillColor(0, (x + y ) % 2 \* 0.5, 0.5) rect.anchorX, rect.anchorY = .5, .5 local frameIndex = math.random(1, 16) local frameInfo = sheetInfo.sheet.frames[frameIndex] local sourceWidth, sourceHeight = frameInfo.sourceWidth, frameInfo.sourceHeight local actualWidth, actualHeight = frameInfo.width, frameInfo.height local widthRatio = actualWidth / sourceWidth local heightRatio = actualHeight / sourceHeight local frameScaleX = targetWidth / actualWidth local frameScaleY = targetHeight / actualHeight local targetSourceWidthRatio = targetWidth / sourceWidth local targetSourceHeightRatio = targetHeight / sourceHeight local w = actualWidth \* frameScaleX \* widthRatio local h = actualHeight \* frameScaleY \* heightRatio local tile = display.newRect(map, x \* targetWidth + (frameInfo.sourceX \* targetSourceWidthRatio) - targetWidth / 2, y \* targetHeight + (frameInfo.sourceY \* targetSourceHeightRatio) - targetHeight / 2, w, h) tile.anchorX, tile.anchorY = 0, 0 tile.fill = {type = "image", filename = name .. ".png"} tile.fill.scaleX = sheetInfo.sheet.sheetContentWidth / actualWidth tile.fill.scaleY = sheetInfo.sheet.sheetContentHeight / actualHeight tile.fill.x = (frameInfo.x + actualWidth/2) / sheetInfo.sheet.sheetContentWidth - 0.5 tile.fill.y = (frameInfo.y + actualHeight/2) / sheetInfo.sheet.sheetContentHeight - 0.5 end end
Here are a couple examples of it in action:
Here it is with a completely arbitrary width and height. It should work for untrimmed frames that are rectangular too, not just squares.
I tried wrapping it up in a nice function that would let you pass in a graphics.imageSheet to take advantage of the imageSheet fill, but that presented issues. Once again, the sourceX and Y offsets don’t seem to work properly in Corona (or I really don’t understand how they’re supposed to work). Here is an example of how it turned out. Notice the red rectangles/squares are where the tiles should be positioned. The white dots are positioned at the exact tile.x and tile.y, yet the tiles themselves are not positioned there.
As you can see this isn’t exactly an obvious or trivial solution for us devs to come up with on our own. So what are the chances that this can be incorporated into the SDK? Perhaps by adding a new function call like display.newUntrimmedImageRect().
There are a few extra points to consider.
-
The width and height of the tile are the trimmed values. I think there should be untrimmedWidth and untrimmedHeight attributes as well that represent the target width and height that you pass into the function. That way you can do things like this when you’re trying to place images on screen:
local x = tile.x + tile.untrimmedWidth
-
I don’t know how the anchor point needing to be in the upper left corner will affect other use cases
-
I also don’t know how the sourceX and Y offsets will be incorporated when you manipulate the x and y values outside of the function call. For example, would tile.x = 0 place the tile at the screenOrigin or screenOrigin + sourceX offset?
