Помогите с Яндекс Играми

Question

Помогите с Яндекс Играми

Виталий Мастер (1189), на голосовании 1 месяц назад

Здравствуйте, можете помочь с этим пунктом Согласно п. 1.6.2.3 Требований платформы, при изменении размеров окна элементы игры не должны обрезаться/выходить за границу окна браузера на десктопе? Как исправить, чтобы изображение нормально скейлилось?
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="./style.css">


<script src="/sdk.js"></script>

<style>
/* Убираем выделение по нажатию клавиш */
canvas:focus {
outline: none;
}

html, body {
/* Убираем отступы */
padding: 0;
margin: 0;
/* Отключаем скролл и лонгтап на IOS */
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
/* Ставим высоту на 100% */
height: 100%;
}
</style>



</head>
<body class="dark">

<div id="unity-container" class="unity-desktop">
<canvas id="unity-canvas" tabindex="-1"></canvas>
</div>
<div id="loading-cover" style="display:none;">
<div id="unity-loading-bar">
<div id="unity-logo"><img src="logo.png"></div>
<div id="unity-progress-bar-empty" style="display: none;">
<div id="unity-progress-bar-full"></div>
</div>
<div class="spinner"></div>
</div>
</div>

Answer 1

Здравствуйте. В этом случае потребуется адаптивная настройка UI-элементов: «Anchors» и «Pivots», которые находятся в компоненте «Rect Transform». Он есть у каждого UI-элемента в Unity и отвечает за позиционирование, масштабирование и вращение элемента в UI.

«Anchors» или «якоря» определяют, к какой части экрана привязан UI-элемент. Если верно их настроить, элементы будут оставаться на своих местах при изменении размера экрана.

«Pivots» — точка поворота. Она определяет, откуда элемент будет масштабироваться и вращаться. Обычно устанавливается в центре элемента, но может быть изменена. Подробнее в Документации .