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

    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:
    +1 -1Share on Facebook

    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

      SuperShape | Nice blured shapes with shadows | Simple button pad | Simple layer class | Simple UI library | 2D camera lib | Color picker | FPS graph | Dear ImGui | cute_c2
      +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
      +1 -1Share on Facebook
    • 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

      SuperShape | Nice blured shapes with shadows | Simple button pad | Simple layer class | Simple UI library | 2D camera lib | Color picker | FPS graph | Dear ImGui | cute_c2
      +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
      +1 -1Share on Facebook
    • 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
      +1 -1Share on Facebook
    • 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.