みつまめ杏仁

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

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

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

UMGの移動アニメーションを作る場合

UMGで移動アニメーションを作る場合、Position と Translation の2種類があって、表示された見た目には違いがないように感じますが、それぞれ仕様が違うので私は使い分けて使っています。 今回はその使い分けについての私なりの解釈をぐだーと書いてみます…

UMGのテキストを動かしてみる

UMGでテキストを表示します。キレイにアウトラインフォントが表示されます。 うん。 ・・・・。 そう、ちょっと刺激が足りないなと、気づいたのです。 このままで終わっていいのか?テキストブロック! お前の人生、ただ指示された通りの文字を並べるだけで…

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

前回の記事でポップアップする▼マーカーを作ってみたのですが、改造することにしました。 limesode.hatenablog.com なぜかというと、このタイプのUI表示は同時に複数出ることがなく、常に一つだけが表示されます。前回の作り方では呼び出し元であるActorの配…

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

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

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

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

Widgetを3Dで扱うときに中の関数を呼び出す方法

いつのまにやらセミの声が凄まじい今日この頃、ふと前回の記事更新から随分空いていたことに気付きました。ようやくエディタのバージョン4.16をインストールしました。Widgetに新しいイベントが追加されてたんですよね。Widgetを3Dで扱うときに、EventConstr…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

マクロライブラリを作る

久しぶりです、大丈夫まだ生きてます。 UIの画面を作っていると、「あとはカーソルを動かせれば完成なのに・・・」「パッドのトリガーでページ切り替えしたい・・・」「ウィンドウを閉じたり開いたりしたい・・・」「Xボタンを押しながらだとスクロールがで…

UE4のテキスト効果

相変わらず記事を書く時間が取れないまま4月ですよ。ニューカマー達が押し寄せてきてます。すぐそこに! というわけで、ぷちネタを思いついたので、書いておきます。 もう誰かがやってそうですが・・・・ なんとUE4の最新バージョンで Widgetのテキストブ…

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

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

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

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

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

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

UMGでよくやらかすやつ

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

アンリアルエンジン4を使いながら

UE4

このブログも始めてから1年経ちました。どーせすぐ飽きるかなと思ってたけど、なんとか続けることができて今更ながら自分に驚いてます。これも素晴らしいエンジンに出会えたからに他ならなくて、ゲームユーザーインターフェイスの制作で少しでもお役に立る…

ストラクチャを使ってみる

前にEnum(いーなむ)を使ったリストメニューについて書きましたが、最近になってUser Defind Structureが便利なことに気付きました。 ストラクチャはプログラム界では《構造体》とか呼ばれているようで、Enumと同じように、アセットで管理できます。Enumと…

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

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

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

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

UE4でパーセント表記

戦績などのスコアを表示するリザルト画面や、武器やキャラのステータス表示で、「命中率」や「回避率」など「○○率」を表記することがよくあります。 この「○○率」を表示してやんよ~というわけで気軽にやってみたのですが、なかなかうまくいきませんでした。…

A と B を交互に切り替える処理でハマった話

TVのリモコンを握っている状況をイメージしてください。 TVが点いていない状態で電源ボタンを押すと起動して、点いている状態で押すと待機モードになります。 どちらの操作も同じボタンを押すことで切り替わります。 このように、A と B の2つの状態があっ…

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

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

最近ハマったつなぎ方

ちょっとネタが無くなってきたのもあって更新ペースが落ちてます。 なので自分のウッカリでもさらしてみようかなと。 それは思ったような値にならず、原因も分からず、しばらく首をひねっていたつなぎ方です。 まずUMGでパーツを置いて、Widgetブループリン…

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

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