Unreal Engine (UE) - Qiita Advent Calendar 2025 - Qiita アドカレ 19日目に参加させていただきます。 ゲームUIのことで何か、ということで、最近のゲームUI開発について思うところをちょこっと書いて、キラキラしようと思います。 多分察しておられる方も…

なんとなく今まで紹介してきた方法を思い出しながら挑戦してみてほしいなと、ふと魔が差してしまい、前回の記事では見た目に盛り合わせた要素をヒントと称して軽く説明するにとどめました。 今更タネというほどもったいぶるようなテクニックがあるわけではな…

ついにこの時が来た。2024年の6月16日から書き始めてから１年以上かかってしまった。途中ネタ募集したり余裕がなくなったりして継続が危ぶまれたけど、それなりに楽しめたので、頑張った甲斐があったなとしみじみ思う。 今までの集大成といえるかは怪しいけ…

いつの間にか夕暮れも早まり、ようやく夏の勢いも少し弱まってきたように感じていますが、ここしばらく夏バテか何かわからない不調を引きずりつつ過ごしています。 この企画も残すところ２本ということで、実装を意識した構成にしてみようと思います。 プロ…

ぷちコンの制作に集中してたので前回の記事から一か月も更新が止まってました。 今回もマテリアルインスタンスを使ったケースです。ゲージ自体はシンプルにバータイプで増減するだけ。このゲージの増減に連動するようにエフェクトを纏わせます。 ゲージをじ…

いつもの100本ノックの前に軽く、先日のぷちコンに応募した作品について振り返ってみようかと思います。 youtu.be 期限いっぱいまで奮闘してたので提出してからしばらく燃え尽きてました。 第24回目のお題は「スピード」 珍しく具体的なワードだなという印象…

ほんと暑いですね。アイスコーヒーがおいしい。希釈用のリキッドは濃さを調節できるので、氷をたっぷり入れて水は少なめ。ゆっくり溶けていくのをちびちび飲んでます。 さてさて UEでは マテリアルインスタンス というアセットがあります。 マテリアルを継承…

長さや目方を測るために等間隔に刻まれたしるしを「目盛り」というのですが、「目盛る」という動詞があるそうです。辞書を引いて知りました。 たまにゲージに乗っているのを見かけることもあります。シリンジ（注射器）やアルコール温度計、メスシリンダーあ…

UIで扱うシェーダーは、PBR（物理ベースレンダリング）や VFX、ポストエフェクトに比べると、地味でささやかなものが多くなりがちです。ゲームのUI表示は半透明が基本なのと描画順によるところがその主な理由です。 シェーダーを使う＝なんかスゴイイイカン…

一年近くかかってゲージ100本ノックもいよいよ残りわずかになりました。 今回は点滅の方法について３種をピックアップします。 補間なしで切り替わるタイプ、滑らかに切り替わるするタイプ、テクスチャを使ってタイミングをコントロールするタイプの３つ。 …

いよいよ90の大台に到達。前回は燃やしてしまったので今回はキラリとハイライトを走らせようと思って4つのタイプを用意しました。 ゲームのUI表示って普通の3Dのようにライティング＆シェーディングすることは稀です。 主に視認性の確保（エッジをくっきりと…

ついに燃やすときがきました。 グリッチやディゾルブと並んでテクスチャに対する依存度と演出目的の度合が高いので優先を下げていました。 2Dの絵素材が燃えるという表現はそれなりに目を引くものの、ゲームの世界観やシチュエーションが合わないと不自然に…

テクスチャをリソースとしてパッケージに組み込む際、特別な用途を除いて圧縮されるのが普通です。圧縮でのピクセルの荒れを少しでも抑えるためにテクスチャの色数と複雑さが少なくなるように工夫します。今回はシェーダーでドロップシャドウを作り出します…

去年の6月から書き始めてもうすぐ一年。のんびりな更新でようやく80本の大台に乗りました。この企画が世の悩める UI開発者様へ少しでも助けになれば幸いです。 今回は、見た目９スケールのようですが、テクスチャを使わないでフチドリを作ります。最近見たゲ…

今回は複数のゲージが重なったような見た目を作ります。 77. はよく見かけるやつなので、ゲージの仕様については特に書かなくても大丈夫でしょう。アクションゲームとかでダメージ量がわかりやすいので採用率高いですね。 78. は 77. の応用として色数を増や…

