(:3[kanのメモ帳]

個人ゲーム開発者kan.kikuchiのメモ的技術ブログ。月木更新でUnity関連がメイン。

(:3[kanのメモ帳]


本ブログの運営者kan.kikuchiが個人で開発したゲームです!

    

AI(Chat GPT-4)にUnityの技術記事は書けるのかテスト【Unity】【AI】


このエントリーをはてなブックマークに追加


はじめに

この記事は、AIを用いて技術記事が書けるかどうかのテストであり、全てChat GPT-4で生成されています。内容には間違いが含まれることがありますので、実際に試して指摘する必要があります。記事をより読みやすく整形し、画像を添付することで、より完璧な記事になります。

Chat GPTは持っている情報が限られているため、書ける内容に限りがありますが、もしネット上で自ら情報を収集できるようになれば(例えばBingのように)、AIの能力はさらに向上するでしょう。今後、AIを使って記事全文を書くことはないかもしれませんが、補助として十分に活用できると考えられます。一方で、技術ブログが誰でも簡単に書けるようになった場合、技術ブログ自体の価値が変わるかもしれません。

UnityでMaskを使って画像を任意の形に切り抜いて表示する方法

Unityで画像を任意の形に切り抜いて表示するには、Image(uGUI)Sprite RendererMask コンポーネントを利用します。この記事では、その方法を説明します。Maskは、ゲーム開発において特定の形状で表示されるべき画像や、レイヤーの一部を隠す必要がある場合などに役立ちます。この記事は、Unity 2020.3 LTS を想定しています。

Image(uGUI)でMaskを使う方法


  1. まず、Hierarchy ウィンドウで右クリックし、UI > Image を選択して Image オブジェクトを作成します。

  2. Image オブジェクトを選択し、Inspector ウィンドウで Source Image に切り抜きたい画像を設定します。

  3. Hierarchy ウィンドウで右クリックし、UI > Image を選択して Mask Image オブジェクトを作成します。

  4. Mask Image オブジェクトを選択し、Inspector ウィンドウで Source Image に任意の形のマスク画像を設定します。この画像の透明部分が切り抜かれます。

  5. Mask Image オブジェクトに Mask コンポーネントを追加します。Inspector ウィンドウで Add Component をクリックし、Mask を選択して追加します。

  6. Image オブジェクトを Mask Image オブジェクトの子オブジェクトにします。これで、Image オブジェクトがマスクされます。

Sprite RendererでMaskを使う方法

  1. Hierarchy ウィンドウで右クリックし、Create Empty を選択して新しい空のゲームオブジェクトを作成します。これが Mask Sprite オブジェクトになります。

  2. Mask Sprite オブジェクトに Sprite Renderer コンポーネントを追加します。Inspector ウィンドウで Add Component をクリックし、Sprite Renderer を選択して追加します。

  3. Sprite Renderer コンポーネントで Sprite に任意の形のマスク画像を設定します。この画像の透明部分が切り抜かれます。

  4. Mask Sprite オブジェクトに Sprite Mask コンポーネントを追加します。Inspector ウィンドウで Add Component をクリックし、Sprite Mask を選択して追加します。

  5. Sprite Mask コンポーネントで Sprite に任意の形のマスク画像を設定します。この画像の透明部分が切り抜かれます。

  6. Hierarchy ウィンドウで右クリックし、Create Empty を選択して新しい空のゲームオブジェクトを作成します。これが Target Sprite オブジェクトになります。

  7. Target Sprite オブジェクトに Sprite Renderer コンポーネントを追加します。Inspector ウィンドウで Add Component をクリックし、Sprite Renderer を選択して追加します。

  8. Sprite Renderer コンポーネントで Sprite に切り抜きたい画像を設定します。

  9. Target Sprite オブジェクトの Sprite Renderer コンポーネントで Mask InteractionVisible Inside Mask に設定します。これで、Target Sprite オブジェクトがマスクされます。

  10. 必要に応じて、Target Sprite オブジェクトと Mask Sprite オブジェクトの位置やソーティングレイヤーを調整して、マスクが正しく機能するようにします。

これで、Image(uGUI)Sprite RendererMask を使って画像を任意の形に切り抜いて表示する方法を実装できました。これらの方法を利用することで、ゲーム開発においてさまざまな場面で Mask が役立ちます。例えば、ヘルスバーやスキルチャージの進行状況を表示する際に、特定の形状に切り抜かれた画像を使用することができます。

おまけ : Chat GPT-4に指示を出した様子

1.記事の内容指示 (Markdown形式をコピーしやすいようにコードブロック内に書いてもらってる)

2.修正内容指示

3.はじめに」の追加指示

4.記事紹介ツイート作成指示