Flutter Templates
Flutter와 Back4app을 사용하여 멀티플랫폼 게임 구축하기

11min
소개
Flutter는 Google이 개발한 다목적 오픈 소스 프레임워크로, 개발자가 단일 코드베이스에서 모바일, 웹, 데스크탑 및 임베디드 장치용으로 네이티브 컴파일된 애플리케이션을 구축할 수 있게 해줍니다. Flutter는 전통적인 앱 개발로 주로 알려져 있지만, 성능, 광범위한 패키지 생태계 및 핫 리로드 기능 덕분에 게임 개발에도 점점 더 많이 사용되고 있습니다.

이 가이드에서는 Flutter와 Flame을 사용하여 다중 플랫폼 Flappy Bird 스타일 게임을 개발하는 방법을 안내합니다. Flame은 Flutter에서 2D 게임을 위해 설계된 게임 엔진입니다. 또한, 사용자 점수를 저장하고 리더보드를 표시하기 위해 게임을 백엔드 서비스(BaaS) 플랫폼인 Back4App에 연결할 것입니다.

이 가이드를 마치면 모바일 및 웹 플랫폼에서 실행되는 게임의 작동 버전을 갖게 되며, Back4App에서 높은 점수를 저장하고 검색할 수 있습니다.
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
Back4app 계정. Back4app.com에서 무료 계정에 가입하세요.
로컬 머신에 Flutter 개발 환경이 설정되어 있어야 합니다. 아직 설정하지 않았다면 Flutter 설치 가이드를 따르세요.
Dart, Flutter 위젯 및 게임 개발 개념에 대한 기본 지식.
1단계 – Back4app 백엔드 설정
Back4app 프로젝트 만들기: 귀하의 Back4app 계정에 로그인하고 새 프로젝트를 만드세요.
Parse 클래스 만들기: 이 튜토리얼에서는 게임 관련 데이터를 관리하기 위한 간단한 백엔드를 설정합니다. Back4app 프로젝트에서 Player와 GameScore라는 두 개의 Parse 클래스를 만드세요.
Player: 사용자 이름, 레벨 및 업적과 같은 플레이어 정보를 저장합니다.
GameScore: 게임의 점수와 순위를 저장합니다.
Back4app 자격 증명 가져오기: 프로젝트 설정으로 이동하여 애플리케이션 ID와 클라이언트 키를 검색하세요. 이 정보는 Flutter 게임을 Back4app에 연결하는 데 필요합니다.
2단계 – Flutter 프로젝트 설정하기
새 Flutter 프로젝트 만들기: 터미널 또는 명령 프롬프트를 열고 다음을 실행하세요:
종속성 추가하기: pubspec.yaml을 열고 다음 종속성을 추가하세요:
앱에서 Parse 초기화하기: lib/main.dart, Parse SDK를 가져오고 main 함수에서 초기화하세요:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'package:flame/flame.dart';
import 'package:flame/game.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyGameApp());
}

class MyGameApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GameScreen(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'package:flame/flame.dart';
import 'package:flame/game.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyGameApp());
}

class MyGameApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GameScreen(),
    );
  }
}
﻿
'YOUR_BACK4APP_APP_ID'와 'YOUR_BACK4APP_CLIENT_KEY'를 실제 Back4app 자격 증명으로 교체하십시오.
3단계 – Flame을 사용하여 게임 설정하기
게임 클래스 만들기: Flame은 Flutter 위에 구축된 오픈 소스 게임 엔진입니다. 2D 게임을 만들기 위한 도구와 API를 제공합니다. Flame을 사용하여 간단한 게임 클래스를 만드십시오:
Dart
import 'package:flame/game.dart';
import 'package:flame/components.dart';

class MySimpleGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    super.onLoad();
    add(PlayerComponent());
  }
}

class PlayerComponent extends PositionComponent {
  @override
  Future<void> onLoad() async {
    // Load player sprite or set up player visuals here
    size = Vector2(50, 50); // Set size of the player
    position = Vector2(100, 100); // Set initial position
    // Optionally, add sprite or animations
  }

  @override
  void update(double dt) {
    // Update player state here
  }

  @override
  void render(Canvas canvas) {
    super.render(canvas);
    // Draw player visuals
    final paint = Paint()..color = Colors.blue;
    canvas.drawRect(size.toRect(), paint);
  }
}
import 'package:flame/game.dart';
import 'package:flame/components.dart';

class MySimpleGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    super.onLoad();
    add(PlayerComponent());
  }
}

class PlayerComponent extends PositionComponent {
  @override
  Future<void> onLoad() async {
    // Load player sprite or set up player visuals here
    size = Vector2(50, 50); // Set size of the player
    position = Vector2(100, 100); // Set initial position
    // Optionally, add sprite or animations
  }

  @override
  void update(double dt) {
    // Update player state here
  }

  @override
  void render(Canvas canvas) {
    super.render(canvas);
    // Draw player visuals
    final paint = Paint()..color = Colors.blue;
    canvas.drawRect(size.toRect(), paint);
  }
}
﻿
  2. 게임 화면 만들기: GameScreen 위젯을 업데이트하여 게임을 표시합니다:
