こんにちわ、Unityエンジニアのオオバです。

UIデザイナーよくあるUnityでの基本作業は大きく3つあります。

  1. 画像の追加、更新、削除
  2. UIのレイアウト調整
  3. アニメーションの追加と編集

この中で最も基本的なことは
「1. 画像の追加、更新、削除」 です。

追加、更新、削除の中でも 追加にフォーカス

本記事では安全にUnityへの追加と
最終的なアップロードまでを解説していきます。

最終納品場所をGitHubと仮定し、
gitの操作は Sourcetree というソフトを使います。

まだインストールしていない方はコチラをどうぞ

GitHubにアップロード完了までが作業

結論を簡単にまとめます。

「Unityに画像を追加する作業」とは、
ただ単にUnityに画像を追加するだけではありません。

最終的にGitHubにファイルをアップロードして
初めて仕事として完了です。

※保存先がGitHub以外の場合もあります

今回特殊なキーワードがたくさん出てきます。
できるだけわかりやすく解説しますので
ついてきてください。

オオバ
オオバ
とまどうのは最初だけですぐ慣れます。

では、詳細の解説に入ります。

※GitHubからUnityプロジェクトをダウンロードする方法が
わからないかたはコチラがオススメです。

この記事の内容

【作業前その1】Sourcetreeでプルして最新化

作業前に必ずやることは
データの最新化 です。

Sourcetreeでプル(pull)します。

オオバ
オオバ
「プル」とは意味的にダウンロードに近いですね

プルすると自分の作業環境に、
他人の作業内容が取り込まれます。

取り込まれることで自分の環境は最新化されるのです。

プルの前にフェッチする

プルする前にフェッチしましょう。
急に 「フェッチ」 が出てきましたが、後ほど解説します。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_0

フェッチ ボタンをクリック。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_1

2点にチェックを入れて、 OK ボタンをクリック。

フェッチの解説:環境反映しないダウンロード

フェッチすると、
GitHub上にある全作業データが
自分のパソコンにダウンロードされます。

ただしプルと違い、
自分の作業環境に影響を与えません。
あくまで目に見えるだけのダウンロード。

つまり フェッチしても環境は最新化されない のです。

  1. フェッチして他人の作業状態を確認
  2. プルして自分の作業環境を最新化

こういう使い方をします。

うん、難しいですよね。

とりあえず、これだけ覚えましょう。
「フェッチしたあとにプルする」

作業しながら体で覚えるのがよいです。

環境を最新化する「プル」の手順

ではフェッチしたので、プルしていきます。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_2

プル ボタンをクリック。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_3

重要なのは プルするリモートのブランチ
かんたんに説明すると 最新データの場所の指定 です。
今回はmainブランチですが、プロジェクトによって違います。

何を指定すべきかエンジニアに確認して下さい。

たいてい以下の3種です

すぐにマージした変更をコミットする にチェック。
OK ボタンをクリックします。

すると自分の作業環境が最新化し作業が開始できます。

作業被りを回避しましょう

チーム開発のトラブル第一位は作業被り。
「コンフリクト」 とも言います。

コンフリクトすると自分の作業を取り消す場合もあり悲しいです。
データの最新化は作業前に必ずやりましょう。

【作業前その2】作業ブランチの作成

作業の前に 自分だけの作業環境を作ります。
この環境のことを 「ブランチ」 と呼びます。

今までの文章で出てきた「作業環境」とは「ブランチ」です。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_4

Sourcetree上部のブランチをクリック。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_5

入力する ブランチ名
プロジェクトごとにルールがあるかも知れないため、
担当エンジニアに確認してください。

一般的に feature/作業名 と名付けます。
feature/自分の名前 としている場合も見かけます。

今回は画像追加ということで
feature/add_imageとしました。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_6

ブランチが作成されました。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_7

図にするとこのようなイメージです。
本流のmainブランチから派生した
あなたの作業環境 feature/add_imageです。

この2つの工程が済んだら
作業を開始します。

【作業1】Unityに画像追加

画像追加で注意すべきことはいろいろありますが、
本記事では割愛します。

とりあえず絶対に間違えてはいけないのは 格納場所 です。

オオバ
オオバ
画像の格納先はチームメンバーに確認しましょう。

今回は Assets/Images/配下に画像を追加します。
Unityプロジェクトを開きましょう。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_8

画像を含むアセットはすべてプロジェクトに追加
ということを覚えておきましょう。

コチラの画像ファイル(image.png)をUnityに追加します。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_9

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_10

Imagesフォルダを選択して右クリック。
Reveal in Finder をクリックして
Imagesフォルダをファインダーで開きます。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_11

開いた Images フォルダに画像ファイルを追加。

Unityに戻ります。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_12

プロジェクトに image が追加されました。

Unityのプロジェクトにドラッグしても画像は追加される

プロジェクトに画像を
直接ドラッグしても同じ効果が得られます。

ただし、追加は正常に動作しますが
更新はできない ので注意です。

※重要:画像追加したらUnityを必ず起動する

Unityに画像を追加した時は
必ずUnityを起動 してください。
というのも、metaファイルが必要なのです。

作られたmetaファイル

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_13

