みつまめ杏仁

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

2016-01-01から1年間の記事一覧

Lerpノードを使ったスコア表示

alweiさんのブログ Let’s Enjoy Unreal Engine を読んでいて、ふと思いついたので早速試してみたメモです。 あの だらららーってなるヤツ。 まず数字のテクスチャから。 サイズは 512x128で、一文字の大きさは 48x64です。 このテクスチャをインポートして…

残り少なくなったら点滅

体力ゲージが残り少なくなったら点滅させるのを作ってみます。 いろんな方法が考えられますが、簡単なやつをご紹介します。 ゲージは、前回の記事で作ったものを使用します。 limesode.hatenablog.com 体力ゲージ用のマテリアルに点滅する処理を入れます。 ↓…

ちょっと遅れて減るダメージゲージ

最近UE4のマニュアルというかチュートリアルを書く機会があって、急いだせいかさすがに疲れました。でちょっとブログも休憩してました。 久しぶりに書きます。 格闘ゲームの体力ゲージは、ダメージを受けた瞬間に減らします。これは遅延があるとゲージがまだ…

タイマーのカウントダウンと点滅 《予備》

前回の記事でTickを使った点滅処理を書きました。 limesode.hatenablog.com 点滅させるのに Branch を使っていたのですが、使わない方法も試してみたらできたので一応記事にすることにします。 で前回のがこれ↓ それがこうなります↓ 判定処理は確かに無くな…

タイマーのカウントダウンと点滅

格ゲーでおなじみのカウントダウンタイマー表示を作っていて、シンプルだけど形になったのでメモ。 カウントダウンなので残り少なくなるとプレイヤーを急かすように主張しないといけません。最初はたっぷりあるので、チラっと確認できればいい程度の目立ち具…

フキダシを作ってみる 続き

前回パーツを一通り揃えるところまでできました。 limesode.hatenablog.com さっそく表示するところを作っていきます。 まずは、Widgetの編集モードをGraphに切り替えて、EventConstructから。 準備前にパーツが表示されないようVisiblity は Hidden にして…

フキダシを作ってみる

テキストブロックのサイズを取得する方法がわかったので、 応用編として、テキストブロックのサイズに合わせてフキダシの大きさを調整するしくみを考えてみた。 ↑かの ウォルト・ディズニーの言葉です。 (この微妙な中華系のフォントが気になる・・・) 9 S…

テキストブロックのサイズを取得する2

前回、動的にテキストブロックに流し込んだ文字列の長さを取得してポジションを調整してみよう、という内容でしたが、 limesode.hatenablog.com Widgetコンポーネントにして表示すると Force Layout Prepass が効かなくなるということが判明しました。Widget…

UMGのテキストブロックのサイズを動的に取得する方法

Widgetで、あるテキストを表示するとして、さらにローカライズすることが分かっているとき。どのように作りますか? 翻訳されたテキストを見て、一番長そうなドイツ語やロシア語なんかに合わせて 固定サイズで作ると、ちょっと短い言語の時にカッコ悪いこと…

Widget第3のEvent

Widgetブループリントに初めから用意されているイベントは、2つだと思ってたらもう一つあることに気付いたのでメモ。 Event Construct とEvent Tick は編集を開始したら置いてあります。 もう一つWidget専用のイベントがありました。 Event Destruct です。…

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

UMGでImageパーツを利用する際に、テクスチャではなくマテリアルをセットすることができます。このマテリアルにパラメータを仕込んでおいてアニメーションしようと思ったときどうしますか? 普通のブループリントだと、タイムラインノードが使えますが、UMG…

モノクロテクスチャに色を付ける

Unreal Fest 2016 Osaka に行ってきました。 興味深い講演ばかりであっという間でした。中でもヒストリアさんの講演でForeachLoopの処理に関数で定義したMakeArrayの検証が衝撃でした。 よく使ってるからというのもありますが、Pure型か通常型かで、速度に違…

Widgetを出したり消したり

Widgetの取り扱いについて気になることがあったので、ちょっと調べてみました。 まず、Widgetを画面に表示するには、いつものコンビネーション。 Create Widget ノードと Add to Viewport ノードです。 大抵のサンプルはこの辺でめでたしめでたしなんですが…

複数Widgetの操作処理、こんな感じでどうかな?

アップデートして、4.11.2になりました。 前回の記事で艦これ改のUI設計について偉そうなことを書いてしまいましたが、思うところあって勉強がてらUE4で試してみることにしました。 さすがに今までの記事みたいに作り方~なんてのはボリューム的に大変そうな…

艦これ改のUI設計について

UI UX

最近『艦これ』を遊んでます。実は本家は遊んだことは無いので、始めるにはちょうどいいかと思ってVita版を購入。なので正しくは『艦これ改』です。 発売前からUIデザインについてはいろいろ物議を醸してたので、とてもワクワクしてました。元はブラウザゲー…

ブループリントのちょっと便利技

UE4

