UE4の勉強記録

UE4の勉強の記録です。個人用です。

「Unreal Engine4.xを使用してRPGを作成する」の4章 ポーズメニューのフレームワークを勉強する

<前文>

f:id:kazuhironagai77:20190804200002p:plain

8 ÷ 2(2+2)の計算の答えが違っている?という面白い話を読みました。面白かったので自分でも調べて見たのですが、大体英語圏の人の解答は16、日本語を使用する人達は1が多かったです。両方の解説をじっくりと聞いた結果、2(2+2)が2*(2+2)と同じかどうかが問題のようです。16が正しいと主張する人達は、2(2+2)は2*(2+2)と同じであると考え、1が正しいと考える人達は2(2+2)は2*(2+2)と同じではなく、8÷2aのように考えるべきでその結果1が正しいと述べています。

双方の主張をじっくりと検討した結果、私は1が正しい答えだと思いました。2(2+2)は2*(2+2)と同じじゃないです。いや、同じかもしれませんが、英語圏の人はこの部分を完全に無視しています。日本語ではしっかりと2(2+2)と2*(2+2)が同じかどうかに対しての検証を行いその二つは違うと結論を出しています。しかし恥ずかしながら、私は最初、英語の解説を読んで16が正しい答えと信じていました。その後、日本語の解説を読んで、1が正解と書かれているのを見て日本人ここまで馬鹿になってしまったのか?と本当に思ってました。どこを勘違いしているのかを確認したいと思いじっくりと日本人側の主張を聞いていたら、間違っていたのは自分だと気が付きました。

その時は顔から火が出るような恥ずかしさを感じました。記事を読んでいるだけで偉そうに議論に参加しなくて本当に良かったです。プログラミングで問題が起きた時に、英語のサイトを当たると大抵解決方法が載っています。それに沿ってその問題に対応すると大体はすぐに解決します。その体験が英語の文献は何でも正しいはずという妄信を自分の中に育んでしまったと思います。良い戒めになったと思います。

それでは今週の勉強を始めます。

<本文>

<目的>

今週は、3章のまとめをしようと思ったのですが、今まとめなくても、後でもブログを見れば可能だと思いました。ので先に進み4章を行います。

<方法と結果>

<Step.0>

まず、サンプルコードのchatper4を解凍します。

解凍したサンプルからプロジェクトが生成できません。Versionを4.12に指定してVSも2015に代えても駄目でした。

VSのproject fileを生成してbuildをしてみると、'ws2_32.lib'がリンク出来ないと出て来ました。

これを調べて見ると、このサイトにWindowsSDKを再インストールするとそのエラーは直ると出てました。

f:id:kazuhironagai77:20190811201024p:plain

一回消して再インストールするのは嫌な予感がしたので、このサイトから

f:id:kazuhironagai77:20190811201052p:plain

WindowsSDKをあえて消さないでインストールしました。2つになってもHDDに余計な負担を与えるだけだと思います。動かなくなるより全然いいです。と思ったら前のWindowsSDKを勝手にアップデートする神対応をしてくれました。

もう一度chapter4のサンプルコードからUE4のプロジェクトを生成します。

f:id:kazuhironagai77:20190811201112p:plain

今度は成功しました。

f:id:kazuhironagai77:20190811201133p:plain

エディターも普通に起動しています。

f:id:kazuhironagai77:20190811201158p:plain

VSからビルドを行っても成功しました。

当然、Ch2を使用してやっていきます。

<Step.1>

まず教科書の4章の最初を読んでみます。教科書には以下のように書かれていました。

プレイヤーが状態を見たり目録を編集したり出来るようなポーズメニュースクリーンの作成。

この章では、メニューシステムの最初の部分、ポーズメニューのフレームワークのデザインと作成、を行います。以下の内容を勉強します。

  • UMGポーズスクリーンの最初のセットアップ
  • UMGのバックグランドのカラー
  • UMGのテキスト
  • UMGのボタン
  • UMGの目録のサブメニュー
  • UMGの装備のサブメニュー
  • キーのバインド
  • ボタンのプログラミング

