UI開発

前回の続きです ゲージの見た目を改造していきます まずはテクスチャを使ったアレンジ といってもグラデーションを乗せるだけ 用意したのは 128ｘ16px のテクスチャ。 ← 実寸 インポート時にタイリングの設定を変更しておきます。 UVを動かしたときに、狙った状態にするためです。 前回のマテリアルで、囲みの部分を消します。 空いたとこに テクスチャを VTilingの値を小さくして、ScalarParameterの値で上下に移動することで、見た目をチェンジ。 テクスチャを使ったアレンジは以上です。 つぎはテクスチャではなくカーブアトラスを使ってみます。 まずはコンテンツブラウザで右クリック ＞…

なんとなく両端から増減するゲージを作ってみたくなって、マテリアルで試してみた。 両サイドから増減するゲージを作っていたら、なんとなくスタミナゲージぽいのができた#UE4 #ue4UMG pic.twitter.com/XiLUNbaNNv— みつまめ杏仁 (@MMAn_nin) 2021年2月1日 ゲージは見た目を気にしないのであれば、スケールを可変する方法がサクッと作れるのでいいと思う。ただスケール方式の場合、下敷きが必要だし、成長要素で最大の長さが伸びていく場合に扱いがちょっぴり面倒だし、ゲージにテクスチャを貼るとスケールによって伸び縮みしてしまったりして、つくりがシンプルなぶん、表現の自…

最近Twitterにあげたやつ UE4 Ver4.26 でマテリアルノードに step 追加されたので使ってみた。以前のVerまではValueStep というノードがあって、それで代用していました。 入力ピンの名前が Y と X になったので、仕様が分かりにくくなった気がします。 ↓こちらのブログにとても分かりやすく解説されてるので気になった方はぜひ。 http://【UE4】マテリアルの「step」と「smoothstep」で遊ぼう！【★★】 | キンアジのブログ (kinnaji.com) さっそく、よくある2重のゲージを作ってみました。 カラーは格ゲーとかでよく見る黄色と赤の2色を、加算…

3人称視点のアクションRPGとかで、フィールドに落ちている何かを拾うと、ログ表示のように画面端に表示されるあれです。 原神をプレイしてて作ってみようと思い立ったUI表示ですが目コピーではないです。 試そうと思ったきっかけは、 VerticalBoxに追加した UserWidgetが、自身を Remove from Parent したらどうなるのか？ ガシガシ追加しまくっても、一定時間経過で勝手に消えてくれるのであれば、追加する側が管理しなくてもいいのでは？ という安易な推測によるものでした。 で実際にやってみた作り方をメモメモ。 Widgetを2つ使います。 まず最初に作るのは、表示する子要素…

さすがに涼しいと言ってられないほどの気温になってきました。ほんの数日でしたが大好きな稲刈り後の田んぼの匂いと金木犀の香りで秋の深まりを実感している今日この頃です。 さてさて ちょっと間があいてしまいましたが、先日Twitteにあげたテキストエフェクトについて書こうと思います。 一度作ってみたかったやつ#UE4 #ue4UMG pic.twitter.com/FoaBTMnieI— みつまめ杏仁 (@MMAn_nin) 2020年10月18日 虫食いのように消える処理#UE4 #ue4UMG pic.twitter.com/rlWMy6QtBq— みつまめ杏仁 (@MMAn_nin) 2020年…

こんにちは。生産性向上チーム&フロントエンドエキスパートチームです。 今回は私たちプロダクト支援チームが普段どのようにプロダクトチームを支援しているかの一例として、kintoneのStorybookを社内からいつでも確認できるようにホスティングするまでの流れを紹介します。

モバイルアプリグループでおもにAndroidアプリの開発を行っている @sokume です。 Android開発者の方であれば興味関心の尽きない、Android OS 12 Developer Preview 1 が2/18日に公開されましたね。 毎年の事ではありますが、2021年の新OS Android 12への対応にむけて少しずつ検討をすすめていかないとならない時期がやってきました。 この記事では、新OS Android 12への対応や、2021年平行にして気になる更新などをピックアップしていこうと思います。 Android12 公式情報 以下に公式情報が記載されています。 Android…

先日のツイートを一応メモっておきます。 スライダー道は奥が深いですね。 きっかけは @HirofumiSeo さんのこのツイート Unreal Engine 4のUMGのSliderの設計（挙動）が、UIとして直感的ではないように思うのですが、設定でどうにか出来ますかねぇ。自分で画像とか駆使してスライダっぽい新しいUMGを作るしかないでしょうか。スライダハンドルを握ったときはハンドルは勝手に動いてほしくないですよねぇ。 #UE4 #UE4Study pic.twitter.com/DSIHCegVcK — Hirofumi Seo 瀬尾 拡史 (@HirofumiSeo) 2021年2月12日…

