Holes in image using setBlendMode and renderTarget

paulfen

Hi,
Wonder if someone could point me in the right direction...
I have an image the size of stage which is positioned on top of various other images. I would like to overlay a small circular image in multiple places over the larger image. Where those circle images are I would like it to be a transparent hole so that you can see through the larger image. Based on previous searches on the forum I discovered the setBlendMode function, but can't seem to get the right options.

HubertRonald

Hi @paulfen

I know that is not the solution you are looking for but I think this is a good start

-- class shape unHide = Core.class(Sprite)   -- texture or region than you want to show function unHide:init() self.shape = Shape.new() self.shape:setX(50) self.shape:setY(50) self:draw()   self.isFocus = false   self:addEventListener(Event.MOUSE_DOWN, self.onMouseDown, self) self:addEventListener(Event.MOUSE_MOVE, self.onMouseMove, self) self:addEventListener(Event.MOUSE_UP, self.onMouseUp, self)   self:addChild(self.shape) end   --show box function unHide:draw() self:setVisible(true) local fc = 2 -- it's because move the mouse is fast maybe you must be global to local position self.texture = Texture.new("black-cat.jpg",true) self.matrix = Matrix.new(1, 0, 0, 1, 48, 50) self.shape:setLineStyle(3, 0x000000) self.shape:setFillStyle(Shape.TEXTURE, self.texture, self.matrix) self.shape:beginPath() self.shape:moveTo(self.shape:getX()*fc-100, self.shape:getY()*fc-100) self.shape:lineTo(self.shape:getX()*fc+100, self.shape:getY()*fc-100) self.shape:lineTo(self.shape:getX()*fc+100, self.shape:getY()*fc+100) self.shape:lineTo(self.shape:getX()*fc-100, self.shape:getY()*fc+100) self.shape:closePath() self.shape:endPath() end   -- hide box function unHide:hide() self.shape:clear() self:setVisible(false) end   -- press left button over box function unHide:onMouseDown(event) if self:hitTestPoint(event.x, event.y) then   self.isFocus = true   self.x0 = event.x self.y0 = event.y   event:stopPropagation() end end   -- move box function unHide:onMouseMove(event) if self.isFocus then   local dx = event.x - self.x0 local dy = event.y - self.y0   self.shape:setX(self.shape:getX() + dx) self.shape:setY(self.shape:getY() + dy)   self.x0 = event.x self.y0 = event.y   self:hide(); self:draw() event:stopPropagation() end end   -- up left button function unHide:onMouseUp(event) if self.isFocus then self.isFocus = false event:stopPropagation() end end   -- up canvas local bg = Bitmap.new(Texture.new("smiley-face-fun.jpg",true)) bg:setAnchorPoint(0.5,0.5) bg:setPosition(160,bg:getHeight()*.5) stage:addChild(bg)   -- create class square = unHide.new() stage:addChild(square)

here also attached graphics that I used

paulfen

Thanks for the comment HubertRonald. As you suggested it did not solve my problem directly, but it did provide inspiration for me to find the solution!

My solution involves drawing a circle (using the Arc class) over my large image, setting the circles fillStyle to solid and 0 alpha - i.e transparent. Then setting its blend mode to "noAlpha". Seems to do the trick and I can add as many circles as needed to punch more holes in my large image.

local renderTarget = RenderTarget.new(W, H) local img = Bitmap.new(TextureRegion.new(renderTarget,0,0,W,H)) displayGroup:addChild(img) renderTarget:clear(0x000000, 0)   local clouds = Bitmap.new(pack:getTextureRegion("clouds.png")) clouds:setAnchorPoint(0.5, 0.5) clouds:setScale(8) renderTarget:draw(clouds)   local circle = Arc.new{x=100, y=100, radius=20, fillStyle={ Shape.SOLID, 0x000000, 0 }, lineStyle={ 0, 0xffffff, 0.0 }} circle:setBlendMode("noAlpha") circle:setScale(0.5) renderTarget:draw(circle)

HubertRonald

I'm glad for you @paulfen