From c058fa0fb22dc40ef0225b21a97578cddd0aaffa Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:05 +0100 Subject: unslug ru: move --- .../2d_breakout_game_phaser/physics/index.html | 98 ++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 files/ru/games/tutorials/2d_breakout_game_phaser/physics/index.html (limited to 'files/ru/games/tutorials/2d_breakout_game_phaser/physics') diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/physics/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/physics/index.html new file mode 100644 index 0000000000..20acffa239 --- /dev/null +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/physics/index.html @@ -0,0 +1,98 @@ +--- +title: Физика +slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Physics +tags: + - 2D + - Beginner + - Canvas + - JavaScript + - Phaser +translation_of: Games/Tutorials/2D_breakout_game_Phaser/Physics +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/ru/docs")}}
+ +

{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Move_the_ball", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Bounce_off_the_walls")}}

+ +
+

Это 5 урок из 16, которые входят в руководство 2D игра на Phaser. Вы можете найти исходный код этого урока на Gamedev-Phaser-Content-Kit/demos/lesson05.html.

+
+ +

Для правильного определения столкновений нам необходима физика, и в этом уроке мы покажем, что есть у Phaser на этот счёт, продемонстрировав это на простом примере.

+ +

Добавление физики

+ +

В Phaser есть три разных физических движка: Arcade Physics, P2 и Ninja Physics. Также есть четвёртый Box2D как платный плагин. Для нашей простой игры мы будем использовать Arcade Physics, потому что нам не нужны сложные геометрические вычисления.

+ +

Во-первых, инициализируем Arcade Physics в нашей игре. Добавьте метод physics.startSystem() в начале функции create(). Убедитесь, что следующая строка кода находится в самом начале функции create():

+ +
game.physics.startSystem(Phaser.Physics.ARCADE);
+
+ +

Во-вторых, нам необходимо добавить мяч в физическую систему, потому что объект, отвечающий за физику в Phaser, не включен по умолчанию. Добавьте следующую строку в конце функции create(): 

+ +
game.physics.enable(ball, Phaser.Physics.ARCADE);
+
+ +

В-третьих, теперь мы можем установить значение свойства velocity нашего мяча через body. Добавьте следующую строку снова в конце функции create():

+ +
ball.body.velocity.set(150, 150);
+
+ +

Удаление предыдущих инструкций при обновлении

+ +

Теперь нам надо убрать старый код, который добавлял 1 к координатам x и y в функции update(): 

+ +
function update() {
+    ball.x += 1;
+    ball.y += 1;
+}
+
+ +

теперь мы сделали тоже самое, но на физическом движке.

+ +

Финальный код

+ +

Весь код должен выглядеть вот так:

+ +
var ball;
+
+function preload() {
+    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
+    game.scale.pageAlignHorizontally = true;
+    game.scale.pageAlignVertically = true;
+    game.stage.backgroundColor = '#eee';
+    game.load.image('ball', 'img/ball.png');
+}
+
+function create() {
+    game.physics.startSystem(Phaser.Physics.ARCADE);
+    ball = game.add.sprite(50, 50, 'ball');
+    game.physics.enable(ball, Phaser.Physics.ARCADE);
+    ball.body.velocity.set(150, 150);
+}
+
+function update() {
+}
+
+ +

Снова перезагрузите index.html. Мячик должен постоянно двигаться в направлении, которое мы задали. На данный момент в физическом движке гравитация (gravity) и трение (friction) имеют нулевое значение. Добавление гравитации заставит мячик падать вниз, пока трение будет пытаться остановить его.

+ +

Поиграйте с физикой

+ +

Вы можете делать гораздо больше вещей с физикой. Например, добавив ball.body.gravity.y = 100, вы установите вертикальную гравитацию для мячика. Как результат он будет сначала запущен вверх, но затем начнёт падать, находясь под действием гравитации.

+ +

Это лишь верхушка айсберга: есть огромное количество перменных и функции, с помощью которых вы можете взаимодействовать с физическими объектами. Посмотрите официальную документацию, чтобы увидеть огромное количество примеров применения Arcade и P2.

+ +

Сравните свой код

+ +

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

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/bjto9nj8/","","400")}}

+ +

Следующее

+ +

Теперь мы можем посмотреть, как заставить мяч отскакивать от стен.

+ +

{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Move_the_ball", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Bounce_off_the_walls")}}

-- cgit v1.2.3-54-g00ecf