047-769-7545
こんにちは！スタッフの小澤です。
近年、ゲームは大きく発展を遂げ、さまざまなジャンルの作品が登場しています。その中でも、最近のゲームといえば「オンライン」という要素が欠かせなくなってきているのではないでしょうか？ ビッグタイトルの多くが、オンラインプレイを前提とした作りになってきている印象です。
そこで今回は、Scratchを使って簡単にオンラインゲームを作る方法をご紹介します！
まず初めに、皆さんはScratchをご存じでしょうか？ すでに知っている方も多いと思いますが、Scratchはブロックを組み立てることで直感的にプログラミングができる、とても楽しい学習サイトです。
そんなScratchを使って、今回は「クラウド変数」という機能を活用し、シンプルなオンラインゲームの作り方に挑戦してみたいと思います！
クラウド変数とは？
Scratchには「変数」という、スコアやタイマー、キャラクターの位置などを記録するための仕組みがあります。通常の変数は、そのプロジェクトを使っている人のパソコンの中だけで使えるものです。
でも、「クラウド変数」はちょっと特別！
インターネットを通じて、他の人と共有できる変数なんです。
たとえば、あなたがあるスコアをクラウド変数に保存すると、そのデータはScratchのサーバーに送られ、他のプレイヤーも同じ値を見ることができます。これを使えば、「オンラインスコアボード」や「リアルタイム通信を使った対戦ゲーム」なども作れるようになります！
ただし、クラウド変数を使うにはいくつか条件があります：
-
Scratchにログインしている必要がある
-
変数のデータは「数字のみ」扱える（文字列やリストは不可）
- Scratchを一定期間活動して「Scratcher」の称号をもらう必要がある
このクラウド変数をうまく使えば、離れた友だちともオンラインでつながるゲームが作れるようになります！
今回のオンラインゲームで使ったしくみ
今回作ったのは、ふたりで遊べるオンラインゲームです。
Scratchで「クラウド変数」という特別な変数を使うことで、離れた場所のプレイヤー同士が一緒にゲームを楽しめるようになっています！
では、どんなしくみで情報をやりとりしているのか、ご紹介します。少々難しいかもしれませんが、オンラインゲームってこんな感じなんだ！という感覚をつかみ取っていただければ幸いです。
なお。今回はマウスを押すとマウスに向かって猫が歩いてくるという簡単なゲームの仕組みにします！
🔸 クラウド変数を2つ使って情報をやりとり！
このゲームでは、「クラウド変数」を2つ使っています。
それぞれのプレイヤーが、自分のキャラクターの情報（どこにいるか、どっちを向いてるか、どんな見た目か）をひとつのクラウド変数にまとめて送っています。
たとえば、こんな数字のかたまりになります：
1200178015902107
この数字の中には、以下のような情報がギュッと詰め込まれています。
| 数字の部分 | 内容 |
|---|---|
| 1200 | x座標（横の位置） |
| 1780 | y座標（縦の位置） |
| 1590 | 向き（どの方向を向いているか） |
| 2 | コスチューム番号（見た目） |
| 107 | 数字のカウント（詳しくは下で） |
🔸 なぜ「+1500」しているの？
Scratchでは、向きは-180から180度、x,yは大体-400から400までで変動するため、xやyの位置などの数値が「1ケタのときもあれば、3ケタのときもある」というバラバラな長さになります。
そのままだと、クラウド変数から数字を読み取るときに「どこからがx？どこからがy？」と分かりにくくなってしまいます。
そこで今回は、x座標・y座標・向きの数値に「+1500」して、すべて4ケタにそろえるようにしました！
例：
-
xが「-300」 → 「1200」として保存（-300 + 1500）
-
向きが「90」 → 「1590」として保存（90 + 1500）
こうすることで、いつも決まった長さで数字を読み取れるようになるので、プログラムがとても分かりやすくなります。また、マイナスの範囲になっても4桁で固定になるように、+1000ではなく+1500しています。
🔸 プレイヤーの接続が切れたかを見分ける工夫
さいごに、プレイヤーがゲームをやめたときにそれを検知するための工夫もしています。
それが、クラウド変数のいちばん後ろの数字です。
この数字は、1秒ごとに「0 → 2 → 3 → … → 59 → 0 → 1 」と現在の時間の秒で変わり続けるようになっています。
もしこの数字がしばらく変わらなかったら…
「あれ？ 相手のデータの更新が止まってる。たぶんゲームをやめたかも？」
と判断できるようになります。これも+100することによっていつも3桁になるようにして、読み取りやすくしています。
プレイヤーの入退室をどうやって見分けてるの？
今回のオンラインゲームづくりで、難しかったのが「入室と退室の管理」です。
「今何人入っているか？」を正しく判断することがとても大事なんです。
🔹 まずは「部屋が満室かどうか」を確認！
ゲームをスタートすると、まず「空いているかどうか？」をチェックします。
Scratchでは、ふたりのプレイヤーそれぞれに1つずつクラウド変数（player1, player2）を用意しています。
この変数の中には、キャラクターの位置や向きの情報が入るのですが、誰も使っていないときは「0」としておきます。
なので、ゲーム開始時にはこうやって判断します：
-
player1が「0」→ 空いてる
-
player2が「0」→ 空いてる
-
両方とも「0」でない → 満室！
満室のときは「現在満室中です…」と表示して、空きが出るまで待つようにしています。
🔹 入室できたら、自分がどっちのプレイヤーか決める！
もし空いていたら、先に入った人が「player1」、次に入った人が「player2」として登録されます。
なお、この際に自身が担当するクラウド変数がどちらかを普通の変数に記録しておきます。
🔹 相手の入室・退室は「in」「out」で記録！
次に、「相手がゲームに入ってきたか？」「もうやめたのか？」を知るしくみです。
別の普通の変数に、相手の状態を記録しています：
-
相手が入ってきたとき →
in -
相手が退室したとき →
out
自分の画面では、相手が「in」になった瞬間だけキャラクターを作り、
その後は退室（＝「out」になる）までずっとそのキャラクターを表示しつづけます。
このしくみで、キャラが何回も出てきたり消えたりしないようにしています。
また、先ほど記録した自身がプレイヤー1か2かは、もし自分がプレイヤー1だったら相手はplayer2というクラウド変数に入っている情報を使って表示する、逆にプレイヤー2だったら相手をplayer1というクラウド変数に入っている情報で表示するという風に扱っています。自分の情報をクラウド変数player1,player2どちらに保存するときも同じように選んで保存しています。
🔹 相手の退室をどうやって見つける？
ここで、前に紹介した「クラウド変数の最後の数字」が活躍します！
相手がゲームをやめると、その数字の更新が止まります。
もし10秒以上変化がなかったら、
-
「あ、相手がゲームをやめたかも」と判断
-
相手のクラウド変数を「0」にリセット
-
入退室の状態を「out」に変更
こうすることで、相手がゲームをやめたこともしっかり検知できるようになっています。
これらを組み合わせて、二つのパソコンで同じプロジェクトを開いて起動すると、、、
二つのキャラクターが出て、一方のパソコンでキャラクターを動かすと、もう一方のパソコン上でそのキャラクターが動きました！また、退室するとしっかり相手が消えて、クラウド変数も初期化されるようになりました！
まとめ
どうでしたでしょうか？今回は少々難しかったかもしれません。しかし、オンラインゲームってこんな感じなんだなーという雰囲気を感じ取っていただけたのではないでしょうか。scratchをやっている皆さんもスキルアップしてきたらオンラインゲームを作ってみるのはいかがでしょうか。今回作ったものは例のため、皆さん独自のオンライン機能を考えたり、拡張版を作ってみても楽しそうですね！
デジタルステーション習志野では、スクラッチと同じような感覚でコーディングし、マイクラを題材として学べる「プロクラ」を使用して楽しくプログラミング学習を進めていきます。
子どもたちが“楽しく・深く・自分らしく”学べる環境づくりを大切にしています。
皆さんもぜひ一緒にプログラミングを学んでみませんか？
▼無料体験のお申し込みはこちら▼
デジタルステーション習志野
〒274-0063 船橋市習志野台4-1-7 習志野駅前郵便局2F
-
- 駅から徒歩一分
-
- 入り口はこちら
-
- 駐輪場