Widget ブループリントについて その3
Widgetでゲーム内の情報を表示したりインタラクティブ性を持たせてみます。
前回同様widgetブループリントを開きます。
まずはボタンを使ってイベントを呼べるようにしてみます。
パレットからButtonを階層へドラッグアンドドロップ。
imageを置いたときのように左上に白い四角形が現れたと思います。
これがボタンです。画面下側においてみましょう。
おけたら、前々回の記事のように実行したら画面に出るようにブループリントを書きましょう・・・
の前に、ボタンを押すためにはマウスが使えないと不便なのでGameControllerブループリントを作ります。
Show Mouse CursorとEnable Mouse Over Eventにチェックを入れます。これでマウス入力も受け付けます。
一度実行してみると、ボタンが現われますのでマウスでいじくってみましょう。
イベントなどは書いていませんが、ボタンの色が多少変化してレスポンスを感じ取れると思います。
このボタンにイベントを追加します。widgetの編集画面に戻り、ボタンの詳細パネルの
Onclickedの+を押します
すると、このwidgetのイベントグラフに切り替わり、Onclickedのイベントが追加されます。ボタンがクリックされたとき、このイベントが発生します。
では、ボタンを押した回数を表示してみましょう。
Integer型の変数を作ってボタンが押されるたびに+1します。
この値をwidgetで表示します。右上の切り替えボタンを押してデザイナーの編集画面に戻ります。
パレットからTextを追加します。テキストボックスが出ますので位置を変えて値を0としておきます。Textの隣のバインドからバインディングを追加します。
Get Textの関数が作られたと思います。Return Nodeの引数がテキストボックスに表示されます。先ほど作った変数をGetして引数に指定します。
実行してみると
ボタンを押すたび数字が増えていくようになりました。
今までの事柄を応用すればゲームに役立つ多くのことができるかと思います。
ほかにもたくさんwidgetには機能がありますが、基礎の基礎を学べたということでwidget関連はこのへんで。
Widget ブループリントについて その2
前回扱ったwidgetでアニメーションで簡単なトランジション（画面転換の効果）を作ってみます。
黒単色の画像を用意しましょう。大きさは適当で大丈夫です。
前回同様widgetの編集画面を開きます。
パレットからimageを階層へドラッグアンドドロップ。
黒い画像を適用したら画像をCanvas Panelいっぱいに敷き詰めましょう。
ここで役に立つのがアンカーです。ｌ
画像の基準点を決めるもので座標を打ち込むとアンカーからみた座標で画像が表示されます。
例えば、一遍に敷き詰めたいときはアンカーを押して一番右下の全面が白いボタンを押すと全画面基準の座標になるわけです。この状態でオフセット○○の値をすべて0にすれば画面一杯に敷き詰まった状態になるのです。
ここまでが準備段階です。
ようはこの黒い画像をアニメーションでどかせば（チープですが）トランジションにできるというわけです。
左下にある緑色の+アニメーションを押してアニメーション名を決めます。
隣のほうに緑色の+Addがありますのでそこから黒い画像を表すimageをアニメーションに追加します。
詳細パネルのオフセット○○などの数値の左にあるマークでキーフレームを打ち込みます。キーフレームについては動画編集ソフトやMMDなどでよく登場するのでそちらのほうの解説をご覧いただくといいかもしれませんが、
この時点でこの値がこの状態になるようにソフトが補間してくれる
と思ってくだされば不足はないかなと思います。
0秒時点のオフセット○○の値をキーフレームに追加したら下のバーを1秒のところに持っていき黒い画像をどかしてキーフレームに追加しましょう（どこにどかしても大丈夫ですが平行移動がいいでしょう。オフセットLeftの値を画面サイズの1920にして追加）。
キーフレームに追加ができない、押しても反応しないときは+Addの右側のひし形のマークが選択状態になるようクリックしてみましょう。
下のほうにある再生ボタンを押すと黒い画像がずりっとどいてくれたのではないでしょうか。
これを場面転換時に再生すれば何もないよりはなんとなくカッコがつく気がします。
画像を真っ黒にせずにふすまとか何かしらのデザインを施せば文句なしかな。
ブループリントでアニメーションを呼び出すときは、
こんな感じになります。playanimationの引数playmodeをリバースにすると逆再生ができますので、トランジションでin,outができます。
次回はwidgetからイベントを起こしたりしてみます。
Widget ブループリントについて
最近unreal engineを使っているのですが、２D画像を扱うときに”widget”なるものがかなり便利に扱えることを知りましたので覚書。
画像系はHUDを使って描画できますが、ただ描画するだけならまだしも移動や拡縮、回転をブループリントで施すとなると少々骨です。扱う画像が多くなるとスパゲッティどころの騒ぎではなくなります。
そこで登場するのがwidgetです。まずは一枚画像を表示させてみましょう。
新規ブループリントを作成から以下のUser Widgetを選んでみます。
開いてみると、このような画面になるかとおもいます（右上でデザイナーが選択されてるのを確認してください）。
これがwidgetの編集画面です。
真ん中の点線枠が実際の画面サイズになるので実際に画像を置きながらレイアウトをきめることができます。
実際に編集していきます。
左のパレットからimageをCanvasPanelの下にドラッグ＆ドロップ。
すると点線枠の左上のほうに小さな白い長方形が現れたかと思います。
詳細パネルのAppearanceからimageを選んで使いたい画像を選ぶと白い長方形が画像に変化したかと思います。
画像自体をマウスで動かしたり拡大させたりしていい感じの位置になったらひとまずコンパイルし保存。いい感じの位置にするのに便利なアンカーという機能もありますが説明はまた次回。
ゲーム内に実際に出すにはCreate Widget を使います。Classに今作ったWidgetブループリントを選択してAdd to Viewport（以下のようになります）。
実行してみると、
unreal engineのスクショを画像に使ってしまったのでややこしいかもしれませんが・・・2D素材が思い通りの位置に来たかと思います。
次回はこれに視覚的な動きを与えていきます。
ブログをはじめました。
初めまして、びきたろうと申します。
ゲームプログラムを学んでおります。
制作活動をしていくにあたりブログを開設し、どんな事をしてるのかをこれから書いていこうと思っています。
具体的には今作ってるゲームや昔作っていたゲーム、それに付随する技術のことがメインとなっていきます。
また、プレイしてみて感じたことのあったゲームのこと、ゲームに限らない趣味のことにも及んでいくかもしれません・・・
よろしくお願いいたします・・・
