みつまめ杏仁

アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

UMG

キャラセレを作ってみる おまけ編

続きです。 シンプルな作りですが、キャラセレ画面としてある程度必要と思われる内容まで用意できました。今回はキャラを選ぶにあたっての能力値をグラフで表現したものを作って追加します。 まずはテクスチャ。 40x40 のグレースケールでアルファチャンネ…

キャラセレを作ってみる デカキャラ編

サムネイルが登場して、カーソルを動かしてフォーカスを切り替えるとこまでできました。つぎはカーソルの指しているキャラの大きな絵が シャッ!とかシュッ!とか言いながら入ってくるのを作ります。いや言いませんね。オノマトペです。 ではさっそく、新し…

キャラセレを作ってみる カーソルを動かす

最近話題のハンドスピナーが売っていたので買ってみたのですが、振るとチリチリと何やら小さなパーツが跳ねる音がします。回すとシャーと音がして1分も持ちませんが雰囲気を楽しむ程度には堪能できた、気がします。 さてさて前回の続きです。まだまだ続いて…

キャラセレを作ってみる サムネイルを並べる

どうもです。まだ続いてますよ~。 あまり間が開かないようにしたいのですが、なかなか時間がとれなくてペースが悪いですが頑張って更新していきます。UE4でUIを作ることになった初心者の方向けに、オペレーションを幾分丁寧に書いてるのもありますが、そろ…

キャラセレを作ってみる サムネイル編2

前回のつづき Widgetブループリント サムネイルの絵とアニメーションが用意できたのでいよいよブループリントを触っていきます。編集モードをDesigner から Graph に切り替えます。 まずは必要そうな変数を2つ用意します。 ひとつは自分自身の番号を保持し…

キャラセレを作ってみる サムネイル編

前回の続き ちなみにサムネイルのスペルは thumbnail ですよ皆さん。 選択用サムネイルを作る まずはサムネイルの準備をします。テクスチャにはキャラクターの顔が複数並べてあるので、このままでは使えません。そこで部分的に切り出すためのマテリアルを用…

キャラセレを作ってみる 背景編

前回の続き テクスチャのアセット化 テクスチャ素材の準備ができたところでUE4のアセットに変換します。方法は2つあって、作ったテクスチャを、コンテンツブラウザから右クリックしてインポートするか、フォルダからドラッグ&ドロップすることでアンリアル…

キャラセレを作ってみる 素材編

UE4のUMGでUIライフを楽しんでおられる紳士淑女の皆様いかがお過ごしでしょうか。 久しぶりにガッツリとUI画面でも作ってみようかな~と、思い立って準備を進めてみたものの結構かかってしまった。ゲームにはつきもの、キャラクターセレクト画面を作ってみよ…

はみ出た文字のサイズを調整

久しぶりの更新。なかなか記事を書く時間がないので困ったものです。 NintendoSwitchにもUE4が対応するということで、どんなゲームUIが出てくるか楽しみです。 さてさて以前テキストに合わせてフキダシの大きさを変えるのを書きましたが、今回は逆に決められ…

テキストブロックのスクロール 続き

前回の続きでスクロールバーを付けてみます。 limesode.hatenablog.com 以外にサクッとできました。まずはUMGのパーツを追加するところから。 スクロールバー全体の大きさを決めるキャンバスパネルを親にして、スクロールバーの下敷きとバー本体を表すImage…

テキストブロックのスクロール

テキストブロックで、長文を表示しようとしたときに、たいていAuto Wrap Text(=自動改行)にすると思います。 文字量が多いとサイズが大きくて表示しきれないので、スクロールさせるのが我々UI業界では当たり前の仕組みです。 UMG パーツ まずはイイ感じの…

UMGでよくやらかすやつ

最近カレンダーを見るのが怖い。 年が明け、あっという間に1月も残り1週とちょっと。ブログの更新もペースが落ちて前回から随分間が開いてしまいました。世間から忘れ去られないように頑張っていきたいと気合だけは入れているのですが・・・ さてさて、今…

フォントのフチドリを試す

