I would like to be able to fill a background out in the same way that css does using background repeat.
A use case I have at the moment is a scroll view that is dynamic in height according to it's contents. The contents sit on a background rectangle that also adjusts with the content. This rectangle is just a newRect that is white, I would like to fill it with a repeating background of a paper texture.
I am trying to write my own function that does this but it would just be easier for it to be included by you guys ;)
I imagine it could be done with a new addition to newRect like this:
display.newRect( [parentGroup,] left, top, width, height, bitmapFillImageLink )
Also would be nice to work with dynamic resolution.
Cheers!
The function I wrote to achieve this is below.
Please note that I only needed it to fill out vertically but I am sure it could be adapted easily to work any other way.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| --[[Make sure to define a rectangle the height of the content above this function. in my case it is called detailBG
there is also a displayGroup called detailScreenScroll defined above this.
And finally there is an image called detailBgTop at the top of the content group defined above this]]--
local function tileBG()
local paper = display.newImageRect("bg-repeat.png", 320, 73)
paper:setReferencePoint(display.TopCenterReferencePoint)
paper.x = (display.contentWidth / 2)
paper.y = detailBgTop.height
detailScreenScroll:insert(2, paper)
local maxHeight = math.ceil(detailBG.height / paper.height)-- getting the total amount of images we need to fill the background using the total height divided by the height of each background image
paper:removeSelf()--removing the original image as we have the height details we need from it.
bgInstance = {}--setting up table
maxBg = math.ceil(maxHeight)--setting the max background height
for i = 1, maxBg do
print(i)--printing us how many images we need to fill the background
bgInstance[i] = display.newImageRect("bg-repeat.png", 320, 73)
--bgInstance[i]:setReferencePoint(display.TopCenterReferencePoint)
detailScreenScroll:insert(1, bgInstance[i])--inserting at the back of the displayGroup (because it's a background duh!)
bgInstance[i].x = display.contentWidth / 2
bgInstance[i].y = bgInstance[i].height * i
-- the following if statement was because there was a bottom image I was using at the end of the repeated background if you dont need this then comment it out
if (i == maxBg) then
bgInstance[maxBg]:setReferencePoint(display.TopCenterReferencePoint)
bgInstance[maxBg].y = (detailBgBot.y - bgInstance[maxBg].height)
end
end
end
tileBG() |