Flutter로 만든 미니 게임을 Flutter for Web에 이식했다.

8708 단어 iOS게임 제작flutter_webFlutter안드로이드

웹용 Flutter



Dart를 사용하여 iOS/Android UI를 쉽게 개발할 수있는 Flutter의 웹 버전
Google I/O 2019에서 발표되었습니다.

htps //w w. 요츠베. 이 m/와 tch? v = 아니 yFz k69
아래는 Google I/O 19의 Youtube 동영상 스크린샷입니다.


했어! 라고 생각했습니다만 동영상이 아키텍처의 그림이 되면 무무무라고 생각했습니다.
그리기 라이브러리 등 Flutter의 낮은 레이어 부분을 게임 제작에서 주로 이용하고 있었는데 Flutter for Web에서는 몰래 바뀌었기 때문입니다.

iOS/Android용


웹용 (Engine 대체)


하지만 이식



flutter_web 버전은 0.0.0을 사용했습니다.

원래 코드
htps : // 기주 b. 코 m / 케이 d 로이 d / ぃ ghts_ 오우 t

이식한 미니게임
htps : // 푸 r-6c1 그래. 흠뻑 빠지다 p. 코m/
  • 스마트폰 세로 화면만 대응. 액세스하자마자 놀 수 있습니다)
  • 앱 버전 시점에서는 코드 사이즈 5KB였습니다.

    • 이식 과정



    프로젝트를 웹 대응



    공식 페이지의 아래와 같은 순서를 실시하면 대응할 수 있었습니다.

    htps : // 기주 b. 이 m / f ぅ는 r / f ぅ는 r_ 우 b
    htps : // 기주 b. 이 m/fぅ는 r/fぅ는 r_우ぇb/bぉb/뭐 r/도 cs/미g라치온_구이로. md

    현재 크로스 플랫폼이 아니라 migration 절차를 마치면
    iOS/Android에서는 작동하지 않는 웹 전용 앱입니다.

    로컬로 실행하면 localhost:8080 실행 확인할 수 있습니다.
    빌드하면 build/ 폴더에 web 실행 파일이 작성되므로 build/ 폴더를 공개하면 완성됩니다.
    ローカル実行コマンド
$ webdev run
ビルドコマンド
$ webdev build

    소스 코드를 웹 대응


  • dart:ui가 작동하지 않습니다. flutter_web:ui로 변경해야 했습니다.
  • Widget이없는 앱에서는 작동하지 않습니다. 위젯을 하나 이상 준비했습니다.
  • 마스크 필터나 둥근 그리기 등 일부의 flutter_web:ui는 동작하지 않고. 다른 API로 대체했습니다.



    • 앱 버전
    웹 버전






    독립 실행형 대응



    이하 Flutter for Web의 페이지를 스마트폰으로 열어 홈 화면에 추가하면, 전체 화면에서 게임을 즐길 수 있습니다.

    이것은 Flutter의 기능이 아니라 기존의 Chrome/Safari의 기능입니다.
    Flutter for Web에서는 web측의 설정도 자유롭게 가능하기 때문에
    네이티브 어플 같게하기 위해 메타 태그 대응했습니다.

    변경 전




    index.html
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>

    변경 후



    index.html
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <link rel="apple-touch-icon" href="./apple-touch-icon.png">
  <!-- Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="manifest" href="./manifest.json">
  <title>Lights Out</title>
  <script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>

    manifest.json
    {
  "lang": "en",
  "name": "Lights Out",
  "short_name": "Lights Out",
  "icons": [{
        "src": "/icon144.png",
        "sizes": "144x144",
        "type": "image/png"
      }],
  "start_url": "https://fir-6c1ee.firebaseapp.com/",
  "display": "standalone"
}
  • htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m/우아 b/푼다 멘타 ls/우우 b-아 p-마니후 st/? hl = 그럼
  • https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

    • 감상


  • 소스 코드를 바꿔서 겨우 움직였다
  • 아직 버전 0.0.0이므로 향후 기대 (현시점에서도 잘 작동한다)
  • 앞으로는 고수준 API를 사용하여 Flutter 할 것이다
  • 네이티브도 Flutter도 웹 앱도 굉장하기 때문에 뭘 만들면 좋을까 헤매다
  • 게임이나 곧 놀 수 있습니다
    • 【UE4】클래스로부터 UPROPERTY의 값을 취득하는 방법에 대해서
    【UE4】StreamableManager에 대해서

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage