Flutter, 캐주얼 게임 툴킷 및 Back4app을 사용하여 고급 엔드리스 러너 게임을 만드는 방법

소개 캐주얼 게임은 그 단순성과 매력적인 게임 플레이로 인기를 끌며, 배우기 쉬운 메커니즘으로 넓은 관객을 사로잡습니다 이 고급 튜토리얼에서는 flutter의 캐주얼 게임 툴킷을 사용하여 완전한 기능을 갖춘 무한 러너 게임을 개발할 것입니다 우리는 back4app 을 통합하여 게임의 백엔드를 관리하고, 사용자 데이터(예 최고 점수, 플레이어 프로필 및 업적)를 저장합니다 또한 상태 관리, 성능 최적화 및 배포 전략과 같은 고급 주제에 대해서도 다룰 것입니다 이 튜토리얼이 끝나면 데이터 지속성과 향상된 기능을 갖춘 android 및 ios에서 배포할 준비가 된 세련된 무한 러너 게임을 갖게 될 것입니다 전제 조건 시작하기 전에 다음 사항을 확인하세요 flutter 개발 환경 설치 및 구성 완료 설정하지 않았다면 공식 flutter 설치 가이드 https //flutter dev/docs/get started/install 를 따르세요 중급 flutter 지식 flutter 위젯, 상태 관리 및 비동기 프로그래밍에 대한 이해 back4app 계정 back4app https //www back4app com 에서 무료 계정에 가입하세요 back4app 이해 프로젝트 생성 및 데이터 관리에 대한 기본 지식 back4app 시작 가이드 https //www back4app com/docs/get started/welcome 를 참조하세요 github 계정 리포지토리를 클론하고 버전 관리를 하기 위해 필요합니다 상태 관리 라이브러리 경험 provider 또는 bloc과 같은 라이브러리 테스트 및 배포에 대한 친숙함 테스트 작성 및 flutter 앱 배포에 대한 기본 이해 1단계 – back4app 백엔드 설정 1 1 back4app에서 새 프로젝트 만들기 back4app 계정에 로그인하세요 클릭하세요 "새 앱 만들기" 그리고 이름을 "고급 끝없는 러너 게임" 로 설정하세요 우리는 사용자 , 점수 , 그리고 업적 클래스를 만들 것입니다 사용자 클래스 필드 사용자 이름 (문자열) 비밀번호 (문자열) 이메일 (문자열) 프로필 사진 (파일) 점수 클래스 필드 사용자 (사용자에 대한 포인터) 최고 점수 (숫자) 레벨 (숫자) 업적 클래스 필드 사용자 (사용자에 대한 포인터) 업적 이름 (문자열) 달성 날짜 (날짜) 1 3 보안 및 권한 구성 사용자 데이터를 보호하기 위해 클래스 수준의 권한을 설정합니다 인증된 사용자만 자신의 데이터를 읽고 쓸 수 있도록 합니다 1 4 샘플 데이터 추가 통합 테스트를 위해 클래스에 샘플 데이터를 채웁니다 2단계 – 끝없는 러너 템플릿 복제 및 설정 2 1 flutter 캐주얼 게임 툴킷 리포지토리 복제 git clone https //github com/flutter/casual games git 2 2 끝없는 러너 템플릿으로 이동 cd casual games/templates/endless runner 2 3 ide에서 프로젝트 열기 visual studio code, android studio 또는 선호하는 ide를 사용하세요 flutter 및 dart 플러그인이 설치되어 있는지 확인하세요 2 4 종속성 업데이트 pubspec yaml을 열고 종속성을 최신 버전으로 업데이트합니다 실행 flutter pub get 3단계 – 고급 기능으로 게임 향상 3 1 사용자 인증 구현 플레이어가 가입하고, 로그인하며, 프로필을 관리할 수 있도록 합니다 3 1 1 parse server sdk 추가 다음에 pubspec yaml dependencies parse server sdk flutter ^3 1 0 실행 flutter pub get 3 1 2 인증 서비스 설정 다음에 lib/services/auth service dart import 'package\ parse server sdk flutter/parse server sdk flutter dart'; class authservice { future\<parseuser> signup(string username, string password, string email) async { var user = parseuser(username, password, email); var response = await user signup(); if (response success) { return response result; } else { throw exception(response error! message); } } future\<parseuser> login(string username, string password) async { var user = parseuser(username, password, null); var response = await user login(); if (response success) { return response result; } else { throw exception(response error! message); } } future\<void> logout() async { var user = await parseuser currentuser() as parseuser; await user logout(); } } 3 1 3 인증 화면 만들기 가입 화면 lib/screens/signup screen dart 로그인 화면 lib/screens/login screen dart flutter 위젯을 사용하여 사용자 입력을 위한 양식을 만듭니다 3 2 ui/ux 향상 사용자 정의 애니메이션 구현 animationcontroller lib/theme dart에 사용자 정의 테마 추가 lib/theme dart 3 3 업적 및 리더보드 추가 업적을 표시할 ui 구성 요소 생성 전 세계 최고 점수를 표시할 리더보드 화면 구현 4단계 – back4app과 게임 통합 4 1 main dart에서 parse 초기화 환경 변수를 관리하기 위해 flutter dotenv 를 사용하세요 다음에서 pubspec yaml dependencies flutter dotenv ^5 0 2 다음과 같은 env 파일을 생성하세요 ( gitignore 에 추가하세요) app id=your app id client key=your client key 다음과 같이 main dart import 'package\ flutter dotenv/flutter dotenv dart'; void main() async { widgetsflutterbinding ensureinitialized(); await dotenv load(filename " env"); final keyapplicationid = dotenv env\['app id']!; final keyclientkey = dotenv env\['client key']!; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, ); runapp(myapp()); } 5단계 – 상태 관리 구현 5 1 상태 관리 솔루션 선택하기 우리는 간단함을 위해 provider 를 사용할 것입니다 5 1 1 provider 의존성 추가하기 다음에 pubspec yaml dependencies provider ^6 0 0 실행 flutter pub get 5 2 게임 상태 관리 만들기 5 2 1 게임 상태 클래스 만들기 lib/models/game state dart import 'package\ flutter/foundation dart'; class gamestate extends changenotifier { int score = 0; int get score => score; void incrementscore() { score++; notifylisteners(); } void resetscore() { score = 0; notifylisteners(); } } 5 2 2 게임 상태 제공하기 다음에 main dart import 'package\ provider/provider dart'; import 'models/game state dart'; void main() async { // parse initialization runapp( multiprovider( providers \[ changenotifierprovider(create ( ) => gamestate()), ], child myapp(), ), ); } 5 2 3 위젯에서 게임 상태 사용하기 게임 화면에서 int score = context watch\<gamestate>() score; 6단계 – 성능 최적화 6 1 게임 성능 스프라이트 관리 메모리 사용량을 줄이기 위해 스프라이트 시트를 사용하세요 프레임 속도 최적화 성능과 배터리 수명을 균형 있게 유지하기 위해 프레임 속도를 제한하세요 6 2 네트워크 최적화 데이터 캐싱 네트워크 호출을 줄이기 위해 캐싱 메커니즘을 구현하세요 배치 요청 백엔드와 통신할 때 배치 작업을 사용하세요 6 3 코드 프로파일링 flutter의 devtools 를 사용하여 앱을 프로파일링하세요 성능 병목 현상을 식별하고 수정하세요 7단계 – 강력한 오류 처리 및 테스트 7 1 오류 처리 try catch 블록 예외를 처리하기 위해 비동기 호출을 감싸세요 try { var result = await someasyncfunction(); } catch (e) { // handle error } 사용자 피드백 오류가 발생할 때 사용자 친화적인 메시지를 표시하세요 7 2 로깅 오류와 중요한 이벤트를 기록하기 위해 logging 패키지를 사용하세요 다음에서 pubspec yaml dependencies logging ^1 0 2 7 3 테스트 7 3 1 단위 테스트 모델과 서비스에 대한 테스트를 작성하세요 예제 테스트는 test/game state test dart import 'package\ flutter test/flutter test dart'; import 'package\ your app/models/game state dart'; void main() { test('score increments correctly', () { final gamestate = gamestate(); gamestate incrementscore(); expect(gamestate score, 1); }); } 7 3 2 통합 테스트 앱의 ui와 상호작용을 테스트하세요 flutter의 통합 테스트 프레임워크를 사용하세요 8단계 – 게임 배포 8 1 배포 준비 앱 아이콘 및 스플래시 화면 브랜딩을 위해 사용자 정의하세요 앱 번들 id android 및 ios에 대한 고유 식별자를 설정하세요 8 2 릴리스 버전 빌드 안드로이드 서명 구성으로 android/app/build gradle 을 업데이트하세요 실행 flutter build apk release ios xcode에서 ios/runner xcworkspace 를 엽니다 서명 및 기능을 설정합니다 실행 flutter build ios release 8 3 앱 스토어 제출 구글 플레이 스토어 공식 가이드 https //developer android com/distribute/console 를 따릅니다 애플 앱 스토어 공식 가이드 https //developer apple com/app store/submit/ 를 따릅니다 결론 이 고급 튜토리얼에서는 flutter의 캐주얼 게임 툴킷을 사용하여 기능이 풍부한 끝없는 러너 게임을 만들고 back4app을 백엔드 서비스로 통합했습니다 우리는 다음을 다루었습니다 사용자 인증 플레이어가 가입하고, 로그인하며, 프로필을 관리할 수 있도록 합니다 상태 관리 효율적인 상태 관리를 위해 provider를 사용합니다 성능 최적화 게임 및 네트워크 성능을 향상시킵니다 오류 처리 및 테스트 강력한 오류 처리를 구현하고 테스트를 작성합니다 배포 앱을 준비하고 앱 스토어에 제출합니다 이 포괄적인 접근 방식은 신뢰할 수 있는 백엔드 통합으로 전문 수준의 flutter 애플리케이션을 개발하는 데 필요한 기술을 제공합니다 게임에 더 많은 기능을 추가하여 확장할 수 있습니다 예를 들어 소셜 공유 플레이어가 소셜 미디어에서 성과를 공유할 수 있도록 합니다 앱 내 구매 구매 가능한 아이템이나 업그레이드로 게임을 수익화합니다 멀티플레이어 지원 실시간 또는 턴제 멀티플레이어 기능을 구현합니다 flutter 및 back4app 통합에 대한 자세한 정보는 다음을 참조하십시오 flutter 문서 https //flutter dev/docs back4app flutter 가이드 https //www back4app com/docs/flutter/overview parse server 가이드 https //docs parseplatform org 행복한 코딩과 게임 개발 되세요!