読者です 読者をやめる 読者になる 読者になる

naichi's lab

3日後の自分(他人)への書き置き

【Unity、WebGL】なるべく簡単にオンラインランキング機能をつけるサンプル

ランキング機能が欲しい

ゲームを作ってると、オンラインランキング機能が欲しくなりますよね。

ぐぐるとドンピシャな記事が出てくるんですが、残念ながらWebGLには対応していない・・・

[GGJ向け]Unityゲームに全世界スコアランキングを速攻で実装する | BACKEND AS A SERVICE mbaas BLOG

簡単に実装したいんだけど意外と見つからない。

iOS/Androidの場合は何も考えずに上記NCMBでいいと思います。

自前でLAMPサーバーとか用意すればどうにでもなるんですが、 ゲームが公開されている間ずっと管理しなきゃいけないと思うと割に合わない・・・

そんななか、 @divideby_zero さんがとても面白いものを公開していました。

GoogleSpreadSheetをバックエンドにしてしまおう!というもの。

なるほど・・・じゃあクライアント側作ってみよう。

ゲームジャム中は大変だしなるべくコーディングなしでそのまま使えることを目標で。

作りました

naichilab/unity-simple-ranking · GitHub

デモはこちら

以下使い方。

使うだけなら15分ぐらいで実装できるかと。

使い方

1. 下記記事を参考に、1.下準備 2.Unity側準備 まで進める

UnityのWebGL出力に簡単に無料でグローバルランキングを実装できる仕組みを考えてみた - Qiita

  • スプレッドシートとAPIは複数ゲームで使いまわせるので初回の1回だけでいいと思います。
  • 3.データの保存 以降は不要

2. パッケージのインポート

GitHubに公開したunity-simple-rankingから、 unity-simple-ranking.unitypackageをダウンロードしてUnityにインポート。

f:id:naichilab:20170524214046p:plain

3. unity-simple-ranking の設定

Build Settingsnaichilab/GSSARanking/Scenes/Ranking をビルド対象シーンに追加する

f:id:naichilab:20170524214111p:plain

EventSystem がない場合は作成しておく
すでにuGUI使ってる場合はあると思うので作成不要。

f:id:naichilab:20170524214202p:plain

SpreadSheetSettingDefault Sheet Name を入れる。
ゲームごとにシートを使い分けるイメージでゲーム名とかを入れるといいです。

f:id:naichilab:20170524214242p:plain

naichilab/GSSARanking/Prefabs/RankingLoader をHierarchyウィンドウにドラッグ&ドロップ

f:id:naichilab:20170524214334p:plain

naichilab/GSSARanking/Settings/ScoreTypeSetting の設定を確認・変更する

f:id:naichilab:20170524214353p:plain

詳細は以下の通り

Type
設定値 説明
Number 数値(整数、小数)をスコアとして扱う場合はこちら
Time 時間をスコアとして扱う場合はこちら
Order
設定値 説明
Order By Ascending 数値が低い(時間が短い)方がランキング上位な場合はこちら。ランキングがスコア1,2,3と並びます
Order By Descending 数値が高い(時間が長い)方がランキング上位な場合はこちら。ランキングがスコア3,2,1と並びます
Custom Format

数値の桁揃えや小数桁数指定などができます。 時間の場合もミリ秒まで表示などの指定ができます。(入力は任意)

これで準備完了

4. 呼び出す

ゲームオーバー時とか、スコアが確定したタイミングで下記を呼び出す。

// Type == Number の場合
naichilab.RankingLoader.Instance.SendScoreAndShowRanking (100);

// Type == Time の場合
var millsec = 123456;
var timeScore = new System.TimeSpan (0, 0, 0, 0, millsec);
naichilab.RankingLoader.Instance.SendScoreAndShowRanking (timeScore);

上記を呼び出すと、Ranking シーンが追加読込されます。

f:id:naichilab:20170524214431p:plain

これでスコア表示とハイスコア送信、TOP30のランキング表示が可能です。

UIは全てuGUIなので、テクスチャつけるなりフォント変えるなり自由に変更してください。

データの修正や削除など

最初に作成したスプレッドシートは、データベースであり、データのエディタです。 そのまま開いてデータ編集や削除をしてください。

