How to strict the game to a mode (Portait or Landscape) in Phaser JS?
In the world of website game creation, having a consistent user experience across all devices and orientations is critical.
Phaser 3, a popular JavaScript framework for creating interactive games, provides tools to control how your game adapts to different screen orientations. This blog post will guide you through effectively enforcing portrait or landscape mode in your Phaser 3 project.
Use above Boilerplate to create your project if you do not have. (Optional)
Understanding Portrait and Landscape:
Page orientation is the way in which a rectangular page is oriented for normal viewing. The two most common types of orientation are portrait and landscape.[1] The term “portrait orientation” comes from visual art terminology and describes the dimensions used to capture a person’s face and upper body in a picture; in such images, the height of the display area is greater than the width. The term “landscape orientation” also reflects visual art terminology, where pictures with more width than height are needed to fully capture the horizon within an artist’s view.[2]
Steps to Strict for a Single Mode
When you done with setup your project, then follow these steps do strict the user for any mode that you like for your game. We are going to strict the user for a single mode in mobile game, when user will open the game in mobile browser then he will see rotate alert to move the mobile in correct direction of rotation if it was wrong.
1). Adding HTML
You need to add a absolute div for rotation message that will be visible whenever user will in wrong rotation. I use Tailwind CSS but you can also use simple CSS. Just design this rotateAlert div as you want.
<body class="relative w-full h-screen flex overflow-hidden bg-[#e6b5ca]">
<div
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 hidden flex-col items-center justify-center bg-[#b75e84] w-full h-screen"
id="rotateAlert">
<svg class="w-20 h-20 sm:w-32 sm:h-32 fill-white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
d="M21.323 8.616l-4.94-4.94a1.251 1.251 0 0 0-1.767 0l-10.94 10.94a1.251 1.251 0 0 0 0 1.768l4.94 4.94a1.25 1.25 0 0 0 1.768 0l10.94-10.94a1.251 1.251 0 0 0 0-1.768zM14 5.707L19.293 11 11.5 18.793 6.207 13.5zm-4.323 14.91a.25.25 0 0 1-.354 0l-1.47-1.47.5-.5-2-2-.5.5-1.47-1.47a.25.25 0 0 1 0-.354L5.5 14.207l5.293 5.293zm10.94-10.94l-.617.616L14.707 5l.616-.616a.25.25 0 0 1 .354 0l4.94 4.94a.25.25 0 0 1 0 .353zm1.394 6.265V18a3.003 3.003 0 0 1-3 3h-3.292l1.635 1.634-.707.707-2.848-2.847 2.848-2.848.707.707L15.707 20h3.304a2.002 2.002 0 0 0 2-2v-2.058zM4 9H3V7a3.003 3.003 0 0 1 3-3h3.293L7.646 2.354l.707-.707 2.848 2.847L8.354 7.34l-.707-.707L9.28 5H6a2.002 2.002 0 0 0-2 2z" />
<path fill="none" d="M0 0h24v24H0z" />
</svg>
<span class="text-white text-center block text-sm sm:text-2xl">Please rotate your device to landscape mode</span>
</div>
<script type="module" src="/src/main.js"></script>
</body>2). Adding JS
Now we need to control this div and pasue the game whenever mode is wrong. You need to add this code where you are starting you game. In the below code I am restricting for landscape you can change that you want. Check it out:
import Phaser from "phaser";
import config from "./config";
const game = new Phaser.Game(config);
const OnChangeScreen = () => {
let isLandscape = screen.orientation.type.includes('landscape');
let rotateAlert = document.getElementById('rotateAlert');
if (isLandscape) {
game.isPaused = false;
if (rotateAlert.classList.contains('flex')) {
rotateAlert.classList.replace('flex', 'hidden');
}
else {
rotateAlert.classList.add('hidden');
}
} else {
game.isPaused = true;
if (rotateAlert.classList.contains('hidden')) {
rotateAlert.classList.replace('hidden', 'flex');
}
else {
rotateAlert.classList.add('flex');
}
}
}
OnChangeScreen();
let _orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;
_orientation.addEventListener('change', function (e) {
OnChangeScreen();
});
window.addEventListener('resize', function (e) {
OnChangeScreen();
});Read More:
Check here some other blogs about Phaser 3.
Conclusion:
You can successfully adjust the orientation of your Phaser 3 game, giving your consumers a personalized experience regardless of the device or how they hold it. Happy Coding!!!
