rotating icons in tripleplay

[Andres Q]

Hi,

I'm working on a prototype for the next game, I'm adding buttons (with icons) to a root, so far so good, and looks like this:

Now I want to be able to rotate some of those icons, hence I wrote an Icon class that works like this:

private Icon icon(Image image, float rotation) {
      Layer il = new ImageLayer(image).setRotation(rotation);

      return new Icon() {
         public float width() { return image.width(); }
         public float height() { return image.height(); }
         public Layer render() { return il; }
         public RFuture<Icon> state() { return RFuture.<Icon> success(this); }
      };
   }

And it looks like this:

So I set the Origin to the ImageLayer constructor when producing the Icon:

      Layer il = new ImageLayer(image)
            .setOrigin(Origin.CENTER)
            .setRotation(rotation);

And now the rotation is fine but the placement of the buttons is wrong:

I tried adding .setTranslation to the ImageLayer but it doesn't change anything.

Any clues?

Thanks

[Michael Bayne]

What do you mean by the placement of the buttons is wrong? Like that layout is wrong or the hit testing is not working or something else?

--

---
You received this message because you are subscribed to the Google Groups "PlayN" group.
To unsubscribe from this group and stop receiving emails from it, send an email to playn+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/playn/CAJrxdrvjO4328LaheMyYuWpffz6xB1bbhouOwf06Qv0ZbOX0vg%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

--

-- m...@samskivert.com

[Andres Q]

I meant layout, I actually didn't get to try clicking the buttons yet.

My goal is to have all the buttons lined up like the first image, but rotated. On the third image you can see that the buttons are moved to the left (half size) and up (half size) as consequence of setting Origin.CENTER (or at least that's my assumption), but if I don't set the Origin, then the rotation is done from UL.

[Michael Bayne]

I'm still not quite sure what you're aiming for in terms of layout, but in any case, you're probably better off not rotating the icon layer, because that's just going to confuse the button which contains it. Instead maybe experiment with rotating the layer of the Button that holds the icon? That will, I think anyway, at least avoid problems with button hit testing because it's the button's GroupLayer that does the hit testing and thus it will need the rotation so that it applies that inversely to the mouse position before doing hit testing (which is going to happen on the unrotated width/height of the underlying icon).

Then you can play with translation on the Button layer too perhaps, to achieve the layout you want, though that may be overridden by the Layout instance that's arranging the buttons, so you might have to make a custom Layout instance if you're doing something weird.

--

---
You received this message because you are subscribed to the Google Groups "PlayN" group.
To unsubscribe from this group and stop receiving emails from it, send an email to playn+un...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/playn/CAJrxdrtynO_XuNs7Rex6R8L1eNe_zBnMJEo9Z%2BbFMPuZdsMKSg%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--

-- m...@samskivert.com

[Michael Bayne]

Also FYI: the button sets the translation on the Icon layer when its laying itself out, so you can't set the translation on that layer as it will be overwritten by the Button. The same goes for the translation on the Button layer, that's set by the Layout that is positioning the buttons, which is why I think you can't just tweak the translation there either. You need to actually configure the Layout so that it positions things the way you want them from the start.

--

-- m...@samskivert.com

[Andres Q]

Thanks Michael for your help.

I tried hacking a custom Layout but to no avail. Eventually I did what I think it's an ugly hack, but it works: I create an empty Group and layout manually the layers on it's layer. It works but I lose all the Element properties (such as Styles) ¯\_(ツ)_/¯