From 167f8723cf96f61f2ed9fbac5684ab25103d2b13 Mon Sep 17 00:00:00 2001 From: Dev 1 Date: Tue, 17 Oct 2023 20:14:40 +0530 Subject: [PATCH] Add Start Button ANd change Help Button Possition in capital letter and numeric --- src/pages/numeric/0.astro | 35 +++++++++++++++++++++++++++++++--- src/pages/numeric/1.astro | 35 +++++++++++++++++++++++++++++++--- src/pages/numeric/2.astro | 31 +++++++++++++++++++++++++++++- src/pages/numeric/3.astro | 31 +++++++++++++++++++++++++++++- src/pages/numeric/4.astro | 31 +++++++++++++++++++++++++++++- src/pages/numeric/5.astro | 31 +++++++++++++++++++++++++++++- src/pages/numeric/6.astro | 31 +++++++++++++++++++++++++++++- src/pages/numeric/7.astro | 33 ++++++++++++++++++++++++++++++-- src/pages/numeric/8.astro | 31 +++++++++++++++++++++++++++++- src/pages/numeric/9.astro | 35 +++++++++++++++++++++++++++++++--- src/pages/small-letter/s.astro | 2 +- 11 files changed, 308 insertions(+), 18 deletions(-) diff --git a/src/pages/numeric/0.astro b/src/pages/numeric/0.astro index 055c937..3b26744 100644 --- a/src/pages/numeric/0.astro +++ b/src/pages/numeric/0.astro @@ -54,6 +54,11 @@ import Layout from "../../layouts/Layout.astro"; sunHeight = 70; animated0videoScale = 0.6; animated0Height = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -68,6 +73,11 @@ import Layout from "../../layouts/Layout.astro"; sunHeight = 100; animated0videoScale = 0.70; animated0Height = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } // let hideButton; @@ -203,11 +213,11 @@ import Layout from "../../layouts/Layout.astro"; let textX, textY; firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); - textX = isMobile ? customWidth / 16 : customWidth * 0.70; - textY = isMobile ? customHeight / 6.5 : customHeight / 2; + textX = isMobile ? customWidth / 4 : customWidth * 0.75; + textY = isMobile ? customHeight / 5 : customHeight / 2.4; const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 35px quicksand', fill: '#05b3a4'}); const audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -257,6 +267,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); graphics.strokePath(); }); + let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 20, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }) + firstTextLayer.setVisible(false); + startButton.setInteractive().on('pointerdown', () => { + audioOneAudio.play(); + firstTextLayer.setVisible(true); + + }) } diff --git a/src/pages/numeric/1.astro b/src/pages/numeric/1.astro index 7bcb2e0..4a3a8ad 100644 --- a/src/pages/numeric/1.astro +++ b/src/pages/numeric/1.astro @@ -55,6 +55,11 @@ import Layout from "../../layouts/Layout.astro"; animated1videoScale = 0.6; animated1Height = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro"; animated1videoScale = 0.70; animated1Height = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } // let hideButton; @@ -206,11 +216,11 @@ import Layout from "../../layouts/Layout.astro"; let textX, textY; firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); - textX = isMobile ? customWidth / 4 : customWidth * 0.70; - textY = isMobile ? customHeight / 6.5 : customHeight / 2; + textX = isMobile ? customWidth / 4 : customWidth * 0.75; + textY = isMobile ? customHeight / 5 : customHeight / 2.4; const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 35px quicksand', fill: '#05b3a4'}); const audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -260,6 +270,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); graphics.strokePath(); }); + let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 20, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }) + firstTextLayer.setVisible(false); + startButton.setInteractive().on('pointerdown', () => { + audioOneAudio.play(); + firstTextLayer.setVisible(true); + + }) } diff --git a/src/pages/numeric/2.astro b/src/pages/numeric/2.astro index 6a90c53..b7eb111 100644 --- a/src/pages/numeric/2.astro +++ b/src/pages/numeric/2.astro @@ -55,6 +55,11 @@ import Layout from "../../layouts/Layout.astro"; animated2Scale = 0.55; animated2Height = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro"; animated2Scale = 0.55; animated2Height = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } // let hideButton; @@ -212,7 +222,7 @@ import Layout from "../../layouts/Layout.astro"; textY = isMobile ? customHeight / 5 : customHeight / 2.4; const firstTextLayer = this.add.text(textX, textY, '1. Roll Slant',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -294,6 +304,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); graphics.strokePath(); }); + let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 20, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }) + firstTextLayer.setVisible(false); + startButton.setInteractive().on('pointerdown', () => { + audioOneAudio.play(); + firstTextLayer.setVisible(true); + + }) } function update() { diff --git a/src/pages/numeric/3.astro b/src/pages/numeric/3.astro index 2a0eda5..9bc01fe 100644 --- a/src/pages/numeric/3.astro +++ b/src/pages/numeric/3.astro @@ -55,6 +55,11 @@ import Layout from "../../layouts/Layout.astro"; animated3Scale = 0.55; animated3Height = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro"; animated3Scale = 0.55; animated3Height = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } // let hideButton; @@ -211,7 +221,7 @@ import Layout from "../../layouts/Layout.astro"; textY = isMobile ? customHeight / 5 : customHeight / 2.4; const firstTextLayer = this.add.text(textX, textY, '1. Roll Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -293,6 +303,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); graphics.strokePath(); }); + let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 20, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }) + firstTextLayer.setVisible(false); + startButton.setInteractive().on('pointerdown', () => { + audioOneAudio.play(); + firstTextLayer.setVisible(true); + + }) } function update() { diff --git a/src/pages/numeric/4.astro b/src/pages/numeric/4.astro index fe601ce..e22a4cd 100644 --- a/src/pages/numeric/4.astro +++ b/src/pages/numeric/4.astro @@ -59,6 +59,11 @@ import Layout from "../../layouts/Layout.astro"; animated4Height = 35; animated4Scale = 0.65; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -74,6 +79,11 @@ import Layout from "../../layouts/Layout.astro"; animated4Height = 20; animated4Scale = 0.7; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } function preload() { this.load.video('animated4', '/assets/animated-letter/number_4.mp4'); @@ -213,7 +223,7 @@ import Layout from "../../layouts/Layout.astro"; textY = isMobile ? customHeight / 5 : customHeight / 2.4; const firstTextLayer = this.add.text(textX, textY, '1. Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -325,6 +335,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); graphics.strokePath(); }); + let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 20, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }) + firstTextLayer.setVisible(false); + startButton.setInteractive().on('pointerdown', () => { + audioOneAudio.play(); + firstTextLayer.setVisible(true); + + }) } function update() { diff --git a/src/pages/numeric/5.astro b/src/pages/numeric/5.astro index e70c537..0732ec6 100644 --- a/src/pages/numeric/5.astro +++ b/src/pages/numeric/5.astro @@ -59,6 +59,11 @@ import Layout from "../../layouts/Layout.astro"; animated5Height = 35; animated5Scale = 0.55; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -74,6 +79,11 @@ import Layout from "../../layouts/Layout.astro"; animated5Height = 20; animated5Scale = 0.6; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } function preload() { this.load.video('animated5', '/assets/animated-letter/number_5.mp4'); @@ -214,7 +224,7 @@ import Layout from "../../layouts/Layout.astro"; textY = isMobile ? customHeight / 5 : customHeight / 2.4; const firstTextLayer = this.add.text(textX, textY, '1. Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -326,6 +336,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); graphics.strokePath(); }); + let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 20, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }) + firstTextLayer.setVisible(false); + startButton.setInteractive().on('pointerdown', () => { + audioOneAudio.play(); + firstTextLayer.setVisible(true); + + }) } function update() { diff --git a/src/pages/numeric/6.astro b/src/pages/numeric/6.astro index 27af24e..4b0a9d9 100644 --- a/src/pages/numeric/6.astro +++ b/src/pages/numeric/6.astro @@ -55,6 +55,11 @@ import Layout from "../../layouts/Layout.astro"; animated6Scale = 0.55; animated6Height = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro"; animated6Scale = 0.55; animated6Height = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } // let hideButton; @@ -212,7 +222,7 @@ import Layout from "../../layouts/Layout.astro"; textY = isMobile ? customHeight / 5 : customHeight / 2.4; const firstTextLayer = this.add.text(textX, textY, '1. Curve Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -294,6 +304,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); graphics.strokePath(); }); + let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 20, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }) + firstTextLayer.setVisible(false); + startButton.setInteractive().on('pointerdown', () => { + audioOneAudio.play(); + firstTextLayer.setVisible(true); + + }) } function update() { diff --git a/src/pages/numeric/7.astro b/src/pages/numeric/7.astro index 624ab71..8933e7d 100644 --- a/src/pages/numeric/7.astro +++ b/src/pages/numeric/7.astro @@ -55,13 +55,18 @@ import Layout from "../../layouts/Layout.astro"; animated7Scale = 0.55; animated7Height = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; canvasScale = 0.195; canvasHeight = 20; letterHeight = 10; - letterScale = 1; + letterScale = 1.1; backgroundScale = 1; sunScale = 0.2; sunScalePlus = 0.25; @@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro"; animated7Scale = 0.55; animated7Height = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } // let hideButton; @@ -212,7 +222,7 @@ import Layout from "../../layouts/Layout.astro"; textY = isMobile ? customHeight / 5 : customHeight / 2.4; const firstTextLayer = this.add.text(textX, textY, '1. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -294,6 +304,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); graphics.strokePath(); }); + let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 20, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }) + firstTextLayer.setVisible(false); + startButton.setInteractive().on('pointerdown', () => { + audioOneAudio.play(); + firstTextLayer.setVisible(true); + + }) } function update() { diff --git a/src/pages/numeric/8.astro b/src/pages/numeric/8.astro index d9737a5..6dc2ca2 100644 --- a/src/pages/numeric/8.astro +++ b/src/pages/numeric/8.astro @@ -55,6 +55,11 @@ import Layout from "../../layouts/Layout.astro"; animated8Scale = 0.55; animated8Height = 15; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro"; animated8Scale = 0.55; animated8Height = 0; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } // let hideButton; @@ -212,7 +222,7 @@ import Layout from "../../layouts/Layout.astro"; textY = isMobile ? customHeight / 5 : customHeight / 2.4; const firstTextLayer = this.add.text(textX, textY, '1. Hook Snake',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -294,6 +304,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); graphics.strokePath(); }); + let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 20, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }) + firstTextLayer.setVisible(false); + startButton.setInteractive().on('pointerdown', () => { + audioOneAudio.play(); + firstTextLayer.setVisible(true); + + }) } function update() { diff --git a/src/pages/numeric/9.astro b/src/pages/numeric/9.astro index a48651d..ddf5270 100644 --- a/src/pages/numeric/9.astro +++ b/src/pages/numeric/9.astro @@ -54,7 +54,12 @@ import Layout from "../../layouts/Layout.astro"; sunHeight = 70; animated9Scale = 0.55; - animated9Height = 32; + animated9Height = 40; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro"; animated9Scale = 0.55; animated9Height = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } // let hideButton; @@ -208,11 +218,11 @@ import Layout from "../../layouts/Layout.astro"; let textX, textY; firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); - textX = isMobile ? customWidth / 4 : customWidth * 0.75; + textX = isMobile ? customWidth / 8 : customWidth * 0.75; textY = isMobile ? customHeight / 5 : customHeight / 2.4; const firstTextLayer = this.add.text(textX, textY, '1. Curve Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -294,6 +304,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); graphics.strokePath(); }); + let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 20, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }) + firstTextLayer.setVisible(false); + startButton.setInteractive().on('pointerdown', () => { + audioOneAudio.play(); + firstTextLayer.setVisible(true); + + }) } function update() { diff --git a/src/pages/small-letter/s.astro b/src/pages/small-letter/s.astro index 4215686..b7a3459 100644 --- a/src/pages/small-letter/s.astro +++ b/src/pages/small-letter/s.astro @@ -206,7 +206,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); textX = isMobile ? customWidth / 13 : customWidth * 0.75; - textY = isMobile ? customHeight / 6.5 : customHeight / 2; +textY = isMobile ? customHeight / 5 : customHeight / 2.4; const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Snake',{ font: '700 35px quicksand', fill: '#05b3a4'}); const audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play();