スクラッチでオンラインゲームを作る⑫ 一人用の鬼ごっこをMMO化してみよう!

スクラッチでオンラインゲームを作る⑫ 一人用の鬼ごっこをMMO化してみよう!
ok-scratch
一人用の鬼ごっこをMMO鬼ごっこに魔改造していく!
難しさ

任意)自分の作業中のスクラッチ作品URLを記録しておこう!再開するときに便利だよ。

LOADING...

※ この記録は今使ってるPCに保存されます。別のPCで作業するときは表示されません。

スクラッチに挑戦している皆さん、どうも!スクラッチコーチです。

前回は自作ゲームのサンプルとしてシンプルな鬼ごっこを作った!これをオンラインゲームエンジンを使ってMMO化していく手順をやっていこうと思う。

ここで手順を押さえておけば、次はキミ自身のゲームをMMO化することも可能だ。そんな大いなる一歩を一緒に行こう!

今回の目標「オンライン鬼ごっこを作る」

前回作った鬼ごっこの仕様を改めて確認しておくね。

  • プレイヤーは緑
  • エネミーは赤
  • プレイヤーはエネミーから逃げれば逃げるほどポイントが貯まり、体のサイズが大きくなっていく。
  • プレイヤーはエネミーに触れるとポイントがリセットされて、体のサイズが元に戻る。
  • エネミーは不規則に動きつつも、ときどきプレイヤーめがけて急襲してくる。

こういう一人用の鬼ごっこゲームを作った。これをMMO化していくにあたって、以下の要件を加えていこうと思う。

  • 別プレイヤー用のフレンドというスプライトを作る(オンラインゲームエンジンを使う)
  • フレンドは水色
  • エネミーは各プレイヤーごとにローカル表示される。つまり今回はエネミーはオンライン化の対象外。
  • フレンドも逃げる時間が長いほど体のサイズが大きくなる。

ゲーム内容自体はシンプルさを重視しているから、まぁこんなところかな。

オンラインゲームエンジンをバックパック化する

いきなり本題だよ。さっそくMMO化を進めていく。

まずは、鬼ごっこではなくて、オンラインゲームエンジンの作品を開こう。

ok-scratch ok-scratch

オンラインゲームエンジンを作ってない!という人は

- このシリーズの①から一緒に作ってからここに戻ってくるか

- シリーズの⑩番目の記事を開いて、そのサンプルプロジェクトをリミックするか

どちらかの方法でオンラインゲームエンジンをゲットしよう。

プロジェクトをいじるので、プロジェクトのコピーを作っておくことをおすすめする。

自プレイヤーを選ぶ

そしてスプライト「自プレイヤー」を選ぼう。

不要なブロックを削除する

めっちゃ消すw

最終的には↓こんな感じ。

クラウドプレイヤーにコピペする

このブロック群をスプライト「クラウドプレイヤー」にまるっとコピーする。

ドラッグアンドドロップでスプライトにまるっと持っていこう。

スプライト「クラウドプレイヤー」側にブロック群がコピーできたか確認しておこう!

  • なぜ使われないブロック群を追加したの? なぜ使われないブロック群を追加したの?

    クラウドプレイヤーでは使わないのだけど、あとで鬼ごっこ側で使うんだよね。だけど2個バックパック作るとMMO化するのに必要なバックパックが増えて管理しづらい。そこで、必要なブロックは全部クラウドプレイヤーに詰め込んで、バックパックを1つにまとめておこうという発想なんだ。こういう一箇所で管理する方法は「一元いちげん管理」と呼ばれてて、システムやゲーム開発だけではなくビジネス全体で広く使われているぜぃ。

バックパック化する

こんどはスプライト「クラウドプレイヤー」をまるごとバックパックに追加するぞ。エディター下部の「バックパック」という部分をクリックして開けてから、スプライトをドラッグアンドドロップだ。

これで一区切り!オンランゲームエンジンをバックパック化することに成功したぞ!

オンラインゲームエンジンを移植する

さぁ、いよいよ鬼ごっこのオンラインゲーム化に挑戦だ!オラ、ワクワクすっぞ!

