如何在Corona引擎中实现滑动控制？替换按钮操控角色移动

Hey there! Let's replace those button controls with swipe gestures for your Corona game. I'll break down the steps and provide a revised version of your code that implements this, plus clean up some redundant parts that could cause unexpected behavior.

Core Concept for Swipe Detection #

In Corona, you can detect swipes using the global touch event. The idea is to:

• Record the starting position of the touch when the user first presses down
• Calculate the distance and direction when the user lifts their finger
• Set the player's movement direction based on the swipe (and ignore tiny taps that aren't intentional swipes)

Revised Code with Swipe Controls #

local backdrop = display.setDefault("background", 1, 1, 1)
local physics = require("physics")
physics.start()

_W = display.contentWidth; -- Screen width
_H = display.contentHeight; -- Screen height

-- Movement variables
motionDown = 0;
motionUp = 0;
motionRight = 0;
motionLeft = 0;
motionSquare = 5 
speed = 4

-- Create player
player = display.newImage("player.png", display.contentCenterX, display.contentCenterY)
player.x = math.random(10,_W-10)
player.y = math.random(10,_H-10)
player:toFront()
physics.addBody( player, "static" )

-- Swipe detection variables
local startX, startY
local swipeThreshold = 20 -- Minimum distance to count as a swipe (adjust as needed)

-- Swipe handler function
local function handleSwipe(event)
    if event.phase == "began" then
        -- Record starting touch position
        startX = event.x
        startY = event.y
        -- Reset all motion variables when starting a new touch
        motionDown = 0
        motionUp = 0
        motionRight = 0
        motionLeft = 0
    elseif event.phase == "ended" then
        -- Calculate touch distance
        local deltaX = event.x - startX
        local deltaY = event.y - startY

        -- Determine swipe direction (prioritize horizontal or vertical based on larger delta)
        if math.abs(deltaX) > math.abs(deltaY) then
            -- Horizontal swipe
            if deltaX > swipeThreshold then
                -- Swiped right
                motionRight = speed
                motionLeft = 0
            elseif deltaX < -swipeThreshold then
                -- Swiped left
                motionLeft = -speed
                motionRight = 0
            end
        else
            -- Vertical swipe
            if deltaY > swipeThreshold then
                -- Swiped down
                motionDown = speed
                motionUp = 0
            elseif deltaY < -swipeThreshold then
                -- Swiped up
                motionUp = -speed
                motionDown = 0
            end
        end

        -- Optional: Create the indicator square like in your button code
        local square = display.newRect( 0, 0, 5, 5 )
        square.strokeWidth = 3
        square:setFillColor( 0 )
        square:setStrokeColor( 0, 0, 0 )

        -- Position square based on swipe direction
        if motionRight ~= 0 then
            square.x = player.x - 10
            square.y = player.y
            local function moveSquare(event)
                square.x = square.x - motionSquare
            end
            Runtime:addEventListener("enterFrame", moveSquare)
        elseif motionLeft ~= 0 then
            square.x = player.x + 10
            square.y = player.y
            local function moveSquare(event)
                square.x = square.x + motionSquare
            end
            Runtime:addEventListener("enterFrame", moveSquare)
        elseif motionUp ~= 0 then
            square.x = player.x
            square.y = player.y + 10
            local function moveSquare(event)
                square.y = square.y + motionSquare
            end
            Runtime:addEventListener("enterFrame", moveSquare)
        elseif motionDown ~= 0 then
            square.x = player.x
            square.y = player.y - 10
            local function moveSquare(event)
                square.y = square.y - motionSquare
            end
            Runtime:addEventListener("enterFrame", moveSquare)
        end
    end
    return true -- Prevent touch events from propagating to other objects
end

-- Add swipe listener to the entire screen
Runtime:addEventListener("touch", handleSwipe)

-- Combined player movement function (replaces 4 separate functions)
local function movePlayer(event)
    -- Update X position
    player.x = player.x + motionRight + motionLeft
    -- Wrap around screen horizontally
    if player.x > _W then
        player.x = 0
    elseif player.x < 0 then
        player.x = _W
    end

    -- Update Y position
    player.y = player.y + motionUp + motionDown
    -- Wrap around screen vertically
    if player.y > _H then
        player.y = 0
    elseif player.y < 0 then
        player.y = _H
    end
end

Runtime:addEventListener("enterFrame", movePlayer)

Key Changes Explained #

• Removed Button Controls: We got rid of the left, right, top, and bottom button rects and their tap listeners since we're using swipes now.
• Swipe Detection: The handleSwipe function tracks the touch start and end positions. It uses a swipeThreshold to ignore tiny taps (you can adjust this value to make swipes more or less sensitive).
• Direction Prioritization: The code checks if the swipe is more horizontal or vertical (based on which delta is larger) to decide movement direction.
• Combined Movement Function: Instead of 4 separate movePlayer functions (which could cause conflicting updates), we have one function that handles both X and Y movement, plus screen wrapping.
• Indicator Squares: We kept the indicator squares from your original code, positioning and animating them based on the swipe direction just like the button taps did.

Extra Tips #

• Stop Movement: If you want the player to stop moving after a swipe (instead of continuing indefinitely), you can reset the motion variables after a short delay using timer.performWithDelay(). For example, add this inside the "ended" phase:

  timer.performWithDelay(500, function()
      motionDown = 0
      motionUp = 0
      motionRight = 0
      motionLeft = 0
  end)
  

• Adjust Sensitivity: Tweak the swipeThreshold value to make swipes easier or harder to trigger. A lower value means smaller swipes count, higher means you need to swipe farther.
• Visual Feedback: You could add a temporary line or animation when a swipe is detected to give the user clearer feedback that their swipe was registered.

内容的提问来源于stack exchange，提问作者Silas Bazar