Smooth movement of a group with 3000 elements by touch

Hi
How to get a smooth moving group with by touch with a large number of elements for example 3000.

On my average android, the movement takes place in small jerks.

If the elements are reduced to 10 then move be smooth.

Sample code:

main.lua

local composer = require( "composer" ) composer.gotoScene( "demo" )

demo.lua:

local composer = require( "composer" ) local scene = composer.newScene() local COUNT\_ROWS = 60 local COUNT\_CELLS = 60 local MARGIN\_RECT = 3 local RECT\_SIZE = 30 local viewGroup local rectsPreferenses = {} local cretateRectsGroup , initRectsPrefs , onTouch , scalePropByWidthHeight function scene:create(event) self.sceneGroup = self.view local bg = display.newRect(display.screenOriginX, display.screenOriginY, display.actualContentWidth, display.actualContentHeight) bg.anchorX = 0 bg.anchorY = 0 bg:setFillColor(1,1,0) self.sceneGroup:insert(bg) end function scene:destroy( event ) end function scene:show( event ) if event.phase == "will" then viewGroup = cretateRectsGroup(self.sceneGroup) local maxWidth = display.actualContentWidth local maxHeight = display.actualContentWidth local initScale = scalePropByWidthHeight(viewGroup, {height = maxHeight, width = maxWidth}) viewGroup.xScale = initScale viewGroup.yScale = initScale elseif event.phase == "did" then end end function scene:hide( event ) end function cretateRectsGroup(sceneGroup) local group = display.newGroup() group.x = display.actualContentWidth/2 + display.screenOriginX group.y = display.actualContentHeight/2 + display.screenOriginY group.anchorChildren = true local bgW = COUNT\_ROWS\*RECT\_SIZE + COUNT\_ROWS\*MARGIN\_RECT local bgH = COUNT\_CELLS\*RECT\_SIZE + COUNT\_CELLS\*MARGIN\_RECT local bg = display.newRect(0, 0, bgW, bgH) bg.anchorX = 0 bg.anchorY = 0 bg:setFillColor(0,1,0) bg:addEventListener("touch", onTouch) group:insert(bg) initRectsPrefs(0,0) for i=1, #rectsPreferenses do local rectPref = rectsPreferenses[i] local rect = display.newRect(0, 0, rectPref.width, rectPref.height) rect.anchorX = 0 rect.anchorY = 0 rect.x = rectPref.x rect.y = rectPref.y rect:setFillColor(rectPref.fillColor[1], rectPref.fillColor[2], rectPref.fillColor[3]) group:insert(rect) end sceneGroup:insert(group) return group end function initRectsPrefs(x, y) local index = 0 local curX = x local curY = y math.randomseed(os.time()) local rand = math.random for i=1, COUNT\_ROWS do curX = x for j=1, COUNT\_CELLS do index = index + 1 local r = rand() local g = rand() local b = rand() local optRect = { id = index , x = curX , y = curY , width = RECT\_SIZE , height = RECT\_SIZE , fillColor = {r, g, b} } rectsPreferenses[index] = optRect curX = curX + RECT\_SIZE + MARGIN\_RECT end curY = curY + RECT\_SIZE + MARGIN\_RECT end end function onTouch(event) local group = event.target.parent local newTouchX, newTouchY = event.x, event.y if (event.phase == "began") or (group.lastTouchPosX == nil) or (group.lastTouchPosY == nil) then group.lastTouchPosX = newTouchX group.lastTouchPosY = newTouchY return end if (event.phase == "ended") or (event.phase == "cancelled") then group.lastTouchPosX = nil group.lastTouchPosY = nil return end local deltaX = (newTouchX - group.lastTouchPosX) local deltaY = (newTouchY - group.lastTouchPosY) group.x = group.x + deltaX group.y = group.y + deltaY group.lastTouchPosX = newTouchX group.lastTouchPosY = newTouchY end function scalePropByWidthHeight(target, targerTo) local scale = 1 local scaleSize = target.width if target.height \> target.width then scaleSize = target.height end if ( scaleSize/targerTo.width \> scaleSize/targerTo.height ) then scale = targerTo.width/scaleSize else scale = targerTo.height/scaleSize end return scale end scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) return scene

I found a solution to this problem using the output to the texture.

(texture = graphics.newTexture( {type="canvas", width=textureW, height=textureH} ))

demo.lua:

