From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../2d_breakout_game_phaser/physics/index.html | 99 ++++++++++++++++++++++ 1 file changed, 99 insertions(+) create mode 100644 files/zh-cn/games/tutorials/2d_breakout_game_phaser/physics/index.html (limited to 'files/zh-cn/games/tutorials/2d_breakout_game_phaser/physics') diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/physics/index.html b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/physics/index.html new file mode 100644 index 0000000000..4f908a9bc2 --- /dev/null +++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/physics/index.html @@ -0,0 +1,99 @@ +--- +title: Physics +slug: Games/Tutorials/2D_breakout_game_Phaser/Physics +tags: + - 2D + - Beginner + - Canvas + - Games + - JavaScript + - Phaser + - Tutorial + - physics +translation_of: Games/Tutorials/2D_breakout_game_Phaser/Physics +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball", "Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls")}}

+ +
+

这是Gamedev Phaser教程 16 第5步您可以在Gamedev-Phaser-Content-Kit / demos / lesson05.html完成本课程后找到源代码

+
+ +

为了在我们的游戏中的对象之间进行正确的碰撞检测,我们将需要物理学; 本文将向您介绍Phaser中的可用内容,以及演示典型的简单设置。

+ +

添加物理效果

+ +

Phaser与三个不同的物理引擎(Arcade Physics,P2和Ninja Physics)捆绑在一起,第四个选项Box2D可作为商业插件使用。对于像我们这样的简单游戏,我们可以使用Arcade Physics引擎。我们不需要任何重的几何计算 - 毕竟只是一个球从墙壁和砖块弹起来。

+ +

首先,让我们在游戏中初始化Arcade Physics引擎。physics.startSystem()create函数开头添加方法(使其成为函数内的第一行),如下所示:

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

接下来,我们需要为物理系统启用我们的球 - 默认情况下,Phaser对象物理不启用。create()函数底部添加以下行

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

接下来,如果我们要在屏幕上移动我们的球,我们可以设置velocitybody再次添加以下行create()

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

删除我们以前的更新说明

+ +

记得删除添加值的我们的老方法x,并yupdate()功能:

+ +
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- 球应该在给定的方向上不断移动。目前,物理引擎的重力和摩擦力设定为零。增加重力将导致球落下,同时摩擦力最终会停止球。

+ +

物理效果趣味

+ +

你可以用物理学来做更多的事情,例如添加ball.body.gravity.y = 100;你将设置球的垂直重力。因此,它将向上发射,但是由于重力的作用而下降。

+ +

这种功能只是冰山一角 - 有各种功能和变量可以帮助您操纵物理对象。查看官方物理文档,并使用ArcadeP2物理系统查看大量示例

+ +

比较你的代码

+ +

您可以在下面的现场演示中查看本课程的完成代码,并使用它来更好地了解它的工作原理:

+ +

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

+ +

下一步

+ +

现在我们可以转到下一课,看看如何让球从墙上弹起

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball", "Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls")}}

-- cgit v1.2.3-54-g00ecf