요즘 flutter & flame 으로 1인게임 개발을 진행하고 있는데 알아야 할게 너무나도 많아 문서 찾아보고 유툽 영상 찾아보면서 얕은 지식을 조금씩 조금씩 모으다가 지겨워져서 엊그제 하루 날 잡아서 퇴근하고 밤새워 구글링해가면서 만들어봤습니다.

인트로 화면도 로비화면도 없고 그냥 모기 날아다니게 만들고 터치하면 HP 줄어들면서 사라지고 단계별로 정해진 모기들을 모두 잡으면 다음 단계로 넘어가도록 했습니다. 아래는 샘플 영상입니다.

원래 단계별로 일정 마리수의 모기가 나오도록 해놓았으나 단계별로 모기마리수를 제외하면 특별할게 없어서 단계당 한마리씩만 출몰하도록 설정을 변경한 뒤 녹화했습니다. 단계별로 모기의 HP도 늘어납니다. ㅎㅎ

아직 해야할게 많이 있지만 중간중간 기록을 위해 포스팅합니다.

앞으로 해야할 것들은... HP바 만들기... 유저 로그인 및 최종게임상태 저장하기, 리더보드, 모기의 유저공격 기능, 유저 및 모기 공격력, 장비&스킬, 보스급모기, 보스출현시 애니메이션 등등 기획하기 및 그림그리기 등등... 너무 많이 있지만 천천히 끝까지 가보려고 합니다 ㅎ

flutter 에 입문한지 2주정도 되가는것 같네요

우연히 유툽통해서 접한뒤로 반해가지고 실제 업무에서 쓸일은 없을 것 같지만 모바일앱이든 웹이든 1인개발용으로 너무 좋을 것 같아 입문했습니다.

한 2주동안 책 구입해서 읽고, 공식문서 읽고, 책 예제와 코드랩 예제들 그리고 유툽 예제들 따라해보고나서,

간단한 타자연습 앱을 만들어 봤는데 어떤 위젯을 사용할지부터해서 처음부터 끝까지 오로지 제 생각만으로 하나 만들어보았습니다. (예제 따라하기는 코드랩이 제일 배우기 좋았던 것 같습니다)

타수계산할때 한글은 영어보다 까다로울 것 같아 영문버전으로만 만들었습니다.

이것저것 더 추가하고 싶은 기능(리더보드, 실시간 배틀)들도 있고 flame 을 이용해서 타자를 이용한 여러 게임모드들을 추가하는 등 좀더 게임스럽게 꾸며보고도 싶은데 일단 그냥 기록용도로 남겨봅니다.

매우 간단한 앱이지만 flutter와 더 친숙해질 수 있었던것 같아 매우 유익했던 시간이었네요.

모바일 앱 버전과 웹 버전을 분기태워서 조금 다르게 가져갈 수도 있었는데 아직은 웹보다는 앱개발에 더 최적화된 프레임워크인 것 같습니다.

이제 슬슬 flame 으로 넘어가보려 합니다 :)

아래 영상은 첫 날 설치해서 실행해본 데모앱의 내용을 다 지우고 처음부터 작성하면서 화면 이동, 각종 버튼 추가, 그리고 버튼에 이벤트 핸들링 기능을 넣어보는 기초적인 부분에 대해서 빠르게 가르쳐 주고있습니다. 처음 플러터를 접하는 분들에게 딱 좋은 영상인것 같아서 공유합니다.

https://www.youtube.com/watch?v=C-fKAzdTrLU 

그리고 플러터 공식문서에서도 Cookbook 에서 기본적으로 필요한 기능들에대해 어떻게 구현해야하는지 예제샘플들을 갖추고 있고, codelab 이라는 단계별 따라해보기와 같은 자료도 제공해주고 있습니다. 코드랩을 따라해보면 앱을 개발할때 어떻게 개발이 진행되는지 그 순서도 배울 수 있습니다.

구글에서 엄청나게 밀고있다는게 느껴질 정도로 기반자료들이 매우 많이 있네요.

우연히 어떤 1인 개발자의 이야기를 유툽에서 접하고 나도 1인 개발이나 해야겠다 생각하던 찰나 또 우연히 플러터 강사의 영상을 본 뒤 목표를 달성하기 위한 매우 매력적인 프레임워크라는 생각이 들어서 플러터에 대해서 알아보려고 합니다. 

우선 공식 사이트에서 플러터가 뭔지부터 확인을 좀 해봤는데요

플러터는 구글에서 만든 크로스플랫폼 UI 프레임워크입니다.

모바일(안드 , IOS 둘다), 데스크탑 앱(Windows .exe 파일, MacOS .dmg파일), 웹 까지 모두 하나의 소스코드로 배포가 가능하죠.

이런게 바로 슈퍼앱이 아닌가 싶네요. 여기까지하고 일단 무작정 따라해봅니다.

아래 링크의 설명대로 명령어를 실행한다.

https://docs.flutter.dev/get-started/install/macos

1.  sudo softwareupdate --install-rosetta --agree-to-license

Password:
By using the agreetolicense option, you are agreeing that you have run this tool with the license only option and have read and agreed to the terms.
If you do not agree, press CTRL-C and cancel this process immediately.
2023-01-18 17:11:11.031 softwareupdate[62998:409413] Package Authoring Error: 012-92132: Package reference com.apple.pkg.RosettaUpdateAuto is missing installKBytes attribute
Install of Rosetta 2 finished successfully

뭔가 에러가 났는데 성공적으로 설치했다고 나오네요 !?

2. flutter docter 

아래처럼 이쁘게도 분석 결과를 보여주는군요

일단 X표시가 뜬 것들을 설치해야겠어요..

• 안드로이드 스튜디오 설치 및 최초실행하여 sdk 다운로드, 라이센트 동의, cli tool 설치 등 완료
• Xcode 설치 완료 및 라이센스 관련 오류 해결

현재 CocoaPods 이슈와 안드로이드 스튜디오에서 번들자바가 없다는 warning만 남기고 해결.

VS Code 를 IDE로 선택해서 테스트앱 생성, 실행 및 수정하여 hot reload 까지 확인완료.

다음엔 https://docs.flutter.dev/get-started/codelab 여기부터 진행 예정.

이었으나... 버전이 다른건지 신규 프로젝트 생성시 샘플 예제가 달라서 일단 dart 언어에 대해 알아보기로 함...

얼핏 봤을 때는 자바와 매우 비슷함..