遅ればせながらようやく 4.14インストールできた。 なんといっても試してみたかったのが、フォントのフチドリ機能! というわけでさっそくWidgetを作ってみる。 Designerモードで、Textblockを置いたところ。 設定を確認してみると、特に変化は見られない・…

5分で作る マテリアルを使わないゲージ

超簡単お手軽ゲージを作ってみます。マテリアルは使いません。 Widgetブループリントを一つ用意します。 キャンバスに配置するパーツは3つ。 ゲージ用のキャンバスとゲージの下敷きは同じ大きさにします。下敷きは暗めの色にしておきます。 ゲージ本体の「I…

スタッフロールをつくる 《完結編》

鶏肉は柔らかいのより噛みごたえのある方が好きです。 で前回の続き。 limesode.hatenablog.com 名前を表示するための器が用意できたところで、次に必要なのは中身です。 スタッフロールには関わった多くの人々の名前が載るので結構な行数になることが多く、…

スタッフロールをつくる 《Widget準備編》

画面の下から出てきて上に消えていくだけの、どシンプルなスタッフロールを作ってみました。 今回用意するアセットは以下の6種類8個。 右のWidgetブループリント3つはほとんど同じ内容。 スタッフロールは、ただ名前が並んでるだけではなく、組織やグループ…

わりと本気のコンボカウンター 《完結編》

いよいよ動作確認です。 前回の記事はこちら わりと本気のコンボカウンター 《準備編》 - みつまめ杏仁 わりと本気のコンボカウンター 《UMG編》 - みつまめ杏仁 わりと本気のコンボカウンター 《Widgetブループリント編》 - みつまめ杏仁 一揃いのアセット…

わりと本気のコンボカウンター 《Widgetブループリント編》

続きです。 前回の記事はこちら。 わりと本気のコンボカウンター 《準備編》 - みつまめ杏仁 わりと本気のコンボカウンター 《UMG編》 - みつまめ杏仁 Widgetブループリント 絵的な素材が用意できたところで、いよいよブループリントに手をつけていきます。 …

わりと本気のコンボカウンター 《UMG編》

わりと本気です。コンボカウンターです。ということで前回の続きで用意したマテリアルをUMGにセットしていきます。 limesode.hatenablog.com レイアウトする Widgetブループリントを作ったらさっそくパーツを配置していきます。 全体の位置調整用にCanvasPan…

わりと本気のコンボカウンター 《準備編》

ちょっとガチなコンボカウンターを作ってみようと思い立って始めてみたら、意外に時間がかかってしまった。まぁほとんど寝落ちが原因だけど・・・ コンボカウンターは格ゲーではお馴染みの表示です。アクションゲームやシューティングゲームでも見かけます。…

アセットを作らずにWidgetを作る 《おまけ》

前回の記事でWidgetブループリントで、テキストWidgetを好きなだけ作ってキャンバスに置く方法を書きました。 limesode.hatenablog.com これを使って遊んでみました。正直何の役にたつか謎なので、暇つぶし程度にしかならない気がする・・・ まず前回の記事…

アセットを作らずにWidgetを作る

Widgetで何か表示しようとすると、UMGでキャンバスにパーツを置いていきます。これはあらかじめ表示する数が分かっている場合ですが、数を必要に応じて動的に配置したいときは、別のWidgetブループリントをアセットとして用意しておいて、これをCreateWidget…

UMGでリストボックスを作ってみる 《おまけ》

前回作ったリストボックスにもう少しだけおまけを追加してみようかと。 limesode.hatenablog.com limesode.hatenablog.com リストボックスは、全体の一部分しか見えていないので、「もうこれ以上ないよ」または「まだ続くよ」というのをユーザーに伝えてあげ…

UMGでリストボックスを作ってみる 《続き》

前回でリストを表示するとこまでできました。 limesode.hatenablog.com 今回はカーソルの移動と、表示範囲の移動を作っていきます。 カーソルの移動とキー入力 カーソルを動かすためには、「いまここ」というのが分かっていれば 次に移動する場所が計算でき…

UMGでリストボックスを作ってみる

スクロール機能のついたリストボックスを作ろうと思って、ブループリントを触り始めたら思いのほか手間取ってしまいました。当たり前のように使ってるUIのしくみって作ってみないと分らないものですね。ちょっとボリュームがあるので、うまくまとまるか自信…

