Search the Community
Showing results for tags 'blank screen'.
Found 2 results
-
Hi all, I'm doing my first project in Phaser 3 (3.22.0) and am running into a strange issue in browsers other than Firefox (so far Chrome and Safari). Occasionally, when I reload the page, either when running on a local server or on a web server, the game loads as a blank, black screen. Even after allowing the page to load for minutes, the screen remains black. There are no errors in the console, and I'm not able to reproduce the problem consistently. Sometimes, refreshing from the black screen loads the game normally, and sometimes it reloads into the black screen. Screenshots of normal load and black screen load attached. I'm guessing that this has something to do with the browser cache, as I've never had this issue when loading in a new browser for the first time or immediately after clearing the cache. However, I'm not sure of this. Is there a way to force the browser not to pull from cache? Why would this not be happening in Firefox? It may or may not be relevant to know that the project includes a number of videos (total around 150MB). My code is posted below. I apologize for the disorganization and length. Please let me know if you have any insight into what might be going wrong here, or if I can provide additional information about my situation that would be helpful. Thanks in advance for your help! <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Storm Smart - Prototype</title> <link rel='shortcut icon' href='assets/sprites/favicon.ico'> <link href="https://fonts.googleapis.com/css?family=Nunito+Sans&display=swap" rel="stylesheet"> <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script> <style type="text/css"> body { margin: 0; } </style> </head> <body> <script type="text/javascript"> var config = { type: Phaser.AUTO, width: 1280, height: 720, scene: { preload: preload, create: create, update: update } }; var game = new Phaser.Game(config); var activeVideo = -1; var video; var videoGroup; var videoStarted; var choice1Started; var choice2Started; var choice3Started; var xButton; var homeButton; var blizzardArea; var hurricaneArea; var thunderstormArea; var tornadoArea; var blizzardPlayButton; var hurricanePlayButton; var thunderstormPlayButton; var tornadoPlayButton; var blizzardAudio; var hurricaneAudio; var thunderstormAudio; var tornadoAudio; var hazardAudio; var choice1Audio; var choice2Audio; var choice3Audio; var choice1; var choice2; var choice3; var muted; var creditsStartTime = 0; var creditsRolling; var choices = [ [false, true, false], [true, false, false], [true, false, false], [false, false, true], [false, true, false], [false, true, false], [true, false, false], [false, false, true] ]; var icons = [ ['coverIcon', 'flashlightIcon', 'appliancesIcon'], ['indoorsIcon', 'petsIcon', 'windowsIcon'], ['evacuateIcon', 'windowsIcon', 'warmClothesIcon'], ['appliancesIcon', 'flashlightIcon', 'windowsIcon'], ['warmClothesIcon', 'appliancesIcon', 'evacuateIcon'], ['waterBottlesIcon', 'petsIcon', 'basementIcon'], ['coverIcon', 'warmClothesIcon', 'appliancesIcon'], ['flashlightIcon', 'waterBottlesIcon', 'basementIcon'] ]; var videos = [ 'powerOutagesVideo', 'snowyDrivingVideo', 'floodingVideo', 'fallingTreesVideo', 'lightningVideo', 'hailVideo', 'tornadoVideo', 'fallingTreesVideo' ]; var hazards = [ 'noElectricityAudio', 'dangerousRoadsAudio', 'floodingAudio', 'fallingTreesAudio', 'lightningAudio', 'hailAudio', 'flyingObjectsAudio', 'fallingTreesAudio' ]; var hazardsText = [ "No electricity", "Dangerous roads", "Flooding", "Falling trees or branches", "Lightning", "Hail", "Flying objects", "Falling trees or branches" ]; var choicesAudio = [ ['coverAudio', 'flashlightAudio', 'unplugElectricityAudio'], ['goInsideAudio', 'animalsAudio', 'windowsAudio'], ['higherGroundAudio', 'windowsAudio', 'warmlyAudio'], ['unplugElectricityAudio', 'flashlightAudio', 'windowsAudio'], ['warmlyAudio', 'unplugElectricityAudio', 'higherGroundAudio'], ['stockUpAudio', 'animalsAudio', 'lowestFloorAudio'], ['coverAudio', 'warmlyAudio', 'unplugElectricityAudio'], ['flashlightAudio', 'stockUpAudio', 'lowestFloorAudio'] ]; var choicesText = [ ['Take cover', 'Keep a flashlight handy', 'Unplug electricity'], ['Go inside', 'Bring animals inside', 'Stay away from windows'], ['Move to higher ground', 'Stay away from windows', 'Dress warmly'], ['Unplug electricity', 'Keep a flashlight handy', 'Stay away from windows'], ['Dress warmly', 'Unplug electricity', 'Move to higher ground'], ['Stock up', 'Bring animals inside', 'Go to the lowest floor'], ['Take cover', 'Dress warmly', 'Unplug electricity'], ['Keep a flashlight handy', 'Stock up', 'Go to the lowest floor'] ]; function preload () { this.load.image('map', 'assets/sprites/map.png'); this.load.image('playButton', 'assets/sprites/playButton.png'); this.load.image('blizzardButton', 'assets/sprites/blizzard.png'); this.load.image('hurricaneButton', 'assets/sprites/hurricane.png'); this.load.image('thunderstormButton', 'assets/sprites/thunderstorm.png'); this.load.image('tornadoButton', 'assets/sprites/tornado.png'); this.load.image('blizzardArea', 'assets/sprites/blizzardArea.png'); this.load.image('hurricaneArea', 'assets/sprites/hurricaneArea.png'); this.load.image('thunderstormArea', 'assets/sprites/thunderstormArea.png'); this.load.image('tornadoArea', 'assets/sprites/tornadoArea.png'); this.load.image('phoneIcon', 'assets/sprites/doNotUseLandLinePhone.png'); this.load.image('evacuateIcon', 'assets/sprites/evacuate.png'); this.load.image('indoorsIcon', 'assets/sprites/goIndoorsAwayFromWindows.png'); this.load.image('basementIcon', 'assets/sprites/goToBasement.png'); this.load.image('lowestFloorIcon', 'assets/sprites/goToLowestFloor.png'); this.load.image('petsIcon', 'assets/sprites/pets.png'); this.load.image('flashlightIcon', 'assets/sprites/prepareForPowerOutages.png'); this.load.image('coverIcon', 'assets/sprites/protectHeadAndNeck.png'); this.load.image('windowsIcon', 'assets/sprites/stayAwayFromWindows.png'); this.load.image('roadsIcon', 'assets/sprites/stayOffRoads.png'); this.load.image('appliancesIcon', 'assets/sprites/unplugAppliances.png'); this.load.image('flyingDebrisIcon', 'assets/sprites/watchOutForFlyingDebris.png'); this.load.image('waterBottlesIcon', 'assets/sprites/waterBottles.png'); this.load.image('warmClothesIcon', 'assets/sprites/wearWarmClothes.png'); this.load.image('transparent', 'assets/sprites/transparent.png'); this.load.image('overlay', 'assets/sprites/overlay.png'); this.load.image('button', 'assets/sprites/button.png'); this.load.image('xButton', 'assets/sprites/xButton.png'); this.load.image('homeButton', 'assets/sprites/homeButton.png'); this.load.image('soundButton', 'assets/sprites/soundButton.png'); this.load.audio('blizzardAudio', 'assets/audio/blizzard.mp3'); this.load.audio('hurricaneAudio', 'assets/audio/hurricane.mp3'); this.load.audio('thunderstormAudio', 'assets/audio/thunderstorm.mp3'); this.load.audio('tornadoAudio', 'assets/audio/tornado.mp3'); this.load.audio('animalsAudio', 'assets/audio/animals.mp3'); this.load.audio('coverAudio', 'assets/audio/cover.mp3'); this.load.audio('dangerousRoadsAudio', 'assets/audio/dangerousRoads.mp3'); this.load.audio('fallingTreesAudio', 'assets/audio/fallingTreesOrBranches.mp3'); this.load.audio('floodingAudio', 'assets/audio/flooding.mp3'); this.load.audio('flyingObjectsAudio', 'assets/audio/flyingObjects.mp3'); this.load.audio('goInsideAudio', 'assets/audio/goInside.mp3'); this.load.audio('hailAudio', 'assets/audio/hail.mp3'); this.load.audio('higherGroundAudio', 'assets/audio/higherGround.mp3'); this.load.audio('flashlightAudio', 'assets/audio/keepAFlashlight.mp3'); this.load.audio('lightningAudio', 'assets/audio/lightning.mp3'); this.load.audio('lowestFloorAudio', 'assets/audio/lowestFloor.mp3'); this.load.audio('noElectricityAudio', 'assets/audio/noElectricity.mp3'); this.load.audio('stockUpAudio', 'assets/audio/stockUp.mp3'); this.load.audio('unplugElectricityAudio', 'assets/audio/unplugElectricity.mp3'); this.load.audio('warmlyAudio', 'assets/audio/warmly.mp3'); this.load.audio('windowsAudio', 'assets/audio/windows.mp3'); this.load.video('fallingTreesVideo', 'assets/video/fallingTrees.mp4'); this.load.video('floodingVideo', 'assets/video/flooding.mp4'); this.load.video('hailVideo', 'assets/video/hail.mp4'); this.load.video('powerOutagesVideo', 'assets/video/icyRoad.mp4'); this.load.video('lightningVideo', 'assets/video/lightning.mp4'); this.load.video('snowyDrivingVideo', 'assets/video/snowyDriving.mp4'); this.load.video('tornadoVideo', 'assets/video/tornado.mp4'); this.load.text('credits', 'assets/text/credits.txt'); } function create() { // Audio setup // ---------------------------------------------------------------------------------------- blizzardAudio = this.sound.add('blizzardAudio'); hurricaneAudio = this.sound.add('hurricaneAudio'); thunderstormAudio = this.sound.add('thunderstormAudio'); tornadoAudio = this.sound.add('tornadoAudio'); // ---------------------------------------------------------------------------------------- // Game screen definitions // ---------------------------------------------------------------------------------------- gameScreen = this.add.container(0, 0); map = this.add.image(500, 150, 'map'); map.scaleX = 1.5; map.scaleY = 1.5; blizzardArea = this.add.image(840, 360, 'blizzardArea'); blizzardArea. scaleX = .55; blizzardArea.scaleY = .55; blizzardArea.setAlpha(.1); blizzardPlayButton = this.add.image(820, 370, 'playButton'); blizzardPlayButton.setAlpha(0); hurricaneArea = this.add.image(960, 430, 'hurricaneArea'); hurricaneArea. scaleX = .38; hurricaneArea.scaleY = .38; hurricaneArea.angle = -10; hurricaneArea.setAlpha(.1); hurricanePlayButton = this.add.image(1000, 400, 'playButton'); hurricanePlayButton.setAlpha(0); thunderstormArea = this.add.image(700, 400, 'thunderstormArea'); thunderstormArea. scaleX = .8; thunderstormArea.scaleY = .8; thunderstormArea.angle = -1; thunderstormArea.setAlpha(.1); thunderstormPlayButton = this.add.image(720, 400, 'playButton'); thunderstormPlayButton.setAlpha(0); tornadoArea = this.add.image(840, 400, 'tornadoArea'); tornadoArea. scaleX = .5; tornadoArea.scaleY = .5; tornadoArea.setAlpha(.1); tornadoPlayButton = this.add.image(750, 400, 'playButton'); tornadoPlayButton.setAlpha(0); blizzardUnderlay = this.add.image(265, 700, 'overlay'); blizzardUnderlay.scaleX = 50; blizzardUnderlay.scaleY = 10; blizzardText = this.add.text(265, 700, 'Blizzard', { fontSize: '24px', fill: '#fff', fontFamily: '"Nunito Sans", sans-serif'}); blizzardText.setOrigin(0.5); blizzardButton = this.add.image(265, 620, 'blizzardButton'); blizzardButton.scaleX = .15; blizzardButton.scaleY = .15; blizzardButton.setInteractive(); hurricaneUnderlay = this.add.image(515, 700, 'overlay'); hurricaneUnderlay.scaleX = 50; hurricaneUnderlay.scaleY = 10; hurricaneText = this.add.text(515, 700, 'Hurricane', { fontSize: '24px', fill: '#fff', fontFamily: '"Nunito Sans", sans-serif'}); hurricaneText.setOrigin(0.5); hurricaneButton = this.add.image(515, 620, 'hurricaneButton'); hurricaneButton.scaleX = .15; hurricaneButton.scaleY = .15; hurricaneButton.setInteractive(); thunderstormUnderlay = this.add.image(765, 700, 'overlay'); thunderstormUnderlay.scaleX = 50; thunderstormUnderlay.scaleY = 10; thunderstormText = this.add.text(765, 700, 'Thunderstorm', { fontSize: '24px', fill: '#fff', fontFamily: '"Nunito Sans", sans-serif'}); thunderstormText.setOrigin(0.5); thunderstormButton = this.add.image(765, 620, 'thunderstormButton'); thunderstormButton.scaleX = .15; thunderstormButton.scaleY = .15; thunderstormButton.setInteractive(); tornadoUnderlay = this.add.image(1015, 700, 'overlay'); tornadoUnderlay.scaleX = 50; tornadoUnderlay.scaleY = 10; tornadoText = this.add.text(1015, 700, 'Tornado', { fontSize: '24px', fill: '#fff', fontFamily: '"Nunito Sans", sans-serif'}); tornadoText.setOrigin(0.5); tornadoButton = this.add.image(1015, 620, 'tornadoButton'); tornadoButton.scaleX = .15; tornadoButton.scaleY = .15; tornadoButton.setInteractive(); homeButton = this.add.image(40, 50, 'homeButton'); homeButton.scaleX = .2; homeButton.scaleY = .2; homeButton.setInteractive(); /*soundButton = this.add.image(120, 50, 'soundButton'); soundButton.scaleX = .22; soundButton.scaleY = .22; soundButton.setInteractive();*/ gameScreen.add(blizzardArea); gameScreen.add(blizzardPlayButton); gameScreen.add(hurricaneArea); gameScreen.add(hurricanePlayButton); gameScreen.add(thunderstormArea); gameScreen.add(thunderstormPlayButton); gameScreen.add(tornadoArea); gameScreen.add(tornadoPlayButton); gameScreen.add(blizzardUnderlay); gameScreen.add(blizzardText); gameScreen.add(blizzardButton); gameScreen.add(hurricaneUnderlay); gameScreen.add(hurricaneText); gameScreen.add(hurricaneButton); gameScreen.add(thunderstormUnderlay); gameScreen.add(thunderstormText); gameScreen.add(thunderstormButton); gameScreen.add(tornadoUnderlay); gameScreen.add(tornadoText); gameScreen.add(tornadoButton); gameScreen.add(homeButton); //gameScreen.add(soundButton); gameScreen.visible = false; // ---------------------------------------------------------------------------------------- // Game screen events // ---------------------------------------------------------------------------------------- // Home button // ------------------------------------------------ homeButton.on('pointerdown', () => { titleScreen.visible = true; gameScreen.visible = false; }); // ------------------------------------------------ // Sound button // ------------------------------------------------ /*soundButton.on('pointerdown', () => { if(muted == true) { muted = false; soundButton.setAlpha(1); if(muted) { video.setVolume(1); } } else { muted = true; soundButton.setAlpha(.3); if(muted) { video.setVolume(0); } } });*/ // ------------------------------------------------ // Blizzard button // ------------------------------------------------ blizzardButton.on('pointerdown', () => { showStormArea(0); playStormName(0); }); // ------------------------------------------------ // Hurricane button // ------------------------------------------------ hurricaneButton.on('pointerdown', () => { showStormArea(1); playStormName(1); }); // ------------------------------------------------ // Thunderstorm button // ------------------------------------------------ thunderstormButton.on('pointerdown', () => { showStormArea(2); playStormName(2); }); // ------------------------------------------------ // Tornado button // ------------------------------------------------ tornadoButton.on('pointerdown', () => { showStormArea(3); playStormName(3); }); // ------------------------------------------------ // Blizzard play button // ------------------------------------------------ blizzardPlayButton.on('pointerdown', function(e) { playVideo(0); }); // ------------------------------------------------ // Hurricane play button // ------------------------------------------------ hurricanePlayButton.on('pointerdown', function(e) { playVideo(2); }); // ------------------------------------------------ // Thunderstorm play button // ------------------------------------------------ thunderstormPlayButton.on('pointerdown', function(e) { playVideo(4); }); // ------------------------------------------------ // Tornado play button // ------------------------------------------------ tornadoPlayButton.on('pointerdown', function(e) { playVideo(6); }); // ------------------------------------------------ // ---------------------------------------------------------------------------------------- // Title screen definitions // ---------------------------------------------------------------------------------------- titleScreen = this.add.container(0, 0); titleBackground = this.add.image(640, 360, 'overlay'); titleBackground.scaleX = 320; titleBackground.scaleY = 180; titleBackground.setInteractive(); titleText = this.add.text(640, 280, 'Storm Smart', { fontSize: '64px', fill: '#fff', fontFamily: '"Nunito Sans", sans-serif'}); titleText.setOrigin(0.5); //subtitleText = this.add.text(640, 400, 'Click anywhere to play', { fontSize: '36px', fill: '#fff', fontFamily: '"Nunito Sans", sans-serif'}); //subtitleText.setOrigin(0.5); playButton = this.add.image(640, 400, 'button'); playButton.scaleX = 0.5; playButton.scaleY = 0.5; playButton.setInteractive(); playButtonText = this.add.text(640, 400, 'Play', { fontSize: '36px', fill: '#000', fontFamily: '"Nunito Sans", sans-serif'}); playButtonText.setOrigin(0.5); creditsButton = this.add.image(640, 490, 'button'); creditsButton.scaleX = 0.5; creditsButton.scaleY = 0.5; creditsButton.setInteractive(); creditsButtonText = this.add.text(640, 490, 'Credits', { fontSize: '36px', fill: '#000', fontFamily: '"Nunito Sans", sans-serif'}); creditsButtonText.setOrigin(0.5); titleScreen.add(titleBackground); titleScreen.add(titleText); //titleScreen.add(subtitleText); titleScreen.add(playButton); titleScreen.add(playButtonText); titleScreen.add(creditsButton); titleScreen.add(creditsButtonText); // ---------------------------------------------------------------------------------------- // Credits screen definitions // ---------------------------------------------------------------------------------------- creditsScreen = this.add.container(0, 0); creditsBackground = this.add.image(640, 360, 'overlay'); creditsBackground.scaleX = 320; creditsBackground.scaleY = 180; creditsBackground.setInteractive(); cache = this.cache.text; creditsText = this.add.text(640, 550, cache.get('credits'), { fontSize: '16px', fill: '#fff', fontFamily: '"Nunito Sans", sans-serif', align: 'center', wordWrap: { width: 750, useAdvancedWrap: true } }); creditsText.setOrigin(0.5, 0); creditsHomeButton = this.add.image(40, 50, 'homeButton'); creditsHomeButton.scaleX = .2; creditsHomeButton.scaleY = .2; creditsHomeButton.setInteractive(); creditsScreen.add(creditsBackground); creditsScreen.add(creditsText); creditsScreen.add(creditsHomeButton); creditsScreen.visible = false; // ---------------------------------------------------------------------------------------- // Title screen events // ---------------------------------------------------------------------------------------- playButton.on('pointerdown', () => { titleScreen.visible = false; gameScreen.visible = true; gameScreen.setDepth(1); }); creditsButton.on('pointerdown', () => { titleScreen.visible = false; creditsScreen.visible = true; }); // ---------------------------------------------------------------------------------------- // Credits screen events // ---------------------------------------------------------------------------------------- creditsHomeButton.on('pointerdown', () => { creditsStartTime = 0; titleScreen.visible = true; creditsScreen.visible = false; }); // ---------------------------------------------------------------------------------------- } function update() { if(videoStarted) { if(!hazardAudio.isPlaying && !choice1Started) { showChoice1(); } else if(choice1Started && !choice1Audio.isPlaying && !choice2Started) { showChoice2(); } else if(choice2Started && !choice2Audio.isPlaying && !choice3Started) { showChoice3(); } else if(choice3Started && !choice3Audio.isPlaying) { enableChoices(); } } if(creditsScreen.visible) { scrollCredits(); } } function showStormArea(stormNumber) { if(stormNumber == 0) { blizzardArea.setDepth(1); blizzardArea.setAlpha(1); hurricaneArea.setAlpha(.1); thunderstormArea.setAlpha(.1); tornadoArea.setAlpha(.1); blizzardPlayButton.setDepth(2); blizzardPlayButton.setAlpha(1); blizzardPlayButton.setInteractive(); hurricanePlayButton.setAlpha(0); hurricanePlayButton.removeInteractive(); thunderstormPlayButton.setAlpha(0); thunderstormPlayButton.removeInteractive(); tornadoPlayButton.setAlpha(0); tornadoPlayButton.removeInteractive(); } else if(stormNumber == 1) { hurricaneArea.setDepth(1); hurricaneArea.setAlpha(1); blizzardArea.setAlpha(.1); thunderstormArea.setAlpha(.1); tornadoArea.setAlpha(.1); hurricanePlayButton.setDepth(2); hurricanePlayButton.setAlpha(1); hurricanePlayButton.setInteractive(); blizzardPlayButton.setAlpha(0); blizzardPlayButton.removeInteractive(); thunderstormPlayButton.setAlpha(0); thunderstormPlayButton.removeInteractive(); tornadoPlayButton.setAlpha(0); tornadoPlayButton.removeInteractive(); } else if(stormNumber == 2) { thunderstormArea.setDepth(1); thunderstormArea.setAlpha(1); blizzardArea.setAlpha(.1); hurricaneArea.setAlpha(.1); tornadoArea.setAlpha(.1); thunderstormPlayButton.setDepth(2); thunderstormPlayButton.setAlpha(1); thunderstormPlayButton.setInteractive(); blizzardPlayButton.setAlpha(0); blizzardPlayButton.removeInteractive(); hurricanePlayButton.setAlpha(0); hurricanePlayButton.removeInteractive(); tornadoPlayButton.setAlpha(0); tornadoPlayButton.removeInteractive(); } else { tornadoArea.setDepth(1); tornadoArea.setAlpha(1); blizzardArea.setAlpha(.1); hurricaneArea.setAlpha(.1); thunderstormArea.setAlpha(.1); tornadoPlayButton.setDepth(2); tornadoPlayButton.setAlpha(1); tornadoPlayButton.setInteractive(); blizzardPlayButton.setAlpha(0); blizzardPlayButton.removeInteractive(); hurricanePlayButton.setAlpha(0); hurricanePlayButton.removeInteractive(); thunderstormPlayButton.setAlpha(0); thunderstormPlayButton.removeInteractive(); } } function playStormName(stormNumber) { if(stormNumber == 0) { if(hurricaneAudio != null) { hurricaneAudio.stop(); } if(thunderstormAudio != null) { thunderstormAudio.stop(); } if(tornadoAudio != null) { tornadoAudio.stop(); } if(!blizzardAudio.isPlaying) { blizzardAudio.play(); } } else if(stormNumber == 1) { if(blizzardAudio != null) { blizzardAudio.stop(); } if(thunderstormAudio != null) { thunderstormAudio.stop(); } if(tornadoAudio != null) { tornadoAudio.stop(); } if(!hurricaneAudio.isPlaying) { hurricaneAudio.play(); } } else if(stormNumber == 2) { if(blizzardAudio != null) { blizzardAudio.stop(); } if(hurricaneAudio != null) { hurricaneAudio.stop(); } if(tornadoAudio != null) { tornadoAudio.stop(); } if(!thunderstormAudio.isPlaying) { thunderstormAudio.play(); } } else { if(blizzardAudio != null) { blizzardAudio.stop(); } if(hurricaneAudio != null) { hurricaneAudio.stop(); } if(thunderstormAudio != null) { thunderstormAudio.stop(); } if(!tornadoAudio.isPlaying) { tornadoAudio.play(); } } } function playVideo(videoNumber) { videoStarted = false; choice1Started = false; choice2Started = false; choice3Started = false; // Stop all storm name audio // ------------------------------------------------ if(blizzardAudio != null) { blizzardAudio.stop(); } if(hurricaneAudio != null) { hurricaneAudio.stop(); } if(thunderstormAudio != null) { thunderstormAudio.stop(); } if(tornadoAudio != null) { tornadoAudio.stop(); } // ------------------------------------------------ // Play video and accompanying audio // ------------------------------------------------ activeVideo = videoNumber; if(videoGroup != null) { video.visible = false; videoGroup.destroy(); } videoGroup = game.scene.keys['default'].add.container(0, 0); video = game.scene.keys['default'].add.video(640, 360, videos[activeVideo]); video.play(true); video.setInteractive(); video.setVolume(0); videoGroup.add(video); hazardTextUnderlay = game.scene.keys['default'].add.image(640, 50, 'overlay'); hazardTextUnderlay.scaleX = 140; hazardTextUnderlay.scaleY = 25; videoGroup.add(hazardTextUnderlay); hazardText = game.scene.keys['default'].add.text(640, 50, hazardsText[activeVideo], { fontSize: '44px', fill: '#fff', fontFamily: '"Nunito Sans", sans-serif'}); hazardText.setOrigin(0.5); videoGroup.add(hazardText); hazardAudio = game.scene.keys['default'].sound.add(hazards[activeVideo]); hazardAudio.play(); // ------------------------------------------------ /*xButton = game.scene.keys['default'].add.image(1240, 50, 'xButton'); xButton.scaleX = .2; xButton.scaleY = .2; xButton.setInteractive(); videoGroup.add(xButton); xButton.on('pointerdown', () => { video.visible = false; videoGroup.destroy(); });*/ videoGroup.setDepth(3); videoStarted = true; } function showChoice1() { choice1 = game.scene.keys['default'].add.image(340, 590, icons[activeVideo][0]); choice1.scaleX = 1.8; choice1.scaleY = 1.8; videoGroup.add(choice1) choice1.on('pointerdown', () => { if(choices[activeVideo][0] == true) { choice1.setTint(0x66ff66); correctAnswer(); } else { choice1.setTint(0xff6666); } }); choice1Underlay = game.scene.keys['default'].add.image(340, 700, 'overlay'); choice1Underlay.scaleX = 74; choice1Underlay.scaleY = 10; videoGroup.add(choice1Underlay); choice1Text = game.scene.keys['default'].add.text(340, 700, choicesText[activeVideo][0], { fontSize: '24px', fill: '#fff', fontFamily: '"Nunito Sans", sans-serif'}); choice1Text.setOrigin(0.5); videoGroup.add(choice1Text); choice1Audio = game.scene.keys['default'].sound.add(choicesAudio[activeVideo][0]); choice1Audio.play(); choice1Started = true; } function showChoice2() { choice2 = game.scene.keys['default'].add.image(640, 590, icons[activeVideo][1]); choice2.scaleX = 1.8; choice2.scaleY = 1.8; videoGroup.add(choice2) choice2.on('pointerdown', () => { if(choices[activeVideo][1] == true) { choice2.setTint(0x66ff66); correctAnswer(); } else { choice2.setTint(0xff6666); } }); choice2Underlay = game.scene.keys['default'].add.image(640, 700, 'overlay'); choice2Underlay.scaleX = 74; choice2Underlay.scaleY = 10; videoGroup.add(choice2Underlay); choice2Text = game.scene.keys['default'].add.text(640, 700, choicesText[activeVideo][1], { fontSize: '24px', fill: '#fff', fontFamily: '"Nunito Sans", sans-serif'}); choice2Text.setOrigin(0.5); videoGroup.add(choice2Text); choice2Audio = game.scene.keys['default'].sound.add(choicesAudio[activeVideo][1]); choice2Audio.play(); choice2Started = true; } function showChoice3() { choice3 = game.scene.keys['default'].add.image(940, 590, icons[activeVideo][2]); choice3.scaleX = 1.8; choice3.scaleY = 1.8; videoGroup.add(choice3) choice3.on('pointerdown', () => { if(choices[activeVideo][2] == true) { choice3.setTint(0x66ff66); correctAnswer(); } else { choice3.setTint(0xff6666); } }); choice3Underlay = game.scene.keys['default'].add.image(940, 700, 'overlay'); choice3Underlay.scaleX = 74; choice3Underlay.scaleY = 10; videoGroup.add(choice3Underlay); choice3Text = game.scene.keys['default'].add.text(940, 700, choicesText[activeVideo][2], { fontSize: '24px', fill: '#fff', fontFamily: '"Nunito Sans", sans-serif'}); choice3Text.setOrigin(0.5); videoGroup.add(choice3Text); choice3Audio = game.scene.keys['default'].sound.add(choicesAudio[activeVideo][2]); choice3Audio.play(); choice3Started = true; } function enableChoices() { choice1.setInteractive(); choice2.setInteractive(); choice3.setInteractive(); videoStarted = false; } function correctAnswer() { choice1.removeInteractive(); choice2.removeInteractive(); choice3.removeInteractive(); nextButton = game.scene.keys['default'].add.image(1240, 360, 'playButton'); nextButton.setInteractive(); videoGroup.add(nextButton); if(activeVideo % 2 == 0) { nextButton.on('pointerdown', function(e) { playVideo(activeVideo + 1); }); } else{ nextButton.on('pointerdown', function(e) { video.visible = false; videoGroup.destroy(); }); } } function scrollCredits() { if(creditsStartTime == 0) { creditsStartTime = Date.now(); return; } timeSinceStart = Date.now() - creditsStartTime; if(timeSinceStart > 2000) { if(creditsText.y > -1500) { creditsText.y -= 1; } } } </script> </body> </html>
-
I am trying to create my first game with phaser but Im running into the issue of a blank white screen. I dont see any issue with my code and Im running a local server with wamp. Their isnt any errors in the console, but no matter what I change the code nothing will appear on the screen. Thank you for your help. main.js index.html
