커스텀 필터 사용하기(Post-Processing Effect)

포토샵이나 카메라앱에서 다양한 모드의 필터를 사용하는 것을 본 적이 있을 것이다. 따뜻한 느낌을 준다거나 차가운 느낌을 주거나, 모자이크 처리를 하거나 색상을 변하게 하는 등의 여러 필터가 있는 것을 알고 있을 것이다. 로블록스에서도 게임 화면에 필터를 적용시켜서 다양한 효과를 줄 수 있다. 이런 효과를 Post-Processing Effect라고 한다. 파티클 이펙트나 빔, 폭발 이펙트들과 다르게 필터를 사용하는 효과는 화면 전체에 적용되고 비주얼적으로 그림(화면)을 완성한 후에 적용된다. 아래의 이미지들로 여러 효과가 적용된 예를 보여준다. 이런 효과는 리소스를 잡아먹기 때문에 디바이스에 따라서 적용이 안될 수 있다. 피씨에서는 보이던 효과가 모바일로 보면 보이지 않고 그렇다. 각 디바이스의 퍼포먼스가 다르기 때문에 효과 사용시에는 각각 확인을 해야 할 것이다.

 

 

이런 효과들은 좀더 리얼한 그래픽을 보여주기 위해서도 사용되고 플레이어에게 피드백을 주기 위해서도 사용된다. 피드백이란건.. 대표적인 예로 데미지를 입었을 때, 짧은 순간 화면을 붉게 만들어주는 등의 효과를 말한다.

직접 해보니 로블록스 스튜디오에서 적용했을때 플레이중이 아닌 상황, 즉 게임 편집창에서는 효과가 작동하지 않았다. 편집중에 리소스가 큰 PostProcessing을 꺼버려서 편집에 방해를 주지 않는 목적이라고 짐작한다. 그리고 본인의 피씨처럼 좋지 않은 피씨의 경우는 플레이를 해도 한참 후에야 PostProcessing 효과가 적용되었다.

Effect 추가하기

이런 효과는 카메라에 추가할 수도 있고, 라이팅에 추가할 수도 있다. Camera에 추가하는 효과는 개별 플레이어에게 각각 적용되고 Lighting 서비스에 추가하는 효과는 모든 플레이어에게 그대로 적용된다.

Workspace.Camera —플레이어의 카메라에 적용되는 필터. 캐릭터가 데미지를 입을 때 블러(흐릿해짐)가 나오는 등의 효과를 기대할 수 있다.

Lighting — 모든 플레이어에게 보여지는 필터.

Bloom 효과

Bloom 효과는 보다 밝은 빛을 보여주는 효과이다. 네온효과가 만족스럽지 못하면 Bloom 효과로 더 강한 네온 효과를 보여줄 수 있다. Bloom 효과의 intensity를 높여주면 화면의 모든 빛의 강도를 높일 수 있다.

Blur 효과

Blur 효과는 화면을 흐릿하게 만드는 효과이다. 아래의 이미지처럼 배경은 흐릿하게 만들어 놓고 그 위에 GUI는 선명하게 보여주므로서 몰입감을 더 주게 만드는 효과를 보여줄 수 있다. 이런 효과는 플레이어의 카메라에 적용해야 할 것이다. 원하는 타이밍에 블러가 적용되야 하고 원하는 플레이어에게만 적용되야 하기 때문이다. 물론, 로컬 스크립트로 제어해야 한다.

Color Correction 효과

여느 포토샵같은 포토 에디터 기능이 있는 앱에서 처럼 Color Correction 효과는 화면 색상의 채도, 틴트, 색상 대비등의 효과를 보여준다. 화면의 무드를 바꿔준다거나 자연 경관을 강조할 때 사용하면 좋다. 데미지를 입을 때, 화면 전체를 빨간색 틴트로 효과를 주는 것도 좋은 사용법이다.

Depth of Field 효과

Deapth of Field 효과는 멀리 있는 것은 흐릿하게하고 가까이 있는 것은 또렷하게 보이는 효과등을 나타낼 때 사용된다.  포커스가 있는 곳은 선명하게 보여주고 포커스가 없는 곳은 흐릿하게 보여준다.

Depth of Field 의 각 속성들의 설정은 생각보다 이해하기가 어렵다.  속성들을 변경하기 전에 각 속성의 이해를 먼저 하는 것이 좋겠다.

• FarIntensity :  먼 곳의 Blur 효과의 강도. 0이 선명, 1이 아주 흐릿.
• FocusDistance : 포커스의 거리. stud단위.
• InFocusRadius : 포커스의 굵기. 포커스되는 면적의 넓고 좁음을 표현함. stud단위
• NearIntensity : 가까운 곳의 Blur 효과의 강도. 0이 선명, 1이 아주 흐릿.

InFocusRadius 속성이 이해하기가 가장 힘들다. 아래의 그림을 보면 어느정도 이해가 될 것이다.

Sun Rays 효과

Sun Ray효과는 태양의 후광등을 표현할 때 사용된다. 아래의 동영상의 빛의 후광을 생각하면 된다. 

실제 사용예

