탐험노트

지난 시간에 MVC에 대해, 그 중에서도 Controller 부분에 대해 다뤘습니다.

이번에는 View에 대해 살펴보겠습니다.

 

일전에 펜으로 슥슥 날렸던 기획 화면을 정리하여 다시 살펴봅니다.

(퍼블리싱 화면은 아직 작업이 덜 되었어요... html 퍼블리싱 작업본이 없으면 일단 view 화면의 이쯤에 들어간다 가정하고 미리 작업해둡시다.)

 

화면 구성과 함께 화면 전환이 어떻게 된다는 것인지까지 좀 더 자세하게 나왔네요.

 

상단 영역과 하단 영역을 SlideUp, SlideDown 하며 사라졌다 나타났다를 반복합니다. 마찬가지로 전환될 화면 역시 FadeIn, FadeOut으로 사라졌다 나타났다를 반복할 것이고요.

 

View에서 위와 같이 전환 효과 등을 넣기 위해서는 여러가지 방법이 있겠지만, 여기서는 JQUERY UI 기능을 이용해보기로 하겠습니다.

 

JQUERY UI

Effect > Show : https://jqueryui.com/show/

Effect > Hide : https://jqueryui.com/hide/

 

Fade와 Slide의 효과는 위의 링크를 통해 각자 확인해봅시다 :)

 

 

메뉴 전환 방식은 알겠고, 그럼 나머지 화면들은 어떻게 구성이 될까요?

 

캐릭터 생성화면입니다.

이런 html이 나온다 가정하고 미리 작업해둡니다. AT와 DF의 조절은 Input 태그를 사용합니다. (type = range)

좀 더 이쁘게 만들고 싶다면 css를 입혀주거나, jquery plugin을 적용해주면 됩니다.

 

 

메인 기능인 전투화면입니다.

각 버튼을 통해 명령을 전달할 것이고, 그에 따른 전투 상황이 메세지 영역에 매 턴마다 표시됩니다.

상대방 별로 고유 BGM을 보유하고 있고, 공격이나 스킬 사용 시 간단한 타격음도 재생되어야 하므로, audio 객체에 대해서도 다뤄야 합니다.

(객체가 뭐냐고요? Car myCar = new Car()요. 만들어놓고 가져다 쓰는 것이 객체라고 해두죠.)

 

여기서 bgm_player.snd = new Audio() 입니다.

이런 식으로 기능을 미리 만들어두고 나중에 갖다쓰면 타격음 등이 재생됩니다.

 

 

전투정보실 화면은 현재 나의 상태를 나타낸다고 했었죠.

위와 같이 html이 나올거라 예상하고 같이 작업해둡니다.

여기서는 스킬을 클릭하면 My탐험키트처럼 선택하고 순서를 변경하는 스크립트 및 DB저장 기능만 들어가면 될 듯 합니다.

(거기에 구현된 view와 script를 가져다 쓰면 되겠지요?)

 

랭킹 화면이면 순위 대상인 1~100명까지 뽑아야 하고, 그 캐릭터들의 정보도 표시해야 하겠죠.

여기는 순위만 표시하고 다른 액션이 없으므로 상대적으로 수월한 페이지입니다.

 

 

다음 시간은 Model이 되겠군요.

하나의 변경된 데이터를 저장하기 위해 어떤 과정을 거치고 어떻게 반영되는지를 실제 소스와 함께 살펴봅시다~

댓글 0
첫 댓글의 주인공이 되어 보세요!
  • 폴리매스 문제는 과학기술진흥기금 및 복권기금의 재원으로 운영되고, 과학기술정보통신부와 한국과학창의재단의 지원을 받아 수행된 성과물로 우리나라의 과학기술 발전과 사회적 가치 증진에 기여하고 있습니다.

  • ☎문의 02-6749-3911