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

48min
소개
캐주얼 게임은 그 단순성과 매력적인 게임 플레이로 인기를 끌며, 배우기 쉬운 메커니즘으로 넓은 관객을 사로잡습니다. 이 고급 튜토리얼에서는 Flutter의 캐주얼 게임 툴킷을 사용하여 완전한 기능을 갖춘 무한 러너 게임을 개발할 것입니다. 우리는 Back4app을 통합하여 게임의 백엔드를 관리하고, 사용자 데이터(예: 최고 점수, 플레이어 프로필 및 업적)를 저장합니다. 또한 상태 관리, 성능 최적화 및 배포 전략과 같은 고급 주제에 대해서도 다룰 것입니다. 이 튜토리얼이 끝나면 데이터 지속성과 향상된 기능을 갖춘 Android 및 iOS에서 배포할 준비가 된 세련된 무한 러너 게임을 갖게 될 것입니다.
전제 조건
시작하기 전에 다음 사항을 확인하세요:
Flutter 개발 환경: 설치 및 구성 완료. 설정하지 않았다면 공식 Flutter 설치 가이드를 따르세요.
중급 Flutter 지식: Flutter 위젯, 상태 관리 및 비동기 프로그래밍에 대한 이해.
Back4app 계정: Back4app에서 무료 계정에 가입하세요.
Back4app 이해: 프로젝트 생성 및 데이터 관리에 대한 기본 지식. Back4app 시작 가이드를 참조하세요.
GitHub 계정: 리포지토리를 클론하고 버전 관리를 하기 위해 필요합니다.
상태 관리 라이브러리 경험: Provider 또는 Bloc과 같은 라이브러리.
테스트 및 배포에 대한 친숙함: 테스트 작성 및 Flutter 앱 배포에 대한 기본 이해.
﻿
1단계 – Back4app 백엔드 설정
1.1 Back4app에서 새 프로젝트 만들기
Back4app 계정에 로그인하세요.
클릭하세요 "새 앱 만들기" 그리고 이름을 "고급 끝없는 러너 게임"로 설정하세요.
우리는 사용자, 점수, 그리고 업적 클래스를 만들 것입니다.
사용자 클래스
필드:
사용자 이름 (문자열)
비밀번호 (문자열)
이메일 (문자열)
프로필 사진 (파일)
점수 클래스
필드:
사용자 (사용자에 대한 포인터)
최고 점수 (숫자)
레벨 (숫자)
업적 클래스
필드:
사용자 (사용자에 대한 포인터)
업적 이름 (문자열)
달성 날짜 (날짜)
1.3 보안 및 권한 구성
사용자 데이터를 보호하기 위해 클래스 수준의 권한을 설정합니다.
인증된 사용자만 자신의 데이터를 읽고 쓸 수 있도록 합니다.
1.4 샘플 데이터 추가
통합 테스트를 위해 클래스에 샘플 데이터를 채웁니다.
﻿
2단계 – 끝없는 러너 템플릿 복제 및 설정
2.1 Flutter 캐주얼 게임 툴킷 리포지토리 복제
Bash
git clone https://github.com/flutter/casual-games.git
git clone https://github.com/flutter/casual-games.git
﻿
2.2 끝없는 러너 템플릿으로 이동
Bash
cd casual-games/templates/endless_runner
cd casual-games/templates/endless_runner
﻿
2.3 IDE에서 프로젝트 열기
Visual Studio Code, Android Studio 또는 선호하는 IDE를 사용하세요.
Flutter 및 Dart 플러그인이 설치되어 있는지 확인하세요.
2.4 종속성 업데이트
pubspec.yaml을 열고 종속성을 최신 버전으로 업데이트합니다.
실행:
Bash
flutter pub get
flutter pub get
﻿
﻿
3단계 – 고급 기능으로 게임 향상
3.1 사용자 인증 구현
플레이어가 가입하고, 로그인하며, 프로필을 관리할 수 있도록 합니다.
3.1.1 Parse Server SDK 추가
다음에 pubspec.yaml:
YAML
dependencies:
  parse_server_sdk_flutter: ^3.1.0
dependencies:
  parse_server_sdk_flutter: ^3.1.0
﻿
실행:
Bash
flutter pub get
flutter pub get
﻿
3.1.2 인증 서비스 설정
다음에 lib/services/auth_service.dart:
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();
  }
}
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:
YAML
dependencies:
  flutter_dotenv: ^5.0.2
dependencies:
  flutter_dotenv: ^5.0.2
﻿
다음과 같은 .env 파일을 생성하세요 ( .gitignore에 추가하세요):
Text
APP_ID=YOUR_APP_ID
CLIENT_KEY=YOUR_CLIENT_KEY
APP_ID=YOUR_APP_ID
CLIENT_KEY=YOUR_CLIENT_KEY
﻿
다음과 같이 main.dart:
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());
}
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:
YAML
dependencies:
  provider: ^6.0.0
