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

work on animation

Browse Source
This commit is contained in:
Dev 1
2023-10-02 21:38:33 +05:30
parent c4edb94593
commit d7e64fff32
92 changed files with 8151 additions and 6690 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
src/pages/guided-tracing/a.astro
View File

@@ -32,14 +32,13 @@ import Layout from "../../layouts/Layout.astro";
update: update
}
};
const game = new Phaser.Game(config);
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
let firstLayer, secondLayer, thirdLayer;
let graphics;
let isDrawing = false;
// let hideButton;
function preload() {
this.load.svg('letterA', '/assets/capital-letter/a.svg');
@@ -51,43 +50,47 @@ import Layout from "../../layouts/Layout.astro";
this.load.audio('slide', '/assets/audio/slide.mp3');
this.load.image('topLogo', '/assets/top_logo.png');
this.load.svg('succesImage', '/assets/svg/tick.svg');
this.load.svg('handPointer', '/assets/svg/hand.svg');
}
function create() {
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', });
const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
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', () => {
isDemoButtonClicked = false;
firstScreen.setVisible(false);
hideButton.setVisible(false); // Hide the "Hide" button
demoButton.setVisible(true); // Show the "Demo" button
graphics.setVisible(true);
handPointerLeft.setVisible(false);
handPointerRight.setVisible(false);
handPointeSlide.setVisible(false);
});
hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2, customHeight / 1.1, "Help", { font: '24px quicksand', fill: '#05b3a4' });
demoButton.setInteractive().on('pointerdown', () => {
graphics.setVisible(false);
firstScreen.setVisible(true);
demoButton.setVisible(false); // Hide the "Demo" button
hideButton.setVisible(true); // Show the "Hide" button
handPointerLeft.setVisible(true);
handPointerRight.setVisible(true);
handPointeSlide.setVisible(true);
});
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20;
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);
this.time.delayedCall(2000, () => {
this.tweens.add({
targets: firstScreen,
alpha: 0,
scaleX: 0.5,
scaleY: 0.5,
duration: 1000,
onComplete: () => {
firstScreen.setVisible(false);
firstScreen.setScale(1);
showLayersWithFadeIn.call(this);
}
});
}, [], this);
}
function showLayersWithFadeIn() {
this.tweens.add({
targets: [firstLayer, secondLayer, thirdLayer],
alpha: 1,
duration: 1000, // Duration of the tween in milliseconds
delay: 500, // Delay before the fade-in starts
ease: 'Power2', // Easing function (e.g., 'Linear', 'Cubic', 'Elastic', etc.)
});
let textX, textY;
let textX, textY;
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
@@ -164,6 +167,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)
});
this.input.on('pointerup', function () {
@@ -176,7 +180,86 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
});
const handPointerLeft = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
const startHeightLeft = customHeight /2 - 140; // Starting y position
const endHeightLeft = 567; // Ending y position
const startWidthLeft = customWidth / 2 + 20;
const endWidthLeft = customWidth / 2 - 65;
// handPointer.setOrigin(0.5, 0.5);
handPointerLeft.setScale(0.5).setDepth(2); // Adjust scale as needed
// Define the bounce animation
this.tweens.add({
targets: handPointerLeft,
x: {
getStart: () => startWidthLeft,
getEnd: () => endWidthLeft,
}, // End x position
y: {
getStart: () => startHeightLeft,
getEnd: () => endHeightLeft,
},
duration: 3000, // Duration of each bounce
ease: 'Sine.easeInOut',
yoyo: false,
repeat: -1 // -1 means it will repeat indefinitely
});
const handPointerRight = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
const startHeightRight = customHeight /2 - 140; // Starting y position
const endHeightRight = 567; // Ending y position
const startWidthRight = customWidth / 2 + 20;
const endWidthRight = customWidth / 2 + 100;
// handPointer.setOrigin(0.5, 0.5);
handPointerRight.setScale(0.5).setDepth(2).setAngle(360); // Adjust scale as needed
// Define the bounce animation
this.tweens.add({
targets: handPointerRight,
x: {
getStart: () => startWidthRight,
getEnd: () => endWidthRight,
}, // End x position
y: {
getStart: () => startHeightRight,
getEnd: () => endHeightRight,
},
duration: 3000, // Duration of each bounce
ease: 'Sine.easeInOut',
yoyo: false,
repeat: -1 // -1 means it will repeat indefinitely
});
const handPointeSlide = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
const startHeightSlide = customHeight / 2 + 17; // Starting y position
const endHeightSlide = customHeight / 2 + 17; // Ending y position
const startWidthSlide = customWidth / 2 - 60;
const endWidthSlide = customWidth / 2 + 55;
// handPointer.setOrigin(0.5, 0.5);
handPointeSlide.setScale(0.5).setDepth(2).setAngle(45); // Adjust scale as needed
// Define the bounce animation
this.tweens.add({
targets: handPointeSlide,
x: {
getStart: () => startWidthSlide,
getEnd: () => endWidthSlide,
}, // End x position
y: {
getStart: () => startHeightSlide,
getEnd: () => endHeightSlide,
},
duration: 3000, // Duration of each bounce
ease: 'Sine.easeInOut',
yoyo: false,
repeat: -1 // -1 means it will repeat indefinitely
});
handPointerLeft.setVisible(false);
handPointerRight.setVisible(false);
handPointeSlide.setVisible(false);
// Start Position 626 317
}
// function showLayersWithFadeIn() {
// }
function update() {
// Update any game logic if needed

104
src/pages/guided-tracing/b.astro
View File

@@ -32,68 +32,48 @@ import Layout from "../../layouts/Layout.astro";
update: update
}
};
const game = new Phaser.Game(config);
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
let firstLayer, secondLayer, thirdLayer;
let graphics;
let isDrawing = false;
// let hideButton;
function preload() {
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');
this.load.svg('layer3', '/assets/capital-letter/b_l3.svg');
this.load.audio('tallDown', '/assets/audio/tall-down.mp3');
this.load.audio('slideAround', '/assets/audio/slide-around.mp3');
this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
this.load.audio('slide', '/assets/audio/slide.mp3');
this.load.image('topLogo', '/assets/top_logo.png');
this.load.svg('succesImage', '/assets/svg/tick.svg');
this.load.svg('handPointer', '/assets/svg/hand.svg');
}
function create() {
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', });
const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterB');
firstScreen.setVisible(false);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20;
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);
this.time.delayedCall(2000, () => {
this.tweens.add({
targets: firstScreen,
alpha: 0,
scaleX: 0.5,
scaleY: 0.5,
duration: 1000,
onComplete: () => {
firstScreen.setVisible(false);
firstScreen.setScale(1);
showLayersWithFadeIn.call(this);
}
});
}, [], this);
}
function showLayersWithFadeIn() {
this.tweens.add({
targets: [firstLayer, secondLayer, thirdLayer],
alpha: 1,
duration: 1000, // Duration of the tween in milliseconds
delay: 500, // Delay before the fade-in starts
ease: 'Power2', // Easing function (e.g., 'Linear', 'Cubic', 'Elastic', etc.)
});
let textX, textY;
let textX, textY;
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down', { font: '700 40px quicksand', fill: '#05b3a4'});
const slantLeftAudio = this.sound.add('tallDown');
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
const slantLeftAudio = this.sound.add('slantLeft');
slantLeftAudio.play();
firstLayer.setDepth(1);
firstLayer.setAlpha(0.5);
@@ -101,8 +81,8 @@ import Layout from "../../layouts/Layout.astro";
secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Slide Around', { font: '700 40px quicksand', fill: '#05b3a4'});
const slantRightAudio = this.sound.add('slideAround');
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);
secondLayer.setDepth(1);
secondLayer.setAlpha(0.5);
@@ -111,8 +91,8 @@ import Layout from "../../layouts/Layout.astro";
thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
const thirdTextLayer = this.add.text(textX, textY, '3. Slide Around', { font: '700 40px quicksand', fill: '#05b3a4'});
const slideAudio = this.sound.add('slideAround');
const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
const slideAudio = this.sound.add('slide');
thirdTextLayer.setVisible(false);
thirdLayer.setDepth(1.1);
// thirdLayer.setScale(1.15);
@@ -164,6 +144,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)
});
this.input.on('pointerup', function () {
@@ -176,7 +157,56 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
});
const handPointerLeft = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
const startHeightLeft = customHeight /2 - 140;
const endHeightLeft = customHeight / 2 + 140;
const startWidthLeft = customWidth / 2 + 10;
const endWidthLeft = customWidth / 2 + 10;
handPointerLeft.setScale(0.5).setDepth(2); // Adjust scale as needed
this.tweens.add({
targets: handPointerLeft,
x: {
getStart: () => startWidthLeft,
getEnd: () => endWidthLeft,
}, // End x position
y: {
getStart: () => startHeightLeft,
getEnd: () => endHeightLeft,
},
duration: 3000, // Duration of each bounce
ease: 'Sine.easeInOut',
yoyo: false,
repeat: -1 // -1 means it will repeat indefinitely
});
handPointerLeft.setVisible(false);
// Start Position 626 317
let hideButton = this.add.text(customWidth / 2, customHeight / 1.1, "Let`s Do", { font: '24px quicksand', fill: '#05b3a4' });
hideButton.setInteractive().on('pointerdown', () => {
isDemoButtonClicked = false;
firstScreen.setVisible(false);
hideButton.setVisible(false); // Hide the "Hide" button
demoButton.setVisible(true); // Show the "Demo" button
graphics.setVisible(true);
handPointerLeft.setVisible(false);
});
hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2, customHeight / 1.1, "Help", { font: '24px quicksand', fill: '#05b3a4' });
demoButton.setInteractive().on('pointerdown', () => {
graphics.setVisible(false);
firstScreen.setVisible(true);
demoButton.setVisible(false); // Hide the "Demo" button
hideButton.setVisible(true); // Show the "Hide" button
handPointerLeft.setVisible(true);
});
}
// function showLayersWithFadeIn() {
// }
function update() {
// Update any game logic if needed

148
src/pages/guided-tracing/o.astro Normal file
View File

@@ -0,0 +1,148 @@
---
import Layout from "../../layouts/Layout.astro";
---
<Layout title="Guided Letter Tracing Game">
<main>
<div>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4,
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2,
height: window.innerHeight / 2,
};
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
backgroundColor: 0xFFFFFF,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
},
scene: {
preload: preload,
create: create,
update: update
}
};
const game = new Phaser.Game(config);
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
let firstLayer;
let graphics;
let isDrawing = false;
let ellipseCenter;
let ellipseRadiusX = 74;
let ellipseRadiusY = 100;
let angle = 0;
let rotationSpeed = 0.02; // Adjust rotation speed as needed
let rotatingObject;
// let hideButton;
function preload() {
this.load.svg('letterO', '/assets/capital-letter/o.svg');
this.load.svg('layer1', '/assets/capital-letter/o.svg');
this.load.audio('hookAroundClose', '/assets/audio/hook-arround-close.mp3');
this.load.image('topLogo', '/assets/top_logo.png');
this.load.svg('succesImage', '/assets/svg/tick.svg');
this.load.svg('handPointer', '/assets/svg/hand.svg');
}
function create() {
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', });
const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterO');
firstScreen.setVisible(false);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20;
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, textY;
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2;
const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close', { font: '700 40px quicksand', fill: '#05b3a4'});
const hookAroundClose = this.sound.add('hookAroundClose');
hookAroundClose.play();
firstLayer.setDepth(1);
firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true });
firstLayer.on('drag', (pointer) => {
if (pointer.isDown) {
firstTextLayer.setVisible(false);
firstLayer.setAlpha(1);
} else {
firstLayer.setAlpha(0.5);
}
});
graphics = this.add.graphics();
graphics.lineStyle(15, 0x05b3a4, 2).setDepth(2); // Set line style (width, color, alpha)
this.input.on('pointerdown', function (pointer) {
isDrawing = true;
graphics.moveTo(pointer.x, pointer.y);
// console.log("Start Position", pointer.x, pointer.y)
});
this.input.on('pointerup', function () {
isDrawing = false;
});
this.input.on('pointermove', function (pointer) {
if (!isDrawing) return;
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
});
ellipseCenter = new Phaser.Math.Vector2(customWidth / 2, customHeight / 2); // Center of the ellipse
rotatingObject = this.add.sprite(ellipseCenter.x + ellipseRadiusX, ellipseCenter.y, 'handPointer');
rotatingObject.setScale(0.5).setDepth(2); // Adjust scale as needed
let hideButton = this.add.text(customWidth / 2, customHeight / 1.1, "Let`s Do", { font: '24px quicksand', fill: '#05b3a4' });
hideButton.setInteractive().on('pointerdown', () => {
isDemoButtonClicked = false;
firstScreen.setVisible(false);
hideButton.setVisible(false); // Hide the "Hide" button
demoButton.setVisible(true); // Show the "Demo" button
graphics.setVisible(true);
hideButton.setVisible(false);
rotatingObject.setVisible(false);
});
hideButton.setVisible(false);
rotatingObject.setVisible(false);
let demoButton = this.add.text(customWidth / 2, customHeight / 1.1, "Help", { font: '24px quicksand', fill: '#05b3a4' });
demoButton.setInteractive().on('pointerdown', () => {
graphics.setVisible(false);
firstScreen.setVisible(true);
demoButton.setVisible(false); // Hide the "Demo" button
hideButton.setVisible(true); // Show the "Hide" button
rotatingObject.setVisible(true);
});
}
function update() {
angle -= rotationSpeed;
const x = ellipseCenter.x + ellipseRadiusX * Math.cos(angle);
const y = ellipseCenter.y + ellipseRadiusY * Math.sin(angle);
rotatingObject.x = x;
rotatingObject.y = y;
// Rotate the object based on the angle (optional)
rotatingObject.rotation = angle;
}
</script>

