blob: 0556233fa2ca32ba2522eac69aa174cb9a9e05a0 (
plain)
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
---
title: 物理演算
slug: Games/Tutorials/2D_breakout_game_Phaser/Physics
translation_of: Games/Tutorials/2D_breakout_game_Phaser/Physics
original_slug: Games/Workflows/2D_breakout_game_Phaser/Physics
---
<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball", "Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls")}}</p>
<div class="summary">
<p>全 16回の<a href="/ja/docs/Games/Workflows/2D_Breakout_game_Phaser">ゲーム開発チュートリアル</a> の 5 回目です。 今回終了後のソースコードは <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson05.html">Gamedev-Phaser-Content-Kit/demos/lesson05.html</a> でご覧になれます。</p>
</div>
<p><span class="seoSummary">モノ同士の衝突を正しく処理するためには、物理演算が必要になります。この文書では、Phaser での実装と、典型的な例を紹介します。</span></p>
<h2 id="物理演算の追加">物理演算の追加</h2>
<p>Phaser は Arcade Physics、P2、そして Ninja Physics と、3 つの異なる物理演算エンジンを備えています。また商用プラグインとして Box2D も物理演算エンジンとして利用できます。チュートリアルで作成しているような単純なゲームでは、複雑な幾何計算を必要としません。そのような場合には Arcade Physics を利用すると良いでしょう。</p>
<p>まず Arcade Physics engine を初期化します。初期化は <code>create </code>関数の先頭で、 <code>physics.startSystem()</code> メソッドを呼ぶことで行います：</p>
<pre class="brush: js">game.physics.startSystem(Phaser.Physics.ARCADE);
</pre>
<p>標準では Phaser オブジェクトは物理演算エンジンを利用しません。そのため、<code>create()</code> の末尾に次の行を追加して、ボールから物理演算エンジンを利用できるようにします：</p>
<pre class="brush: js">game.physics.enable(ball, Phaser.Physics.ARCADE);
</pre>
<p>次にボールを動かします。次のように、<code>create() </code>末尾で body 属性の持つ <code>velocity</code> 属性を設定します：</p>
<pre class="brush: js">ball.body.velocity.set(150, 150);
</pre>
<h2 id="以前作成した、更新処理の削除">以前作成した、更新処理の削除</h2>
<p><code>update()</code>関数から忘れずに、x と y の値の更新処理を削除しておきましょう：</p>
<pre class="brush: js">function update() {
<s> ball.x += 1;</s>
<s> ball.y += 1;</s>
}
</pre>
<p>以上で、物理演算エンジンを組み込むことができました。</p>
<h2 id="最終的に作成されたコード">最終的に作成されたコード</h2>
<p>最終的に得られたコードは以下の通りです：</p>
<pre class="brush: js">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() {
}
</pre>
<p><code>index.html</code> を再読み込みすると、ボールは 1 方向に進み続けます。現在、物理エンジンには重力加速度も摩擦係数も設定されていません。重力加速度を設定すれば、ボールは落下するようになります。また、摩擦係数を設定すれば、ボールが摩擦で停止するようになります。</p>
<h2 id="より進んだ内容">より進んだ内容</h2>
<p>今回扱った内容以外にもできることはたくさんあります。例えば、 <code>ball.body.gravity.y = 100;</code> と追加することで、ボールに影響する重力を設定できます。その結果として、ボールが重力に引かれて、落下するようになります。</p>
<p>このような機能はほんの一部分です。<a href="http://phaser.io/docs#physics">physics documentation</a> には、物理演算に関する数多くの関数と変数が、<a href="http://phaser.io/examples/v2/category/arcade-physics">Arcade</a> と <a href="http://phaser.io/examples/v2/category/p2-physics">P2</a> 物理演算エンジンの使用例とともに解説されています。</p>
<h2 id="自分のコードと比較しよう">自分のコードと比較しよう</h2>
<p>上記のコードや、下記のデモと比較して、どのように動作しているかを理解しましょう。</p>
<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/bjto9nj8/","","400")}}</p>
<h2 id="次のステップ">次のステップ</h2>
<p>次のステップでは、<a href="/ja/docs/Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls">ボールの跳ね返り</a> を実装します。</p>
<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball", "Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls")}}</p>
|
