Weird group rotation

Audio and Graphics
#1

Dear all,

I’m writing a simple grid menu, a basic 3x3 square with images and texts. The code should be quite easy, but I cannot do something apparently simple:  rotate the “images”.

Now, note that each cell in the grid is a group , inside I am placing an image, a rectangle, and some text. Each group will be placed into another group, and returned it.

Now to add some movement to the scene, I want to rotate these individual groups. The code I’ve written is completely wrong, as if when I call  object:rotate something goes wrong.

The code is as follows:

-- Grid menu function newGrid(items, width, pad) --[[Items are in the following format, and MUST BE 9x9: local m = { { file = "path to file", text = "Menu name", func = function(e) log.log("tapped .. " .. e.target.name) end }, { file = "path to file", text = "Menu name", func = function(e) log.log("tapped .. " .. e.target.name) end }, { file = "path to file", text = "Menu name", func = function(e) log.log("tapped .. " .. e.target.name) end }, ... { NINTH MENU ITEM } } ALL TRANSLATIONS ARE AUTOMATIC]]-- -- New group local g = display.newGroup() -- Local x, y, width and height local h = vars.h / 10 local w = width or vars.w / 6 local p = pad or vars.p local x = w / 2 local y = w / 2 -- Insert all items for k, v in ipairs(items) do local s = tr.tr(v.text) -- Image local r = display.newImageRect(v.file, w, w) r.name = s -- Move image to the right place r.x = x r.y = y -- Text local offset = y + w / 2 local t = display.newText(tr.tr(v.text), x, offset, w, 0, "AntiKwa-Bold", 40) -- Rect local b = display.newRect(x, offset, w, t.height + 10) -- Move and color t:translate(0, -1 \* t.height / 2 - 5) b:translate(0, -1 \* t.height / 2 - 5) b:setFillColor(181 / 256, 16 / 256, 9 / 256, 0.5) -- Group them together local q = display.newGroup() q:insert(r) q:insert(b) q:insert(t) -- Rotate q:rotate(math.random(-3, 3)) -- Insert g:insert(q) -- If we reach a new line, update if k == 3 or k == 6 then x = w / 2 y = y + w + p else x = x + w + p end -- Events q:addEventListener("tap", v.func) end g.alpha = 0 timer.performWithDelay(500, function(e) transition.fadeIn(g, { time = 250 } ) end) return g end

Now the result is in the attached  badgrid.png , and if I  remove the rotation then the results are what I intended (see  nonrotated.png ).

What am I missing here?

Thanks!

#2

Hi there,

Have you tried setting the anchorChildren property of the group to true before rotating?  (Have a look at the bottom of this page for more information).

#3

I’ve tried but it makes all squares overlapping in the same position… maybe there’s something I don’t get about anchor points…

#4

for each of the nine “cells” in your grid, the contents (image,text,rect) of those display groups should be positioned relative to true 0,0 not relative to their final screen xy coordinates, then position the whole GROUP at the desired screen xy coords – then your rotation will appear local

#5

Damn, I overlooked that! Thanks!

#6

Hi there,

Have you tried setting the anchorChildren property of the group to true before rotating?  (Have a look at the bottom of this page for more information).

#7

I’ve tried but it makes all squares overlapping in the same position… maybe there’s something I don’t get about anchor points…

#8

for each of the nine “cells” in your grid, the contents (image,text,rect) of those display groups should be positioned relative to true 0,0 not relative to their final screen xy coordinates, then position the whole GROUP at the desired screen xy coords – then your rotation will appear local

#9

Damn, I overlooked that! Thanks!