Is it possible to skew sprite in Tween?

Phaser 3
1

gfhfy

I want to skew an image with Tween for flipping card, is it possible ? if yes, how to do this?

2

It is possible by using a Quad instead of a Sprite.

https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Quad.html

Basic example:

const card = this.add.quad(100, 100, 'card');
this.tweens.add({
  targets: card,
  topLeftY: 50,
  bottomRightY: 150,
});

You can tween the corner points to skew the Quad.

4 Likes
3

Thank you!

1 Like
4

up until 3.24 - i noticed this week when dusting off that quad has been removed since 3.5 (totally without any mercy for the past) but the examples on mesh and createMesh for phaser 3.5+ dont seem to work (for me) in both firefox and chrome (on linux) . When i use the exact typing as per example it says something about createMesh not being a function(ormethod) and it simply displays nothing. (displays nothing in the official examples on the site either)

Anyone could post a working example that works in the latest FF and Chrome as per january 16 2021 that would be awesome and much obliged, thanks (the quad worked fine but i dont feel like sticking to 3.24 if its 26 versionnumbers past that today

5

http://labs.phaser.io/index.html?dir=game%20objects/mesh/&q=

2 Likes
6

solved by milton in post 5 … :blush:
You, sir, might just have saved the universe from collapsing !!

have one on the house

200w

it works in my browser so im sure i can make that work for me, much obliged, sorry to bother since i clearly missed this one

:sweat_smile:

7

I’m looking for some advice on how to accomplish this. I have a mesh with generated verts but it doesn’t quite look right. How can I change the axis for rotation from the middle to the side? Also, can anyone explain setPerspective? Ideally the card would simply be rendered with the dimensions of the asset.

Below is a snippet of what I have so far:

const card = this.add.mesh(0, 0, 'card')
    .setPerspective(100, 100)
    .panZ(10);
Phaser.Geom.Mesh.GenerateGridVerts({
    mesh: card,
    widthSegments: 1,
});
card.modelRotation = new Phaser.Math.Vector3(0.025, .75, 0);