スクラッチでオンラインゲームを作る① クラウド変数の使い方

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

基本的(きほんてき)に１人(にん)でプレイするスクラッチゲームが多(おお)いけど、ときどきマルチプレイ対応(たいおう)しているゲームもあるよね。スクラッチのマルチプレイにはいくつか種類(しゅるい)があるんだ。たとえば同(おな)じパソコンで１つのキーボードを友達(ともだち)と一緒(いっしょ)に使(つか)ってプレイする２Pや３P対戦(たいせん)もの。これは一緒(いっしょ)にワイワイしながら盛(も)り上(あ)がれるから学校(がっこう)の休(やす)み時間(じかん)とか家(いえ)で遊(あそ)ぶ日(ひ)とかは最高(さいこう)だよね！ただまぁ、この場合(ばあい)は同(おな)じ場所(ばしょ)にいないとダメだけどよくあるオンラインゲームみたいに別(べつ)の場所(ばしょ)でプレイしている誰(だれ)かと一緒(いっしょ)にゲームがしたいっていう気持(きも)ちもあるよね。少(すく)なくとも僕(ぼく)はあった、めちゃめちゃあった。そこで登場(とうじょう)するのがクラウド変数(へんすう)を使(つか)ったスクラッチオンラインゲームだ！今回(こんかい)のチュートリアルシリーズでは、スクラッチでオンラインゲームを作(つく)る方法(ほうほう)を見(み)ていくから、最終的(さいしゅうてき)にはキミ自身(じしん)でオンラインゲームを作(つく)れるようになるぞ！くぅぅぅぅう！いいんですか？！いいんです！

今回(こんかい)の目標(もくひょう)は「同期(どうき)処理(しょり)」

今回(こんかい)の目標(もくひょう)は、同(おな)じプロジェクトを２つのタブで開(ひら)いて、片方(かたほう)を動(うご)かすともう片方(かたほう)でも同(おな)じ動(うご)きをするという処理(しょり)、専門的(せんもんてき)に言(い)うと同期(どうき)処理(しょり)を実装(じっそう)していくことだ！

左側(ひだりがわ)のスクラッチキャットが動(うご)くことで、右側(みぎがわ)のスクラッチキャットも動(うご)いている様(さま)が見(み)て取(と)れると思(おも)う！これを作(つく)るぞ！必要(ひつよう)なもの、それは気合(きあい)だクラウド変数(へんすう)だ！

クラウド変数(へんすう)を用意(ようい)する

クラウド変数(へんすう)を有効(ゆうこう)化(か)するのはカンタン。でもクラウド変数(へんすう)には特別(とくべつ)なルールがいくつかあるから、一緒(いっしょ)に見(み)ていこう。

ルール① New Scratcherは使(つか)えない

スクラッチアカウントには「New Scratcher」と「Scratcher」の２種類(しゅるい)があって、登録(とうろく)したばかりの人(ひと)はNew Scratcherっていう状態(じょうたい)なんだ。Scratcherになるのはわりと早(はや)いしカンタン。プロジェクトを公開(こうかい)したり、リミックスしたり、誰(だれ)かの作品(さくひん)にハートを付(つ)けたりしてれば自然(しぜん)とScratcherになってるから、そこまですごい制約(せいやく)ではないよ。

ルール② 変数(へんすう)を新(あたら)しく作(つく)るときだけ有効(ゆうこう)化(か)できる

変数(へんすう)を作(つく)って、クラウド変数(へんすう)（サーバーに保存(ほぞん)）というチェックをONにしよう。

これだけでクラウド変数(へんすう)の有効(ゆうこう)化(か)は終(お)わり！ここまではなんてことないね。たったこれだけで、キミの作品(さくひん)を見(み)るすべての人(ひと)がこの変数(へんすう)の値(ね)を共有(きょうゆう)できるようになるんだ。すごいよね！オラわくわくすっぞ！

ルール③ 数字(すうじ)しか入(い)れられない

クラウド変数(へんすう)を使(つか)えばチャットが作(つく)れるじゃん！と思(おも)うかもしれないけど、クラウド変数(へんすう)には数字(すうじ)しか入(はい)らないっていうルールがあるんだ。でも数字(すうじ)を駆使(くし)して楽(たの)しいオンラインゲームを作(つく)る方法(ほうほう)があるから安心(あんしん)してね。

ルール④ 雲(くも)マークが先頭(せんとう)に付(つ)く

よっしゃ！クラウド変数(へんすう)を見(み)てみよう。こんなかんじで雲(くも)が付(つ)いてるよね。これがクラウド変数(へんすう)である証(あかし)なんだ。

ルール⑤ 1つの作品(さくひん)に付(つ)き10個(こ)まで

クラウド変数(へんすう)は10個(こ)までしか作(つく)れないっていうルールもある。

ルール⑥ 値(ね)は最大(さいだい)2560文字(もじ)まで

