Graphics 2.0 problem concerning anchor points and setReferencePoint

Solar2D Advanced Graphics
#1

Having an issue with Graphics 2.0; I’m trying to make a wheel spin around its centre point. It worked fine before changing to Graphics 2.0. How do I replace the “t:setReferencePoint(display.CenterReferencePoint)” part of my code. I have tried anchor points. Thanks! The displaygroup is being rotated rather than the wheel because i have images pinned to the wheel and they all rotate together.

**The width of the wheel image is 1020px and the height is 1012px. Im building the app in landscape for iPhone4, (960x640)

[lua]

wheel = display.newImage(group2, “images/game_screen/wheel.png”,509.5,505.5) 

wheel.anchorX=0.5; wheel.anchorY=0.5;

    local function rotatewheel(event)

            local t = event.target

            t:setReferencePoint(display.CenterReferencePoint)

            local phase = event.phase

            if (phase == “began”) then

                    display.getCurrentStage():setFocus( t )

                    t.isFocus = true

                    – Store initial position of finger

                    t.x1 = event.x

                    print("event.x = " … event.x)

                    t.y1 = event.y

                    print("event.y = " … event.y)

            elseif t.isFocus then

                    if (phase == “moved”) then

                            t.x2 = event.x

                            t.y2 = event.y

                            angle1 = 180/math.pi * math.atan2(t.y1 - t.y , t.x1 - t.x)

                            --print("angle1 = "…angle1)

                            angle2 = 180/math.pi * math.atan2(t.y2 - t.y , t.x2 - t.x)

                            --print("angle2 = "…angle2)

                            rotationAmt = angle1 - angle2

                            – it

                            t.rotation = t.rotation - rotationAmt

                            print ("t.rotation = "…t.rotation)

                            t.x1 = t.x2

                            t.y1 = t.y2

            elseif (phase == “ended”) then

                display.getCurrentStage():setFocus( nil )

                t.isFocus = false

            end

        end

        – Stop further propagation of touch event

        return true

    end

    group2:addEventListener(“touch”, rotatewheel)

[/lua]   

#2

Have you tried setting group2.anchorChildren=true ?

#3

Thanks, that got me part of the way! Now the wheel spins properly but has its centre on the origin (0,0) for some reason… When I try to move the wheel to the centre of the screen it stops spinning correctly. Ive attached a pic so you can see what I mean

#4

group2.x = display.contentCenterX
group2.y = display.contentCenterY

…should do the trick.

#5

Brilliant! Thanks very much.

#6

Have you tried setting group2.anchorChildren=true ?

#7

Thanks, that got me part of the way! Now the wheel spins properly but has its centre on the origin (0,0) for some reason… When I try to move the wheel to the centre of the screen it stops spinning correctly. Ive attached a pic so you can see what I mean

#8

group2.x = display.contentCenterX
group2.y = display.contentCenterY

…should do the trick.

#9

Brilliant! Thanks very much.

#10

I am having the same issue but can’t resolve it even after seeing your problem being resolved…do you think you can help? It’s in two locations: 

1: 

– Called when the scene’s view does not exist:

function scene:createScene( event )

    local screenGroup = self.view

    

    display.setDefault( “background”, 255, 255, 255 )

  

    statusText = display.newText( “Click to Connect to Start”, 0, 0, native.systemFontBold, 24 )

    statusText:setTextColor( 115 )

    statusText:setReferencePoint( display.CenterReferencePoint )

    statusText.x, statusText.y = display.contentWidth * 0.5, 50

    screenGroup:insert( statusText )

and 2: 

– Called when the scene’s view does not exist:

function scene:createScene( event )

    local screenGroup = self.view

    

    display.setDefault( “background”, 255, 255, 255 )

  

  imageGameBorad = display.newImage( “grid.png”, START_X, START_Y )

    screenGroup:insert( imageGameBorad )

  

    statusText = display.newText( “Welcome”, 0, 0, native.systemFontBold, 24 )

  detailText = display.newText( “”, 0, 0, native.systemFontBold, 24 )

  

  statusText:setTextColor( 155 )

    statusText:setReferencePoint( display.CenterReferencePoint )

    statusText.x, statusText.y = display.contentWidth * 0.5, 20

    screenGroup:insert( statusText )

  

  detailText:setTextColor( 155 )

    detailText:setReferencePoint( display.CenterReferencePoint )

    detailText.x, detailText.y = display.contentWidth * 0.5, 50

    screenGroup:insert( detailText )

#11

Yeh you can’t use “display.CenterReferencePoint” any more unless you’re project is in compatibility mode for Graphics 1.0. It’s all about anchor points now. Give this a look: http://docs.coronalabs.com/guide/graphics/migration_g20.html . See if you can work it out. 

Try changing “statusText:setReferencePoint( display.CenterReferencePoint )” to statusText.anchorX = “480”; statusText.anchorY = “320”;

That would centre it for a 960 x 640 display. Just keep experimenting with anchor points until you learn what’s going on.

You also spelt board wrong in “GameBorad”, not sure if that might be causing an issue for you!

#12

I wrote a small function which replaces setReferencePoint as I rarely have to use an anchor point that isn’t one of the standard ones we used to have. Apologies for the lack of indenting, don’t have access to a code editor where I am.