local composer = require( "composer" ) local scene = composer.newScene() local COUNT\_ROWS = 60 local COUNT\_CELLS = 60 local MARGIN\_RECT = 3 local RECT\_SIZE = 30 local viewGroup local rectsPreferenses = {} local cretateRectsGroup , initRectsPrefs , onTouch , scalePropByWidthHeight function scene:create(event) self.sceneGroup = self.view local bg = display.newRect(display.screenOriginX, display.screenOriginY, display.actualContentWidth, display.actualContentHeight) bg.anchorX = 0 bg.anchorY = 0 bg:setFillColor(1,1,0) self.sceneGroup:insert(bg) end function scene:destroy( event ) if self.sceneGroup.texture then self.sceneGroup.texture:removeSelf() end end function scene:show( event ) if event.phase == "will" then viewGroup = cretateRectsGroup(self.sceneGroup) local maxWidth = display.actualContentWidth local maxHeight = display.actualContentWidth local initScale = scalePropByWidthHeight(viewGroup, {height = maxHeight, width = maxWidth}) viewGroup.xScale = initScale viewGroup.yScale = initScale elseif event.phase == "did" then end end function scene:hide( event ) end function cretateRectsGroup(sceneGroup) local group = display.newGroup() group.x = display.actualContentWidth/2 + display.screenOriginX group.y = display.actualContentHeight/2 + display.screenOriginY group.anchorChildren = true local bgW = COUNT\_ROWS\*RECT\_SIZE + COUNT\_ROWS\*MARGIN\_RECT local bgH = COUNT\_CELLS\*RECT\_SIZE + COUNT\_CELLS\*MARGIN\_RECT local bg = display.newRect(0, 0, bgW, bgH) bg.anchorX = 0 bg.anchorY = 0 bg:setFillColor(0,1,0) bg:addEventListener("touch", onTouch) group:insert(bg) local textureGroup = display.newGroup() textureGroup.anchorX = 0 textureGroup.anchorY = 0 local bgTetxture = display.newRect(0, 0, bgW, bgH) bgTetxture.anchorX = 0 bgTetxture.anchorY = 0 bgTetxture:setFillColor(0,1,0) textureGroup:insert(bgTetxture) initRectsPrefs(0,0) for i=1, #rectsPreferenses do local rectPref = rectsPreferenses[i] local rect = display.newRect(0, 0, rectPref.width, rectPref.height) rect.anchorX = 0 rect.anchorY = 0 rect.x = rectPref.x rect.y = rectPref.y rect:setFillColor(rectPref.fillColor[1], rectPref.fillColor[2], rectPref.fillColor[3]) textureGroup:insert(rect) end local textureW = bgW local textureH = bgH local texture = graphics.newTexture( {type="canvas", width=textureW, height=textureH} ) sceneGroup.texture = texture local offsetZerroTextureX = -(textureW\*0.5) local offsetZerroTextureY = -(textureH\*0.5) local imgTexture = display.newImageRect(group, texture.filename, texture.baseDir, textureW, textureH) sceneGroup.imgTexture = imgTexture imgTexture.anchorX = 0 imgTexture.anchorY = 0 textureGroup.x = offsetZerroTextureX textureGroup.y = offsetZerroTextureY texture:draw(textureGroup) texture:invalidate( {source="cache", accumulate=false} ) return group end function initRectsPrefs(x, y) local index = 0 local curX = x local curY = y math.randomseed(os.time()) local rand = math.random for i=1, COUNT\_ROWS do curX = x for j=1, COUNT\_CELLS do index = index + 1 local r = rand() local g = rand() local b = rand() local optRect = { id = index , x = curX , y = curY , width = RECT\_SIZE , height = RECT\_SIZE , fillColor = {r, g, b} } rectsPreferenses[index] = optRect curX = curX + RECT\_SIZE + MARGIN\_RECT end curY = curY + RECT\_SIZE + MARGIN\_RECT end end function onTouch(event) local group = event.target.parent local newTouchX, newTouchY = event.x, event.y if (event.phase == "began") or (group.lastTouchPosX == nil) or (group.lastTouchPosY == nil) then group.lastTouchPosX = newTouchX group.lastTouchPosY = newTouchY return end if (event.phase == "ended") or (event.phase == "cancelled") then group.lastTouchPosX = nil group.lastTouchPosY = nil return end local deltaX = (newTouchX - group.lastTouchPosX) local deltaY = (newTouchY - group.lastTouchPosY) group.x = group.x + deltaX group.y = group.y + deltaY group.lastTouchPosX = newTouchX group.lastTouchPosY = newTouchY end function scalePropByWidthHeight(target, targerTo) local scale = 1 local scaleSize = target.width if target.height \> target.width then scaleSize = target.height end if ( scaleSize/targerTo.width \> scaleSize/targerTo.height ) then scale = targerTo.width/scaleSize else scale = targerTo.height/scaleSize end return scale end scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) return scene

I found a solution to this problem using the output to the texture.

(texture = graphics.newTexture( {type="canvas", width=textureW, height=textureH} ))

demo.lua:

