a very simple function who lag ....why ?

Solar2D General Questions/Discussion
#1

Hello, 

I don’t understand why this simpliest snippet lag :

It’s just a Character(a square) who move from left to right and an animation under the cursor ???

It’s lag only when my function CursorAnim() is activated, it’s an naimation who appears under my cursor.

When i comment this function CursorAnim() my Character move with no lag.

Could you explain to me what i’m doing wrong ?

Here I put the image (bouttonanim.png) resolution :100/100pixels  here : 
http://imgur.com/fyDBmr4

and there is the snippet without images except the buttonanim.png if you want to test my main.lua : 

--NECESSARY local mathr = math.random local oRemove = display.remove --GROUP local myGroupBackground = display.newGroup() local myGroupCharacter = display.newGroup() local myGroupCursor = display.newGroup() --CHARACTER------------------------------------------------------------------------------------------- Character = display.newRect( myGroupCharacter,100,100,100,100 ) Character.x = 100 Character.y = 100 Character.xScale=1 Character.yScale =1 Character.myId = 1 Background = display.newRect( myGroupBackground,100,100,100,100 ) Background.x = 100 Background.y = 100 Background:setFillColor(1,0,1) Background.xScale=8 Background.yScale =8 Background.myId = 2 --DISPLACEMENT ON CHARACTER------------------------------- local function nextSide() transition.to(Character, {time=800, x=0}) end local function firstSide() transition.to(Character, {time=800, x=200, onComplete=nextSide}) end local function displacementOnMyCharacter() firstSide() end timer.performWithDelay(1600,displacementOnMyCharacter,-1) --ANIMATION ON CURSOR------------------------------------------------------------------------------ local function CursorAnim(d) --anim on cursor local CursorAnim = display.newImageRect( myGroupCursor, "bouttonanim.png", 180, 180) CursorAnim.x = d.x CursorAnim.y= d.y CursorAnim.xScale=0.6 CursorAnim.yScale=0.6 CursorAnim.alpha=1 local CursorAnim2 = display.newImageRect( myGroupCursor, "bouttonanim.png", 180, 180) CursorAnim2.x = d.x CursorAnim2.y= d.y CursorAnim2.xScale=0.8 CursorAnim2.yScale=0.8 CursorAnim2.alpha=0.2 local function removeCursorAnim() oRemove(CursorAnim) CursorAnim=nil end local function removeCursorAnim2() oRemove(CursorAnim2) CursorAnim2=nil end transition.to(CursorAnim, { time=150, x=CursorAnim.x, y=CursorAnim.y, yScale=0.3, xScale=0.3, alpha=0.5, onComplete=removeCursorAnim}) transition.to(CursorAnim2, {time=150, x=CursorAnim2.x, y=CursorAnim2.y, yScale=0.3, xScale=0.3, alpha=0.01, onComplete=removeCursorAnim2}) end --LISTENER ------------------------------------------------------------------------------------------- local function conditions(k) if k == 1 then print("character touched", "it's the number", k) elseif k == 2 then print("background touched") end --if end --conditions local function tapOnCharacter(event) if event.phase == "ended" then CursorAnim(event) target = event.target for k=1,2 do if target.myId == (k) then conditions(k) end --if end --if end -- for return true end Character:addEventListener("touch", tapOnCharacter) Background:addEventListener("touch", tapOnCharacter)
#2

Hi @espace3d,

I would check carefully that you’re not accidentally triggering multiple transitions on the same object. If you somehow did that, a whole series of them may stack up and fight against each other, causing the impression of “lag”.

Take care,

Brent

#3

Hi Brent, thanks for your response but…

I tried to do what you told me but even with a flag (flagCursorAnim) that prevents two transitions on the same object when I click repeatedly, my character moves with jerks and interruptions … it is not a transition problem ?

