Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
dynamic Mask with matrix — Gideros Forum

dynamic Mask with matrix

twisttaptwisttap Member
edited August 2012 in General questions
 
 
 
--Create the shape object
local myMask = Shape.new()
local LEFTB, RIGHTB
 
local imageHolder = Sprite.new()
 
 
--Let's make it visible by placing it on the stage
stage:addChild(myMask)
 
--Now load the texture (image that we want to mask)
local matrix = Matrix.new(1, 0, 0, 1, 0, 0)
local texture = Texture.new("types.png")
 
local function onClick(but, event)
local matrixy = matrix:getTx()
 
	if(but.name == "RIGHTB") then
 
	print(matrixy)
	matrixy = matrixy + 100
	matrix:setTx(matrixy)
 
	end
 
	if(but.name == "LEFTB") then
	matrixy = matrixy - 100
	matrix:setTx(matrixy)
 
	end
end
 
--Now let us draw the texture in the shape
 
myMask:clear()
myMask:setFillStyle(Shape.TEXTURE, texture, matrix)
myMask:beginPath()
myMask:moveTo(10,10)
myMask:lineTo(110,10)
myMask:lineTo(110,100)
myMask:lineTo(10,100)
myMask:lineTo(10,10)
myMask:closePath()
myMask:endPath()
 
local options = Bitmap.new(Texture.new("bottomLeft.png") )
local optionsOver = Bitmap.new(Texture.new("bottomLeftOver.png") )
 
local options2 = Bitmap.new(Texture.new("bottomLeft.png") )
local optionsOver2 = Bitmap.new(Texture.new("bottomLeftOver.png") )
 
