Anchor (pivot?) point & highlight point at end of anchored object

Solar2D General Questions/Discussion
#1

I’m having trouble figuring this out.

I have a highlight circle that should appear on the far end of a red rectangle (whenever the player touches the screen.) That red rectangle should be anchored to a blue square, and that blue square should be attached, so it’ll follow the red rectangle around, like it’s being dragged. I have an image attached to show what I mean.

I have many codes for you! (Ready to run in main.lua… I think it’s a nice code setup for touch controls, feel free to use.)

[lua]

local game = {

    start,

    enterFrame,

    onTouch,

}

local speed = 3.5

function game:start(event)

    local blue_square = display.newRect(0, 0, 500, 500)

    blue_square:setFillColor(0, 0, 255)

    blue_square.x = display.contentWidth/2

    blue_square.y = display.contentHeight/2

    blue_square.xScale = 0.7

    blue_square.yScale = 0.7

    blue_square.rotation = 0

    blue_square.anchorX = 0.5

    blue_square.anchorY = 0.45

    game.blue_square = blue_square

    local red_rect = display.newRect(0, 0, 200, 30)

    red_rect:setFillColor(255, 0, 0)

    red_rect.x = display.contentWidth/2

    red_rect.y = display.contentHeight/2

    red_rect.xScale = 0.7

    red_rect.yScale = 0.7

    red_rect.rotation = 0

    red_rect.anchorX = 0.9

    red_rect.anchorY = 0.3

    game.red_rect = red_rect

    --Highlight Circle

    local t_circle = display.newCircle(0, 0, 40)

    t_circle.alpha = .2

    game.t_circle = t_circle

    game.t_circle.isVisible = false

    Runtime:addEventListener(“touch”, game.onTouch)

    Runtime:addEventListener(“enterFrame”, game.enterFrame)

end

function game:enterFrame(event)

    game.t_circle.x = game.red_rect.x

    game.t_circle.y = game.red_rect.y

end

local angleB = 0

function angleBetween ( srcObj, dstObj )

        --This function find the angle in between 2 objects

        local xDist = dstObj.x-srcObj.x ; local yDist = dstObj.y-srcObj.y

        angleB = math.deg( math.atan( yDist/xDist ) )

        if ( srcObj.x < dstObj.x ) then angleB = angleB+90 else angleB = angleB-90 end

        return angleB

end

local getAngle = 0

function game.onTouch(event)

    --MOVE TOWARDS POINTS TOUCHED

    if event.phase == “moved” then

        if(game.red_rect.x < event.x) then

            game.blue_square.x = game.blue_square.x + speed

            game.red_rect.x = game.red_rect.x + speed

        elseif(game.red_rect.x > event.x) then

            game.blue_square.x = game.blue_square.x - speed

            game.red_rect.x = game.red_rect.x - speed

        end

        if(game.red_rect.y < event.y) then

            game.blue_square.y = game.blue_square.y + speed

            game.red_rect.y = game.red_rect.y + speed

        elseif(game.red_rect.y > event.y) then

            game.blue_square.y = game.blue_square.y - speed

            game.red_rect.y = game.red_rect.y - speed

        end

        game.t_circle.isVisible = true

    elseif event.phase == “ended” then

        game.t_circle.isVisible = false

    end

    --ADJUST ROTATION

    getAngle = angleBetween(game.red_rect, event)

    game.red_rect.rotation = getAngle - 90

end

game.start()

[/lua]

Do I need use physics to create pivot points? I’ve tried grouping them (with anchorChildren) but have had little success - but maybe I missed something. Am I just missing another anchor point somewhere?

Also my red rectangle disappears sometimes, so that’s weird…

Thanks. :slight_smile:

#2

You didn’t attach the picture you said you did. Rotation is center around the anchor point of the object you are rotating. If you want the object to move together you should insert them all in the same group and rotate the group. No need for anchorChildren unless you want to set a different anhor point then center. Note that if you set anchorChildren = true the objects in the group will move around based on the anchor point. It is not clear what you are trying to achieve so a clearer explanation of expected results and the current problem you have would be necesary.