f:id:naichilab:20170524214445p:plain

まとめ

ランキングの必要最低限の機能を、なるべくコーディングなしで使えるように作ってみました。

ちょっと遅いですが、無料で使えるし管理もしやすいので中々いいんじゃないでしょうか?

自前でランキングサーバーを立てると少なからず有料(レンタルサーバー代や電気代など)なうえに、 ゲームの寿命が尽きるまでずっと管理しなきゃいけないですからね・・・

ソースひどいのでシンプルにしたらぜひプルリクください!

ではゲーム作りを楽しみましょう〜

【unityroom】2017年04月振り返り

はじめに

f:id:naichilab:20170510202539p:plain

ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

上記サイト、ちゃんとアクセス数増やす努力をしようと思う。

何かしらの対策打つにしても数字取ってないと何もできないのでとりあえず確認と記録を残すところから。

Analytics開けばいつでも見れるんだけど、ブログにでも書かないと指標について考えたりできなさそうなので。

ものぐさなので月1目標で。

指標

Analytics入れてあるけど正直何を見ていいのかわからない。

ググったらこんな記事でてきたので真似してみる。

アクセス解析の基本とはじめに追うべき3つの指標 | 評価・分析ツールの最新情報や基礎知識 | 知る・学ぶ | Marketing Bank (マーケティングバンク)

2017/04 測定値(前の月)

直帰率

51.57%(53.88%)4.29%改善

  • もっと下げられるはず。
  • webglプレイ画面に直接来た人がそのまま閉じてるパターンが多いんじゃないかなと予想。
    • この仮定を確かめるにはどうやって見たらいいんだろう。

平均PV(ページ/セッション)

2.99(2.44)22.62%改善

  • これも直帰率同様に同ジャンルや関連ゲームを表示すれば改善できそう
  • 20%も増えたのはゲームジャムやっていろんな作品遊ぶ人が多かったからかな。

CVR

これは何にしよう・・・とりあえずWebGLプレイ画面を開いた回数とかにしようか。

コンバージョン設定だけして収集開始した。(5/10〜)

TOPICS

  • いいねボタンを用意した。
    • 用意しただけでどこにも使ってない
  • 問い合わせ・要望フォーム設置した
    • 誰も書いてくれない
  • 1週間ゲームジャム初開催
    • 70作品。楽しかった。
  • Unity5.6のアップロードに対応(WASMは未対応)

感想

  • 3月ぐらいからこつこつ改修してるのと、4月末にゲームジャムをしたことでだいぶアクセス増えてきた。
  • ゲームジャムやってみて欲しい機能がいくつか見えた。
    • どうにか評価する仕組みを考えたい
    • 評価する仕組みを流用すれば未プレイ一覧も表示できそう
  • Unite見てきてWebAssembly(WASM)すげー。って感じになったので早めに対応したい。
  • まずはゲームジャム安定させて、そのあとジャンル分けとか実装かな〜

のんびりいきましょ。

【unity】WebGLビルド方法② CloudBuildの利用

f:id:naichilab:20150917124702p:plain

概要

blog.naichilab.com

上記方法でどうにもうまくいかない人向け。

というか個人的にはこっちの方がいちいち自分のPCでビルドしなくていいのでオススメ

自分のPCではなく、Unityのクラウドサービスを使ってビルドする方法を書いておきます。

環境
  • Unity 5.6.0f3

手順

1. ゲームを作る

千差万別なので割愛。好きに作ってください。

この記事では、サンプルとして公式チュートリアルの Tanks! Tutorial をインポートした状態で説明します。

f:id:naichilab:20170429120839p:plain

2. Unity Cloud サービスにリンク

エディタ上にある 雲のマーク を押し、 New Link ※すでにリンク済みの場合はRefresh accessですね。

f:id:naichilab:20170429151314p:plain

Select Organization と言われるので、自分の名前を選択し、Create。

f:id:naichilab:20170429151548p:plain

Unityインストール時?に作ったアカウント名で存在するはず。たぶん。

するとこんな感じでサービスが並ぶ

f:id:naichilab:20170429151637p:plain

3. Unity Collaborate を有効にしてアップロードする

Unity Collaborateは複数人でのソース共有&コラボレート目的のサービスですが、一人でも使えます。