RIGHTB = Button.new(options2, optionsOver2, true, false, nil, "Ayarlar2", 20,35, nil, 0x666666)
LEFTB = Button.new(options, optionsOver, true, false, nil, "Ayarlar3", 20,35, nil, 0x666666)
--CENTERB = Button.new(options, optionsOver,false,false,nil,"Ayarlar", 20,35, nil, 0x666666
 
 
LEFTB:setPosition(15,475-LEFTB:getHeight())
RIGHTB:setPosition(795 - RIGHTB:getWidth(),475-RIGHTB:getHeight())
 
LEFTB.name = "LEFTB"
RIGHTB.name = "RIGHTB"
 
LEFTB:addEventListener("click", onClick, LEFTB)
RIGHTB:addEventListener("click", onClick, RIGHTB)
 
 
stage:addChild(LEFTB)
stage:addChild(RIGHTB)
I am trying the attached code to animate the matrix that I attached to the shape but it does not move an inch.
Anyone have an idea
Tagged:

Comments

  • I solved it, added it to a function inside onEnterFrame event and it works. ^^
  • But I have an another question, is there a way to animate/tween those with GTween or something else ?
  • ** I just realize that this discussion is double-posted. So, I re-post my answer just in case the other discussion deleted

    You must redraw your shape

    modify your onClick function to something like this:
    local function onClick(but, event)
    	local matrixy = matrix:getTx()
     
    	if(but.name == "RIGHTB") then
     
    	print(matrixy)
    		matrixy = matrixy + 100
    		matrix:setTx(matrixy)
    	end
     
    	if(but.name == "LEFTB") then
    		matrixy = matrixy - 100
    		matrix:setTx(matrixy)
    	end
     
    	-- redraw the shape
    	myMask:clear()
    	myMask:setFillStyle(Shape.TEXTURE, texture, matrix)
    	myMask:beginPath()
    	myMask:moveTo(10,10)
    	myMask:lineTo(110,10)
    	myMask:lineTo(110,100)
    	myMask:lineTo(10,100)
    	myMask:lineTo(10,10)
    	myMask:closePath()
    	myMask:endPath()
    end
  • Yea I solved that again just after I posted the question :) Now what I am asking is , is it possible to tween this redraw in someway ?
  • Yes, it is possible..

    GTween can tween any value. In your case, you can tween tx & ty value. You need to define getter & setter for tx & ty. Here is a little (untested) example:
    local myMask = Shape.new()
    myMask.matrix = Matrix.new(1, 0, 0, 1, 0, 0)
    myMask.texture = Texture.new("types.png")
     
    myMask.draw = function(self)
    	self:clear()
    	self:setFillStyle(Shape.TEXTURE, self.texture, self.matrix)
    	self:beginPath()
    	self:moveTo(10,10)
    	self:lineTo(110,10)
    	self:lineTo(110,100)
    	self:lineTo(10,100)
    	self:lineTo(10,10)
    	self:closePath()
    	self:endPath()
    end
     
    myMask.get = function(self, param)
    	if param == "tx" then
    		return self.matrix:getTx()
    	elseif param == "ty" then
    		return self.matrix:getTy()
    	else
    		return self:get(param)
    	end
    end
     
    myMask.set = function(self, param, value)
    	if param == "tx" then
    		self.matrix:setTx(value)
    		self:draw()
    	elseif param == "ty" then
    		self.matrix:setTy(value)
    		self:draw()
    	else
    		self:set(param,value)
    	end
    end
    now you can use GTween
    GTween.new(myMask, duration,
    	{
    		tx = newTxValue,
    		ty = newTyValue
    	}
    )
  • twisttaptwisttap Member
    edited August 2012
    How it is possible to tween if we need to redraw the shape each time ? I mean even if I use GTween for those values I need to redraw it everyframe I think ? GTween can tween the values but isnt it a little bit workload to redraw it with an onenterframe?

    tx and ty are not properties of myMask but the matrix object so I cant manipulate them this way..

    GTween.new(myMask, duration,
    {
    tx = newTxValue,
    ty = newTyValue
    }
    )
     
    masking = Core.class(Sprite)
     
    local LEFTB, RIGHTB, matrix, texture, myMask, textureHolder
     
     
    function masking:init(texturename,min,max)
     
     
    myMask = Shape.new()
    matrix = Matrix.new(1, 0, 0, 1, 0, 0)
    self.matrix = matrix
    texture = Texture.new(texturename)
    self.min = min
    self.max = max
     
     
     
     
    self:addEventListener(Event.ENTER_FRAME, self.draw)
    self:onClick(0)
     
    self:addChild(myMask)
    end
     
     
     
    function masking:onClick(but)
     
     
    local matrixy = self.matrix:getTx()
     
    matrixy = matrixy + but
     
    if matrixy > self.min then 
    	matrixy = self.min
    elseif matrixy < self.max then
    	matrixy = self.max
    end
     
    --matrix:setTx(matrixy)
    GTween.new(matrix, 1, {tx = matrixy})
    --self:draw()	
    end
     
    function masking:get(param)
    	return self.matrix:getTx()
    end
     
    function masking:set(param, value)
    	self.matrix:setTx(value)
    	self:draw()
    end
     
    function masking:draw()
    --print(self.matrix)
    myMask:clear()
    myMask:setFillStyle(Shape.TEXTURE, texture, matrix)
    myMask:beginPath()
    myMask:moveTo(10,10)
    myMask:lineTo(110,10)
    myMask:lineTo(110,100)
    myMask:lineTo(10,100)
    myMask:lineTo(10,10)
    myMask:closePath()
    myMask:endPath()
     
     
    end
  • The idea is to redraw after changing the value. If the value is changing everyframe, the redraw function also called everyframe. I think there are no other way..
  • twisttaptwisttap Member
    edited August 2012
    Yea I got that but GTween does not accept tx as a property anyway :/

    GTween.new(myMask, 1, {tx = matrixy}) outputs:

    gtween.lua:387: Parameter 'param' must be one of the accepted values.
    stack traceback:
  • ar2rsawseenar2rsawseen Maintainer
    Accepted Answer
    Dirty hack would be to use x property on some invisible Sprite and retrieve it's value each step >:)
  • Worked like miracle :)
    Cheers both
  • @ar2rsawseen do you have an evil idea about setting gradient masks :=) ?
    Like fading 100 to 0 or not possible :P
  • gtween.lua:387: Parameter 'param' must be one of the accepted values.
    @twisttap
    Did you know that you can tween anything?
    twitter@TheWindApps Artful applications : The Wind Forest. #art #japan #apps
  • @twisttap unfortunately I'm struggling creating gradient myself. And will probably just use an image :D

    @Mells Don't know how did I miss that, that's uber awesome ;)
  • @mells Well I also read that in documents but it simply gave that error and as it works now with @ar2rsawseen 's method i will keep it like that.

    @ar2rsawseen Well then I have to use some other way for the the thing I want.

    No more bright ideas for a scroll bar where the middle image is at 100% alpha and it goes to %0 on sides. This is easy with a mask where center is %100 transparent while edges are %60 so it creates the illusion.

    Else I have to manually do everything if no masking solution is avaible. Like making center sprite %100 transparenct and side ones %60 :/
  • @ar2rsawseen The first time I read that discussion (Tween anything) I was like
    image

    @twisttap
    Well I also read that in documents but it simply gave that error
    I understand that you don't want to be stuck too long but as far as I can understand how things work (and I'm not an experimented dev) -> Parameter 'param' must be one of the accepted values. "should" be solved by the link I gave if implemented well.

    If you need a solution then this will solve your problem. If you want to find an alternative quickly, it's great if @ar2rsawseen 's solution works for your needs.
    twitter@TheWindApps Artful applications : The Wind Forest. #art #japan #apps
    +1 -1 (+2 / -0 )Share on Facebook
  • @mells Yea we are in a hurry so I am doing anything that works for me now, after tomorrows presentation I can work more on the subject I think :)
    thanks
Sign In or Register to comment.