1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
---
title: Масштабирование
slug: Games/Tutorials/2D_breakout_game_Phaser/Scaling
tags:
- 2D
- Canvas
- JavaScript
- Phaser
- Начинающий
translation_of: Games/Tutorials/2D_breakout_game_Phaser/Scaling
original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Scaling
---
<div>{{GamesSidebar}}</div>
<div>{{IncludeSubnav("/ru/docs/Games")}}</div>
<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Initialize_the_framework", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Load_the_assets_and_print_them_on_screen")}}</p>
<div class="summary">
<p>Это <strong>2-й урок </strong>из 16, которые входят в руководство <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser">2D игра на Phaser</a>. Вы можете найти исходный код этого урока на <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson02.html">Gamedev-Phaser-Content-Kit/demos/lesson02.html</a>.</p>
</div>
<p><span class="seoSummary">Масштабирование отвечает за то, как ваша игра будет выглядеть на экранах разных размеров. Мы можем заставить игру масштабироваться под каждый экран автоматически во время стадии предзагрузки (preload), чтобы нам не пришлось волноваться об этом в будущем.</span></p>
<h2 id="Масштабирование">Масштабирование </h2>
<p>В Phaser есть специальный объект <code>scale</code>, которые имеет несколько полезных методов и свойств. Измените вашу функцию <code>preload()</code> так, как показано ниже:</p>
<pre class="brush: js">function preload() {
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
}
</pre>
<p><code>scaleMode</code> имеет несколько опций, которые определяют, как {{htmlelement("canvas")}} будет масштабироваться:</p>
<ul>
<li><code>NO_SCALE</code> — ничего не масштабировать.</li>
<li><code>EXACT_FIT</code> — масштабировать с полным заполнением пустого места вертикально и горизонтально, не соблюдая соотношение (aspect ratio).</li>
<li><code>SHOW_ALL</code> — масштабирует игру, но сохраняет соотношение так, что картинки не будут искажаться, как и при предыдущем значении. Возможно наличие чёрных полос по краям экрана, но мы можем жить с этим.</li>
<li><code>RESIZE</code> — создаёт {{htmlelement("canvas")}} с доступными шириной и высотой так, что вы можете помещать объекты в игру динамически; это расширенный режим (advanced mode).</li>
<li><code>USER_SCALE</code> — позволяет вам делать динамическое масштабирование, подсчёт размеров, масштаб и соотношение самостоятельно; опять же это расширенный режим.</li>
</ul>
<p>Две другие строчки кода в функции <code>preload()</code> отвечают за вертикальное и горизонтальное выравнивание элемента {{htmlelement("canvas")}}, так что он всегда будет находиться по центру независимо от размера экрана.</p>
<h2 id="Изменение_цвета_фона">Изменение цвета фона</h2>
<p>Мы также можем сделать фон нашего элемента {{htmlelement("canvas")}} таким, каким захотим, чтобы он не оставался постоянно чёрным. Объект <code>stage</code> имеет свойство <code>backgroundColor</code> для этого. Мы можем изменить значение, используя синтаксис CSS для цветов. Добавьте эту строку после трёх, недавно добавленных: </p>
<pre class="brush: js">game.stage.backgroundColor = '#eee';
</pre>
<h2 id="Сравните_свой_код">Сравните свой код</h2>
<p>Вы можете сравнить весь код из этого урока со своим и поиграть с ним, чтобы понять, как он работает:</p>
<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/6a64vecL/","","400")}}</p>
<h2 id="Следующее">Следующее</h2>
<p>Мы научились масштабировать нашу игру, так что давайте перейдём к третьему уроку и узнаем, <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser/Load_the_assets_and_print_them_on_screen">как загружать ресурсы игры и выводить их</a>.</p>
<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Initialize_the_framework", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Load_the_assets_and_print_them_on_screen")}}</p>
|