dependencies:
  provider: ^6.0.0
﻿
실행:
Bash
flutter pub get
flutter pub get
﻿
5.2 게임 상태 관리 만들기
5.2.1 게임 상태 클래스 만들기
lib/models/game_state.dart:
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();
  }
}
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:
Dart
import 'package:provider/provider.dart';
import 'models/game_state.dart';

void main() async {
  // ... Parse initialization

  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => GameState()),
      ],
      child: MyApp(),
    ),
  );
}
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
위젯에서 게임 상태 사용하기**
게임 화면에서:
Dart
int score = context.watch<GameState>().score;
int score = context.watch<GameState>().score;
﻿
6단계 – 성능 최적화
6.1 게임 성능
스프라이트 관리: 메모리 사용량을 줄이기 위해 스프라이트 시트를 사용하세요.
프레임 속도 최적화: 성능과 배터리 수명을 균형 있게 유지하기 위해 프레임 속도를 제한하세요.
6.2 네트워크 최적화
데이터 캐싱: 네트워크 호출을 줄이기 위해 캐싱 메커니즘을 구현하세요.
배치 요청: 백엔드와 통신할 때 배치 작업을 사용하세요.
6.3 코드 프로파일링
Flutter의 DevTools를 사용하여 앱을 프로파일링하세요.
성능 병목 현상을 식별하고 수정하세요.
7단계 – 강력한 오류 처리 및 테스트
7.1 오류 처리
Try-Catch 블록: 예외를 처리하기 위해 비동기 호출을 감싸세요.
Dart
try {
  var result = await someAsyncFunction();
} catch (e) {
  // Handle error
}
try {
  var result = await someAsyncFunction();
} catch (e) {
  // Handle error
}
﻿
사용자 피드백: 오류가 발생할 때 사용자 친화적인 메시지를 표시하세요.
7.2 로깅
오류와 중요한 이벤트를 기록하기 위해 logging 패키지를 사용하세요.
다음에서 pubspec.yaml:
YAML
dependencies:
  logging: ^1.0.2
dependencies:
  logging: ^1.0.2
﻿
7.3 테스트
7.3.1 단위 테스트
모델과 서비스에 대한 테스트를 작성하세요.
예제 테스트는 test/game_state_test.dart:
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);
  });
}
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을 업데이트하세요.
실행:
Bash
flutter build apk --release
flutter build apk --release
﻿
iOS
Xcode에서 ios/Runner.xcworkspace를 엽니다.
서명 및 기능을 설정합니다.
실행:
Bash
flutter build ios --release
flutter build ios --release
﻿
8.3 앱 스토어 제출
구글 플레이 스토어: 공식 가이드를 따릅니다.
애플 앱 스토어: 공식 가이드를 따릅니다.
결론
이 고급 튜토리얼에서는 Flutter의 캐주얼 게임 툴킷을 사용하여 기능이 풍부한 끝없는 러너 게임을 만들고 Back4app을 백엔드 서비스로 통합했습니다. 우리는 다음을 다루었습니다:
사용자 인증: 플레이어가 가입하고, 로그인하며, 프로필을 관리할 수 있도록 합니다.
상태 관리: 효율적인 상태 관리를 위해 Provider를 사용합니다.
성능 최적화: 게임 및 네트워크 성능을 향상시킵니다.
오류 처리 및 테스트: 강력한 오류 처리를 구현하고 테스트를 작성합니다.
배포: 앱을 준비하고 앱 스토어에 제출합니다.
이 포괄적인 접근 방식은 신뢰할 수 있는 백엔드 통합으로 전문 수준의 Flutter 애플리케이션을 개발하는 데 필요한 기술을 제공합니다. 게임에 더 많은 기능을 추가하여 확장할 수 있습니다. 예를 들어:
소셜 공유: 플레이어가 소셜 미디어에서 성과를 공유할 수 있도록 합니다.
앱 내 구매: 구매 가능한 아이템이나 업그레이드로 게임을 수익화합니다.
멀티플레이어 지원: 실시간 또는 턴제 멀티플레이어 기능을 구현합니다.
Flutter 및 Back4app 통합에 대한 자세한 정보는 다음을 참조하십시오:
﻿Flutter 문서﻿
﻿Back4app Flutter 가이드﻿
﻿Parse Server 가이드﻿
행복한 코딩과 게임 개발 되세요!
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
OverlayPortal 및 Back4app 통합으로 Flutter 앱 구축
Flutter에서 fl_chart 및 Back4App으로 데이터 시각화하는 방법