UMGのフォントをアレンジ

UE4で扱えるフォントは大きく分けて2種類あります。これは実装方法によって分けられています。ひとつは Runtime(ランタイム)と呼ばれるもので、これはTrueTypeFontやOpenTypeFontでおなじみのアウトライン情報をメモリに埋め込んで利用します。文字の量が…

ゲージの長さに合わせてカラーを変える

Lerp を使うと、AとB2つを線形補間して途中地点の値を拾うことができます。 似たようなやり方で、ちょっと変わったゲージの作り方を紹介します。 まずグラデーションでカラフルにしたテクスチャを作ります。 サイズは小さくていいので 256x16です。 このテ…

ラバランプ風のゲージ

スプラトゥーンのフェス楽しかったです。もうないのかと思うとさみしい。開発スタッフおつかれさまです。 で、そのスプラトゥーンのバトル結果ゲージをつくってみようと思い立ってそれっぽくなったのでメモ。 今回はマテリアルがメインです まずはテクスチャ…

最近気づいた

普段Widgetブループリントを扱ってるくせに、アップデートされていたことに気付いていなかったというのを今更メモ。 リリースノートを隅々まで読めば書かれていたのかもしれませんが・・・ ■ UMGのアニメーションが再生中かどうか isAnimationPlaying ノード…

Lerpノードを使ったスコア表示

alweiさんのブログ Let’s Enjoy Unreal Engine を読んでいて、ふと思いついたので早速試してみたメモです。 あの だらららーってなるヤツ。 まず数字のテクスチャから。 サイズは 512x128で、一文字の大きさは 48x64です。 このテクスチャをインポートして…

残り少なくなったら点滅

体力ゲージが残り少なくなったら点滅させるのを作ってみます。 いろんな方法が考えられますが、簡単なやつをご紹介します。 ゲージは、前回の記事で作ったものを使用します。 limesode.hatenablog.com 体力ゲージ用のマテリアルに点滅する処理を入れます。 ↓…

ちょっと遅れて減るダメージゲージ

最近UE4のマニュアルというかチュートリアルを書く機会があって、急いだせいかさすがに疲れました。でちょっとブログも休憩してました。 久しぶりに書きます。 格闘ゲームの体力ゲージは、ダメージを受けた瞬間に減らします。これは遅延があるとゲージがまだ…

タイマーのカウントダウンと点滅 《予備》

前回の記事でTickを使った点滅処理を書きました。 limesode.hatenablog.com 点滅させるのに Branch を使っていたのですが、使わない方法も試してみたらできたので一応記事にすることにします。 で前回のがこれ↓ それがこうなります↓ 判定処理は確かに無くな…

タイマーのカウントダウンと点滅

格ゲーでおなじみのカウントダウンタイマー表示を作っていて、シンプルだけど形になったのでメモ。 カウントダウンなので残り少なくなるとプレイヤーを急かすように主張しないといけません。最初はたっぷりあるので、チラっと確認できればいい程度の目立ち具…

フキダシを作ってみる 続き

前回パーツを一通り揃えるところまでできました。 limesode.hatenablog.com さっそく表示するところを作っていきます。 まずは、Widgetの編集モードをGraphに切り替えて、EventConstructから。 準備前にパーツが表示されないようVisiblity は Hidden にして…

フキダシを作ってみる

テキストブロックのサイズを取得する方法がわかったので、 応用編として、テキストブロックのサイズに合わせてフキダシの大きさを調整するしくみを考えてみた。 ↑かの ウォルト・ディズニーの言葉です。 (この微妙な中華系のフォントが気になる・・・) 9 S…

テキストブロックのサイズを取得する2

前回、動的にテキストブロックに流し込んだ文字列の長さを取得してポジションを調整してみよう、という内容でしたが、 limesode.hatenablog.com Widgetコンポーネントにして表示すると Force Layout Prepass が効かなくなるということが判明しました。Widget…

UMGのテキストブロックのサイズを動的に取得する方法

