FlashゲームをPhaser 3で作り直すぞ 第１回

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

～前回までのあらすじ～

Phaserで新しいゲーム作りたいけど、その前にFlashがChromeに殺されるから過去のお気に入りのゲームを移植しておこう。

移植するゲームはこれだ！

あほげー第15回　トミート High & Low
neoaco.com

・ゲーム概要
二つの選択肢のうち、より「トミー」な方を選ぶ。
全10問。

・Flash版ゲームの仕様
（たしか）15種類くらいの選択肢。
ランダムに二つ提示し、よりトミーな方を選ぶと加点される。
速く判断した方が点が高い。

・Flash版を作るときに頑張った点
どっちがよりトミーかを判断するために、選択肢をミートな方から順番に数値を付け、数値が大きい方がトミーとした（入れ知恵）。
選択肢を選んで、○×が出て、次の設問へ移るようにした。

この仕様を継承し、Phaserで移植……というか、作り直し！をやっていこうと思う。

2020年5月11日

思い立って開始。
やっぱHDDの中にデータ無い……。

・とりあえずの画像の作成

どうせコードで使いまわせるところなど無いので、画像は諦める。悲しい。
とりあえず、仮に数字0～9で作ることにした。

これを分割して使うようにする。

・index.htmlとgame.jsの作成

チュートリアルを見ながらconfigを書けばいいのだけれど、センタリング大好きマンとしてはゲームをウィンドウのセンターにおいてほしいので

// config
autoCenter: Phaser.Scale.CENTER_BOTH,

これを追加している。
あと、index.htmlのどこにゲームを表示してほしいかということを書くために

parent: "center",

これも追加している。
表示したいdivのidをここに書く。
私はheader＞center＞footerという構造にしているので、"center"となる。
（※はじめはゲームだけしか表示しないから要らないじゃんと思ってたんだけど、DOMでボタンを表示しようとしたら、このparentの設定が無いとうまくいかなかった。罠。）

ついでだから、configを全部載せておこう。
このゲームは物理演算を使わないので、すでに項目から削除している。

var config = {
    type: Phaser.AUTO,
    width: 500,
    height: 500,
    backgroundColor : 0xffffff,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    parent: "center",
    dom: {
        createContainer: true
    },
    scene: {
        preload: preload,
        update: update,
        create: create,
    }
};

・画像の読み込み

分割して使うので、スプライトシートとしてプリロードで読み込む。
https://phaser.io/examples/v3/view/textures/sprite-sheet
creat()でadd.imageすればよい。画面の外に表示しとこ。

tomeet0 = this.add.image(-200,-200,"tomeet",0);	
//(x,y,スプライトシートの名前,何番目の画像か)

これを9まで作って、配列に入れる。

tomeetList = [tomeet0,tomeet1, ... tomeet8,tomeet9];

これで、画像を数字で比較できるようになったぞ。

・画像の表示

取り敢えずランダムに選ばれて出てきてほしい。
概要：数字をランダムで選ぶ→その数字の絵を見えるところに置く

スペースキーで配置できるようにする。

 // create()
KeySpace = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);

 // update()
if(Phaser.Input.Keyboard.JustDown(KeySpace)){
    LeftNum = Phaser.Math.Between(0,9);
    setTomeet(); 	// 選ばれた画像を設置する動作は外に出した
    console.log("Space is JustDown : " + LeftNum);
	// 念のために押された時に得た数値をコンソールにも書く
}

 // setTomeet()
 tomeetList[LeftNum].setPosition(50,50);

これでindex.hmtlにてスペースキーを押すとランダムに数字が出る。出るんだってば。
早くに大きい数字が出ると小さい数字は隠れてしまって出てないかもしれないけど、まぁリロードすれば確認できるからいい。ここは出てさえすればいいのだ。
（後でゲームの機能を作りこむときに作業するから気にしない）

同じように右にも出るようにする。
同じものが出たら困るので、左と同じものが出たらもう一度抽選することにする。

LeftNum = Phaser.Math.Between(0,9);
RightNum = Phaser.Math.Between(0,9);
while (RightNum === LeftNum){
    RightNum = Phaser.Math.Between(0,9);
}

はじめはwhileじゃなくてifで条件付けしてたんだけど、10個くらいの選択肢だと結構な頻度でかぶっちゃうみたいなのでwhileにした（怒）
まあこれでかぶることは無くなったのでヨシとする。

2020年5月12日

なんだこれ、クッソ暑いやんけ。夏だ。

・どっちをクリックしたんですか問題

このゲーム、
１．どっちをクリックしたのか
２．もう一方と比べて数値はどうなのか
を見極めなければならないわけで。
どうやろうかな……。
このトミートリストは数字が小さいほどトミーとするので、

右をクリックした
    →　右 < 左 なら正解
左をクリックした
    →　左 < 右 なら正解
そうでなければ不正解

という判定をすれば良さそう。
"画像とは別に"クリックする用のボタンを上から表示すればいい。
クリック用の枠（元ゲーム参照）を作って、クリックしたら上記の関数に働いてもらうようにする。
https://phaser.io/examples/v3/view/input/mouse/click-sprite

// ボタンの設置
LeftB =  this.add.image(145, 350, "button", 0).setInteractive();
LeftB.on("pointerdown", function (pointer) {answerL();});

ボタン用の関数も書く。

// answerL()
if(LeftNum < RightNum){
    score += 1;
}else{}

これで取り敢えずコンソールにでも表示しておけば、左が正解の時はスコアが増える！
よしよし。
右ボタン用を作ったり、もしアレだったらスコアの表示をつけてもいい。

今日はここまで。
あれっ……なんか作業した量のわりに全然進んでない気がするぞ。
まぁいいか。