はじめに キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました！ はじめに React Native Japanコミュニティ React Nativeでの画像キャッシュの仕組み(iOS) React Native 0.64 と 0.63.5 JCenter のクローズによる影響 Redux・Context API・Recoil のパフォーマンス比較 Wix社のDetox運用ノウハウ リアルタイムエンゲージメントのプラットフォーム "Agora.io" Quoraの質問: 「ReactではなくFlutterを選択する理由は何ですか？」 中国生まれのRe…

UI開発、最後は最適化です。CanvasのBatch処理、Overdrawを例に上げた後、Profilerによる確認方法をまとめてます。 Canvas Batch処理 Overdraw Profiler CPU Usage UI/UI Details UISystemPreviewWindow まとめ 参考 Canvas 全てのUIはCanvas配下になります。何も考えず大量にUIを配置するとパフォーマンスが低下します。 Batch処理 最も効果的なのはBatch処理です。これはザックリ言うとCPUがGPUに描画の命令を出す時に、必要な情報(Material, Texture)をまとめる事で命…

3年前、人生初の「チーム開発」なるものを経験した。 当時の自分は他者を尊重するってことを理解できていなかったし、自分に対して自信も余裕もなかったと思う。 だから平気で自分の発言を押し通そうとするし、他者を蔑むようなことをしていました。 かと思えば次の日には長文でクソ真面目に謝罪してる。情緒不安定なDV男かよ。 今思えば、チーム開発とか、他者との関わり方とかそういうのを勉強し始めたきっかけって、この経験が本当に大きい。 それが理由なのかはわからんけど、当時に比べて反省点がぼろぼろ出てくる。 ぷよぷよが上達するほど、自分が下手に感じてくる感覚に似てる（多分伝わらない） そんな自分が、1年間プロジェ…

今回の主な話題：FairyGUI開発経験の共有、線形ワークフローアートテクスチャ作成方法の選択、コマンドラインコンパイルパッケージがVideoPlayer MP4動画を再生する時のブルースクリーン、Invalid AABB aabbエラー。 UI Q1: 主にプログラムの作業負荷を軽減するために、新プロジェクトにFairyGUIを使用したいです。みなさんはプロジェクトに使うことありませんか？主にアトラス、DrawCallの最適化、スクロールバーの最適化、Richtext分析などについて、FairyGUIは上手くサポートしていますか？カスタムUIコントロールもサポートできますか？ ① 主な利点は…

幅広い領域のスキルを身につけることで、エンジニアは解決できる課題の種類が増えます。課題解決がエンジニアの仕事だとするならば、スキルの多様性はエンジニアとしての価値向上に直結するともいえるでしょう。 かつて株式会社ラブグラフ（以下、ラブグラフ）のリードエンジニアを務め、同社を退職後はフリーランスとして活躍する成澤克麻さんは、フルスタックなスキルを持つWebエンジニアです。フロントエンドからサーバーサイド、インフラまで広域なスキルを有し、Webサービス開発の業務全般に対応可能。また、大学院では自然言語処理の研究に従事し、トップカンファレンスに最年少で査読論文を通した経験を持ちます。 成澤さんのフル…

前回に引き続きUnityによるUI開発です。今回はテキスト編です。 概要 導入方法 FontAsset 作成方法 使い方 Dynamic SDF Font Fallback 絵文字 Sprite Asset 作成方法 表示方法 表示位置がズレる ルビ まとめ 参考 概要 Unityのテキスト表示は uGUI標準のText と TextMeshPro です。 ここ最近で使い勝手の良い TextMeshPro を今回は取り上げます。 導入方法 Window > TextMeshPro > Import TMP Essential Resources から最低限のアセットの事前インポートが必要です。…

こんにちは！ソリューションコンサルタントの中江です。 本記事では弊社で公開している Ignite UI for React のサンプルアプリケーションをご紹介します。この記事を通して Ignite UI for React の各コンポーネントを組み合わせてダッシュボードを作成する際の参考になれば幸いです。 React とは？ Ignite UI for React とは？ コロナウイルスのデータ可視化ダッシュボードのサンプルアプリケーション サンプルの確認方法 使用コントロールの紹介 Data Grid Data Chart Geographic Map その他の実装機能の紹介 ローディング機…

こんにちは！テクニカルコンサルティングチームの西村です。 当記事では、弊社製品のオンライン上の技術ドキュメントを全文検索する方法をご紹介します。 この全文検索を利用することで、知りたい技術情報を効率的に得ることが可能となります。 全文検索の対象となるオンライン技術ドキュメントは以下の４つとなります。 ヘルプドキュメント: https://jp.infragistics.com/support/online-documentation サンプルアプリ: 開発プラットフォーム毎に用意されているサンプルアプリ掲載ページ ブログ: https://blogs.jp.infragistics.com/ …