Why do you have to set the coordinates of group "circles" to -150, 150 to place that group in the opposite direction of group "squares", while group "squares" was positioned using 50, -50?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | display.setStatusBar(display.HiddenStatusBar) -- Mark screen origin local screenOrigin = display.newCircle(0, 0, 4) screenOrigin:setFillColor(128, 128, 128) local screenOriginLabel = display.newText("Screen Origin", 10, 10, native.systemFont, 16) screenOriginLabel:setTextColor(128, 128, 128) -- Create and position top group local topGroup = display.newGroup() topGroup.x = display.contentWidth / 2 topGroup.y = display.contentHeight / 2 -- Mark top group origin local topGroupOrigin = display.newCircle(topGroup.xOrigin, topGroup.yOrigin, 4) topGroupOrigin:setFillColor(128, 128, 128) local topGroupLabel = display.newText("Top Group Origin", 0, 0, native.systemFont, 16) topGroupLabel:setTextColor(128, 128, 128) topGroupLabel:setReferencePoint(display.CenterReferencePoint) topGroupLabel.x = topGroup.xOrigin topGroupLabel.y = topGroup.yOrigin + 10 -- Create the "squares" group and position it at 50, -50 in relation to the origin of the top group local squares = display.newGroup() topGroup:insert(squares) squares.x = 50 squares.y = -50 -- Add 4 red squares to the "squares" group local square1 = display.newRect(0, 0, 10, 10) square1:setFillColor(255, 0, 0) squares:insert(square1) square1.x = 50 square1.y = -50 local square2 = display.newRect(0, 0, 10, 10) square2:setFillColor(255, 0, 0) squares:insert(square2) square2.x = 75 square2.y = -50 local square3 = display.newRect(0, 0, 10, 10) square3:setFillColor(255, 0, 0) squares:insert(square3) square3.x = 50 square3.y = -25 local square4 = display.newRect(0, 0, 10, 10) square4:setFillColor(255, 0, 0) squares:insert(square4) square4.x = 75 square4.y = -25 -- Create the "circles" group and position it at -50, 50 in relation to the origin of the top group local circles = display.newGroup() topGroup:insert(circles) -- WHY? Why doesn't -50, 50 produce the expected result? circles.x = -150 circles.y = 150 -- Add 4 red circles to the "circles" group local circle1 = display.newCircle(0, 0, 5) circle1:setFillColor(0, 0, 255) circles:insert(circle1) circle1.x = 50 circle1.y = -50 local circle2 = display.newCircle(0, 0, 5) circle2:setFillColor(0, 0, 255) circles:insert(circle2) circle2.x = 75 circle2.y = -50 local circle3 = display.newCircle(0, 0, 5) circle3:setFillColor(0, 0, 255) circles:insert(circle3) circle3.x = 50 circle3.y = -25 local circle4 = display.newCircle(0, 0, 5) circle4:setFillColor(0, 0, 255) circles:insert(circle4) circle4.x = 75 circle4.y = -25 |
I think the confusion is coming from these lines of code...
1 2 | squares.x = 50 squares.y = -50 |
My rationale was:
"Those lines are needed to position the "squares" group and the "circles" group within the local coordinates of the "topGroup". Without them, the "squares" group and the "circles" group would be centered on the "topGroup" origin, in the middle of the screen."
But the code proves otherwise...
Here is another piece of code with interesting findings:
Notice how I do not change the x and y of "squares" or "circles".
Notice how I do not change the xReference and yReference of "square" or "circles".
Yet, observe how both groups rotate around the center of the screen.
And observe how the value printed out to the terminal are all 0, as expected.
So, I still do not get that coordinate system at all.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | display.setStatusBar(display.HiddenStatusBar) -- Create and position top group local topGroup = display.newGroup() topGroup.x = display.contentWidth / 2 topGroup.y = display.contentHeight / 2 -- Create the "squares" group and position it at 50, -50 in relation to the origin of the top group local squares = display.newGroup() topGroup:insert(squares) -- squares.x = 50 -- squares.y = -50 -- Add 4 red squares to the "squares" group local square1 = display.newRect(0, 0, 10, 10) square1:setFillColor(255, 0, 0) squares:insert(square1) square1.x = 50 square1.y = -50 local square2 = display.newRect(0, 0, 10, 10) square2:setFillColor(255, 0, 0) squares:insert(square2) square2.x = 75 square2.y = -50 local square3 = display.newRect(0, 0, 10, 10) square3:setFillColor(255, 0, 0) squares:insert(square3) square3.x = 50 square3.y = -25 local square4 = display.newRect(0, 0, 10, 10) square4:setFillColor(255, 0, 0) squares:insert(square4) square4.x = 75 square4.y = -25 local frame1 = display.newLine(squares, 50, -50, 75, -50) frame1:append(75, -25, 50, -25, 50, -50) -- Move the reference point of the "squares" group to the origin of the top group -- squares.xReference = -50 -- squares.yReference = 50 -- Create the "circles" group and position it at -50, 50 in relation to the origin of the top group local circles = display.newGroup() topGroup:insert(circles) -- circles.x = -50 -- circles.y = 50 -- Add 4 green circles to the "circles" group local circle1 = display.newCircle(0, 0, 5) circle1:setFillColor(0, 255, 0) circles:insert(circle1) circle1.x = -50 circle1.y = 50 local circle2 = display.newCircle(0, 0, 5) circle2:setFillColor(0, 255, 0) circles:insert(circle2) circle2.x = -75 circle2.y = 50 local circle3 = display.newCircle(0, 0, 5) circle3:setFillColor(0, 255, 0) circles:insert(circle3) circle3.x = -50 circle3.y = 25 local circle4 = display.newCircle(0, 0, 5) circle4:setFillColor(0, 255, 0) circles:insert(circle4) circle4.x = -75 circle4.y = 25 local frame2 = display.newLine(circles, -50, 50, -75, 50) frame2:append(-75, 25, -50, 25, -50, 50) -- Move the reference point of the "circles" group to the origin of the top group -- circles.xReference = 50 -- circles.yReference = -50 print("squares.xOrigin = " .. squares.xOrigin) print("squares.yOrigin = " .. squares.yOrigin) print("squares.xReference = " .. squares.xReference) print("squares.yReference = " .. squares.yReference) print("circles.xOrigin = " .. circles.xOrigin) print("circles.yOrigin = " .. circles.yOrigin) print("circles.xReference = " .. circles.xReference) print("circles.yReference = " .. circles.yReference) Runtime:addEventListener("enterFrame", function(event) if squares.rotation < 180 then squares.rotation = squares.rotation + 1 end if circles.rotation < 180 then circles.rotation = circles.rotation + 1 end end) |
And here is another test that behaves almost coherently (I also almost because you may have to reload it in the simulator several times to get it to actually display.)...
What changed in this code:
1) I think I explicit set the origin of "squares" and "circles" by explicitly assigning xOrigin and yOrigin.
2) I draw the coordinate axes of "squares" in yellow. I draw the coordinate axes of "circles" in cyan.
3) I no longer rotate anything.
With this code, results are somewhat "logical". (except for the display glitch in the simulator)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 | display.setStatusBar(display.HiddenStatusBar) -- Create and position top group local topGroup = display.newGroup() topGroup.x = display.contentWidth / 2 topGroup.y = display.contentHeight / 2 -- Create the "squares" group and position it at 50, -50 in relation to the origin of the top group local squares = display.newGroup() topGroup:insert(squares) squares.xOrigin = 50 squares.yOrigin = -50 -- Draw the coordinate axes of the "squares" group local axes1 = display.newLine(squares, 0, 100, 0, 0) axes1:append(100, 0) axes1:setColor(255, 255, 0) -- Add 4 red squares to the "squares" group local square1 = display.newRect(0, 0, 10, 10) square1:setFillColor(255, 0, 0) squares:insert(square1) square1.x = 50 square1.y = -50 local square2 = display.newRect(0, 0, 10, 10) square2:setFillColor(255, 0, 0) squares:insert(square2) square2.x = 75 square2.y = -50 local square3 = display.newRect(0, 0, 10, 10) square3:setFillColor(255, 0, 0) squares:insert(square3) square3.x = 50 square3.y = -25 local square4 = display.newRect(0, 0, 10, 10) square4:setFillColor(255, 0, 0) squares:insert(square4) square4.x = 75 square4.y = -25 -- Draw a frame that goes through the centers of all 4 squares. local frame1 = display.newLine(squares, 50, -50, 75, -50) frame1:append(75, -25, 50, -25, 50, -50) -- Create the "circles" group and position it at -50, 50 in relation to the origin of the top group local circles = display.newGroup() topGroup:insert(circles) circles.xOrigin = -50 circles.yOrigin = 50 -- Draw the coordinate axes of the "circles" group local axes2 = display.newLine(circles, 0, 100, 0, 0) axes2:append(100, 0) axes2:setColor(0, 255, 255) -- Add 4 green circles to the "circles" group local circle1 = display.newCircle(0, 0, 5) circle1:setFillColor(0, 255, 0) circles:insert(circle1) circle1.x = -50 circle1.y = 50 local circle2 = display.newCircle(0, 0, 5) circle2:setFillColor(0, 255, 0) circles:insert(circle2) circle2.x = -75 circle2.y = 50 local circle3 = display.newCircle(0, 0, 5) circle3:setFillColor(0, 255, 0) circles:insert(circle3) circle3.x = -50 circle3.y = 25 local circle4 = display.newCircle(0, 0, 5) circle4:setFillColor(0, 255, 0) circles:insert(circle4) circle4.x = -75 circle4.y = 25 -- Draw a frame that goes through the centers of all 4 circles. local frame2 = display.newLine(circles, -50, 50, -75, 50) frame2:append(-75, 25, -50, 25, -50, 50) print("squares.xOrigin = " .. squares.xOrigin) print("squares.yOrigin = " .. squares.yOrigin) print("squares.xReference = " .. squares.xReference) print("squares.yReference = " .. squares.yReference) print("circles.xOrigin = " .. circles.xOrigin) print("circles.yOrigin = " .. circles.yOrigin) print("circles.xReference = " .. circles.xReference) print("circles.yReference = " .. circles.yReference) |
Based on my prior test, I would assume assigning the x and y of a group does not relocate its origin.
To relocate its origin, you seem to have to assign xOrigin and yOrigin.
In the doc, I don't understand this:
When an Display Object is created, the origin specifies the TopLeft corner of the object. After the object has been created, the reference point is now the center of the object and the x,y values will reference that point.
If I have:
display.newRect(0, 0, 10, 10)
The doc says:
Creates a width by height rectangle with the top-left corner at (0, 0). The local origin is at the center of the rectangle; the reference point is initialized to this local origin.
The doc is very confusing on that topic, but I think this final code documents all the concepts (x, y, xOrigin, yOrigin, xReference, yReference):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 | display.setStatusBar(display.HiddenStatusBar) -- Create and position top group local topGroup = display.newGroup() topGroup.x = display.contentWidth / 2 topGroup.y = display.contentHeight / 2 print("topGroup.xOrigin = " .. topGroup.xOrigin) print("topGroup.yOrigin = " .. topGroup.yOrigin) -- Create the "squares" group and position it at 50, -50 in relation to the origin of the top group local squares = display.newGroup() topGroup:insert(squares) squares.x = 50 squares.y = -50 print("squares.xOrigin = " .. squares.xOrigin) print("squares.yOrigin = " .. squares.yOrigin) -- Draw the coordinate axes of the "squares" group local axes1 = display.newLine(topGroup, 50, 0, 50, -50) axes1:append(100, -50) axes1:setColor(255, 255, 0) -- Add 4 red squares to the "squares" group local square1 = display.newRect(0, 0, 10, 10) square1:setFillColor(255, 0, 0) squares:insert(square1) square1.x = 50 square1.y = -50 local square2 = display.newRect(0, 0, 10, 10) square2:setFillColor(255, 0, 0) squares:insert(square2) square2.x = 75 square2.y = -50 local square3 = display.newRect(0, 0, 10, 10) square3:setFillColor(255, 0, 0) squares:insert(square3) square3.x = 50 square3.y = -25 local square4 = display.newRect(0, 0, 10, 10) square4:setFillColor(255, 0, 0) squares:insert(square4) square4.x = 75 square4.y = -25 -- Draw a frame that goes through the centers of all 4 squares. local frame1 = display.newLine(squares, 50, -50, 75, -50) frame1:append(75, -25, 50, -25, 50, -50) -- Create the "circles" group and position it at -50, 50 in relation to the origin of the top group local circles = display.newGroup() topGroup:insert(circles) circles.x = -50 circles.y = 50 print("circles.xOrigin = " .. circles.xOrigin) print("circles.yOrigin = " .. circles.yOrigin) -- Draw the coordinate axes of the "circles" group local axes2 = display.newLine(topGroup, 0, 50, -50, 50) axes2:append(-50, 100) axes2:setColor(0, 255, 255) -- Add 4 green circles to the "circles" group local circle1 = display.newCircle(0, 0, 5) circle1:setFillColor(0, 255, 0) circles:insert(circle1) circle1.x = -50 circle1.y = 50 local circle2 = display.newCircle(0, 0, 5) circle2:setFillColor(0, 255, 0) circles:insert(circle2) circle2.x = -75 circle2.y = 50 local circle3 = display.newCircle(0, 0, 5) circle3:setFillColor(0, 255, 0) circles:insert(circle3) circle3.x = -50 circle3.y = 25 local circle4 = display.newCircle(0, 0, 5) circle4:setFillColor(0, 255, 0) circles:insert(circle4) circle4.x = -75 circle4.y = 25 -- Draw a frame that goes through the centers of all 4 circles. local frame2 = display.newLine(circles, -50, 50, -75, 50) frame2:append(-75, 25, -50, 25, -50, 50) Runtime:addEventListener("enterFrame", function(event) squares.rotation = squares.rotation - 1 circles.rotation = circles.rotation + 1 end) |
send message and call to a person
Forum: Report Spam + PM
[INSTALL_PARSE_FAILED_NO_CERTIFICATES]
[SOLVED] Director ERROR: Failed to execute new( params ) function on 'screen1'
Too many (200) local variables
Corona SVG Level Builder released. Drag and drop physics level editor with Inkscape and SVG.
Small bug in Collectible Items example
Pivot Joints and apparent elasticity
Can't make removeSelf() delayed
URGENT - Universal Build Job [PAID]
How to decrypt a crypto encrypted string
GameCenter link doesn't work on iPad/ but does on iPhone...
Applying gameNetwork.request
App Crash When Running On Android
memory/code optimization help
How to get message from showWebPopup
Quick question about removing from tables
Keyboard Help