동국대 앱창작터 4일차:Cocos2d-X 고급기능

2,196 views

Published on

동국대 앱창작터 모바일게임 과정 2:Cocos2d-X
4일차 과정

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,196
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
3
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

동국대 앱창작터 4일차:Cocos2d-X 고급기능

  1. 1. 4일차:고급기능 모바일게임과정II:Cocos2d-X
  2. 2. 목차  패럴렉스노드 사용하기  타일맵 사용하기  파티클 사용하기 모바일게임과정II:Cocos2d-X 2
  3. 3. 패럴렉스노드 사용하기 모바일게임과정II:Cocos2d-X 3
  4. 4. 패럴렉스 기본 사용법  CCParallaxNode  화면을 스크롤하는 클래스  여러 개의 배경 이미지를 스크롤할 때 시차스크롤이 가 능함 모바일게임과정II:Cocos2d-X 4
  5. 5. 모바일게임과정II:Cocos2d-X 5
  6. 6. 모바일게임과정II:Cocos2d-X 6
  7. 7. 모바일게임과정II:Cocos2d-X 7
  8. 8. 디바이스보다 큰 배경 스크롤하기 모바일게임과정II:Cocos2d-X 8
  9. 9. 모바일게임과정II:Cocos2d-X 9
  10. 10. 모바일게임과정II:Cocos2d-X 10
  11. 11. 모바일게임과정II:Cocos2d-X 11
  12. 12. 배경과 스프라이트 동시 에 움직이기 모바일게임과정II:Cocos2d-X 12
  13. 13. 모바일게임과정II:Cocos2d-X 13
  14. 14. 모바일게임과정II:Cocos2d-X 14
  15. 15. 이동 버튼으로 배경 움직이기 모바일게임과정II:Cocos2d-X 15
  16. 16. 모바일게임과정II:Cocos2d-X 16
  17. 17. 모바일게임과정II:Cocos2d-X 17
  18. 18. 모바일게임과정II:Cocos2d-X 18
  19. 19. 모바일게임과정II:Cocos2d-X 19
  20. 20. 모바일게임과정II:Cocos2d-X 20
  21. 21. 모바일게임과정II:Cocos2d-X 21
  22. 22. 모바일게임과정II:Cocos2d-X 22
  23. 23. 배경과 스프라이트 같이 이동시키기 모바일게임과정II:Cocos2d-X 23
  24. 24. 모바일게임과정II:Cocos2d-X 24
  25. 25. 모바일게임과정II:Cocos2d-X 25
  26. 26. 모바일게임과정II:Cocos2d-X 26
  27. 27. 모바일게임과정II:Cocos2d-X 27
  28. 28. 모바일게임과정II:Cocos2d-X 28
  29. 29. 모바일게임과정II:Cocos2d-X 29
  30. 30.  다음 코드로 수정 모바일게임과정II:Cocos2d-X 30
  31. 31. 모바일게임과정II:Cocos2d-X 31
  32. 32. 모바일게임과정II:Cocos2d-X 32
  33. 33. 캐릭터 배경 끝까지 이동시키기 모바일게임과정II:Cocos2d-X 33
  34. 34. 모바일게임과정II:Cocos2d-X 34
  35. 35. 모바일게임과정II:Cocos2d-X 35
  36. 36. 모바일게임과정II:Cocos2d-X 36
  37. 37. 모바일게임과정II:Cocos2d-X 37
  38. 38. 모바일게임과정II:Cocos2d-X 38
  39. 39. 모바일게임과정II:Cocos2d-X 39
  40. 40. 모바일게임과정II:Cocos2d-X 40
  41. 41. 모바일게임과정II:Cocos2d-X 41
  42. 42. 모바일게임과정II:Cocos2d-X 42
  43. 43. 타일맵 사용하기 모바일게임과정II:Cocos2d-X 43
  44. 44. 타입맵이란?  타일  일정한 크기와 모양을 가진 그림 조각  타일맵  게임에서 이들 조각을 맞춰서 게임의 배경을 완성하고 이렇게 완성된 배경 을 ‘타일맵’이라고 함  배경이 크고 또한 장면이 많을 경우 배경이 되는 비트맵을 모두 메모리에 읽어들여야 한다면 매우 큰 메모리가 필요  타일을 사용해서 반복하게 되면 메모리를 적게 사용하고도 게임 플레이에 필요한 배경을 만들 수 있음 모바일게임과정II:Cocos2d-X 44
  45. 45. Cocos2d-x의 타일맵  TMX 타일맵  맵타입  정사각형(Orthogonal) 맵  마름모형(Isometric) 맵  육각형(Hexa) 맵  타일  임베디드 타일은 지원하지 않음  임베디드 타일세트만 지원(타일세트는 내장, 이미지는 내장 안함)  한 레이어당 하나의 타일세트만 지원  레이어  레이어 수 무제한  각 레이어는 내부적으로 CCTMXLayer(CCSpriteBatchNode의 서브클래스) 에 의해 표현  각 타일은 CCSprite(CCTMXLayer의 상위)로 표현  오브젝트 그룹  Tiled는 오브젝트 그룹 지원 모바일게임과정II:Cocos2d-X 45
  46. 46.  정사각형(Orthogonal) 맵  마름모형(Isometric) 맵  육각형(Hexa) 맵 모바일게임과정II:Cocos2d-X 46
  47. 47. 타일맵 만들기  Tiled  타일맵 에디터  www.mapeditor.org  정사각형 맵, 마름모형 맵만 지원 (육각형 맵 미지원) 모바일게임과정II:Cocos2d-X 47
  48. 48.  실행화면 모바일게임과정II:Cocos2d-X 48
  49. 49.  새 맵 만들기 (File -> New) 모바일게임과정II:Cocos2d-X 49
  50. 50.  새 타일세트 (Map -> New Tileset) 모바일게임과정II:Cocos2d-X 50
  51. 51. 모바일게임과정II:Cocos2d-X 51
  52. 52. 모바일게임과정II:Cocos2d-X 52
  53. 53.  맵 그리기 기능 버튼  Undo  Redo  Execute Command  Random Mode  Stamp Brush  Bucket Fill Tool  Eraser  Rectangular Select 모바일게임과정II:Cocos2d-X 53
  54. 54. 모바일게임과정II:Cocos2d-X 54
  55. 55.  저장 (File -> Save) 모바일게임과정II:Cocos2d-X 55
  56. 56. 타입맵출력하기 모바일게임과정II:Cocos2d-X 56
  57. 57. 모바일게임과정II:Cocos2d-X 57
  58. 58. 모바일게임과정II:Cocos2d-X 58
  59. 59. 모바일게임과정II:Cocos2d-X 59
  60. 60. 타일맵 레이어 추가하기  타일드가 지원하는 레이어 종류  타일 레이어(Tile Layer): 배경이 되는 레이어  오브젝트 레이어(Object Layer): 캐릭터나 몬스터 등이 출현하는 장소를 지정하는 레이어 모바일게임과정II:Cocos2d-X 60
  61. 61.  레이어 이름 변경: "Background"로 수정 모바일게임과정II:Cocos2d-X 61
  62. 62.  레이어 추가 (Layer -> Add Object Layer)  이름: Object 모바일게임과정II:Cocos2d-X 62
  63. 63.  오브젝트 관련 툴바 버튼 모바일게임과정II:Cocos2d-X 63
  64. 64. 모바일게임과정II:Cocos2d-X 64
  65. 65.  Object Properties  이름: “SpawnPoint" 모바일게임과정II:Cocos2d-X 65
  66. 66. 모바일게임과정II:Cocos2d-X 66
  67. 67. 모바일게임과정II:Cocos2d-X 67
  68. 68. 모바일게임과정II:Cocos2d-X 68
  69. 69. 모바일게임과정II:Cocos2d-X 69
  70. 70. 드래곤 이동 만들기 모바일게임과정II:Cocos2d-X 70
  71. 71. 모바일게임과정II:Cocos2d-X 71
  72. 72. 모바일게임과정II:Cocos2d-X 72
  73. 73. 모바일게임과정II:Cocos2d-X 73
  74. 74. 모바일게임과정II:Cocos2d-X 74
  75. 75. 모바일게임과정II:Cocos2d-X 75
  76. 76. 모바일게임과정II:Cocos2d-X 76
  77. 77. 드래곤 이동시 장애물 만 들기  새로운 레이어 추가 모바일게임과정II:Cocos2d-X 77
  78. 78. 모바일게임과정II:Cocos2d-X 78
  79. 79.  새 레이어 추가 (Layer -> Add Tile Layer)  이름: Items 모바일게임과정II:Cocos2d-X 79
  80. 80. 모바일게임과정II:Cocos2d-X 80
  81. 81.  타일세트  크기: 67x34  투명도: 50%  이름: metaset.png  새 타일세트 추가  이름: Meta 모바일게임과정II:Cocos2d-X 81
  82. 82. 모바일게임과정II:Cocos2d-X 82
  83. 83. 모바일게임과정II:Cocos2d-X 83
  84. 84.  Tile Properties  붉은색 타일-Name: Wall, Value: Yes  초록색 타일-Name: Items, Value: Yes 모바일게임과정II:Cocos2d-X 84
  85. 85.  새 레이어 추가  이름: MetaInfo  장애물: 붉은색 타일, 수박: 초록색 타일 모바일게임과정II:Cocos2d-X 85
  86. 86. 모바일게임과정II:Cocos2d-X 86
  87. 87. 모바일게임과정II:Cocos2d-X 87
  88. 88. 모바일게임과정II:Cocos2d-X 88
  89. 89. 모바일게임과정II:Cocos2d-X 89
  90. 90. 모바일게임과정II:Cocos2d-X 90
  91. 91. 모바일게임과정II:Cocos2d-X 91
  92. 92. 모바일게임과정II:Cocos2d-X 92
  93. 93. 드래곤이 먹을 아이템 만들기 모바일게임과정II:Cocos2d-X 93
  94. 94. 모바일게임과정II:Cocos2d-X 94
  95. 95. 모바일게임과정II:Cocos2d-X 95
  96. 96. 파티클 사용하기 모바일게임과정II:Cocos2d-X 96
  97. 97. 파티클 시스템이란?  파티클 시스템  작은 그래픽들이 모인 커다란 집합체  파티클: 작은 그래픽들  이 집합체를 이용하면 표현하기 매우 어려운 효과들은 표현할 수 있음  연기가 퍼지는 장면, 불타는 효과, 안개가 퍼진 모습, 폭 탄이 터지는 장면, 미사일이 날아갈 때의 효과, 비 내리 는 화면, 눈 내리는 화면 등  동적이고 급변하는 효과를 표현하는데 적합 모바일게임과정II:Cocos2d-X 97
  98. 98. 파티클 시스템 사용해 보 기 모바일게임과정II:Cocos2d-X 98
  99. 99. 모바일게임과정II:Cocos2d-X 99
  100. 100. 모바일게임과정II:Cocos2d-X 100
  101. 101. 파티클 시스템: 눈, 비 내리기 모바일게임과정II:Cocos2d-X 101
  102. 102. 모바일게임과정II:Cocos2d-X 102
  103. 103. 모바일게임과정II:Cocos2d-X 103
  104. 104. 모바일게임과정II:Cocos2d-X 104
  105. 105. 모바일게임과정II:Cocos2d-X 105
  106. 106. 파티클 시스템:좀 더 복잡 한 파티클 효과 모바일게임과정II:Cocos2d-X 106
  107. 107. 모바일게임과정II:Cocos2d-X 107
  108. 108. 모바일게임과정II:Cocos2d-X 108
  109. 109. 파티클 디자이너  파티클 디자이너  파티클을 시각적으로 생성하는 프로그램  http://www.71squared.c om/en/particledesigner 모바일게임과정II:Cocos2d-X 109

×