--NECESSARY local mathr = math.random local oRemove = display.remove local flagCursorAnim = true --GROUP local myGroupBackground = display.newGroup() local myGroupCharacter = display.newGroup() local myGroupCursor = display.newGroup() --CHARACTER AND BACKGROUND----------------------------------------------------- Character = display.newRect( myGroupCharacter,100,100,100,100 ) Character.x = 100 Character.y = 100 Character.xScale=1 Character.yScale =1 Character.myId = 1 Background = display.newRect( myGroupBackground,100,100,100,100 ) Background.x = 100 Background.y = 100 Background:setFillColor(1,0,1) Background.xScale=8 Background.yScale =8 Background.myId = 2 --DISPLACEMENT ON CHARACTER------------------------------- local function nextSide() transition.to(Character, {time=800, x=0}) end local function firstSide() transition.to(Character, {time=800, x=200, onComplete=nextSide}) end local function displacementOnMyCharacter() firstSide() end timer.performWithDelay(1600,displacementOnMyCharacter,-1) --ANIMATION ON CURSOR---------------------------------------- local function CursorAnim(d) --anim on cursor if flagCursorAnim then flagCursorAnim = false local CursorAnim = display.newImageRect( myGroupCursor, "bouttonanim.png", 180, 180) CursorAnim.x = d.x CursorAnim.y= d.y CursorAnim.xScale=0.6 CursorAnim.yScale=0.6 CursorAnim.alpha=1 local CursorAnim2 = display.newImageRect( myGroupCursor, "bouttonanim.png", 180, 180) CursorAnim2.x = d.x CursorAnim2.y= d.y CursorAnim2.xScale=0.8 CursorAnim2.yScale=0.8 CursorAnim2.alpha=0.2 local function removeCursorAnim() oRemove(CursorAnim) CursorAnim=nil end local function removeCursorAnim2() oRemove(CursorAnim2) CursorAnim2=nil flagCursorAnim = true end transition.to(CursorAnim, { time=150, x=CursorAnim.x, y=CursorAnim.y, yScale=0.3, xScale=0.3, alpha=0.5, onComplete=removeCursorAnim}) transition.to(CursorAnim2, {time=150, x=CursorAnim2.x, y=CursorAnim2.y, yScale=0.3, xScale=0.3, alpha=0.01, onComplete=removeCursorAnim2}) end --if end --function --LISTENER ------------------------------------------------------------------------------------------------------------------------------------------ local function conditions(k) if k == 1 then print("character touched", "it's the number", k) elseif k == 2 then print("background touched") end --if end --conditions local function tapOnCharacter(event) if event.phase == "ended" then CursorAnim(event) target = event.target for k=1,2 do if target.myId == (k) then conditions(k) end --if end --if end -- for return true end Character:addEventListener("touch", tapOnCharacter) Background:addEventListener("touch", tapOnCharacter)
#4

if I replace my image by an object ( "circle " ) I do not have any slowdown in moving my character … It’s rather annoying to not be able to put an image as animation, there must be an explanation. … Could you test at home? thanks.

#5

I don’t have your resources nor do I know what’s in your build.settings or config.lua, but I don’t see any slow down.  Are you having a problem with this on a device?   My simulator doesn’t have an issue with this.

Rob

#6

Hi Rob,

it’s very strange so from the simulator i have created a blank project to have clean builds.setting and config.lua

the version of the simulator is the last : CoronaSDK-2014-2511.msi

test with the simulator on windows 7 on pc

test on native on a samsung galaxy s4 (the apk where from a mackbook)

I have tested with all device on the simulator and i have replace my image with the default icon : Icon.png

When i clic a lot the square move with interruptions.

I post a video for understand this :

https://youtu.be/y3DGRHIWV5Q

the fisrt time i dont’clic > the square move with no lag

the second time i clic > the square move with lag (at 3secondes)

the third time i dont’clic > the square move with no lag

----------------------------------------------------------------------------------------- -- -- main.lua -- ----------------------------------------------------------------------------------------- --NECESSARY local mathr = math.random local oRemove = display.remove local flagCursorAnim = true --GROUP local myGroupBackground = display.newGroup() local myGroupCharacter = display.newGroup() local myGroupCursor = display.newGroup() --CHARACTER AND BACKGROUND----------------------------------------------------- Character = display.newRect( myGroupCharacter,100,100,100,100 ) Character.x = 100 Character.y = 100 Character.xScale=1 Character.yScale =1 Character.myId = 1 Background = display.newRect( myGroupBackground,100,100,100,100 ) Background.x = 100 Background.y = 100 Background:setFillColor(1,0,1) Background.xScale=8 Background.yScale =8 Background.myId = 2 --DISPLACEMENT ON CHARACTER------------------------------- local function nextSide() transition.to(Character, {time=800, x=0}) end local function firstSide() transition.to(Character, {time=800, x=200, onComplete=nextSide}) end local function displacementOnMyCharacter() firstSide() end timer.performWithDelay(1600,displacementOnMyCharacter,-1) --ANIMATION ON CURSOR---------------------------------------- local function CursorAnim(d) --anim on cursor if flagCursorAnim then flagCursorAnim = false local CursorAnim = display.newImageRect( myGroupCursor, "Icon.png", 180, 180) CursorAnim.x = d.x CursorAnim.y= d.y CursorAnim.xScale=0.6 CursorAnim.yScale=0.6 CursorAnim.alpha=1 local CursorAnim2 = display.newImageRect( myGroupCursor, "Icon.png", 180, 180) CursorAnim2.x = d.x CursorAnim2.y= d.y CursorAnim2.xScale=0.8 CursorAnim2.yScale=0.8 CursorAnim2.alpha=0.2 local function removeCursorAnim() oRemove(CursorAnim) CursorAnim=nil end local function removeCursorAnim2() oRemove(CursorAnim2) CursorAnim2=nil flagCursorAnim = true end transition.to(CursorAnim, { time=150, x=CursorAnim.x, y=CursorAnim.y, yScale=0.3, xScale=0.3, alpha=0.5, onComplete=removeCursorAnim}) transition.to(CursorAnim2, {time=150, x=CursorAnim2.x, y=CursorAnim2.y, yScale=0.3, xScale=0.3, alpha=0.01, onComplete=removeCursorAnim2}) end --if end --function --LISTENER ------------------------------------------------------------------------------------------------------------------------------------------ local function conditions(k) if k == 1 then print("character touched", "it's the number", k) elseif k == 2 then print("background touched") end --if end --conditions local function tapOnCharacter(event) if event.phase == "ended" then CursorAnim(event) target = event.target for k=1,2 do if target.myId == (k) then conditions(k) end --if end --if end -- for return true end Character:addEventListener("touch", tapOnCharacter) Background:addEventListener("touch", tapOnCharacter)

-- -- For more information on build.settings see the Corona SDK Build Guide at: -- http://docs.coronalabs.com/guide/distribution/buildSettings/index.html -- settings = { orientation = { -- Supported values for orientation: -- portrait, portraitUpsideDown, landscapeLeft, landscapeRight default = "portrait", supported = { "portrait", } }, excludeFiles = { -- Include only the necessary icon files on each platform iphone = { "Icon-\*dpi.png", }, android = { "Icon.png", "Icon-Small-\*.png", "Icon\*@2x.png", }, }, -- -- iOS Section -- iphone = { plist = { UIStatusBarHidden = false, UIPrerenderedIcon = true, -- set to false for "shine" overlay --UIApplicationExitsOnSuspend = true, -- uncomment to quit app on suspend CFBundleIconFiles = { "Icon.png", "Icon@2x.png", "Icon-60.png", "Icon-60@2x.png", "Icon-60@3x.png", "Icon-72.png", "Icon-72@2x.png", "Icon-76.png", "Icon-76@2x.png", "Icon-Small.png", "Icon-Small@2x.png", "Icon-Small@3x.png", "Icon-Small-40.png", "Icon-Small-40@2x.png", "Icon-Small-50.png", "Icon-Small-50@2x.png", }, --[[-- iOS app URL schemes: CFBundleURLTypes = { { CFBundleURLSchemes = { "fbXXXXXXXXX", -- replace XXXXXXXXX with your Facebook appId } } } --]] } }, -- -- Android Section -- android = { usesPermissions = { "android.permission.INTERNET", }, }, }

