How to perform 3D-rotation of the sprite?

romka · February 2014

I want to rotate sprite around the its axis with "perspective" effect. In this case rectangle sprite should be transformed to trapezoid. The visual effect which I want to reach is shown on picture:

Visual effect from the right part of this picture can be reached by simple Sprite:scaleX(), but it is not what I want.

I've experimented with meshes and transformation matrixes. Meshes is not useful for this task: by using mesh I can create trapezoid filled with texture, but this texture won't be transformed to trapezoid

My experiments with transformation matrix were more succesfull I could reach the effect like this:

but it is not something that I wanted...

Is it possible to perform such visual effect as I want? I saw this discussion: http://www.giderosmobile.com/forum/discussion/3775/is-it-possible-to-flip-a-sprite-with-a-3d-effect/p1, but haven't found answer for my question there.

OZApps · February 2014

@romka, not sure of the speeds you can achieve, but if you were to split the image into smaller strips and scale them on the X and Y while moving them inwards, you could achieve a similar effect as a Flip rotation. This solution would be cross platform and the speed would depend entirely on the processor of the device.

The other alternative (iOS only) is to use a plug-in that rotates a UIView.

keszegh · February 2014

you can do this with meshes, you just have to set for each vertex the correponding texture vertex you want to be attached to. look up vertexarray.

keszegh · February 2014

or rather texturecoordinatearray..
docs.giderosmobile.com/reference/gideros/Mesh/setTextureCoordinate#Mesh:setTextureCoordinate

romka · February 2014

@keszegh, thank you for your advice.

I'd done several tests with mesh and texture coordinates and got such result:

It looks better then result from my first post, but it's still not what I expect. Do you have ideas how to get rid from the border in the middle of this figure?

This figure created by this code:

local width = 300
local height = 300
 
local texture = Texture.new("grid.png", true, {wrap = Texture.REPEAT})
 
local mesh = Mesh.new() 
 
mesh:setVertices(1, 20, 20, 2, width, 50, 3, width, height - 50, 4, 20, height - 20) 
mesh:setIndexArray(1, 2, 3, 1, 3, 4) 
 
mesh:setTexture(texture)
mesh:setTextureCoordinates(1, 0, 20, 2, width, 20, 3, width, height - 20, 4, 0, height - 20)
 
stage:addChild(mesh)

@OZApps

>> but if you were to split the image into smaller strips

Sorry, but this solution don't looks like right way.

keszegh · February 2014

you are indeed right, when i was experimenting with these, finally i did non-perspective rotation, where you don't have this problem. anyway if you rotate multiple rectangles it is weird that each has its own perspective.
if you only rotate one and you really want that with perspective, then i think that so far you cannot do that in gideros, but correct me @ar2rsawseen. however, with opengl2 and shaders this might be possible, in a future version of gideros.

this is the problem you went into:
http://en.wikipedia.org/wiki/File:Perspective_correct_texture_mapping.jpg

Howdy, Stranger!

Categories

In this Discussion

Top Posters

How to perform 3D-rotation of the sprite?

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

How to perform 3D-rotation of the sprite?

Comments