Friction River Software

  • お問い合わせ

Phaser4入門【Phaser4基礎編②】様々な改良

A子

前回のゲーム(ブロック崩し)をスマホでプレイしてみたんだけど、指でパドル操作ができるんだよね

すごいなぁ…って思ったよ

C菜

でもですね~

パドルが自分の指先で隠されちゃって、見えないんですよ~
(操作しづらいです~)

A子

うーん

パドルの少し下側を操作できれば良いんだけどね
(パドル自身が見えるように…)

B美

実際にゲームをプレイしてみると、色々な要望が出てくるでしょ?

今回はそういうのをまとめて、全部解決しちゃいましょう

C菜

でしたら、もう一つあります~

最初からブロックの裏側(画面では上のほう)にボールが入るようになってますけど、並んでいるブロックの両端は左右の壁にくっついているようにしたいです~
(ブロックの並びに穴を開けないと、裏側にボールが入らないように~)

A子

そもそも上と左右の三面には壁が表示されてないんだよね
(現状は、画面の端でボールが反射している)

その壁を表示するようにしよう

B美

あと、せっかくゲームオーバー画面があるのに、使ってないのよね

ゲームオーバー時にはその画面に遷移するようにしましょう

A子

ボールのスピードを変化させたり、パドルの大きさ(幅)を変えたり…ってのもやりたいよね

あと、最初の1面をクリアしても、(ゲームを終えるのではなく)次のステージ(2面)に進むとか…

C菜

ボールが上端の壁に接触したら、ボールの速度を1.5倍にする…って、どうでしょうか~?

B美

良いわね、それ

並んでいるブロックに穴を開けるかどうかをプレーヤーが決めることができれば、ゲームに戦略性が生まれるしね
(遅い速度で確実に消していくのか、速くなっても良いからボールを裏に入れるのか…って感じ)

A子

だったらスコアも1.5倍にしたらどうかな?
(ボールのスピードが1.5倍になったときね)

C菜

良いですね~

あ、あとパドルサイズですけど、ステージが進むと徐々に小さくなっていくのはどうでしょう~?
ただし、初期値の半分(50%)を下限として~

A子

ふむ
それも採用

んじゃ、まとめてみよう

C菜

了解です~

それでは、実現しやすそうな順番で列挙していきますね~
(全てが実現可能かどうかはわかりませんけど~(苦笑))

1.ゲームオーバー画面への切り替え
2.上と左右に壁を表示し、ブロックの並びの左右は壁にくっつける
3.スマホ操作時、パドルをつかむ位置を下側に移動
4.ボールが上端の壁に跳ね返ったら、ボール速度を1.5倍にし、同時にブロックを壊したときのスコアも1.5倍にする
5.ステージをクリアしたら次のステージに移行し、その際パドルのサイズを0.9倍にする(ただし、下限は初期値の50%)

いかがでしょうか~?

B美

とりあえずはそれで良いんじゃない?
(先々、新たな要望が出てくるかもしれないけど…)

では、まずは一つ目ね

1.ゲームオーバー画面への切り替え

A子

「Claude」さんに聞いてみよう

「GameOver.ts」を使いたいので、「Game.ts」の修正内容を教えてください。

B美

あ、「GameOver.ts」を書き換えて保存するとき、文字コードを「UTF-8」にするのを忘れないようにね!

C菜

修正後にテスト実行してみましたけど、全く問題なかったです~

それでは次です~

2.上と左右に壁を表示し、ブロックの並びの左右は壁にくっつける

A子

OK
こんな感じで聞いてみたよ

画面の上端と左右両端に壁(クリーム色)を表示してください。
あわせて、ブロックの並びの左右が壁に密着している状態をデフォルトにしたいです。

C菜

言われた通りに「Game.ts」の中の五か所を修正しましたけど、これまた完璧でした~

A子

次の3番は難しいかもね

3.スマホ操作時、パドルをつかむ位置を下側に移動

こう聞いてみたよ

スマホで操作する際、パドルを指で触らなければなりません。
しかし、それでパドル自体がプレイヤーの指で隠されてしまうため、操作性に難があります。
パドルの少し下側に触れることで操作できるようにできないでしょうか?

C菜

「npm run build」を実行し、「dist」ディレクトリをサーバにアップしたあと、スマホでテストしてみました~

パドルの真上じゃなくても操作できるようにはなりましたけど、パドルの下側ではうまく動かないですね~
これは有効範囲の問題でしょうか~?

画面の下側領域が狭くて、パドルの下側で操作するのが難しいです。
スマホでプレイするときだけは、パドルの下のスペースをもう少し確保したいです。
可能でしょうか?

…って聞いてみましたよ~

A子

うん、パドル位置が上にずれて、スマホ利用時の指操作領域が下側に確保された
それは良いんだけど、ブロックの並びとパドル位置が(さっきよりも)近くなったせいで難易度が上がっちゃったよ

…ってなわけで、再度質問してみた

スマホによるプレイの際、ブロックの並びとパドル位置が近くなっています(画面内でパドルが通常よりも上方に表示されている)。
パドルの下側に指による操作領域が設けられたのは良いのですが、ゲームとしての難易度が上がるのです。
PCとスマホではゲーム画面全体の縦方向の長さを変更できるでしょうか?

C菜

完璧です~
っていうか、何を聞いても「可能です」って言うの、すごくないですか~(笑)

それでは、次は4番ですね~

4.ボールが上端の壁に跳ね返ったら、ボール速度を1.5倍にし、同時にブロックを壊したときのスコアも1.5倍にする

このように聞いてみました~

ボールが上端の壁に接触した際、それ以降はボールの速度を1.5倍に速めたいです。
その際、ブロックを消したときのスコアも同時に1.5倍にします。

A子

うまく動いたよ
んじゃ、最後だね

5.ステージをクリアしたら次のステージに移行し、その際パドルのサイズを0.9倍にする(ただし、下限は初期値の50%)

質問内容は以下の通り

ブロックを全て消してクリアした際、次のステージに移行したいです。
もちろん、それまでのスコアは引き継ぐようにします。
難易度調整として、ステージをクリアするつどパドルのサイズ(横幅)を0.9倍にします。
ただし、パドルサイズの下限は初期値(最初のパドルサイズ)の半分(50%)とします。

B美

あら?
プレイして1面をクリアしてみたけど、フリーズするわね(苦笑)

クリア後のメッセージ表示でフリーズするのですが、「endGame」メソッドに問題はありませんか?

C菜

言われた通りに変更(一行を削除)したら、ばっちり成功しましたよ~
(「endGame」メソッドの問題じゃなかったですけど~(苦笑))

でも一つ問題があります~

「ゲームオーバー→クリック→タイトル画面→クリック→ゲームスタート」という流れの際、スコアは引き継がれ(ゼロではなく)、LIVESは1で、STAGEはゲームオーバーになったときの数字(例えば3)で始まります。
(コンティニューではなく)新規にゲームスタートするには?

A子

これまた「Claude」さんの言う通りに修正したみた
結果は、完璧だよ!

まぁ、効果音やBGMもないし、ゲームとしてはまだまだだけどね(苦笑)

C菜

でもコピペしかしてないのに、ここまでのゲームが作れるなんて本当に感動ものですよ~

すでに結構遊べますしね~

B美

読者の皆さんも『ここ』をクリックして、ぜひ遊んでみてね
(クリックすると別ウィンドウで開きます)

次回は、もう少し(ゲームらしくなるように)改良していきましょう