UE4でネットワークPONG作成備忘録② バーの作成

はじめに

前回の続き。 今回はバーの作成を行います。ここにきてネットワークゲームで大切な概念である同期処理が出てくるので混乱しがちですか手元で試して色々いじってみてください。基本的にブログにはざっくりとした解説を書いて詳細は動画でお見せするスタイルでいきますのでご容赦ください 完成リポジトリは下に置いておきます。

github.com

作り方

動画

詳細は動画を見てください。

まだ作成してないです

全体の流れ

1. Game画面のセットアップ。
2. ポーン生成後、各プレイヤーを指定の位置に合わせる。
3. バーの移動制御ノードを書く。

1. Game画面のセットアップ

StarterContentのFloorを使ってステージを作りました、PlayerStartの位置はのちのホスト、クライアントのバーの位置になります。

2. ポーン生成後、各プレイヤーを指定の位置に合わせる。

基底クラスが「GameMode」のBPを作成します。以下の処理はこのBPに書き込みます。

どのPlayerStartから生成されるのかわからないので同じ個所からアクタが生成される可能性もあります（指定できる方法があったら教えてください）、なのでプレイヤーが生成された直後に指定の位置を設定してあげます。 クライアントかホストなのかを判別するために is local player controller を使用することで求まります。 Get Player Start Trans は自作のノードです。中身はタグを見て特定のPlayerStartのTransformを取得するだけです。

3.バー移動制御のノードを書く

バーBPを作成します。基底クラスは「Actor」です。以下の処理はこのBPに書き込みます。ここから同期処理が出てきます。

レプリケート（複製）が出てきます、その前に図で同期をざっくり説明します。 それではノードの解説に入ります。

移動方向を格納する Velocity変数 をレプリケートする設定で作る。これでサーバ側で変数の値を変えることで全クライアントにその変更が適用されることができる。

クライアント側で操作をバーを動かす操作をしたときにその変更をサーバ側に伝えたいので OnServer の設定でイベントを実行させる。この設定をすることでイベントをサーバに送信/実行することができる、なので変数のレプリケートを全クライアントに行うことができる。

Movement イベントは レプリケートされた変数を利用して実際に移動を行う。これはサーバに送信する必要はなく各自で実行させればいいのでレプリケートしない。

おわりに

これでMenuレベルから実行させれば動作すると思います。画像は完成品ですが以下のようにバーが二つ生成されます。

次回: ボールを作成する。

Unreal Engine 4で極めるゲーム開発:サンプルデータと動画で学ぶUE4ゲーム制作プロジェクト

UE4でRGBずらしPostProcessMaterialを作る

はじめに

Twitterで手軽に見た目をよくする加工の代表例として「RGBずらし」があったので作成してみました。 （他にはブルームとかがありました）

作った後に気づいたんですけど 公式サンプルにRGBずらしがありましたね。

RGBずらしとは

私たちが見ている画面はRGBと言われる光の三原色を組み合わされて描画されています。 このRGBをそれぞれの要素ごとに異なる方向ににずらすことでできるエモい表現を RGBずらしといいます。(記事を書いた後に気づきました、色収差って呼ばれているんですね。)

なぜいい感じに見えるのか言語化したかったですができませんでした、なのでエモいという表現を 使わせていただきます。

結果

結果は動画で見てください。

www.youtube.com

通常の描画との比較がなく、わかりにくかったので極端にRGBずらし効果を載せた画像を載せておきます。

作り方

全体のノード

流れ

1. Material を PostProcess用に設定
2. RGBごとに画面の描画を分解
3. RGBそれぞれのUVをずらし、画面描画をずらす。
4. PostProcessVolumeに作成したPostProcessマテリアルを設定

1. Material を PostProcess用に設定

PostProcess用のマテリアルを作成するときは Material Domain を PostProcess にする必要があります。

2.RGBごとに画面の描画を分解

ComponentMaskを使うことで要素の抽出を行うことができます。これを使い画面描画をRGBごとに分けることができます。画面描画は SceneTexture で取得することができますが参照するテクスチャ選ぶ Scene Texture id を PostProcessInput に変更する必要があります。