1つのクラウド変(へん)数(かず)に入(はい)る値(ね)は最大(さいだい)2,560文字(もじ)までっていうルールもあるよ。巨大(きょだい)なプロジェクトを作(つく)る予定(よてい)の人(ひと)は気(き)をつけてね。

クラウド変数(へんすう)を使(つか)ってみる

堅苦(かたくる)しいことは終(お)わりにして、さっそく使(つか)ってみよう！

クリックしたら加算(かさん)する

とりあえずスクラッチキャットをクリックしたらクラウド変数(へんすう)1が加算(かさん)されるようにしてみよう。

コレに続(つづ)けて加算(かさん)用(よう)のブロックを置(お)こう。普通(ふつう)の変数(へんすう)と同(おな)じブロックで加算(かさん)できるよ。

テスト1

まぁそりゃ成功(せいこう)するよねｗ肝心(かんじん)なのはこの値(ね)が別(べつ)の人(ひと)とも共有(きょうゆう)できてるかどうかだよね。

テスト2

別(べつ)の人(ひと)と共有(きょうゆう)できているかどうかを調(しら)べるといっても、本当(ほんとう)に別(べつ)のアカウントを用意(ようい)する必要(ひつよう)はないんだ。単純(たんじゅん)に別(べつ)のブラウザ（タブ）で同(おな)じ画面(がめん)を開(ひら)けばOK。

セーブしよう

とりまセーブしておこう。WindowsならCtrl + S、MacならCmd + Sで保存(ほぞん)できるよ。「共有(きょうゆう)する」は押(お)さなくてもOKだよ。

プロジェクトページを開(ひら)く

エディタではなくてプロジェクトページに移動(いどう)しよう。

URLをコピーする

ブラウザのURLを選択(せんたく)してコピーしよう。WindowsならCtrl + C、MacならCmd + Cでコピーできるよ。

新(あたら)しいタブを開(ひら)く

ブラウザで新(あたら)しいタブを開(ひら)くよ。僕(ぼく)はChromeだから、ひょっとしたらみんなと画面(がめん)が違(ちが)うかもしれないけど、EdgeやSafariならだいたい同(おな)じような操作(そうさ)でいいはず。

URLをペーストする

さっきコピーしておいたURLをペーストするよ。WindowsならCtrl + V、MacならCmd + Vだよ。

これでEnterエンターキーを押(お)せば同(おな)じページが開(ひら)くよ。

タブを隣(となり)同士(どうし)に並(なら)べる

タブを掴(つか)んでドラッグすると、自由(じゆう)に動(うご)かすことができるんだ。ブラウザの端(はし)っこをドラッグすればサイズも変(か)えることができる。適当(てきとう)でいいのでだいたい隣(となり)にくるように配置(はいち)してみよう。

クリックしてみよう！

新(あたら)しい方(ほう)も緑(みどり)の旗(はた)を押(お)して、どっちでもいいのでスクラッチキャットをクリックしてみよう！

ちょっとラグいけど、連動(れんどう)して値(ね)が変(か)わってる様子(ようす)が分(わ)かるね！ちょっと専門的(せんもんてき)に言(い)うとこの状態(じょうたい)を同期(どうき)が取(と)れてるとか同期(どうき)してるとかって言(い)ったりする。このラグはバグじゃないんだ。クラウド変数(へんすう)は同期(どうき)する際(さい)に0.1秒(びょう)だけラグが生(しょう)じるっていう仕様(しよう)なんだ。だからこのラグも踏(ふ)まえて作(つく)っていくことになるよ。

座標(ざひょう)をクラウド変(へん)数(かず)に入(い)れる

よし！基本的(きほんてき)なクラウド変数(へんすう)の同期(どうき)処理(しょり)について見(み)れたから、もっと実践的(じっせんてき)なものも作(つく)っていこう！次(つぎ)はX座標(ざひょう)とY座標(ざひょう)をクラウド変数(へんすう)に入(い)れて、値(ね)の同期(どうき)だけではなくて動(うご)きも同期(どうき)させてみよう。

クリック処理(しょり)は消(け)す

これはもう使(つか)わないから消(け)しておこう。

スクラッチキャットをマウスと一緒(いっしょ)に動(うご)くようにする

テストをカンタンにするために、まずはマウスと一緒(いっしょ)にスクラッチキャットが動(うご)くようにしておこう。

ずっとブロックを置(お)く

「マウスポインターへ行(い)く」ブロックを置(お)く

サイドのブロックパレットにあるときは「どこかの場所(ばしょ)へ行(い)く」ブロックと表示(ひょうじ)されているものを配置(はいち)しよう。クリックして選択肢(せんたくし)を表示(ひょうじ)させると、マウスのポインターという項(こう)目(め)があるので選(えら)ぶ。

テスト

良(よ)さそうだね。

クラウド変数(へんすう)2を作(つく)る

X座標(ざひょう)とY座標(ざひょう)の２つを入(い)れたいから、もう１つクラウド変数(へんすう)を用意(ようい)しておこう！

