Contents

転換

僕が作るゲームの多くはWebサイトの形で作ってきた。僕は前回も述べたようにWeb先にサイトを作っており、その後から同じ技術（HTML + JavaScript）でゲームを作成してGitHub PagesでWebサイトとして公開していた。しかし、この方針を取りやめ、Electronを用いて.exeファイルで作成することにした。
Electronというのは、HTML・CSS・JavaScriptで作ったWebアプリを、ChromiumとNode.jsを内包したデスクトップアプリとして動かせる仕組みだ。Windows向けには.exeファイルとして出力できる。Chromiumを同梱するためサイズはやや大きくなるが、JavaScriptしか書けない僕にとっては嬉しい選択肢だった。

理由1: ページのサイズを気にしてしまう

既存のゲームは、ページにアクセスした時に多くのファイルが読み込まれる。画像要素は非表示にしていてもHTMLに存在するならファイル読み込みが発生するという仕様がある。ゲーム画面では見えないようになっているだけで、多くの画面を（非表示状態で）用意している作り方だと、初回読み込み時にいくらか時間がかかってしまう¹。これを改善するためにすべての.pngファイルを.avifファイルに変換するのだが、手間がかかるし後から編集できないため不便だ。

理由2: Webだと不便なことがある

Webサイトの形だと出来なくて、同じ技術のElectronだと出来ることがある。
まず1つは、データの保存だ。既存のゲームでも途中からゲームを始めたり、実績を解除したりすることが出来た。これらのデータはユーザーの使用しているブラウザのlocalStorageに保存していた。しかし、localStorageに保存したデータは数週間程度で消えてしまう場合がある²。Electronを使ってユーザーのアプリとしてインストールさせれば、ローカルにデータを保存出来る。
2つ目は音楽の再生だ。Webサイトだとユーザーがアクションを起こすまで、音楽を再生できないという制約がある。そのためこれまでのゲームのトップページにサウンドはないのだが、これもアプリにすれば無効化できる。
それから、スマホで見られないという利点がある。これは欠点ではなく利点なのだ。今までのゲームの大半はスマホユーザーのためにデザインをレスポンシブにしていたが、これはかなり面倒だった。ゲームは同じ画面に多くの要素を詰め込むし、場合によっては要素の順も変えなければいけない。どのサイズでも正しく見えるようにブラウザのサイズを変えながら各要素をチェックする必要がないのは嬉しい。

理由3: 他のサービスで配布できない

一部のプラットフォーム（例: Steamなど）ではWebアプリ形式のゲームを直接配布できず、実行ファイル形式にする必要がある。

今までとの違い

localStrageにデータを保存・読み込みする部分は（Windowsなら）C:\Users\${username}\AppData\Roamingに保存する為に少しだけ書き換える必要があるが、言語が同じであるため、ほぼ全て既存のコードを流用できる。
僕はelectron-storeというライブラリを使用してデータを保存している。

// メインプロセス
const Store = require('electron-store');

const store = new Store({
  schema: {
    'lang': {
      type: 'string',
      enum: ['en', 'ja'],
      default: 'ja'
    },
    'gameData': {
      type: ['object', 'null'],
      default: null
    }
  }
});

function saveGameData(gameState) {
  try {
    store.set('gameData', gameState);
    return true;
  } catch (e) {
    return false;
  }
}

function getGameData() {
  return store.get('gameData');
}

function deleteGameData() {
  store.delete('gameData');
}

最初に形を宣言すれば、set、get、deleteで簡単にデータを保存・読み込み・削除できる³。