Collaborate -> ON

f:id:naichilab:20170429151808p:plain

上記画面の、Publish -> Open the Collab toolbar を押すと、小さなウィンドウが出てくる

f:id:naichilab:20170429152019p:plain

適当にコメント入れて、 Publish Now!

f:id:naichilab:20170429152028p:plain

アップロード完了を待つ。

これでソースコード一式がUnityのサーバーにアップロードされました。

アップロード後に追加の変更をアップロードする場合も、メニューにある f:id:naichilab:20170429152145p:plain からできます。

4. Unity Cloud Buildを有効にして設定する

Unity Cloud Buildは、自分のPCではなくUnityのサーバー上でビルドしてくれるサービスです。

雲のマークから、 Clour BuildをON

f:id:naichilab:20170429152259p:plain

f:id:naichilab:20170429152452p:plain

プラットフォームにWebGLを選択し、Nextを押す

f:id:naichilab:20170429152538p:plain

設定はすべてデフォルトで大丈夫。Unityのバージョンは好きなものを選択してください。

2017/04/29現在、unityroomにアップロードできるのは、 Unity 5.4, 5.5, 5.6 だけです。

設定が完了すると、下記画面になります。

f:id:naichilab:20170429152651p:plain

Queued となっているのが、ビルド予約済みという状態です。

待ってると Buildingに変わります。(ウィンドウ開き直さないと更新されないかも)

f:id:naichilab:20170429152851p:plain

さらに15~30分ぐらい待ってると、 Succeess もしくは Failed に変わります。

f:id:naichilab:20170429153748p:plain

失敗しました・・・

View Summaryを押してログを確認しましょう。

f:id:naichilab:20170429153833p:plain

ログインするとサマリーページが開くので、ログを押します。

赤いところがエラーです。

f:id:naichilab:20170429153953p:plain

エラー原因はビルド設定の不備ですね・・・

修正して再度Collabにアップロード。

CloudBuildのウィンドウで Start Cloud Build を押して再実行します。(やっぱり開き直さないと反映されない・・・)

f:id:naichilab:20170429154332p:plain

気長に待ちましょう。

f:id:naichilab:20170429161403p:plain

ビルド成功!!

5. Unity Cloud Buildからファイルをダウンロードする

f:id:naichilab:20170429161403p:plain

ビルド成功したら Play を押しましょう

f:id:naichilab:20170429161554p:plain

ブラウザでそのまま遊べます。

f:id:naichilab:20170429161635p:plain

その画面右下にあるリンクからダウンロード

回答するとこんな感じ。ローカルPCでビルドした場合と同じですね。

f:id:naichilab:20170429161707p:plain

まとめ

CloudBuildを使ったWebGLのビルド方法は以上です。

ビルドしたファイルをunityroomへアップロードする方法については下記記事をご覧ください。

blog.naichilab.com

【unity】unityroomに投稿する方法

f:id:naichilab:20170429140841p:plain

概要

WebGL用にビルドしたゲームを、unityroom へアップロードする方法を紹介します。

環境
  • Unity 5.6.0f3

Unityのバージョンによって、ビルド後に出力されるファイルに若干の違いがあります。 その辺りは読み替えてください。

前提

WebGLビルド

WebGLビルドが済んだ状態を前提とします。

ビルド方法については下記を参照ください。 blog.naichilab.com

blog.naichilab.com

Twitterアカウント

unityroomにログインするにはTwitterアカウントが必要です。

手順

1. unityroomにログインする

unityroomにアクセスし、右上の 新規ユーザー登録/ログイン を押す。

f:id:naichilab:20170429130024p:plain

利用規約を読んでいただき、同意いただける場合はTwitterボタンから認証してください。

f:id:naichilab:20170429130121p:plain

ログインに成功すると、ヘッダーのメニューが変わり、Twitterアイコンが表示されます。

f:id:naichilab:20170429133300p:plain

これでログインは成功です。

2. 新規ゲームを作成

ヘッダー -> 新しいゲームを登録する

f:id:naichilab:20170429133812p:plain

タイトルとゲームID、簡単な説明を入力して、登録を押します。

タイトル
  • ゲームのタイトルです。
