[SpriteKit #2] SpriteKit을 이용해서 Hello Coding Campus 문자열 애니메이션

이번 튜토리얼은 이전에 작성한 SpriteKit을 이용해서 Hello Coding Campus 문자열 출력하기 튜토리얼에서 레이블을 화면 중앙에 배치해서 문자열을  출력을 했는데요 이번에는 화면을 탭 하면 레이블을 이동 하도록 예제를 작성해 보려고 합니다. 

 

1.  UITapGestureRecognizer추가

화면을  탭할 때마다 레이블이 이동하도록 하기위해서 Scene에 UITapGestureRecognizer를 추가합니다. Scene에 Label을 추가한후 GameScene.swift 파일의 didMove(to:) 에 다음 코드을 추가합니다. UITapGestureRecognizer 클래스의 인스턴스를 생성하고 이를 Scene 뷰에 추가합니다. UITapGestureRecognizer에 액션을 함수와 연결할 때에는 [#selector()] 라는 구문을 사용하기 때문에 함수를 작성할 때 맨 앞에 [@objc] 를 붙여야합니다. 그리고  recognizer를 뷰에 추가합니다.

 

        let recognizer = UITapGestureRecognizer(target: self, action: #selector(didTapView))

        view.addGestureRecognizer(recognizer)

          

          이제 화면을 탭 했을때 실행하는 didTapView(recognizer:) 메서드의 프로토타입을 GameScene 클래스에 추가합니다.

    @objc func didTapView(recognizer: UIGestureRecognizer) {

    }

 

          여기까지 소스를 작성을 해서 실행을 하면 에러가 없이 실행이 되지만 화면을 터치해도 아무런 일도 하지 않습니다. 

 2. SKAction 생성 

정적인 스프라이트 보다는 스프라이트를 움직이거나 회전시키는 것과 같은 액션을 통해 게임을 동적으로 만들수 있습니다.  SKAction을 이용해서 스프라이트 노드의 색상,위치와 방향, 크기, 스케일 속성 및 노드의 보여짐, 투명도를 변화시켜 노드의 콘텐츠를 변화시키는 방법으로 애니메이션을 만들수 있습니다. 따라서 레이블을 이동하려면 didTapView(recognizer:) 메서드 내에 다음 코드을 추가 합니다.

 

    let viewLocation = recognizer.location(in: view)

    let sceneLocation = convertPoint(fromView: viewLocation)

    let moveToAction = SKAction.move(to: sceneLocation, duration: 1)

    label.run(moveToAction)  

 

사용자가 화면을 터치 했을 때 제스처가 발생한 좌표를 반환합니다. 터치한 곳을 뷰의 좌표를 변환하기 위해서 convertPoint 메서드를 사용해서 터치한 곳의 뷰의 좌표로 변환하고 SKAction.move 메서드를 호출해서 노드를 특정 위치로 이동하게 합니다. 

 

 

이제 프로젝트를 실행하고 화면의 아무 곳이나 탭하면 레이블이 해당 위치로 이동합니다.

 

 

3. 소스코드

사용한  소스는  GitHub에서 전체 Xcode 프로젝트를 다운로드 할 수 있습니다.