まずは鬼ごっこプロジェクトを開こう!中を見るでエディタを表示しておく。

バックパックからクラウドプレイヤーを追加する

さっきバックパック化したクラウドプレイヤーを取り出して、スプライトのところにドラッグアンドドロップしよう。

よし、いい調子だ!

ニセモノのクラウド変数を消す

変数のところを見てみよう。おお、クラウド変数がバシッと追加されてる!と思いきや、実はこれニセモノなんです……。(でも、まだ消さないでね)

ニセモノだという証拠もあります。この作品のプロジェクトページを見てみると……あるはずの「クラウド変数」宣言がないんです。

これは由々しき事態ですな。

消しましょう。あ!待って!消さないで!w

実は消し方にもコツがある。そのままサクッと消すと変数を使っている場所も消えてしまって大変なことになってしまうのだ。

恐怖しかない!もはや作り直しといっても過言ではないレベルで手間だね。

ステージ「背景」を選ぶ

こんなときはいったん落ち着いてステージをクリックしよう。

ステージ内でクラウド変数を消す

ステージが選択された状態で、さっきのニセ変数たちを一掃しよう。

最終的には↓こんな感じでスッキリする。

あ!まだクラウドプレイヤーは開かないでね。ステージのままだよ。いまクラウドプレイヤーを開くと、またニセ変数が復活しちゃうからね。

クラウド変数を作り直す

いま消したクラウド変数を1から8まで作り直そう。

クラウド変数にチェックを入れ忘れないでね!8回も繰り返してると1回くらい忘れちゃうこともある。

ok-scratch ok-scratch

僕は2回忘れてたw

クラウドプレイヤーを確認する

よし、あらためてクラウド変数を8個作り直したあとなら、クラウドプレイヤーを確認してもニセ変数は復活しないぞ。見てみよう。

おっけい!

ok-scratch ok-scratch

クラウド変数の中身はチェックしないから、変数を表示するチェックマークは外しておいてOKだよ。

バックパックからメイン処理を取り出す

スプライト「クラウドプレイヤー」には使われてないブロック群を追加しておいたよね。あれを鬼ごっこのメインループ内に追加しようと思う。ドラッグアンドドロップで追加しよう。

ok-scratch ok-scratch

ちなみにどのスプライトに追加するかという判断基準は、位置情報を共有したいスプライトはどれか、って考えるといいと思う。

クラウドプレイヤー側ではこのブロック群は使わないから削除しちゃっていいよ。

鬼ごっこ独自のデータをクラウド変数に追加する

おし、ここから本番だ!いまのクラウドプレイヤーは(プレイヤーUID以外に)X座標とY座標という位置情報だけを共有するシンプルな作りになっているよね。

でも鬼ごっこには位置情報以外にもポイントという独自のデータもあって、これもクラウド変数で共有しなくてはならない

ok-scratch ok-scratch

今回の鬼ごっこではポイントというデータだけだけど、みんなの作品の中にはもっと所持アイテムとかレベルとか装備とか、他にもスキルとかとか、いろんな情報があるかもしれないね。でも全部ここから学ぶ方法で同じように追加すればクラウド共有できるから引き続き一緒に見ていこう。

プレイヤーのメインループにクラウド処理を追加する

まずは今しがたコピーしたブロック群を、プレイヤーのメインループ内に組み込もう。すでに「ずっと」ループはあるから、それ以外のブロックをバラバラに追加していくよ。

「クラウド - セットアップ」を追加する

メッセージ「クラウド - セットアップ を送って待つ」は、最初のところに追加するぞ。

↓こんな感じになる。

座標情報を追加する

X座標とY座標を送信用データに追加するブロックも追加する〜。

↓こんな感じになる。

X座標とY座標に変数「スピードX」と「スピードY」が加えられた後に追加すればOKだよ。

「クラウド - ティック」を追加する

このメッセージも続けて追加してしまってOK。今回は続けて追加するけど、追加場所の判断基準としてはリスト「★送信用データ」に追加予定のデータをすべて追加した後に、このメッセージを送る感じだよ。