Dart
class GameScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MySimpleGame().widget,
    );
  }
}
class GameScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MySimpleGame().widget,
    );
  }
}
﻿
  3.게임 실행: 이제 flutter run을 사용하여 앱을 실행하여 간단한 게임을 확인할 수 있습니다. 플레이어를 나타내는 파란색 정사각형이 표시되어야 합니다.
4단계 – Back4app으로 게임 데이터 관리하기
플레이어 데이터 저장: 다음으로, 플레이어가 레벨업하거나 무언가를 달성할 때 Back4app에 플레이어 데이터를 저장하는 함수를 만들어 보겠습니다:
Dart
Future<void> savePlayerData(String username, int level, List<String> achievements) async {
  final player = ParseObject('Player')
    ..set('username', username)
    ..set('level', level)
    ..set('achievements', achievements);

  final response = await player.save();
  if (response.success) {
    print('Player data saved successfully');
  } else {
    print('Failed to save player data');
  }
}
Future<void> savePlayerData(String username, int level, List<String> achievements) async {
  final player = ParseObject('Player')
    ..set('username', username)
    ..set('level', level)
    ..set('achievements', achievements);

  final response = await player.save();
  if (response.success) {
    print('Player data saved successfully');
  } else {
    print('Failed to save player data');
  }
}
﻿
   2. 최고 점수 가져오기: 게임의 최고 점수를 Back4app에서 가져와 리더보드에 표시할 수 있습니다:
Dart
Future<List<ParseObject>> fetchHighScores() async {
  final query = QueryBuilder<ParseObject>(ParseObject('GameScore'))
    ..orderByDescending('score')
    ..setLimit(10);

  final response = await query.query();
  if (response.success && response.results != null) {
    return response.results as List<ParseObject>;
  } else {
    print('Failed to fetch high scores');
    return [];
  }
}
Future<List<ParseObject>> fetchHighScores() async {
  final query = QueryBuilder<ParseObject>(ParseObject('GameScore'))
    ..orderByDescending('score')
    ..setLimit(10);

  final response = await query.query();
  if (response.success && response.results != null) {
    return response.results as List<ParseObject>;
  } else {
    print('Failed to fetch high scores');
    return [];
  }
}
﻿
 3. 리더보드 표시: 사용 ListView.builder를 사용하여 Flutter 위젯에서 상위 10개 점수를 표시합니다:
Dart
class LeaderboardScreen extends StatefulWidget {
  @override
  _LeaderboardScreenState createState() => _LeaderboardScreenState();
}

class _LeaderboardScreenState extends State<LeaderboardScreen> {
  List<ParseObject> highScores = [];

  @override
  void initState() {
    super.initState();
    fetchHighScores().then((scores) {
      setState(() {
        highScores = scores;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Leaderboard')),
      body: ListView.builder(
        itemCount: highScores.length,
        itemBuilder: (context, index) {
          final score = highScores[index];
          return ListTile(
            title: Text(score.get<String>('playerId') ?? 'Unknown Player'),
            subtitle: Text('Score: ${score.get<int>('score')}'),
          );
        },
      ),
    );
  }
}
class LeaderboardScreen extends StatefulWidget {
  @override
  _LeaderboardScreenState createState() => _LeaderboardScreenState();
}

class _LeaderboardScreenState extends State<LeaderboardScreen> {
  List<ParseObject> highScores = [];

  @override
  void initState() {
    super.initState();
    fetchHighScores().then((scores) {
      setState(() {
        highScores = scores;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Leaderboard')),
      body: ListView.builder(
        itemCount: highScores.length,
        itemBuilder: (context, index) {
          final score = highScores[index];
          return ListTile(
            title: Text(score.get<String>('playerId') ?? 'Unknown Player'),
            subtitle: Text('Score: ${score.get<int>('score')}'),
          );
        },
      ),
    );
  }
}
﻿
5단계 – Flame으로 고급 기능 추가
더 복잡한 게임 메커니즘, 애니메이션 또는 상호작용을 추가하고 싶다면, 스프라이트, 물리학 및 충돌 감지와 같은 추가 구성 요소를 도입하여 Flame의 사용을 확장할 수 있습니다. Flame은 Firebase와의 통합도 지원하여 멀티플레이어 기능, 인앱 구매 등을 가능하게 합니다.
결론
이 튜토리얼에서는 Flutter와 Flame을 사용하여 간단한 멀티 플랫폼 게임을 구축하는 방법과 플레이어 프로필 및 높은 점수와 같은 게임 데이터를 관리하기 위해 Back4app을 통합하는 방법을 배웠습니다. 단일 코드베이스에서 여러 플랫폼에 배포할 수 있는 Flutter의 능력과 Back4app의 강력한 백엔드 서비스가 결합되어 게임 개발 및 확장에 강력한 스택을 제공합니다.
간단한 캐주얼 게임을 만들든 더 복잡한 인터랙티브 경험을 만들든, Flutter와 Back4app은 게임을 효율적으로 구축, 배포 및 관리할 수 있는 도구를 제공합니다.
자세한 정보는 Flutter 문서와 Back4app 문서를 확인하세요. 행복한 코딩!
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Back4App, Next.js 및 Vercel을 이용한 회의실 예약 앱 튜토리얼
Flutter와 Back4App을 사용하여 AI 이메일 응답기 앱을 만드는 방법