React Nativeでゲームを作る(ための、はじめの一歩)

フロントエンジニアの、YAMATAKUです。
今回はチーム「LOT」の初開発についての方針と、準備(サンプルアプリ開発)を記事にしていきます。

背景

チームで結成前に、こんなサービスが欲しい、世の中の不便を解決できるようなサービスを作ろうなど、チームで議論したものの、まずはチームとしてのモチベーションの底上げが先決だと思いたつ。そのためには、例えユーザーがいなくても、とりあえずは開発している側も楽しめそう、ということで、ゲーム開発を念頭において、スタートすることにしました。

開発ツール、言語、フレームワークなど

• React Native
  https://reactnative.dev/

• react-native-game-engine
  https://www.npmjs.com/package/react-native-game-engine

で作ります。

選定理由

• JSを使いたい
• これからも当分JS強い(はず)
• React知名度(from Facebook)
• スマホアプリのゲームが作れる
  など

その他候補メモ

• CocosCreator(cocos2d-js)
  https://www.cocos.com/en/creator

なんか、GUIでグイグイ行く感じがアガらなかった・・・

環境構築

• Node.js インストール
  https://nodejs.org/ja/

• Android Studio インストール
  https://developer.android.com/studio?hl=ja

• Android Studio エミュレータ作成 (Google Pixel3 & Android9.0)
  https://qiita.com/yacchi1123/items/5849df8965de19818617

• VSCode インストール
  https://code.visualstudio.com/

• Python3 インストール(序盤の「Python のインストール」だけでOK)
  https://qiita.com/youkidkk/items/b6a6e39ee3a109001c75

React Native CLI インストール

$ npm install -g react-native-cli

Macの場合(Xcodeインストール)

- Xcodeインストール  
App Store > Xcodeで検索

- Pod アップデート  
$ sudo gem install cocoapods -n /usr/local/bin

- Xcode パス設定  
$ sudo xcode-select --switch /Applications/Xcode.app

VSCodeに支援ツール(もしくはお役立ちツール)を入れる

スニペットや補完など、ReactNativeのコーディングを支援するプラグインを追加していきます(随時)
VSCode > 表示 > Extentions > Search Extentions in Marketplace
で、以下項目を検索して、インストールしていきます(以下リンクを開いた先にある「Install」ボタンを押すと、VSCodeが起動し、インストールページを表示できます)。

• React Native Tools:デバッグツール
• React Native Snippet:スニペットプラグイン
• Path Intellisense: 外部ソースのパスを補完してくれる
• Material Icon Theme:インスペクタの各行にアイコンを表示してくれる
• Prettier:自動整形ツール

Prettier設定

まず、
・VSCode > 基本設定 > 設定 > 「Format On Save」で検索 > チェックを入れる

上記設定後、プロジェクトルートフォルダに、.prettierrcファイルを作成します。

.prettierrc

{
  "printWidth": 100,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "endOfLine": "lf",
  "bracketSpacing": true
}

これで、セーブするたびに、自動整形が実行されます。

React Native チュートリアル

これから数回の記事で、react-native-game-engienのチュートリアルをやります。
動画付きの記事があったので、助かります。
https://github.com/lepunk/react-native-videos

• Whack-A-Mole
• Flappy Bird
• MineSweeper
• Snake

4つあるうち、まずは、 「Whack-A-Mole(もぐらたたき)」を見ていきます。

Whack-A-Mole プロジェクト作成

事前にターミナルなどを開いて、適当なディレクトリに移動しておきます。

プロジェクト作成

$ react-native init WhackAMole

実行

$ cd WhackAMole
$ react-native run-android
$ react-native run-ios

eslint設定

ESLintはJavaScriptのための静的検証ツールです。
今回は説明を省いて、eslintrc.jsファイルを以下のように書き換えてください(コピペでOK)

eslintrc.js

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],

  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    project: './tsconfig.json',
    sourceType: 'module',
  },
  plugins: [
    '@typescript-eslint',
    'jest',
    'prettier',
    'prefer-arrow',
    'react',
    'react-hooks',
  ],
  root: true,
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', 'jsx', '.ts', '.tsx'],
      },
    },
  },
  rules: {
    // eslint official
    'newline-before-return': 'error',
    'no-console': 'warn',
    'require-yield': 'error',

    // @typescript-eslint
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-member-accessibility': 'off',
    indent: 'off',
    '@typescript-eslint/indent': 'off',
    '@typescript-eslint/no-unnecessary-type-assertion': 'error',

    // prefer-arrow
    'prefer-arrow/prefer-arrow-functions': [
      'error',
      {
        disallowPrototype: true,
        singleReturnOnly: true,
        classPropertiesAllowed: false,
      },
    ],

    // react
    'react/jsx-filename-extension': [
      'error',
      {
        extensions: ['jsx', 'tsx'],
      },
    ],
    'react/jsx-one-expression-per-line': 'off',
    'react/jsx-uses-react': 'error',
    'react/jsx-uses-vars': 'error',
    'react/prop-types': 'off',
    'react/prefer-stateless-function': 'off',

    // react hooks
    'react-hooks/rules-of-hooks': 'error',

    // prettier
    'prettier/prettier': [
      'error',
      {
        bracketSpacing: true,
        printWidth: 80,
        semi: true,
        singleQuote: true,
        trailingComma: 'all',
        useTabs: false,
      },
    ],
  },
};

ビルドエラー関連

ビルドエラーが起きた場合には、以下を試してみてください。

//ターミナル、シュミレータを閉じて

$ lsof -i :8081
COMMAND   PID     USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
node    89670 my-pc   24u  IPv6 0x26cfb288a930f387      0t0  TCP *:sunproxyadmin (LISTEN)

$ kill -9 PID 89670

↓上記で解決ない場合

//ビルドキャッシュのクリア
$ rm -rf ios/build
$ rm -rf android/app/build

【Android】
#エラー Error: spawnSync ./gradlew EACCES
$ chmod 755 android/gradlew 

【iOS】

//Xcode > ビルドシステムをLegacyに変更する

//iOS ビルドエラーにPod系の表示があれば
$ pod install

総括

とりあえず、プロジェクト作成、ビルドはできました。
次回から、実装に入ります。

次回参考：Whack-A-Mole GitHub
https://github.com/lepunk/react-native-videos/tree/master/WhackAMole