Is it possible to scale one of your images when using compositePaint features? Here’s my situation:
I have a background image (used for paint1) that is the size I want and I have another image (used for paint2) that is too big. Can scale down the paint2 image so that it is the size I need when using compositePaint?
Thanks.
Hi.
If each is a full image, and not an image sheet frame, I think this should just work. (A quick test seems to confirm this.) On the graphics device, they’ll use normalized texture coordinates anyway (0 to 1 in each direction), instead of pixels.
If both are image sheet frames, on the other hand… ugh. I suggested some ideas to somebody else here, but I don’t know if he had any luck. (Actually, once I mentioned that custom effects were possible, it almost sounded like he got other ideas?) I haven’t run into such a situation myself, so I suspect there are kinks left to work out in my analysis.
(I’ve since refined my “cram numbers together” techniques mentioned there, and might now have a non-lossy one. It needs some testing, though.)
If only one of the images is an image sheet, many of the ideas in that thread should still apply. However, in that case it’s pretty easy to fit enough into four inputs, I think.
Unfortunately, in either of the image sheet cases, you have to write your own effect.
StarCrunch -
I’m not using an image sheet. What does the code look like to affect just one of your images in the compositePaint? I haven’t been able to find any documentation regarding this issue. Thanks.
Hi.
Well, I just copy-pasted the example from the docs and slapped in a couple images of mine, in my test. Basically, the only change I’d make would be to pass in your “correct” image’s dimensions in place of the “300, 300”.
Maybe I’m not following you, but I still don’t understand.
Let me show you this example:
image-1 = 325px x 325px
image-2 = 300px x 300px
I want image-1 to stay at 325px x 325px but I’d like to use image-2 at scale of .5 or 150px x 150px.
local paint = { type = "composite", paint1 = { type="image", filename="image-1.png" }, paint2 = { type="image", filename="image-2.png" } } local rect = display.newRect( display.contentCenterX, display.contentCenterY, 325, 325 ) rect.fill = paint rect.fill.effect = "composite.multiply"
What code would I need to add to scale image-2 to a scale of .5 (150px x 150px).
And I don’t want to scale the whole thing, just image-2. Thanks.
Ah, I think I see what you’re doing.
Is there any alpha on the images? Also, what should happen to the parts of the larger image that don’t intersect your smaller image? Are those unaffected?
I think you’d use two rects, whichever way you ended up doing this. (In which case, maybe you can get away with just slapping multiply blend mode on the smaller image?)
If there won’t be any alpha in the composited image, one of the rects can just be the larger image in back, since it won’t need to worry about interactions with the result. Otherwise, you’d need some sort of cutout, so the larger image doesn’t contribute twice. Maybe a blend mode can give you this; otherwise, it’s a simple shader or mask.
For the second, smaller rect, I think a two-pass shader would do. The first pass would capture the part of the first texture that intersects the second, then feed that to the second pass, which is just the multiply effect.
Let me know on the first few questions. If I’m aiming in the right direction, it sounds simple enough that I might be able to throw some shader code your way later. (Going to be lazy for a while, though. :)) Any sample images / mockups would be appreciated.
Hi.
If each is a full image, and not an image sheet frame, I think this should just work. (A quick test seems to confirm this.) On the graphics device, they’ll use normalized texture coordinates anyway (0 to 1 in each direction), instead of pixels.
If both are image sheet frames, on the other hand… ugh. I suggested some ideas to somebody else here, but I don’t know if he had any luck. (Actually, once I mentioned that custom effects were possible, it almost sounded like he got other ideas?) I haven’t run into such a situation myself, so I suspect there are kinks left to work out in my analysis.
(I’ve since refined my “cram numbers together” techniques mentioned there, and might now have a non-lossy one. It needs some testing, though.)
If only one of the images is an image sheet, many of the ideas in that thread should still apply. However, in that case it’s pretty easy to fit enough into four inputs, I think.
Unfortunately, in either of the image sheet cases, you have to write your own effect.
StarCrunch -
I’m not using an image sheet. What does the code look like to affect just one of your images in the compositePaint? I haven’t been able to find any documentation regarding this issue. Thanks.
Hi.
Well, I just copy-pasted the example from the docs and slapped in a couple images of mine, in my test. Basically, the only change I’d make would be to pass in your “correct” image’s dimensions in place of the “300, 300”.
Maybe I’m not following you, but I still don’t understand.
Let me show you this example:
image-1 = 325px x 325px
image-2 = 300px x 300px
I want image-1 to stay at 325px x 325px but I’d like to use image-2 at scale of .5 or 150px x 150px.
local paint = { type = "composite", paint1 = { type="image", filename="image-1.png" }, paint2 = { type="image", filename="image-2.png" } } local rect = display.newRect( display.contentCenterX, display.contentCenterY, 325, 325 ) rect.fill = paint rect.fill.effect = "composite.multiply"
What code would I need to add to scale image-2 to a scale of .5 (150px x 150px).
And I don’t want to scale the whole thing, just image-2. Thanks.
Ah, I think I see what you’re doing.
Is there any alpha on the images? Also, what should happen to the parts of the larger image that don’t intersect your smaller image? Are those unaffected?
I think you’d use two rects, whichever way you ended up doing this. (In which case, maybe you can get away with just slapping multiply blend mode on the smaller image?)
If there won’t be any alpha in the composited image, one of the rects can just be the larger image in back, since it won’t need to worry about interactions with the result. Otherwise, you’d need some sort of cutout, so the larger image doesn’t contribute twice. Maybe a blend mode can give you this; otherwise, it’s a simple shader or mask.
For the second, smaller rect, I think a two-pass shader would do. The first pass would capture the part of the first texture that intersects the second, then feed that to the second pass, which is just the multiply effect.
Let me know on the first few questions. If I’m aiming in the right direction, it sounds simple enough that I might be able to throw some shader code your way later. (Going to be lazy for a while, though. :)) Any sample images / mockups would be appreciated.