FlashゲームをPhaser 3で作り直すぞ　第３回 - neoacoさんの　ゲーム作ったよ報告書

※このシリーズは、一日3時間くらい作業した生録画的な感じでお伝えしております。

2020年6月8日

気を取り直して作業を再開する。開発メモを残しておいてよかった、次に何をすればいいのかわかりやす～い。
つまりそろそろやりたくない詰めの作業ということです。
本日はリザルト画面を作りますわよ！

・リザルト画面を作る

というわけでリザルト画面の画像を用意。
10問答えたらゲームを中止してリザルト画面へ移行だ！
totalAnserNumとかいう苦肉の策的名前を準備して、回答するたびに+1する。
10になったらリザルト画面を表示するようにする。

// chaking()
}else if(gamePhaseNum === 2){
    // ゲーム中
    totalAnserNum += 1;
    if(totalAnserNum < 10){
       // 略
    }else{
        // 10問答えたのでリザルトへ移行
          // 表示しているものを全部非表示にする
          // 次のゲームフェイズへ移行
          gamePhaseNum = 3;
    }
}

10問答えたらすぐに結果表示してもいいけど、ここでワンクッション置いた方が丁寧な気がする。
「終了！」とか表示して、それからリザルトを表示することにした。

タイトル画面からプレイをしてみる。
おー、いいね、リザルト画面まで出来たぞ。これでほとんどできているというわけだ！！！！！

・ツイートボタンとリトライボタン

リザルトを表示したら、その内容をツイートしてもらいたい。
リトライするのにF5アタックはしてほしくない。
というわけでボタンを追加します。

※※※※
こんな面倒なことをしなくても画像ボタンでいいじゃない、と思う場合は
6/9のボタンの中身の話までスキップせよ
※※※※

こんな注釈をするくらいなので本当に本当にただの寄り道です。
ボタンを、CSSで作ったボタンにしたくないですか。
ぼくは、やりたいです。

まずはここを参考にする。
https://phaser.io/examples/v3/view/game-objects/dom-element/form-input
↑この中で読み込まれている"assets/text/loginform.html"が必要なので、GitHubで探しに行く……。
https://github.com/photonstorm/phaser3-examples/blob/master/public/assets/text/loginform.html
これこれ。
まーでもこれはログインフォーム全部なのでちょっと量が多すぎる。
欲しいところだけ書くと……

<style>
.button {
  color: #ffffff;
  background: #1b95e0;
  width: 100px;
  height: 60px;
  font-size: 18px;
  text-decoration: none;
}
</style>
<div id = "BT">
<button class="button">
  ついーとする
</button>
</div>

こんな感じ。あとは皆さんのCSS力でカスタマイズしていただければ……。僕は角を丸くしたり影をつけたりした。
リトライボタンの方は、あとでテキストとカラーをプログラムで変更することにする。
このあとはPhaserの見本通りに書き込んでいけばいい。

// preload()
this.load.html("nameform", "button.html");

// create()
element1 = this.add.dom(100, 420).createFromCache("nameform");
element2 = this.add.dom(210, 420).createFromCache("nameform");
// 色を変える
element2.getChildByProperty("className", "button").style.backgroundColor = "red";
// テキストを変える
element2.getChildByProperty("className", "button").innerText = "もっかいやる";

これでボタンが設置される。
ほかのボタンと同じようにAlphaを0にしておけば見えないし使えないようになるのでそうしておいて、リザルト画面で見えるようにすればいい。
色変えるの調べるのに手間取ったから今日はここまで。

2020年6月9日

ラジオ体操第一をすると肩が爆発しそうなくらい痛くて熱くなる。不健康の極み。
もうちょっとだけボタンの話が続くんじゃ。

・ボタンを動かせるようにする

ボタンを押して反応するようにするには、イベントリスナーを付ける必要がある。

// create()
// 昨日ボタンを書いたすぐ下に書くとわかりやすい
element1.addListener("click");
element1.on("click", function(pointer){
// やらせたい動作をここに書く
});

リトライボタンも同じように書く。
リトライボタンの方が中身は簡単、今出てる表示を全部非表示にして、タイトル画面を出して、数字をリセットするだけ。
ツイートボタンは……

window.open("https://twitter.com/intent/tweet?text= " + encodeURIComponent("ツイート内容"));

と書いておくと、新しいウィンドウでツイート画面を出してくれる。
ツイート画面っていうか、ツイッターを開いて発言状態にしてくれるっぽい。
昔と挙動が変わったな。この調子で画像添付できるようにならないかなぁ。

・できた！　ガハハ！　　……と、その前に

気がかりな点が二つある。
1.得点の計算はどうする？（現状、正答＝1ptとしか数えてない）
2.スコア表示のフォント……どうする？

・得点計算

Flash版と同じように、早く答えると点が高いようにしたい。
というわけで、時間の計測をすることにする。

時間の計測
問題の表示　→計測開始
左右どちらかのボタンを押す　→計測終了

この時間の差を測って、得点に変換しよう。
早い方が良いってことは……1問5秒ぐらいで答えてほしいから……
5秒から引いた回答までの時間を得点にしよう。
正解しても点が貰えなかったら寂しいから、5秒以上は総じて1点だ。
時間を計測するっていうのはちょっと面倒くさくて、始めの時刻と終わりの時刻を記録して差を求めることになる。

// 時間の計測開始
timerSatr = new Date();
// 時間の計測終了
timerEnd = new Date();
// スコアの計算（ミリ秒なので5s = 5000 ms）
timeScore = 5000 - (timerE - timerS);

これらを問題表示と回答ボタンのところに書いておけばいい。
いいね～　数字もべらぼうな数字になって楽しいな！　ﾜﾊﾊ

・フォント

フォントねぇ……全部がGoogleWebフォントだったり、ゲームでまるっと載せていいライセンスのフォントだったりで
通信の重さとかしったこっちゃねー！状態なら日本語フォントとかそのまま入れちゃうんだけど
（参考：https://phaser.io/examples/v3/search?search=font　のWebFontってかいてあるやつ）
ゲーム中の文章も数少なく全てを画像で済ませちゃったので、
スコアの表示をするためだけにフォントが必要になってくる……。
いや、全部フォントをそろえたいだけのアレなので、あれですよ、
ゲーム中のフォントをそもそもgoogleWebFontにあるフォントで作ればいいだけなので、
私がたぬき油性マジックを使いたいだけのエゴなので、
数字だけのビットマップフォントを作りました……。
（参考：http://narudesign.com/devlog/create-bitmap-font/）
禁止事項に触れてないから大丈夫。たぬき油性マジックの懐の広さよ。ありがとうありがとう。
これで画像さえあればビットマップフォントが作れるようになったぞﾜﾊﾊ。

そんなことよりゲーム中の表示ね。
https://phaser.io/examples/v3/view/game-objects/bitmaptext/static/change-font
これかな。

フォントを読み込んで、
テキストの表記をただのテキストからビットマップフォントの書き方へ変更

// preload()
this.load.bitmapFont("tanuki", "assets/fonts/bitmapfont-export.png", "assets/fonts/bitmapfont-export.xml");
// create()
// x, y, fontname, text, fontsize
scoreText = this.add.bitmapText(315,350,"tanuki", " ", 102);

これで様子を……いいね！　できたできた

完成したジャン！　すごいじゃん！
やったー！　やったー！

どれどれ……サーバにアップロードして……ツイートして……完成！　完成です！
やったー！

結局全部で一か月くらいかかっとるんかーーーーーい！

・出来上がったゲーム

出来たゲームはこれだ！
遊んでくれ！！！！！
neoaco.com