スクラッチでオンラインゲームを作る⑥ 別プレイヤーを検知する

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

前回(ぜんかい)はバッファリングを実装(じっそう)して欠落(けつらく)のない動(うご)きの再現(さいげん)に成功(せいこう)したぞ！これ↓がバッファリングに成功(せいこう)した状態(じょうたい)だ。

変数(へんすう)「★送信(そうしん)用(よう)データ」をエンコードしてクラウド変数(へんすう)１に一括(いっかつ)でセットしている様子(ようす)が見(み)て取(と)れるね。ここからは他(た)プレイヤーとのクラウド変数(へんすう)の共有(きょうゆう)を意識(いしき)した実装(じっそう)を進(すす)めていく。ややこしくなってきたねぇ！

今回(こんかい)の目標(もくひょう)「UIDを実装(じっそう)して別(べつ)プレイヤーを検知(けんち)する」

自分(じぶん)と他人(たにん)を区別(くべつ)するためにUID（＝ユニークID）を実装(じっそう)していこう。これを使(つか)えば誰(だれ)がクラウド変数(へんすう)を更新(こうしん)したのか分(わ)かるようになるんだ。今(いま)のままだと、別(べつ)タブで同(おな)じ作品(さくひん)を開(ひら)いてみるとタブAでもタブBでもクラウド変数(へんすう)1を更新(こうしん)するため、誰(だれ)の座標(ざひょう)データなのか識別(しきべつ)不能(ふのう)な状態(じょうたい)なんだ。そこで今回(こんかい)は、クラウド変数(へんすう)1に渡(わた)すデータにUIDというプレイヤーを識別(しきべつ)できるデータを追加(ついか)していきたいというわけ。座標(ざひょう)以外(いがい)のデータをクラウド変数(へんすう)に渡(わた)す練習(れんしゅう)にもなるよ。まぁ方法(ほうほう)は座標(ざひょう)のときと同(おな)じ！エンコードしてクラウド変数(へんすう)にセットして、受(う)け取(と)り側(がわ)ではデコードしてデータを分解(ぶんかい)して使(つか)うよ。おっと、ただそのまえに１つやることがあるんだ。そのあたりも順番(じゅんばん)に見(み)ていこう。今回(こんかい)やることをざっくりまとめるとこう↓

• 新(あたら)しいリスト「★クラウドデータ」を作(つく)る
• 長(なが)い数字(すうじ)を文字(もじ)化(か)する
• プレイヤーUIDを送(おく)る
• プレイヤーUIDを受(う)け取(と)る
• プレイヤーUIDを調(しら)べる

こんな感(かん)じで進(すす)めていくよ。

直前(ちょくぜん)のクラウド変数(へんすう)の中身(なかみ)を保持(ほじ)するリストを作(つく)る

このあとの実装(じっそう)で、クラウド変数(へんすう)が更新(こうしん)されたかどうかを調(しら)べる工(こう)程(ほど)がある。そこで直前(ちょくぜん)のデータと最新(さいしん)のデータを比較(ひかく)しないといけないので、直前(ちょくぜん)のデータを保存(ほぞん)しておくためのリストを用意(ようい)したいと思(おも)う。

リスト「★クラウドデータ」を作(つく)る

このリストに直前(ちょくぜん)のデータを追加(ついか)していく。

初期(しょき)化(か)する

クラウド変数(へんすう)の値(ね)をクラウドデータに保管(ほかん)しておく

これでこのあと、クラウド変数(へんすう)1の中身(なかみ)が前(まえ)のティックから変(か)わってるかどうかを判断(はんだん)するのに役立(やくだ)つ！

長(なが)い数字(すうじ)を比較(ひかく)する

しょぼーんってなるけど、ここでみんなにスクラッチの困(こま)った仕様(しよう)を１つご紹介(しょうかい)しないといけない。それは長(なが)い数字(すうじ)の比較(ひかく)に関(かん)するものだ。例(たと)えばここに250ケタの超(ちょう)長(なが)い数字(すうじ)があったとする。（実際(じっさい)クラウド変数(へんすう)に色(いろ)んなデータをエンコードしまくって入(い)れてると長(なが)くなることはある）これはテストだからみんなはやらなくてもいいけど、気(き)になったらためしにやってみ。

