またろうのSteamworksブログ

Steamworks(Steam Direct)についての開発ネタを纏めています。

Steamworks APIを導入する(Steam実績を実装する:HTML5編)



今回はHTML5にてSteamworks APIを導入する手順を書きます。
HTML5を実行ファイル化する場合、NW.jsかElectronを使うことになりますが
HTML5ベースのオーサリングツール(ツクールMVなど)も自力でJavaScriptの編集ができるなら対応可能かと思います。

f:id:tsukinowaapp:20180808225254p:plain

HTML5の場合はgreenworksを使います。

github.com

組み込み手順

上記リンクより最新のzip(NW.js用とElectron用がOSとCPU種別ごとにあります)と
後で使うことになるのでSource code (zip)をダウンロードしておきます。

また、Steamworks SDKも用意しておいてください。

用意できたら以下のパスで設置します。

Windowsの場合

|-- greenworks.js
|-- index.html
|-- lib
|   |-- greenworks-win32.node
|   |-- sdkencryptedappticket.dll
|   `-- steam_api.dll
|-- package.json
`-- steam_appid.txt

win32とwin64がありますが、win32が無難(より多くの人が遊べる)でしょう。

Macの場合

|-- greenworks.js
|-- index.html
|-- lib
|   |-- greenworks-osx64.node
|   |-- libsdkencryptedappticket.dylib
|   `-- libsteam_api.dylib
|-- package.json
`- steam_appid.txt

libというフォルダを作って、その中にnodeファイルとdll(dylib)ファイルを入れます。
dll(dylib)ファイルはそれぞれ以下の場所にあります。
sdk/redistributable_bin/
sdk/public/steam/lib/

index.htmlのあるフォルダにsteam_appid.txtを入れます。
これはUnity編同様、AppIDのみを記述しておきます。

var greenworks = require('./greenworks.js');
greenworks.init();

後はゲーム内のjsファイルにて、上記のコードを記述して初期化します。

これで動いてくれたら何の苦労もないのですが...

実際にはgreenworks.init();でエラーになると思います。
(もしエラーが出なかったら「greenworksの再コンパイル」は読み飛ばしてください)

greenworksの再コンパイル

どうも配布されているgreenworksのnodeファイルの作りが宜しくないらしく、そのままでは使えません。
なのでSource codeを使ってnodeファイルを新しく生成します。

前準備

以下の環境が必要です。

Windowsの場合

python 2.7.x(3.x系は使えません)インストールしたらPathを通しておくこと
Visual Studio 2015以降(UnityをインストールしてあるならVisual Studio 2017も一緒に入ってる筈)
node.js(最新版)

Macの場合

python 2.7.x(3.x系は使えません)インストールしたらPathを通しておくこと
Xcodeコマンドラインツールがインストールされていること)
node.js(最新版)

greenworksソースコードとSteamworks APIの統合

greenworksソースコードの中に、Steamworks APIのソースをマージする必要があります。

greenworks/srcフォルダの中にsdk/public/steamフォルダをコピー
greenworks/depsフォルダの中にsteamworks_sdkフォルダを作成
greenworks/deps/steamworks_sdkフォルダの中にsdk/redistributable_binフォルダとsdk/publicフォルダをコピー
sdk/publicフォルダで必要なのはsdk/public/steam/libフォルダなので、sdk/public/steam直下にあるhファイル等は無くてもOK)

階層的にはこうなります。

deps
|--cpplint
|--misc
|--zlib
|--steamworks_sdk
|   |--redistributable_bin
|   `--public
|         `--steam
|               `--lib
src
|-- api
|-- steam
|   |-- lib
|   |-- steam_api.h
|   |-- etc....h

ビルドコマンド

以下をコマンドプロンプト(ターミナル)から実行します。

npm install -g nw-gyp
cd (greenworks直下のパス)
nw-gyp configure --target=0.31.5(NW.jsのバージョン) --arch=(x64 または ia32)
npm install nan
nw-gyp build --target=v10.6.0(Node.jsのバージョン)

npm installは実施済みなら省略できます。
Macの場合はnpm installのところでsudo npm installとしないとエラーになる場合があります。
また、モジュール(hファイル、dllファイルなど)が足りない的なエラーが出ることもあるので
ファイルパスを見て適宜追加してください。

これでgreenworks/libフォルダの中にnodeファイルが生成されている筈です。

コーディング

初期化

var greenworks = require('./greenworks.js');
if (!greenworks) {
    log('Not support platform');
} else {
    if (!greenworks.init()) {
        log('Error on initializing steam API.');
    }
}

処理を行うjsファイルの冒頭に記述します。
greenworks.init();の処理にて正常ならtrue、エラーならfalseが返ってきますので
拾ってエラー処理を書いた方がいいでしょう。

ユーザー名の取得

var cSteamId = greenworks.getSteamId();
var userName = cSteamId.screenName;

Statの呼び出し

greenworks.storeStats(function () {
    wCount = greenworks.getStatInt("win");
}, function () {
    log("Error on connect steam.");
});

greenworks.storeStatsを呼んでからでないと取得できないようです。
第一引数で正常だった場合の処理をfunctionで記述し
第二引数でエラーだった場合の処理を書きます。

greenworks.getStatIntでInt型
greenworks.getStatFloatでFloat型が取得できます。

Statの書き込み

greenworks.setStat("win", wCount);

第一引数でAPI
第二引数で書き込む値を設定します。

実績の獲得

if (5 <= wCount) {
    greenworks.getAchievement("win_5", function (isAchieved) {
        if (!isAchieved) {
            greenworks.activateAchievement("win_5", function () { });
        }
    });
}

greenworks.getAchievementで達成フラグの状態を確認して
greenworks.activateAchievementにて更新しています。
第一引数で実績のAPI
第二引数のfunctionで後続処理を書きます。

参考文献

ここにFAQとビルド手順とAPI リファレンスがあります。

github.com