How to fake perspective view for a playing card (rectangle to trapezoid)

cocos2d-x
#1

I am working on 2D card game. I wanted to simulate perspective view for the cards.

To do this it seems I have to scale down from the top edge and scale up from bottom edge.
I think correct term for what i wanted to do is; convert rectangle to trapezoid

The node can be skewed but does not offer any feature to do something like this.

Can anyone suggest how to do something like this?

#2

Look at PolygonInfo.

#3

I am really new to cocos games development.

Can you give me some link showing the usage ?

Please note I am using cocos creator and java script.

#4

I’m using c++, but i believe this code can be easily converted to js:

PolygonInfo polygonInfo = sprite->getPolygonInfo();
polygonInfo.triangles.vertCount = ...;
polygonInfo.triangles.indexCount = ...;
polygonInfo.triangles.verts = ...;
polygonInfo.triangles.indices = ...;
sprite->setPolygonInfo(polygonInfo);

But if you want just to make it trapezoid, then it will be enough to only update verts:

PolygonInfo polygonInfo = sprite->getPolygonInfo();
polygonInfo.triangles.verts[0].vertices = vec3(100, 100, 0); //top left
polygonInfo.triangles.verts[1].vertices = vec3(0, 0, 0); //bottom left
polygonInfo.triangles.verts[2].vertices = vec3(200, 100, 0); //top right
polygonInfo.triangles.verts[3].vertices = vec3(300, 0, 0); //bottom right
sprite->setPolygonInfo(polygonInfo);
#5

it seems it is not supported in cocos studio.
When I tried the following;

    onLoad: function () {
    let spObj = this.node.getComponent(cc.Sprite);
    cc.log(spObj.getPolygonInfo());
},

I got following error “getPolygonInfo is not a function”

Is there some component I have to add to the project?

#6

What is your cocos2d version?

#7

I am using cocos creator. v 1.3.1

#8

Not sure whether Sprite in cocos2d-x is identical to Sprite in cocos creator. So try sprite->getSpriteFrame()->getPolygonInfo();

#9

Thank you for helping me on this issue…

I add Sprite component to a node and tried following combinations
But non of them seems to work…

    // works
    let jSprite = this.node.getComponent(cc.Sprite);
    cc.log(jSprite);
    
    // return null
    let jSpriteFramme1 = jSprite.getComponent(cc.SpriteFrame);
    cc.log(jSpriteFramme1);
    
    // return null
    let jSpriteFrame2 = this.node.getComponent(cc.SpriteFrame);
    cc.log(jSpriteFrame2);
    
    // error, theFrame has a spriteframe
    //let jSpriteFrame3 = this.theFrame.getPolygonInfo();
    //cc.log(jSpriteFrame3);
    
    // error
    let jSpriteFrame3 = this.theFrame.getComponent(cc.PolygonInfo);
    cc.log(jSpriteFrame3);

    //  error
`   this.node.getPolygonInfo();`
#10

isnt it easier to just rotate your gamelayer in 3D space? Thats what i do.

#11

I am new to cocos creator development.
I couldn’t see any option to rotate in 3D space.

Can you explain how to do this ?

I have been trying to get the perspective look for the cards by skewing and rotating playing cards.
But couldn’t get the correct look.

#12

Can anyone provide some help on this?

Can this be done with cocos creator ?

#13

hey, sorry I’ve never used creator before. I had to download and check if there were option setRotation3D and i couldn’t find it.

In c++ i would simply do gameLayer->setRotation3d(vec3(x,y,z));

1 Like
#14

thanks @b12345

The problem is I don’t know whether this can not be done in creator or just I don’t know the method to do it :slight_smile:

#15

I have seen there are functions like FlipY3D in Cocos

http://www.cocos2d-x.org/wiki/Effects

Are they available in Cocos Creator?

#16

Hi,

I’ve been able to fake a flip 90 degrees by using this code:

var animationTime = 0.1;
var rotateByAction = cc.rotateBy(animationTime, 0 , 90);
var rotationSequence = cc.sequence(rotateByAction);
this.node.runAction(rotateSequence);

This rotates a card on its Y-axis 90 degrees to the point where the card disappears from the screen. The tricky part is the other half of the flip, which is what I am currently working on.

So far, the best approach would be to reverse the action with a new Sprite which would be the back card image.

#17

The 3D functions of Cocos2D aren’t quite available in CocosCreator. They should however be in a future release.

#18

@crichar thank you for your help.
Your method to flip the card will be very useful.

Are you working on a card game with perspective view?
How did you achieve that view?

#19

If by perspective view you mean a 3D View on a 2D surface? The Cocos Creator API will let you rotate nodes on the X and Y Axis. For this type of perspective view it might be worthwhile to look into OpenGL vectors to achieve something. You’ll want to use cc.director in order to control the scene in which your game takes place.

Cocos Creator API

To get a better understanding of how the Cocos2Dx framework operates here are some helpful images.
Objects are placed on the screen using nodes. You can manipulate cc.Node to scale, skew, and rotate in a scene.

Heres another image that can hopefully help you.

86f90a289fa5dfbb845bebeccf2b30a7.png500Ă—600 32.4 KB

Check out this link with JavaScript example for a lot of what you’re looking for.
http://cocos2d-x.org/js-tests/#viewSource

#20

I am really new to Cocos game development.

But if we use OpenGL, are we not using webgl ?

All I wanted to do is adjust the cards so that they look like laying on a table.

Is there a simple way of doing this?