ミッション01：自機を自由に動けるようにしてみんとす！

ついに奴らがやってきた……！ ということで、毎年のことながら杉花粉の猛威に今から戦々恐々のpon_zuです。 既に鼻がムズムズし始めてるので今日はマスク着用での執筆です。

前回の記事で宣言したとおり、今回からenchant.jsを使った新連載「シューティングゲームを育成してみんとす！」を開始します。



記念すべき第1回のテーマは、「自機を自由に動けるようにしてみんとす！」です。

ステップ0：自機の動きを見てみんとす！

前回のコードを動かすと、こんな感じになります。
動かしてみれば分かりますが、自機はクリック/タッチ位置に追従して上下方向にのみ移動できます。



どんなに頑張っても左右方向に移動することはできません。
今回はこの自機を上下左右自由に移動できるようにしてみましょう。

ステップ1：自機を左右方向に移動できるようにしてみんとす！

自機を左右方向に移動できるようにするにはどこをいじればいいのでしょうか？
こんな感じに直してみました。

コード差分はこれだけです。

view plainprint?

1. game.rootScene.addEventListener('touchstart', function (e) {  
2. -            player.y = e.y;  
3. +            player.x = e.x - player.width/2;  
4. +            player.y = e.y - player.height/2;  
5.              game.touched = true;  
6.          });  
7.          game.rootScene.addEventListener('touchmove', function (e) {  
8. -            player.y = e.y;  
9. +            player.x = e.x - player.width/2;  
10. +            player.y = e.y - player.height/2;  
11.          });  
12.          game.rootScene.addEventListener('touchend', function (e) {  
13. -            player.y = e.y;  
14. +            player.x = e.x - player.width/2;  
15. +            player.y = e.y - player.height/2;  
16.              game.touched = false;  
17.          });  

game.rootScene.addEventListener('touchstart', function (e) {
-            player.y = e.y;
+            player.x = e.x - player.width/2;
+            player.y = e.y - player.height/2;
             game.touched = true;
         });
         game.rootScene.addEventListener('touchmove', function (e) {
-            player.y = e.y;
+            player.x = e.x - player.width/2;
+            player.y = e.y - player.height/2;
         });
         game.rootScene.addEventListener('touchend', function (e) {
-            player.y = e.y;
+            player.x = e.x - player.width/2;
+            player.y = e.y - player.height/2;
             game.touched = false;
         });

タッチ/クリック開始時、スワイプ/ドラッグ時、タッチ/クリック終了時に処理する処理を書き換えて、タッチ位置をplayerインスタンスの位置に代入しています。
playerの幅や高さの半分を引き算しているのは自機の表示位置の調整のためです。
このコードを動かすとこんな感じになります。
狙ったとおり、自由に上下左右に動けるようにはなったのですが、このままでは以下のような問題が残っています。

• タッチ/クリック開始時に自機がタッチ/クリック位置に瞬間移動してしまう。
• スマートフォンでプレイする際に指で自機が隠れてしまう。

これらの問題を解決するために、もうちょっとコードをいじってみましょう。

ステップ2：自機をスワイプ/ドラッグ距離に応じて相対移動するようにしてみんとす！

先ほど挙げた問題を解決する方法として、自機をスワイプ/ドラッグ距離に応じて相対移動するように変更してみます。

こんな感じに直してみました。

コード差分はこれだけです。

view plainprint?

