HTML5製のゲームにSteamSDKを導入する手順（NW.js + Greenworks）

Steamに出すためのビルドをつくる流れを説明します。
Steamへの登録や申請などについてはこの記事では触れません。

登場人物

name	desc
NW.js	Chromiumを内蔵してWebアプリをネイティブ化するフレームワークです。Electronと同じ類のものです。
SteamWorks SDK	実績機能といった各Steamの機能を使うためのSDKです。それら機能を使わないとしてもSteamへのリリースには導入必須です。
Greenworks	上記Steamworks SDKをNode.jsで動かすためのパッケージです。

NW.jsでネイティブ化

公式サイトから目当てのOSのファイル一式をダウンロードします。

SDK版でないと検証ツールがつかないので、開発時はそちらがいいと思います。

各OS向けにリリースする場合、各OS向けのNW.jsを用意して構築する必要があります。

ダウンロードしたら、

• その直下がpublicディレクトリとなるイメージで、エントリー画面となるindex.htmlや必要なjsやcssなどを置きます。
• 同じく直下にpackage.jsonを置きます。

例えばこんな感じです↓

- NW.js本体
  - 元々あるファイルたち
  - package.json
  - index.html
  - js
    - index.js

ただし、mac版だと /nwjs.app/Contents/Resources/app.nw/* 配下に置くようです。

package.jsonのマニュアルはこちら
https://nwjs.readthedocs.io/en/latest/References/Manifest%20Format/

最小だとこんな感じ↓

{
  "name": "helloworld",
  "main": "index.html"
}

ちなみに、ゲーム自体の資材（jsや画像など）はnwのディレクトリに含めてもいいし、自分のサーバーでホスティングしてそこへ取りに行かせてもいいです。

サーバーに置けば、ネイティブ側のアップデートなしでゲームの不具合修正などができますね。

起動

起動するには、OSによりますが直下にあるnwやnw.exeという実行ファイルを実行してください。

Ubuntuではこのnwが何故か実行ファイルとして認識されなかったので、*.desktopファイルを設置するようにしました。

[Desktop Entry]
Name=AppName
Exec=sh -c "$(dirname %k)/nw"
Terminal=false
Type=Application

自動化

ここまで行った手順は、 nw-builder というパッケージで自動化できます。

GreenworksでSteam対応

Greenworks https://github.com/greenheartgames

ゴール:

1. 必要なファイルを準備する
2. さっきのNW.jsのプロジェクト内に配置する
3. アプリ（index.html）からGreenworksを使えるようになる

- さっきのNW.js
    - さっきのファイルたち
    - lib
        - libsdkencryptedappticket.拡張子 // ① Steamworks SDK
        - libsteam_api.拡張子 // ② Steamworks SDK
        - greenworks-OS名.node // ③ Greenworks本体
    - greenworks.js // ④ Greenworksのセットアップスクリプト
    - steam_appid.txt // ⑤ 開発時に仮でゲームIDを定義するファイル

①②はSteamworksから入手できる。
③はビルド生成物となり、Greenworksのリリースから入手できる。
④はGreenworksのリポジトリから入手できる。
⑤は開発用で、Steamworksのドキュメントに説明があります

しかし問題が一つあり、GreenworksのGithubで公開されている③のビルドは、最新のNode.jsに対応していません。

なので、最新のNW.js（=最新のChromium+最新のNode.js）で作る場合、Greenworksをクローンして自分でビルドしなければいけません。

[2021-03-31追記] 最新のnode向けのビルドを配布してくれているリポジトリを見つけました（後述）

古いNW.jsで構わない場合:

Greenworksでビルドをダウンロードする際、対応しているNW.jsが示されているので、それをNW.jsのアーカイブから取得します。

配布されているビルドをゴールで示したように配置します。（参考）

Steamworks SDKはSteamworksからダウンロードしてください。

追記した通り、最新のNW.jsで動くビルドを入手できるので、あえて古いNW.jsを使う必要はありません。が、さらに後述する「Steam Overlayが動かない」という問題は古いNW.jsを使うことで解決できる可能性があります。

最新のNW.jsでつくる場合:

1. Greenworksをクローン
2. Steamworks SDKのディレクトリをまるごとsteamworks_sdkにリネームしてdepsに配置（参考）
3. nw-gypを使って再ビルド（参考）

再ビルド手順

$ sudo npm install -g nw nw-gyp
$ cd Greenworksのディレクトリ
# targetはNW.jsのバージョン archは64bit
$ nw-gyp configure --target=0.46.1 --arch=x64
# targetはNode.jsのバージョン
$ nw-gyp build --target=v14.4.0

再ビルドに成功すると、直下のlibにgreenworks-OS名.nodeを含む必要なファイルができるので、
それをさっきのゴールのように配置する。

ビルドだとかの知識が皆無なのでよくわからないんですが、多分各OSでこの作業が必要です。

OSごとに色んな理由でうまくいかなかったりすると思いますが、それは一つずつ調査して解決しましょう…。

[2021-03-31追記] こちらのリポジトリから最新のnode、steamworks SDKに対するビルドを入手できます。

Releasesのところから、最大限の感謝をこめつつダウンロードしましょう。

たくさん種類があって迷いますが、僕の例でいくと「NW.js」「v89（当時最新）」「x64（64ビットOS向け）」を各OS向けに合計3つ入手しました。

ビルドが用意できたら、ゴールで示したようにリネームして配置します。③です。（参考）

Steamworks SDKを使ってみる

greenworksのビルドとSteamSDKを配置したら、エントリーポイント内から以下のようにgreenworksを読み込めるようになります。

const greenworks = require('./greenworks.js')
greenworks.init()

最初steamが起動していない 的なエラーが出てなんのこっちゃと思いましたが、
本家Steamアプリが起動していないといけないようです。

問題なく読み込めたら、Greenworksのドキュメントを参考に目的の機能を使ってみましょう。

Steam overlayが動かない

Steamオーバーレイとは、ゲーム内でSteamの機能（フレンドリストを開いたり）にアクセスできるものです。

僕はどうやってもこれを動作させることができませんでした。

色々調べた限り、これはgreenworksのせいではなく、NW.jsのグラフィック関係の処理の影響みたいです。
Has anyone successfully integrate Steam Overlay with Greenworks SDK?

古いNW.jsにおいては、chromium起動オプションに--in-process-gpu --disable-direct-compositionをつけると動作していたらしいです。

同じ問題か分かりませんが、Steamのスクリーンショット機能も動作しません。

うまくいった方が居たらぜひ情報をいただきたいです。

ちなみに、Steamに審査に出した際、Steamオーバーレイについて指摘事項に挙げられましたが、必須事項というわけではないようで、このままでもリリースは可能です。

おわりに

NW.jsもElectronもそうですが、Chromiumを丸ごと含むので容量が大きくなることが難点ですね。

ともあれ、Greenworksという素晴らしいラッパーライブラリには心より感謝します。