코로나로 물방울 올라가는 효과 내기

얼마전에 눈발 흩날리는 효과를 주는 앱에 대해 다뤄봤습니다.
꽤 그럴듯 했죠?

오늘은 보니까 물 속에서 물방울 올라가는 효과 비슷한 코드가 소개됐더라구요.
이것도 꽤 그럴듯하고 나중에 앱 만들 때 유용하게 쓰일 수 있을 것 같습니다.

코드부터 보자면요. config.lua는 아래와 같이 만드세요.

application =
{
	content =
	{
		width = 320,
		height = 480,
		scale = "letterbox"
	},
}

해상도는 320*480 에 맞췄구요. scale은 letterbox로 했습니다.



build.settings는 아래와 같이 작성하세요.

settings =
{
	orientation =
	{
		default = "landscapeRight",
	},
}



이러면 앱이 눕혀서 실행 되겠죠?



다음은 main.lua입니다.



display.setStatusBar(display.HiddenStatusBar)
local background = display.newImage("background.png")
local mobs = display.newGroup()
math.randomseed(os.time())
for i = 1, 10 do
	 local greenCircle = display.newImage("greencircle.png")
	 greenCircle.x = math.random(0,479)
	 greenCircle.y = math.random(0,319)
	 local randomDirection = math.rad(math.random(0,359))
	 greenCircle.xSpeed = 2*math.cos(randomDirection)
	 greenCircle.ySpeed = 2*math.sin(randomDirection)
	 mobs.insert(mobs,greenCircle)
end
 
local function update(e)
	for i = 1, mobs.numChildren do
		mobs[i].x = mobs[i].x + mobs[i].xSpeed
		mobs[i].y = mobs[i].y + mobs[i].ySpeed
		if(mobs[i].x<0) then
			mobs[i].x = mobs[i].x + 480
		end
		if(mobs[i].x>480) then
			mobs[i].x = mobs[i].x - 480
		end
		if(mobs[i].y<0) then
			mobs[i].y = mobs[i].y + 320
		end
		if(mobs[i].y>320) then
			mobs[i].y = mobs[i].y - 320
		end
	end	
end
 
Runtime:addEventListener("enterFrame",update)



것도 눈발 흩날리는 느낌을 주는 앱처럼 enterFrame을 사용하고 있습니다.

지난 글에서 다뤘던 것처럼 이 enterFrame을 사용할 때는 메모리 관리를 

확실하게 해 줘야 합니다.



위 소스를 보면요. 

처음엔 아이폰의 status bar를 없애는 거구요.

다음에 배경 이미지를 넣었고 mobs라는 group을 만들었습니다.

그리고 random값을 이용할 건데 그 seed를 os.time으로 설정했습니다.



다음에는 for 문이 있는데요.

물방울 모양이 될 이미지를 하나 display 합니다.

그리고 이 이미지를 특정한 위치에 놓습니다.

이 때 random 하게 x,y좌표를 만들어서 화면 여러곳에 퍼지게 만듭니다.



다음으로는 이 원이 갈 방향을 random 하게 만듭니다. 이것은 각도를 radian 

값으로 바꿔서 값을 갖고 있게 됩니다.



이 각도와 라디안 그리고 sin,cos 계산공식은 게임을 만들 때 아주 자주 

사용하게 됩니다.

저도 Spin the bottle 등을 만들 때 리얼한 느낌을 주기 위해서 이런 공식을 

사용 했었는데요.

tool이 아니라 game 앱을 만들려면 이런 기초 수학을 알아 두시면 아주 

좋습니다.



다음 10~11번째 줄은 삼각함수를 이용해서 x,y 좌표로 이 원이 움직이는 범위(속도)를 계산해 넣습니다.

이 값은 update 문이 계속 반복 되면서 계산해야 하기 때문에 원의 프로퍼티 값으로 가지고 있어야 합니다.

그래야 일정한 방향으로 원을 움직일 수 있게 됩니다.



그 다음은 아까 생성한 mobs라는 group에 원을 insert 합니다.



그 다음 update 함수인데요. 먼저 34번째 줄 리스너를 볼까요?

enterFrame을 사용해서 각 프레임마다 update 함수를 실행 하도록 합니다.

그럼 update 문을 보시면요.

mobs에 있는 children들을 scan 하고요 이 children의 갯수만큼 for 문을 

돌립니다.

그러니까 각 원마다 어떤 행동을 하도록 컨트롤 할 수 있게 되는거죠.



거기서 하는 일은 아까 처음 for문에서 정했던 x,y의 스피드를 기반으로 원의 

위치를 바꾸게 됍니다.

여기까지 하면 원이 자연스럽게 움직여서 물방울 효과를 주게 됩니다.



그런데 여기까지만 하면 원이 화면 밖으로 나가면 없어져 버리게 되서요.

다음 if 문들은 원이 화면 밖으로 나가게 되면 다시 화면 안으로 들어오도록 

해 줍니다.



이 정도만 해도 아주 그럴싸한 물방울 효과가 나옵니다.

진짜 할리우드 영화처럼 real한 느낌을 주시려면 원의 좌표를 바꾸는 부분을 

좀 더 정교하게 control 하면 되겠죠?



아래 유튜브 영상이 이 앱을 실행한 화면입니다.

좋은 효과 잘 활용하시구요.. 추천 추천 부탁드려요... ~~~~~~~