Search the Community
Showing results for tags 'Load'.
-
Hi there! I'm having a problem and maybe someone could help me. In my game I'm trying to load some videos (4 exactly), I did it this way on a separate scene (boot.js) in preload function: this.load.video('beforeWarnVideo', 'src/assets/videos/web_intro.webm', 'canplaythrough', false, false); this.load.video('mainVideo', 'src/assets/videos/into.webm', 'canplaythrough', false, false); this.load.video('menuLoopVideo', 'src/assets/videos/menu_loop.webm', 'canplaythrough', false, false); this.load.video('enterVideo', 'src/assets/videos/enter.webm', 'canplaythrough', false, false); When I test it on any desktop browser it works just fine, but on mobile I can't get videos working. I've connected my iPhone to my mac for debug and I found that Phaser is telling me that the videos aren't fully loaded (I leave an image attached). Is there another way of making sure that my videos are fully loaded before they show? Videos are in webm format. Videos sizes are little bit high, but client want it anyways (I compressed them a lot), sizes are: web_intro -> 291 kb menu_loop -> 7.4 mb into -> 9.9 mb enter -> 3.4 mb Thanks in advance
-
I wanted to know if it's possible to load an animated sprite in preload() and use it in preload(). Essentially I am trying to get an animal to run across the screen to mark the progression of loading. I have a simple graphic rectangle setup as a basic loading bar right now. If I try to update the position of the sprite with this.dog.x it throws an error that x is not a property. -
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>
-
The most prominent method for loading textures seems to be the .fromImage functions, which use URLs. What if I have a raw image source, but no URL (like an image generated inside the app). How would I go about making a texture out of that?
-
Can anyone please tell me if it is possible to load a *.glb file off a local drive with Babylon.viewer.js? Note: I have a valid glb file I named part2.glb... and it works fine to display locally in the Mixed Reality viewer in Windows 10... and also up in Remix 3D community models page. However, when I try to open it off a local drive with the simple 2 line HTML syntax (see below) I receive an error in the browser page display "Error loading the model". <head> <title>Babylon.js Viewer - Display a 3D model</title> <!-- <script src="https://preview.babylonjs.com/viewer/babylon.viewer.js"></script> --> <script src="C:\Babylon.js\Babylon.js-master\dist\viewer\babylon.viewer.js"></script> </head> <body> <!-- <babylon model="https://models.babylonjs.com/boombox.glb" templates.main.params.fill-screen="true"></babylon> --> <babylon model="C:\part2.glb" templates.main.params.fill-screen="true"></babylon> --> </body> -
How to load sound in a game at runtime using ajax call
-
Has anyone encountered a problem with the load progress reporting incorrectly when loading sprite sheets? I'm loading a large sprite sheet and loading goes from .5,.33,.66, to 1.00 immediately and loads these numbers every time. The game does eventually load fine, but way after load progress reports 100%. Here's the code: this.load.multiatlas('sprite_sheet1', 'sprite_sheets/sprite_sheet1.json', 'sprite_sheets'); this.load.on('progress', function (value) { console.log(value); }); I'm using Phaser 3. Anyone see any problems with the way I'm doing this?
-
Hey guys I'm trying to load image from url addreess this.load.image(key, url, xhrSettings) this.load.start() and I'm getting error
-
loading a text file in phaser with typescript is trival with a simple: this.game.load.text("reference", "url") however attempting to write or modify external text files appears to be way more complicated. I'm guessing this is for security reasons, but still don't see why there can't be a "game.write.text()" method or something similar?
-
Hi community, I want to propose you some addition to assetManager and sceneOptimizer. If the solution already exist, said me assetManager : 1. Get loading percent, not on x file loaded but on stream data loaded when it's possible. > for more precision and to show state if you load some big files. 2. Add "abort" function and "onAbort" callback to cancel running tasks and loading files. > Currently "clean" function delete tasks in assetManager but not abort current loads. That mean if you have a big file in loading, it don't stop. sceneOptimizer : 1. Add a starter level to try optimizing render : > I tested the current sceneOptimizer and the problem is it try the best render first. If you have an older device, the website crash and the browser reload page before that sceneOptimizer can downgrade the render. So, it's a loop without ending. 2. Create two steps to optimize render : > First : upgrading. The sceneOptimizer try to reach "x" FPS with the starter level. If it's ok, it upgrade render again until when it can't reach "x" FPS. > Second : dowgrading. If the last try (or the first try with the starter level ) not reach FPS, the sceneOptimizer downgrade until when it can reach FPS. If the sceneOptimizer reach "x" FPS, it stop. > Of course, we keep "trackerDuration" : time in milliseconds between passes. > You will can restart the sceneOptimizer when you add or change something like the current version What do you think about this ? Have a nice day !
-
Hi, I'm certain there will be a way of doing this, but having looked through the docs I'm not seeing the answer... I'm loading some videos like this: const videoPathAndName: string = pathTo+'video/'+level+'/video/'+name; let videotexture = PIXI.VideoBaseTexture.fromUrls([ { src: videoPathAndName+'.webm', mime: 'video/webm' }, { src: videoPathAndName+'.mp4', mime: 'video/mp4' }, { src: videoPathAndName+'.ogv', mime: 'video/ogv' } ]); videotexture.autoPlay = false; this._texture = new PIXI.Texture(videotexture); this._texture.baseTexture.on('loaded',this._checkLoaded); which works fine. But, what I wondered was: as I repeat various sections whether I could check whether the video was already in the cache before trying to load? This would save repeated loads. Or does the loader handle this already? Thanks!
-
Hello, I have a script due tomorrow morning, and have asked a question on a seperate post which is the ideal solution. The only other solution I could show have for tomorrow is to start the renderloop, load an OBJ, and then dispose of the scene - but then the scene needs to begin loading new meshes after it detects a new path and mesh in an array, and render without any client interaction. I can't figure out how to load several scenes - lets say 5 scenes - and load scene 1 for 30 seconds, destroy scene one, on destroy scene two loads on it's own, and this process continues until scene 5 is loaded and then disposed.
-
Hello guys . I have some issue whit image load texture. var panel = BABYLON.Mesh.CreateBox("panel", 0.2, scene); var panelMat = new BABYLON.StandardMaterial("panel1",scene); panelMat.diffuseTexture = new BABYLON.Texture("tpanel.png", scene); panel.material = panelMat; panel.scaling.z = 0.1; In developer tools always show me this : index.html:1 : Access to Image at 'file:///C:/Users/user/Desktop/trapbox/tvorbamodelov/tpanel.png' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access. babylon.js:3 : BJS - [00:16:44]: Error while trying to load image: tpanel.png. I am new in this and I am trying to understand how BABYLON.JS works. Thank you in advance for your answers .
-
Hello, I'm just starting to learn pixi.js I want to make a game where the main character is in the middle of the screen all the time, while the map moves behind the character as it is walking. The problem is, the map is going to be extremely large. I'm going to be zoomed in on a very small portion of it. The easiest way for me to load the map, is to simply load that whole thing onto the screen. Since the whole map obviously won't fit on the screen, it'll just show a small portion. Then I can just change the x, y coordinates of the map, to make it move. But, unless pixijs is doing some good memory management I am unaware of, doing it this way will overload the memory. I'd need to be able to smoothly walk through the whole map without interruptions to load another portion of the map. Anyone try and do something like this before? What do you do to try and optimize it?
-
Hi, I've got a problem with loading scene with .babylon extension. I making project in .NET Core with BabylonJS addon and I got a problem with this script: // Get the canvas element from our HTML below var canvas = document.querySelector("#renderCanvas"); // Load the BABYLON 3D engine var engine = new BABYLON.Engine(canvas, true); // ------------------------------------------------------------- engine.enableOfflineSupport = false; var scene = new BABYLON.Scene(engine); BABYLON.SceneLoader.Load("./js/", "babilon_blender.babylon", engine, function(newScene){ var scene = newScene; scene.executeWhenReady(function(){ scene.activeCamera.attachControl(canvas); engine.runRenderLoop(function(){ scene.render(); }); }); }); Page is build and start loading scene, but this is over. Neverending loading with Babylon mark. Could someone help me and advice what should I do to make a load scene properly? Thanks for help
-
Hey. I have a 20 MB babylon file on my server right now. I don't want my server to compress it every time. Instead I'd like to put a babylon.gz on my server and load the babylon file. Is that possible? I've tried to change the filename in the SceneLoader to "test.gz" instead of "test.babylon" but that didn't work..
-
Hey everyone I just have two simple question I cannot find an answer too. First Question: The SpriteManager needs a capacity parameter, but why does it need this? Why can I not change this during runtime? What does it actually do (in the background) (except for just not showing any sprites that exceed the capacity)? Does it hurt performance at all if I just put a 'crazy' high number? Can the manager not just +1 the capacity by itself in the background whenever an instance of the sprite is created? It just seems so odd that I have to give it a number and I feel like I'm missing something here. My second question is how to exactly use the AssetsManager for sprites. The documentation gives this example: var imageTask = assetsManager.addImageTask("image task", "img.jpg"); imageTask.onSuccess = function(task) { console.log(task.image.width); } But that doesn't explain how to use it with a Sprite since the task returns an image, and a SpriteManager only requires an image url. Thank you in advance!
-
Hi all. I'm trying to return an array of objects loaded by the Mesh Importer for later use. I would like to be able to call a function to load my objects and outside of the function, affect & change each one of them OUTSIDE of the function. Here is the small demo I made :: http://www.babylonjs-playground.com/#1QJUDF#3 Thank you! <3 Mythros
-
Hi, Looking around for a lazy-loading mesh example. There is assetManager and sceneLoader, with ImportMesh, .append() and .load() variations. All good there. : ) Question: Which way is best to delay-load (lazy-load) 3D meshes? The original hope was for AssetManager to be able to delay-load. Does it? - Looking for something like runTask, after init, but then found ._runTask, so maybe delay not possible. Did I miss it? Idk. : ) 2) Next, sceneLoader.append, can it lazy-load? Couldn't find example.... 3) ImportMesh, my previous favorite way, but recently standardized around AssetManager, and hesitant to switch. etc. Which is best to lazy-load? Thanks,
-
Hi everyone, I have now been stuck with a problem for a while and figured I would ask here to see if anyone knew how to fix it. I have a scene where you can dynamically add your own images to it, that will than be transformed into a material with the images as the diffusetexture. The transforming happens by using the raw image data to create the texture with the function: BABYLON.Texture.LoadFromDataString - it looks something like this: material = new BABYLON.StandardMaterial("imageMaterial", scene); var imgTexture = new BABYLON.Texture.LoadFromDataString("data:" + Math.random(), RAW IMG DATA, scene); material.diffuseTexture = imgTexture; This all works fine, the problem that I am having is that I want to be able to save the scene and load it again later. But it seems the the SceneSerializer doesn't save the texture/material information (the raw image data), so that when I load the scene I get the error: Materials: Name: groundMaterial babylon.custom.js:5 Uncaught TypeError: Cannot read property 'width' of null at E (babylon.custom.js:5) at n.createTexture (babylon.custom.js:5) at new i (babylon.custom.js:11) at babylon.custom.js:11 at Function.t.Parse (babylon.custom.js:2) at Function.i.Parse (babylon.custom.js:11) at Function.t.Parse (babylon.custom.js:2) at Function.r.Parse (babylon.custom.js:17) at Function.t.Parse (babylon.custom.js:14) at Object.load (babylon.custom.js:28) Looking at the saved serialized scene, I can also see that it is not saving the raw image data, so I have customized the serialize() function to find and save the data when the scene is saved, then the idea was to unpack it when it loads somehow. But I still can't stop the above error from happening. Is there anyone that knows a good way to do this or a fix to how I'm trying to do it? In short: I am trying to save and load a scenes that have material/texture that I created from my own images. But the loader and saver, doesn't seem to recognize/save the custom material properly. Thank you!
-
Hello. I don't understand the following thing. I created a Cube in Blender without any material or texture, just the Cube itself, no light, no camera. Then I exported the Cube. The Cube's name is "car" or "Blender car". Then I loaded it into Babylon. Then I applied babylon's StandartMaterial and diffuseColor to the Cube. But, before that, I created a Box mesh in Babylon itself and applied StandartMaterial and diffuseColor to the Box. The DiffuseColor is exactly the same in both the Blender Cube ("Blender car") and the Babylon Box. BUT, they look DIFFERENT !!! WHY ??? Could anybody make the Blender Cube ("Blender car") look exactly the same as the Babylon Box. Because, I applied the Babylon's StandartMaterial and DiffuseColor. to the blender's Cube. Here is the link to the html file with babylon - http://webnurlan3d.uphero.com/rotationradians.html And the html file itself - https://cloud.mail.ru/public/M2H3/TtvbFWRqx Thank you.
-
I'm working on a small card game and I'd like to make an array of sprites to make the code more readable. What I mean is I have hearts,spades,clubs and diamonds and I'd like each to be its own array when I load my images from my assets. Below is similar to what I have: PIXI.Loader .add("hearts10","hearts10.png") .add("hearts9","hearts9.png") ... .load(start) I'd like to be able to access the cards via an array of arrays, sort of like: var current_card = new Sprite(resources.cards.hearts.10.texture);
-
I am trying to load a texture atlas into the app when the user clicks on the canvas. 2 things happen on canvas click: 1. the animation already loaded plays, and 2. I fetch a new texture atlas from server. Newly fetched texture atlas plays on the next canvas click, and a new texture atlas is fetched. Think of it as endless loop. On every click, previously loaded animation is played, and the next one is fetched and repeat. It is absolutely essential that there is no freeze between animating. What approach do you recommend I take? My tests showed that there is some issues with dynamically loaded texture atlases - animation freezes, if texture atlas is being loaded at the same time. The issue really shows on mobile devices. I've got a hunch that there might be a problem that both PIXI.loader and object.gotoAndPlay() use the main thread, and they block each other, but I really don't know that much about Pixi. I've posted a similar question earlier today: , but I think I didn't correctly identify the reason for my bad performance. So this question is more in general terms. What is the best way to run texture atlas animation and load another texture atlas at the same time, so that the animation can run without any delay when wanted?
-
https://www.dropbox.com/s/l2l67aququd7she/Patch.babylon?dl=0 or https://ajna4taiga.no-ip.org/BabylonBall/Patch.babylon Hire is playground which doesn't work ok any more http://www.babylonjs-playground.com/#CKEHJ#1 or http://www.babylonjs-playground.com/#CKEHJ#3 How can I load my .babylon file from dropbox or my server? This code has worked. What is goging on now? I see with F12 new problem XMLHttpRequest cannot load https://ajna4taiga.no-ip.org/BabylonBall/Patch.babylon. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.babylonjs-playground.com' is therefore not allowed access. But this things has worked before. How can I make this example to work again? Any alternatives? (I also try like this http://www.babylonjs-playground.com/#YEKUO#1 set data (copy/paste from .babylon file) but here is problem with string of data ! I try \" and \' also but no luck.) I would like to make some playground to ask something and I can't meke playground to load .bayblon file. Greetings Ian
