1. はじめに

　みなさん、PCで作業するとき寂しくありませんか？寂しい人はこの記事を読んで、賑やかなPC画面を作りましょう。寂しくない人は強がっているだけなので、この記事を読んで賑やかなPC画面を手に入れましょう。

　今回の記事ではOSSのゲームエンジンとしておなじみのGodotを用いて作成したデスクトップをふわふわ浮かぶ謎の生き物を召喚するソフトについて紹介します。

＜参考資料＞
本ソフトウェアおよび記事を作成するにあたって、以下の記事を参考にしました。
https://oucrc.net/articles/k2y49ctve

2. 使うツール

　今回はOSSを中心に取り揃えました。完全無料なのはいいことだからね

Godot
OSSのゲームエンジン。めちゃくちゃ軽くて使いやすい。近年注目されているらしい（著者調べ）
blender
OSSの3DCG制作ソフトウェア。3DCGではお馴染み
krita
OSSのお絵かきソフトウェア。テクスチャの細かい部分はこちらで

3. 制作過程

3-1. ソフトで使う3DCGを作る

　こつ子ソフトウェア工房は、原材料から自身で用意します。案外ここが一番大変

この画面中央のクリーチャーを作ろう

頑張って立方体をループカットで分割したり、面の押し出し、頂点の変更等などをしてこんな感じのモデルが出来ました。

次に、これのテクスチャ（見た目）を作るためにUV展開を行います。
この立体の展開図を作り、そこに色を塗っていく感じですね。
ここで、シンプルな展開図にできると後々の作業が非常に楽。

じゃぁUV展開するぞ。

はい。

全然シンプルな形になりませんでした。

悲しい。UV展開の切り目を入れる場所を工夫すれば、もっときれいな形になるのだと思いますが、私にはその技術がない....。

blenderには直接色を塗る機能があるので塗っていきます。

良いじゃん（自画自賛）。

シェーディング方法をフラットシェードからスムーズシェードに変更し、角を丸くします。

はい。これでマスコットキャラは完成です。次にGodotでコイツに命を吹き込んでいきます。

3-2. Godotで動きを作る

　次にGodotで3DCGに命を吹き込んでいきます。今回作る動きは下の2点です。

マウスを目で追いかける動作
上下にふわふわ動く動作

Godotではノードというソフトの部品となるものがあり、それを組み合わせていくことで作ります。というわけで、ひとまず3D空間に今回必要なノードを配置していきます。

こんな感じ。カメラと光源、3Dモデル、キャラクターの移動するパスって感じですね。kyusuは先程作成した3DCGです。

では、これらにスクリプトを追加することで、詳しい動作を決めていきます。

extends PathFollow3D

@export var speed:float

var is_down:bool = true;

func _ready():
	is_down = true;
	
func _process(delta):
	if(progress_ratio < 1 and is_down):
		progress_ratio = progress_ratio + speed * delta;
	else:
		is_down = false;
		
	if(progress_ratio > 0 and !is_down):
		progress_ratio = progress_ratio - speed * delta;
	else:
		is_down = true;

これがマスコットが上下に動くスクリプト。PathFollow3Dについてるスクリプトですね。Path3Dで設定されている経路を移動します。progress_ratioはその経路の何割の位置に移動するかです。

extends Node3D

@onready var camera: Camera3D =  %MainCamera3D

@export var look_distance: float = 10 # カメラからマウス方向にどれくらい離れた点

func _ready():
	rotation = Vector3.ZERO;

func _process(delta):
	var mouse_pos = get_viewport().get_mouse_position()

	var ray_origin = camera.project_ray_origin(mouse_pos)
	var ray_normal = camera.project_ray_normal(mouse_pos)

	# マウス方向のレイに沿って、カメラから一定距離離れた点をターゲットにする
	var ray_position = ray_origin + ray_normal * look_distance - Vector3(-5,0,0)
	var target_position = Vector3(ray_position.x,ray_position.y,ray_position.z);
	
	# オブジェクトをターゲット位置に向ける
	look_at(target_position, Vector3.UP)

こちらはChara(Node3D)ノードについているものです。マウスをget_viewport().get_mouse_position()で取得し、それを2次元の座標から3次元の座標にrayを用いて変更しています。また、変更後、3Dモデルに合わせてモデルが向く3次元座標を調整したあと、look_at関数を用いて3Dモデルを向けています。

　最後にプロジェクト設定を変更し、背景を透過します。「表示＞ウィンドウ」の中の「透明」と「ピクセル単位の透明度」をオンにします。

これで完成です。では、エクスポートして実行ファイルにしましょう。