クラウド変数(へんすう)に座標(ざひょう)を入(い)れる

X座標(ざひょう)をクラウド変数(へんすう)1に、Y座標(ざひょう)をクラウド変数(へんすう)2に入(い)れていくよ。座標(ざひょう)データは「見(み)た目(め)」のところにあるよ。

X座標(ざひょう)をクラウド変数(へんすう)1に入(い)れる

Y座標(ざひょう)をクラウド変数(へんすう)2に入(い)れる

テスト

うん、大丈夫(だいじょうぶ)そうだね。

受(う)け取(と)る側(がわ)の処理(しょり)を作(つく)る

さっきみたいに２つのタブを隣(となり)同士(どうし)に並(なら)べて、左(ひだり)タブのスクラッチキャットを動(うご)かしたら、右(みぎ)タブのスクラッチキャットも動(うご)くようにしたい。ここまでは座標(ざひょう)をクラウド変数(へんすう)にセットする処理(しょり)だったよね。これを送信(そうしん)処理(しょり)って仮(かり)に呼(よ)ぼうか。座標(ざひょう)　→　クラウド変数(へんすう) （送信(そうしん)処理(しょり)）こんどは逆(ぎゃく)に受信(じゅしん)処理(しょり)も作(つく)ってテストしたいってこと。クラウド変数(へんすう)　→　座標(ざひょう) （受信(じゅしん)処理(しょり)）作戦(さくせん)としては、数字(すうじ)キーの「２」を押(お)したら送信(そうしん)処理(しょり)を止(と)めて受信(じゅしん)処理(しょり)を始(はじ)める、っていう感(かん)じでコーディングしていきたい。やってみよう！

数字(すうじ)の２が押(お)されたら

２が押(お)されたら受信(じゅしん)処理(しょり)が始(はじ)まるようにする。

他(ほか)の処理(しょり)を止(と)める

まず送信(そうしん)処理(しょり)を止(と)めよう。

受信(じゅしん)処理(しょり)のループを置(お)く

受信(じゅしん)処理(しょり)用(よう)の「ずっと」ブロックを置(お)こう。

X座標(ざひょう)にクラウド変数(へんすう)1をセットする

いよいよ同期(どうき)処理(しょり)のメイン部分(ぶぶん)だ！

Y座標(ざひょう)にクラウド変数(へんすう)2をセットする

同(おな)じようにY座標(ざひょう)も！

テスト！

学校(がっこう)のテストと違(ちが)ってプログラミングのテストってワクワクするぜ！

その前(まえ)にリロード

テストする前(まえ)に右(みぎ)に置(お)いたタブはブラウザをリロードしておこう。

実施(じっし)！

やってみよう！

1. 右側(みぎがわ)のタブで数字(すうじ)キーの「２」を押(お)す
2. 左側(ひだりがわ)のタブでマウスを動(うご)かしてみる

よっしゃあ！さぁ叫(さけ)ぼう！「こいつ……動(うご)くぞ！」（※）

次回(じかい)

スクラッチキャットの同期(どうき)処理(しょり)が完成(かんせい)した。しかしお気(き)づきだろうか。右側(みぎがわ)のスクラッチキャットがカクカクしすぎじゃね！？そうなんだよ。この理由(りゆう)は「クラウド変数(へんすう)は同期(どうき)するのに0.1秒(びょう)かかる」っていう仕様(しよう)にあるんだ。いまクラウド変数(へんすう)を2つ使(つか)ってXとYを同期(どうき)してるよね。裏側(うらがわ)の処理(しょり)を簡略(かんりゃく)化(か)して書(か)くとこうなってる↓左側(ひだりがわ)のタブからクラウド変数(へんすう)1を送信(そうしん)する　→　0.1秒(びょう)後(ご)に右側(みぎがわ)のタブで受信(じゅしん)するその次(つぎ)に左(ひだり)からクラウド変数(へんすう)2を送信(そうしん)する　　　　　　→　さらに0.1秒(びょう)後(ご)に右側(みぎがわ)のタブで受信(じゅしん)するニュアンスとしてはこうなってる。2つの変数(へんすう)を使(つか)って同期(どうき)してるから実質(じっしつ)0.1秒(びょう) x 2になってて、動(うご)きを再現(さいげん)するのに0.2秒(びょう)かかってるイメージなんだ。でもとりあえず動(うご)いた。そのことが素晴(すば)らしい。今回(こんかい)の同期(どうき)処理(しょり)はオンラインゲーム制作(せいさく)における大(おお)きな一歩(ぽ)であると言(い)えるぞ！次回(じかい)からはこのラグを解消(かいしょう)してもっとスムーズに動(うご)くテクニックを紹介(しょうかい)していく。ぶっちゃけどんどん難(むずか)しくなるから、脳(のう)みそに汗(あせ)かいて一緒(いっしょ)にがんばろうぜ！