Robloxの新機能「Path2D」を使ってみた

2024年5月17日 18:04

こんにちは、すしパです。

RobloxStudioは頻繁にアップデートが行われ、新しい機能がどんどん追加されていますよね。でもその情報を日本語で提供している記事はまだ少ないのが現状です。そこで、Robloxに興味を持つ人たちが増えることを願って、私自身が試してみた体験をシェアすることにしました！

今回のシリーズでは、Robloxの新機能を自由研究のように取り上げて、実際に試してみた結果や感じたことをお届けします。

第１回目は「Path2D」という新機能にチャレンジしてみました。この機能を使って、どんなことができるのか一緒に探ってみましょう！

※この記事は2024年5月17日現在の情報をもとに記述しています。
β版のため、多くの変更が発生する可能性があることをご了承ください。

Path2Dってなに？

Path2Dは2024年3月にβ版の機能として公開されました。

平面上にパス（軌道）という「点」とそれをつなぐ「線」（スプライン）を作成し、それを利用してUIオブジェクトやエフェクトのアニメーションを手軽に作成できる機能です。

Path2DはScreenGUI、BillboardGUI、SurfaceGUIの下に配置し、スプラインの編集や表示を行います。詳細な使用方法やAPIについては、公式ドキュメントを参考にしてください。

公式ドキュメント：

Path2Dの導入方法

まずはベータ機能なので、Studioに追加してみましょう。
ベータ機能を有効にするには:

スタジオを起動します。
[ファイル]、[ベータ機能] の順に選択します。
「Path2D Beta」の横にあるチェックボックスをオンにして、「保存」をクリックします。
Studio を再起動します。

Path2Dの使い方

基本設定

Path2Dの挿入
1. Roblox Studioを開き、新しいプロジェクトを作成します。
2. エクスプローラーウィンドウで、ScreenGUI、BillboardGUI、またはSurfaceGUIの下にPath2Dを挿入します。
  ※現状他の場所だと描画されないので注意

Path2Dの編集
1. Path2Dオブジェクトを選んで、プロパティウィンドウでスプラインの制御ポイントを設定します。
2. スプラインの形状や曲線を調整して、UIオブジェクトやエフェクトの配置をカスタマイズします。

Path2Dの使用例

ここでは、Path2Dを使って簡単なアニメーションを作成してみます。

設定手順
1. エクスプローラーでScreenGuiを作成し、以下にPath2D、ImageLabel、Scriptを追加。
2. ImageLabelに好きな画像をアサイン
3. Path２Dでスプラインを作成
4. Scriptを編集
  1. スプライン上をオブジェクトが特定の速度で移動するコードを追加
  2. 移動をループさせるコードを追加
  3. ImageLabelの画像を回転させるコードを追加
コード例

まずはGetPositionOnCurve()を使って、スプライン上をオブジェクトが特定の速度で移動するコードを追加

local path = script.Parent.Path2D
local frame = script.Parent.Image

local maxIter = 100
--画像が移動する速度

for counter = 0, maxIter do
	local t = counter / maxIter
	local position = path:GetPositionOnCurve(t)
	frame.Position = position

	wait()
end

画像をスプラインの開始位置から終了位置まで移動させることができました。

せっかくなのでループさせて回転させちゃいます

local path = script.Parent.Path2D
local frame = script.Parent.Image

local maxIter = 100
--画像が移動する速度
local rotationSpeed = -5
--画像が回転する角度

while true do
	for counter = 0, maxIter do
		local t = counter / maxIter
		local position = path:GetPositionOnCurve(t)
		frame.Position = position

		frame.Rotation = frame.Rotation + rotationSpeed

		wait()
	end
end

面白いですね
ちなみにPath2DプロパティのVisibleをオフにすれば、スプラインを非表示にできます。試してみてね。

まとめ

従来の制御方法では、曲線の多いアニメーションの制御は非常に面倒でした。
しかし！Path2Dを使えば、簡単に複雑なアニメーションの制御ができちゃいます。表現の幅が広がる素晴らしいアップデートですね！

今回テストしませんでしたが、アニメーションの速度や位置の制御をグラフエディタで行えるかもしれないと思いました（これが可能かは今後確認してみます）。

今後期待する機能

ベクターデータ（SVG）のインポート
外部ツール（IllustratorやPhotoshopなど）で作成したベクターデータをインポートできるようになれば、かなり複雑なアニメーションの制御が可能になるので超期待しています。絶対実装してほしい。
塗りつぶし機能
これができれば、Path2D自体でモーショングラフィックを作ることができるようになるでしょう。

次回予告

次回は、UGCアイテムのアップロード方法についてまとめようかなと思っています。最近マーケットプレイスがオープンしたので、その利用方法やアイテム作成のコツも紹介する予定です。お楽しみに！

この記事が気に入ったらサポートをしてみませんか？