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

ひきつづき書いていきますよ～ って、これほどゲージについて書いてるブログはここだけじゃないだろうか。別にゲージが好きでもなんでもないんだからね、と言ってみたところでブログのカテゴリーにあるゲージ(34)って年齢みたいな書き方をみても、もう誰も信…

暑いですねぇ、外は溶けるより先に焦げそうなくらいの日差し。日当たりのいい場所にある自転車置き場に数分停めただけで、立ちこぎ必至のシリコゲルサドル完成。 さてさて 今回は予告通りテクスチャのUVを移動させて作るゲージを紹介します。 主な特徴として…

続きです ここまで基礎的な仕組みを押さえるために一気に書いてきたけど、この辺からペースを変えてやっていこうと思います。 過去記事 ゲージ100本ノック 33-36 - みつまめ杏仁 ゲージ100本ノック 17-32 - みつまめ杏仁 ゲージ100本ノック 1-16 - みつまめ…

続きです 前回までのゲージをなにも見ずにサクッと作れるようになったら、たいていのゲージは作れるという思い込みと自信がつくんじゃないかと思います。たぶん付きます。 大丈夫ですコワクナイヨ。 過去記事 ゲージ100本ノック 1-16 - みつまめ杏仁 ゲージ1…

前回の続きを書いていきます limesode.hatenablog.com シェーダーの勉強にゲージを100本作るという、さすがに無茶で無謀な提案を有言実行すべくチャレンジしながら記事にするという企画。途中で挫折しないか心配だけど、やるしかないと心を決めて頑張る。出…

去年末から続いていた余裕のない日々も終息し、仕事以外であれこれ考える時間が持てるようになった。その間にアンリアルエンジンは当たり前に進化、ユーザーもますます増えて共有される情報も豊富になり、取り残されたたような寂しさを感じています。 このブ…

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

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