iOS7 Sprite Kit을 이용한 게임 개발

16,313 views

Published on

이 자료는 2013년 11월 스마트 앱 개발자 포럼 세미나 발표자료 입니다.
애플사에서 iOS 7용 API로 추가한 Sprite Kit은 주로 게임 개발을 위하여 사용되는 스프라이트 API로 단순한 코딩으로 애니메이션을 쉽게 구현할 수 있습니다.
단 iOS에서 주로 사용되는 UIView 객체에는 적용할 수 없습니다. UIView 객체란 iOS의 UIImage, UIButton 등과 같은 기본 UI 객체입니다. Sprite Kit을 사용하게 되면 파티클 효과, 물리 효과, 스프라이트의 애니메이션 효과를 매우 쉽게 구현할 수 있습니다.

이 자료는 Sprite Kit의 특징과 간단한 샘플 코드를 통해 Sprite Kit을 이해할 수 있도록 하였습니다.

Published in: Technology
  • Be the first to comment

iOS7 Sprite Kit을 이용한 게임 개발

  1. 1. iOS7 Sprite Kit을 이용한 스마트폰 게임 개발 창원대학교 정보통신공학과 박동규 dongupak@gmail.com http://ivis.cwnu.ac.kr/tc/dongupak 스마트 앱 개발자 포럼 세미나 2013. 11.
  2. 2. 내용 • 정의와 특징 • Cocos2d와의 장,단점 비교 • 장면 그래프 구조 알아보기 • 텍스쳐 아트라스, 액션, 사운드 기능 알아보기 • 물리 시뮬레이션, 파티클 • 3-4 가지의 실습 과정으로 구성됨
  3. 3. Sprite Kit란? • • • 애플사에서 개발한 스프라이트 API • OS X Mavericks, iOS 7에서 사용가능한 새 API 2D 게임 개발도구로 Cocos2d와 매우 유사한 구 조임 스마트 폰 기반 게임 시장의 성장과 Mac 운영체제 의 확산으로 인하여 효율적인 게임 개발도구의 필 요성이 제기됨
  4. 4. iOS 7 게임 컨트롤러 API • iPhone 5 이상의 기기에서 사용가능함 http://www.macrumors.com/2013/11/19/first-ios-7-game-controller-moga-ace-power-now-available/
  5. 5. 특징 • • • • 고성능 2D 렌더링 프레임워크 내장 물리 시뮬레이션, 파티클 시스템 지원 OS X, iOS 지원(크로스 플랫폼 개발도구) 실행 환경, 개발을 위한 패키지 • • • 스프라이트, 텍스쳐 아트라스 지원 비선형 애니메이션 지원 오디오, 비디오를 비롯한 비주얼 효과를 지원함
  6. 6. 장점 • • iOS 게임개발을 위한 추가 라이브러리가 필요없다 • 이미지 효과나 마스크와 같은 복잡한 작업을 제공 되는 기능으로 쉽게 할 수 있다 • iOS에서 처음 게임을 개발하려는 개발자라면 좋은 시도가 될 수 있다 텍스쳐 아트라스, 파티클, 물리 시뮬레이션을 xcode가 자체적으로 제공한다
  7. 7. 단점 • Cocos2d나 Unity와는 달리 iOS 생태계에서 만 사용할 수 있다. • 안드로이드 포팅을 위해서는 별도의 작업이 요구된다 • Cocos2d와 같은 폭넓은 사용자 커뮤니티가 “아직” 형성되어 있지 않다.
  8. 8. Introduction
  9. 9. 장면 그래프 • • • 화면에 나타나는 객체들을 어떻게 구조화 할 것인가? • 트리구조를 이용하여 부모-자식관계를 형성하여 구조화 시키자 트리구조의 장점 • 객체들을 계층적으로 구성할 수 있어서 객체의 삽입과 제 거, 이동등을 손쉽게 할 수 있다. 예전부터 3D, 2D객체를 구조화하는데 이용되던 방법 • Maya, AutoCAD,VRML, Open Inventor, X3D, OpenSG,..
  10. 10. 장면 그래프 • • 현재 활성화된 Sprite Kit의 모든 노드의 계층적인 구조 • • 모든 노드는 하나의 부모 노드를 가진다. 자식 노드는 여러개의 하위노드를 가질 수 있다. 장면 그래프는 고수준 그래픽스 시스템이나 게임 프로그래밍에서 널리 사용되던 방법 • Cocos2d, Cocos2d-x등
  11. 11. Scene Graph SKScene SKSpriteNode SKLabelNode SKSpriteNode
  12. 12. Demo
  13. 13. Project Template 생성
  14. 14. 기본 템플릿 살펴보기
  15. 15. 뷰 컨트롤러
  16. 16. SKView의 정보활용
  17. 17. 뷰 컨트롤러 살펴보기 • • SKView의 FPS, nodeCount를 보여줄 것인가 아닌가를 결정 • • 이 부분은 디버깅시에 유효하다. 애니메이션과 렌더링은 SKView 객체가 수행한다 SKScene을 생성하여 이 Scene을 SKView에서 present 한 다. • • 게임 콘텐츠 구성은 SKScene이 담당한다 게임 개발자는 Scene위에 스프라이트와 레이블, 메뉴등을 담을 수 있다
  18. 18. SKScene
  19. 19. SKScene의 초기화
  20. 20. SKScene의 초기화
  21. 21. SKScene의 초기화 SKScene의 배경색상
  22. 22. SKScene의 초기화 SKScene의 배경색상
  23. 23. SKScene의 초기화 SKScene의 배경색상 레이블 노드 생성
  24. 24. SKScene의 초기화 SKScene의 배경색상 레이블 노드 생성
  25. 25. SKScene의 초기화 SKScene의 배경색상 레이블 노드 생성 레이블 노드를 장면 그래프에 추가
  26. 26. SKScene의 초기화 SKScene의 배경색상 레이블 노드 생성 레이블 노드를 장면 그래프에 추가
  27. 27. 터치 이벤트 처리와 액션
  28. 28. 터치 이벤트 처리와 액션 터치좌표를 touches NSSet으로부터 읽는다
  29. 29. 터치 이벤트 처리와 액션 터치좌표를 touches NSSet으로부터 읽는다
  30. 30. 터치 이벤트 처리와 액션 터치좌표를 touches NSSet으로부터 읽는다 스프라이트 노드 생성
  31. 31. 터치 이벤트 처리와 액션 터치좌표를 touches NSSet으로부터 읽는다 스프라이트 노드 생성
  32. 32. 터치 이벤트 처리와 액션 터치좌표를 touches NSSet으로부터 읽는다 스프라이트 노드 생성 액션객체를 생성한다. 회전 액션
  33. 33. 터치 이벤트 처리와 액션 터치좌표를 touches NSSet으로부터 읽는다 스프라이트 노드 생성 액션객체를 생성한다. 회전 액션
  34. 34. 터치 이벤트 처리와 액션 터치좌표를 touches NSSet으로부터 읽는다 스프라이트 노드 생성 액션객체를 생성한다. 회전 액션 스프라이트 노드가 액션을 수행하게 된다
  35. 35. 터치 이벤트 처리와 액션 터치좌표를 touches NSSet으로부터 읽는다 스프라이트 노드 생성 액션객체를 생성한다. 회전 액션 스프라이트 노드가 액션을 수행하게 된다
  36. 36. 터치 이벤트 처리와 액션 터치좌표를 touches NSSet으로부터 읽는다 스프라이트 노드 생성 액션객체를 생성한다. 회전 액션 스프라이트 노드가 액션을 수행하게 된다 매 프레임마다 수행할 게임로직
  37. 37. 터치 이벤트 처리와 액션 터치좌표를 touches NSSet으로부터 읽는다 스프라이트 노드 생성 액션객체를 생성한다. 회전 액션 스프라이트 노드가 액션을 수행하게 된다 매 프레임마다 수행할 게임로직
  38. 38. 결과 보기
  39. 39. 노드 클래스 • SKScene, SKSpriteNode, SKLabelNode, 등은 모두 SKNode의 하위 클래스이다. • 노드 클래스 자체는 화면에 나타나는 기능이 없으 나, 장면 그래프를 구조적으로 만드는데 필요한 기능 을 가지고 있다 • • 자식 노드의 추가, 삭제, 읽기등의 기능을 할 수 있다. 장면 그래프 내에서 자식 노드는 부모 노드의 위치, 액션등이 변할 경우 영향을 받는다
  40. 40. 실습-액션 바꾸기
  41. 41. 스프라이트 노드의 속성변경
  42. 42. 스프라이트 액션
  43. 43. 텍스쳐 아트라스 • 스프라이트 이미지가 수백장에 달하는 게임이 있을 경우 여러개의 이미지로 만들어서 여러 번 읽는 것은 비효율적이다 • 하나의 이미지를 만들어서 이 이미지를 한 번 읽은 다음 여러개의 스프라이트로 나누 는 것이 바람직하다
  44. 44. 스프라이트 이미지들 MB_01.png MB_02.png MB_03.png MB_03.png ... 스프라이트 이미지가 100장 있을 경우 매번 번들로부터 이미지를 읽어오는 것은 비효율적이다. 또한 각 이미지를 저장하는 공간의 낭비가 발생한다.
  45. 45. 기존 방법 텍스쳐 아트라스를 자동 생성하는 도구를 이용함
  46. 46. 메타데이터 이용(plist)
  47. 47. 메타데이터 이용(plist)
  48. 48. 메타데이터 이용(plist)
  49. 49. 메타데이터 이용(plist)
  50. 50. 메타데이터 이용(plist)
  51. 51. 메타데이터 이용(plist)
  52. 52. 메타데이터 이용(plist)
  53. 53. in your code(Cocos2d)
  54. 54. in your code(Cocos2d)
  55. 55. in your code(Cocos2d)
  56. 56. in your code(Cocos2d) Sprite sheet file
  57. 57. in your code(Cocos2d) Sprite sheet file
  58. 58. in your code(Cocos2d) Sprite sheet file
  59. 59. in your code(Cocos2d) Sprite sheet file Sprite file
  60. 60. in your code(Cocos2d) Sprite sheet file Sprite file
  61. 61. in your code(Cocos2d) Sprite sheet file Sprite frame from sprite cached sheet Sprite file
  62. 62. in your code(Cocos2d) Sprite sheet file Sprite frame from sprite cached sheet Sprite file
  63. 63. in your code(Cocos2d) Sprite sheet file Sprite frame from sprite cached sheet Sprite file
  64. 64. in your code(Cocos2d) Sprite sheet file Sprite frame from sprite cached sheet Animation contain frames Sprite file
  65. 65. in your code(Cocos2d) Sprite sheet file Sprite frame from sprite cached sheet Animation contain frames Sprite file
  66. 66. in your code(Cocos2d) Sprite sheet file Sprite frame from sprite cached sheet Animation contain frames Sprite file
  67. 67. in your code(Cocos2d) Sprite sheet file Sprite frame from sprite cached sheet Animation contain frames Sprite file
  68. 68. in your code(Cocos2d) Sprite sheet file Sprite frame from sprite cached sheet Animation contain frames Animate frames Sprite file
  69. 69. in your code(Cocos2d) Sprite sheet file Sprite frame from sprite cached sheet Animation contain frames Animate frames Sprite file
  70. 70. in your code(Cocos2d) Sprite sheet file Sprite frame from sprite cached sheet Animation contain frames Animate frames Sprite file
  71. 71. in your code(Cocos2d) Sprite sheet file Sprite frame from sprite cached sheet Animation contain frames Animate frames repeats animation forever Sprite file
  72. 72. in your code(Cocos2d)
  73. 73. in your code(Cocos2d)
  74. 74. in your code(Cocos2d)
  75. 75. in your code(Cocos2d)
  76. 76. in your code(Cocos2d)
  77. 77. 텍스쳐 아트라스 • 파인더에 .atlas 라는 확장자를 가지는 폴더 아 래에 이미지들을 넣는다 • 이 폴더를 xcode 리소스로 넣게 되면 xcode 가 자동으로 텍스쳐 atlas 이미지를 생성한다
  78. 78. 텍스쳐 아트라스 • 텍스쳐 아트라스의 최대 크기는 2000x2000 픽셀이다 • 최대 크기보다 큰 아트라스 이미지가 있을 경 우 별도의 파일을 생성한다
  79. 79. 텍스쳐 아트라스 [이미지 출처 : Raywenderich 블로그]
  80. 80. 빌드 설정 Enable Texture Atlas Generation :YES
  81. 81. 게임 사운드
  82. 82. 게임 사운드 SKAction 클래스를 이용하여 게임 사운드를 로딩한다 runAction 메소드를 이용하여 사운드 재생
  83. 83. 액션
  84. 84. 액션 추가하기 • 정적인 스프라이트 보다는 스프라이트를 움직 이거나 회전시키는 것과 같은 액션을 통해 게 임을 동적으로 만들 수 있다 • SKAction을 이용한다
  85. 85. SKAction • 노드의 위치와 방향을 변화시킨다 • 노드의 크기와 스케일 속성을 변화시킨다 • 노드의 보여짐, 투명도를 변화시킨다 • 스프라이트 노드의 콘텐츠를 변화시키는 방법 으로 애니메이션을 만들 수 있다 • 스프라이트 노드의 색상을 변화시킨다
  86. 86. SKAction • 간단한 사운드를 재생시킨다 • 노드트리에서 노드를 제거시킨다 • 오브젝트의 selector나 block을 만들어서 자 체적인 액션을 만들 수 있다 • 하나이상의 액션들을 조합하여 연속적인 액션 을 만들거나, 반복액션을 수행할 수 있다
  87. 87. 장면 사이의 이동 • 장면(Scene)은 게임을 만드는 기본적인 틀을 제공하고 있다. • 예) 게임시작 장면, 메뉴 장면, 사용설명, 게 임, 게임종료, 랭킹장면,... • 게임을 위한 여러 장면을 만든 후 이 장면들 사이의 이동이 필요하다. • Sprite Kit은 장면 전환기능을 지원한다
  88. 88. 장면전환 • 다른 콘텐츠가 로딩되는 동안의 로딩화면 표 시기능 • 메인 메뉴 장면 • 사용자가 선택가능한 게임의 종류(mode) • 게임 플레이 • 게임 종료등의 장면이 있을 수 있다
  89. 89. SKTransition • 장면전환시에 필요한 다양한 효과를 생성할 수 있다. • • • • • • crossFace doorsCloseHorizontal/Vertical doorsOpenHorizontal/Vertical doorway fade/faceWithColor ....
  90. 90. Demo
  91. 91. 물리 시뮬레이션 • Cocos2d의 물리 시뮬레이션 • Box2d, Chipmunk 등의 3rd party 프레임 워크를 이용함 • Sprite Kit의 경우 물리시뮬레이션 키트를 포 함 • 장면에 물리시뮬레이션이 필요할 경우 Physics body를 넣어야 한다.
  92. 92. 물리 시뮬레이션 • • 3D 물리 시뮬레이션은 불가능 • 2D 물리시뮬레이션 물리 시뮬레이션을 위한 physics world가 필요함 • • • 중력을 적용 물리적 객체에 필요한 제동력(damping)을 적용 마찰력(friction) 계수를 적용함
  93. 93. 파티클 • 불꽃, 연기, 안개, 구름등과 같은 비정형 물리객 체 • Sprite Kit에는 파티클 시뮬레이션 기능을 내장하고 있다. • SKEmitterNode를 이용함
  94. 94. SpriteKit Particle File 제공
  95. 95. Lab(실습)
  96. 96. 실습 코드
  97. 97. 비디오 노드 • 장면 내에서 비디오 재생을 지원하는 SKVideoNode를 제공함 • 비디오 플레이기능, 필터를 이용한 가공이 가능함
  98. 98. 기타 기능등 • Crop 노드를 이용한 이미지 마스킹 기능
  99. 99. Good Reference
  100. 100. 참고자료 • Raywenderich Blog • http://www.raywenderlich.com/ • WWDC 2013 발표자료 • http://cocos2dDev.com/
  101. 101. Questions?

×