Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Search the Community

Showing results for tags 'safari'.

  • Search By Tags

    Type tags separated by commas.

  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
    • Paid Promotion (Buy Banner)
  • Frameworks
    • Pixi.js
    • Phaser 3
    • Phaser 2
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
    • GameMonetize
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered
    • Marketplace (Sell Apps, Websites, Games)

Find results in...

Find results that contain...


Date Created

  • Start

    End

Last Updated

  • Start

    End

Filter by number of...

Joined

  • Start

    End

Group

Website URL

Twitter

Skype

Location

Interests

Found 50 results

  1. GBear
    hi. i can draw my game with chrome or explore but safari can't use fullscreen function like requestFullscreen( how can i draw fullscreen with safari
  2. andrei.nicolae
    Hi guys, I've tried multiple solutions found online opening a new tab when a button is hit. buyBtn.on('pointerdown', function (event){ openWindow(myurl); }, this); function openWindow(url) { var result = window.open(url, "_blank") } function openWindow(url) { document.getElementById('newlink').href = url; document.getElementById('newlink').click(); } function openWindow(url) { window.location.assign(url); } This are some of them. All of these solutions work on other browsers, but not on Safari. Does anyone have a working solution for Phaser3? Thank you.
  3. Brenner-AdamsR
    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>
  4. Qinxgee
    I'm currently hunting down an issue with a game that we have developed with pixi.js: According to the dev tools in Chrome, the game uses about 53MB memory. On FireFox it uses about 73MB. On Safari it uses anything between 1800 and 3500MB. On an iPad with iOS12 the game crashes before it even starts, both on Safari and Chrome. As I understand it, Chrome on iOS uses webkit (as apposed to chromium?), so I suspect there is something wrong with webkit. But I could be wrong, I haven't really had a need before to dive into that. Has anyone else experienced memory issues when using pixi on Safari? I have been trying to use the Safari Web Inspector's Timeline recorder, but it doesn't tell me much - likely because I'm not 100% sure what I'm looking at. It says that the java heap is around 600MB, the 'layers' take up around 1GB and the 'page' another 1GB. Both of these last ones can also go up to 1.5GB, and sometimes go down to about 800GB (I'm guessing when pixi's GC kicks in). I'm not sure what the 'layers' are, the 'page' is 'everything else' (graphics, audio, etc.). If someone knows about a good reference of how to 'read' the information supplied by the web inspector, that would also be greatly appreciated!
  5. aalex
    I’m building a SPA (vue js + vue router) combined with some pixi js (v4.8). The main features I use are : - image sprites - video sprites - some pixi texts - displacement filters Depending on the view, there may or may not be a canvas/renderer. But I always cleanup after myself before switching views by : - destroying every sprite and their baseTexture (image, video, filter sprite) -> .destroy(true) - destroying every text and their baseTexture -> .destroy(true) - clearing any filters used -> container.filters = null - and finally destroying the main renderer -> renderer.destroy(true) By doing so, my SPA is running smoothly (chrome, firefox, edge), no matter how many view switches occurs, and I don't get any console errors. However, safari (12.0.3 in my case) simply doesn't seem to take any cleanup seriously, after 4/5 views switching the performance drastically drops and I get many console errors : _There are too many active WebGL contexts on this page, the oldest context will be lost._ and _WebGL: INVALID_OPERATION: loseContext: context already lost_ . And if we continue browsing between views, safari will be forced to crash. Even if I manually try to kill my renderers with _gl.getExtension('WEBGL_lose_context').loseContext()_ , the problem remains. Am I missing something or is it just the way Garbage Collection works in safari (being less effective, and not properly releasing memory)?
  6. ashmore11
    Hey guys! I need to have my site working in Safari 9 and IE11 but I've noticed that there is ES6 code in the pixi.js bundle. Has anybody else encountered this? Looks like it's coming from the mini-signals dependency. I have tried adding pixi.js and mini-signals to my include config for babel-loader but it's still not being transpiled. Any ideas of a solution?
  7. Beawer26
    Hi guys! New with PIXI and have some troubles with loading audio with PIXI.loader. startButton.on("pointerdown", function(){ changeLanguage('eng'); startAnimationBoard(); }); espButton.on("pointerdown", function(){ changeLanguage('esp'); startAnimationBoard(); }); function changeLanguage(lang){ if( lang == 'esp'){ sound.add('sceneLogo', './objects/mp3/esp/1.mp3') .add('scenePlay', './objects/mp3/esp/2.mp3') .add('sceneBalance', './objects/mp3/esp/3.mp3') .add('sceneHello', './objects/mp3/esp/4.mp3') .add('sceneInteractive', './objects/mp3/esp/5.mp3') .add('sceneAirport', './objects/mp3/esp/6.mp3') .add('sceneDownload', './objects/mp3/esp/7.mp3') .add('sceneData', './objects/mp3/esp/8.mp3') .add('scenePerson', './objects/mp3/esp/9.mp3') .add('sceneFinal', './objects/mp3/esp/10.mp3') .load(); } else if(lang == 'eng'){ sound.add('sceneLogo', './objects/mp3/eng/1.mp3') .add('scenePlay', './objects/mp3/eng/2.mp3') .add('sceneBalance', './objects/mp3/eng/3.mp3') .add('sceneHello', './objects/mp3/eng/4.mp3') .add('sceneInteractive', './objects/mp3/eng/5.mp3') .add('sceneAirport', './objects/mp3/eng/6.mp3') .add('sceneDownload', './objects/mp3/eng/7.mp3') .add('sceneData', './objects/mp3/eng/8.mp3') .add('scenePerson', './objects/mp3/eng/9.mp3') .add('sceneFinal', './objects/mp3/eng/10.mp3') .load(); } } Works perfect everywhere, except iOs Safari browser. Loading time from 300 ms on desktop Chrome to 1600 ms on old Droid phone (Chrome and Default browser). But mobile Safari loading time is awfull - 35000 ms. Tried to load files separatelly, one by one before using them (don't need them all at once). And still works everywhere except mobile Safari - in this case files didn't load at all. Don't know what I'm doing wrong. But I really tired in this war against Apple gadgets. Thank you! P.S. : iOs versions 10.1.x and 12.1.x
  8. Igor Georgiev
    Hello guys. I am struggling with having my game to run on minimal-ui on iOS safari. That is where the address bar becomes smaller when you scroll. I have found a game that does that, but how the hell they do it? CLICK Does anyone know how to achieve this?
  9. JesperJohansson
    Hi! I'm creating a game that has a lamp sprite that you can switch on/off that uses blendMode 10 or PIXI.blendModes.SOFT_LIGHT However everytime you load the game without cache on Safari 10 the blend mode fails to show. When you refresh the page so its cached it starts working. When I console.log sprite.blendMode in the sprite's update() function it says 10 so it's applied. I use canvas only mode.
  10. Fenopiù
    Hi guys! I'm developing a game with Phaser 2.6.2 and it properly works on PC desktop (every browser) and on Mac (every browser). On a 2009 Mac laptop with Safari it struggle. On iPhone SE with Safari it give an (for me) inexplicable blank page. I've connected the iPhone to the Mac and launched the web inspector... but it give me nothing, nor the message "Phaser v2.6.2 | Pixi.js v2.2.9 | WebGL | WebAudio | http://phaser.io". I've tought that maybe a let game: Phaser.Game = new Phaser.Game(1280, 720, Phaser.AUTO, 'content', { preload: this.preload, create: this.create, update: this.update, render: this.updateRender }); was to big, so I've tried let game: Phaser.Game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { preload: this.preload, create: this.create, update: this.update, render: this.updateRender }); but I've always the blank page. Any suggestion on what can go wrong with Phaser & iPhone?
  11. Hersir
    Hi, I get following error on safari macOS (could be because it is webgl 1.0). this._gl.createQuery is not a function. (In 'this._gl.createQuery()', 'this._gl.createQuery' is undefined)
  12. Listege
    Hello, I'm working on a game with Phaser v2.4.6. When I run my game on iOS Safari, UI overlaps game screen.(See the screenshot. And it's totally OK on Android) Is there a way to solve this problem? Here are my settings for the game. Meta tags of html file: <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="chrome=1, IE=9"> <meta name="viewport" content="initial-scale=1 maximum-scale=1 user-scalable=0 minimal-ui shrink-to-fit=no" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="HandheldFriendly" content="true" /> <meta name="full-screen" content="yes"> <meta name="screen-orientation" content="portrait"> <meta name="renderer" content="webkit"> <meta name="force-rendering" content="webkit"> <meta name="format-detection" content="telephone=no"> CSS file: body { background: black; margin: 0px 0px 1px 0px; padding: 0; overflow: hidden; } Initializing Code this.game.scale.pageAlignHorizontally = true; this.game.scale.pageAlignVertically = true; this.game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE; this.game.scale.setMinMax(320, 180); this.game.scale.setGameSize(1480, 860); var xRatio: number = window.innerWidth / 1280; var yRatio: number = window.innerHeight / 720; if ((window.innerWidth / window.innerHeight) >= (1280 / 720)) { this.game.scale.setUserScale(yRatio, yRatio); } else { this.game.scale.setUserScale(xRatio, xRatio); } Thank you for your help in advance
  13. Hersir
    @Sebavan Hi, checked new examples of PBR , but found some issues. It doesn't work in safari mac, probably because it uses webgl1, works great in other browsers but they have webgl2. Example On safari sphere is just black. Dont get any errors just some warnings from webgl: [Log] BJS - [08:31:35]: Babylon.js engine (v3.0) launched (babylon.js, line 3) [Warning] WebGL: INVALID_OPERATION: texImage2D: type HALF_FLOAT_OES but ArrayBufferView is not NULL (babylon.js, line 5, x54) [Warning] WebGL: INVALID_FRAMEBUFFER_OPERATION: readPixels: attachment type is not correct for attachment (babylon.js, line 6) [Warning] WebGL: INVALID_FRAMEBUFFER_OPERATION: readPixels: attachment type is not correct for attachment (babylon.js, line 6) [Warning] WebGL: INVALID_FRAMEBUFFER_OPERATION: readPixels: attachment type is not correct for attachment (babylon.js, line 6) [Warning] WebGL: INVALID_FRAMEBUFFER_OPERATION: readPixels: attachment type is not correct for attachment (babylon.js, line 6) [Warning] WebGL: INVALID_FRAMEBUFFER_OPERATION: readPixels: attachment type is not correct for attachment (babylon.js, line 6) [Warning] WebGL: INVALID_FRAMEBUFFER_OPERATION: readPixels: attachment type is not correct for attachment (babylon.js, line 6) [Warning] WebGL: drawElements: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete', or it is a float/half-float type with linear filtering and without the relevant float/half-float linear extension enabled. (babylon.js, line 5, x196) [Warning] WebGL: too many errors, no more errors will be reported to the console for this context. (babylon.js, line 5)
  14. staff0rd
    Open this fiddle on Safari/Mac and check the console. You'll see sprite/1/1, sprite2/0/0. Then hit Run and you'll see 50/50 for both sprites. It seems as though BitmapData.generateTexture doesn't execute the first time around on Safari. The code that produces this issue is as follows; var bmd = this.game.add.bitmapData(50, 50); var result = bmd.generateTexture('test'); var sprite = this.game.add.sprite(0, 0, result); console.log('sprite', sprite.width, sprite.height); var sprite2 = this.game.add.sprite(50,50, 'test'); console.log('sprite2', sprite2.width, sprite2.height); First time around, whatever's in return from generateTexture has 1,1 dimension, and whatever's been placed in the cache under 'test' has 0,0 dimension. Running it again, or reloading the window in Safari causes the dimensions to be 50,50 for both as is expected. I am not having this problem in Chrome on Windows or Mac. Does anyone know how I can get around this?
  15. Politybuilder
    Using Phaser 2.6.2 with Safari on an iPhone, game loads up fine and seems to be running ok but can't get any response out of the buttons.
  16. Jammy
    Hi guys, So I have issues with my game in safari but I'm coding it on windows. I've tried the older versions of safari available on dodgy download sites but they're far too outdated. Is there any way I can test a safari browser on windows reliably? Looking for any options here, VM's in cloud, emulators, SDKS, anything - or if you have a mac and can spare an hour or so that would also help. I can't afford to buy a mac. Thanks, Adam.
  17. keytschell
    Hey there, let me give you my problem as visual as possible ( attached file ). It seems like safari / fb in app browser does not use my ScaleManager.RESIZE as requested. I had some issues calling my resize function on oriantation change, so i implemented this: window.onresize = function(event) { them.resize(game.width, game.height); }; And finally added this.resize(game.width, game.height); in the end of my create function. But nothing results the correct view in ios safari / fb in app view. Any suggestions? Thanks
  18. sofritos
    Hello, We are developing an HTML game using the Phaser framework with Javascript. We have run into some issues regarding the mobile usability for Safari on iPhones. At certain times the player's address bar appears, when this happens the game is moved down. Since the game is moved down, we lose access to part of the game. That leads me to our two questions: 1) How can we detect a swipe motion and then use that motion to hide the address bar? 2) How can we detect that the player address bar is open in the the first place?
  19. Hersir
    Hi, does anyone have problems with new playground on mac safari browsers? Every time I click run scene just disappears.
  20. sz-dev
    We adapted some code we found for a "pie progress" tracker found on these forums. It works great in Chrome, but on Safari (both desktop and mobile), if you try to force Phaser.CANVAS mode, the bitmap data is not drawn. Is there something we are doing wrong? Or is this a bug? Check out our fiddle below: http://jsfiddle.net/mnj0vteL/1/ - Canvas mode - it doesn't draw the circle (in Safari) http://jsfiddle.net/uxujy4pu/ - WebGL mode - it draws the circle everywhere We cannot use WebGL because on mobile safari it is not performant (avg 15fps vs canvas which gets 60fps)
  21. Skeptron
    Hi everyone, I'm having some weird issues with Safari on Mac : it seems like using the arrow keys in combination with A messes up the keyboard language. I have a french keyboard (azerty), and if I press A, no issue, A is triggered. If I press the right arrow + A, the A becomes a Q. Is that a known issue? Is anyone having the same issue? Is there something wrong with the way I handle the keys? Here is a JSFiddle to illustrate the issue (open the console to see the logs) : http://jsfiddle.net/PQVnT/1718/ Thanks a log guys!
  22. AB95
    Hi everyone, I am working on a scene that requires import meshes from .babylon file, most of the time I debug the scene on android mobile browser, and I got this error while trying to load the scene in iphone 5 & 6 (ios 10.2.1 up to date)safari browser: Error status: 0 - Unable to load myfile.babylon this is the link of the webpage http://52.74.240.184/infographics/game_RisingSeaLevel/. I have no problem loading the scene on desktop, android mobile browser(chrome, firefox, opera), however, when I try to load the scene on iphone 6, most of the times I encounter the above error during the middle of importing mesh, if you open the webpage using iphone, there is a chance for you to stuck in the loading screen, when the error occurs. Nonetheless, there is a few times the scene can be successfully loaded, but only a few times. May I know if anyone who ever got with this error knows what is going on, as I am mainly working on the content of the 3D scene rather than handle the back-end part, thanks!
  23. Dolan
    I finished making my game with Phaser, and it works very well on Google Chrome, and Safari, and Firefox on Desktop. But it shocked me on how slow it runs on Safari on iOS! Why is this? My game is an incredibly simple game, it does not make sense to me. Game: https://dolanmiu.github.io/flappy-bird-client/ Source code: https://github.com/dolanmiu/flappy-bird-client Thanks!
  24. RedYggdrasil
    Hello people, I’m here to ask for assistance on PixiJs (more like a canvas related stuff) and IOS. I want to make an app than take all the available space of the webpage, kinda “Fullscreen” but not necessarily without the actions bar of the browser, What I was doing work pretty well on any browsers except in Safaris IOS browser, in landscape mode (sometime loading the page the first time in landscape work, then when changing orientation and coming back to landscape make the bugs appear). I can’t get to handle the IOS browser correctly, the canvas ignores one or both of the browser bar, causing it to appear under these bar. I just adapted quickly the Pixi’s “bunnymark” demo to show this problem. (http://davikingcode.com/dl-works/bunnyjs/ ). I found on the web an example working really fine on iOS landscape mode (http://www.goodboydigital.com/runpixierun/) but can’t see an obvious differences with my simple example. It may be an HTML/CSS problem, but I can’t find it exactly. Thanks for your help and have a nice day.
  25. DanielApNa
    Hello, We are making a game with Phaser and works perfect in all the browsers except in Safari (iPad). It's pretty strange becouse the game seems to be running becouse we can hear the music, but the canvas is not displayed... Few seconds later the game is destroyed... We can't use the remote debugging becouse we don't have any Mac to conect the IPad... (Phaser Version: 2.6.2 / IOS version: 9.3.2) Please help!! Thank you
×
×
  • Create New...