[TIZEN]8. 타이젠_간단한게임 만들기2_레이아웃 구성

4. 게임 Layout 구성

  - 저는 간단한 게임화면 구성을 위해 Grid 이용해 레이아웃을 구성하도록 하겠습니다.

  - 저는 보통 grid를 이용하여 화면을 구성하는 편입니다. grid는 화면의 상대적인 좌표를 기준으로 하기 때문에 비율에 맞게 레이아웃을 구성하기가 쉽습니다.

  - 아래와 같이 게임 레이아웃을 구성하도록 하겠습니다.

 

 

(1) Evas_Object추가

 - appdata 자료구조에 레이아웃 구성에 필요한 Evas_Object들을 추가합니다.

typedef struct appdata {
    Evas_Object *win;
    Evas_Object *conform;
    Evas_Object *label;
 
    Evas_Object *grid_main;
    Evas_Object *score;
    Evas_Object *btn_finish;
 
    Evas_Object* box_game;
    Evas_Object* rect[7];
} appdata_s;

 - grid_main : 화면 구성을 하게 될 grid
 - score : 좌측 상단에 현재 표시될 점수 출력
 - btn_finish : 우측 상단에 앱을 종료시킬 버튼
 - box_game : Box오브젝트로 실제 게임을 그리는 공간
 - rect[7] : 7개의 사각형을 그려 사용자가 터치로 게임을 할 수 있는 공간

 

(2) Grid 오브젝트 추가

- create_base_gui() 안쪽에 Conformant생성부분 아랫부분에, 화면 메인 레이아웃을 구성할 그리드를 생성합니다.

//grid_main 생성
ad->grid_main = elm_grid_add(ad->conform);
elm_object_content_set(ad->conform, ad->grid_main);
evas_object_show(ad->grid_main);

 

(3) 상단부분 레이아웃 구성

 - 생성된 그리드에 score. btn_finish 버튼을 추가합니다.

//Score 오브젝트 생성
ad->score = elm_label_add(ad->grid_main);
elm_object_text_set(ad->score, "<align=center size=50>Score</align>");
elm_grid_pack(ad->grid_main, ad->score, 10, 5, 20, 10);
evas_object_show(ad->score);
 
//Btn 오브젝트 생성
ad->btn_finish = elm_button_add(ad->grid_main);
elm_object_text_set(ad->btn_finish, "Finish");
elm_grid_pack(ad->grid_main, ad->btn_finish, 75, 5, 20, 10);
evas_object_show(ad->btn_finish);

elm_grid_pack()함수를 통해 상단부분에 위치시킵니다.

void elm_grid_pack (Evas_Object * obj, Evas_Object * subobj, Evas_Coord x, Evas_Coord y, Evas_Coord w, Evas_Coord h )

  -x, y: grid의 x, y 좌표(0~100)으로 이루어져 있어, 화면을 기준으로 상대적으로 위치)
  -w, h: 화면에서 차지하는 크기(0~100으로 마찬가지로 상대적으로 차지)

* 위의 지정한 좌표를 기준으로 화면에 상대적으로 레이아웃을 배치가 가능

 

(4) 게임부분 화면 구성

- 먼저 게임화면을 구성할 박스레이아웃을 추가합니다.

//Box_bottom 생성
ad->box_game = elm_box_add(ad->grid_main);
elm_box_horizontal_set(ad->box_game, EINA_TRUE);
elm_box_padding_set(ad->box_game, 15, 0);
elm_grid_pack(ad->grid_main, ad->box_game, 0, 20, 100, 70);
evas_object_show(ad->box_game);

- evas_object_rectangle_add()함수를 통해 rectangle객체를 생성한 뒤,
- evas_object_color_set(obj, r, g,b,a)를 통해 색상지정
- evas_object_size_hint_min_set(obj, width, height)를 통해 크기 지정

 

이후 완성된 레이아웃을 실행시켜보면 아래와 같은 결과를 확인할 수 있습니다.

 

 

 

* 칙칙한 색을 바꿔보면,

//먼저  r,g,b값을 값는 Color 자료구조 생성
typedef struct Color {
    unsigned int r;
    unsigned int g;
    unsigned int b;
}color;
 
 
//원하는 이쁜 색 값을 지정하자
color color[7] = {{221,30,47},{235,176,53}, {6,162,203}, {41,64,82}, {33,133,89}, {208,198,177},{25,40,35}};
 
 
//rect[i]배열의 색상 변경
evas_object_color_set(ad->rect[i], color[i].r, color[i].g, color[i].b, 255);