동일한 Fill 객체를 공유하는 폴리곤으로 끝없는 곡선을 만드시겠습니까?

Question

끝없는 곡선을 만들기 위해 노력하고 있으며 지금까지 베 지어 곡선을 사용하여 곡선을 작성한 다음 새 곡선을 작성하고 X 및 Y 위치를 설정하여 동일한 곡선의 일부로 보이도록했습니다 나는 이것이이 문제를 해결할 수있는 올바른 방법이 아니며 그래픽이 똑같은 정체성을 가지지 않으므로 실제로보기에 좋지 않게 만든다.

커브 채우기가 잘 보이는 끝없는 커브 (Tiny Wings의 커브와 유사)를 만드는 것이 어떻게 가능합니까? http://www.youtube.com/results?search_query=tiny%20wings&sm=3

기존 폴리곤에 버텍스를 추가 할 수 있습니까? 예를 들어 커브 1을 만들고 새 커브를 만들고 커브 하나의 꼭지점을 새 버텍스와 연결하여 현재 커브를 바꿉니다.

아니면 이전 버텍스를 저장하고 oldVertices + newVertices를 기반으로 새 폴리곤을 만드시겠습니까?

local bezier = require("bezier") 
local physics = require("physics") 
physics.start() 

local items = {} 

-- CREATE CURVES 

local function createCurve(params) 


    local startX = params.startX 
    local startY = params.startY 

    local topCurveX = params.topCurveX 
    local topCurveY = params.topCurveY 
    local topCurveWidth = params.topCurveWidth 

    local bottomCurveX = params.bottomCurveX 
    local bottomCurveY = params.bottomCurveY 
    local bottomCurveWidth = params.bottomCurveWidth 

    -- TOP CURVE 
    local curve1 = bezier:curve({startX, startX + topCurveX, startX + topCurveWidth}, {startY , startY - topCurveY, startY}) 
    local x1, y1 = curve1(0.00) 

    local topVertices = {} 
    local c = 1 

    for i=0.01, 1, 0.01 do 
      local x, y = curve1(i) 

      --print(x .. " - " .. y) 
      topVertices[c] = x 
      topVertices[c + 1] = y 
      c = c + 2 
    end 

    local lastTopPointY = topVertices[c-1] 
    local bottomArea = 450 -- How many pixels should the box under the top curve be? 

     -- Straight down 
    topVertices[c] = topVertices[c - 2] -- X position from the last vertice 
    topVertices[c+1] = bottomArea -- y 
    topVertices[c+2] = topVertices[1] -- X position from the last vertice 
    topVertices[c+3] = bottomArea -- y 

    -- The box below the top curve changes the height so we need to take that into consideration when creating the polygons. 
    local bleedArea = topVertices[c-1] - bottomArea 


    items[#items + 1] = display.newPolygon(startX, startY - bleedArea, topVertices) 
    items[#items].fill = { type="image", filename="bg.png" } 

    items[#items].name = "top" 
    items[#items].y = items[#items].y - items[#items].height 
    items[#items].anchorY = 0 
    items[#items].anchorX = 0 
    physics.addBody(items[#items], "kinematic") 
    items[#items]:setLinearVelocity(-100, 0) 


    local c = 1 
    for i=0.02, 1, 0.01 do 
      local x, y = curve1(i) 

      topVertices[c] = x 
      topVertices[c + 1] = y 

      c = c + 2 
    end 

    -- DOWN CURVE 
    local bottomVertices = {} 
    local curve2 = bezier:curve({startX, startX + bottomCurveX, startX + bottomCurveWidth}, {startY , startY + bottomCurveY, startY}) 
    local x1, y1 = curve1(0.00) 
    local c = 1 

    for i=0.01, 1, 0.01 do 
      local x, y = curve2(i) 

      bottomVertices[c] = x 
      bottomVertices[c + 1] = y 
      c = c + 2 
    end 

    -- Straight down 
    bottomVertices[c] = bottomVertices[c - 2] -- X position from the last vertice 
    bottomVertices[c+1] = 500 -- y 
    bottomVertices[c+2] = bottomVertices[1] -- X position of the first vertice (i.e. the start) 
    bottomVertices[c+3] = 500 --vertices[1] -- y 
    -- Last vertice will be drawn automatically to close the polygon 




    --items[#items + 1] = display.newPolygon(items[#items].x + items[#items].width, items[#items].y + items[#items].height * 0.5, bottomVertices) 
    items[#items + 1] = display.newPolygon(items[#items].x + items[#items].width, items[#items].y + items[#items].height + bleedArea , bottomVertices) 
    items[#items].fill = { type="image", filename="bg.png" } 
    items[#items].anchorY = 0 
    items[#items].anchorX = 0 
    items[#items].name = "bottom" 
    physics.addBody(items[#items], "kinematic") 
    items[#items]:setLinearVelocity(-100, 0) 
end 



-- Needed to initialize the curve 
-- The createCurves loop takes variables from this one so these parameters 
-- decides the startX and startY 
local params = { 
     startX = 600, 
     startY = 215, 
     -- Top 
     topCurveX = 200, 
     topCurveY = 200, 
     topCurveWidth = 400, 
     -- Bottom 
     bottomCurveX = 200, 
     bottomCurveY = 200, 
     bottomCurveWidth = 400 
      } 
createCurve(params) 

local function loop() 
    if items[#items].x < 500 and items[#items].name == "bottom" then 

     local params = { 
     startX = items[#items].x + items[#items].width, 
     startY = items[#items].y, -- + items[#items].height, 
     -- Top 
     topCurveX = math.random(50, 50), 
     topCurveY = math.random(50, 100), 
     topCurveWidth = math.random(100, 125), 
     -- Bottom 
     bottomCurveX = math.random(50, 50), 
     bottomCurveY = math.random(50, 100), 
     bottomCurveWidth = math.random(100, 125) 
      } 

     createCurve(params) 
    end 
end 

Runtime:addEventListener("enterFrame", loop) 

Answer 1

OK 주요 문제는 당신이 칠이 다각형을 만들고, 당신이 (예를 들어), 당신이 어떻게해야합니까 왼쪽으로 끝없이 다각형을 스크롤되는 그래서? 다각형이 베 지어로 작성된다는 사실은 별개의 문제입니다.

코로나 디스플레이 다각형을 편집하는 방법을 모르므로 스크롤 할 때마다 다시 만들어야한다고 생각합니다. 그러나 관리하는 테이블에서 다시 만들 수 있습니다. 다각형이 일정량만큼 왼쪽으로 이동하면 테이블에서 가장 왼쪽에있는 점을 제거하고 새 점을 추가합니다. 따라서 enterFrame 핸들러 (의사 코드)에서 :

if needNewPoints then 
    pointsTable[1]=nil 
    local newX = pointsTable[#pointsTable].x + deltaX 
    -- add point to bezier too, but this is detail 
    local newY = curve(newX) 
    table.insert(pointsTable, newX) 
    oldPolygon:removeSelf() 
    poly = display.newPolygon(pointsTable) 
    oldPolygon = poly 
end