Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Holes in image using setBlendMode and renderTarget — Gideros Forum

Holes in image using setBlendMode and renderTarget

paulfenpaulfen Member
edited June 2014 in General questions
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.

Comments

  • 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


    imageimage
    black-cat.jpg
    360 x 480 - 23K
    smiley-face-fun.jpg
    360 x 480 - 10K

    Likes: ar2rsawseen

    +1 -1 (+1 / -0 )Share on Facebook
  • 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)
Sign In or Register to comment.