Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat | DONATE
Is it possible to "flip" a sprite with a 3D effect? — Gideros Forum
  • Home
    • ›

    Is it possible to "flip" a sprite with a 3D effect?

    krl3000krl3000 Member
    edited August 2013 in General questions
    I am TOTALLY new to Gideros but have been researching this question for a couple days and haven't found an answer. Basically, I want to simulate the look of a cube with images on each face rotating around the x axis in response to touch gestures (the user would slide up on the cube to rotate the cube up to show what's currently on the bottom face and down on the cube to show what's currently on the top face).

    A simplistic implementation would be to have a sprite for the front face and when the user slides scale the x-axis on that sprite down while scaling the x-axis on another sprite up, adjusting their locations as necessary to give the impression of one face rotating out of view while the other rotates into view. However, this ignores perspective; as the faces rotate in and out of view, the side angles need to change due to perspective. Basically, the sides should be parallelograms where the height and side angles change as the cube is rotated.

    I thought it might be possible to do this using matrix transformations but the only skew transforms I see affect both sides identically (i.e. the shape could be skewed to "lean" left or "lean" right). If I'm trying to skew a rectangular shape, I need the left side to skew toward the right and the right side to skew toward the left.

    Is there any way to do what I'm trying to describe?

    Thanks in advance for any help or advice.
    +1 -1Share on Facebook

    Comments

    • ar2rsawseenar2rsawseen Maintainer
      @krl3000 It seems you want something like this:
      http://www.giderosmobile.com/forum/discussion/353/snippet-rotating-3d-cube

      ;)
      http://appcodingeasy.com/Gideros-Mobile
      +1 -1Share on Facebook
    • krl3000krl3000 Member
      @ar2rsawseen Thanks. I saw that and it's very cool (I need to copy the code and check it out), but I don't think it's quite what I'm looking for. That code is drawing a wireframe of a cube and then rotating that. I need to have images on each face and make the images distort as the faces distort when projected onto 2D space. I don't see how to make that happen from that example.

      If it helps, I'll ONLY be rotating around the x-axis so I can get away with a pseudo-3D instead of needing to model a fully realistic 3D rotating cube.
      +1 -1Share on Facebook
    • ar2rsawseenar2rsawseen Maintainer
      Have not tried, but theoretically you can fill shape with any image you want, although probably it won't be transformed :)
      also theoretically you could achieve similar result with transformation (skewing) but I have not seen any example to this
      http://appcodingeasy.com/Gideros-Mobile
      +1 -1Share on Facebook
    • ianchiaianchia Member
      All you need to do is port this AS3 to Gideros Lua:

      http://www.flashandmath.com/advanced/cube/index.html

      I don't see any problems with this, having seen similar examples in Corona. Have fun.

      - Ian
      +1 -1Share on Facebook
    • krl3000krl3000 Member
      Thanks, everyone. I read through the article but none of the transformation matrices in the article seemed like they'd do the types of transforms necessary so I'll have to look at the actual AS3 code to see if I can figure out what I need from that.

      I've put this part of my project on temporary hold so I could try to get SOMETHING written and not get hung up too early on graphical flourishes. I'm hoping that by the time I'm ready to get back to this effect I'll have enough experience with Gideros and Lua that it will be a bit easier.
      +1 -1Share on Facebook
    • bowerandybowerandy Guru
      @krl3000, I have been looking for similar functionality and have decided that one way to get the required image transforms will be to use the OpenCV library (opencv.org). It might be overkill because there's lots of unwanted stuff in there too.

      My intention would be to use this from Gideros under iOS via BhWax. However, it appears there is also an Android version so one might be able to build a plugin for that too.

      BTW, I haven't started this project yet so I can't provide real details - it's just an idea ATM.

      best regards
      tweets: @ insidebowerhaus blog: http://bowerhaus.eu/blog/blog.html
      +1 -1Share on Facebook
    • krl3000krl3000 Member
      @bowerandy Thanks for the info! Please let me know if you get anywhere with that project. I'll keep you informed if I come up with anything as well.
      +1 -1Share on Facebook
    • ianchiaianchia Member
      @krl3000 @bowerandy The other way you can do it quite simply is to use something like http://desandro.github.io/3dtransforms/docs/cube.html (Look at example 2 on the bottom of the page) on a transparent UIWebView overlaying whatever Gideros OpenGL content you'd like. Performance would be pretty smooth on a range of iOS devices from iPad2/iPhone4 upwards.

      I'm at a loss for how performant it would be under Android's matrix of pain though… (-X Someone would have to test using @ar2rsawseen 's Android web view plugin. (I'd be very interested to hear the results!)

      Best,

      - Ian
      +1 -1Share on Facebook
    • krl3000krl3000 Member
      I didn't realize CSS3 had 3D transforms now. That demo was pretty cool. UIWebView is an Apple control... how do you create that in Lua in Gideros? I'm also primarily focused on Android (don't have a mac or any iOS devices myself) so I think I'll keep looking, but I'll keep this in mind.
      +1 -1Share on Facebook
    • krl3000krl3000 Member
      Thanks everyone for all the suggestions. I really appreciate it. While I'll probably revisit ways to deform the top and bottom sides of the cube to make it look more 3D when it's rotating I think I've come up with a "good enough" solution that I'm going to use for now.

      Basically, I've modified the SceneManager so it can be housed within any Sprite instead of within the stage. While I discovered a lot of transitions aren't quite what I expected when run that way, the ones that were close enough to the type of transition I needed (such as flip) looked close enough to be promising. From there, I took the "FlipWithShade" transition and created four new transitions: RotateUpWithShade, RotateDownWithShade, RotateLeftWithShade, and RotateRightWithShade. These new transitions simultaneously scale scene1 and scene2 along the timeline in inverse proportions so that the two always add up to the parent scene's width or height. One scene is fixed at X=0 or Y=0 (depending on whether I'm rotating up/down or left/right) and the other is fixed to the opposite edge of the other scene.

      Here's the code in case anyone else might find it useful. You'll note that I've added an extra parameter to the transitions, "parent." This is due to my modifications to SceneManager so I could house it inside another sprite. If you want to use these transitions in the standard SceneManager, just remove that parameter and replace the lines that calculate width/height with the standard ones that use application:getContentWidth() or application:getContentHeight().

      BTW, I'm not totally satisfied with the shading effect... it seems a bit too strong when seen on a rotating cube as opposed to the standard FlipWithShade. I might either tone it down so it doesn't go all the way to 0 or maybe look into passing a factoring parameter to the transition so the level of shading can be adjusted.


      function SceneManager.rotateLeftWithShade(parent, scene1, scene2, t)
      local width = parent:getWidth()

      local s = 1 - t
      scene1:setScaleX(s)
      scene1:setX(0)
      scene1:setColorTransform(1 - t, 1 - t, 1 - t, 1)

      scene2:setScaleX(t)
      scene2:setX(width - t * width)
      scene2:setColorTransform(t, t, t, 1)

      end

      function SceneManager.rotateRightWithShade(parent, scene1, scene2, t)
      local width = parent:getWidth()

      local s = 1 - t
      scene1:setScaleX(s)
      scene1:setX(t * width)
      scene1:setColorTransform(1 - t, 1 - t, 1 - t, 1)

      scene2:setScaleX(t)
      scene2:setX(0)
      scene2:setColorTransform(t, t, t, 1)

      end

      function SceneManager.rotateUpWithShade(parent, scene1, scene2, t)
      local height = parent:getHeight()

      local s = 1 - t
      scene1:setScaleY(s)
      scene1:setY(0)
      scene1:setColorTransform(1 - t, 1 - t, 1 - t, 1)

      scene2:setScaleY(t)
      scene2:setY(height - t * height)
      scene2:setColorTransform(t, t, t, 1)

      end

      function SceneManager.rotateDownWithShade(parent, scene1, scene2, t)
      local height = parent:getHeight()

      local s = 1 - t
      scene1:setScaleY(s)
      scene1:setY(t * height)
      scene1:setColorTransform(1 - t, 1 - t, 1 - t, 1)

      scene2:setScaleY(t)
      scene2:setY(0)
      scene2:setColorTransform(t, t, t, 1)

      end
      +1 -1Share on Facebook
    Sign In or Register to comment.