みつまめ杏仁

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

マテリアル

ゲージをテクスチャで増減させる

円グラフのように増減するゲージを作るとき、atan2(アークタンジェント2というプログラムの関数)をありがたく使わせてもらっています。少ないノードで実現できてしまうので、大変便利でありがたい存在。解像度に依存しないのもうれしい。ゲームで印象に残…

端が斜めゲージの端っこ

ゲージの端が斜めになっているタイプの作り方について書いてみようと思います。 シンプルな四角形ではあるけど安っぽく見えないのがいいですよね。ただ両端の処理をちゃんとやってるか、やってないかでクオリティに差がでてきます。 アンリアルエンジンのUMG…

四角いゲージばかりじゃつまらない

画像を使ったゲージの上限と下限を調整する方法

目パチの次は口パク

BoxMask-2D ノードを使った口パクを試す

マテリアルで目パチ2

過去記事にコメントを頂いたので、アップデートの意味も込めつつさっそく試してみました limesode.hatenablog.com 2パターンの絵を IF ノードを使って切り替えていました。(↓UE5で作成) IFノードの A==B って判定がシビアで、個人的に観測をできた経験が…

スコアを表示する方法について試してみた

テクスチャのタイリングでスコアとかの数字を表示できないか試してみた

ボタン長押しゲージを作ってみた《ゲージ編》

まだ暑い日が続いているけれど、重そうに曲がった稲穂や果物売り場を見て秋の訪れを感じる今日この頃。円形のゲージを作ろうと思って、以前からちょくちょく遊んでたグラデーションマップ(Photoshopでいうところの)を試してみたら結構カンタンに作れたので…

スライダーUIを並べて操作してみる UE5版 続き2

前回の続き 基本の土台としてはそれなりにカタチになったと思うので、スライダー以外のUIパーツを作ってみようと思います。 今回の仕様はキーボードのカーソルキーで操作する想定にしています。 スライダーがUIパーツとして登場する画面にありそうなやつを 3…

雑記#20220718

夜帰宅中、歩いていると聞きなれない音に気付いた、壊れた電子ブザーみたいな音で、長く一定のトーンで聞こえてくる音。まだ蛙の声も聞こえる時期なので秋の虫も少ないせいか際立って聞こえてくる。そういえばどうぶつの森で聞いたことがあるような・・・調…

雑記#20220710

ひさしぶりに書きます ネタが途切れたのもあって、少ない脳ミソのリソースを会社員モードに全振りしていたらいつの間にか梅雨が明けて蝉が鳴く季節になるまで放置。さすがに寂れるだろうと思っていたんですが、しみじみと閲覧数を維持できているのは驚きと同…

3DメッシュでつくるUI ー 矢印をつくる

ゲームのUIを作っていると一度くらいは矢印をデザインすることがあると思います。今回は動きのある矢印を3Dメッシュでつくります。動きといってもUVのスクロールです。テクスチャのUVを移動させることで絵が流れて見えるやつです。 前回の記事で使ったカーブ…

3DメッシュでつくるUI ー カーブ利用編2