application = { content = { width = 320, height = 480, scale = "letterBox", fps = 30, --[[imageSuffix = { ["@2x"] = 2, }, --]] }, --[[-- Push notifications notification = { iphone = { types = { "badge", "sound", "alert", "newsstand" } } }, --]] }
#7

The only thing you’re doing that’s not very optimal is loading two images from disk storage every time you tap.  You could preload them and leave them in memory and just change the alpha to 0 on initial load and when your transition ends.  Don’t remove the image when complete.

Rob

#8

Hi Rob, How did you preload an image ? I believed that with local it was enough

#9

local defines the scope to where a variable is visible.  For instance, where you’re defining it now, it’s only visible inside that function and any blocks defined in the function.  Scope works on a outer-to-inner method.  If you define something local in the main chunk of the module anything in the module can see it.

What I meant by preloading is that you could in the main chunk load the images and then never delete them by doing:

local CursorAnim = display.newImageRect( myGroupCursor, “Icon.png”, 180, 180)

outside of the function. 

Rob

#10

ok thanks i believed that remove my image is better than load them all the time.

Take care.

#11

Hi @espace3d,

I would check carefully that you’re not accidentally triggering multiple transitions on the same object. If you somehow did that, a whole series of them may stack up and fight against each other, causing the impression of “lag”.

Take care,

Brent

#12

Hi Brent, thanks for your response but…

I tried to do what you told me but even with a flag (flagCursorAnim) that prevents two transitions on the same object when I click repeatedly, my character moves with jerks and interruptions … it is not a transition problem ?

--NECESSARY local mathr = math.random local oRemove = display.remove local flagCursorAnim = true --GROUP local myGroupBackground = display.newGroup() local myGroupCharacter = display.newGroup() local myGroupCursor = display.newGroup() --CHARACTER AND BACKGROUND----------------------------------------------------- Character = display.newRect( myGroupCharacter,100,100,100,100 ) Character.x = 100 Character.y = 100 Character.xScale=1 Character.yScale =1 Character.myId = 1 Background = display.newRect( myGroupBackground,100,100,100,100 ) Background.x = 100 Background.y = 100 Background:setFillColor(1,0,1) Background.xScale=8 Background.yScale =8 Background.myId = 2 --DISPLACEMENT ON CHARACTER------------------------------- local function nextSide() transition.to(Character, {time=800, x=0}) end local function firstSide() transition.to(Character, {time=800, x=200, onComplete=nextSide}) end local function displacementOnMyCharacter() firstSide() end timer.performWithDelay(1600,displacementOnMyCharacter,-1) --ANIMATION ON CURSOR---------------------------------------- local function CursorAnim(d) --anim on cursor if flagCursorAnim then flagCursorAnim = false local CursorAnim = display.newImageRect( myGroupCursor, "bouttonanim.png", 180, 180) CursorAnim.x = d.x CursorAnim.y= d.y CursorAnim.xScale=0.6 CursorAnim.yScale=0.6 CursorAnim.alpha=1 local CursorAnim2 = display.newImageRect( myGroupCursor, "bouttonanim.png", 180, 180) CursorAnim2.x = d.x CursorAnim2.y= d.y CursorAnim2.xScale=0.8 CursorAnim2.yScale=0.8 CursorAnim2.alpha=0.2 local function removeCursorAnim() oRemove(CursorAnim) CursorAnim=nil end local function removeCursorAnim2() oRemove(CursorAnim2) CursorAnim2=nil flagCursorAnim = true end transition.to(CursorAnim, { time=150, x=CursorAnim.x, y=CursorAnim.y, yScale=0.3, xScale=0.3, alpha=0.5, onComplete=removeCursorAnim}) transition.to(CursorAnim2, {time=150, x=CursorAnim2.x, y=CursorAnim2.y, yScale=0.3, xScale=0.3, alpha=0.01, onComplete=removeCursorAnim2}) end --if end --function --LISTENER ------------------------------------------------------------------------------------------------------------------------------------------ local function conditions(k) if k == 1 then print("character touched", "it's the number", k) elseif k == 2 then print("background touched") end --if end --conditions local function tapOnCharacter(event) if event.phase == "ended" then CursorAnim(event) target = event.target for k=1,2 do if target.myId == (k) then conditions(k) end --if end --if end -- for return true end Character:addEventListener("touch", tapOnCharacter) Background:addEventListener("touch", tapOnCharacter)
#13

