渋谷ほととぎす通信

「Unityをわかりやすく」初心者のためのゲーム作りブログ

Unityに画像追加する6つのステップ

Unityに画像追加する6つのステップ

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

お悩みさん
お悩みさん
  • Unityに画像を追加する一連の流れを理解したい
  • 画像を追加した後の作業を知りたい
  • オオバ
    オオバ
    本記事ではこれらの悩みを解決します。

    ここ数年「UIデザイナー」や「プランナー」といったエンジニアではない職種メンバー( 非エンジニア )が直接Unityで作業する機会ことが多くなったように感じます。具体的には次のような作業です。

    • 画像の追加、更新、削除
    • UIのレイアウト調整
    • アニメーションの追加と編集
    • データ入力

    この中で最も基本的な作業は 「画像の追加、更新、削除」 です。特に「追加」と「更新」はすでにやっている人も多いのではないでしょうか。逆にいうと、Unityに画像の追加や更新といった基本的な作業は非エンジニアにとってできて当たり前になりつつあります。

    年々求められるスキルが高くなっているということですね。画像の追加・更新と聞くと一見簡単そうに聞こえます。実際のところ簡単なのですが やり方を知らないと事故ります。

    そこで本記事では、画像をUnityに追加する一連の作業をわかりやすくまとめました。実はUnityに画像を追加して終わりではありません。その後チームメンバーにデータ共有するという作業が待っているのです。最終の納品場所をGitHubと仮定し「Sourcetree」というソフトを使って解説していきます。

    この記事をとおしてUnityに画像を追加し、GitHubにアップロードする一連の流れを覚えて実践で活用してみましょう。

    👉DOTweenの教科書を読んでUnityアニメーションをプログラミングしてみよう!

    Unity作業前の3つの準備

    Unityに画像を追加する作業の前に準備です。そもそも納品先のGitHubのアカウントがないといけませんし、Gitを操作するためのソフトが無いとやりづらいです。ぜひ次の3つの準備をしておきましょう。

    Unity作業前の3つの準備

    ①GitHubのアカウント作成

    ②Sourcetreeのインストール

    ③Unityプロジェクトのダウンロード

    準備①GitHubのアカウント作成

    実際の作業に入る前に、納品先であるGitHubのアカウント作成、GitHubにアップロードするためのSourcetreeをインストールします。

    Unityに画像追加する6つのステップ_0

    GitHubとは世界中で使われているGit(ファイルのバージョン管理ソフト)のサービスです。開発者が開発したファイルをGitHubのサーバーにアップロードして、チームメンバーと共有します。

    GitHubはスマホゲーム開発の現場で実際に使われています。 オオバも毎日ゲーム開発の現場で毎日使っています。
    Unity開発をしているプロジェクトはGitHubを使うことが多いです。ぜひこの機会にアカウントを作成しておきましょう。

    →GitHubのリンクはこちら
    GitHubとGitは全く別物

    よくある勘違いですが、GitHubとGitは全く別物です。GitHubはWebサービス、Gitはソフトウェアです。GitHubはGitを使ったサービスを展開しています。Gitはファイルのバージョンを管理するソフトでトレンドです。

    GitHubはGitだけではできない機能を提供しています。例えばレビュー機能です。自分の作業を他メンバーにチェックしてもらう、レビューしてもらう、このような機能はGitHubだからこそできるのです。

    ゆえにGitHubとGitは全く別物なのです。ぜひ覚えておきましょう。

    👉 【Mac】初心者がハマるGitHubのSSHキー登録方法(全画面キャプチャ付)

    準備②Sourcetreeのインストール

    SourcetreeとはAtlassian社が提供するソフトウェアで、Gitの操作をだれでもできるようにしたGUIツールです。オオバもエンジニアではないメンバーにおすすめするツールです。Sourcetreeのインストール方法はこちらの記事を参考にしてみてください。

    準備③Unityプロジェクトのダウンロード

    そもそも画像を追加する先のUnityプロジェクトがないと話になりません。UnityプロジェクトもGitHubからダウンロードしてくることになります。ダウンロードするUnityプロジェクトのURLはぜひお近くのエンジニアに聞いてください。

    URLがわかったら次の記事でSourcetreeを使ってダウンロードする方法を解説しています。ぜひ読んでみてください。

    Unityに画像を追加する6ステップ

    ここから実際にUnityへ画像を追加する作業を6ステップで解説します。

    Unityに画像を追加する6ステップ

    ステップ①Unityプロジェクトの最新化

    ステップ②作業ブランチの作成

    ステップ③Unityに画像追加

    ステップ④Sourcetreeで作業内容のコミット

    ステップ⑤GitHubにプッシュ

    ステップ⑥GitHubでプルリクエストの作成とマージ

    👉 【Unity基礎】スマホ向けゲームUIの作り方!基本的なUI配置から複数解像度対応まで解説

    ステップ①Unityプロジェクトの最新化

    作業前に必ずやることは データ(Unityプロジェクト)の最新化 です。チーム開発ではファイル追加、更新、削除が常に行われます。作業前にデータを最新化することで、他人との作業被りを回避できるためぜひやります。具体的な方法はSourcetreeでフェッチ(fetch)して、プル(pull)します。

    最初にSourcetreeでフェッチする

    フェッチしてからプルします。急に「フェッチ」や「プル」と新しいキーワードが登場しましたが、これらはGitの用語です。フェッチとはファイルをダウンロードするだけです。プルとはダウンロードして自分の作業環境に反映までします。

    つまりフェッチするだけでは、Unityプロジェクトに何も変化は起きません。プルすることでデータが更新されるのです。まずはフェッチからやっていきましょう。

    Unityに画像追加する6つのステップ_1

    Sourcetreeの上部メニューから フェッチ ボタンをクリックします。

    Unityに画像追加する6つのステップ_2

    「すべてのリモートからフェッチ」「リモートで削除された追跡ブランチを取り除く」この2点にチェックを入れて OK ボタンをクリックしてください。

    フェッチを実行する理由は 他のメンバー作業状況を確認するため です。フェッチは他人の作業を可視化します。プルと違って作業環境を更新しないため安全に他人の作業を確認できるのです。一方いきなりプルすると、他人の作業をいきなり自分の環境に反映することになります。ぶっちゃけこのやり方でも良いです。しかし、いきなり自分の作業環境を更新してびっくりするより、反映前に気づくほうが安全だと考えています。

    個人的にはフェッチしてからプルする癖を付けておくことをおすすめします。

    Sourcetreeで「プル」する

    フェッチしたので、プルをしてきましょう。プルとは自分の作業環境の更新です。

    Unityに画像追加する6つのステップ_3

    Sourcetree上部メニューの プル ボタンをクリックします。

    Unityに画像追加する6つのステップ_4

    重要なのは プルするリモートのブランチ です。「プルするリモートのブランチ」とは、かんたんに説明すると最新データの場所です。今回はmainブランチですが、プロジェクトによって違います。何を指定すべきかエンジニアに確認して下さい。「develop」「main」「master」たいていこの3つであることが多いです。

    すぐにマージした変更をコミットする にチェック。OK ボタンをクリックします。すると自分の作業環境が最新化し作業が開始できます。

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

    チーム開発トラブルの第1位は作業被りです。 「コンフリクト」 と呼ばれます。コンフリクトとは自分のやった作業の一部が、他人の作業と重複してしまう状況です。コンフリクトすると自分または他人の作業を 取り消す 場合もある悲しいです。コンフリクトを回避するためにもデータの最新化は作業前に必ずやりましょう。そして、原始的ではありますがコンフリクトしそうだなと思ったときはチャットなどで声を掛け合うのも大事です。

    次の記事では実際にコンフリクトした際の解決方法を解説しています。ぜひ読んでみてください。

    ステップ②作業ブランチの作成

    作業の前に 自分だけの作業環境を作ります。 この環境のことを 「ブランチ」 と呼びます。今までの文章で出てきた「作業環境」とは「ブランチ」です。実際にブランチを作ってみましょう。

    Unityに画像追加する6つのステップ_5

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

    Unityに画像追加する6つのステップ_6

    • ① : ブランチ名 の入力
    • ② : 新規ブランチをチェックアウトにチェック
    • ③ : ブランチを作成 ボタンをクリック

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

    一般的に feature/作業名 と名付けます。 feature/自分の名前 としている場合も見かけます。今回は画像追加ということで feature/add_imageとしました。

    Unityに画像追加する6つのステップ_7

    上図のようにブランチが作成されました。

    Unityに画像追加する6つのステップ_8

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

    以上でUnityに画像を追加する前の準備は完了です。

    ステップ③Unityに画像追加

    Unityで画像追加で注意すべき点は3点。

    Unityの画像追加で注意すべき3点

    ①画像ファイルの格納場所

    ②ファイル名は半角英数

    ③metaファイルは削除禁止

    とりあえず絶対に間違えてはいけないのは 格納場所 です。画像の格納先はチームメンバーに確認しましょう。今回は Assets/Images/ 配下に画像を追加します。Unityプロジェクトを開きましょう。

    👉 死ぬほど重いUnityの起動を高速化する4つの方法

    Unityに画像追加する6つのステップ_9

    画像を含むアセットはすべてProjectウィンドウに追加します。

    Unityに画像追加する6つのステップ_10

    では上の画像ファイル(image.png)をUnityに追加してみます。

    Unityに画像追加する6つのステップ_11

    Imagesフォルダを選択して右クリック。 Reveal in Finder(またはShow in Explorer) をクリックしてImagesフォルダをFinderまたはExplorerで開きます。

    Unityに画像追加する6つのステップ_12

    開いた Images フォルダに画像ファイルを追加してUnityに戻ります。

    Unityに画像追加する6つのステップ_13

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

    👉 【Unity】UIデザイン必須ツール3選

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

    プロジェクトに画像を直接ドラッグしても同じ効果が得られます。ただし、追加は正常に動作しますが
    ファイルの更新(上書き)はできません。 更新元ファイルと共存することになり事故の元です。ちなみにこの手の事故はよく起きます。

    ファイルを更新(上書き)するときは、必ずUnityの外、つまりFinderまたはExplorerを使う必要があるのです。画像ファイルの追加もUnityの外で行う癖を付けておいた方が安全だと考えています。

    画像追加したらUnityを必ず起動する

    Unityに画像を追加した時は 必ずUnityを起動 してください。なぜなら「metaファイル」が必要なのです。metaとは追加したファイルの設定情報が記述された重要なファイルです。「metaファイルを削除してよいですか?」と質問をよくいただきますが、絶対に削除してはいけません。

    自動で作られたmetaファイル

    Unityに画像追加する6つのステップ_14

    ときどき画像を追加したあとUnityを起動せずに作業を終えてしまう人を見かけます。この場合 metaファイルが作られません。 またトラブルの元なので、 画像を追加したら必ずUnityの起動する ということを覚えておきましょう。

    ステップ④Sourcetreeで作業内容のコミット

    画像追加が完了したら、Sourcetreeでの作業です。「画像追加した作業内容」を記録していきます。これを 「コミット」 と呼びます。コミットとは作業単位の履歴です。この履歴を作ることで、将来不具合が起きたときに、Unityプロジェクトを作業単位ごとに元に戻すことができるのです。どこでトラブルが起きたのか、何が原因だったのかを把握する上でコミットはとても重要なのです。

    Unityに画像追加する6つのステップ_15

    Sourcetreeの上部メニューの コミット をクリックしてください。

    Unityに画像追加する6つのステップ_16

    • ①作業したファイルにチェック
    • ②作業内容を入力
    • コミット ボタンをクリック

    チェックをいれたファイルがとコミット対象になります。「②作業内容を入力」はコミットには作業内容のコメントが必要です。プロジェクトによって書式のルールがある可能性もあるため担当エンジニアに確認しましょう。

    「③コミット ボタンをクリック」でコミットが実行します。

    Unityに画像追加する6つのステップ_17

    すると確認ダイアログが表示されますが、 次回から確認しない にチェックを入れてOKをクリックしましょう。

    Unityに画像追加する6つのステップ_18

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

    ただし、この記録はあくまであなたのパソコン内での話です。次のステップではGitHubにアップロードしてチームメンバーに作業を共有するのです。

    ステップ⑤GitHubにプッシュ

    作業記録(コミット)をGitHubにアップロードしていきます。アップロードのことを プッシュ と呼びます。

    Unityに画像追加する6つのステップ_19

    Sourcetree上部メニューの プッシュ ボタンをクリックしましょう。

    Unityに画像追加する6つのステップ_20

    • ① : プッシュするブランチにチェック
    • ② : OK ボタンをクリック

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

    Unityに画像追加する6つのステップ_21

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

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

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

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

    今までの作業はあくまで自分の作業環境の話でした。作業を始める前に「ステップ②作業ブランチの作成」でブランチを作りましたよね。そう、 今までの作業は自分の中で完結したもの でした。ここから チームメンバーに自分の作業を共有 します。

    Unityに画像追加する6つのステップ_22

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

    取り込むことを 「マージ」 と呼び、取り込み自体の依頼を 「プルリクエスト」 または 「マージリクエスト」 と呼びます。これから「プルリクエスト(以下:プルリク)の作成」と「マージ」という2つの作業を行います。

    ステップ⑥GitHubでプルリクエストの作成とマージ

    ここからはGitHub上での作業です。プルリクの作成とマージ作業をやっていきます。Webブラウザ上から操作するため、GitHubのURLがわからない場合はエンジニアに聞きましょう。

    Unityに画像追加する6つのステップ_23

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

    Unityに画像追加する6つのステップ_24

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

    Unityに画像追加する6つのステップ_25

    • ① : Contribute をクリック
    • ② : Open pull request をクリック

    Unityに画像追加する6つのステップ_26

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

    Unityに画像追加する6つのステップ_27

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

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

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

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

    プルリクのURLとは、今回の例だとこちらです。

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

    Unityに画像追加する6つのステップ_28

    プルリクのURLをチェックするメンバー(レビュワー)にチャットで伝えることが多いです。最後の マージ というのがチームメンバーが使う本流ブランチへの反映を意味します。

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

    「マージは自分のタイミングでお願いします。」
    というレビュワーではなく自分でマージする場合もあります。

    Unityに画像追加する6つのステップ_29

    この場合、Merge pull request ボタンをクリックするのです。

    Unityに画像追加する6つのステップ_30

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

    Unityに画像追加する6つのステップ_31

    これで自分の作業が本流のブランチにマージされました。自分がレビュワーになることもあります。マージ方法を覚えておいて損はないです。

    ではここでSourcetreeに戻り フェッチ してみましょう。フェッチとは自分の作業環境に影響しない目視用のダウンロードでしたね。詳しくは「最初にSourcetreeでフェッチする」をどうぞ。

    Unityに画像追加する6つのステップ_32

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

    Unityに画像追加する6つのステップ_33

    この図と同じです。

    以上でUnityに画像を追加する作業はすべて完了です。画像追加だけなのに長かったですね。でもこれが実践です。

    【実践編】Unityに画像を追加する6つのステップまとめ

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

    Unityに画像を追加する6ステップ

    ステップ①Unityプロジェクトの最新化

    ステップ②作業ブランチの作成

    ステップ③Unityに画像追加

    ステップ④Sourcetreeで作業内容のコミット

    ステップ⑤GitHubにプッシュ

    ステップ⑥GitHubでプルリクエストの作成とマージ

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

    おつかれさまでした。専門用語やキーワードが多かったと思います。現場では専門用語がどうしても飛び交ってしまうため、今のうちから少しずつ覚えていきましょう。今回は基本的な流れのみを紹介しました。開発にトラブルはつきものでさまざまなケースが存在します。

    例えば 他人と作業被りしたときの対処法 です。 よく起きるトラブル です。次の記事で分かりやすく解説しているためぜひ理解しておきましょう。

    画像追加をマスターしたら次は「ファイルの更新」に挑戦してみましょう。こちらの記事をあわせて読んでみてください。

    👉 【Unity基礎】UI作業前に知っておくべき6つのポイント

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

    「Unity初心者大学」というUnity初心者向けのYouTube始めました!!
    ぜひチャンネル登録をお願いします!

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

    オススメ記事