こういう長(なが)い数字(すうじ)を比較(ひかく)してみたいと思(おも)う。

うん、ふつうに「値(ね) = 値(ね)」はTRUE（真(しん)）だね！じゃあこれは？↓

「値(ね) ＝ （値(ね) + 1）」だね。いやいや、そりゃあFALSE（偽(にせ)）でしょ。当(あ)たり前(まえ)じゃん。こんなん誰(だれ)でも分(ぶん)か……

おおおおおい！？なんかTRUE（真(しん)）ってなってるんですけど！？絶対(ぜったい)違(ちが)うじゃんか……。WHY！？スクラッチピーポー！【悲報(ひほう)】じつはスクラッチさん、長(なが)い数字(すうじ)が理解(りかい)できません↓

250ケタの値(ね)に１を加算(かさん)すると、スクラッチの限界(げんかい)を超(こ)えてしまって理解(りかい)不能(ふのう)な数字(すうじ)になってしまうんです……。そしてこれを比較(ひかく)に使(つか)うとさっき見(み)た通(とお)りなんでもTRUEになっちゃう……。しかもエラーにもならないっていうバグの温床(おんしょう)でもある。アンビリーバボーだぜ！

何(なに)が困(こま)るの？

これで何(なに)が困(こま)るのかって言(い)うと、このあとの実装(じっそう)で困(こま)る。このあとクラウド変数(へんすう)1の値(ね)が変更(へんこう)されたかどうかを調(しら)べていくんだけど、そのときに直前(ちょくぜん)の値(ね)と現在(げんざい)の値(ね)を比較(ひかく)したいんだ。でももしデータが長(なが)すぎてスクラッチの限界(げんかい)を超(こ)えてたら、なんでもかんでもTRUEになっちゃうんだよね。つまり直前(ちょくぜん)の値(ね)と現在(げんざい)の値(ね)は常(つね)に同(おな)じ（＝変更(へんこう)なし）って判定(はんてい)になってしまう。これでは正(ただ)しく動(うご)かないよね。これを未然(みぜん)に防(ふせ)ぐために策(さく)を講(こう)じておきたいと思(おも)うぜ。

数字(すうじ)を文字(もじ)に明示的(めいじてき)に直(なお)す

長(なが)い数字(すうじ)が理解(りかい)できないなら長(なが)い文字(もじ)にすればいいじゃない？という一見(いっけん)するとマリー・アントワネットばりの理不尽(りふじん)な見解(けんかい)（※）だけど、スクラッチに関(かん)しては正解(せいかい)なんだ。明示的(めいじてき)に数字(すうじ)を文字(もじ)に直(なお)す方法(ほうほう)はカンタン。文字(もじ)と数字(すうじ)をくっつければOK。

これはアルファベットの「c」と変数(へんすう)「値(ね)」をくっつけてから比較(ひかく)してる。（c + 値(ね)）=（c + （値(ね) + 1））こうすると答(こた)えはFALSE（偽(にせ)）になるから正解(せいかい)だね。ふぅ！あっぶね。

文字(もじ)化(か)する

じゃあクラウド変数(へんすう)1を明示的(めいじてき)に文字(もじ)にしよう。くっつける文字(もじ)は何(なん)でもいいんだけど、クラウド（Cloud）の「c」にしとこうか。

テストする

うん、cがついてて文字(もじ)になってるね。文字(もじ)だからもう計算(けいさん)には使(つか)えないけど、これを計算(けいさん)する予定(よてい)はないので問題(もんだい)ない！

別(べつ)タブでテストしてみる

このタイミングでまたタブを２つ開(ひら)いて隣(となり)同士(どうし)に並(なら)べて動(うご)きを確認(かくにん)しておこう。

