[ 플러터 ] 가챠 게임을 코린이도 만들 수 있다 - 1
$$ 이 포스팅은 노 베이스를 대상으로 하지 않는다 $$
$$ 노 베이스는 다른 시리즈를 먼저 해보고 오도록 하자 $$
이번에는
가챠게임을 만들어보자
가챠 란
:: 일정 확률로 아이템을 얻는 것 ::
이렇게 정의하고 가자
그러면 게임이니까
핵심적인 부분을 점검하고 가야한다
Q 게임은 어떤 방식으로 진행시킬지?
게임을 만들고자 한다면
게임이 어떻게 진행되고 어떤식으로 작동할지에 대해
많은 고민을 해야만한다
그런데 우리는 그런 고민하기가 쉽지가 않다
왜?
게임은 해봤어도
게임은 안만들어봤으니까
노 베이스 코린이가 게임을 만든다?
책보고 가위바위보 만들어봤으면 잘 만든거 아닐까?
더 만들어봤다고?
잘했다
우리는 다음과 같은 방법으로 게임을 구현할 것이다
1. 사용자는 화면에 버튼을 하나 누를 수 있다
2. 사용자는 버튼을 누르면 일정 확률로 다음 레벨로 갈 수 있다
3. 사용자는 일정 확률로 스테이지가 하락 할 수 있다
4. 각 성공 / 유지 / 하락 확률을 화면에 표시한다
5. 스테이지가 올라갈 수록 스테이지 숫자 색을 변경한다
6. 리셋 버튼을 제공해 게임을 초기화 할 수 있다
뭐가 많다
하나씩 하다보면 금방 하겠지
난 시리즈를 길게 쓸 수 있어서 좋다
주제 찾는게 여간 어려운게 아니다
이번에는 기초 작업을 시작한다
1. 외부 패키지 설치
2. 기초 UI 작업
원래 시작은 쉽고 짧게 가야한다
왜냐고?
처음부터 뭐 많이 보여주면 지레겁먹고 나가니까
플러터를 시작하면 기본 UI가 나온다
또 똑같다 다 지워버리고 시작하자
이제 기본 ui를 만들어줄건데
오늘은 파일을 분리해보도록 한다
어떻게 분리하냐고?
천천히 따라오면 다 할 수 있다
좌측에 보면
lib 파일에 main.dart 가 보일것이다
우리가 지금 작업하고 있는 파일인데
여기에 파일을 추가하도록 한다
플러터는 기본적으로 다트 언어를 기반으로 하기 때문에
dart 확장자를 사용한다
파일을 하나 만들자
파일명은
homePage.dart
파일 생성은
lib 파일이 선택된 상태로
여기서 New File을 선택한다
파일을 선택하고
작성해준다
빈 파일이 만들어 졌고
우리는 이 파일에 게임의 핵심 요소 UI들을 배치할 것이다
stf를 작성하면
자동으로 Stateful 위젯을 만들 수 있게 된다
기존에 이미 Stateful 위젯과 Stateless 위젯의 차이를 설명했는데
간단하게 다시 짚고 넘어가면
| Stateful | Stateless |
| 데이터에 변화가 있으면 화면을 새롭게 만든다 | 데이터에 변화가 있어도 화면을 새롭게 만들지 않는다 |
이번에 만들 화면은 스테이지가 변하면 화면의 글씨같은게 변하니까
Stateful 위젯으로 만든다
그러면 Stateless 위젯은 어디에 쓰냐고?
카톡을 생각해보자
상단에 있는 검색이라던지 친구추가라던지
해당 버튼들이 데이터에 큰 변화가 있던가?
아니다
그런 상황에 쓴다
앱 이름이라던지
뭐 그런거
그러면 stateless 위젯은
데이터 변화에 대응할 수 없냐?
그건 또 아니다
대응하는 법은 나중에 설명하도록 한다
자, 일단 stateful 위젯을 기본으로 만들고
이름을 지정한다
이름은 가볍게
HomePage로 지정한다
이렇게 완성되었다면 이제
저장을 한다
혹시해서 말해주는건데
저거 하나씩 다 바꿀필요 없다
class HomePage extends StatefulWidget 에서
HomePage를 더블클릭하면 선택 상태가 되는데
거기서 F2를 누르면 이름 바꾸는 화면이 스크린샷처럼 나온다
거기 입력하면 전부 다 바뀐다
본론으로 돌아와서
이렇게 화면 만들었으면 화면 연결해야하지 않나?
연결하도록 해준다
이제 runApp에 작성해야하는데
항상 얘기 했던것처럼
조상이 있어야 내가 있다
시조를 만들어준다
다시 얘기하지만
플러터에서 시조는 MaerialApp 이다
runApp 안에 마테리얼을 작성해준다
const는 작성 안해도 된다
알아서 넣어줄테니
설정을 모르겠다면
플러터 기본 세팅 포스팅을 참고하길 바란다
home : 에 home이라 적으면
아까 만들어둔 위젯을 자동으로 가져온다
엔터를 눌러주자
자동으로 패키지도 import 해주고 위젯도 넣어준다
이게 편의성이지
이제 저장하고 핫리로드 혹은 리스타트하면
정상적으로 화면이 로딩됐다
그러면 이제
화면을 좀 만들어봐야지?
이 상태로 뭘 할 수 있을까
홈페이지 위젯에서 작업을 시작하자
scaffold 라는 현조를 넣고 그 안에 자식으로 body 를 설정한다
이렇게 설정하면
다음과 같은 화면이 만들어진다
이번에는 appBar 와 BottomNavigator 는 사용하지 않는다
ui 의 기본구조를 작성하자
/*
기본 구조에 대해서는 설명하지 않는다
기본 구조를 설정하는게 궁금하다면
다크모드 만들기 포스팅부터 보길 바란다
*/
그래도 설명해주는게 안섭섭하겠지?
일단 컨테이너를 하나 만든다
우리가 만들 모든 내용은 이 안에 담길 예정이다
이제 세로로 위젯들을 배치하기 위해
Column을 배치한다
Column 안에 내용물을 배치할건데
1. 스테이지가 표시될 텍스트 하나
2. 성공확률 , 하락활률 , 유지확률을 보여줄 텍스트 3개
3. 강화 버튼 , 리셋버튼
이런 내용들을 배치할것이다
1번과 3번은 Column에 그냥 세로로 배치할것이고
2번은 가로로 먼저 배치 할것이다
앞서 설명한대로
1. 스테이지 텍스트를 배치
2. 가로(Row)로 확률 텍스트 배치
3. 가로(Row)로 텍스트버튼 하나 배치
이렇게 배치했다
그랬을때 화면은
이런식으로 엉망진창인걸 볼 수 있는데
걱정마라 화면 배치는 바꾸면 그만이다
맨 위에 있는 컬럼에 정렬을 넣어주었다
Column 에서 mainAxisAlignment 는 세로 정렬을 의미한다
뒤에 적힌 내용은 그냥 가운데 정렬하라는 얘기다
이렇게 하면
이렇게 가운데로 내려온것을 볼 수 있다
그 다음 각 Row 에도 옵션을 적용한다
앞서 Column 에서 mainAxisAlignment 는 세로 정렬을 의미한다고 했다
반대로 Row 에서 mainAxisAlignment 는 가로 정렬을 의미한다
따라서 화면에는
전부 가운데로 온 것을 볼 수 있다
이제 조금 더 옵션을 추가해보도록 하자
1. 텍스트 크기 변경
2. 내용 채우기
3. 버튼 스타일 변경
4. 각 요소 사이에 빈 공간 만들기
스테이지 텍스트에 옵션을 추가했다
Style을 지정해 Size를 지정해주었고 fontWeight 는 폰트 굵기다
왜 저렇게 쓰는지는 묻지말자
나도 잘 모른다
이제 글자가 좀 커지고 굵어졌다
나머지도 작업하도록 한다
텍스트를 추가했다
왜 Row 안에 Row 를 또 썼냐면
각 내용물들을 관리하기 쉽도록 묶은것 이다
중간중간 SizedBox 는 확률 표시 사이에 여백을 주기 위해 사용했다
이제 확률도 화면에 표시했으니
강화버튼 / 리셋버튼만 만들면된다
근데 버튼이 좀 심심해보이므로
버튼을 다르게 디자인해본다
기존에는 textButton 을 사용했는데
ElevatedButton 을 사용한다
강화버튼 리셋버튼을 하나씩 만들었고 사이를 띄워주었다
뭔가 구색은 갖춘것 같다
다만 내용물들이 붙어 있어서 별로 같다
이 내용물들을 서로 떨어뜨려줄건데
sizedBox 를 사용해도 되지만
이번에는 padding 을 사용해보도록 한다
플러터에는 여백을 지정하는 방식이 여러가지 있지만
SizedBox 의 width 나 height 를 조절해 지정하거나
margin 과 Padding 을 이용해 조정한다
두개를 간단하게 비교한 내용을 밑에서 기술한다
| Margin | Padding |
| 바깥 여백 | 내부 여백 |
보통 전체적인 틀을 지정하거나 할때는 Margin 을
내용물을 지정할땐 Padding 을 사용한다
우리는 padding 을 지정한다
버튼의 Row 을 클릭하고 좌측에 전구를 누르면
빠르게 기능을 추가할 수 있는 메뉴가 나온다
여기서 Padding 을 선택한다
가볍게 설명하자면
내부 여백을 지정하는데
all(8.0) 상 하 좌 우를 8픽셀씩 뗀다
이번에 우리는 전체 여백을 10으로 지정해본다
8.0을 10으로 바꾸면된다
조금? 떨어졌다
이제 확률도 똑같이 지정해준다
확률을 감싸고 있는 제일 큰 Row 에 패딩을 똑같이 설정한다
이번에는 옵션을 바꾸도록 한다
fromLTRB 는 상하좌우를 설정할 수 있다
LTRB 이 순서대로
왼쪽 , 상단 , 오른쪽 , 하단 순서다
필자는 상단과 하단에 30씩 여백을 주었다
좀 떨어진 것 같다
이제 다음 시간부터 여기에 기능들을 연결하고 구현하도록 해보겠다
끝내며
아마 처음 따라하면 어려울 수도 있다
해당 포스트 말고 다크모드 개발이라던지 텍스트컨트롤 부터 보고 오길 바란다
이제 시작이다 힘내보자