Safari Problems
adent42
Key Master, Head Chef, Executive Chef, Member, PRO Posts: 3,170
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
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.