スクラッチでオンラインゲームを作る⑩　退場処理を実装する

スクラッチプログラミングに挑戦している皆さん、どうも！スクラッチコーチです。

前回はクラウド変数を増やすスケールアップを実装したぞ！これで理論上は１００人でも遊べるオンラインゲームエンジンができたわけだ。最高かよ！

ここまで来たらギリギリまでクオリティを高めていきたいよね。今のままだとスクラッチを閉じた人でもゲームに表示され続けちゃうから、この問題を解決していこう。

今回の目標「退場処理を実装する」

入場処理は以前実装したよね。誰かがスクラッチゲームをプレイしたら、クラウド変数を通して検知して自分のリストにその人のデータを追加する、って感じの処理だよね。

今回はその逆だね。参加中の誰かがブラウザを閉じたり赤いボタンを押したりしたら、そのことを検知して自分のリストからその人のデータを削除するっていう処理を作るよ。入場処理の反対だから退場処理って呼ぶことにしよう。

休止中かどうかを判定する

別の人がまだプレイしているかどうか、どうやって検知しようか。

色々な方法があるけど、今回は「ある程度の長さ動かなかったら」もう遊んでない、というふうに考えるよ。

変数「休止中」を用意する

動いてない長さを知るために休止中という変数を使うよ。

動きがなかった長さを知る

ブロック定義「クローンティック」の中で、エンコード文字列を座標に反映する処理を作ったよね。

そのときに次のエンコード文字列を取得しても空白の場合に備えた「もし」ブロックを置いたことを覚えているかな？ここが空白ということは、前回と同じ座標データが送られてきたということなんだ。つまり、止まっているということだね。

ただ止まっているだけなのか、それとももう遊んでなくて動かないのか、この段階では分からないから、とりあえず変数「休止中」に１をプラスしておこう。

一定時間動いてなかったときの処理を作る

この変数「休止中」の値が合計150を超えたら、「この人は止まっているんじゃなくて、もう遊んでない（＝落ちた）んだな」と判断しよう。そのための「もし」ブロックを作り、判定の演算をハメるよ。

退場処理の中を作る

この「もし」ブロックの中が退場処理の具体的な実装になるよ。

その人のUIDデータを消す

各プレイヤーにはユニークID（UID）があるんだよね。これはほぼ絶対に他の人とは同じにならないデータなんだ。

この値をいまはリスト「★プレイヤーUID一覧」に持っているから、それを消しておこう。消すと言っても空白で置き換えるだけだよ。リストの行ごと消しちゃうとバグるから注意。

隠す

さらに隠すことで見た目上はゲームからいなくなったようにしよう。

ちょっと修正する

おっと、一箇所修正しておきたい。動きに違いはないけど、表示するブロックの場所を動画に合わせておこうと思う。直前の「もし」ブロックの中に入れておいてほしい。

テストする

右側のタブで赤いボタンを押した後、左側のタブからネコが1体消えている点に注目してほしい。

休止中を解除する

おや、止まっていた人が動き出したぞ！どうやら落ちたんじゃなくて、シンプルに止まってただけのようだね。

変数「休止中」をリセットする

この人は退場させる必要がないので、変数「休止中」のカウントをゼロに戻しておこう！

OK！これで退場処理については完了だ。

• なぜリストの行を消さずに空白で置き換えたの？

  退場した人のリスト「★プレイヤーUID一覧」を空白で置き換えたね。そのときに「リストの行を消さずに」と書いたんだけど、これには理由があるんだ。

  今ってさ、変数「プレイヤー番号」にAさんは1番目、Bさんば2番目、Cさんは3番目、みたいな感じでリスト内のどこに誰のデータが格納されているか管理してるじゃん？

  この状況でAさんが落ちたからといってリストの1行目を消すと、どうなると思う？うん、1行目を消したら2行目だったデータが1行目になって、3行目だったデータが2行目になるんだ。つまり詰めるんだよね。

  そうすると変数「プレイヤー番号」で管理している順番と実際のリスト内の順番が違ってしまって、めちゃくちゃになってしまうわけだ。

  それを防ぐために行の順番自体は維持したままにしたいから、行の削除ではなくて空白を入れておくことにしたんだよ。

