dynamic Mask with matrix

twisttap · August 2012

 
 
 
--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

twisttap · August 2012

I solved it, added it to a function inside onEnterFrame event and it works. ^^

twisttap · August 2012

But I have an another question, is there a way to animate/tween those with GTween or something else ?

zaniar · August 2012

** 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

twisttap · August 2012

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 ?

zaniar · August 2012

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
	}
)

twisttap · 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

zaniar · August 2012

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..

twisttap · 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:

ar2rsawseen · August 2012

Dirty hack would be to use x property on some invisible Sprite and retrieve it's value each step

twisttap · August 2012

Worked like miracle

Cheers both

zaniar · August 2012

@ar2rsawseen simple and effective :-bd

twisttap · August 2012

@ar2rsawseen do you have an evil idea about setting gradient masks :=) ?
Like fading 100 to 0 or not possible :P

Mells · August 2012

gtween.lua:387: Parameter 'param' must be one of the accepted values.

@twisttap
Did you know that you can tween anything?

ar2rsawseen · August 2012

@twisttap unfortunately I'm struggling creating gradient myself. And will probably just use an image

@Mells Don't know how did I miss that, that's uber awesome

twisttap · August 2012

@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

Mells · August 2012

@ar2rsawseen The first time I read that discussion (Tween anything) I was like

@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.

twisttap · August 2012

@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

Howdy, Stranger!

Categories

In this Discussion

Top Posters

dynamic Mask with matrix

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

dynamic Mask with matrix

Comments