(爆速オンライン3Dゲームの作り方 #16)

(爆速オンライン3Dゲームの作り方 #16)
グリフパッチ(動画)
ok-scratch(執筆)

和訳解説は動画作者のグリフパッチさんご本人から許可をいただいて掲載しております。
チャンネルはYOUTUBE ( by griffpatch )からどうぞ。

バックパックを経由してモバイル化とオンライン化をしていこう!これで3Dチュートリアルは完成だよ。
スターター
プロジェクト
リミックス用プロジェクトへ
難しさ

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

LOADING...

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

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

今回の目標「モバイル&オンライン対応」

前回までで3Dチュートリアルは完成したと言っても過言ではない。今回はプラスアルファの仕組みを整えてチュートリアルの締めにしたい。

といってもちょっとした追加じゃない。モバイル対応とオンライン対応というゴリゴリにゲーム品質に関わる改修作業になるぞ!

作業としては次の通り!

  • テクスチャを使うモードと、使わない軽量化モードを切り替えられるようにする
  • バックパックを経由してモバイル対応を行う
  • バックパックを経由してオンライン対応を行う

さぁ、行こう!

今回で一応の最終回とするため、いつもみたいなワンステップのスクリーンショットではなく、ある程度のまとまったスクリーンショットになってます。ちょっと分かりづらい?むしろ分かりやすい?あらかじめご了承ください〜。

軽量モードを作る

せっかくテクスチャを利用して画像を壁に貼り付けることができたけど、元々の色で塗りつぶす壁のほうが軽量であることは確かだ。ユーザーのパソコンのスペックによっては、テクスチャだと重たいという人もいるかもしれない。そこで、軽量モードを用意してユーザーが選べるようにしておこうと思う。

ステージを開こう。

いくつか変数を作るよ。

変数「★軽量モード」「■はい」「■いいえ」を作る

初期化しよう。■は定数として扱うので、ゲーム開始後は値を変えないよ。

そしてlエルキーが押されたとき、★軽量モードを「■はい - ★軽量モード」にしよう。

これはトグル処理というんだ。

  • 軽量モードがはい(=1)なら「1 - 1 = 0」になる
  • 軽量モードがいいえ(=0)なら「1 = 0 = 1」になる

電気のスイッチみたいにオンとオフを切り替えるような動きになる計算方法だよ。

ok-scratch ok-scratch

ちなみにlエルキーにしたのは、Lightライト(軽い)のLだよ。明かりのライトが有名だけど、ボクシングとかでライト級とかヘビー級とかっていうのも同じ軽いっていう意味のライト。システム開発やゲーム制作でも(処理が)軽いっていう表現はライトが使わられることが一般的なんだ。

スプライト「レイキャスター」を開こう

定義「_シングル・レイ」を見つけて。

↓コレみたいに、変数「★軽量モード」が「■はい」のときは、(以前実装してあった)色で壁を塗り塗りする処理を作って最後に「このスクリプトを止める」を置いておこう。

スプライト「ペン」を開こう

定義「_行を描画する」を見つけて。

さっきみたいに、軽量モードならペンの明るさや色を変更する処理を書いて最後に「このスクリプトを止める」ブロックを置こう。

ok-scratch ok-scratch

ごめん、この↑スクショだと1つ大切なブロックが抜けてます。最初に「ペンの色を◯にする」ブロックを設置してください。こんな感じ↓

軽くなったかテストしよう

さっそく緑の旗を押してlエルキーでモードをトグルしてみようか。

軽量モードにしたらFPSが30とかになってる様子が分かるね!これでカクカクし始めちゃっても一瞬で軽量モードを選択できるから低スペックのデバイスで遊んでる人でも安心だね。

ok-scratch ok-scratch

モバイル勢のことも考えるべきだった!軽量ボタンを作ってそれをタップしたら切り替わるという仕様のほうが優しかった……。せっかくこのあとモバイル用のジョイスティックも実装するし。

モバイルに対応する

モバイル対応していく!ここは別チュートリアルで作ったジョイスティックを利用する。

バックパックを経由してスティックを借りよう!

まだ作ったことがない人も完成プロジェクトから借りてくることができるから安心してほしい。

借りる!

  1. このプロジェクトを開こう!
  2. 中を見るを開くよ。
  3. 画面下部の「バックパック」をクリックして開いておこう
  4. スプライト「スティック」をバックパックにドラッグアンドドロップしよう。

使う!

よし、じゃあ今作ってる3Dのプロジェクトに戻ってみよう。

バックパックを閉じたり開いたりすると更新されて、今追加した「スティック」が表示されるぞ。それおスプライトのところにドラッグアンドドロップしよう!

おーけい!

スプライト「プレイヤー」を開こう

さてスティックを動くように少し調整しようか。

定義「_プレイヤーティック」の「もし」ブロックを置換するよ。

左がAFTERで、右がBEFOREになってるので、参考にして置換作業を進めてほしい。

ok-scratch ok-scratch

ちなみにこれだと横にカニ歩きすることはできなくなる。今回はモバイルだとカニ歩きさせることはできないから、パソコンでもできないようにした。でもゲームによってはパソコンではカニ歩き機能を残すこともアリだ。そのあたりは自分で考えてどっちがいいか決めてOK!

スティックで動けるようになったかテストしよう

おおぉ!カンタンにモバイル対応できたね。これでパソコンでもモバイルでも楽しめるスクラッチゲームが完成した。

モバイル対応しておけばベッドでゴロゴロしながらでも電車に乗りながらでもデバッグできる♪

お次はシメだ。

オンライン化する

オンライン化してマルチプレイでゲームを楽しめる地盤を作ろう。

バックパックから借りてくる

これもバックパックを利用して作っていくぞ。

借りる!

このプロジェクトを開いて、スプライト「クラウドプレイヤー」をバックパック化しよう。

さっきと同じように3Dのプロジェクトのスプライト一覧に追加しておいてね。

クラウドプレイヤーに対応する

プレイヤーを開こう!

緑の旗が押されたとき

緑の旗が押されたときに、「クラウド - セットアップを送って待つ」を置こう。

定義「_プレイヤーティック」

定義「_プレイヤーティック」にも3つブロックを追加しよう。

クラウドプレイヤーを開く

クラウドプレイヤーにいくつか処理を追加していくぞ。

マップ表示を切り替えるを受け取ったとき

新たにメッセージを受け取ったときブロックを追加するよ。これは単にマップ表示の処理だけだね。

ok-scratch ok-scratch

スプライト「エンティティ」からコピーしてきてもOK

エンティティの計算をするを受け取ったとき

さらにクラウドプレイヤーの位置を調整するための処理を追加しよう。

ok-scratch ok-scratch

スプライト「エンティティ」からコピーしてきてもOK

定義「_画面を回転させる」

クラウドプレイヤーの位置を調整する処理の続きだね。

ok-scratch ok-scratch

スプライト「エンティティ」からコピーしてきてもOK

定義「_描画する」

さらに続き。クラウドプレイヤーの描画処理だ。

ok-scratch ok-scratch

スプライト「エンティティ」からコピーしてきてもOK

クローンされたとき

緑の旗が押されたとき

タイプには4を指定しておく。これはクラウドプレイヤーのコスチューム番号を意味しているぞ。だから人によっては4じゃないかも。

スプライト「ペン」を開こう

コスチュームを追加する

コスチュームにはとりあえずスクラッチキャットを採用するぞ。コス名はなんでもOK。ここではCloudPlayerクラウドプレイヤーにしておいた。

ナノとか他のエンティティと同じように枠に合わせてずらしておこう。影も付けておくといいよ。

マルチプレイができるかテストしよう

画面をいくつか並べて同期が取れているか確認してみよう。

いーーーやっほーーー!(マリオっぽく叫ぼう)

まとめ

どうだった?ここまで来れたかな?!

軽量化、モバイル化、オンライン化、さまざまな山を乗り越えて3Dゲームのエンジンができあがった。コレを使って自分なりの3Dゲームを作れることを願っている!

ちなみに僕もこれを利用して3D逃走中を作ったから見てみてほしい♪

3D逃走中

3D逃走中

by ok-scratch
[my-voice title="ok-scratchさんの作品"]

ハンターのロジックは実は改造してあって、単純にプレイヤーに向かってくるだけじゃないんだ。プレイヤーがハンターの視野に入ったら襲ってくるようになっているし、間に壁があれば気づかれないような実装にもなっている。「プレイヤーがハンターの視界に入ったら」というロジックを考えるのが楽しかった。けっこう応力の効く実装だと思うので興味があったら中を見てみてね。

[/my-voice]

グリフパッチさんの動画

このチュートリアルは世界No.1スクラッチャーとして名高いグリフパッチさんの動画を参考にしているよ。ただし手順を一部変えているところもあるんだ。

完成サンプルがあるよ
おつかれさま!今回のチュートリアルには完成サンプルがあるから、作ってて分からなくなったり、 動作確認をしたいときはチェックしてみてね。
ブクマよろしくお願いします! ブクマよろしくお願いします!
どんどん追記・更新していくので、ブックマークやシェアよろしくお願いします!

スクラッチゲーム攻略

スクラッチゲーム

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