last work on gif

src/pages/guided-tracing/a.astro

@@ -47,17 +47,26 @@ import Layout from "../../layouts/Layout.astro";
       canvasHeight = 154; 
       letterHeight = 70;
       backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
       canvasScale = 0.3;
-      canvasHeight = 100;
-      letterHeight = 0;
+      canvasHeight = 180;
+      letterHeight = 50;
       backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
     }
   // let hideButton;
 
   function preload() {
+    this.load.image('animatedA', '/assets/animated-letter/a.gif');
     this.load.svg('letterA', '/assets/capital-letter/a.svg');
     this.load.svg('layer1', '/assets/capital-letter/a_l1.svg');
     this.load.svg('layer2', '/assets/capital-letter/a_l2.svg');
@@ -72,17 +81,45 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas2.png');
+    this.load.image('sun', '/assets/sun.png');
   }
 
+
   function create() {
+    const gifImage = new Image();
+
+// Set the source (URL) of the GIF
+gifImage.src = '/assets/animated-letter/a.gif';
+
+// Append the image element to the document
+document.body.appendChild(gifImage);
+
+// Function to play the GIF
+function playGif() {
+    gifImage.style.display = 'block'; // Show the image
+}
+
+// Function to pause the GIF
+function pauseGif() {
+    gifImage.style.display = 'none'; // Hide the image
+}
+
+// Function to stop and reset the GIF
+function stopGif() {
+    gifImage.src = gifImage.src; // Reset the image source
+    gifImage.style.display = 'none'; // Hide the image
+}
+
+// Example usage:
+playGif();
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-    
-    
-    
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud');
-    cloud.setDepth(-1.9);
+  
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
     const scrollSpeed = 0.5;
     this.time.addEvent({
     loop: true,
@@ -90,12 +127,27 @@ import Layout from "../../layouts/Layout.astro";
       cloud.tilePositionX += scrollSpeed;
     },
     delay: 16, // Adjust the delay for the desired scrolling speed
+  });
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2);
     this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
     firstScreen.setVisible(false);
+    
 
     let hideButton = this.add.text(customWidth / 2, customHeight / 1.1, "Let`s Do", { font: '24px quicksand', fill: '#05b3a4' });
     hideButton.setInteractive().on('pointerdown', () => {
@@ -130,10 +182,10 @@ import Layout from "../../layouts/Layout.astro";
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
 
-    let textX = window.innerWidth / 2, textY;
+    let textX, textY;
 
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1');
-      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
       textY = isMobile ? customHeight / 5 : customHeight / 2;
       const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
       const slantLeftAudio = this.sound.add('slantLeft');
@@ -143,7 +195,7 @@ import Layout from "../../layouts/Layout.astro";
       firstLayer.setInteractive({ draggable: true });
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2');
-      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
       const secondTextLayer = this.add.text(textX, textY, '2. Slant Right', { font: '700 40px quicksand', fill: '#05b3a4'});
       const slantRightAudio = this.sound.add('slantRight');
       secondTextLayer.setVisible(false);
@@ -301,4 +353,5 @@ import Layout from "../../layouts/Layout.astro";
 function update() {
 
 }
+
 </script>