1. @@ -150,6 +151,18 @@ var Player = enchant.Class.create(enchant.Sprite, {  
2.          this.frame = 0;  
3.    
4.          /** 
5. +         * タッチした位置からドラッグした距離で相対移動するための変数を追加 
6. +         * - "xs" : タッチ開始時の自機のX座標 
7. +        　* - "ys" : タッチ開始時の自機のY座標 
8. +         * - "xts" : タッチ開始位置のX座標 
9. +        　* - "yts" : タッチ開始位置のY座標 
10. +         */  
11. +        var xs = x;  
12. +        var ys = y;  
13. +        var xts = 0;  
14. +        var yts = 0;  
15. +  
16.   
17. ...  
18.   
19. @@ -179,22 +192,30 @@ var Player = enchant.Class.create(enchant.Sprite, {  
20.           * EventTarget#dispatchEvent で任意のイベントを発行することもできる。  
21.           *  
22.           * ここでは、以下のような処理を登録してしている  
23. -         *    画面がクリックされたとき … 自機をその座標に移動させ、弾を撃ちはじめる  
24. -         *    クリックしている座標が動いたとき … 自機をその座標に移動させる  
25. -         *    クリックが離されたとき … 自機をその座標に移動させ、弾を撃つのをやめる  
26. +         *    画面がクリックされたとき … 移動目標を初期化し、弾を撃ちはじめる  
27. +         *    クリックしている座標が動いたとき … ドラッグした距離に応じて自機を相対的に移動させる  
28. +         *    クリックが離されたとき … 移動目標を初期化し、弾を撃つのをやめる  
29.           */  
30.          game.rootScene.addEventListener('touchstart', function (e) {  
31. -            player.x = e.x - player.width/2;  
32. -            player.y = e.y - player.height/2;  
33. +            player.xs = player.x;  
34. +            player.ys = player.y;  
35. +            player.xts = e.x;  
36. +            player.yts = e.y;  
37.              game.touched = true;  
38.          });  
39.          game.rootScene.addEventListener('touchmove', function (e) {  
40. -            player.x = e.x - player.width/2;  
41. -            player.y = e.y - player.height/2;  
42. +  
43. +            var xNew = player.xs + (e.x - player.xts);  
44. +            var yNew = player.ys + (e.y - player.yts);  
45. +  
46. +            if(xNew > 0 && (xNew + player.width) < game.width){  
47. +                player.x = xNew;  
48. +            }  
49. +            if(yNew > 0 && (yNew + player.height) < game.height){  
50. +                player.y = yNew;  
51. +            }  
52.          });  
53.          game.rootScene.addEventListener('touchend', function (e) {  
54. -            player.x = e.x - player.width/2;  
55. -            player.y = e.y - player.height/2;  
56.              game.touched = false;  
57.          });  

@@ -150,6 +151,18 @@ var Player = enchant.Class.create(enchant.Sprite, {
         this.frame = 0;
 
         /**
+         * タッチした位置からドラッグした距離で相対移動するための変数を追加
+         * - "xs" : タッチ開始時の自機のX座標
+        　* - "ys" : タッチ開始時の自機のY座標
+         * - "xts" : タッチ開始位置のX座標
+        　* - "yts" : タッチ開始位置のY座標
+         */
+        var xs = x;
+        var ys = y;
+        var xts = 0;
+        var yts = 0;
+

...

@@ -179,22 +192,30 @@ var Player = enchant.Class.create(enchant.Sprite, {
          * EventTarget#dispatchEvent で任意のイベントを発行することもできる。
          *
          * ここでは、以下のような処理を登録してしている
-         *    画面がクリックされたとき … 自機をその座標に移動させ、弾を撃ちはじめる
-         *    クリックしている座標が動いたとき … 自機をその座標に移動させる
-         *    クリックが離されたとき … 自機をその座標に移動させ、弾を撃つのをやめる
+         *    画面がクリックされたとき … 移動目標を初期化し、弾を撃ちはじめる
+         *    クリックしている座標が動いたとき … ドラッグした距離に応じて自機を相対的に移動させる
+         *    クリックが離されたとき … 移動目標を初期化し、弾を撃つのをやめる
          */
         game.rootScene.addEventListener('touchstart', function (e) {
-            player.x = e.x - player.width/2;
-            player.y = e.y - player.height/2;
+            player.xs = player.x;
+            player.ys = player.y;
+            player.xts = e.x;
+            player.yts = e.y;
             game.touched = true;
         });
         game.rootScene.addEventListener('touchmove', function (e) {
-            player.x = e.x - player.width/2;
-            player.y = e.y - player.height/2;
+
+            var xNew = player.xs + (e.x - player.xts);
+            var yNew = player.ys + (e.y - player.yts);
+
+            if(xNew > 0 && (xNew + player.width) < game.width){
+                player.x = xNew;
+            }
+            if(yNew > 0 && (yNew + player.height) < game.height){
+                player.y = yNew;
+            }
         });
         game.rootScene.addEventListener('touchend', function (e) {
-            player.x = e.x - player.width/2;
-            player.y = e.y - player.height/2;
             game.touched = false;
         });

タッチ/クリック時に自機の座標とタッチ/クリックされた位置を記録しておき、スワイプ/ドラッグされた距離に応じて自機を相対的に移動させています。 ついでに画面端まで行ったら移動できないように移動制限もかけています。 この操作方法だと、スマートフォンでプレイする場合もタッチする位置を変えることで指の影に自機がかぶってしまうこともなくなります。 動かすとこんな感じです。

さて、今回はここまでです！ 今回の改造で自機が自由に動くようになりました。 次回は何を改造しましょうね？