この動画(どうが)を拡大(かくだい)してみてみて。タブ左(ひだり)が動(うご)いてるときにタブ右(みぎ)のクラウド変数(へんすう)1がどんどん更新(こうしん)されてるよね。これはタブ左(ひだり)からの座標(ざひょう)データと、タブ右(みぎ)自身(じしん)の座標(ざひょう)データが交互(こうご)にクラウド変数(へんすう)1を更新(こうしん)しているからなんだ。つまり、２つあるデータのうち１つはタブ左(ひだり)のもの、もう１つはタブ右(みぎ)のものという状態(じょうたい)だね。で、どのデータがどっちのデータなのか、それを明(あき)らかにするために冒頭(ぼうとう)で伝(つた)えたUIDというものを実装(じっそう)していくよ。

UIDを実装(じっそう)する「送信(そうしん)編(へん)」

UID自体(じたい)はランダムな数字(すうじ)の羅列(られつ)にするよ。たとえば214843みたいな意味(いみ)のない、だけど滅多(めった)に重複(じゅうふく)しない数字(すうじ)。

変数(へんすう)「★自(より)プレイヤーUID」を作(つく)る

すべてのスプライト用(よう)に新(あたら)しい変数(へんすう)を作(つく)ろう。

初期(しょき)化(か)する

メッセージ「クラウド - セットアップ」を受(う)け取(と)ったところに乱数(らんすう)1から9,999,999（９が７個(こ)）で初期(しょき)化(か)しよう。

これで滅多(めった)に重複(じゅうふく)しないでしょう！こんな感(かん)じ↓

エンコード文字列(もじれつ)の先頭(せんとう)に追加(ついか)する

今(いま)まではXとYの座標(ざひょう)データしかエンコードしてなかったけど、これからは最初(さいしょ)にUIDをエンコードして入(い)れるようにするよ。ブロック定義(ていぎ)「同期(どうき)する」内(うち)にブロックを追加(ついか)しよう。

これで変数(へんすう)「エンコード文字列(もじれつ)」に自(より)プレイヤーUIDがエンコードされて追加(ついか)されたね。ちょっと見(み)てみようか。

バッチリ。エンコードが正(ただ)しく機能(きのう)してて、なんか気持(きも)ちいい！

UIDを実装(じっそう)する「受信(じゅしん)編(へん)」

自分(じぶん)から送(おく)るデータにプレイヤーUIDを付(つ)けることには成功(せいこう)した。次(つぎ)はクラウド変数(へんすう)をデコードしてプレイヤーUIDを受(う)け取(と)って、それが自分(じぶん)のものか別(べつ)プレイヤーのものかを判定(はんてい)するところだ。っとそのまえに１つ変更(へんこう)したいことがある。

ブロック定義(ていぎ)「同期(どうき)する」の名前(なまえ)を変(か)える

同期(どうき)するだと送信(そうしん)する意味(いみ)も受信(じゅしん)する意味(いみ)も含(ふく)まれてて、ちょっとアイマイだから名前(なまえ)を変(か)えておきたい。ブロック定義(ていぎ)「同意(どうい)する」を右(みぎ)クリックして編集(へんしゅう)を選(えら)ぼう。

明確(めいかく)に「クラウド変数(へんすう)を送信(そうしん)する」に変更(へんこう)しておこうかな！

ブロック定義(ていぎ)「クラウド変数(へんすう)を受信(じゅしん)する」を作(つく)る

これの対(たい)になるブロック定義(ていぎ)「クラウド変数(へんすう)を受信(じゅしん)する」を作(つく)っていこう。引数(ひきすう)には☁《くも》番(ばん)号(ごう)と更新(こうしん)データの２つを取(と)るようにしよう。ちなみに☁はクラウドっていう意味(いみ)を込(こ)めてる。

使用(しよう)する

メッセージ「クラウド - ティック」を受(う)け取(と)ったタイミングで使(つか)おう。

