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

소개 flutter는 google이 개발한 다목적 오픈 소스 프레임워크로, 개발자가 단일 코드베이스에서 모바일, 웹, 데스크탑 및 임베디드 장치용으로 네이티브 컴파일된 애플리케이션을 구축할 수 있게 해줍니다 flutter는 전통적인 앱 개발로 주로 알려져 있지만, 성능, 광범위한 패키지 생태계 및 핫 리로드 기능 덕분에 게임 개발에도 점점 더 많이 사용되고 있습니다 이 가이드에서는 flutter와 flame을 사용하여 다중 플랫폼 flappy bird 스타일 게임을 개발하는 방법을 안내합니다 flame은 flutter에서 2d 게임을 위해 설계된 게임 엔진입니다 또한, 사용자 점수를 저장하고 리더보드를 표시하기 위해 게임을 백엔드 서비스(baas) 플랫폼인 back4app에 연결할 것입니다 이 가이드를 마치면 모바일 및 웹 플랫폼에서 실행되는 게임의 작동 버전을 갖게 되며, back4app에서 높은 점수를 저장하고 검색할 수 있습니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 back4app 계정 back4app com https //www back4app com 에서 무료 계정에 가입하세요 로컬 머신에 flutter 개발 환경이 설정되어 있어야 합니다 아직 설정하지 않았다면 flutter 설치 가이드 https //flutter dev/docs/get started/install 를 따르세요 dart, flutter 위젯 및 게임 개발 개념에 대한 기본 지식 1단계 – back4app 백엔드 설정 back4app 프로젝트 만들기 귀하의 back4app 계정 https //dashboard back4app com/ 에 로그인하고 새 프로젝트를 만드세요 parse 클래스 만들기 이 튜토리얼에서는 게임 관련 데이터를 관리하기 위한 간단한 백엔드를 설정합니다 back4app 프로젝트에서 player 와 gamescore 라는 두 개의 parse 클래스를 만드세요 player 사용자 이름, 레벨 및 업적과 같은 플레이어 정보를 저장합니다 gamescore 게임의 점수와 순위를 저장합니다 back4app 자격 증명 가져오기 프로젝트 설정으로 이동하여 애플리케이션 id와 클라이언트 키를 검색하세요 이 정보는 flutter 게임을 back4app에 연결하는 데 필요합니다 2단계 – flutter 프로젝트 설정하기 새 flutter 프로젝트 만들기 터미널 또는 명령 프롬프트를 열고 다음을 실행하세요 종속성 추가하기 pubspec yaml 을 열고 다음 종속성을 추가하세요 앱에서 parse 초기화하기 lib/main dart , parse sdk를 가져오고 main 함수에서 초기화하세요 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을 사용하여 간단한 게임 클래스를 만드십시오 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 위젯을 업데이트하여 게임을 표시합니다 class gamescreen extends statelesswidget { @override widget build(buildcontext context) { return scaffold( body mysimplegame() widget, ); } } 3\ 게임 실행 이제 flutter run 을 사용하여 앱을 실행하여 간단한 게임을 확인할 수 있습니다 플레이어를 나타내는 파란색 정사각형이 표시되어야 합니다 4단계 – back4app으로 게임 데이터 관리하기 플레이어 데이터 저장 다음으로, 플레이어가 레벨업하거나 무언가를 달성할 때 back4app에 플레이어 데이터를 저장하는 함수를 만들어 보겠습니다 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에서 가져와 리더보드에 표시할 수 있습니다 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개 점수를 표시합니다 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 문서 https //flutter dev/docs 와 back4app 문서 https //www back4app com/docs 를 확인하세요 행복한 코딩!