何だか簡単そうですね。

どんどんやって行きましょう。

<Step.2>

UMGポーズスクリーンの最初のセットアップ

まず、教科書に以下のような事が書かれていました。

以下の事を考えてポーズスクリーンのデザインする必要があります。

  • プレイヤーのパーティのメンバーが観れる。
  • 装備品を装備したり外したり出来る。
  • アイテムが使用出来る。

なるほど、これらをどのように配置するかを、デザイナーが紙の上で考えるのですね。

Blueprintフォルダー内のUIフォルダー内にPauseと言う名前のUIウィジェットを作成して下さい。

何か全体的に簡単になっているような気がしますが、この部分はUIデザイナーが担当する個所だとするとそれも納得出来ます。

f:id:kazuhironagai77:20190811201334p:plain

出来ました。

キャンバスパネル(canvas panel)を追加します。

教科書ではキャンバスパネル(canvas panel)を追加しますとありますが、既に追加されていますね。バージョンの違いなのでしょうか?更に教科書の例ではRoot以下にキャンバスパネル(canvas panel)が設定されています。これもバージョンの違いのせいなのでしょうか?

分かりませんね。早速、Chapter4のサンプルを起動して確認してみましょう。

f:id:kazuhironagai77:20190811201408p:plain

サンプルのプロジェクトを起動させてUE4のエディターからBP、UIのフォルダーを見ると、Pauseと言う名前のUIウィジェットがありません。多分Pause_Mainがそれに当たるのでしょう。Pause_Mainを開いて見ます。

f:id:kazuhironagai77:20190811201430p:plain

何かスゴイのが出来ています。それはともかくとして、キャンバスパネル(canvas panel)をみてみると

f:id:kazuhironagai77:20190811201458p:plain

特にRootの表示はありませんね。更にキャンバスパネル(canvas panel)をもう一個追加する必要もないようですね。

<Step.3>

プレイヤーがポーズボタンを押した時にどのような種類のナビゲージョンシステムと情報をスクリーン上に表示する必要があるかを考えなければなりません。

機能性から考えて以下の種類のアイテムを最初の画面に表示する必要があります。

  • キャラクターとその状態(レベル、HP、MP、そして経験値/次のレベル)
  • 目録ボタン
  • 装備ボタン
  • Exitボタン
  • ゴールド

とありました。プログラミングとは関係ないかもしれませんが、どのような情報をポーズ画面に表示するのかを決定するのは誰が担当するのでしょうか?決まった情報をどのように表示するかはUIデザイナーが担当するのは明白ですが、どの情報を表示するかを考えるのは、UIデザイナーの上の人、例えばゲーム全体をデザインする人が担当する必要がありそうです。

この辺はウェブデザインの技術がそのまま使えそうですね。どんな情報をスクリーンに表示するかの基準は、ウェブデザインの作成でホームページにどのような情報を載せるべきかの研究を応用をすればいいと思います。この辺は考察で掘り下げたいと思います。

UMG のバックグランドカラー

作成しました。

f:id:kazuhironagai77:20190811201547p:plain

f:id:kazuhironagai77:20190811201556p:plain

流石にこのレベルの内容を逐一説明しながらやる必要はプログラマーにはないでしょうね。教科書には細かい手順が書かれていますがここではスキップします。この章は多分UIデザイナー向けに書かれているのでしょうね。

<Step.4>

UMG テキストの作成

f:id:kazuhironagai77:20190811201630p:plain

一応ここまで作成したのですが、この教科書の作成方法だと、サイズが変更された場合に全く対応できないですね。ウーン。どこまでこの教科書が信用出来るのか?考えなければならない日が来るかもしれません。

f:id:kazuhironagai77:20190811201658p:plain