１つ目(め)の引数(ひきすう)に「1」を入(い)れたね。1はクラウド変数(へんすう)1を意味(いみ)するよ。別(べつ)チュートリアルでこの1が持(も)つ意味(いみ)が明(あき)らかになるから、今(いま)はとりあえず1はクラウド変数(へんすう)1なんだな、って認識(にんしき)しておいてね。２つ目(め)の引数(ひきすう)にはクラウド変数(へんすう)を文字(もじ)化(か)したものを入(い)れるよ。さっきリスト「★クラウドデータ」に入(い)れた際(さい)に文字(もじ)化(か)した処理(しょり)と全(まった)く同(おな)じ演算(えんざん)「c + クラウド変数(へんすう)1」だよ。よし、じゃあブロック定義(ていぎ)「クラウド変数(へんすう)を受信(じゅしん)する」の中(なか)を作(つく)り込(こ)んでいこう！

変更(へんこう)がなければ何(なに)もしない

もしクラウド変数(へんすう)の中身(なかみ)が直前(ちょくぜん)の値(ね)と変(か)わってないなら何(なに)もしないよ。とりま「もし」ブロックをカチッと。

条件(じょうけん)式(しき)を作(つく)る

次(つぎ)に、クラウド変数(へんすう)の中身(なかみ)を比較(ひかく)するにはリスト「★クラウドデータ」が役立(やくだ)つ。これはクラウド変数(へんすう)の直前(ちょくぜん)の値(ね)が格納(かくのう)されているリストだったね。そして最新(さいしん)の値(ね)は２つ目(め)の引数(ひきすう)「更新(こうしん)データ」に入(はい)ってる。だからこの２つを比較(ひかく)する演算(えんざん)を作(つく)ってみよう。

これを条件(じょうけん)式(しき)にハメよう。

このスクリプトを止(と)める

で、更新(こうしん)されてないなら何(なに)もしなくてOKと。

変更(へんこう)があれば★クラウドデータを更新(こうしん)する

もしも変更(へんこう)があったら直前(ちょくぜん)のデータを最新(さいしん)のデータで更新(こうしん)しよう！

テスト

クラウド変数(へんすう)1とクラウドデータの値(ね)が同期(どうき)されるようになったね！

良(よ)きかな。

プレイヤーUIDを取得(しゅとく)する

更新(こうしん)されたデータが誰(だれ)のものなのか調(しら)べていこう！なにげにここはエキサイティングに感(かん)じる！だって他(ほか)の人(ひと)がいるかどうかってオンラインゲームにとって重要(じゅうよう)なことだもんね。どうやって調(しら)べるのか！？そりゃデコードっしょ。デコードしてプレイヤーUIDを取得(しゅとく)していくぞ！

エンコード文字列(もじれつ)に値(ね)を入(い)れる

デコードするためにはまず変数(へんすう)「エンコード文字列(もじれつ)」にデコード対象(たいしょう)となるデータを入(い)れる必要(ひつよう)があったね。

エンコード文字(もじ)の順番(じゅんばん)を指定(してい)する

さて、この更新(こうしん)データの中身(なかみ)ってなんだっけ？さっき★クラウドデータに入(い)れた値(ね)を見(み)てみると「c78280511206...」ってなってるね。前(まえ)はエンコード文字(もじ)の順番(じゅんばん)は素直(すなお)に1文字(もじ)目(め)から始(はじ)めてたけど、今(いま)って文字(もじ)化(か)で使(つか)った「c」がいるからエンコードを始(はじ)めるのは２文字(もじ)目(め)からじゃないとダメだね。

そうと分(わ)かればカンタン。

マジックナンバーになってしまうのが気持(きも)ち悪(わる)いけどとりあえずOK。

• マジックナンバーとは？

  マジックナンバーというのはカンタンに言うと「パッと見では何を意味しているのか分からない数字」のこと。例えばいきなり「変数を10ずつ変える」とあったら「この10って何？いったいどこから来たの？勝手に変えていいの？」とよく分からないけど、10をジャンプ力という変数に入れておけば「10はジャンプ力ってことね」と見ただけで分かるようになる。

  マジックナンバーが多いプロジェクトは、リミックス難易度が高くなりがち。後日、自分で修正するときも困るから、どこかのタイミングでマジックナンバーを変数化しておくと便利。

デコードする

ここはブロック定義(ていぎ)を使(つか)い回(まわ)す！再(さい)利用(りよう)、最高(さいこう)！

これで変数(へんすう)「値(ね)」にはプレイヤーUIDが入(はい)っていることになるね！

