5回目のゲームジャムだったが今回は色々と変則的なことが起き、
自分自身、いつもと違う体験ができたので忘れないうちにそれを報告しようと思う。

1) 福島Game Jam VR Challege

今回私のチームは「福島Game Jam VR Challege」チームということで
ゲーム作品開発ではなく、VRシステムの開発がミッションだった。

1.1)VR　＝　Oculus　となりつつある

大学ではVRやエンタテイメントシステムの研究室に所属しているので
いろいろなVRシステムに触れることがあるのだが、
VRシステムには様々なインタフェースがあり没入感を提示する大きな要因となっている。
今回は短期間での開発ということ、物理的リソースの制限ということでOculus Riftを用いて開発を行った。
というか企画の段階から「VRだしOculusだよね！」みたいになっていた。
やはり手軽さ(経済的, 技術的,,,etc)と視覚をジャックする直球な没入感提示がこの関係式を創りだしたのかなと思えた。
自分自身、「Oculus使えばVR！」みたいな考え方は少し違うと思うが
今回開発に利用してみて、ここまでバズる理由がわかったような気がした。

1.2)やっぱりゲームジャム

今回はVRシステムの開発でゲームの開発ではなかったはずだったが
やはりゲームジャムだからか、企画会議の段階でルールはどうするか、評価手法は？等
ゲームの設計の話になっていた。
時間的に実装には至らず、シュミレーターの制作となったが
時間があったら評価システムを実装をして完全にゲームになっていたと思う。
作っているうちに、周りから
「ここはVRゲームをつくっているんだよね」「これはどうやってあそぶの？」「どうやって競うの？」
等聞かれ、VRシステムなのか、HMDを使ったゲームなのかよく分からなくなった。
周りの方々は真剣に考えていたので、私の思考が脱線しすぎたのだと思う。

1.3)Oculusはリッチ

これは技術的な話
いくら技術的コストが低くても、Oculusはやはりリッチなデバイスだったようだ。
開発中、実際に動かせるPCは1台のみで、私のMacはそもそもSDKがなかった。
実際隣のチームはOculus用にデスクトップを1台用意しており、
開発にはそれくらいの準備が必要なのだと実感した。

2)手練のプログラマ5名

今回はありがたいことに私のチームは手練のプログラマが5人もいるチームだった。
これまでは3-4人程度で自分が2番手かメインに入るくらいの開発が多かったのだが、
今回はとてもスキルが高く、ジャム慣れしているエンジニアが多いチームでの開発だった。

2.1)タスク管理

普段はポストイットを使用したチケット駆動開発的な手法をジャムでは率先して採用しているが
今回のチームは明確なプランナーを設けず、各々がやりたいところをやるという
ある意味「適当」な開発方法だった。
結果、タスク管理を全くせず、プログラマ同士阿吽の呼吸で穴を埋めていくような開発となった。
これはこれで新鮮だったが、もしジャム初参加の人が紛れていたらうまく分業化出来なくなってしまうリスクが有るため、このメンバーでないと出来ない開発手法のように感じた。
やっぱりタスク管理と作業の見える化は必要だと思った。

3)Asset Serverを初めてたてた

今までバージョン管理は他のプログラマにサーバーを立ててもらい、
クライアント側から参加することだけだった。正直やり方はわかるがサーバーとか、仕組みとか理解してないことのほうが多かった。
今回のチームの方々は特にバージョン管理システムにこだわりがなく、合わせるとの事だったので
いつもやってもらっていたAsset Serverのホスト側に挑戦してみた。
参考にした資料はこちら

3.1)ファイアーウォール

サーバーアドレスを入力し、アカウントも作成したが外部からつながらないという問題が起きた。
どうやらファイアーウォールがONになっていると繋がらないらしい。その時だけ外すことで解決した。

3.2)Unity5から名前が変わった

Asset Server → Version Control

3.3)Version ControlはデフォルトでDisableになっている

Edit -> Project settings -> Version ControlのプルダウンをAsset Serverにする必要有

4)VSCodeを使ってみた

いつもいじっているが実践で使うのは初めてだった。
結果として、最後まで使い切れた(以前Sublime textで参戦した時は使い心地が悪く結局序盤でMonodevelopに直してしまった)。使っているうちに良かったところ悪かったところがわかったので報告しようと思う。