local composer = require( "composer" ) local scene = composer.newScene() local COUNT\_ROWS = 60 local COUNT\_CELLS = 60 local MARGIN\_RECT = 3 local RECT\_SIZE = 30 local viewGroup local rectsPreferenses = {} local cretateRectsGroup , initRectsPrefs , onTouch , scalePropByWidthHeight function scene:create(event) self.sceneGroup = self.view local bg = display.newRect(display.screenOriginX, display.screenOriginY, display.actualContentWidth, display.actualContentHeight) bg.anchorX = 0 bg.anchorY = 0 bg:setFillColor(1,1,0) self.sceneGroup:insert(bg) end function scene:destroy( event ) if self.sceneGroup.texture then self.sceneGroup.texture:removeSelf() end end function scene:show( event ) if event.phase == "will" then viewGroup = cretateRectsGroup(self.sceneGroup) local maxWidth = display.actualContentWidth local maxHeight = display.actualContentWidth local initScale = scalePropByWidthHeight(viewGroup, {height = maxHeight, width = maxWidth}) viewGroup.xScale = initScale viewGroup.yScale = initScale elseif event.phase == "did" then end end function scene:hide( event ) end function cretateRectsGroup(sceneGroup) local group = display.newGroup() group.x = display.actualContentWidth/2 + display.screenOriginX group.y = display.actualContentHeight/2 + display.screenOriginY group.anchorChildren = true local bgW = COUNT\_ROWS\*RECT\_SIZE + COUNT\_ROWS\*MARGIN\_RECT local bgH = COUNT\_CELLS\*RECT\_SIZE + COUNT\_CELLS\*MARGIN\_RECT local bg = display.newRect(0, 0, bgW, bgH) bg.anchorX = 0 bg.anchorY = 0 bg:setFillColor(0,1,0) bg:addEventListener("touch", onTouch) group:insert(bg) local textureGroup = display.newGroup() textureGroup.anchorX = 0 textureGroup.anchorY = 0 local bgTetxture = display.newRect(0, 0, bgW, bgH) bgTetxture.anchorX = 0 bgTetxture.anchorY = 0 bgTetxture:setFillColor(0,1,0) textureGroup:insert(bgTetxture) initRectsPrefs(0,0) for i=1, #rectsPreferenses do local rectPref = rectsPreferenses[i] local rect = display.newRect(0, 0, rectPref.width, rectPref.height) rect.anchorX = 0 rect.anchorY = 0 rect.x = rectPref.x rect.y = rectPref.y rect:setFillColor(rectPref.fillColor[1], rectPref.fillColor[2], rectPref.fillColor[3]) textureGroup:insert(rect) end local textureW = bgW local textureH = bgH local texture = graphics.newTexture( {type="canvas", width=textureW, height=textureH} ) sceneGroup.texture = texture local offsetZerroTextureX = -(textureW\*0.5) local offsetZerroTextureY = -(textureH\*0.5) local imgTexture = display.newImageRect(group, texture.filename, texture.baseDir, textureW, textureH) sceneGroup.imgTexture = imgTexture imgTexture.anchorX = 0 imgTexture.anchorY = 0 textureGroup.x = offsetZerroTextureX textureGroup.y = offsetZerroTextureY texture:draw(textureGroup) texture:invalidate( {source="cache", accumulate=false} ) return group end function initRectsPrefs(x, y) local index = 0 local curX = x local curY = y math.randomseed(os.time()) local rand = math.random for i=1, COUNT\_ROWS do curX = x for j=1, COUNT\_CELLS do index = index + 1 local r = rand() local g = rand() local b = rand() local optRect = { id = index , x = curX , y = curY , width = RECT\_SIZE , height = RECT\_SIZE , fillColor = {r, g, b} } rectsPreferenses[index] = optRect curX = curX + RECT\_SIZE + MARGIN\_RECT end curY = curY + RECT\_SIZE + MARGIN\_RECT end end function onTouch(event) local group = event.target.parent local newTouchX, newTouchY = event.x, event.y if (event.phase == "began") or (group.lastTouchPosX == nil) or (group.lastTouchPosY == nil) then group.lastTouchPosX = newTouchX group.lastTouchPosY = newTouchY return end if (event.phase == "ended") or (event.phase == "cancelled") then group.lastTouchPosX = nil group.lastTouchPosY = nil return end local deltaX = (newTouchX - group.lastTouchPosX) local deltaY = (newTouchY - group.lastTouchPosY) group.x = group.x + deltaX group.y = group.y + deltaY group.lastTouchPosX = newTouchX group.lastTouchPosY = newTouchY end function scalePropByWidthHeight(target, targerTo) local scale = 1 local scaleSize = target.width if target.height \> target.width then scaleSize = target.height end if ( scaleSize/targerTo.width \> scaleSize/targerTo.height ) then scale = targerTo.width/scaleSize else scale = targerTo.height/scaleSize end return scale end scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) return scene