Widgetで、あるテキストを表示するとして、さらにローカライズすることが分かっているとき。どのように作りますか? 翻訳されたテキストを見て、一番長そうなドイツ語やロシア語なんかに合わせて 固定サイズで作ると、ちょっと短い言語の時にカッコ悪いこと…

UMGでマテリアルアニメーション制御

UMGでImageパーツを利用する際に、テクスチャではなくマテリアルをセットすることができます。このマテリアルにパラメータを仕込んでおいてアニメーションしようと思ったときどうしますか? 普通のブループリントだと、タイムラインノードが使えますが、UMG…

Widgetを出したり消したり

Widgetの取り扱いについて気になることがあったので、ちょっと調べてみました。 まず、Widgetを画面に表示するには、いつものコンビネーション。 Create Widget ノードと Add to Viewport ノードです。 大抵のサンプルはこの辺でめでたしめでたしなんですが…

Enumを使ったチェックボックスUI 続き

前回Enumでチェックボックスの内容(テキストラベル)を管理する方法を紹介しました。 limesode.hatenablog.com 今回は操作が完了して閉じる際に、並んだチェックボックスから状態を取り出すところを書いていこうと思います。 まずはWidgetから編集開始。 自…

Enumを使ったチェックボックスUI

前回Enumを使った簡単なメモを書きました。 今回はWidgetで応用してみようと思います。 コンソールゲーム想定なので、マウスは非対応です。 UMGのコンポーネントは使いません。Ver 4.11でゲームパッドにも対応したようなことが公表されていた気がしますが、…

1枚のテクスチャから多重スクロール

久しぶりの更新です。 最近はお絵かきの方に精を出してました。 さてさて、多分もうどこかで既にやられてると思いますが、多重スクロールです。 4重です。これを1枚のテクスチャで、一つのマテリアルで作ります。 まずはテクスチャから。 Photoshopを使い…

WidgetでPieMenu的なのを作ってみる

インフルエンザで寝込んでたりしてあまり時間が取れなかったので、久しぶりの更新になってしまいました。正直ネタに困ってたというのもあります。 さてさて 突然ですがハイライト部分がくるくると切り替わるサンプルを作ってみました。 テクスチャを用意しま…

UMG でトランジションを作ってみる

丸い穴が小さくなっていき最後は真っ黒になる、おなじみ?の画面切り替えです。 昔のアニメでよく見かけた気がします。最近のゲームではどうぶつの森で使われてます。 トランジションのアイリスエフェクトとかいうそうですが動画は詳しくないのと編集ツール…

UMGでキラキラ効果

UMGでキラキラ効果を作ってみます。 UMGの動画キャプチャがうまくいかず、静止画しか載せられませんがかなりキラキラします。用途が伝わりにくいかと思い頑張って金塊の絵を描きました。 リワード演出とか、ランクアップ演出とかで使えるのではないかと。 キ…

UE4で 「7セグ」表現を作ってみる

いかにもデジタルな見た目の数字といえば、7セグです。 Amazonで気になる商品名を見つけたので貼ってみます。 幻の5速! シフトインジケーター 5速表示 鮮やか 赤の7セグ DIY カスタム 出版社/メーカー: akindou メディア: この商品を含むブログを見る これ…

Widgetでじゃらじゃらじゃら~ばん

スコアとかの数字がもったいぶって確定するアレです。 ドラムロールなんかがSEだったりするとドキドキしたりするアレです。 くるくる回ったりしないので、作るのは簡単です。 いままでの作りとそれほど変わらないので、新しいテクニックはほぼ出てこないと思…

Widgetで回転する数字カウンタを作ってみる 《改二》

交通量調査とかで使ってるカウンタは、ボタンを押すたびに一番右端の桁が回ります。 それが 9まで回って次の 0になると同時に、繰り上がってようやく隣の桁が一つ進みます。この仕組みが不思議で、子供のころよく見入ってました。ラジカセにはテープカウンタ…

Widgetで回転する数字カウンタを作ってみる 《改》

前回のしくみだと、それぞれの桁が0から目標の数字に向かってUV移動するので、100000 みたいな場合ほとんど動かないことになってしまいます。 もう少しそれっぽく回してみようということで前回の記事で作ったWidgetを改造することにします。 実際のカウンタ…