if I replace my image by an object ( "circle " ) I do not have any slowdown in moving my character … It’s rather annoying to not be able to put an image as animation, there must be an explanation. … Could you test at home? thanks.

#14

I don’t have your resources nor do I know what’s in your build.settings or config.lua, but I don’t see any slow down.  Are you having a problem with this on a device?   My simulator doesn’t have an issue with this.

Rob

#15

Hi Rob,

it’s very strange so from the simulator i have created a blank project to have clean builds.setting and config.lua

the version of the simulator is the last : CoronaSDK-2014-2511.msi

test with the simulator on windows 7 on pc

test on native on a samsung galaxy s4 (the apk where from a mackbook)

I have tested with all device on the simulator and i have replace my image with the default icon : Icon.png

When i clic a lot the square move with interruptions.

I post a video for understand this :

https://youtu.be/y3DGRHIWV5Q

the fisrt time i dont’clic > the square move with no lag

the second time i clic > the square move with lag (at 3secondes)

the third time i dont’clic > the square move with no lag

----------------------------------------------------------------------------------------- -- -- main.lua -- ----------------------------------------------------------------------------------------- --NECESSARY local mathr = math.random local oRemove = display.remove local flagCursorAnim = true --GROUP local myGroupBackground = display.newGroup() local myGroupCharacter = display.newGroup() local myGroupCursor = display.newGroup() --CHARACTER AND BACKGROUND----------------------------------------------------- Character = display.newRect( myGroupCharacter,100,100,100,100 ) Character.x = 100 Character.y = 100 Character.xScale=1 Character.yScale =1 Character.myId = 1 Background = display.newRect( myGroupBackground,100,100,100,100 ) Background.x = 100 Background.y = 100 Background:setFillColor(1,0,1) Background.xScale=8 Background.yScale =8 Background.myId = 2 --DISPLACEMENT ON CHARACTER------------------------------- local function nextSide() transition.to(Character, {time=800, x=0}) end local function firstSide() transition.to(Character, {time=800, x=200, onComplete=nextSide}) end local function displacementOnMyCharacter() firstSide() end timer.performWithDelay(1600,displacementOnMyCharacter,-1) --ANIMATION ON CURSOR---------------------------------------- local function CursorAnim(d) --anim on cursor if flagCursorAnim then flagCursorAnim = false local CursorAnim = display.newImageRect( myGroupCursor, "Icon.png", 180, 180) CursorAnim.x = d.x CursorAnim.y= d.y CursorAnim.xScale=0.6 CursorAnim.yScale=0.6 CursorAnim.alpha=1 local CursorAnim2 = display.newImageRect( myGroupCursor, "Icon.png", 180, 180) CursorAnim2.x = d.x CursorAnim2.y= d.y CursorAnim2.xScale=0.8 CursorAnim2.yScale=0.8 CursorAnim2.alpha=0.2 local function removeCursorAnim() oRemove(CursorAnim) CursorAnim=nil end local function removeCursorAnim2() oRemove(CursorAnim2) CursorAnim2=nil flagCursorAnim = true end transition.to(CursorAnim, { time=150, x=CursorAnim.x, y=CursorAnim.y, yScale=0.3, xScale=0.3, alpha=0.5, onComplete=removeCursorAnim}) transition.to(CursorAnim2, {time=150, x=CursorAnim2.x, y=CursorAnim2.y, yScale=0.3, xScale=0.3, alpha=0.01, onComplete=removeCursorAnim2}) end --if end --function --LISTENER ------------------------------------------------------------------------------------------------------------------------------------------ local function conditions(k) if k == 1 then print("character touched", "it's the number", k) elseif k == 2 then print("background touched") end --if end --conditions local function tapOnCharacter(event) if event.phase == "ended" then CursorAnim(event) target = event.target for k=1,2 do if target.myId == (k) then conditions(k) end --if end --if end -- for return true end Character:addEventListener("touch", tapOnCharacter) Background:addEventListener("touch", tapOnCharacter)

