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

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

2020年5月18日

毎日ゲーム作ってて気がくるくるしてきたので、しばらくゲームで遊ぶばっかりの日々を過ごした。
精神が正常化してきたので続きの作業をする。`ヮ´ﾜﾊﾊ

・ゲーム中のクリックを整理する

調査の結果、image.setInteractiveでボタン化したオブジェクトは、Alphaが0だと非アクティブ化することが判明。
色つきの四角を仮置きして、見えなくするために透明すると動かなくなるっていうワケ……マジ？
兎に角、この理屈がわかったことにより、ボタンの整理ができるというものだ。ワハハ`ヮ´

・スタートボタンを押す
　→　選択肢の表示
　→　全面ボタンの非アクティブ化

・左右どちらかを押す
　→　○×の表示
　→　全面ボタンのアクティブ化

・全面ボタンを押す
　→　○×の非表示
　→　選択肢の表示
　→　全面ボタンの非アクティブ化

アクティブ/非アクティブはsetAlpha()で1にしたり0にしたりすればよい。
よいな。よし。できた。

これで大まかな仕組みはできたので、しばらくは画像制作のターンとなる。
うわーめんどくさい。でも自分で準備したいから頑張るしかない。

2020年5月20日

ぜぇぜぇ、選択肢の絵を描いてきたぞ。あほげーの時、二日で作ったはずなんだけど、こんなに大量に絵を描いたって本当か？　信じられん……。

ということで絵を描いてきたら選択肢が全部で12個になったので、リストを増やしたり画像を差し替えたりウンヌンする。

ウンヌン！　ウンヌン！　ウンヌン！
（※効果音のみでお送りしております）

これでよし。
表示してみる。それぞれの画像をちょっと修正したい気持ちがムクムクしてくるが、今はその時ではない……。

フォントを導入したりしようかといろいろ試してみたけど、変動する表記は数字だけなので止めることにした。
日本語フォントは重いし……。
どうするのかはまたあとで考えよう。

・ゲームのトップ画面と、フェーズ移行について

ゲームの中身はできたので、そのほかの大まかな流れについて考える時が来た。

タイトル画面
↓
説明文
↓
ゲーム
↓
結果発表
↓
タイトル画面に戻る

フェーズ分けはこんな感じかな。
今はゲームの部分しかない。

シーンを増やすという手もあるが、まだよくわかってないので、フラグ管理でどうにかすることにした。
新しくgamePhaseNumというintを導入する。
これで、今どのフェーズにいるのかを管理し、全面クリックがどのような挙動をするのかを決める。

上から順番に数字を割り振って、全部で4フェーズ。
gamePhaseNumを使って、今どの場面なのかをチェックする関数を作る。

// create()
// 全面クリック用のボタンを作る
AllArea =  this.add.image(250, 250, "AllArea").setInteractive();
AllArea.on("pointerdown", function (pointer) {Checking();});

function Checking(){
    if(gamePhaseNum === 0){
        // タイトル中にクリックされたら起こることを書く
    }else if(gamePhaseNum === 1){
        // 説明文表示中に（以下略
        // ゲーム最初の設置を行う
    }else if(gamePhaseNum === 2){
        // ゲーム中に…（ここは5/18の内容が入るところ）
    }else if(gamePhaseNum === 3){
        // 結果発表……
    }
}

画面をクリックすると次のフェーズに移る感じ。
ゲーム中はAllAreaのAlphaを0にしておけば反応しない。よしよし。

いや～、今日はいっぱい頑張たな。
続きはまた明日。