ちょっと間が空いてしまいましたが、前に書いた記事では、ウィンドウ下敷きのような、そこそこ面積のあるものを描画する場合、テクスチャを節約する目的のメッシュをカーブから作る流れを紹介しました。 カーブを作ってから、いったんメッシュにしてFace(面…

HPゲージをいろいろいじってみよう ー もっと動きをつける

前回の記事でいろいろ見た目をアップさせる小技を紹介しましたが、今回はいろいろ動きのあるものを入れたものを紹介していきます。 あくまでも一例にしかならないのですが、いくらかヒントになれば幸いです。 先の記事からの続きとなっていて、値を変える関…

HPゲージをいろいろいじってみよう ー 見た目を工夫する

ゲージのデザインは、ゲーム進行においてとても重要な役割なのに、UIの主役には絶対なれないし、主張するとウザがられ、空気読めよ邪魔だよとか言われて面積を大きくとれなかったり、え?いつの間に体力ゼロ?なんで?今の攻撃結構減ったな、ヤバい!回復し…

雑記#20210417

今年も新人さんたちが入社してきました。去年のこの時期はいろいろとアレやコレやでもう大変でしたが、新型コロナに気を取られてもう一年が経ちました。早いものですね。まだまだ脅威は去っていないというかむしろ近づいてきてる気がするので、戦々恐々とす…

9スライスを試してみたメモ

ダイアログウィンドウなんかのサイズが可変するウィンドウでよく見かけるUI表示で、制作環境によって呼び名が変わるようです。9スライスとか、9-patch とかいうやつ。 UE4でももちろん標準実装されているのでとても手軽に使えます。 詳しくはこちらの記事。 …

レーダーチャート作ってみた

いやぁレーダーチャートですよ。ゲームのUI作ってると、避けて通るのが難しいというか、ヘタに避けると事故るというか、かといって簡単には実装させてくれないというツンなところが憎いレーダーチャート。ステータス画面でキャラの成長度合いや武装なんかの…

雑記#20210219

最近Twitterにあげたやつ Discordのあれを 1枚のテクスチャ で試してみた。回転アニメーションはUMG#UE4 pic.twitter.com/LrRYPmifHp— みつまめ杏仁 (@MMAn_nin) 2021年2月13日 とくに何かに使えそうというほどのものではないけど、つい出来心で「テクスチャ…

ゲージの見た目をいじる

前回の続きです ゲージの見た目を改造していきます まずはテクスチャを使ったアレンジ といってもグラデーションを乗せるだけ 用意したのは 128x16px のテクスチャ。 ← 実寸 インポート時にタイリングの設定を変更しておきます。 UVを動かしたときに、狙っ…

自動回復するゲージ

なんとなく両端から増減するゲージを作ってみたくなって、マテリアルで試してみた。 両サイドから増減するゲージを作っていたら、なんとなくスタミナゲージぽいのができた#UE4 #ue4UMG pic.twitter.com/XiLUNbaNNv— みつまめ杏仁 (@MMAn_nin) 2021年2月1日 …

雑記::20210130

最近Twitterにあげたやつ stepノード触った記念に、ポストプロセスマテリアルでSceneDepthに使ってみた。なんか無理やりだけど。 pic.twitter.com/gyVW6KcMrH— みつまめ杏仁 (@MMAn_nin) 2021年1月25日 動きは上のツイートから確認できます。 UE4がゲーム画…

雑記::20210127

最近Twitterにあげたやつ UE4 Ver4.26 でマテリアルノードに step 追加されたので使ってみた。以前のVerまではValueStep というノードがあって、それで代用していました。 入力ピンの名前が Y と X になったので、仕様が分かりにくくなった気がします。 ↓こ…

雑記::20201231

2020年も今日で終わり、明日からは令和も3年ということで、1年間本当におつかれさまでした。このブログも開始から5年が経過しました。記事の数は181。ペースはのんびりですが、よく続いたなぁとしみじみ思ってます。いつも多くの方に閲覧いただいてて、それ…

斜めになったメニューボタンでも~後略 《いろいろ試す編》

当ブログでは、CEDECで取りあげられることのない、ゲームUI開発で明日使えるかもしれない小ネタを主に扱っています。ためになるかもしれないし、ならないかもしれません。 さてさて 最近、斜めになったボタンでもマウスカーソル(ポインタ)を検出できるかと…

斜めになったメニューボタンを並べてみる《テスト編》

前回のつづき 検証もできて満足したので、そのまま選択するとこまで作ってしまおうと勢いづいて作り込んでみました。 あらかたできた時点でTwitterに上げたのですが、このブログで記事にしていく途中で、いろいろ足りてないところを発見。不具合を直したりあ…

斜めになったメニューボタンでもマウスに反応するか試してみた

COVID-19のなんやかんやで緊張しながら日々過ごしていたらもうお盆の時期。心なしかセミの声も元気がないような気もする。近所の田んぼでは稲の穂もチラホラ見えはじめたのでまた花粉に苦しむことになる予感・・・。 先日 Twitterで、シアーで傾けたUIでもマ…

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

蝉の声はまだ数が数えられるくらいしか聞こえてこないけど、確実に夏に向かっていることを感じます。この時期なると現れるジャンボタニシの卵塊を見るたびに、早く駆除されてほしいと願いつつ、アクセントカラーはいくら綺麗な色でも場所を選ばないとダメだ…

最近のツイートまとめ

普段ほとんど呟かないのですが、自宅待機中なので、それとなく何か役に立ちそうなネタを、思いついたものから試して呟やいていこう。そうすれば仕事してる感覚を忘れなくていいかもしれない。と思い立って1日1UIネタ投稿を実践してみたものの、早くもネタ…

スクリーンスペーステクスチャで遊ぶ

もうすぐ大晦日、あっというまに令和も2年、このブログも2015年の12月から書き始めてから4年を迎えました。UMGに偏った内容でありながらも良く続いてるなと思います。読んでくださってありがとうございます。すこしでもお役に立てているなら幸いです。 ここ…

キャラ絵のテクスチャを作って表示する《後編》

前回の記事で、RPGバトル画面風のUIを作る想定で、キャラのバストアップをテクスチャにしてUMGに仕込むところまでを書きました。その続きを作っていきます。 材料はあらかた用意できたので、あとは実用に耐えるように関数をいくつか準備します。 まずはゲー…