だからもしキミの自作ゲームでは複雑な計算をしてから送信用データを作り込むなら、その処理が全て終わって送信用データが整ってからメッセージ「クラウド - ティック」を送るようにしよう。

独自データ「ポイント」を共有する

さぁ、これだよね。ポイント。ポイントも送らないとね。鬼ごっこ独自データを送信用データに追加するぞ。これが成功すれば自作ゲームのMMO化が近づくぞ。

送信する

そのままスプライト「プレイヤー」にて送信用データにポイントを追加しよう。

ゆーてもコレだけかい!w

まぁポイントの計算はすでに終わってるしね。追加するだけならこれだけだわな。

受信する

ただ送信も重要だけど、受信も大切だよね。

クラウドプレイヤーを選ぶ
クローンティックを見つける

だいぶブロックが多いから見つけにくいけど、ブロック定義「クローンティック」を見つけよう。

↑こういうブロック群。

デコード処理を追加する

XとY以外にもポイントが送信されてくるので、最後尾にデコード処理を追加する。

大きさを変える処理を追加する

変数「値」にはポイントが入っている手はずなので、コレを使ってクラウドプレイヤーの大きさも変えよう。

いえす、これでデータ的なことは整った!ためしに2つ並べて動かしてみよう。

あとは見た目を変えたい!

フレンドに変える

クラウドプレイヤーのスプライト名をフレンドに変えようか。

コスチューム

めちゃカンタンに四角い水色作るwせめて目もつけるか……。

描くのが苦手な人はここからダウンロードしてファイルをコスチュームにアップロードしてくれ。

フレンドのコスチューム

もともといるスクラッチキャットのコスチュームは削除してOK。

テスト

よし、これでテストぉ!

うん、動きは問題ない。けどフレンドと自分の重なり方が微妙。

自分を前に出すようにしようかな。

自分を最前面にする

プレイヤーを選択してから最前面になるようにブロックを追加するよ。

これでオーケー!

フレンドも時間が経つと大きくなるようになってるね!やったぜ!

まとめ

今回はソロプレイ用の鬼ごっこを、途中からMMO化するというチャレンジに挑戦したぜ。

ココまで作り上げてきたオンラインゲームエンジンを実践的にカスタマイズする方法のキホンがわかったと思う。

大切なのは結局のところ以下のようになるかな!

  • バックパック化したクラウドプレイヤーを自作品に追加する
  • メインループに
    • メッセージ「クラウド - セットアップ」を加える
    • メッセージ「クラウド - ティック」を加える
    • 自作品特有のデータをリスト「★送信用データ」に追加する
  • クラウドプレイヤーのブロック定義「クローンティック」にて、自作品特有のデータをデコードして処理する

大まかなカスタマイズの流れはこんな感じだね。バックパック化は今回やったから次からはすでにバックパック化してあるクラウドプレイヤーを使えばいいだけだから、そこは楽だね!

複雑なプロジェクトのオンライン化手順を知りたい人はグリフパッチさんの動画をチェックしてみてくれ!

完成サンプルがあるよ
おつかれさま!今回のチュートリアルには完成サンプルがあるから、作ってて分からなくなったり、 動作確認をしたいときはチェックしてみてね。
このスクラッチゲームの作り方への質問もOK このスクラッチゲームの作り方への質問もOK
このスクラッチゲームの作り方に挑戦していて分からないことが発生したら質問してみてね。気づいたタイミングで回答するよ。 質問は 僕のスクラッチのプロフィール で受け付けているよ。

質問テンプレート(素早く3回クリックすると全選択できるのでコピーしよう)

・◯◯ ... 記事のどこまで実装が終わったのかを記入しよう。
・□□ ... どんな問題が起きているのか、どういうときに起きるのか、具体的に書こう。
・共有済みURL ... たまに共有してない作品URLを書いてる人がいるけど、共有しないとこちらから確認できないからよろしくね。

スクラッチャーからのコメント