3.RGBそれぞれのUVをずらし、画面描画をずらす。

OffsetHogeパラメータを使い、画面描画のRGBごとにUVをずらします。UVに従って描画されている画面描画をこれでずらすことができます。

4. PostProcessVolumeに作成したPostProcessマテリアルを設定

パラメータ

動画で設定したパラメータです。このくらいが丁度良いのではないかと思います。

Unreal Engine 4で極めるゲーム開発:サンプルデータと動画で学ぶUE4ゲーム制作プロジェクト

UE4でネットワークPONG作成備忘録① Session作成/参加編

注意書き

勉強しながらメモしているので間違いもあると思います。 間違いがあった場合は容赦なくコメントしてくれると嬉しいです。

はじめに

通信をして遊ぶゲームが当たり前のようにある世の中で自分もそのようなゲームが作りたい、 作ることができれば制作の幅が広がるなと思ったので作ってみる

動画を見る。

初めから着手して右往左往するよりもネットワークゲームについて俯瞰的に基本的な部分を知ってから作業 をした方が良いと思ったのでUnrealEngine公式が出しているチュートリアル動画をまず見たよ。 日本語字幕がついているので安心だった。

www.youtube.com

プロジェクト開始

テーマ決定

「ポン」を作ることを目指した。

ポンは下記URLを見ればわかるけどゲームセンターのエアホッケーのようなゲームです。 お互いに球を相手の陣地に入れることが目的のゲームだよ

ポン (ゲーム) - Wikipedia

ネットワークゲーム学習用としてのプロジェクトなので、面白さは考えずにできるだけシンプルな物を題材にしたよ。

動画で学んだ大事なこと

• クライアントを兼任するサーバと専任のサーバが存在ある。(listenサーバ)
• データはレプリケート(複製)をしてサーバとクライアント間の整合性を取る。
• 通信を担保しなくてもよい命令に関してはRealiveにチェックを入れずにおくことでちょっとした最適化になる。
• 見えないアクタの通信まで行う必要はない。見えているアクタに関する通信だけを行うとクールなネットワークゲームが作れる。

実際に作成してみる。

Session作成/参加編動画投稿

動画にしてYoutubeに投稿した。具体的なノードの組み方はこちらを見る。

www.youtube.com

録画時にうまくまとまっていなくて上手に喋ることができなかった。尋常ではないくらい声が聞き取りづらいのでなんとかしたい、多分ノイズ抑制ゲートが悪い。 以下、動画内で重要そうな部分を抜き出して書き留める。

重要メモ

エラーハンドリング

Game Instance クラスを使用する。なぜなら Game Instance では Network エラーを引き起こした際に呼び出されるイベントが以下のような設定されているから。

• NetworkError
• Trable Error

サーバの種類

UE4では Listen server と dedicated server の二種類が存在する。 違いは以下の通りだ。

• Listen Server

  サーバーとクライアントの両方の役目を担う。通信においてサーバーとクライアントを兼任していることから多少他のクライアントよりも通信の遅延が少ない

• dedicated server

  サーバーとしての役割だけを果たす。描画を行わずサーバとしての役割として最適化されている。

エラー解決(割とハマりがち)

テストプレイ時、listenサーバ側で新しいレベルへ移行する際にオプションにlistenを渡した場合に 以下のようなエラーが出る

Client1 : Connection Lost
Client1 : Received Failure

これは Listenサーバ側で新しくListenサーバとして立ち上げようとした際に、元々接続しているクライアントとの接続が切れてしまい出現するエラーである。 なのでテストプレイの際はClient側でホストを指定する、もしくは dedicated server を指定することでどちらのウィンドウもクライアントの状態で始める方法がある。

(サーバ側では listen オプションを渡さないように場合分けをする手段もありそう。)

次回予告 : Bar作成の記事を書く。

Unreal Engine 4で極めるゲーム開発:サンプルデータと動画で学ぶUE4ゲーム制作プロジェクト

第10回ぷちコン振り返り①

