みつまめ杏仁

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

マテリアル

テキストのフェード演出を作ってみる

OCTOPATH TRAVELER遊んでます。面白いですよ。「オクトパス」とカタカナで書くと「octopus」だと間違われるかもしれないので、あえてアルファベットで書きます。ということを語りたくなるくらいオススメしたくなるRPGです。 ゲーム中に挿入されるイントロ表…

UMGでコンパス表示を作ってみる

ふと気がつくと最後の更新から1ケ月が過ぎようとしててびっくりです。近所ではセミが鳴き始めました。ノートPCのファンに問題があるようでUE4を起動すると3秒と触れないくらい熱くなるため、ミニUSBファン(コンセント接続)と扇風機で冷やすのですが、マウ…

ちょっと変わった形のゲージをメッシュで作る《宿題編》

E3のトレーラーを見てて、ゲージの長さが可変していたのをみてしまったので、我流ですが対応してみました。 ここでいう可変とは、ゲージの物理的な見た目の長さのことです。成長段階やステータス変化を表現する方法の一つで、長さが比較しやすいゲージを使う…

ちょっと変わった形のゲージをメッシュで作る《おまけ編》

やっぱり下敷きとか枠が無いと完成した感じがしないので作ってみます。 とその前に、前回の記事で満タンを 1.0 に、空っぽを 0.0 という仕様にしていたので、見た目にゲージが見えないのに、まだ「ある」状態が起こる仕様になっていました。いわゆる「表示バ…

ちょっと変わった形のゲージをメッシュで作る《後編》

前回の続き。 カーブを描いたゲージを作る場合、できるだけ細かいメッシュで作らないと、テクスチャが歪みます。細かいメッシュは頂点数が多くなるのでUV編集が地獄です。キレイに比率を維持してまっすぐなUV展開をしてくれるスクリプトでも書ければいいので…

[3D]シンプルなリストメニュー作ってみる

前回のタブっぽい何かに、リストメニューっぽい何かを追加してみます。 背景のマテリアルにPARAGONのアセット使わせていただきました。 その前に前回のマテリアルで、大事な設定を見つけました。 UI 表示では フォグの影響を受ける必要はないので、Apply Fog…

[3D]頂点移動でタブウィンドウ的な何かをつくる

先日4/21のアンリアルフェスに参加してきました。あっという間の8時間で、アンリアルエンジンに関わってる人たちのお話をもっともっと聞いていたい、そんなイベントでした。残念ながら懇親会のチケットは速攻でSOLD OUT。横浜のフェスも行きたいけど遠いな~…

グレースケールテクスチャ 続き

Photoshopでいい感じのグレースケールテクスチャが作れたので、さっそくエンジンで検証します。もちろんUE4です。テクスチャだけの話だったらUnityでも使える内容ですが、ここからはアンリアルエンジンです。 テクスチャは2種類用意しました。 RGB24bpp の…

ボスゲージを作ってみる

RPGとかアクションゲームのボス戦なんかで、ボスキャラの体力がものすご~くたくさんあるのを表現したゲージがありますが、そのひとつ作ってみました。 参考にしたのは、大人気モバイルゲームタイトルのFGOです。 普通は1本のゲージが何本もあるかのように見…

スライダーUIを並べて操作してみる 《おまけ》

キーリピート処理の説明用にスライダーUIを作ってみたら、なんとなくいい感じになってきたので調子に乗って”初期設定に戻す”機能を追加してブループリント インターフェイスまで扱うとこまできたのですが、もうひとつ「ミュート」の切り替えができるようにし…

よいお年を

ついに大晦日ですねぇ。このブログもペースは落ちてますが、なんとかマル2年続けることができました。これも多くの方に読んでいただいているのが、励みになっています。ありがたや、ありがたや。 2年も経つとエンジンのバージョンも随分アップデートされて…

マテリアルで電光掲示板を作ってみる

オモムロに電光掲示板(流れるやつ)を再現してみたくなって試してみたら、なかなかいい感じになったのでメモっておくことにします。 たまにゲームで見かけるのが、ドット風のテクスチャでマスクされて、UVスクロールしているやつ。穴のたくさん開いた板の向…

2枚の絵をマスクで切り替え

このブログもそろそろ2年目を迎えます。よく続いたもんです。さすがにネタに困ってきてる気がしないではない・・・というかちょっと困ってます。 朝、駅のホームで突然ひらめいたりしますが、地下鉄の駅から地上に出たところでスッカリ忘れていたりするので…

話しかけるときなんかのマーカーみたいなやつを作ってみる

今回は、3DのRPGで、NPCに話しかける時なんかに、頭の上につくマーカーみたいなやつを作ってみます。 UIのプロトタイプ的に気軽に試そうと思うので、材料はエンジン内のものだけで作ります。またワールド内に複数配置するのを前提として「タグ」を利用してみ…

スクロールテキストを作ってみる

久しぶりの更新です。大丈夫、まだ生きてます。 電光掲示板なんかでよくある、長さが足りなくてテキストが右から左へ流れるアレをUMGで作ってみました。ただ流れるだけではなく、端っこをフェードさせます。 最近見なくなりましたが、HTML界ではマーキーとい…

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

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

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

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

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

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

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

前回の続き ちなみにサムネイルのスペルは 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でおなじみのアウトライン情報をメモリに埋め込んで利用します。文字の量が…

マテリアルで目パチ

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