orange71565 orange71565 2025-01-25
あなたが解説したオンラインゲームのエンジンを使用して作品を完成することができました。どうもありがとう!
ok-scratch ok-scratch 2025-01-25
@orange71565 おおお!長いチュートリアル完結おめでとうございます!素晴らしい〜。ご報告をくださりありがとうございます(*^^*)
koutamaan koutamaan 2025-01-24
https://scratch.mit.edu/projects/1123477019 あのーオンラインゲームの作り方のやつで送信用データがバグっちゃって見てもらえません?
ok-scratch ok-scratch 2025-01-24
@koutamaan たぶん変数「プレイヤー番号」に0が入ってるからだと思います。空白にしてみてください。
RABI-AOONIMANIA RABI-AOONIMANIA 2024-09-11
グリフパッチのオンラインゲームの作り方参考になりました!お願いがあるんすけど、 そのオンラインゲームに今何人いるっていうのをつくりたいですけど、できますか?
ok-scratch ok-scratch 2024-09-11
@RABI-AOONIMANIA おお、教えてくれてありがとうございます。お役に立てて嬉しいです。オンラインゲームに何人いるかは、リストの長さで分かる気がします。リストの名前忘れてしまいましたが、プレイヤーの数が分かるリストあった気がする。
RABI-AOONIMANIA RABI-AOONIMANIA 2024-09-11
@ok-scratch 一応それはやってみたんですけど、1,2,3とリストにあるときに確か 2番が抜けたら2番目のリストが空白になるもので,,,こんどもう一回やってみます
ok-scratch ok-scratch 2024-09-11
@RABI-AOONIMANIA あ、なるほど。そしたら空白以外をカウントすればいいのかもしれませんね。◯回繰り返すブロックで、リストの長さ回繰り返して、条件ブロックで空白か調べて、空白じゃなければプラス1するみたいな流れかな。
RABI-AOONIMANIA RABI-AOONIMANIA 2024-09-12
@ok-scratch なるほど!ありがとうございます!
RABI-AOONIMANIA RABI-AOONIMANIA 2024-09-12
@ok-scratch やってみた結果できました! https://scratch.mit.edu/projects/1057400307
ok-scratch ok-scratch 2024-09-12
@RABI-AOONIMANIA お、ちゃんと増えました!ナイスです( ´∀`)bグッ!
RABI-AOONIMANIA RABI-AOONIMANIA 2024-09-12
@ok-scratch ありがとうございます!
eakonn705 eakonn705 2024-08-13
オンラインのチュートリアル完成作品で自分のパソコンの負荷テストを行おうとして、15個(!?)のタブを開いてMMOエンジンを実行させていたら、15個の時で1つ、17個の時で2つ、自プレイヤーもクラウドプレイヤーも表示されないウィンドウがあったのですが、なぜだかわかりますか?理由が気になります。
eakonn705 eakonn705 2024-08-13
@eakonn705 すみません、もう一度タブを開きなおして実行すると、正常に動いていました。すみませんでした。けど18人でも正常に動いているのはすごい…。
ok-scratch ok-scratch 2024-08-13
@eakonn705 おお、負荷テストすごい。グリフパッチさんは(本気かわからないけど)百人でも動くって言ってました。さすがにパソコンのスペックが追付かないと思うけど(笑)
eakonn705 eakonn705 2024-08-14
@ok-scratch 返信ありがとうございます。リストを利用する方法を思いつくグリフパッチさんはすごいですよね。
SAKU-111 SAKU-111 2024-08-12
TACT-AIMのオンラインのつくりってわかりますか?できれば教えてほしいです
ok-scratch ok-scratch 2024-08-12
@SAKU-111 分かりません(^_^;) すごいですよね。
aiueomk2 aiueomk2 2024-08-13
@SAKU-111 スクラッチコーチで、おすすめのチュートリアルがあります。スイカゲーム、オンラインゲームのチュートリアルを終えましょう。そうすれば、希望の光が見えると思います。
eakonn705 eakonn705 2024-08-15
@SAKU-111 恐らく、玉の出るタイミングをクラウド変数を通じてほかのプレイヤーのクラウドプレイヤーに指定。そうして、弾幕をオンラインで復元しているのだと思います。クラウドプレイヤーがわからない場合は、スクラッチコーチさんのオンラインゲームチュートリアルを学んでみてください。頑張ってくださいね!
ok-scratch ok-scratch 2024-08-16
@aiueomk2 @eakonn705 お二人のコメント素晴らしいですね!僕が思考停止したコメントなのがお恥ずかしい(^_^;) 直接的な答えが分からないながらもヒントになるようなコメントができる点は見習っていきたいです(๑•̀ㅂ•́)و✧
eakonn705 eakonn705 2024-08-16
@ok-scratch そんなことないです!スクラッチ民、持っている知識は全員違いますし、ゼビウスの裏敵が共有されたように、それらを共有していきすごいゲームを作っていく空間、それがスクラッチですから!
ok-scratch ok-scratch 2024-08-16
@eakonn705 僕もスクラッチのそういうところ好きです( ´∀`)bグッ!
hisa511 hisa511 2024-07-09
色々と参考にさせてもらってます!ありがとうございます!フォローさせていただきました!
ok-scratch ok-scratch 2024-07-10
@hisa511 ありがとうございます! とくに何が参考になったか伺ってもいいですか?もしよかったら教えてください(^o^)
hisa511 hisa511 2024-07-10
@ok-scratch オンライン鬼ごっこの作り方です!まだ公開はできていませんが現在作っております!
ok-scratch ok-scratch 2024-07-10
@hisa511 おお、教えてくれてありがとうございます。参考になります(^o^)
MOCO321 MOCO321 2024-03-30
オンラインで発射された弾を共有する方法を知りたいんですけど、教えてもらえるでしょうか?
ok-scratch ok-scratch 2024-03-30
@MOCO321 そうですね、、、確実なのは弾のxy座標を常に共有するか、それだとデータ量多すぎるなら、弾が発射されたxy座標と発射角度とスピード、あとマルチプレイなら弾の所有者かな。これを共有すればあとは受け取った側で弾の移動距離をしてあげればだいたい同期できると予測します。
MOCO321 MOCO321 2024-03-30
@ok-scratch 詳しくありがとうございます!頑張って作ってみます!
MOCO321 MOCO321 2024-03-30
@MOCO321 弾が増えたり、減ったりしたのはどのように検知すれば良いでしょうか?
MOCO321 MOCO321 2024-03-30
@MOCO321 解決しました!
ok-scratch ok-scratch 2024-03-30
@MOCO321 おぉ、良かったです(*^^*)
Kmm-Gamer Kmm-Gamer 2024-01-29
サイト見てオンラインゲーム作れました。でも8人しか入れないのでそれの人数増やす方法と、ルーム見たいのを作るのと、それでスクロールゲームを作る方法の三つを新しくサイトにあげて欲しいです!多いですけどよろしくお願いします!
ok-scratch ok-scratch 2024-01-30
@Kmm-Gamer おお、制作ナイスです。ちゃんと作れてれば8人じゃなくてもプレイできるはずですよ。クラウド変数8個を使ってるけど1人1個ではないので、理論上は数十人、グリフパッチさんによると100人くらいでもいけたとのこと。他のリクエストは今後の参考にさせていただきます(*^^*)
Kmm-Gamer Kmm-Gamer 2024-01-30
@ok-scratch そうなんですか?ありがとうございます!あと、今オンラインバトロワ見たいのを作ろうとしているんですけど、ステージが変わったらキャラクターを消すやり方や、しゃがむ動作などを変えるやり方を教えてほしいです!
Kmm-Gamer Kmm-Gamer 2024-02-02
@ok-scratch そうなんですか?ありがとうございます!あと、今オンラインバトロワ見たいのを作ろうとしているんですけど、ステージが変わったらキャラクターを消すやり方や、しゃがむ動作などを変えるやり方を教えてほしいです!
ryugen0719 ryugen0719 2023-12-29
オンラインの作り方と、スティックの作り方を見て作りました!2024のカウントダウンプラットフォーマーです https://scratch.mit.edu/projects/945011335
ok-scratch ok-scratch 2023-12-30
@ryugen0719 おおぉ、カウントダウンいいですね!タイミングバッチリだから盛り上がりそう♪年越しするときはPC使えない人も多そうだし、モバイル対応なのも嬉しい。
ryu-ryu-7 ryu-ryu-7 2023-12-07
https://scratch.mit.edu/projects/936667731/ okさんの自作ゲームをオンライン化するやつをしてみたんですけど、2つのタブに分けたとき、両方のタブで動いても、コスチュームを変えたり、その他の動作を行ってくれないです。どうすればいいでしょうか?
ok-scratch ok-scratch 2023-12-08
@ryu-ryu-7 それにはクラウド変数で別途データを共有する必要があります。この記事で「ポイント」を追加する手順が書いてあるので、これを参考に共有するデータを増やしてみてください。共有後に各スプライトでデータを反映させる感じです。 (送信と受信) https://scratch.coach/lesson/how-to-make-exist-projects-multi-playable-2/#contents-12
ryu-ryu-7 ryu-ryu-7 2023-12-08
@ok-scratch https://scratch.mit.edu/projects/936667731/ してみました!ポイントは色の効果とくっつけて成功しましたが、コスチュームを変えるプログラムがうまくいきません。同じようにしていると思うんですけど、かくついてしまいます。どこが間違っているのか教えてくれると嬉しいです!
ok-scratch ok-scratch 2023-12-10
@ryu-ryu-7 手榴弾いいですね!コス変えるというのは、スプライト「猫」で、次のコスチュームにするブロックを使っているところですか?ここなら、「0.1秒待つ」っていうブロックを使ってコスチュームの切り替えをコントロールしているから、どうしてもカクカクしちゃうかも。もしスムーズにコスチュームを切り替えたいなら、コマっていう実装をするとクオリティは高いよ。コマ送りとかのコマ。このチュートリアルに載ってるよ。 https://scratch.coach/lesson/mario/#contents-18
ryu-ryu-7 ryu-ryu-7 2023-12-10
@ok-scratch ありがとうございます!やってみます
ryu-ryu-7 ryu-ryu-7 2023-12-06
記事を見てオンラインゲームの作り方を学んでいるんですが、あの記事の場合は大人数用なんですけど僕が作りたいのは二人用なんです。どう変更すればいいでしょうか?
ryu-ryu-7 ryu-ryu-7 2023-12-06
@ryu-ryu-7 https://scratch.mit.edu/projects/936076837/ 退場処理までのプログラムを組み込んだんですけど合っていますか?
ok-scratch ok-scratch 2023-12-06
@ryu-ryu-7 試してみたのですが、ブラウザを並べても2つとも1Pになってしまいました。なにかが違うのかも。 2P用であれば、クラウド変数にルームみたいな項目を用意して、ルーム内人数が2未満の人同士をマッチングするような実装になるのかなと思います。もしコーディングの設計が難しそうでしたら、アモングアス作品とかがそのへん実装してるの多かった記憶があります!(その場合でもコードリーディングが難しいかもですが)
ryu-ryu-7 ryu-ryu-7 2023-12-07
@ok-scratch もうわけがわからなくなったのでokさんが作っていた鬼ごっこを元にして、大人数(2、3、4人)くらいでボスキャラの討伐を目指すというゲームに変更して作ってみます!こんな初心者に付き合っていただいてありがとうございました!できればこれからもサポートしてくれると助かります!
ok-scratch ok-scratch 2023-12-08
@ryu-ryu-7 誰でも最初は初心者だしドンマイだよ!かのグリフパッチさんだって最初は悪戦苦闘したはず。作品の完成を目指して軌道修正ぜんぜんアリだと思います。ファイト(*^^*)
ブクマよろしくお願いします! ブクマよろしくお願いします!
どんどん追記・更新していくので、ブックマークやシェアよろしくお願いします!

スクラッチゲーム攻略

スクラッチゲーム

    • 厳選されたスクラッチ人気作品リストがレビュー付きで楽しめます
      趣味に関するスクラッチ作品例
      勉強になるスクラッチ作品