Add pencile as cursor

This commit is contained in:
2023-10-13 19:19:36 +05:30
parent d95e290bc3
commit 2235ef022d
31 changed files with 78 additions and 43 deletions

View File

@@ -52,11 +52,11 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
parrotScale = 0.35;
parrotScalePlus = 0.38;
parrotWidth = 135;
parrotHeight = 170;
animatedAHeight = 32;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedBHeight = 32;
} else{
cloudeSize = 500;
cloudHeight = 250;
@@ -69,16 +69,16 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
parrotScale = 0.4;
parrotScalePlus = 0.44;
parrotWidth = 200;
parrotHeight = 245;
animatedAHeight = 20;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedBHeight = 20;
}
// let hideButton;
function preload() {
this.load.video('animatedA', '/assets/animated-letter/a.mp4');
this.load.video('animatedB', '/assets/animated-letter/capital_b.mp4');
this.load.svg('letterB', '/assets/capital-letter/b.svg');
this.load.svg('layer1', '/assets/capital-letter/b_l1.svg');
this.load.svg('layer2', '/assets/capital-letter/b_l2.svg');
@@ -92,7 +92,8 @@ 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/canvas4.png');
this.load.image('parrot', '/assets/parrot.png');
// this.load.image('beanie', '/assets/beanie.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@@ -115,7 +116,7 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const parrot = this.add.sprite(customWidth / 2 - parrotWidth, customHeight / 2 - parrotHeight, 'parrot').setScale(parrotScale).setDepth(1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@@ -131,13 +132,13 @@ import Layout from "../../layouts/Layout.astro";
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const parrotscaleFactor = parrotScalePlus; // Scale factor (2 means double the size)
const parrotduration = 2500;
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: parrot,
scaleX: parrotscaleFactor + 0.004,
scaleY: parrotscaleFactor,
duration: parrotduration,
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
@@ -145,7 +146,7 @@ import Layout from "../../layouts/Layout.astro";
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterB').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterB').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); canvasStand
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedB').setDepth(2); canvasStand
firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
@@ -207,7 +208,7 @@ import Layout from "../../layouts/Layout.astro";
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : B', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(0.73);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(0.73);
// Play the video
animatedLetter.play();