부품 애니메이션

플레이어는 자신의 행동이 애니메이션과 함께 작동하는지 여부에 대한 피드백를 얻을 수 있습니다. 이는 플레이어가 클릭하면 나무가 흔들리거나 펫이 기뻐하게 점프하는 것과 같은 트리 샤킹일 수 있습니다. 이 경우 플레이어가 클릭하면 버튼이 이동하는 것을 보여 드릴 것입니다.

애니메이션과 트위닝

개체를 애니메이션하는 한 가지 방법은 트위인을 사용하는 것입니다. 트위인은 tween 이라는 이름의 시작 값을 특정 시간에 끝 값으로 변경하는 프로세스입니다. 트위인은 위치, 색 또는 회전과 같은 속성을 변경하는 데 사용될 수 있습니다.

프로젝트 설정

이 프로젝트에서는 시작 위치에서 목표 위치로 개체를 이동합니다.

1. 애니메이션할 부품을 결정하십시오. 아래 예에서, 1 는 버튼이고, 2 는 벽입니다.

   

2. 이동할 부품에 TweenMove라는 이름의 스크립트를 추가합니다. ClickDetector를 이름 변경하지 마십시오.

   

   많은 부품이 있는 모델을 사용하는 경우 이 예의 버튼과 같이 이동하려는 부품을 선택하고 MoveTween 스크립트를 자식으로 지정합니다.

3. TweenMove 스크립트를 열고 다음 스크립트를 복사하고 붙여 넣습니다.

   -- 선택한 축을 기반으로 부품을 반복해서 뒤로 트위스트
   -- 버튼에는 켜기/끄기 상태가 있으며 부품을 앞으로 또는 뒤로 이동합니다.
   
   local TweenService = game:GetService("TweenService")
   local button = script.Parent
   local clickDetector = button:FindFirstChildWhichIsA("ClickDetector")
   local buttonState = -1  -- 버튼 방향을 결정합니다. -1은 안으로 누르고 1은 밖으로 누르게 됩니다.
   local inTween = false
   
   -- 사용자 정의 변수
   local TWEEN_TIME = 0.15
   local TWEEN_MOVE_DISTANCE = 1.5
   
   -- 트위언 변수
   local buttonTweenInfo = TweenInfo.new(
   	TWEEN_TIME,  -- 시간
   	Enum.EasingStyle.Quad,  -- EasingStyle
   	Enum.EasingDirection.Out  -- 쉬운 방향
   )
   
   local function buttonPress()
   	-- 버튼이 트위닝되면 다시 사용하지 못하도록 방지합니다.
   	if inTween == true then
   		return
   	end
   
   	-- 버튼 위치에 대한 새 CFrame 계산
   	local offsetCFrame = CFrame.new(0, TWEEN_MOVE_DISTANCE * buttonState, 0)
   	local newCFrame = button.CFrame:ToWorldSpace(offsetCFrame)
   
   	-- 트위닝을 만들고 플레이하십시오
   	local tweenButton = TweenService:Create(button, buttonTweenInfo, {CFrame = newCFrame})
   	tweenButton:Play()
   	inTween = true
   
   	-- 버튼 완료 시, 다시 사용할 수 있게 하기
   	tweenButton.Completed:Connect(function()
   		inTween = false
   		-- 버튼 상태 역전
   		buttonState *= -1
   	end)
   
   end
   
   clickDetector.MouseClick:Connect(buttonPress)

4. 오브젝트를 플레이테스트하고 클릭하십시오. 테스트 중에 오브젝트가 잘못된 방향이나 거리를 이동하는 것을 알 수 있습니다. 다음 섹션에서 사용자 정의할 수 있습니다.

이동 트윈 조정

스크립트를 추가한 후 게임에 맞게 사용자 정의할 수 있습니다. 버튼을 트위닝하여 앞으로 또는 뒤로, 또는 위로 이동할 수 있습니다.

위치 변경

십대는 시작 값에서 목표 값으로 전환합니다. 이 스크립트는 CFrames를 사용하여 버튼을 현재 위치와 관련하여 이동합니다. 이 방향은 스크립트의 줄 28 에 제어됩니다.

이 줄에서 X, Y 및 Z 좌표를 사용하여 새로운 CFrame이 생성됩니다. 이 예에서 버튼은 Y 축에 대해 이동합니다.

-- 버튼 위치에 대한 새 CFrame 계산
local offsetCFrame = CFrame.new(0, TWEEN_MOVE_DISTANCE * buttonState, 0)
local newCFrame = button.CFrame:ToWorldSpace(offsetCFrame)