2
src/pages/tracing/test2.astro → src/pages/tracing/animate-pointer.astro
View File

@@ -31,7 +31,7 @@ import Layout from "../../layouts/Layout.astro";
function preload() {
// Preload your assets here
this.load.image('letterA', '/assets/capital-letter/a.svg');
this.load.svg('handPointer', '/assets/svg/hand.svg')
this.load.svg('handPointer', '/assets/svg/hand.svg');
// Load other assets as needed
}

46
src/pages/tracing/half-round.astro Normal file
View File

@@ -0,0 +1,46 @@
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
<!-- this.load.image('handPointer', '/assets/svg/hand.svg'); -->
<script is:inline>
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
create: create
}
};
const game = new Phaser.Game(config);
let svgPath = "M100,200 C100,100 400,100 400,200";
let points = parseSvgPath(svgPath);
function create() {
// Visualize the SVG path using Phaser graphics (optional)
const graphics = this.add.graphics();
graphics.lineStyle(2, 0xffffff);
for (let i = 0; i < points.length - 1; i++) {
graphics.lineBetween(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
}
}
function parseSvgPath(path) {
// Parse SVG path data to extract points
// This is a simple example and may not cover all SVG path commands
const commands = path.match(/[a-df-z]|[\-+]?\d+(\.\d+)?/ig);
const points = [];
let currentPoint = { x: 0, y: 0 };
commands.forEach((command, index) => {
if (!isNaN(command)) {
const isX = (index % 2 === 0);
currentPoint[isX ? 'x' : 'y'] = parseFloat(command);
points.push({ ...currentPoint });
}
});
return points;
}
</script>

56
src/pages/tracing/round.astro Normal file
View File

@@ -0,0 +1,56 @@
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
<!-- this.load.image('handPointer', '/assets/svg/hand.svg'); -->
<script is:inline>
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
scene: {
preload: preload,
create: create,
update: update
}
};
const game = new Phaser.Game(config);
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
let ellipseCenter;
let ellipseRadiusX = 74;
let ellipseRadiusY = 100;
let angle = 0;
let rotationSpeed = 0.02; // Adjust rotation speed as needed
let rotatingObject;
function preload(){
this.load.image('handPointer', '/assets/svg/hand.svg');
this.load.image('letterO', '/assets/capital-letter/o.svg')
}
function create() {
this.add.image(customWidth / 2, customHeight / 2, 'letterO');
// Create an ellipse (in this case, a visual representation)
// const graphics = this.add.graphics();
// graphics.lineStyle(2, 0xffffff);
// graphics.strokeEllipse(customWidth / 2, customHeight / 2, ellipseRadiusX * 2, ellipseRadiusY * 2);
ellipseCenter = new Phaser.Math.Vector2(customWidth / 2, customHeight / 2); // Center of the ellipse
rotatingObject = this.add.sprite(ellipseCenter.x + ellipseRadiusX, ellipseCenter.y, 'handPointer');
rotatingObject.setScale(0.5).setDepth(2); // Adjust scale as needed
}
function update() {
// Update the angle for rotation
angle -= rotationSpeed;
// Calculate new position based on the angle and radii
const x = ellipseCenter.x + ellipseRadiusX * Math.cos(angle);
const y = ellipseCenter.y + ellipseRadiusY * Math.sin(angle);
rotatingObject.x = x;
rotatingObject.y = y;
// Rotate the object based on the angle (optional)
rotatingObject.rotation = angle;
}
</script>