아래의 세가지 예는 여러 필터를 조합하여 보여주는 Post-processing 이펙트의 예들이다. 첫번째와 두번째처럼 자연경관이나 실내의 어떤 느낌?을 보여주고 싶은 경우는 특별한 일이 없는 한 Lighting 서비스에 효과를 적용한다. 플레이어 모두에게 그냥 보여주는 화면이기 때문이다. 세번째의 예는 플레이어가 죽을때, 혹은 데미지를 입을때만 나오는 효과를 보여주고 싶은 것이기 때문에 Workspace의 카메라에 효과를 적용시켜서 해당 플레이어에게만 효과가 적용되게 하였다. 이 경우에는 로컬 스크립트를 사용하는 프로그래밍이 추가로 들어가야 한다.

Outdoor Lighting의 예

Bloom 효과

• Intensity : 0.5
• Size : 50
• Threshold : 0.8

Depth of Field 효과

• FarIntensity : 0.5
• FocusDistance : 15
• InFocusRadius : 30
• NearIntensity : 0

Color Correction 효과

• Brightness : 0
• Contrast : 0.2
• Saturation : 0.1
• TintColor : 255,255,255

Sun lays 효과

• Intensity : 0.035
• Spread : 0.4

Indoor Lighting의 예

Bloom 효과

• Intensity : 0.8
• Size : 40
• Threshold : 1.5

Depth of Field 효과

• FarIntensity : 0.5
• FocusDistance : 12
• InFocusRadius : 5
• NearIntensity : 1

Color Correction 효과

• Brightness : 0
• Contrast : 0.4
• Saturation : -0.4
• TintColor : 220,210,255

플레이어가 데미지를 입을 때의 피드백의 예

스크립트로 Post-Processing 이펙트를 제어할 수 있다. 데미지를 입어 화면 색상을 빨갛게 하거나, 독에 감염되어 녹색으로 틴트효과를 주고 약간 블러 효과도 줄 수 있을 것이다. 위에 보여준 예중에서 블러 화면에 GUI를 띄우는 효과도 스크립트로 제어해야 할 것이다. 스크립트로 PostProcessing이펙트를 제어할 때는 보통 TweenService를 사용하여 점진적으로 적용시키는 방법을 사용한다.

여기서는 아래의 동영상처럼 캐릭터가 죽을 때 화면이 빨갛게 + 블러효과를 주는 방법의 스크립트를 보여줄 것이다.

StarterPlayerScripts 서비스의 자식으로 로컬 스크립트를 만든다. 각 플레이어 개개인에게 따로 적용되야하는 효과이므로 로컬스크립트를 사용한다. 

local TweenService = game:GetService("TweenService")
local Players = game:GetService("Players")
 
local player = Players.LocalPlayer
 
-- 블러 효과 생성
local blurEffect = Instance.new("BlurEffect")
-- 플레이어 카메라에 추가
blurEffect.Parent = workspace.CurrentCamera
-- color correction 효과 생성
local colorCorrectionEffect = Instance.new("ColorCorrectionEffect")
-- 플레이어 카메라에 추가
colorCorrectionEffect.Parent = workspace.CurrentCamera
 
-- 효과에 사용될 상수들
local EFFECT_DELAY = 0  -- 효과 바로 적용
local EFFECT_DURATION = 6  -- 6초간 적용시킴
local TINT_COLOR = Color3.fromRGB(200, 45, 45) -- 변경될 틴트 컬러
local BLUR_INTENSITY = 56  -- 블러는 56까지 
 
-- "TweenInfo" 오브젝트 설정
local deathEffectInfo = TweenInfo.new(
	EFFECT_DURATION,
	Enum.EasingStyle.Linear,
	Enum.EasingDirection.Out,
	0,
	false,
	EFFECT_DELAY)
 
-- 블러와 ColorCorrection 효과 목표치
local tweenBlurGoal = {
	Size = BLUR_INTENSITY,
}
local tweenColorGoal = {
	TintColor = TINT_COLOR
}
local tweenBlur = TweenService:Create(blurEffect, deathEffectInfo, tweenBlurGoal)
local tweenColor = TweenService:Create(colorCorrectionEffect, deathEffectInfo, tweenColorGoal)

-- 플레이어가 죽으면 실행될 함수. PostProcessing 효과를 TweenService로 점진적으로 적용시킴
local function playDeathTween()
	blurEffect.Enabled = true
	colorCorrectionEffect.Enabled = true
	tweenBlur:Play()
	tweenColor:Play()
end
 
-- 캐릭터 생성시에 실행될 함수
local function setupDeathTween(character)
    -- 휴머노이드 찾기	
	local humanoid = character:WaitForChild("Humanoid")
    -- 플레이어가 재생성될때, 효과가 아직 실행중일때는 다 취소시킴.
	if tweenBlur and tweenBlur.PlaybackState == Enum.PlaybackState.Playing then
		tweenBlur:Cancel()
		tweenColor:Cancel()
	end
 
	-- 포스트프로세싱 효과의 초기화
	blurEffect.Enabled = false
	blurEffect.Size = 0
	colorCorrectionEffect.Enabled = false
	colorCorrectionEffect.TintColor = Color3.fromRGB(255, 255, 255)
 
	-- 플레이어가 죽으면 실행될 함수 연결
	humanoid.Died:Connect(function()
		playDeathTween()
	end)
end
 
-- 캐릭터가 생성될 때 실행될 함수 연결
player.CharacterAdded:Connect(setupDeathTween)

-- 첫 실행시에는 이미 캐릭터가 생성되어 있을 수 있으므로 
-- 위의 CharacterAdded 이벤트와 연결된 setupDeathTween함수가 실행되지 않는다.
-- 그래서 캐릭터가이미 생성되어 있으면 바로 실행.
if player.Character then
	setupDeathTween(player.Character)
end