버튼이 다른 방향으로 이동하려면 단순히 원하는 좌표 중 하나를 줄으로 대체하십시오. TWEEN_MOVE_DISTANCE * buttonState 를 모든 다른 좌표로 0으로 설정하십시오.

예를 들어, 이 줄은 X축 대신 상대적으로 이동합니다.

-- 버튼 위치에 대한 새 CFrame 계산
local offsetCFrame = CFrame.new( TWEEN_MOVE_DISTANCE * buttonState, 0, 0)
local newCFrame = button.CFrame:ToWorldSpace(offsetCFrame)

시간 및 거리 조정

스크립트에는 트위닝의 이동에 영향을 주는 다음 변수가 포함되어 있습니다. 이 스크립트에 특정 이름을 기반으로 변경할 수 있도록 작성된 TWEEN_TIME 같은 자체 이름이 포함되어 있습니다.

다음 변수의 값을 변경해 보세요:

• 줄 11 - TWEEN_TIME : 트위닝이 발생하는 데 걸리는 시간(초).
• 줄 12 - TWEEN_MOVE_DISTANCE : 버튼이 스터드 단위의 거리를 이동합니다.

다른 속성 조정

숫자 데이터 형식을 가진 대부분의 속성은 트윈할 수 있습니다. 이 섹션에는 회전과 같은 일반적인 속성이 포함되어 있습니다. 참고로, 여러 속성을 동시에 트윈할 수도 있습니다.

자산 목록을 자세히 보려면 TweenService API 페이지를 참조하십시오.

회전

회전의 경우 Vector3를 사용하는 대신 트위닝과 C프레임을 결합하십시오. 트위닝은 펫이나 코인을 잡을 때 크리처를 움직이게 하고 C프레임은 코인을 잡을 때 움직입니다.

다음 스크립트 예에서 생물의 위치 및 회전은 클릭하면 모두 트위니드되어 얼마나 행복한지 표시합니다.

아래 코드는 TWEEN_ROT_ANGLES 의 각도에 따라 개체를 회전합니다.

-- tween을 사용하여 개체를 회전하고 바운스
local TweenService = game:GetService("TweenService")
local partToTween = script.Parent
local clickDetector = partToTween:FindFirstChildWhichIsA("ClickDetector")
local inTween = false

-- 사용자 정의 변수
local TWEEN_TIME = 0.25
local TWEEN_ROT_ANGLES = -45
local TWEEN_MOVE_DISTANCE = 3

-- 트위언 변수
local tweenInfo = TweenInfo.new(
	TWEEN_TIME,  -- 시간
	Enum.EasingStyle.Quad,  -- EasingStyle
	Enum.EasingDirection.Out,  -- 쉬운 방향
	1,  -- RepeatCount (Zero 미만일 때 트윈이 무한히 반복됩니다)
	true  -- 되돌리기 (목표에 도달하면 트윈이 되돌릴 것입니다) Reverses (tween will reverse once reaching its goal)
)

local function activateAction()
	-- 개체가 트위닝되는 경우 트위닝을 다시 하지 않도록 방지합니다.
	if inTween == true then
		return
	end

	-- 새로운 CFrame 개체 위치 및 회전 계산
	local offsetCFrame = CFrame.new(0, TWEEN_MOVE_DISTANCE, 0)
	local rotatedCFrame = CFrame.Angles(math.rad(TWEEN_ROT_ANGLES), 0, 0)
	offsetCFrame = offsetCFrame:ToWorldSpace(rotatedCFrame)
	local newCFrame = partToTween.CFrame:ToWorldSpace(offsetCFrame)

	-- 트위닝을 만들고 플레이하십시오
	local tweenObject = TweenService:Create(partToTween, tweenInfo, {CFrame = newCFrame})
	tweenObject:Play()
	inTween = true

	-- 트윈 완료 시 개체 클릭 가능 만들기On tween completion, make object clickable again
	tweenObject.Completed:Connect(function()
		inTween = false
	end)
end

clickDetector.MouseClick:Connect(activateAction)

크기 조정

게임 내 개체의 크기를 변경하면 플레이어가 개체와 상호 작용했음을 나타내기도 합니다. 예를 인스턴스, 건강 팩이나 보석과 같은 픽업은 터치할 때 축소됩니다. 부품을 확장하려면 원하는 크기의 새로운 벡터3로 목표를 변경하십시오.