ブループリントをいじってるときに便利そうな小技をメモっておきます。 【その1】ノードを結ぶ線をつなぎ変えたいときの小技 Ctrlキーを押しながらドラッグすると何本でもまとめて移植できます。 ちなみにラインの途中をCtrlキーを押しながらクリックすると…

Enumを使ったチェックボックスUI 続き

前回Enumでチェックボックスの内容(テキストラベル)を管理する方法を紹介しました。 limesode.hatenablog.com 今回は操作が完了して閉じる際に、並んだチェックボックスから状態を取り出すところを書いていこうと思います。 まずはWidgetから編集開始。 自…

Enumを使ったチェックボックスUI

前回Enumを使った簡単なメモを書きました。 今回はWidgetで応用してみようと思います。 コンソールゲーム想定なので、マウスは非対応です。 UMGのコンポーネントは使いません。Ver 4.11でゲームパッドにも対応したようなことが公表されていた気がしますが、…

いーなむを使ってみる

UE4

Enum と書いて 「いーなむ」と発音するそうです。フルスペルで書くと "Enumerator"。 漢字で書くと「列挙型」 ぜんぜん理解が深まる気がしないのですが、プログラミング界では、ごく一般的に活用されているみたいで、もちろんUE4にもふんだんに盛り込まれて…

意外なつなぎ方

UE4

4.11がリリースされましたね。桜も満開です。 最近触ってなくて 4.10.02から上げてなかったので、UE4のランチャーで、アップデートボタンを押して、ワクワクしながら待っていたら、4.10.04 に! そうでした。スロット追加してからダウンロードしなきゃいけな…

1枚のテクスチャから多重スクロール

久しぶりの更新です。 最近はお絵かきの方に精を出してました。 さてさて、多分もうどこかで既にやられてると思いますが、多重スクロールです。 4重です。これを1枚のテクスチャで、一つのマテリアルで作ります。 まずはテクスチャから。 Photoshopを使い…

ブループリントマクロのローカル変数

UE4

ブループリントマクロの中だけで使えるローカル変数の使い方がやっとわかったのでメモメモ。 とりあえずノードパレットから、"Local" で検索したら以下のものが出てきました。 並べてみたらなかなかキレイで壮観。 すぐに気づくと思いますが、この形は値を取…

UE4のマテリアルファンクションっていいな

マテリアルファンクションが便利なので、よく利用するやつを紹介します。 マテリアルファンクションは、何度も同じパターンのノードをつなぐのが面倒になってきたな~という気持ちになってきたら頃合いです。 ライブラリにできるので、コンテンツフォルダの…

WidgetでPieMenu的なのを作ってみる

インフルエンザで寝込んでたりしてあまり時間が取れなかったので、久しぶりの更新になってしまいました。正直ネタに困ってたというのもあります。 さてさて 突然ですがハイライト部分がくるくると切り替わるサンプルを作ってみました。 テクスチャを用意しま…

UMG でトランジションを作ってみる

丸い穴が小さくなっていき最後は真っ黒になる、おなじみ?の画面切り替えです。 昔のアニメでよく見かけた気がします。最近のゲームではどうぶつの森で使われてます。 トランジションのアイリスエフェクトとかいうそうですが動画は詳しくないのと編集ツール…

UMGでキラキラ効果

UMGでキラキラ効果を作ってみます。 UMGの動画キャプチャがうまくいかず、静止画しか載せられませんがかなりキラキラします。用途が伝わりにくいかと思い頑張って金塊の絵を描きました。 リワード演出とか、ランクアップ演出とかで使えるのではないかと。 キ…

UE4で 「7セグ」表現を作ってみる

いかにもデジタルな見た目の数字といえば、7セグです。 Amazonで気になる商品名を見つけたので貼ってみます。 幻の5速! シフトインジケーター 5速表示 鮮やか 赤の7セグ DIY カスタム 出版社/メーカー: akindou メディア: この商品を含むブログを見る これ…

Widgetでじゃらじゃらじゃら~ばん

スコアとかの数字がもったいぶって確定するアレです。 ドラムロールなんかがSEだったりするとドキドキしたりするアレです。 くるくる回ったりしないので、作るのは簡単です。 いままでの作りとそれほど変わらないので、新しいテクニックはほぼ出てこないと思…

Widgetで回転する数字カウンタを作ってみる 《改二》

交通量調査とかで使ってるカウンタは、ボタンを押すたびに一番右端の桁が回ります。 それが 9まで回って次の 0になると同時に、繰り上がってようやく隣の桁が一つ進みます。この仕組みが不思議で、子供のころよく見入ってました。ラジカセにはテープカウンタ…

Widgetで回転する数字カウンタを作ってみる 《改》

前回のしくみだと、それぞれの桁が0から目標の数字に向かってUV移動するので、100000 みたいな場合ほとんど動かないことになってしまいます。 もう少しそれっぽく回してみようということで前回の記事で作ったWidgetを改造することにします。 実際のカウンタ…