-- -- For more information on build.settings see the Corona SDK Build Guide at: -- http://docs.coronalabs.com/guide/distribution/buildSettings/index.html -- settings = { orientation = { -- Supported values for orientation: -- portrait, portraitUpsideDown, landscapeLeft, landscapeRight default = "portrait", supported = { "portrait", } }, excludeFiles = { -- Include only the necessary icon files on each platform iphone = { "Icon-\*dpi.png", }, android = { "Icon.png", "Icon-Small-\*.png", "Icon\*@2x.png", }, }, -- -- iOS Section -- iphone = { plist = { UIStatusBarHidden = false, UIPrerenderedIcon = true, -- set to false for "shine" overlay --UIApplicationExitsOnSuspend = true, -- uncomment to quit app on suspend CFBundleIconFiles = { "Icon.png", "Icon@2x.png", "Icon-60.png", "Icon-60@2x.png", "Icon-60@3x.png", "Icon-72.png", "Icon-72@2x.png", "Icon-76.png", "Icon-76@2x.png", "Icon-Small.png", "Icon-Small@2x.png", "Icon-Small@3x.png", "Icon-Small-40.png", "Icon-Small-40@2x.png", "Icon-Small-50.png", "Icon-Small-50@2x.png", }, --[[-- iOS app URL schemes: CFBundleURLTypes = { { CFBundleURLSchemes = { "fbXXXXXXXXX", -- replace XXXXXXXXX with your Facebook appId } } } --]] } }, -- -- Android Section -- android = { usesPermissions = { "android.permission.INTERNET", }, }, }

application = { content = { width = 320, height = 480, scale = "letterBox", fps = 30, --[[imageSuffix = { ["@2x"] = 2, }, --]] }, --[[-- Push notifications notification = { iphone = { types = { "badge", "sound", "alert", "newsstand" } } }, --]] }
#16

The only thing you’re doing that’s not very optimal is loading two images from disk storage every time you tap.  You could preload them and leave them in memory and just change the alpha to 0 on initial load and when your transition ends.  Don’t remove the image when complete.

Rob

#17

Hi Rob, How did you preload an image ? I believed that with local it was enough

#18

local defines the scope to where a variable is visible.  For instance, where you’re defining it now, it’s only visible inside that function and any blocks defined in the function.  Scope works on a outer-to-inner method.  If you define something local in the main chunk of the module anything in the module can see it.

What I meant by preloading is that you could in the main chunk load the images and then never delete them by doing:

local CursorAnim = display.newImageRect( myGroupCursor, “Icon.png”, 180, 180)

outside of the function. 

Rob

#19

ok thanks i believed that remove my image is better than load them all the time.

Take care.