4.1)良かった点

・軽い
軽い。なにより軽い。
・補完が早い
補完の漏れも少なく、快適にコーディングできた。
・setting.jsonからいらないフォルダをバンバン非表示にしていって快適な環境を構築出来た
・検索機能も優秀でデバックも楽だった。

4.2)悪かった点

・Unityから飛ぶとnew Windowで開いてしまう
1Window1Projectなので、new Windowで開いてしまうとUnity補完が効かない。
スクリプトを編集する際はUnityからではなくVSCodeから選択して行うのがめんどくさい。
・Unityのエラーから飛ぶと、スクリプトを開くがエラー箇所をハイライトしてくれない
スクリプトと行数はUnityから指定してくれるので探せばいいのだが、ハイライトしてくれるともっと楽だと思った。

5)やっぱりワイワイやるのが楽しい

もう5回目のゲームジャム。周りの参加者には他校の友達や後輩など、
去年1月に初参加した時より環境もだいぶ変わった。
あの頃は辛かったが、わいのわいの騒いだり、ゴリゴリ開発していると
折れなくてよかったなと思う。
後輩を見ていると去年の今頃を思いだした。やり続けてよかったと思うし
これからも続けていきたいと思った。
でも懇親会で盛り上がる元気は残ってなかった(笑)
昔は懇親会が一番の楽しみでハッカソンに参加していた節もあったかもしれないが
今はそんな元気が無くなってしまったのかもしれない。
楽しそうでアツい後輩を見ているとほっこりした。

結論。
8回目のハッカソンだが、まだまだ得られるものはたくさんありそうだ。
というか自分がなくしてしまったものを探す冒険かもしれない。
その鍵になるのは、やっぱりハッカソンなのかな。

これからも頑張る。

8/25 追記
去年の福島ゲームジャムの時のブログを発見した。キラキラしてる。
ハッカソンマラソン第一弾・福島ゲームジャム

Tweet

先日のアップデートでVSCodeのバージョンが0.5.0→0.7.0となり、
かなり大きな仕様の変更がありました。

今回のエントリでは
・0.7.0で痛VSCode化
・User Snippetsを利用したUnityのスニペット

について共有します。

0.7.0では内部のフォルダ構成に大きな変更があったようです。
今まで痛VSCode化して楽しんでいたのですが、変更を記述していた
native.main.cssがmonacoフォルダごとなくなっており少し手こずりました。

じゃあ痛VSCode化できないの!?というとそうではありません
どうやら細分化されたようでしっかりmonacoの機能は生きていました。
肝心のnative.main.cssの後継者はvs->workbench->workbench.main.cssでした。

あとは以前のように画像を表示するように書き足すと
こんな風に背景に画像を入れられます。モチベも上がります。

次にkyusyukeigo氏のUnityで使うためにVidualStudio Code（VSCode）入れてやったことを参考に
Unityのスニペットを追加したのですがそこでもまた一悶着あったので共有します

スニペットとは切れ端とか断面とかいう意味で、プログラミングでは長いコードを少ない単語から貼り付けることができる機能です。それをユーザーが自由に適宜追加、消去できる機能がエディタには有ります。

具体的に言うとUnityでvoid OnCollisionEnter()とか補完が効かなくてうつのめんどくさいし間違えるリスクも有るところをエディタに記憶させちゃおう的なやつです。

上記のURLからkyusyukeigo氏がUnityスニペットをjsファイルで提供してくださっていたので、説明にそって導入すると、バージョンの変更からかうまくいかないという問題が有りました。

調べてみるとVSCode0.5.0以降から新機能でUser Snippetsという機能が追加されておりもっと簡単にスニペットの追加ができるようになったようです。

今回はUser Snippetsを使ってUnityのスニペットを実装したのでやり方を紹介します。

1)command + shift + pで機能の検索ウィンドウを表示。「Snippets」と入力して選択します。
2)言語が聞かれるので今回は「C#」を選択します。

3)csharp.jsonが表示されます。VSCodeのスニペットはjsonでやる感じですね