ときどきファインダから直接画像を追加して、
Unityを起動せずに作業を終えてしまう人を見かけます。

この場合、 metaファイルが作られない のです。
metaファイルにはその画像の設定が記述されているため、
非常に重要です。

またトラブルの元なので、画像を追加したら
必ずUnityの起動 しましょう。

ちなみに今回の例では
すでにUnityを起動しているため問題は起きません。

【作業2】Sourcetreeで作業内容のコミット

作業内容を記録していきます。
これを 「コミット」 と呼びます。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_14

Sourcetreeの コミット をクリック。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_15

①今回の作業は、2ファイルの追加です。
image.pngimage.png.meta の追加)

このファイルたちにチェックをいれると
コミット対象になります。

②コミットには作業内容が必要です。
プロエクトによってルールがある可能性もあるため
担当エンジニアに確認しましょう。

コミット ボタンをクリック。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_16

すると確認ダイアログが表示されます。
次回から確認しない にチェックを
入れることをオススメします。

間違えたとしても簡単に元に戻せます。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_17

このように作業が記録されました。

この記録(コミット)をこれから
GitHubにアップロードします。

【作業3】コミットをGitHubにプッシュ

作業記録をGitHubにアップロードしていきます。
アップロードのことを プッシュ と言います。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_18

Sourcetree上部の プッシュ ボタンをクリック。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_19

OK ボタンをクリックしたら
コミットはGitHubにアップロードされます。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_20

origin/feature/add_imageが追加されました。
「origin/」がついたブランチが
GitHubにアップロードされているという証 です。

※originという名前自体は変更可

ここで終わりっぽく感じますが、
あと1ステップあります。

本流ブランチにマージされて完了

今までの作業はあくまで自分の作業環境の話でした。
作業を始める前に、ブランチを作りましたよね。

そう、 今までの作業は自分の中で完結したもの です。
ここから チームメンバーに自分の作業を共有 します。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_21

イメージはこんな感じです。
派生したものを本流ブランチに取り込んでもらいます。

取り込むことを 「マージ」 と呼び、
取り込み自体の依頼を 「プルリクエスト」
または 「マージリクエスト」 と呼びます。

これから次の2つの作業をしていきます。

【作業4】GitHubでプルリクエストの作成とマージ

ここからはGitHub上での作業です。
Webブラウザ上から操作します。

オオバ
オオバ
GitHubのURLがわからない場合はエンジニアに聞きましょう

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_22

ブランチ名 のプルダウンをクリック。
↑の例ではmainブランチがデフォルト表示されています。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_23

自分の作業ブランチに切り替えます。
feature/add_image でしたね。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_24

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_25

Create pull request をクリックします。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_26

するとプルリクが作られます。

この後の作業は 各プロジェクトごとのルール があるため、
チームメンバーに確認しましょう。

よくあるパターンはコチラ。

  1. プルリクのURLをチェックするメンバーに送る
  2. チェックするメンバーがあなたの作業内容を確認
  3. OKだったらマージ
  4. ダメだったらその内容を共有され、あなたは修正作業をする

プルリクのURLとは、
今回の例だとコチラです。

Slackでプルリク確認依頼の例

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_27

このURLをチェックするメンバー (レビュワー)
チャットなどで伝えることが多いです。

最後の マージ というのが、
チームメンバーが使う本流ブランチへの反映を意味します。

自分でマージすることもある

「マージはご自分でお願いします。」
というケースもあります。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_28

その場合、Merge pull request ボタンをクリックします。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_29

Confirm merge ボタンをクリックすると
マージ完了です。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_30

これでマージされました。

自分がレビュワーになることもあります。
マージ方法を覚えておいて損はない でしょう。

ではここでSourcetreeにもどって フェッチ してみましょう。
(フェッチとは自分の作業環境に影響しない目視用のダウンロードでしたね)

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_31

このように自分の作業ブランチが
本流のmainブランチに取り込まれた(マージされた) のがわかります。

【基礎その1】UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法_32

この図と同じですね。

以上で作業は完了です。
(画像追加だけなのに長かった...)

まとめ : UIデザイナーがUnityに画像を追加してGitHubにアップロードする方法

記事の内容を簡単にまとめます。

こんな感じです。
Unityに画像を追加する作業より
周辺作業のほうが膨大でしたね。

おつかれさまでした。

専門用語やキーワードが多かったですね。
すこしずつ覚えていきましょう。

今回は基本的な流れのみを紹介しました。
開発にトラブルはつきもので、
さまざまなケースが存在します。

例えば 他人と作業被りしたときの対処法 とかですね。
そのあたりはよく起きがちなため、
別記事で丁寧に解説したいと思います。

画像追加をマスターしたら、
次は 更新 をしてみましょう。

みなさまの安全な画像追加をお祈りしております。


フォローすると UIデザイナー力の上がるTwitter やってます!
今日から使えるテクニックを発信中。
ぜひフォローしてみてください!
👉フォローはこちら!

最後まで読んでいただきありがとうございました!
すばらしいUnityライフをお過ごしください。

期間限定 最大95%オフセール
効率UPメガバンドル開催中!最大95%オフ!!!
期間 : 11月1日午後15時59分まで
オススメ記事