hi there. i’m trying to fast farward to the end of the animation when the condition is met.
I tried using timescale but it does’t work. No errors or something to indicate why is not working.
here is the code of the 2 animations
const timeline = this.add.timeline([
{
at: 0,
tween: {
targets: this.legendaryCard,
scaleX: 0.4,
scaleY: 0.4,
y: this.sys.scale.height / 3 + 220,
duration: 800,
timeScale: 1,
ease: "Cubic.easeOut",
onUpdate: () => {
particleImplosion.setPosition(
this.legendaryCard.x,
this.legendaryCard.y
);
},
},
},
{
at: 800,
tween: {
targets: this.legendaryCard,
y: this.sys.scale.height / 3 + 80,
scaleX: 0.6,
scaleY: 0.6,
timeScale: 0.1,
duration: 3000,
ease: "Sine.easeInOut",
onUpdate: () => {
particleImplosion.setPosition(
this.legendaryCard.x,
this.legendaryCard.y
);
},
},
},
{
at: 800,
tween: {
targets: this.legendaryCard,
rotateY: -7200,
duration: 4680,
timeScale: 1,
ease: (t) => {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
},
},
},
{
at: 5800,
run: () => {
particleImplosion.setVisible(false);
this.addJelloAnimation();
},
},
]);
timeline.play();
};
this.addJelloAnimation = () => {
let freeSpinsIcon;
let freeSpinsText;
const jelloTimeline = this.add.timeline([
{
at: 0,
tween: {
targets: this.legendaryCard,
scaleX: 1.25,
scaleY: 0.75,
duration: 150,
ease: "Sine.easeInOut",
},
},
{
at: 150,
tween: {
targets: this.legendaryCard,
scaleX: 0.75,
scaleY: 1.25,
duration: 100,
ease: "Sine.easeInOut",
},
},
{
at: 250,
tween: {
targets: this.legendaryCard,
scaleX: 1.15,
scaleY: 0.85,
duration: 100,
ease: "Sine.easeInOut",
},
},
{
at: 350,
run: () => {
this.legendaryCard.setTexture("newLegendaryImage");
const cardX = this.legendaryCard.x;
const cardY = this.legendaryCard.y;
freeSpinsIcon = this.add.image(
cardX,
cardY ,
"freeSpinsIconDesktop"
);
freeSpinsIcon.setScale(0);
freeSpinsIcon.setDepth(this.legendaryCard.depth + 1);
freeSpinsText = this.add.text(
cardX - 15,
cardY + 60,
this.won_amount,
{
fontFamily: "Berlin Sans FB Demi",
fontSize: "26px",
fontStyle: "normal",
fontWeight: "700",
color: "#ffffff",
align: "center",
lineSpacing: 1,
letterSpacing: -3,
stroke: "#000000",
strokeThickness: 1,
shadow: {
offsetY: 1.843,
color: "#000000",
blur: 0,
stroke: true,
fill: true,
},
}
);
freeSpinsText.setOrigin(0.2);
freeSpinsText.setDepth(this.legendaryCard.depth + 1);
freeSpinsText.setScale(0);
this.tweens.add({
targets: [freeSpinsIcon],
scale: 0.7,
duration: 300,
ease: "Back.easeOut",
});
this.tweens.add({
targets: [freeSpinsText],
scale: 1,
duration: 300,
ease: "Back.easeOut",
});
},
},
{
at: 350,
tween: {
targets: this.legendaryCard,
scaleX: 0.95,
scaleY: 1.05,
duration: 150,
ease: "Sine.easeInOut",
},
},
{
at: 500,
tween: {
targets: this.legendaryCard,
scaleX: 1.05,
scaleY: 0.95,
duration: 100,
ease: "Sine.easeInOut",
},
},
{
at: 600,
tween: {
targets: this.legendaryCard,
scaleX: 0.7,
scaleY: 0.7,
duration: 250,
ease: "Sine.easeInOut",
},
},
{
at: 950,
run: () => {
if (this.legendaryCard && freeSpinsIcon && freeSpinsText) {
this.tweens.add({
targets: [this.legendaryCard, freeSpinsIcon, freeSpinsText],
x: "-=200",
duration: 500,
ease: "Power2",
onComplete: () => {
this.activatePremiumAnimation();
},
});
}
},
},
]);
jelloTimeline.play();
//timeout function to wait for the animation to finish and hide legendary card
setTimeout(() => {
freeSpinsText.setVisible(false);
freeSpinsIcon.setVisible(false);
}, 4200 );
};
}
not I triend directly in the tween to set the timescale 0.1 or after i play the timeline exemple timeline.timeScale=0.1 or 10 just to test if it works.
I’m running out of ideeas .
My config :
const config = {
width: gameWidth,
height: gameHeight,
type: Phaser.AUTO,
parent: "anime-container",
scene: [scene],
transparent: true,
fps: {
target: 60,
forceSetTimeOut: false,
},
physics: {
default: "arcade",
arcade: {
debug: true,
},
},
plugins: {
scene: [
{ key: "SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" },
],
},
scale: {
mode: scaleMode,
autoCenter: Phaser.Scale.CENTER_BOTH,
},
render: {
pixelArt: false,
antialias: true,
},
};