【Godot 4.0】スマホ３Dゲームを作るための勉強　その２８　テクスチャを設定する

　ゲームエンジンGodot4.0で3Dスマホゲームを作りたいと思いますが、その前にお勉強しています。
　2023/3/1にstable版がリリースされました。
　Godot_v4.0-stable_win64.exe.zipを使用しています。

# 目的
　テクスチャを設定して見栄えをよくしたいと思います。

# ベースプロジェクト
　下記で作成したプロジェクトをベースに機能追加をします。
　【Godot 4.0】スマホ３Dゲームを作るための勉強　その２７　動く障害物を作る　その２　回転ドア
　https://qiita.com/FootInGlow/items/d22c1949e2c1d33fa756
　
　github(Godotのプロジェクトマネージャーからインポートして利用できます）
　https://github.com/footinglow/Godot4/tree/main/02_study/S27StageItemRevolvingDoor

# 方法
　「3D TEXTURES」のCC0ライセンスのテクスチャを利用させていただいています。

# 地面の芝生を設定する
## 芝生のテクスチャをダウンロードする
　Googleで「3d textures stylized grass 003」を検索します。
　下の方にスクロールして、「DOWNLOAD ALL THE MAPS」ボタンを押下するとGoogle Driveに飛んでダウンロードできます。
　「Stylized_Grass_003_basecolor.jpg」というファイル名です。

## Godotプロジェクトにテクスチャファイルを追加する
　エクスプローラでプロジェクトを開きます。
　assets/textureフォルダを作成して、ダウンロードしたテクスチャ「Stylized_Grass_003_basecolor.jpg」を格納します。下図の例でS28UseTextureがGodotのプロジェクトフォルダです。
![スクリーンショット (321).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/07c5364f-1393-1984-ae3e-4d99824fbb40.png)

　Godotでプロジェクトを開くと、自動的にダイアログが表示されてプロジェクトに画像ファイルがインポートされます。
![スクリーンショット (323).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/a1dce519-c597-46d0-df9d-02bb42ed2c4e.png)
![スクリーンショット (327).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/67cf87f4-71af-a611-70ce-1fcb3d1ad4d5.png)

## 地面シーンに芝生テクスチャを設定する
　地面ステージアイテムのres://StageItems/ground.tscnを開きます。
　MeshInstance3Dを選択して、インスペクタのMeshInstance3DのMeshの右のアイコンをクリックして詳細設定を開きます。
![スクリーンショット (328).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/e71c0fac-c789-d7c2-c636-b261cb7ac995.png)
　Materialの右の緑の球をクリックします。
![スクリーンショット (329).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/66f8b614-beb9-7e23-0185-19514322f3fb.png)
　albedoを開いて、textureの右の＜空＞をクリックして「クイックロード」を実行します。
![スクリーンショット (331).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/dab19e1d-21d6-2560-a88d-7528c043653b.png)
「assets/texture/Stylized_Grass_003_basecolor.jpg」を選択します。
![スクリーンショット (332).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/f0d7de74-5f17-74c3-2b15-ce0844cec2b7.png)
　テクスチャが設定されましたが、草が大きいので調整します。
![スクリーンショット (335).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/2fe6e8cf-cfd5-d5b8-f6ba-891d2c0f9bdc.png)

　張り付けるテクスチャの大きさを調整するにはUV1というパラメータを変更するとよさそうです。
　UV1を開いてScaleのX,Y,Zを10に変更しました。
![スクリーンショット (336).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/514670e7-30e4-66a3-2e4f-f18599243bbd.png)
![スクリーンショット (337).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/f3602687-3b39-fe8a-a08a-0734302a07b4.png)

　Colorに設定していた緑色がテクスチャの色に影響しているため、albedoのColorを白（R,G,B=255,255,255）に変更します。
![スクリーンショット (346).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/2456d431-2929-1d72-041d-8b777feb9f2f.png)

# 動く壁と回転ドアにアルミテクスチャを設定する
　GodotのアセットにDiamond Plated Aluminum Materialがあったので設定したいと思います。
　MITライセンスです。
　オリジナルはGodot3.0用で4.0ではそのまま使用できないので、テクスチャ画像をコピーして設定値は手動で入力します。
https://godotengine.org/asset-library/asset/314
![スクリーンショット (347).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/aee3232f-0611-cdef-0285-fb7b930145bf.png)

## テクスチャファイルをプロジェクトに配置する
　ダウンロードして解凍したフォルダ内から、３つのpngファイル、
* diamondplate.png
* diamondplate_spec.png
* diamondplate_tex.png

を取り出して、assets/texture/godot-material-dpa-1.0.1フォルダの中に配置しました。
![スクリーンショット (376).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/f45faf5b-29bf-c22f-79ab-7e0cc47febce.png)
 GodotのWindowに切り替えると自動でインポートされます。
![スクリーンショット (378).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/b0f5096d-d9a4-74a5-9ed2-f2ac2bcbed8d.png)

## 動く壁にテクスチャを設定する
　res://StageItems/moving_wall.tscnを開きます。
　MeshInstance3Dを選択して、インスペクタのMeshInstance3D/Meshの右のアイコンをクリックして詳細設定を表示します。Materialの＜空＞をクリックして、新規StandardMaterial3Dを設定します。設定された型:StandardMaterial3D画像をクリックしてMaterialの詳細設定を開きます。
![スクリーンショット (379).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/7d2a9258-094e-d2ea-879f-43477b124aca.png)
　下記の表にように設定・変更します。
　textureに画像を設定するところが3か所ありますが、＜空＞をクリックして「クイックロード」を選択するとプロジェクト内の画像を選択できます。

:::note
　textureを読み込むと初期化されるパラメータがあるのですべて設定後に再度チェックしましょう。
:::

<table>
  <caption>Materialのインスペクタ変更内容</caption>
  <thead>
    <tr>
      <th>項目</th>
      <th>設定値</th>
    </tr>
  </thead>
  <tr>
    <td>Material</td>
    <td>新規StandardMaterial3D</td>
  </tr>
  <tr>
    <td>Material/StandardMaterial3D/Albedo/Texture/</td>
    <td>assets/texture/godot-material-dpa-1.0.1/diamondplate_tex.png</td>
  </tr>
  <tr>
    <td>Material/StandardMaterial3D/Metaric/Metaric</td>
    <td>0.65　※texture読み込むと1.0に初期化されるので要確認です</td>
  </tr>
  <tr>
    <td>Material/StandardMaterial3D/Metaric/Specular</td>
    <td>0.4</td>
  </tr>
  <tr>
    <td>Material/StandardMaterial3D/Metaric/Texture</td>
    <td>assets/texture/godot-material-dpa-1.0.1/diamondplate_spec.png</td>
  </tr>
  <tr>
    <td>Material/StandardMaterial3D/Metaric/Texture Channel</td>
    <td>Gray</td>
  </tr>
  <tr>
    <td>Material/StandardMaterial3D/Roughness/Roughness</td>
    <td>0.3</td>
  </tr>
  <tr>
    <td>Material/StandardMaterial3D/Normal Map/Enabled</td>
    <td>オン</td>
  </tr>
  <tr>
    <td>Material/StandardMaterial3D/Normal Map/Texture</td>
    <td>assets/texture/godot-material-dpa-1.0.1/diamondplate.png</td>
  </tr>
  <tr>
    <td>Material/StandardMaterial3D/UV1/Scale/x</td>
    <td>0.25</td>
  </tr>
  <tr>
    <td>Material/StandardMaterial3D/UV1/Scale/y</td>
    <td>0.25</td>
  </tr>
  <tr>
    <td>Material/StandardMaterial3D/UV1/Scale/z</td>
    <td>0.25</td>
  </tr>
  <tr>
    <td>Material/StandardMaterial3D/UV1/Triplanar</td>
    <td>オン</td>
  </tr>
  <tr>
    <td>Material/StandardMaterial3D/UV1/Triplanar Sharpness</td>
    <td>10.1</td>
  </tr>
  <tr>
    <td>Material/StandardMaterial3D/UV2/Scale/x</td>
    <td>0.25</td>
  </tr>
  <tr>
    <td>Material/StandardMaterial3D/UV2/Scale/y</td>
    <td>0.25</td>
  </tr>
  <tr>
    <td>Material/StandardMaterial3D/UV2/Scale/z</td>
    <td>0.25</td>
  </tr>
  <tr>
    <td>Material/StandardMaterial3D/UV2/Triplanar</td>
    <td>オン</td>
  </tr>
  <tr>
    <td>Material/StandardMaterial3D/UV2/Triplanar Sharpness</td>
    <td>8.28　※8.27に丸められる？</td>
  </tr>
</table>

![スクリーンショット (383).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/c132a432-d68b-43c3-fc88-439225574177.png)
## Materialを保存して回転ドアに適用します。
　Materialの右の球の右の「ｖ」のアイコンをクリックして「保存」を実行します。
![スクリーンショット (385).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/08cbe883-53a0-f8dd-df20-5e0739cdb056.png)
　Designフォルダを選択して、「diamondAluminum.tres」という名前で保存します。
![スクリーンショット (386).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/7dfbb95b-5afd-8057-2a4c-d94cf8f2583e.png)
「res://Design/diamondAluminum.tres」に保存しました。
![スクリーンショット (354).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/97827462-e1a1-d928-15a4-4286fc0268eb.png)
保存するとMaterialの右のアイコンの表示が変わりました。
![スクリーンショット (387).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/2b8d548a-5b6f-7603-d115-c6bf2484e9d7.png)

　次にres://StageItems/revolving_door.tscnを開きます。
　シーンの「MeshInstance3D」を選択して、インスペクタのMeshInstance3D/Meshの右のアイコンをクリックして詳細設定を開いて、Materialの右の＜空＞をクリックします。
　「クイックロード」を実行して「Design/diamondAluminum.tres」を開きます。
![スクリーンショット (356).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/8fccc842-2f7d-d9c0-ed01-ebc62f49a787.png)
設定されました。MeshInstance3Dをコピペして作成しているためかMeshInstance3D2にも適用されました。
![スクリーンショット (369).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/947ad580-2317-9608-eb3b-1da4139674d4.png)

　先ほどの芝生とは違ってテクスチャが横に伸びていないのは、UV1のTriplanarをオンにしている効果のようです。試しにオフにすると横方向に伸びてしまいます。テクスチャのイメージをそのままの比率で張り付けるときには便利に使えそうですが、マニュアルを見るとTriplanarはUVと比較して処理負荷が高いようです。
**確認した後はUV1のTriplanarはONに戻しました**
![スクリーンショット (372).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/3b637c71-fbb6-db00-b718-d476d2a847bf.png)
# 実行
　実行して確認します。痛そうです。
![スクリーンショット (388).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/71dea772-781e-0b98-17c6-080673d1af25.png)

　以上です。