完成動画
はじめに
Roblox Studioでのゲーム制作において、インタラクティブな要素を加えることで、プレイヤーの体験をより魅力的にすることができます。本記事では、プレイヤーが特定のパーツに触れると、画面上に配置された画像が動き、中央で一時停止した後、再び画面上部に戻るアニメーションを作成する方法を紹介します。
使用する機能
- ScreenGui（画面上のUI要素を表示するコンテナ）
- ImageLabel（画像を表示するUIコンポーネント）
- LocalScript（クライアント側で動作するスクリプト）
- UDim2.new（UI要素の位置やサイズを設定するデータ型）
- FindFirstChild（特定の名前の子オブジェクトを取得）
- FindFirstChildOfClass（特定のクラスの子オブジェクトを取得）
- TweenPosition（UIの位置を滑らかにアニメーションさせる）
- Touched（パーツが何かに触れたときに発火するイベント）
エクスプローラ構成
エクスプローラの構成は以下の通りです。
Workspace
└Part1
StarterGui
└ScreenGui
└ImageLabel
└LocalScript各要素の役割
- Part1: プレイヤーが触れることで、アニメーションがトリガーされるパーツです。
- ImageLabel: 画面に表示され、アニメーションを行う画像です。
- LocalScript: 画像のアニメーションを制御するスクリプトです。
LocalScriptのコード
以下のコードを ImageLabel 内に配置する LocalScript に記述します。このスクリプトは、指定されたパーツ（Part1）が触れられた際に、画像を中央に移動し、その後画面上部に戻すアニメーションを行います。
local image = script.Parent -- ImageLabelを取得
local player = game.Players.LocalPlayer
-- 画像の初期位置を設定（画面上部に隠しておく）
image.Position = UDim2.new(0.5, 0, -0.5, 0)
local function onTouch(otherPart)
local character = otherPart.Parent
if character and character:FindFirstChildOfClass("Humanoid") then
-- 画像を中央に移動
image:TweenPosition(UDim2.new(0.5, 0, 0.5, 0), "Out", "Quad", 1, true, function()
wait(2) -- 2秒間停止
-- 画面上部へ移動して見えなくする
image:TweenPosition(UDim2.new(0.5, 0, -0.5, 0), "In", "Quad", 1)
end)
end
end
-- Part1がタッチされたら関数を実行
local part1 = workspace:FindFirstChild("Part1")
if part1 then
part1.Touched:Connect(onTouch)
end解説
1. 画像の初期位置設定
image.Position = UDim2.new(0.5, 0, -0.5, 0)画像は画面の上部に隠れた位置（Y座標が-0.5）に配置されます。これにより、プレイヤーが触れるまで画像は表示されません。
2. onTouch 関数の設定
local function onTouch(otherPart)
local character = otherPart.Parent
if character and character:FindFirstChildOfClass("Humanoid") then
-- 画像を中央に移動
image:TweenPosition(UDim2.new(0.5, 0, 0.5, 0), "Out", "Quad", 1, true, function()
wait(2) -- 2秒間停止
-- 画面上部へ移動して見えなくする
image:TweenPosition(UDim2.new(0.5, 0, -0.5, 0), "In", "Quad", 1)
end)
end
endプレイヤーが Part1 に触れると、画像が中央に移動し、2秒間表示されます。その後、画面上部に戻り、見えなくなります。この処理は TweenPosition を使ってアニメーションで行われます。
3. Part1 への接続
local part1 = workspace:FindFirstChild("Part1")
if part1 then
part1.Touched:Connect(onTouch)
endPart1 が触れられた時に onTouch 関数が呼び出されるように設定しています。これにより、プレイヤーが Part1 に触れた際に画像のアニメーションが開始します。
まとめ
この方法を使うことで、プレイヤーが特定のパーツに触れると、画像が中央に移動し、その後画面上部に戻るというアニメーションを実現することができます。
コメント