
学ぶことで UI 編 で UI の 基本 と デザイン の コツ を 理解 し、 画面 を 美しくする 表現 を 実践します。 練習して 3D/2D 表現 の 連携 と アニメーション の 活用 を 身につけます。
この講座では「Unity 2019~2022」を使用して解説を行っていますが、この補足動画では、2024年10月にリリースされたUnity 6の新機能や変更点を、旧バージョンと比較しながら簡単にご紹介します。
Unity 6では一部操作感に変化がありますが、初心者の学習に大きな影響はなく、少し注意すれば本講座の内容でも十分に学習を進めていただけます。
Unity 6には一部上級者向けの新機能もありますが、現時点では初心者の方には影響はほとんどありませんので、安心して学習を進めてください。
解説します UI編 第1回で テキストメッシュPRO の 基本 を 解説し レガシーテキスト との 違い を 実例 で 比較、色彩 グラデーション や アウトライン など の 表現 力 を 学びます。
テキストメッシュプロで 日本語を 表示する 方法 を 学ぶ。 googleフォント を 使って 日本語フォント を 取得 し、 フォントアセット を 作成 して テキストメッシュプロ に 適用 する 手順 を 詳しく 解説 する。
フォントアセットクリエイターと右クリック作成の違いを解説します。初心者には右クリックでの作成を勧め、動作の軽さと表示の安定性への影響を説明します。
テキストメッシュPRO のマテリアルを使い、フェイスとアウトラインにテクスチャを貼って文字をリッチに表現します。フォントアセットごとに複数のマテリアルを作成し、アンダーレイやグローで細部を調整します。
追加して、イメージと パネルを キャンバス内に 配置し、ソースイメージを スプライトに 変換して 配置を 調整します。調整して、前面・背面の順番変更や アスペクト比の扱い、 レイアウトツールの活用も 実践します。
キャンバスにボタンを追加し、ボタン本体とテキスト、背景画像、ハイライト・プレス・ディスエーブルなどのデザイン調整を解説します。OnClickで球のジャンプを実行させる方法を実演し、公開メソッドを介してスクリプトのJumpを呼び出す手順を紹介します。
トグルの基本を学び、オンオフ切替のしくみと背景・ラベル・チェックマークの構成を理解します。アンカーとピボットで配置を整え、サイズ調整とトグルグループの挙動を実演します。
トグルを クリック で キューブ の 表示 を オンオフ に 切り替える 実装 を 学びます。 OnValueChange で スクリプト を 呼び出し、 トグルグループ を 使って 二択 の UI を 整える 手順 を 解説します。
学ぶことで、Unity の UI スライダーの基本とキャンバス上の配置を理解する。スライダーとキューブの連動デモを通じ、最小値・最大値・0から1の範囲設定、整数化、値変更イベントを身につける。
unity の ui ドロップダウンの使い方を解説し、インスペクターの設定とオプションの編集、onvaluechange でキューブの色を選択肢に連動して変更する手順を紹介。
超初心者向けの unity ui インプットフィールド の 使い方 を テキストメッシュPRO の 設定 と 日本語フォント導入 から 丁寧 に 解説します。プレースホルダー と テキスト の 連動、ONVALUECHANGE、ONENDエディット の 使い方 を 実践的 に 学びます。
unity の ui スクロールビューの使い方を解説します。ビューポートとコンテンツの連携、スクロールバーやマスクの設定、テキスト配置、エラスティック動作と感度調整を理解します。
UIスケールモードでスクリーンサイズに合わせてキャンバスを拡縮し、キャンバススケーラーを Scale with screen size に設定し、左上・右下をアンカープリセットで基準化して16対9以外にも対応する。
取り込む Unity の UI アセットをアセットストアから入手し、ボタンやトグル、スライダー、インプットフィールドのデザインを画像やフォントで置換・調整して、キレイな UI を作る方法を学べます。始めるなら初心者でもシンプルな置換から、サンプルシーンを参考に実践的に理解を深め、より美しい UI を作れる力を養えます。
再現します、ポップアップの表示と閉じるアニメーションをUIパネルとテキスト、ボタンで作成します。実装します、アニメーターコントローラーとOPEN・CLOSEトリガーを用いて動きを実装します。
Unity の UI 編で 玉転がしゲームの土台を作成し プレイヤー移動 ジャンプ ゴール判定 カメラ追従 設定ボタン の UI 要素 を組み立てます 参考に 実装を進めます。次回から は UI の実装 に 進み サンプルゲーム の UI 練習 を 具体的 に 学べます。
UIを設計してポップアップとボタンを配置し、フォント日本語化とサイズ調整を実践します。トグル・スライダー・ドロップダウンの設定やフォルダー整理も解説します。
この講義は unity の ui 編のサンプルゲームで、トグルでジャンプをオンオフ制御する方法を解説します。 初期設定とフラグ連携を実装例とともに紹介します。
学ぶと共に、UI のスライダーを使ってキャラクターのスピードを制御する方法を習得し、スライダーの値変更に応じて速度が変わる仕組みを実装します。
ドロップダウンを使ってキャラクターのマテリアルを切り替える方法を学ぶ。ホワイト、レッド、グリーン、ブルーの4種のマテリアルを用意し、スクリプトとエディター設定で適用する。
UI のパーツにラベルを付け、レイアウトを整える実践を通じて、トグル・スライダー・ドロップダウンの配置とフォント統一のコツを学ぶ。
ポップアップの UI アニメーション を 作成 し、 4 種 の アニメーション を 実装 します。 アニメーター と コントローラー を 設定 し、 OPEN ブール値 で 開閉 を 制御 し、 ボタン を 連携 させます。
ゴールテキストを日本語フォントとカラーグラデーションで装飾し、アウトラインとアンダーレイを追加して派手さを高めます。フォントアセットを分けてゴール用マテリアルを設定し、アニメーターコントローラーでゴールアニメを作成、回転を-1080度、スケールを0から大きく表示させます。
Unity の UI ライフゲージをスクリプトで動かす方法を学びます。 スペースキーで HP を減らし、 HPと MAXHP の比率から フィル を 更新する 手順と フロート型 の 扱い を 確認します。
ライフゲージを作成し、アニメーターを設定して値が変化するたびにエフェクト付きのアニメーションを適用する。ヒット時のアニメーションをレコーディングで作成し、スペースキーでライフとゲージを減らす動作を確認する。
Unity の UI を 3D オブジェクトに 追従させる 方法を 紹介します。 WorldToScreenPoint を 活用して プレイヤー 位置 を スクリーン に 投影し、 頭上 の ラベル を 動かす 実装 と 微調整 の コツ を 解説します。
解説します、UIカメラの仕組みと活用法を示し、UIカメラとメインカメラを組み合わせて画面エフェクトを表示する方法を実演します。紹介します、キャンバスのテキストと連携してパーティクルをUI表示として活用するテクニックも解説します。
UIカメラの DEPTHONLY とカリングマスクを活用し、スカイボックスやソリッドカラーの背景を制御して UI 要素だけを前面に表示し、メインカメラと合成します。
UIカメラを用いたサンプルを作成し、左右キーでカメラを回転させ、スペースキーでパーティクルのUIエフェクトを表示します。Canvas にテキストメッシュプロで『パーティクル』を中央表示し、一定時間後に非表示にする仕組みと UI カメラのクリアフラックス設定を解説します。
玉転がしの土台を作成し、ライフゲージとHPで障害物を壊す仕組みとクリアエフェクトを実装します。プレイヤー移動とカメラ追従を設定し、ターゲットのHP処理とデストロイを確認します。
UI 練習として ターゲット の ヒットポイント を 表示 する ライフゲージ を 背景 と フィル で 作成 し、 HP に 応じて 減少 0 で デストロイ、 色変化 アニメ を 組み込む 方法 を 解説します。
作成する過程でゲームクリアエフェクトの文字表示とアニメーションを UI カメラとパーティクルで表現します。カウントする対象をターゲットタグで識別し、0でクリアを発動させる仕組みを解説します。
オンラインITスクール「ITeens Lab」の公式カリキュラムからの引用です。
Unityの基本中の基本だけ理解できていればOK!
UIの作り方を学んで、自作ゲームのクオリティをレベルアップさせましょう。
「Unityを学んで簡単なゲームを作れるようになったけど、見た目がイマイチ。。。」
という思いをしていませんか?
このカリキュラムでは、UnityにおけるUI(Canvas機能、ボタンやテキストなど)の作り方に的を絞って解説しています。
このカリキュラムを修了すれば、あなたのUnityでの制作がぐんとレベルアップするはずです!
また今回のUI編ではUIのレイアウトについてもコツを解説しています。
ぜひこのコースで学んでリッチな作品を作ってみてください。
こんな人におすすめ
・Unityの基礎は理解できたので作品のクオリティを上げたい
・TextMeshProなどの使い方がなんとなくわからない
・UIの作り方の基礎を学びたい
・UIのアニメーションを作りたい
↓↓↓↓コースの概要は以下のとおりです↓↓↓↓
・UIの基本「TextMeshPro」について理解しよう
・各UIパーツの使い方を理解しよう
・「UIScaleMode」を知ってUIの理解を深めよう
・リッチな表現でUIをデザインしよう
・UI練習のためのサンプルゲーム①
・ライフゲージを作ってみよう!
・さらに凝ったUIのテクニックを身につけよう!
・UI練習のためのサンプルゲーム②