Ориентация экрана: landscape, portrait

Ориентация экрана в PlayCanvas

Ориентация экрана — это важный аспект при разработке мобильных приложений и игр, который определяет, в каком положении отображается контент на экране устройства. В PlayCanvas поддерживается работа как в альбомной (landscape), так и в портретной (portrait) ориентации. Управление ориентацией экрана позволяет адаптировать поведение игры или приложения в зависимости от того, как пользователь держит устройство.

Для того чтобы узнать текущую ориентацию экрана, можно использовать свойства объекта window. Например, в PlayCanvas для получения ориентации экрана можно использовать следующие методы:

var isPortrait = window.innerHeight > window.innerWidth;
var isLandscape = window.innerWidth > window.innerHeight;

Этот код проверяет размеры окна и определяет, является ли ориентация экрана портретной или альбомной.

Однако, в PlayCanvas существует специальный объект screen, который упрощает работу с ориентацией экрана. Он предоставляет методы для получения текущей ориентации устройства.

var orientation = pc.Screen.orientation;

С помощью этого объекта можно легко получить текущую ориентацию экрана: pc.Screen.ORIENTATION_PORTRAIT для портретной ориентации и pc.Screen.ORIENTATION_LANDSCAPE для альбомной.

Обработка изменения ориентации

Для корректной работы приложения важно уметь отслеживать изменения ориентации экрана и реагировать на них. В PlayCanvas это можно сделать с помощью событий, которые срабатывают при изменении ориентации устройства.

Для обработки события изменения ориентации можно использовать следующий код:

var app = pc.Application.getApplication();

app.graphicsDevice.on('resize', function() {
    var orientation = app.graphicsDevice.width > app.graphicsDevice.height ?
        pc.Screen.ORIENTATION_LANDSCAPE : pc.Screen.ORIENTATION_PORTRAIT;
    console.log('Current orientation:', orientation);
});

Этот код отслеживает изменение размеров экрана и выводит текущую ориентацию. resize — это стандартное событие, которое срабатывает каждый раз, когда изменяется размер окна.

Также можно использовать метод addEventListener для отслеживания событий изменения ориентации через стандартный API Jav * aScript:

window.addEventListener('orientationchange', function() {
    var orientation = window.orientation;
    console.log('New orientation:', orientation);
});

Метод window.orientation возвращает угол поворота устройства (в градусах). Если угол равен 0, это альбомная ориентация, если угол равен 90 или -90, то это портретная ориентация.

Адаптация интерфейса

Одной из ключевых задач является адаптация интерфейса игры или приложения в зависимости от ориентации устройства. В PlayCanvas для этого можно использовать методы изменения положения и масштаба UI-элементов, а также изменять их размеры.

Пример кода для адаптации интерфейса:

var uiElement = this.app.root.findByName('UIElement');

this.app.graphicsDevice.on('resize', function() {
    if (app.graphicsDevice.width > app.graphicsDevice.height) {
        // Переход в альбомный режим
        uiElement.setLocalPosition(100, 50, 0);
        uiElement.setLocalScale(1, 1, 1);
    } else {
        // Переход в портретный режим
        uiElement.setLocalPosition(50, 100, 0);
        uiElement.setLocalScale(0.8, 0.8, 1);
    }
});

Этот код изменяет положение и масштаб UI-элемента в зависимости от ориентации экрана. Это может быть полезно, например, для адаптации меню или кнопок управления, чтобы они всегда были доступны пользователю, независимо от того, как он держит устройство.

Управление разрешением и полноэкранным режимом

Для достижения лучшего пользовательского опыта при смене ориентации часто требуется менять разрешение экрана или активировать полноэкранный режим. В PlayCanvas для этого используется метод setFullscreen объекта app.graphicsDevice:

var app = pc.Application.getApplication();

// Включение полноэкранного режима
app.graphicsDevice.setFullscreen(true);

// Отключение полноэкранного режима
app.graphicsDevice.setFullscreen(false);

Когда устройство переворачивается, можно автоматически переключать приложение в полноэкранный режим или изменять разрешение экрана, чтобы максимизировать область отображения.

Влияние ориентации на управление

Ориентация экрана также может влиять на управление в игре. Например, в портретном режиме управление может осуществляться с помощью сенсорного экрана, в то время как в альбомном режиме могут быть использованы физические кнопки устройства или гироскоп для управления.

Чтобы адаптировать управление под ориентацию, можно использовать события изменения ориентации экрана, чтобы определить, какой способ управления будет использоваться в данный момент.

Пример:

var isPortrait = window.innerHeight > window.innerWidth;
var controls;

if (isPortrait) {
    controls = new TouchControls();  // Контроллер для портретной ориентации
} else {
    controls = new TiltControls();   // Контроллер для альбомной ориентации
}

Этот код позволяет переключаться между различными способами управления в зависимости от ориентации устройства.

Использование метаданных ориентации в мобильных браузерах

Некоторые мобильные браузеры поддерживают метаданные ориентации, которые могут быть полезны при запуске веб-приложений или игр. В PlayCanvas можно использовать специальное свойство orientation в метатегах HTML для управления поведением приложения.

Пример метатега для портретной ориентации:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, orientation=portrait">

Этот тег сообщает мобильным браузерам, что приложение должно отображаться только в портретной ориентации, что полезно, если необходимо ограничить ориентацию экрана.

Заключение

Ориентация экрана является важной частью взаимодействия с пользователем в мобильных играх и приложениях. PlayCanvas предоставляет гибкие инструменты для работы с ориентацией экрана, позволяя разработчикам адаптировать интерфейс, управлять разрешением и полноэкранным режимом, а также изменять способы управления в зависимости от того, в каком положении находится устройство.

Оглавление