Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat | DONATE
Sprite:setAnchorPosition() tween/lerp Help please — Gideros Forum

Sprite:setAnchorPosition() tween/lerp Help please

MoKaLuxMoKaLux Member
edited July 2020 in General questions
dear all, do you know if sprite:setAnchorPosition() can be tweened (lerped) for smooth transition (animation)?
-- camera testXX
local function lerp(a, b, t)
	return a + (b-a) * t
end
-- camera
local camera = Sprite.new()
local bg = Sprite.new()
local mg = Sprite.new()
camera:addChild(bg)
camera:addChild(mg)
stage:addChild(camera)
-- lerping switch
local camswitch = true -- SPACE BAR
local x, x2 = 0, 0 -- lerp between those 2 values
local l = 0 -- lerping value?
-- the scene
camera:setPosition(96, 96)
local pixelbg = Pixel.new(0xff00ff, 1, 64 * 8, 64 * 3)
pixelbg:setPosition(256, 256)
local playerA = Pixel.new(0x0, 1, 64, 64)
playerA:setPosition(256 + 32, 256 + 64)
local playerB = Pixel.new(0x00ff00, 1, 64, 64)
playerB:setPosition(256 + 32 * 4, 256 + 64)
bg:addChild(pixelbg)
mg:addChild(playerB)
mg:addChild(playerA)
 
function onKeyUp(e)
	if e.keyCode == KeyCode.SPACE then
		camswitch = not camswitch
		print(camswitch)
	end
end
stage:addEventListener(Event.KEY_UP, onKeyUp)
 
function onEnterFrame(e)
	x, y = playerA:getPosition()
	x2, y2 = playerB:getPosition()
	if camswitch then
		l = lerp(x, x2, 0.1)
		camera:setAnchorPosition(l, y)
--		camera:setAnchorPosition(x, y)
	else
		l = lerp(x2, x, 0.1)
		camera:setAnchorPosition(l, y)
--		camera:setAnchorPosition(x2, y2)
	end
end
stage:addEventListener(Event.ENTER_FRAME, onEnterFrame)
In the sample project (which you can copy/paste to test) I am trying to make a smooth transition when I change the setAnchorPosition().

I found out, after days and days, that setAnchorPosition() can perfectly fit my needs, the only thing missing is a nice tween (lerp?). Is it possible?

Thank you for your help :)
EDIT: I have edited the code
my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
Tagged:

Comments

  • rrraptorrrraptor Member
    edited July 2020 Accepted Answer
    You need to get camera's anchor position first, then use "camera:setAnchorPosition(...)"
    function onEnterFrame(e)
    	local camX, camY = camera:getAnchorPosition()
    	camX = lerp(camX, dstX, 0.01)
    	camY = lerp(camY, dstY, 0.01)
    	camera:setAnchorPosition(camX, camY)
    end
    Also, MovieClip or GTween can be used aswell.
    local pix = Pixel.new(0x00ff00, 1, 100, 100)
    pix:setPosition(100,100)
    stage:addChild(pix)
     
    --local mc = MovieClip.new{
    --	{1, 100, pix, {anchorX = {0, 100, "outBack"}}}
    --}
     
    local gt = GTween.new(
    	pix, 2, {anchorX = 100}
    )

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
  • MoKaLuxMoKaLux Member
    edited July 2020
    thank you very much (at)rrraptor, I am going to try this right now :) I need to try this and then update the wiki :* DONE
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • rrraptorrrraptor Member
    edited July 2020 Accepted Answer
    MoKaLux said:

    thank you very much (at)rrraptor, I am going to try this right now :) <3
    I totally missed the anchorX parameter for the movieClip :o </p>

    One more thing. You can create "set" function for your class to tween any value you want.
    local Foo = Core.class(Sprite)
     
    function Foo:init()
    	self.myProperty = 0
    	self.myValue = 0
     
    	self:addChild(Pixel.new(0,1,10,10))
    end
    --
    function Foo:myFunction(value)
    	self.myValue = value
    end
    --
    function Foo:set(prop, value)
    	local v = self[prop]
    	if (v) then 
    		if (type(v) == "function") then 
    			v(self, value)
    		else
    			self[prop] = value
    		end
    	end
    end
     
    local bar = Foo.new()
    bar:setPosition(100,50)
    stage:addChild(bar)
     
    local mc = MovieClip.new{
    	{1, 200, bar, {
    		myProperty = {0, 100, "outBack"}, -- tween variable
    		myFunction = {0, 100}, -- tween another variable but using this function
    		x = {0, 100, "outBack"}}
    	}
    }
     
    local tf = TextField.new(nil, "", "|")
    tf:setScale(2)
    tf:setPosition(100,100)
    stage:addChild(tf)
    stage:addEventListener("enterFrame", function()
    	tf:setText(bar.myProperty .. "\n" .. bar.myValue)
    end)

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
  • MoKaLuxMoKaLux Member
    edited July 2020
    mister rrraptor, this is working great (almost perfectly). I am using the movieclip function. Now I need to pick the right timing and easing.

    Thank you once again. I will upload a demo soon to show my progress (liquidfun platformer).

    PS: I want to keep the code as simple as possible for now :o
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • MoKaLuxMoKaLux Member
    edited October 2023
    Playing with movieclip:
    local frames = {}
    local imgnumstartat, imgnumendat = 1, 20 -- image name sequence (eg.: image004.jpg, image005.jpg, ...)
    for i = 1, imgnumendat-imgnumstartat+1 do
    	local iter = imgnumstartat+i-1
    	if iter < 10 then
    		frames[#frames+1] = Bitmap.new(Texture.new("gfx/hero/Jones_base_000"..(imgnumstartat+i-1)..".png", true))
    	elseif iter < 100 then
    		frames[#frames+1] = Bitmap.new(Texture.new("gfx/hero/Jones_base_00"..(imgnumstartat+i-1)..".png", true))
    	elseif iter < 1000 then
    		frames[#frames+1] = Bitmap.new(Texture.new("gfx/hero/Jones_base_0"..(imgnumstartat+i-1)..".png", true))
    	end
    	frames[i]:setAnchorPoint(0.5, 0.5)
    end -- print(#frames) --> 20
     
    local anims = {}
    local timing = 16
    for i = 1, #frames do
    	anims[i] = {(i-1)*timing+1, i*timing, frames[i]}
    end --print(#anims) --> 20
     
    -- add anim frames
    local mc_jones = MovieClip.new{
    	anims[1], -- jones idle
    	anims[2],
    	anims[3],
    	anims[4],
    	anims[5],
    	anims[6],
    	anims[7],
    	anims[8],
    	anims[9], -- jones idle2
    	anims[10],
    	anims[11],
    	anims[12],
    	anims[13],
    	anims[14],
    	anims[15], -- jones idle3
    	anims[16],
    	anims[17],
    	anims[18],
    	anims[19],
    	anims[20],
    } -- can I pass some kind of table here instead?
     
    mc_jones:stop() -- don't play on start
    mc_jones:setPosition(160, 240)
    stage:addChild(mc_jones)
     
    -- key down event
    stage:addEventListener(Event.KEY_DOWN, function(e)
    	if e.keyCode == KeyCode.F then -- jones idle
    		mc_jones:setGotoAction(8*timing, 1)
    		mc_jones:gotoAndPlay(1)
    	elseif e.keyCode == KeyCode.G then -- jones idle2
    		mc_jones:setGotoAction(14*timing, 9*timing)
    		mc_jones:gotoAndPlay(9*timing)
    	elseif e.keyCode == KeyCode.H then -- jones idle3
    		mc_jones:setGotoAction(20*timing, 15*timing)
    		mc_jones:gotoAndPlay(15*timing)
    	end
    end)
    Do you know if I could pass some kind of table instead of passing all the anims 1 to 20? That would be cool :)

    Thank you and Viva Gideros :p
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • hgy29hgy29 Maintainer
    Accepted Answer
    But, you do already, notice the curly brace instead of parenthesis in the call to MovieClip.new, that is just a short hand for supplying a table as first argument.

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
  • MoKaLuxMoKaLux Member
    edited October 2023
    oh I got confused by the movieclip not having parenthesis :s but now I can pass the table :) and the long code becomes this:
    local mc_jones = MovieClip.new(anims)
    Just perfect, thank you hgy29 o:)
    PS: wiki updated https://wiki.gideros.rocks/index.php/MovieClip.new#Example

    Likes: pie

    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
    +1 -1 (+1 / -0 )Share on Facebook
Sign In or Register to comment.