게임 보드판 구현하기

야추 다이스 보드판 구현

야추 다이스를 플레이 하기 위해서는 점수를 산출하고, 해당 점수를 기록할 수 있는 보드판이 필요하다.

보드판을 통해 플레이어는 자신과 상대가 기록한 점수를 비교하고 더 높은 점수를 기록하기 위해 플레이할 수 있다.

야추 다이스의 보드판의 모습은 다음 이미지와 같으며 이를 참고하여 유사하게 구현하기로 하였다.

야추 다이스 보드판

 

xml 레이아웃 

야추 다이스 보드판을 만들기 위해 다음과 같은 레이아웃을 만들고, 이를 하나의 레이아웃으로 합치도록 하였다.

 

 

하위 레이아웃

: 상위 레이아웃을 구성하는 6개의 레이아웃으로,

'항목을 나타내는 TAG 레이아웃'과 '점수를 기록하고 확인할 수 있는 점수판 레이아웃'으로 구성된다.

 

layout_number_board_tag.xml

1. layout_number_board_tag.xml  :  숫자 항목의 종류를 보여주는 레이아웃

layout_number_board_first.xml

2. layout_number_board_first.xml : 첫번째 플레이어가 점수를 채울 수 있는 숫자 점수판 레이아웃

 

layout_number_board_second.xml

3. layout_number_board_second.xml :  두번째 플레이어가 점수를 채울 수 있는 숫자 점수판 레이아웃

layout_ranks_board_tag.xml

4. layout_ranks_board_tag.xml : 족보 항목을 보여주는 레이아웃

 

layout_ranks_board_first.xml

 

5. layout_ranks_board_first.xml : 첫번째 플레이어가 점수를 채울 수 있는 족보 점수판 레이아웃

layout_ranks_board_second.xml

6. layout_ranks_board_second.xml : 두번째 플레이어가 점수를 채울 수 있는 족보 점수판 레이아웃

상위 레이아웃

layout_game_play_board.xml

layout_game_play_board.xml :

하위 레이아웃(6개)를 <include> 하여 레이아웃을 구성하고,이외에도

'현재 진행된 턴 수'를 가리키는 레이아웃,
'현재 어떤 플레이어의 턴인지 표시' 하는 레이아웃 등을 추가하여

전체적인 게임 보드판 레이아웃을 구성하였다.

Data Binding

레이아웃과 코드간에 데이터를 주고 받을 수 있도록 Data Binding을 사용하였다.
이로 인해 각 플레이어가 따낸 점수를 표시할 수 있고, 사용자가 미정된 점수를 클릭하여 점수를 확정하는 등의 행동도 가능하게 만들 수 있다.

 

따라서 다음과 같은 데이터 변수들을 선언하여 뷰와 데이터를 결합하였다.

//in layout_game_play_board.xml

<data>
    <variable
        name="viewModel"
        type="com.ranseo.yatchgame.ui.game.GamePlayViewModel" />

    <variable
        name="turnCountStr"
        type="String" />

    <variable
        name="firstBoardRecord"
        type="com.ranseo.yatchgame.data.model.BoardRecord" />


    <variable
        name="secondBoardRecord"
        type="com.ranseo.yatchgame.data.model.BoardRecord" />

    <variable
        name="firstFakeBoard"
        type="com.ranseo.yatchgame.data.model.Board" />

    <variable
        name="secondFakeBoard"
        type="com.ranseo.yatchgame.data.model.Board" />

    <variable
        name="firstRealBoard"
        type="com.ranseo.yatchgame.data.model.Board" />

    <variable
        name="secondRealBoard"
        type="com.ranseo.yatchgame.data.model.Board" />

    <variable
        name="myTurn"
        type="boolean" />

    <variable
        name="turnLight"
        type="int" />

    <variable
        name="redPlayer"
        type="String" />

    <variable
        name="bluePlayer"
        type="String" />

    <variable
        name="myTurnStr"
        type="String" />

    <variable
        name="onClickListener"
        type="com.ranseo.yatchgame.data.model.OnBoardClickListener" />

</data>