みつまめ杏仁

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

マテリアル

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

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

UV座標の計算をマテリアルでやらせると指定がラクチン

以前、マテリアルのパラメータ指定で細かい小数を扱っているのを、改良する記事を書きました。 limesode.hatenablog.com 今回はもう少しだけ発展させます。 テクスチャの一部を切り出して使うには、UとVの2つの値を扱うことになります。このUとV、2つの値…

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

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

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

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

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

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

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

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

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

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

マテリアル操作で簡単アイコン切り替え

UMGのマテリアル操作でアイコンイメージを切り替える記事を前に書きました。 ちょっとだけラクする方法をひらめいたのでメモしておきます。 簡単といっても指定が楽になる程度ですが。 limesode.hatenablog.com このときは、アイコンのUV値(テクスチャ内の…

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

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

Widgetコンポーネントにマテリアル

4.13にアップデートしてみたら、うれしい機能が追加されてた。 多分VRでWidget使いたいという声が多く寄せられたんじゃないかと想像してみたり。 Widgetはそのままだと、2Dだけど、とWidgetコンポーネントとしてWorld空間に置くと3次元が表示できる。DeadS…

UMGのフォントをアレンジ

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

マテリアルで目パチ

キャラ絵の目パチ(まばたき)は口パクのようにセリフと連動することはありませんが、キャラが生きていることを表現するために必要な演出です。 その目パチの間隔をランダムで制御しようとするとそれなりにノードを組む必要があります。かといってタイムライ…

円形ゲージのアレンジとテクスチャの節約

UE4はマテリアルで円形のゲージが簡単につくれます。公式のドキュメントに載ってるので、ここで紹介しなくてもいいかな~とか思ってたんですが、購読してるブログ、ぼっちプログラマのメモにあった pafuhana1213.hatenablog.com を見てて、ちょっと試してみ…

あのニュゥーって伸びながら出てくるヤツ

スーファミとかメガドライブの頃かな、昔のゲームでよく見かけた気がするんだけど、あのニュゥーって伸びながら絵が出来上がっていくやつをマテリアルで再現してみた。 ちょっと大きいので全体図を a~d のパートに分けて紹介します。 まずは a から。 ま…

マテリアルで棒グラフを作る

カラフルな棒グラフをマテリアルで作ってみたら以外に簡単にできたのでメモ。 ↓どこかで見たことがあると思いますが、UE4で再現してみました。 割合の計算はしないタイプで、パラメータをそのまま追加していきます。 マテリアルのみでテクスチャーは使いませ…

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

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

ラバランプ風のゲージ

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

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

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

残り少なくなったら点滅

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

フキダシを作ってみる

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

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

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

モノクロテクスチャに色を付ける

Unreal Fest 2016 Osaka に行ってきました。 興味深い講演ばかりであっという間でした。中でもヒストリアさんの講演でForeachLoopの処理に関数で定義したMakeArrayの検証が衝撃でした。 よく使ってるからというのもありますが、Pure型か通常型かで、速度に違…

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

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

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

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

UE4のマテリアルファンクションっていいな

マテリアルファンクションが便利なので、よく利用するやつを紹介します。 マテリアルファンクションは、何度も同じパターンのノードをつなぐのが面倒になってきたな~という気持ちになってきたら頃合いです。 ライブラリにできるので、コンテンツフォルダの…

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

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