ゲームID
  • URLの一部として使われる文字列です。
  • 自由に決めてください。
  • 英数字とハイフン、アンダーバーのみ利用できます。

登録に成功すると、基本情報編集画面に移ります。

f:id:naichilab:20170429134210p:plain

この画面には、投稿済みゲームの更新からアクセスできます。 f:id:naichilab:20170429134315p:plain

3. 基本情報を更新

サイドバーの 基本情報 メニュー

f:id:naichilab:20170429134533p:plain

アイコンを選択し、更新します。 必要に応じてタイトルや説明文を変更できます。

アイコンサイズに制約はありませんが、正方形に近い方が綺麗に表示されます。 ゲーム一覧画面は正方形で表示されます。 ホーム画面では、一部黄金比(1:1.618)で表示されます。

4. スクリーンショットを登録

サイドバーの スクリーンショット メニュー

f:id:naichilab:20170429135020p:plain

任意のスクリーンショットを登録してください。

5. WebGL設定

サイドバーの WebGL設定 メニュー

f:id:naichilab:20170429135207p:plain

ここでUnityのバージョンを選択します。 サイズや操作方法、メモリ使用量は任意で記入してください。

Unityのバージョンは、unity -> About Unity で確認できます。 f:id:naichilab:20170429135320p:plain

お使いのバージョンがunityroomに表示されていない場合は @naichilab までお問い合わせください

6. WebGLアップロード

サイドバーの WebGLアップロード メニュー

f:id:naichilab:20170429135428p:plain

Unityから出力されたファイルをアップロードします。 拡張子をよく見て、間違えない様に選択してください。

f:id:naichilab:20170429135554p:plain

アップロードに成功すると、画面が更新され、ファイルサイズ等が表示されます。

f:id:naichilab:20170429135710p:plain

7. 公開設定

サイドバーの 公開設定 メニュー

f:id:naichilab:20170429135830p:plain

最低限アイコンとWebGLアップロードが済んでいれば、公開可能です。 好みの公開方法を選択し、更新してください。

Unity 1週間ゲームジャムに応募する場合

7.公開設定 にて一般公開を選択し、さらにお題を選択してください。

f:id:naichilab:20170429140257p:plain

この状態で更新すると、公開予約 状態となります。これで参加申し込み完了です。

f:id:naichilab:20170429140353p:plain

【unity】WebGLビルド方法

f:id:naichilab:20170429141038p:plain

概要

unityroom へアップロードするための、WebGL形式でビルドする方法をまとめておきます。

環境
  • Unity 5.6.0f3

Unityのバージョンによって、ビルド後に出力されるファイルに若干の違いがあります。 その辺りは読み替えてください。

手順

1. ゲームを作る

千差万別なので割愛。好きに作ってください。

この記事では、サンプルとして公式チュートリアルの Tanks! Tutorial をインポートした状態で説明します。

f:id:naichilab:20170429120839p:plain

2. プラットフォーム切り替え

File -> Build Setting を開きます。

f:id:naichilab:20170429120929p:plain

WebGLを選択し、Switch Platform を押します。

f:id:naichilab:20170429121058p:plain

WebGLの横にUnityのアイコンがつけば切り替え完了です。

f:id:naichilab:20170429121216p:plain

3. ビルド対象シーンを追加

Build Settingの画面で、ビルド対象となるシーンを選んでおく必要があります。 複数のシーンを作った場合は、忘れずに追加しておきましょう。

f:id:naichilab:20170429121607p:plain

4. ビルド実行

Build Settingの画面で、Build もしくは Build And Run を押します。※それぞれの違いは後述

f:id:naichilab:20170429121721p:plain

保存フォルダ名を決めて実行

f:id:naichilab:20170429121905p:plain

かなり時間かかります。規模によると思いますが数分はかかるかも。

f:id:naichilab:20170429122005p:plain

Build

ビルドのみを行います。ビルドに成功すると、ファイルが出力されます。

  • 注意
    • 出力された index.html をそのままブラウザで開いても実行できません。
    • これはブラウザセキュリティの関係でローカルファイルを読み込めないため。
    • 実行するためには次の Build And Run を行うか、unityroomなどのWebサーバーにアップロードする必要があります。
Build And Run

