【Roblox Studio】アニメーション付きGUIの作成

1. アニメーション効果のあるGUI
2. 使用する機能
3. 手順

1. アニメーション効果のあるGUI

アニメーション効果のあるGUIを作成していきます。本記事では、プレイヤーがボタンをクリックした際に、アニメーションで徐々にボタンが小さくなり非表示になるGUIの作成方法を紹介します。

2. 使用する機能

・ScreenGui
・TextButton
・LocalScript

3. 手順

まず、Roblox Studioを起動します。今回は、テンプレート「Baseplate」を使用します。

UIを作成していきます。
HOMEタブにあるUIをクリックします。

ScreenGUIをクリックします。

TextButtonをクリックします。

追加したTextButtonのサイズを大きくします。

TextButttonの子要素にLocalScriptを追加して、以下のコードを記入します。

local button = script.Parent

local originalSize = button.Size 
local animatedSize = UDim2.new(0, 0, 0, 0) 

button.MouseButton1Click:Connect(function()
	button:TweenSize(animatedSize, Enum.EasingDirection.Out, Enum.EasingStyle.Quad, 0.5, true, function()
		button.Visible = false
	end)
end)

上記コードの解説は以下です。

コード解説

1. local button = script.Parent
スクリプトの親要素（ボタン）を取得します。

2. local originalSize = button.Size
ボタンの現在のサイズをoriginalSizeに保存します。

3. local animatedSize = UDim2.new(0, 0, 0, 0)
animatedSizeをボタンのサイズを0に設定し、ボタンが完全に消えるようにします。

4. button.MouseButton1Click:Connect(function()…
ボタンがクリックされたとき、ボタンのサイズをanimatedSizeに変更するアニメーションを実行します。

このコードは、ボタンがクリックされたときにサイズを0にアニメーション変更し、その後ボタンを完全に非表示にする機能を持っています。

この状態でゲームをプレイしてみます。TextButtonをクリックしたときに、そのボタンのサイズが小さくなり非表示になれば正しく動作しています。