92
src/pages/tracing/test.astro
View File

@@ -32,7 +32,6 @@ import Layout from "../../layouts/Layout.astro";
update: update
}
};
const game = new Phaser.Game(config);
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
@@ -51,9 +50,9 @@ import Layout from "../../layouts/Layout.astro";
this.load.audio('slide', '/assets/audio/slide.mp3');
this.load.image('topLogo', '/assets/top_logo.png');
this.load.svg('succesImage', '/assets/svg/tick.svg');
this.load.svg('handPointer', '/assets/svg/hand.svg');
}
function create() {
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', });
@@ -61,19 +60,28 @@ import Layout from "../../layouts/Layout.astro";
const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
firstScreen.setVisible(false);
let hideButton = this.add.text(customWidth / 2, customHeight / 1.1, "Hide", { font: '24px quicksand', fill: '#05b3a4' });
let hideButton = this.add.text(customWidth / 2, customHeight / 1.1, "Let`s Do", { font: '24px quicksand', fill: '#05b3a4' });
hideButton.setInteractive().on('pointerdown', () => {
isDemoButtonClicked = false;
firstScreen.setVisible(false);
hideButton.setVisible(false); // Hide the "Hide" button
demoButton.setVisible(true); // Show the "Demo" button
graphics.setVisible(true);
handPointerLeft.setVisible(false);
handPointerRight.setVisible(false);
handPointeSlide.setVisible(false);
});
hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2, customHeight / 1.1, "Demo", { font: '24px quicksand', fill: '#05b3a4' });
let demoButton = this.add.text(customWidth / 2, customHeight / 1.1, "Help", { font: '24px quicksand', fill: '#05b3a4' });
demoButton.setInteractive().on('pointerdown', () => {
graphics.setVisible(false);
firstScreen.setVisible(true);
demoButton.setVisible(false); // Hide the "Demo" button
hideButton.setVisible(true); // Show the "Hide" button
handPointerLeft.setVisible(true);
handPointerRight.setVisible(true);
handPointeSlide.setVisible(true);
});
@@ -159,6 +167,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)
});
this.input.on('pointerup', function () {
@@ -171,6 +180,81 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
});
const handPointerLeft = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
const startHeightLeft = customHeight /2 - 140; // Starting y position
const endHeightLeft = 567; // Ending y position
const startWidthLeft = customWidth / 2 + 20;
const endWidthLeft = customWidth / 2 - 65;
// handPointer.setOrigin(0.5, 0.5);
handPointerLeft.setScale(0.5).setDepth(2); // Adjust scale as needed
// Define the bounce animation
this.tweens.add({
targets: handPointerLeft,
x: {
getStart: () => startWidthLeft,
getEnd: () => endWidthLeft,
}, // End x position
y: {
getStart: () => startHeightLeft,
getEnd: () => endHeightLeft,
},
duration: 3000, // Duration of each bounce
ease: 'Sine.easeInOut',
yoyo: false,
repeat: -1 // -1 means it will repeat indefinitely
});
const handPointerRight = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
const startHeightRight = customHeight /2 - 140; // Starting y position
const endHeightRight = 567; // Ending y position
const startWidthRight = customWidth / 2 + 20;
const endWidthRight = customWidth - 530;
// handPointer.setOrigin(0.5, 0.5);
handPointerRight.setScale(0.5).setDepth(2).setAngle(360); // Adjust scale as needed
// Define the bounce animation
this.tweens.add({
targets: handPointerRight,
x: {
getStart: () => startWidthRight,
getEnd: () => endWidthRight,
}, // End x position
y: {
getStart: () => startHeightRight,
getEnd: () => endHeightRight,
},
duration: 3000, // Duration of each bounce
ease: 'Sine.easeInOut',
yoyo: false,
repeat: -1 // -1 means it will repeat indefinitely
});
const handPointeSlide = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
const startHeightSlide = customHeight / 2 + 17; // Starting y position
const endHeightSlide = customHeight / 2 + 17; // Ending y position
const startWidthSlide = customWidth / 2 - 60;
const endWidthSlide = customWidth / 2 + 55;
// handPointer.setOrigin(0.5, 0.5);
handPointeSlide.setScale(0.5).setDepth(2).setAngle(45); // Adjust scale as needed
// Define the bounce animation
this.tweens.add({
targets: handPointeSlide,
x: {
getStart: () => startWidthSlide,
getEnd: () => endWidthSlide,
}, // End x position
y: {
getStart: () => startHeightSlide,
getEnd: () => endHeightSlide,
},
duration: 3000, // Duration of each bounce
ease: 'Sine.easeInOut',
yoyo: false,
repeat: -1 // -1 means it will repeat indefinitely
});
handPointerLeft.setVisible(false);
handPointerRight.setVisible(false);
handPointeSlide.setVisible(false);
// Start Position 626 317
}
// function showLayersWithFadeIn() {

23
src/pages/tracing/test3.astro
View File

@@ -0,0 +1,23 @@
<script is:inline>
function create() {
const startX = 100; // X coordinate for the start point
const startY = 300; // Y coordinate for the start point
const endY = 500; // Y coordinate for the end point
const ball = this.add.sprite(startX, startY, 'ball');
ball.setScale(0.5); // Adjust scale as needed
ball.setOrigin(0.5, 0.5);
// Define the bounce animation
this.tweens.add({
targets: ball,
y: endY, // End point Y coordinate
duration: 1000, // Duration of each bounce
ease: 'Sine.easeInOut',
yoyo: true,
repeat: -1 // -1 means it will repeat indefinitely
});
}
</script>