コメントアウトされた例文が最初に載っています。これを参考に適宜追加していくみたいです。
Unity用のスニペットをがしがし追加していきましょう。

今回、kyusyukeigo氏がGitで公開されていたjsバージョンを
僭越ながら私がVSCode jsonバージョンに書き換え、公開させていただきました。(何か問題があれば消去します)

以下のURLから閲覧、ダウンロード可能です(私のGitページです)
github.com/TsudaRyotaro/VScode/blob/master/csharp.json

4)上記URL先のコードをコピーし、VSCode上のcsharp.jsonに貼り付けます。
保存して再起動すると、スニペット機能が使えるようになっています。

ここまでカスタマイズできればだいぶVSCodeに愛着も湧いてきましたね！
アップデートで非公式カスタマイズは全て上書きされてしまうのでバックアップをしっかり取ることをおすすめします！では！

Tweet

UnityでVisualStudioCodeを使っていたら
エクスプローラーにmetaファイルも出てきて煩わしかったので消してみました。

TumblingDice 【VSCode】Visual Studio Code0.5.0の新機能まとめを参考にさせていただきました

調べてみると何やらsetting.jsonからいじることが出来そうな予感

command + shift + pで機能の検索ウィンドウを表示した後 setting と入力しOpen User settingsを選択

するとウィンドウが2分割され、左にDefault Settings,右にsetting.jsonが表示されます。
User settingsは右側、setting.jsonにDefault Settingsを参考に書き足していくという感じです。

Default Settingsの75行目付近にファイル表示/非表示関係が書かれています。
パスと名前と拡張子を指定しbooleanで値を指定します。
trueならば表示されないといった感じです。

とりあえずsetting.json側にmetaファイルを表示させないよう、おりゃりゃっと書いてみました。

“files.exclude”: {
“*.meta”: true,
“**/*.meta”: true,
“**/**/*.meta”: true,
“**/**/**/*.meta”: true,
“**/**/**/**/*.meta”: true
}

保存すると反映され、エクスプローラーからmetaファイルが消えました。

おそらくもっと賢い方法があると思いますが、ひとまずはこれで対応できたかなと思います。

metaファイルが消えてもっさり感もなくなって良い感じ
ますます捗りますねー

Tweet

Unity×VisualStudioCode連携はいい感じ
やり方について軽く解説

UnityのPreferencesから使用するエディタをCodeに設定

Unityからスクリプトを作成，右クリック->Sync MonoDevelop Projectを選択

するとVSCodeが起動．プロジェクトのslnファイルが作られる

左側のタブからOpen Folderを選択．

起動しているUnityのプロジェクトフォルダを選択．slnが2つ作られていることを確認
開いた後左下からpick a project->slnファイルを選択するとUnityの補完が効く

またGitとの連携がいい感じ
どこにもVSCode×Gitの解説が上がっていなかったので軽く解説

1)適当にgitリポジトリを作成　ローカルにクローンを作成
2)VSCodeからローカルリポジトリを開く
3)もう使える　超簡単(確か初回はgitユーザー名とパスワード聞かれる)

うまくいくとこんな感じ　左下からブランチの切り替えが可能

ブランチを選択することが可能。新規には切れないのかな？

変更があるとこんな感じに表示される　あとは適当にメッセージ書いてコミット
簡単だね

てなわけで最近は専らUnity, VSCode, Gitで開発。
Unityでのチーム開発はAssetServer派だけどgitでのバージョン管理もエディタの機能によっては楽になるね。　メモメモ

Tweet

まず初めに開発環境です

Windows8.1 Enterprise 64bit

Unity Pro 4.6.1f

wrapper to Kinect SDK 1.7 

wrapperPackageをインストールするとAssets>Script>Kinect>KinectImgControllersの中にDisplayColor.csとDisplayDepth.csが作られます。

このスクリプトをオブジェクトにアタッチすると、DisplayColorからはRGB画像が、DisplayDepthからはDepth画像がテクスチャとしてオブジェクトに貼られます。

DisplayDepth.csの中を見てみると、Update()の中にコメントアウトされた

tex.SetPixels32(convertPlayersToCutout(dw.segmentations));

があります。これは人がいるところをテクスチャとして吐き出す関数です。それのコメントアウトを外し、tex.SetPixels32(convertDepthToColor(dw.depthImg));をコメントアウトをして無効にします。