ビルドと実行を行います。 ビルドに成功すると、ファイルが出力され、さらにブラウザで実行されます。

  • 出力されるファイルは Build と同じです。
  • Unityが簡易Webサーバーとなり、ブラウザで開いてくれるので、実行まで確認できます。
  • 動作確認までまとめて行いたい場合はこちら。

ブラウザで実行された様子 f:id:naichilab:20170429125048p:plain

5. 出力されたファイルの確認

Build ( Build And Run )時に選択したフォルダに、下記ファイルが出力されます。

f:id:naichilab:20170429125235p:plain

出力されるファイルは、Unityのバージョンにより多少異なります。

どうしてもビルド失敗する場合

所感ですが、WebGLビルド、まだ安定していないような感じがしています。

Building native binary with IL2CPP で必ず落ちる。といった人もいるようです。

https://forum.unity3d.com/threads/webgl-always-gets-stuck-building-player-building-native-binary-with-il2cpp.466196/

ビルドエラーがどうしても解決できない・・・って人は下記方法もお試しください。

blog.naichilab.com

まとめ

WebGLのビルド方法は以上です。

ビルドしたファイルをunityroomへアップロードする方法については下記記事をご覧ください。

blog.naichilab.com

【Unity、Android】最新のAndroidStudio入れたらUnable to list target platforms.が出て困った

WindowsPCでAndroidビルドしようとしたらエラーした

環境

  • Windows 10 Home
  • Unity 5.6.0f3

症状

状況

WindowsPC買い替えて、Unity5.6インストール。 Android Studioも最新版いれて、JDK1.8も入れた。

さてAndroidビルドするか。->エラー

f:id:naichilab:20170409155809p:plain

Unable to list target platforms. Please make sure the
android sdk path is correct. See the Console for more
details. See the Console for details.

コンソール

CommandInvokationFailure: Unable to list target platforms. Please make sure the android sdk path is correct. See the Console for more details. 
C:/Program Files/Java/jdk1.8.0_121\bin\java.exe -Xmx2048M -Dcom.android.sdkmanager.toolsdir="C:\Users\kitte\AppData\Local\Android\Sdk\tools" -Dfile.encoding=UTF8 -jar "C:\Program Files\Unity\Editor\Data\PlaybackEngines\AndroidPlayer/Tools\sdktools.jar" -
stderr[
Error:Invalid command android
]
stdout[
]
exit code: 64
UnityEditor.Android.Command.Run (System.Diagnostics.ProcessStartInfo psi, UnityEditor.Android.WaitingForProcessToExit waitingForProcessToExit, System.String errorMsg)
UnityEditor.Android.AndroidSDKTools.RunCommandInternal (System.String javaExe, System.String sdkToolsDir, System.String[] sdkToolCommand, Int32 memoryMB, System.String workingdir, UnityEditor.Android.WaitingForProcessToExit waitingForProcessToExit, System.String errorMsg)
UnityEditor.Android.AndroidSDKTools.RunCommandSafe (System.String javaExe, System.String sdkToolsDir, System.String[] sdkToolCommand, Int32 memoryMB, System.String workingdir, UnityEditor.Android.WaitingForProcessToExit waitingForProcessToExit, System.String errorMsg)
UnityEditor.HostView:OnGUI()
Error building Player: CommandInvokationFailure: Unable to list target platforms. Please make sure the android sdk path is correct. See the Console for more details. 
C:/Program Files/Java/jdk1.8.0_121\bin\java.exe -Xmx2048M -Dcom.android.sdkmanager.toolsdir="C:\Users\kitte\AppData\Local\Android\Sdk\tools" -Dfile.encoding=UTF8 -jar "C:\Program Files\Unity\Editor\Data\PlaybackEngines\AndroidPlayer/Tools\sdktools.jar" -
stderr[
Error:Invalid command android
]
stdout[
]
exit code: 64

なんのこっちゃ

Android Studio でSDKパスを確認

Android Studioを起動して右下から

f:id:naichilab:20170409160326p:plain

f:id:naichilab:20170409160357p:plain

書かれてるパスをコピー

f:id:naichilab:20170409160432p:plain

Unity側

f:id:naichilab:20170409160515p:plain

ちゃんと入ってる。

ぐぐる

それっぽい記事が見つかった