誰(だれ)のデータなのか調(しら)べる

いよいよ誰(だれ)のプレイヤーUIDが送(おく)られてきたのか調(しら)べるぞぉ！

バリデーションする

っとそのまえにデータが壊(こわ)れていたり、自分(じぶん)自身(じしん)のUIDだったりしたら処理(しょり)を止(と)めるようにガード処理(しょり)を作(つく)っておこう。こういうデータの正当性(せいとうせい)を調(しら)べる作業(さぎょう)をバリデーションって呼(よ)んだりする。

条件(じょうけん)ブロックを置(お)いておく

とりあえず「もし」ブロックと処理(しょり)を止(と)めるブロックを置(お)いておこう。

条件(じょうけん)式(しき)を作(つく)る

処理(しょり)を止(と)める条件(じょうけん)１はデータが壊(こわ)れている場合(ばあい)。1未満(みまん)みたいな値(ね)だったら壊(こわ)れていると判断(はんだん)しよう。

壊(こわ)れない、って思(おも)っててもスクラッチは誰(だれ)でも中(なか)を改変(かいへん)できるからね。ひょっとしたら誰(だれ)かが誤(あやま)った変更(へんこう)を加(くわ)えて壊(こわ)れた値(ね)が飛(と)んでくるなんてことも十分(じゅうぶん)ありえる。あとは自分(じぶん)のUIDだった場合(ばあい)だね。

このどちらかであったら処理(しょり)を止(と)めるってしておこう。最終的(さいしゅうてき)にはこうなる↓

よし、締(し)めのテストに移(うつ)ろうか。

プレイヤー番(ばん)号(ごう)を作(つく)る

テストも兼(か)ねて変数(へんすう)「プレイヤー番(ばん)号(ごう)」を作(つく)るよ。あとで実装(じっそう)でも使(つか)うから一石二鳥(いっせきにちょう)だよ。

初期(しょき)化(か)する

空白(くうはく)で初期(しょき)化(か)するよ。

配置(はいち)する

あとで変(か)えるけど、いったん変数(へんすう)「値(ね)」を代入(だいにゅう)して様子(ようす)を見(み)よう。

テスト

タブを並(なら)べて動(うご)かしてみよう！

おおお！タブ左(ひだり)のプレイヤーUIDが、タブ右(みぎ)の変数(へんすう)「プレイヤー番(ばん)号(ごう)」に入(はい)ってるね。逆(ぎゃく)も同(おな)じだ！完璧(かんぺき)ぃ！これで他(ほか)のプレイヤーの座標(ざひょう)データを処理(しょり)する準備(じゅんび)が整(ととの)ったというわけだ！イエス！

次回(じかい)へ

今回(こんかい)はプレイヤーUIDを実装(じっそう)して別(べつ)プレイヤーを検知(けんち)するところが完成(かんせい)したね。オンラインゲームにとってまさに重要(じゅうよう)なキーポイントだったと思(おも)うよ。今回(こんかい)やったことをカンタンに振(ふ)り返(かえ)ろう。

• 新(あたら)しいリスト「★クラウドデータ」を作(つく)って、直前(ちょくぜん)のクラウド変数(へんすう)の値(ね)を保持(ほじ)できるようにした
• 長(なが)い数字(すうじ)を文字(もじ)化(か)して、正(ただ)しくデータの比較(ひかく)ができるようにした
• プレイヤーUIDをエンコード文字列(もじれつ)の先頭(せんとう)に追加(ついか)した
• プレイヤーUIDをデコードして自分(じぶん)以外(いがい)のプレイヤーの存在(そんざい)を検知(けんち)できるようにした

次(つぎ)からは別(べつ)プレイヤーのデータを処理(しょり)して、自分(じぶん)の画面(がめん)に別(べつ)プレイヤーを表示(ひょうじ)させるところを実装(じっそう)しよう。もちろん表示(ひょうじ)するだけじゃなくて動(うご)きも同期(どうき)させるぞ！ワクワクが止(と)まんねぇ！また２，３日(にち)で更新(こうしん)するので待(ま)っててね。