kar/phaser-game-bs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add pencile as cursor

Browse Source
This commit is contained in:
Dev 1
2023-10-13 19:19:36 +05:30
parent d95e290bc3
commit 2235ef022d
31 changed files with 78 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/pages/guided-tracing/A.astro
View File

@@ -39,6 +39,10 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer;
let graphics;
let isDrawing = false;
// let x = 100;
// // Use x
// console.log(x);
if(isMobile){
cloudeSize = 200;
@@ -52,10 +56,10 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
parrotScale = 0.35;
parrotScalePlus = 0.365;
parrotWidth = 135;
parrotHeight = 170;
beanieScale = 0.35;
beanieScalePlus = 0.365;
beanieWidth = 135;
beanieHeight = 170;
animatedAHeight = 35;
animatedAScale = 0.65;
} else{
@@ -70,15 +74,15 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
parrotScale = 0.4;
parrotScalePlus = 0.45;
parrotWidth = 200;
parrotHeight = 255;
beanieScale = 0.4;
beanieScalePlus = 0.45;
beanieWidth = 200;
beanieHeight = 255;
animatedAHeight = 20;
animatedAScale = 0.73;
}
function preload() {
this.load.video('animatedA', '/assets/animated-letter/a.mp4');
this.load.video('animatedA', '/assets/animated-letter/capital_a.mp4');
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');
@@ -93,18 +97,46 @@ 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('parrot', '/assets/beanieImage.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');
// this.load.image('customCursor', '/assets/pencile.png');
// this.load.image('eye', '/assets/pencile.png');
this.load.image('customCursor', '/assets/pencile.png');
}
function create() {
this.input.setDefaultCursor('none');
// Set the initial position of the custom cursor
const initialCursorX = customWidth / 2 - 8;
const initialCursorY = customHeight / 2 - 100;
// Create a sprite for the custom cursor at the initial position
customCursor = this.add.sprite(initialCursorX, initialCursorY, 'customCursor');
// customCursor.setOrigin(0.5, 0.5);
customCursor.setOrigin(0.0, 0.98).setDepth(2.1).setScale(0.18);
// Set the custom cursor to follow the pointer
this.input.on('pointermove', (pointer) => {
customCursor.x = pointer.x;
customCursor.y = pointer.y;
});
// Hide cursor on click
this.input.on('pointerdown', () => {
customCursor.setVisible(true);
});
this.input.on('pointerup', () => {
customCursor.setVisible(true);
});
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').setAlpha(0.9);
cloud.setDepth(-1.8);
const scrollSpeed = 0.5;
@@ -117,7 +149,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)
@@ -133,13 +165,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
@@ -328,7 +360,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) {
isDrawing = true;
graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y)
// console.log("Start Position", pointer.x, pointer.y)
});
this.input.on('pointerup', function () {
@@ -344,6 +376,8 @@ import Layout from "../../layouts/Layout.astro";
}
function update() {
this.input.x = 100; // X coordinate
this.input.y = 200;
}

43
src/pages/guided-tracing/B.astro
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();

2
src/pages/guided-tracing/C.astro
View File

@@ -78,7 +78,7 @@ import Layout from "../../layouts/Layout.astro";
// let hideButton;
function preload() {
this.load.video('animatedA', '/assets/animated-letter/a.mp4');
this.load.video('animatedA', '/assets/animated-letter/capital_c.mp4');
this.load.svg('letterC', '/assets/capital-letter/c.svg');
this.load.svg('layer1', '/assets/capital-letter/c.svg');
this.load.audio('audioOne', '/assets/audio/hook-around.mp3');