企画の事を考えていた時の事をメモリます

今回のぷちコンの企画は以下の点に注意して決めた

• 見た目の完成度を高めにすることを目標とする。
• あまり特殊なルール・ゲームにしない
• メインでは1画面で完結するような企画にする。
• 不慣れな技術が必要そうな企画にはしない。

見た目の完成度を高めにすることを目標とする。

いかにゲーム性が面白くても見た目の完成度が低いと関光が狭いゲームになってしまうと考えたため見た目の完成度をあげることを目標にして開発を行うことにした。

あまり特殊なルール・ゲームにしない

特殊なルールにすると面白さを見失いがちになり企画が定まらずゲームのベースができるまで時間がかかりがちになる、逆に堅く面白いルールであればベースを作り終えるまでの時間が短くなり、目標である見た目の完成度に力を入れることが比較的容易になる。

メインでは1画面で完結するような企画にする。

広いエリアを使用する企画にしてしまうとその分だけレベルデザインに時間を割く必要がある。 見た目の完成度を目的とすると広いエリアにするたびに負担が大きくなるためそれは避けた。

不慣れな技術が必要そうな企画にしはしない。

制作期間が1ケ月しかない（実際には1ケ月すべてぷちコンに費やせるわけではないのでもっと短い）ので不慣れな技術には手を出さないようにした。例えばネットワーク関連など。 これは不慣れな技術に手を出した結果システムを作り出すことにいっぱいいっぱいになってしまい見た目にまで手が回らなくなってしまう事を予想したからである。

おわり

長い文章を書くことが苦手なのでこのくらいでおわりにしよう・・・・ ②があるかはわかりませんが書くとしたらコードの部分かな？

【Unity2017.1.x】PC, Mac & Linux Standalone Twitterシェア機能を作る

初めに

自作ゲームをプレイしてもらうためにはまず人に認知してもらう必要があり、そのためにはシェア機能が大事だと感じたので Unityにおけるシェア機能の作り方を書く、その際につま付いた点もメモっておく。

以下の流れで書いて行きます

• コード
• ざっくりとした流れ
• つまづきポイント

作り方

シェア機能は各プラットフォームごとに実装の仕方が違う。 今回は「PC, Mac & Linux Standalone」対応のシェア機能作成方法を書き留めます。

コード

実際にUnity1weekで使用したコードを抜粋して掲載します。 大事なのは Application.OpenURLの箇所なのでその部分コピれば直ぐに実装できます。

    public void Share()
    {
// 投稿する内容の構築
　　　　　string workURL = "https://sim-mokomo-shop.booth.pm";
        StringBuilder builder = new StringBuilder();
        builder.AppendLine($"ここから遊べるよ→{workURL}");
        builder.AppendLine("#VoiceRock #unity1week");
        string text = builder.ToString();        

// 指定のURLを使い投稿
        Application.OpenURL( "http://twitter.com/intent/tweet?text=" + WWW.EscapeURL( $"{text}" ) );
    }

流れ

1. 投稿する際の文字列を作る。

2. Application.OpenURLを用いてTwitter投稿画面を開く。

3. この際にtextパラメータにはあらかじめ決めておいた投稿の内容を渡しておく。

つまづきポイント

使用する関数に気をつける

指定のサイトを開く方法としていくつかネット上に方法が掲載されている。

1. Application.ExternalEval
2. Application.OpenURL

1.は Unity5.4.0以降はサポートしていない と書かれているので2.を使用する。

docs.unity3d.com

投稿文字列に気をつける

textパラメータに投稿されたい内容の文字列を埋め込む時にエスケープ処理を挟む必要がある。これは特定の文字について、例えば & < > 等がこれに該当する。

これらの文字を使っている文字列をそのままOpenURLに渡した場合サイトを開くことができなくなってしまう(何も起きない)

なので WWW.EscapeURLを用いてURLとして成立する事を保証する必要がある。

docs.unity3d.com

結果

適当なボタンに上記の関数を登録してボタンを押した時に実行させる事で Twitter投稿画面がひらけます💪