Skip to content

Instantly share code, notes, and snippets.

@AleBles
Last active January 15, 2019 10:28
Show Gist options
  • Save AleBles/697d703e89eecae5a350c1453a32861e to your computer and use it in GitHub Desktop.
Save AleBles/697d703e89eecae5a350c1453a32861e to your computer and use it in GitHub Desktop.
Phaser v3 temp (css) scale amanger
/*Stylesheet*/
body, html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
margin: 0;
padding: 0;
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
font-weight: normal;
color: #ccc;
background-color: #1788c8;
overflow: hidden;
height: 100%;
width: 100%;
}
#content {
overflow: hidden;
position: absolute;
z-index: 2;
height: 100%;
width: 100%;
touch-action: none;
}
.canvas {
touch-action: none;
}
#orientation {
margin: 0 auto;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../images/rotate_portrait.png);
background-repeat: no-repeat;
background-position: center;
background-color: rgb(0, 0, 0);
background-size:25%;
z-index: 999;
display: none;
}
#loader {
width: 100%;
height: 50px;
position: absolute;
text-align: center;
margin-top: 250px;
display: block;
}
#loader,
#loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
#loader {
margin: 60px auto;
font-size: 10px;
position: absolute;
z-index: 99;
left: 50%;
top: 50%;
margin-left: -5em;
margin-top: -5em;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #ffffff;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
<link rel="stylesheet" href="assets/css/app.css" type="text/css" />
<title>Mah game</title>
</head>
<body>
<div id="content"></div>
<div id="loader">Loading ...</div>
<div id="orientation"></div>
</body>
</html>
import {Game, WEBGL} from 'phaser';
import ScaleManager from './ScaleManager';
var game = new Game({
type: WEBGL,
parent: 'content',
width: 720,
height: 1280,
scene: [ /* your scenes here */],
transparent: true,
callbacks: {
postBoot: () => {
new ScaleManager(game.canvas, !game.device.os.desktop);
}
}
});
class ScaleManager {
constructor(canvas, isMobile) {
this.canvas = canvas;
this.mobile = isMobile;
window.addEventListener('resize', () => {
this.resize(this.canvas);
if (this.mobile) {
if (window.innerWidth < window.innerHeight) {
this.leaveIncorrectOrientation();
} else {
this.enterIncorrectOrientation();
}
}
});
this.resize(this.canvas);
}
resize(canvas) {
let scale = Math.min(window.innerWidth / canvas.width, window.innerHeight / canvas.height);
let orientation = 'left';
let extra = (this.mobile) ? 'margin-left: -50%': '';
let margin = window.innerWidth / 2 - (canvas.width / 2) * scale;
canvas.setAttribute('style', '-ms-transform-origin: ' + orientation + ' top; -webkit-transform-origin: ' + orientation + ' top;' +
' -moz-transform-origin: ' + orientation + ' top; -o-transform-origin: ' + orientation + ' top; transform-origin: ' + orientation + ' top;' +
' -ms-transform: scale(' + scale + '); -webkit-transform: scale3d(' + scale + ', 1);' +
' -moz-transform: scale(' + scale + '); -o-transform: scale(' + scale + '); transform: scale(' + scale + ');' +
' display: block; margin-left: ' + margin + 'px;'
);
}
enterIncorrectOrientation() {
document.getElementById("orientation").style.display = "block";
document.getElementById("content").style.display = "none";
}
leaveIncorrectOrientation() {
document.getElementById("orientation").style.display = "none";
document.getElementById("content").style.display = "block";
}
}
export default ScaleManager;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment