responsive.javascript 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. (function(){
  2. console.log('Responsive WebGL Template by SIMMER.io v2019.02.08');
  3. console.log('Available at: https://assetstore.unity.com/packages/tools/gui/responsive-webgl-template-117308 for free!');
  4. console.log('Host your WebGL Game at SIMMER.io for free!');
  5. const q = (selector) => document.querySelector(selector);
  6. const gameContainer = q('#gameContainer');
  7. const initialDimensions = {width: parseInt(gameContainer.style.width, 10), height: parseInt(gameContainer.style.height, 10)};
  8. gameContainer.style.width = '100%';
  9. gameContainer.style.height = '100%';
  10. let gCanvasElement = null;
  11. const getCanvasFromMutationsList = (mutationsList) => {
  12. for (let mutationItem of mutationsList){
  13. for (let addedNode of mutationItem.addedNodes){
  14. if (addedNode.id === '#canvas'){
  15. return addedNode;
  16. }
  17. }
  18. }
  19. return null;
  20. }
  21. const setDimensions = () => {
  22. gameContainer.style.position = 'absolute';
  23. gCanvasElement.style.display = 'none';
  24. var winW = parseInt(window.getComputedStyle(gameContainer).width, 10);
  25. var winH = parseInt(window.getComputedStyle(gameContainer).height, 10);
  26. var scale = Math.min(winW / initialDimensions.width, winH / initialDimensions.height);
  27. gCanvasElement.style.display = '';
  28. gCanvasElement.style.width = 'auto';
  29. gCanvasElement.style.height = 'auto';
  30. var fitW = Math.round(initialDimensions.width * scale * 100) / 100;
  31. var fitH = Math.round(initialDimensions.height * scale * 100) / 100;
  32. gCanvasElement.setAttribute('width', fitW);
  33. gCanvasElement.setAttribute('height', fitH);
  34. }
  35. window.setDimensions = setDimensions;
  36. const registerCanvasWatcher = () => {
  37. let debounceTimeout = null;
  38. const debouncedSetDimensions = () => {
  39. if (debounceTimeout !== null) {
  40. clearTimeout(debounceTimeout);
  41. }
  42. debounceTimeout = setTimeout(setDimensions, 200);
  43. }
  44. window.addEventListener('resize', debouncedSetDimensions, false);
  45. setDimensions();
  46. }
  47. window.UnityLoader.Error.handler = function () { }
  48. const i = 0;
  49. new MutationObserver(function (mutationsList) {
  50. const canvas = getCanvasFromMutationsList(mutationsList)
  51. if (canvas){
  52. gCanvasElement = canvas;
  53. registerCanvasWatcher();
  54. new MutationObserver(function (attributesMutation) {
  55. this.disconnect();
  56. setTimeout(setDimensions, 1)
  57. q('.simmer').classList.add('hide');
  58. }).observe(canvas, {attributes:true});
  59. this.disconnect();
  60. }
  61. }).observe(gameContainer, {childList:true});
  62. })();