幾ら何でもこれはねーだろ!って感じです。後から修正するんですかね。前章でウィジェットUIからウィジェットUIを呼び出したりしていましたが、そんなテクニックも使用する気配はありませんね。でも一応サンプルで確認してみましょう。

f:id:kazuhironagai77:20190811201719p:plain

うぁ。そのままです。これじゃSoldierとHealer以外表示出来ないじゃないじゃないですか?はっきり言ってこんなのUMGを一日勉強しましたレベルですよね。サイズの変更に対応出来てない。キャラクターの職業がSoldierとHealerしか表示出来ない。

これじゃ使えないです。

やっぱりデザイナーにブログラミングさせちゃダメですね。

このUIの問題をもう一度ここに書いておきます。

1.サイズの変更に対応出来ていない。

2.キャラクターが変更された場合に対応出来ていない。常にSoldierとHealerしか存在出来ない。

まあ、非常に稚拙なRPGならこれでもOKかもしれませんね。これはこれで先に行きましょう。

<Step.5>

UMGのボタンの作成

4章の目的が分かりました。UE4を初めて触る初心者向け、並びにデザイナー向けに作成しているです。ゲームの作成をするのに全員プログラマーUE4に詳しい人だけで集まる事は難しいです。特に売れるような絵が描けるデザイナーは敢えてUE4を勉強する必要はない訳で、やりたくないで終わってしまう可能性が高いです。そういう人向けの内容のようですね。

ただしそう考えるとUE4の全くの初心者にUMGから教えるのは中々妙手ですね。初心者やデザイナーの人はUE4を全部理解しようとは最初から望んでないですし、作った物がすぐに表示されるのは楽しいですから。これはいいアイデア頂きました。

f:id:kazuhironagai77:20190811201826p:plain

出来ました。

<Step.6>

UMGの目録(inventory)サブメニューの作成

f:id:kazuhironagai77:20190811201857p:plain

教科書通りに作成しました。特に述べる内容はありません。

<Step.7>

UMGの装備サブメニューの作成

f:id:kazuhironagai77:20190811201927p:plain

出来ました。

サンプルコードで確認していたら

f:id:kazuhironagai77:20190811201956p:plain

Soldier の後ろにテキストがあってLvl.と書かれていました。これを完全に忘れていたので付け足します。

f:id:kazuhironagai77:20190811202022p:plain

3つとも付け加えました。

<Step.8>

キーバインド(Key Binding

ポーズメニューを開くためのキーをバインドします。ポーズメニューは戦闘中は開けませんので前章で作成したFieldPlayerのブループリント内でセットします。

とありました。

教科書通りにセットしました。

f:id:kazuhironagai77:20190811202112p:plain

教科書ではPを指定していますが、PC以外でプレイする場合を考え、

f:id:kazuhironagai77:20190811202133p:plain

こっちでセットすべきでしょう。

テストしてみます。

Pを押すとポーズ画面が表示されました。出来ました。

f:id:kazuhironagai77:20190811202155p:plain

<Step.9>

ボタンのプログラミング

ボタンのプログラミングをしていきます。

f:id:kazuhironagai77:20190811202341p:plain

出来ました。テストしてみます。

f:id:kazuhironagai77:20190811202404p:plain

Inventoryを押しました。

f:id:kazuhironagai77:20190811202428p:plain

Inventoryが表示されます。Backを押します。

f:id:kazuhironagai77:20190811202510p:plain

Equipment画面に移動しました。Backをクリックします。

f:id:kazuhironagai77:20190811202543p:plain

メイン画面に戻りました。Exitを押します。

f:id:kazuhironagai77:20190811202609p:plain

最初の画面に戻りました。普通にプレイヤーを操作出来ます。

成功ですね。

<考察>

今回の内容そのものは大変基本で、初心者あるいはデザイナー向けの内容のような気がします。私、簡単な事をやらなくてはならなくなると途端にやる気がなくなってしまい、結構グダグタしてました。ウェブデザインの研究を応用してUMGのデザインを考える事についての考察も後で、やる事にします。