引き続き、シェーダーに慣れるためのチュートリアル的なゲージを100本作ろうぜという企画です。UI用途を想定していて、扱うのは2Dを基本としています。UVの加工やピクセルの表現バリエーションを増やすのが主な方針です。 年度末やらでいろいろと気ぜわしく…

まだまだゲージ作っていきますよー なんとかネタが続いててハラハラしてます。 さて今回もUV空間をいじっていきます。UIならではの表現になると思うので、しっかりマスターしてドヤ顔してやりましょう。 UV空間とは、とあるポリゴン面にテクスチャを貼り付け…

前回に続いて、UVの反転を使ったテクスチャの節約術を紹介。 あくまでもゲージを100本作ったらシェーダーへの理解が深まるんじゃないか企画です。 ゲージとして TexCoordノードを利用しましたがテクスチャに利用すると線対称な表示が可能なので、実質半分の…

去年から慌ただしかった仕事は 完全に終わったわけではないけど、急にやることがなくなってしまった。プレッシャーからは解放されたのに まだ慣性が残っている感じで、すぐには止まれないという焦りとか罪悪感とか、承認されるまでは気が抜けない不安なんか…

前回の記事で振動するゲージを作りました。少し前にゲージをテストするためのプロジェクトを作ったので、そこに振動するゲージを組み込む流れを書こうと思います。 続きになるので、過去記事のリンクを貼っておきます。 limesode.hatenablog.com エンジンの…

UIアーティストのためのシェーダを学習するためにゲージを100本作ろうプロジェクトを始めてようやく2/3近くになりました。年内に100本終わりそうにないのは悔しいですがネタを集めつつぼちぼちやっていきます。 今回振動するゲージをネタでいただいたので作…

今回の内容は前回の記事のオマケ的なやつです limesode.hatenablog.com 弾が当たると、ゲージが減るところまで作りました。今回マイナスにならないように「ゼロになったら」という判定を追加するのと、青キューブにリアクションを追加します。 体力がゼロに…

シェーダーでいろいろ作ったゲージをすぐに試せるように、簡単なゲージテスト用プロジェクトの作り方について書いてみようと思います。アーティストでブループリントを普段あまり触らない方向けの内容にしようと思うので、操作方法についてはいつもよりは細…

先日 X でネタを恵んでくださいとお願いしたら、いくつか頂戴したのでもう少し続けられそうです。ありがとうございます。今回は前回作ったゲージで使ったディゾルブテクスチャを使ったネタを紹介します。ゲージ本体とは直接のつながりはないですが、シェーダ…

前回の記事書いたときはまだ稲刈りも終わってなかったのに、スケジュールが不安定だったり体調崩したりしている間にもう11月。日が暮れるのも早くなってますね。 100本のゲージを作ってシェーダーを使えるようになろうということで始めた企画、まだ半分程度…

シェーダー（アンリアルエンジンでいうところのマテリアル）を触れるようになると、Photoshop や Illustrator でデザインを作るときに、ちょっと動きを意識できたり、インタラクティブな表現を盛り込んだ グラフィカルな UI が発想できるようになったり、コ…

ちょっと間が空きましたが続きのゲージです。 シェーダーを覚えたい後輩に大言を放ってしまったのがきっかけで書き始めたシリーズ記事になります。 単純にシェーダーだけとなるとバリエーションをひねり出すのが難しいのと、ゲームの仕様に依存するタイプの…

前回作ったサインカ～～～～ブテクスチャをもうちょっと使っていきます。 ゲージの機能としてはスタンダードなつくりだけど、見た目を変化させてちょっとした味わいを付加してみます。 使用したテクスチャは２枚 一つ目がゲージのシルエットを決める基本形。…

～～～～～～～～～なみなみです ゲージをゆらゆらと波のように揺らすやつ。スプラトゥーンで見かけた方も多いかと。最近ゼンレスゾーンゼロの体力ゲージで見かけました。これ先端部分に揺らぎがあるので、残り僅かになるとあとどれくらいかがわかりにくくな…

前回の 38-39 はUV移動するタイプのゲージで背景カラーをくっつけていました。パーツがひとつで済むのが利点ですが、デザインによっては背景部分は別に用意する、もしくは透過で入れたくない場合もあると思うので、ゲージのみの場合を紹介しておこうと思いま…