[lua]

local setRef = function(object, type)

local types = {}

types[“center”] = { 0.5, 0.5 }

types[“centerLeft”] = { 0, 0.5 }

types[“centerRight”] = { 1, 0.5 }

types[“bottomCenter”] = { 0.5, 1 }

types[“topCenter”] = { 0.5, 0 }

types[“bottomLeft”] = { 0, 1 }

types[“bottomRight”] = { 1, 1 }

types[“topLeft”] = { 0, 0 }

types[“topRight”] = { 1, 0 }

object.anchorX = types[type][1]

object.anchorY = types[type][2]
 

object.anchorChildren = true

end

[/lua]

Usage:

[lua]

setRef(object, “center”)

setRef(object2, “bottomRight”)

[/lua]

#13

Thanks for your answers guys but the following solution worked for me in the end:

The sample is made using Graphics 1.0

 

The latest Corona SDK is Graphics 2.0

 

However you can still use the sample with your latest Corona SDK. You simply need to edit the config.lua file by adding a flag to use V1 Graphics. For example your file should look like below

 

application = {

    content = {

                graphicsCompatibility = 1,

        width = 320,

        height = 480, 

        scale = “letterBox”,

        fps = 30,

        imageSuffix = {

            ["@2x"] = 2,

        }

    }

}

 

For more details you can see the following link

http://docs.coronalabs.com/guide/graphics/migration_v1.html

#14

I am having the same issue but can’t resolve it even after seeing your problem being resolved…do you think you can help? It’s in two locations: 

1: 

– Called when the scene’s view does not exist:

function scene:createScene( event )

    local screenGroup = self.view

    

    display.setDefault( “background”, 255, 255, 255 )

  

    statusText = display.newText( “Click to Connect to Start”, 0, 0, native.systemFontBold, 24 )

    statusText:setTextColor( 115 )

    statusText:setReferencePoint( display.CenterReferencePoint )

    statusText.x, statusText.y = display.contentWidth * 0.5, 50

    screenGroup:insert( statusText )

and 2: 

– Called when the scene’s view does not exist:

function scene:createScene( event )

    local screenGroup = self.view

    

    display.setDefault( “background”, 255, 255, 255 )

  

  imageGameBorad = display.newImage( “grid.png”, START_X, START_Y )

    screenGroup:insert( imageGameBorad )

  

    statusText = display.newText( “Welcome”, 0, 0, native.systemFontBold, 24 )

  detailText = display.newText( “”, 0, 0, native.systemFontBold, 24 )

  

  statusText:setTextColor( 155 )

    statusText:setReferencePoint( display.CenterReferencePoint )

    statusText.x, statusText.y = display.contentWidth * 0.5, 20

    screenGroup:insert( statusText )

  

  detailText:setTextColor( 155 )

    detailText:setReferencePoint( display.CenterReferencePoint )

    detailText.x, detailText.y = display.contentWidth * 0.5, 50

    screenGroup:insert( detailText )

#15

Yeh you can’t use “display.CenterReferencePoint” any more unless you’re project is in compatibility mode for Graphics 1.0. It’s all about anchor points now. Give this a look: http://docs.coronalabs.com/guide/graphics/migration_g20.html . See if you can work it out. 

Try changing “statusText:setReferencePoint( display.CenterReferencePoint )” to statusText.anchorX = “480”; statusText.anchorY = “320”;

That would centre it for a 960 x 640 display. Just keep experimenting with anchor points until you learn what’s going on.

You also spelt board wrong in “GameBorad”, not sure if that might be causing an issue for you!

#16

I wrote a small function which replaces setReferencePoint as I rarely have to use an anchor point that isn’t one of the standard ones we used to have. Apologies for the lack of indenting, don’t have access to a code editor where I am.

[lua]

local setRef = function(object, type)

local types = {}

types[“center”] = { 0.5, 0.5 }

types[“centerLeft”] = { 0, 0.5 }

types[“centerRight”] = { 1, 0.5 }

types[“bottomCenter”] = { 0.5, 1 }

types[“topCenter”] = { 0.5, 0 }

types[“bottomLeft”] = { 0, 1 }

types[“bottomRight”] = { 1, 1 }

types[“topLeft”] = { 0, 0 }

types[“topRight”] = { 1, 0 }

object.anchorX = types[type][1]

object.anchorY = types[type][2]
 

object.anchorChildren = true

end

[/lua]

Usage:

[lua]

setRef(object, “center”)

setRef(object2, “bottomRight”)

[/lua]

#17

Thanks for your answers guys but the following solution worked for me in the end:

The sample is made using Graphics 1.0

 

The latest Corona SDK is Graphics 2.0

 

However you can still use the sample with your latest Corona SDK. You simply need to edit the config.lua file by adding a flag to use V1 Graphics. For example your file should look like below

 

application = {

    content = {

                graphicsCompatibility = 1,

        width = 320,

        height = 480, 

        scale = “letterBox”,

        fps = 30,

        imageSuffix = {

            ["@2x"] = 2,

        }

    }

}

 

For more details you can see the following link

http://docs.coronalabs.com/guide/graphics/migration_v1.html