リサイクル処理を作ろう

さて、ここまでで入場も退場もできて、そこそこ安定したオンラインゲームエンジンになったんだけど、完璧まではあと一歩！

このままだと人の出入りを繰り返すたびにリスト内に新しい行が追加されていって、当分は問題ないけど理論上はいつかリストの限界を超えて破綻してしまうことが予想できる。

そこで、リストが無限に増えていかないように、使ってない行があればその行を再び使うように直して、行の無限増殖を未然に防ぎたいと思う！

つまり、リサイクル活動だ！もったいない精神で実装しよう。

空白行を探す

手順としては、空白の値が入っている行がリスト「★プレイヤーUID」にあるかどうかを探して、なければ今まで通り新しい行を追加するし、あれば空白行をリサイクルするようにしたい。

そこでまずは空白行を見つけよう。手始めにブロック定義「クラウド変数を受信する」で、リスト「★プレイヤーUID一覧」の中から空白である行の番号を取得しよう。

条件分岐ブロックを追加する

その直後に、「もし〜でなければ」ブロックをスクショを見ながら追加しよう。「もし〜なら」の部分には合計４つのブロックがこの段階では入っているぞ。

空白行がなかった場合

プレイヤー番号がゼロだったら、条件式をハメよう。これは直前でリストの空白行を探したけど結果がゼロだった、つまり空白行はなかったということを意味しているよ。

空白行があった場合

空白行があれば変数「プレイヤー番号」にはゼロより大きい値が入っている。それは空白行の場所を示しているので、リストに変数「値」（これにはプレイヤーUIDが入ってる）を格納してリサイクル完了だ。

テスト

右タブで赤い停止ボタンを押して一回落ちたら、左タブからは消えている。画像が粗くて数字は見えないけど、左下のリスト「★プレイヤーUID一覧」も空白になっている。

そのあとに再び右タブで緑の旗を押すと、左タブのリストの空白行に数字が入っている様子が見て取れる。前まではどんどんリストに新しい行が増えていたけど、今回は行は増えずに空白行のリサイクルに成功している点が進歩だ！

大テストをする！

よぉし！やりたいことはだいたいできた。よくここまで付いてきてくれたね！キミとコーディングできたことを誇りに思う。（死亡フラグｗ）

ここでより野心的なテストに挑戦したいと思う。

自プレイヤーに処理を追加する

久しぶりにスプライト「自プレイヤー」に処理を追加するぞ。

自プレイヤーをクリックする

こちら。

マウスが押されたときだけ場所を変える

テストしやすさのためにマウスが押されたタイミングだけ場所が移動するようにするよ。

ぐるぐる回るようにする

ネコがその場でぐるぐる回るよう処理を自動化するよ。

５歩動かす

10度回す

回転しないようにする

見やすさのため。

色を変える

自プレイヤーだけ色が変わって、他プレイヤーは普通のスクラッチキャットにする。

タブを並べてテストする

これで僕の環境では４つ並べてみた。パソコンのスペックによっては４つは厳しいかもしれないから、２つか、行けそうなら３つタブを並べてテストしてみると面白いぞ！

こんな感じの動きができたら、誰かを赤いボタンで止めてしばらく待とう。そしたらリストの行が空白になるよね！それを確認できたら再び緑の旗を押して再開してみよう……。空白行がリサイクルされたら大成功！おめでとう！

次回へ

いやぁ素晴らしいオンラインゲームエンジンに仕上がったね。これを使えばどんなゲームもマルチプレイヤーすることが可能だぞ。夢が広がる……。

この後はまた動画の更新を待って、記事も追っかけ解説していく！乞うご期待！あーでも、もう待てないって感じに温まってるなら、待ってちゃダメだ！どんどん自分の作品をオンライン化してしまおう！