またDisplayDepth.csとDisplayColor.csの両方にrenderer.material.mainTexture = tex;の記述があるのでコメントアウトしてください。これがあるとオブジェクトに画像が張られてしまうためです。

これでDisplayDepth.csをアタッチされたオブジェクトにプレイヤー部分のみを抽出するテクスチャが貼り付けられるようになりました。

convertPlayersToCutoutを見てみると人がいるところはアルファチャンネルが255になり、いないところは0になるようです。

今回引数として使用しているdw.segmentationsはDepthWrapper.csから確認するとpixelを一つ一つ確認してプレイヤーがいたらtrueを返すような仕組みになっていおり、playerは6名まで確認することができるようです。

さて、これでRGB画像と人物情報を持った画像を生成することができました。

次に適当な背景画像を用意します。

今回は一つシェーダーを用意し、背景画像、RGB画像、人物画像を三つ重ね、人がいる部分はRGB画像を、人がいない部分は背景画像をといった処理を書いていきたいと思います。

まず実装するために必要なシェーダーMaskingShader.shaderを書きます

MaskingShader.shader

_BackTex (“Back”, 2D) = “white” {}
_MaskTex (“Mask”, 2D) = “white” {}
}
SubShader {
Tags { “RenderType”=”Opaque” }
LOD 200

Pass{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma target 3.0

//バーテックス用入力
struct vertexInput{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};

//フラグメント用入力/バーテックス用出力
struct fragmentInput{
float4 position : SV_POSITION;
float2 uv : TEXCOORD0;
};

sampler2D _MainTex;
sampler2D _BackTex;
sampler2D _MaskTex;

fragmentInput vert(vertexInput v){
fragmentInput o;
o.position = mul(UNITY_MATRIX_MVP, v.vertex);
o.uv = v.uv;
return o;
}

float4 frag(fragmentInput i) : COLOR{
float4 maintex = tex2D(_MainTex, i.uv);
float4 backtex = tex2D(_BackTex, i.uv);
float4 masktex = tex2D(_MaskTex, i.uv);
float4 output;

if(masktex.a > 0.2f){
output.rgb = maintex.rgb;
}else{
output.rgb = backtex.rgb;
}

return float4(output.r,output.g,output.b,1.0);
}

ENDCG
}
}
FallBack “Diffuse”
}

3つのテクスチャを格納し、masktexの値でmaintexを出すかbacktexを出すか判断しています。

またこのシェーダーのためのマテリアルMaskmatも用意しておいてください。

次に、このシェーダーにテクスチャを渡すためのスクリプトMaskScript.csを書きます

MaskScript.cs

using UnityEngine;
using System.Collections;

public class MaskScript : MonoBehaviour {
Texture2D color;
Texture2D depth;
public Texture2D back;
public Material Mat;
DisplayDepth ddepth;
DisplayColor dcolor;

void Awake(){
ddepth = this.GetComponent<DisplayDepth> ();
dcolor = this.gameObject.GetComponent<DisplayColor> ();
}
// Use this for initialization
void Start () {
Mat.SetTexture (“_MainTex”, color);
Mat.SetTexture (“_BackTex”, back);
Mat.SetTexture (“_MaskTex”, depth);

}

// Update is called once per frame
void Update () {
color = dcolor.tex;
depth = ddepth.tex;

Mat.SetTexture (“_MainTex”, color);
Mat.SetTexture (“_BackTex”, back);
Mat.SetTexture (“_MaskTex”, depth);
}

}

RGB画像、Depth画像両方が必要なので、双方のtexをpublicに直すことをお忘れなく。

最後にスクリーンになるオブジェクトに、

DisplayDepth.cs

DisplayColor.cs

MaskScript.cs

Maskmat

をすべてアタッチします。MaskScript.csのMatの部分には下にあるMaskmatをアサインしてください。

そして、Maskmat上にあるBackの項目に背景にしたい画像を用意して格納し、実行すると人物画像だけ切り取ることができます。

kinectのRGBカメラとDepthカメラの位置関係から少しずれが出ていますが、スクリプトで修正することはできると思います。

Tweet