#3

Ah geez, I uploaded the picture but didn’t hit attach.

Thanks.

#4

It looks like you are starting the red rect horizontal so you would want the white circle on the right and rotate around the left edge.

As I said you will need to put these two objects in a group and you will have to set anchorChldren = true for the anchor points on the group to work right so you can rotate it correctly. Set the groups anchorX = 0. This will position objects in the group to its origin 0, 0 (the left edge of the combined object bounding box. Now get the rect and the circle to position correctly and rotate the group.

#5

Thanks for your help, primoz.cerar! Weeks later, I’ve finally gotten around to getting it working. Code below for anyone who is interested. I ended up creating two groups, one with the highlight circle and the red rectangle, the other one with that group plus the blue square.

[lua]

local game = {

    start,

    enterFrame,

    onTouch,

}

local speed = 3.5

function game:start(event)

    local blue_square = display.newRect(0, 0, 500, 500)

    blue_square:setFillColor(0, 0, 255)

    blue_square.xScale = 0.7

    blue_square.yScale = 0.7

    blue_square.rotation = 0

    game.blue_square = blue_square

    local red_rect = display.newRect(0, 0, 200, 30)

    red_rect:setFillColor(255, 0, 0)

    red_rect.x = display.contentWidth/2

    red_rect.y = display.contentHeight/2

    red_rect.xScale = 0.7

    red_rect.yScale = 0.7

    red_rect.rotation = 0

    game.red_rect = red_rect

    --Highlight Circle

    local t_circle = display.newCircle(0, 0, 40)

    t_circle.alpha = .2

    game.t_circle = t_circle

    game.t_circle.isVisible = false

    local group2 = display.newGroup()

    group2:insert(red_rect)

    group2:insert(t_circle)

    group2.anchorChildren = true

    t_circle.x = red_rect.x + red_rect.width

    t_circle.y = red_rect.y + red_rect.height

    group2.anchorX = 0

    game.group2 = group2

    local group = display.newGroup()

    group:insert(blue_square)

    group:insert(group2)

    group2.x = blue_square.x

    group2.y = blue_square.y

    group.anchorChildren = true

    t_circle.x = red_rect.x + red_rect.width*0.5 - t_circle.width*0.5

    t_circle.y = red_rect.y

    game.group = group

    group.x = display.contentWidth*0.5 - group.width*0.5

    group.y = display.contentHeight*0.5

    Runtime:addEventListener(“touch”, game.onTouch)

end

local angleB = 0

function angleBetween ( srcObj, dstObj )

        --This function finds the angle in between 2 objects

        local xDist = dstObj.x-srcObj.x ; local yDist = dstObj.y-srcObj.y

        angleB = math.deg( math.atan( yDist/xDist ) )

        if ( srcObj.x < dstObj.x ) then angleB = angleB+90 else angleB = angleB-90 end

        return angleB

end

local getAngle = 0

function game.onTouch(event)

    --MOVE TOWARDS POINTS TOUCHED

    if event.phase == “moved” or event.phase == “began” then

        if(game.group.x < event.x) then

            game.group.x = game.group.x + speed

        elseif(game.group.x > event.x) then

            game.group.x = game.group.x - speed

        end

        if(game.group.y < event.y) then

            game.group.y = game.group.y + speed

        elseif(game.group.y > event.y) then

            game.group.y = game.group.y - speed

        end

        game.t_circle.isVisible = true

    elseif event.phase == “ended” then

        game.t_circle.isVisible = false

    end

    --ADJUST ROTATION

    getAngle = angleBetween(game.group, event)

    game.group2.rotation = getAngle - 90

end

game.start()

[/lua]

#6

You didn’t attach the picture you said you did. Rotation is center around the anchor point of the object you are rotating. If you want the object to move together you should insert them all in the same group and rotate the group. No need for anchorChildren unless you want to set a different anhor point then center. Note that if you set anchorChildren = true the objects in the group will move around based on the anchor point. It is not clear what you are trying to achieve so a clearer explanation of expected results and the current problem you have would be necesary.

#7

Ah geez, I uploaded the picture but didn’t hit attach.

Thanks.

#8

It looks like you are starting the red rect horizontal so you would want the white circle on the right and rotate around the left edge.

As I said you will need to put these two objects in a group and you will have to set anchorChldren = true for the anchor points on the group to work right so you can rotate it correctly. Set the groups anchorX = 0. This will position objects in the group to its origin 0, 0 (the left edge of the combined object bounding box. Now get the rect and the circle to position correctly and rotate the group.

#9

Thanks for your help, primoz.cerar! Weeks later, I’ve finally gotten around to getting it working. Code below for anyone who is interested. I ended up creating two groups, one with the highlight circle and the red rectangle, the other one with that group plus the blue square.

[lua]

local game = {

    start,

    enterFrame,

    onTouch,

}

local speed = 3.5

function game:start(event)

    local blue_square = display.newRect(0, 0, 500, 500)

    blue_square:setFillColor(0, 0, 255)

    blue_square.xScale = 0.7

    blue_square.yScale = 0.7

    blue_square.rotation = 0

    game.blue_square = blue_square

    local red_rect = display.newRect(0, 0, 200, 30)

    red_rect:setFillColor(255, 0, 0)

    red_rect.x = display.contentWidth/2

    red_rect.y = display.contentHeight/2

    red_rect.xScale = 0.7

    red_rect.yScale = 0.7

    red_rect.rotation = 0

    game.red_rect = red_rect

    --Highlight Circle

    local t_circle = display.newCircle(0, 0, 40)

    t_circle.alpha = .2

    game.t_circle = t_circle

    game.t_circle.isVisible = false

    local group2 = display.newGroup()

    group2:insert(red_rect)

    group2:insert(t_circle)

    group2.anchorChildren = true

    t_circle.x = red_rect.x + red_rect.width

    t_circle.y = red_rect.y + red_rect.height

    group2.anchorX = 0

    game.group2 = group2

    local group = display.newGroup()

    group:insert(blue_square)

    group:insert(group2)

    group2.x = blue_square.x

    group2.y = blue_square.y

    group.anchorChildren = true

    t_circle.x = red_rect.x + red_rect.width*0.5 - t_circle.width*0.5

    t_circle.y = red_rect.y

    game.group = group

    group.x = display.contentWidth*0.5 - group.width*0.5

    group.y = display.contentHeight*0.5

    Runtime:addEventListener(“touch”, game.onTouch)

end

local angleB = 0

function angleBetween ( srcObj, dstObj )

        --This function finds the angle in between 2 objects

        local xDist = dstObj.x-srcObj.x ; local yDist = dstObj.y-srcObj.y

        angleB = math.deg( math.atan( yDist/xDist ) )

        if ( srcObj.x < dstObj.x ) then angleB = angleB+90 else angleB = angleB-90 end

        return angleB

end

local getAngle = 0

function game.onTouch(event)

    --MOVE TOWARDS POINTS TOUCHED

    if event.phase == “moved” or event.phase == “began” then

        if(game.group.x < event.x) then

            game.group.x = game.group.x + speed

        elseif(game.group.x > event.x) then

            game.group.x = game.group.x - speed

        end

        if(game.group.y < event.y) then

            game.group.y = game.group.y + speed

        elseif(game.group.y > event.y) then

            game.group.y = game.group.y - speed

        end

        game.t_circle.isVisible = true

    elseif event.phase == “ended” then

        game.t_circle.isVisible = false

    end

    --ADJUST ROTATION

    getAngle = angleBetween(game.group, event)

    game.group2.rotation = getAngle - 90

end

game.start()

[/lua]