Unityで「Unable to list target platforms」というエラーが出て、Android向けビルドができなくなった場合の対処法

Android Sdk Toolsのバージョン確認

AndroidStudio -> Configure -> SDK Manager

f:id:naichilab:20170409163116p:plain

26.0.1 だった。

Android.bat のほうのバージョン確認

って↑の記事に書かれてる Android.bat 起動しない・・・

AndroidStudioのメニューから Tools -> Android -> SDK Managerってやっても同じものが起動するし・・・

別の記事を参考に

qiita.com

ダウンロード

https://developer.android.com/studio/index.html

一番下の tools_r25.2.3-windows.zip

f:id:naichilab:20170409165657p:plain

293Mって・・・

Android SDK Tools フォルダを上書きする

SDKフォルダのtoolsフォルダはリネームしておく

プロセスから adb 殺さないとリネームできないかも

f:id:naichilab:20170409170049p:plain

さっきダウンロードしたファイルを解凍して、tools フォルダとしてコピーする

新旧toolsフォルダの中身

f:id:naichilab:20170409170232p:plain

全然ちがう・・・

ビルド

通った!!!!

まとめ

  • 新しいAndroidStudioだとSDKToolsの構造が違うみたい。
  • Unity側がまだそれに対応してないのかな。
  • SDKToolsのフォルダを手動でダウングレードして対応。

GGJで作ったゲームを展示してきました @ サイエンス・ワークショップ in けいはんな #精華町

今日はこのイベントに行ってきました。

kscan.jp

といっても講演を見に行ったわけでもなく、ワークショップを開いたわけでもなく、
子供達にGGJで作ったゲームを遊んでもらってました。

写真

f:id:naichilab:20170306004142j:plain

楽しそうに遊んでくれる子供達

f:id:naichilab:20170306003431j:plain

親子の対戦中

f:id:naichilab:20170306003434j:plain

子供はルールの理解も早い

他にも Microsoftさんが 女子高生AI りんな の出し物してたり、
Pepper君がPPAP踊ってたり、リアル精華ちゃんがいたりしました。

展示したゲーム

基本的にGGJで作ったゲームを展示。
自分が参加した会場もここだったので、試遊会って位置付けですね。

blog.naichilab.com

育毛DJ

IKUMO-DJ | Global Game Jam®

植毛リズムゲーム。
見た目がわかりやすく親子で楽しんでくれました。

Escape by Ship

Escape by Ship | Global Game Jam®

船を狙う砲台 に分かれて戦うゲーム。
逃げる or 撃つ とやることがはっきりしてるので小さな子も楽しんでました。

心電図パニック

心電図パニック Electrocardiogram panic | Global Game Jam®

運び込まれる患者をタップ連打で助けるゲーム。
なかなか忙しいゲームなので小さいお子さんには難しそうだった。
そもそもマウス操作に慣れてない子も多かったので
その場でiPadに書き出してタッチ操作できるようにして展示しました。

四子舞

Shishimai | Global Game Jam®

2人1チームでコントローラを操作して対戦する4人対戦ゲーム
大人も子供も楽しめるいいゲーム。

FORDITE

Fordite | Global Game Jam®

シンプルな避けゲー
間違いなく今日一番遊ばれたゲームですね。
1時間かけてクリアして帰って行った子もいました。

子供に遊んでもらった所感

  • マウス操作に慣れていない
    • マウスを初めて触る子もいました
  • とにかく飲み込みが早い
    • 最初はわけわからず操作してても、数回やったらもう理解してる
    • マウス操作も然り
  • タッチ追従よりドラッグ
    • 心電図パニックはタッチしている箇所に移動。という操作なんだけど、 キャラクターを何度もドラッグ移動しようとしてる子が多かった。

なるほどな〜

おまけ

f:id:naichilab:20170306003436j:plain

こっそり太陽人間も展示

f:id:naichilab:20170306003435j:plain

お父さんに単語の意味を聞きながら太陽人間を遊んでる女の子
たしなめる ってなに?
ドン引き ってなに?
JK ってなに?
お父さん困らせてすいませんでしたw

f:id:naichilab:20170306003432j:plain

1-2 Switch で遊ぶ兄弟
そら面白いよね
任天堂さすがやわ〜〜〜〜〜