Safari Problems

adent42adent42 Key Master, Head Chef, Executive Chef, Member, PRO Posts: 3,170
edited December 2019 in News from the Dev Team

Problem 1: Sound in the HTML5 engine:

So we've recently been made aware (thanks @gingagaming) that HTML5 sound was not working right in Safari. Here's a quick explanation.

  • Safari has a new feature that require user interaction to trigger sounds before sound starts working on a page.
  • The way our game engines (and most non-custom game engines) work, sound is triggered as part of a game loop. Because of this, there's a little bit of indirection between a user click on a game and a sound triggering. This indirection is enough to not count as "user interaction to play a sound".
  • To solve this I've whipped up a bit of code to put an overlay on the game that will show if sound is disabled in the browser. I'll leave it up to you, the developer, to customize this more. I will place this code into the HTML5 package soon.
  • Place the code in the playerDelegate map in your index.html file, replacing the existing onLoadingBegin function.

Code here:

onLoadingBegin: function() {
  // Sound is suspended, let's unsuspend it.
  if (gs.AudioManager.current.context.state === 'suspended') {
    var div = document.createElement('div')
    div.style.position = 'fixed' // Pin it relative to browser window and not game div.
    div.style.bottom = '0' // Bottom
    div.style.left = '0' // Left
    div.style.width = '100vw' // Full viewport width
    div.style.height = '10vh' // 10% viewport height
    div.style.background = 'rgba(0,0,0,0.8)' // 0.8 alpha black
    div.style.color = 'white' // White text
    div.style.cursor = 'pointer' // Pointer cursor so they know they can click
    div.innerHTML = 'Sound disabled. Click here to enable sound...' // Prompt msg
    div.style.fontFamily = 'sans-serif' // Font
    div.style.lineHeight = '10vh' // Make text line height same as box height so it's vertically centered
    div.style.padding = '0 2em' // Add some padding to the left and right.
    div.onclick = function () {
      // When user clicks on the box, resume the audio manager and destroy the prompt box.
      gs.AudioManager.current.context.resume();
      document.body.removeChild(div)
    }
    // Add the prompt box to the window.
    document.body.appendChild(div)
  }

  engine.showOverlay();
  loadingElement.style.visibility = 'visible';
},

Publishing image uploads

Safari has changed how they handle certain server request and that breaks how we check image size for icon and loading image uploads in publishing. We should have a fix for that shortly.

Cheers!

Comments

  • adent42adent42 Key Master, Head Chef, Executive Chef, Member, PRO Posts: 3,170

    Okay, more clarification on the uploading of images in safari. Basically safari doesn't let you programmatically submit the form anymore. Right now, we submit the form as soon as we verify the image is good. Since I'm pretty sure chrome has a similar restriction, we must be nesting the upload in too many callbacks to satisfy safari. To support this safari update we'll need to rewrite how we handle image uploads.

    For now, I would suggest you use firefox or chrome for your publishing needs until we address this.

Sign In or Register to comment.