-- 부품을 만질 때 부품의 크기를 조정하고 파괴하십시오
local TweenService = game:GetService("TweenService")
local partToScale = script.Parent
local inTween = false

-- 사용자 정의 변수
local TWEEN_TIME = 1
local TWEEN_SCALE = Vector3.zero

-- 트위언 변수
local tweenInfo = TweenInfo.new(
	TWEEN_TIME,  -- 시간
	Enum.EasingStyle.Exponential,  -- EasingStyle
	Enum.EasingDirection.Out  -- 쉬운 방향
)

local function onPartTouch(otherPart)
	-- 개체가 트위닝되는 경우 트위닝을 다시 하지 않도록 방지합니다.
	if inTween == true then
		return
    end

	local partParent = otherPart.Parent
    local humanoid = partParent:FindFirstChildWhichIsA("Humanoid")

	if humanoid then
		-- 픽업한 개체로 인해 추가 충돌 방지
        partToScale.CanCollide = false

		-- 트위닝을 만들고 플레이하십시오
		local tweenObject = TweenService:Create(partToScale, tweenInfo, {Size = TWEEN_SCALE})
		tweenObject:Play()
        inTween = true

		-- 개체 완료 시, 개체 파괴
		tweenObject.Completed:Connect(function()
			partToScale:Destroy()
		end)
	end
end

partToScale.Touched:Connect(onPartTouch)

색상 변경

부품은 Color3 값으로 트위닝하여 색상을 전환할 수 있습니다. 예를 인스턴스, 적이나 파괴 가능한 개체는 Color3 값으로 섬광하여 히트 또는 클릭한 것에 대한 피드백을 제공할 수 있습니다.

-- 클릭 시 개체의 색을 트위니 하고 3 번 클릭 한 후 파괴 합니다.Tween an object's color on click and destroy it after 3 clicks
local TweenService = game:GetService("TweenService")
local partToTween = script.Parent
local clickDetector = partToTween:FindFirstChildWhichIsA("ClickDetector")
local inTween = false

-- 사용자 정의 변수
local TWEEN_TIME = 0.2
local COLOR_ON_HIT = Color3.fromRGB(255, 0, 50)
local hitCount = 0

-- 트위언 변수
local tweenInfo = TweenInfo.new(
	TWEEN_TIME,  -- 시간
	Enum.EasingStyle.Exponential,  -- EasingStyle
	Enum.EasingDirection.InOut,  -- 쉬운 방향
	0,  -- RepeatCount (Zero 미만일 때 트윈이 무한히 반복됩니다)
	true  -- 되돌리기 (목표에 도달하면 트윈이 되돌릴 것입니다) Reverses (tween will reverse once reaching its goal)
)

local function activateAction()
	-- 개체가 트위닝되는 경우 트위닝을 다시 하지 않도록 방지합니다.
	if inTween == true then
		return
	end

	-- 트위닝을 만들고 플레이하십시오
	local tweenObject = TweenService:Create(partToTween, tweenInfo, {Color = COLOR_ON_HIT})
	tweenObject:Play()
	inTween = true

	-- 트윈 완료 시 개체 클릭 가능 만들기On tween completion, make object clickable again
	tweenObject.Completed:Connect(function()
		inTween = false
		-- 증가 된 적중 수
		hitCount += 1
		-- 3번 히트 후 개체 파괴
		if hitCount == 3 then
			partToTween:Destroy()
		end
	end)
end

clickDetector.MouseClick:Connect(activateAction)

이 스크립트는 색을 변경하기 위해 일반적인 부품을 사용하지만, 적용된 텍스처를 사용하여 MeshParts를 직접 Roblox Studio에 내보내는 것도 가능합니다. MeshParts는 종종 3D 모델을 가져오지만, 부품을 직접 Roblox Studio에 내보내는 것은 드문 일입니다.

완전히 텍스처화된 MeshPart를 작업하는 경우 팔로잉권장합니다.

1. 메쉬 부품 대신 SpecialMesh를 사용하십시오. 메쉬 부품의 텍스처는 스크립트에 의해 염색이 얼마나 변경되는지 재정의합니다.

2. 색 속성이 아닌 VertexColor를 변경하여 특수 메쉬의 색을 변경합니다.

프로젝트 샘플

이 비복사 플레이스모든 스크립트 예시를 보십시오. 모든 스크립트를 수정할 수도 있습니다.

회전, 크기 조정 및 색상 변경 트위ン을 위한 스크립트를 포함합니다. 보기 >