Question

我正在尝试创建一条无尽的曲线，到目前为止，我一直在使用Bezier曲线创建曲线，然后创建一条新曲线并设置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

好的所以主要的问题是你创建了一个有填充的多边形，并且你向左边滚动多边形（例如），你是怎么做到的？将多边形创建为贝塞尔曲线的事实是一个单独的问题。

我不知道编辑电晕显示多边形的方法，所以我认为你必须在每次滚动时重新创建它。但是，您可以从您管理的表中重新创建它：每当多边形向左移动一定量时，您从表中删除最左侧的点，并附加一个新点。所以在你的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

使用共享相同Fill对象的多边形创建无限曲线？

1 个答案: