ソーシャルゲームのクライアントエンジニア入門以前 というサイトを作って公開しました。
ここで公開してます。
経緯
ソーシャルゲームクライアントは、Unity自体の知識に加えて、ソーシャルゲーム特有の慣習や挙動に合わせた知識が必要になります。
それらの個別実装についての記事は十分にありますし、サーバサイドも含めてソーシャルゲームを全部一人で作ってみる本もあります。
スタートアップ・個人で作れる スマホ向けUnity ソーシャルゲーム開発ガイド
しかし、例えば独学でUnityだけを学んだ人や、スタンドアロンのゲーム畑からやってきた人がキャッチアップするための索引的な文書が見当たりませんでした。
（↑の本はある程度のサーバサイドとクライアントの事を理解している人が全体像を確認するための本で、サーバサイドが分からない人が読むにはハードルがあります）
あるいはソーシャルゲーム業界のクライアントエンジニアとして内定をもらった人が、予習として読んでおける読み物があると良いなあと思って書きました。
↓僕の気持ちです
Unity製スタンドアロンゲームを作ってた人がソーシャルゲームチームにアサインされた時にサーバネットワークなんもわからん。専門用語多すぎワロタ。死ぬ。
— izm (@izm) 2020年6月30日
となりがちなので、あまりコードが出てこない技術解説読み物の需要がある予感があります。既にそういうのあったりするのかな。
理想は「もうあるよ」だったんたけど、意外と無いことが分かってきた
— izm (@izm) 2020年7月1日
現在のステータス
目次と各項目の概要はいったん埋めました。
みなさんの提案、プルリク、issueお待ちしてます。参考文献にurlの提案、も大歓迎です！
他人のリポジトリへのプルリクの仕方、よく分からない！！(僕もそうでした)という場合も、ここからEditしてもらうと勝手にGithubのプルリクになります。便利…！
悲しい話をすると、あの辺の技術を漏れなくクライアント側が実装できても、ゲームが面白くなるか、とか売れて儲かるかとは関係ないんすよね…
— izm (@izm) 2020年7月1日
作って良かったこと
Docusaurus 便利
で技術サポートサイトっぽいものが爆速で作れることが分かりました。たのしい！ Docusaurus · Easy to Maintain Open Source Documentation Websites
自分の知識の点検が出来た
割と抜けてそうな場所に気付くことが出来てよかったです
SHOWROOM株式会社の映像配信遅延が業界最速レベルに縮まったので嬉しいという話
概要
現在僕はSHOWROOM株式会社というところでxRのクライアントエンジニアをしています。 が、SHOWROOM株式会社はライブ配信サービスを行っています。
今回の記事は、このライブ配信サービスの方でかなり面白い取り組みが行われて、世に出たので面白さをみんなに布教したいと思って書きます。
ライブ配信サービスの話
SHOWROOMは国内ライブ映像の配信サービスとしては古株で、確か6年くらいの歴史があります。
その後pixivさん(pixiv Sketch)やCyberZさん(OPENREC.tv )や、LINEさん(LINE LIVE)など、色々な会社さんがライブ配信サービスを生み出して、国内の市場は活気づいています。
配信者と視聴者間でコメントやギフティングでリアルタイムコミュニケーションを取る感じの仕組みです。
SHOWROOMの技術的負債
先ほど説明した通りに、結構古いサービスなんです。なのでまあアプリのUIを見ると歴史的な感じがあったりします。みんなが大好きな技術的負債です。
歴史があるので、エンジニアとして配信サービスのSHOWROOM見ると「なんか運用フェーズ入っているしアプリの見た目もイマドキじゃないしなあ…」みたいな点はあります。それはそう…
SHOWROOM 最近の取り組み
そんなわけで、最近は技術的負債をなんとかしつつ、新しいことにチャレンジしていきたいようね、という話がありました。xR部門がモリモリ人を集めてオモシロプロジェクトが複数走ったりしているのも、そういう経緯です。
新しい事にチャレンジという一環で、SHOWROOMの超低遅延配信化が行われました。
先に結果を書くと、配信者の映像が視聴者の端末に表示されるまでに掛かる時間が、 10秒くらいから最小0.5秒未満 になりました。
低遅延だと何が嬉しいか
僕はVTuberおたくなのでYouTube Liveをよく見ますが、配信者に人気の配信だとコメントが届くまでに10秒以上時間がかかってます。そうすると配信者が10秒前に話していた内容にコメントすることになります。タイミングが微妙です…会話がかみ合わない感があります。
この遅延は安定して多数の視聴者が映像を見るには必要悪で、現在の 普通の技術スタックでライブ配信サービスを作ると、大体遅延が10秒くらい になります。
なんで映像を届けるのに10秒も掛かるの？
映像配信を皆様のお手元に届けるまでには
配信者のカメラ映像→H264エンコード→RTMPストリーム→映像配信サーバがRTMPストリームを受取る→映像配信サーバがコマ切れのHLS形式ファイルにトランスコード→CDNにHLSファイルを配置→視聴者がCDN経由でHLSファイルを取得→映像バッファとしてビデオプレーヤーに取り込む→視聴者の端末で絵が見える！！！
という流れがあります。めっちゃ大変…
特に視聴者の手元で映像がプツプツするとまずいのでHLSファイルの取得は余裕をもって何秒か先まで取ってくる必要があったりします。
例えば1:1で接続、とか少人数相手だと上に書いたような大掛かりな仕組みが不要になって、2秒以内に映像を届けることもできます。DiscordさんとかSkypeさんとかですね！
今回の超低遅延配信実装のやべえところ
- ↑に書いためちゃくちゃ面倒くさい流れのサーバ側をゴリゴリ自前で根性実装した結果、最小0.5秒以内で映像が届きます。
- この遅延の少なさは、国内最速レベルです。(OPENREC.tvの超低遅延配信も同じくらいだったはず)
技術的にどうやってるの？という事が気になった方はこちらのスライド参照ください。
www.slideshare.net
超低遅延配信が実現すると何が起きるか
映像の遅延が少ないとコミュニケーションが早くなります。打てば響くようになります。
VTuberのおたく的に言うと、コメントして読んでもらえるまでが2秒以内になったりします。身近に感じますね。
//ZIZAIさんのIRIAMはもっと過激で、映像を送らずにモーションライブ方式、独自プロトコルを利用することで遅延が0.1秒以内です。音速より速いかも。やべえ…
余談
SHOWROOM株式会社は、技術的におもしろおかしい事を奨励する風土があります。
xR含め、エンジニア陣も頑張ってます。興味がある方、一度遊びに来てくれませんか～！！！
趣味の電子工作をする前に知っておきたかったこと
概要
数年前の自分（高校卒業程度の物理は履修しているが、趣味で電子工作をしたことがない）が読んだときに学習をショートカットするための知識をまとめておこうと思ったので書きます。
同じように電子工作を始めようとして、躊躇している人が居たら、参考になるかもしれません。 ちょうど家にいる時間が増えているこのタイミングで、技術の幅を広げるのも楽しいと思います！
- この文章は趣味レベルの電子工作で遊んでる僕が独断で書いたものです
- 高周波回路や、高電圧を扱うような工作ではなく、ホビー用途を対象としています
- 技術的な誤りがあったらごめんなさい…
このエントリに書いてある程度の理解力でも、こんな感じの事は出来るようになりました。
初めまして。
— Haritora (@HaritoraVR) 2020年5月3日
Haritoraという下半身トラッキングシステムを作っています。
ベースステーションが結構高いので、フルトラを民主化出来たら嬉しいです('-'*)#vrchat pic.twitter.com/nQstCKjmy7
よくある質問と答え
電子工作ははんだ付け難しくない？
半分正解で半分間違い。
白光のはんだごてを使うと、技術の時間で苦労したのが冗談みたいに半田付けが楽になります。
- 発売日: 2012/01/18
- メディア: Tools & Hardware
はんだ吸い取り線は不便なのではんだシュッ太郎を使うと、割と失敗したときのリカバリが出来ます。
サンハヤト はんだシュッ太郎NEO 45Wタイプ HSK-300
- メディア: Tools & Hardware
2.54mm幅のピン程度なら、はんだごてのこて先を太いものにすると、より簡単にハンダ付けできます。
こて台は金色のこれがおすすめ。だけど安い他のでも大丈夫です。
- メディア: Tools & Hardware
ユニバーサル基板にちゃんと実装するの大変では？
ユニバーサル基板っていうのはこういうやつです。
実はこの数年、ユニバーサル基板は使ったこと無いです。
深圳のPCBサービス(PCBwayやPCBGOGO)と後述のKiCADがあれば、毎回基板を起こして発注してしまえます。到着時間も数千円で1週間程度なので、週末工作も可能です。
また、試作時点ではブレッドボードで大丈夫です。 ブレッドボードはこういうやつです。
回路図に何が書いてあるかわからない
とりあえず、どこにコンデンサを入れると良い、とか抵抗の値は…みたいなのが読めなくても、結線するだけでなんとなく使えるブレイクアウトボード（breakout board）という形で各種センサーは入手できることが多いです。
ブレイクアウトボードの場合は配線も2.54mm幅になっていることが多いので、ハンダ付けもしやすく、多くの場合は繋げば動くので大丈夫です。
基板を起こすっていうとコンデンサとかも全部配置しないといけないの？
これが僕がハマっていた罠でした。 世の中には既に良い感じに配線済みのブレイクアウトボードがあるので、ブレイクアウトボードを幾つかそのまま乗せて、マイコンを乗せるための穴だけ開いて配線だけをPCB基板に作る。という作り方をしても（多少不格好でサイズが大きくなりますが）動きます。
十分コレでも楽しめるので、ブレイクアウトボードを何個か乗せるだけの基板を作ることに躊躇しないようにしましょう。そうすると出来ることが大幅に増えます。
電子工作はお金がメチャクチャ掛かりそう
それはそう…とは言え
- Arduinoなどのマイコンは互換品がAmazonとかで買える(数百円から千円程度)
- センサーの中華製ブレイクアウトボードもAmazonで買える(数百円)
- ピンヘッダやジャンパワイヤ、ブレッドボードもAmazonで買える(数百円)
- どうしても無さそうならAliexpress経由で買うことで安く買える（納期は長い）
なので、はんだごてとシュッ太郎など工具だけ揃えたら、開発環境は無料でもそろっていて、個別部品も中華クローンなどがあるので安価に作ることが出来ます。
出来上がった基板を収めるケースが高い…
実はこれも罠で、タカチ製のちゃんとしたケースとかを使うより、3万円程度の3Dプリンターを買って、Fusion360でケースを設計してプリントした方がピッタリサイズになるし、ランニングコストがそれほど掛からないので便利です。
電子回路をケースに入れずに裸で運用していると、うっかり金属に触れてショートして壊してしまう可能性も減るので、ケースを作れる環境は用意しておくと安心です。
ソフトウェアを書くのが凄く面倒くさそう…
Arduinoの標準IDEはお世辞にも高機能とは言いづらいですが、VisualStudio CommunityとVisualMicroの組み合わせや、あるいはVSCodeとArduinoプラグインなどの開発環境であればコード補完も効くので効率的に開発できると思います。
どんな学習ルートで進めば良いの？
最初にArduinoの全部入りセンサーキットとか工具を買う
Amazonで数千円です。工具は上に書いたものを揃えておけば、大丈夫じゃないかなと思います。
ミニマルに始めるならはんだごてだけでも大丈夫です！
また、ソフトウェア畑の人であれば、初めてのマイコンにM5StackやM5StickCなども良いかもしれません。
ブレッドボードで実験して動いたら、動いた回路の組み合わせをKiCADで再現する
基板を作るためのCADであるKiCADを覚えましょう。fritzingとかEagleとかより情報量が段違いなので。 以下のリンクを読んで、KiCad 5.0 / 5.1 入門実習テキスト『KiCad Basics for 5.x』を読めば大体それっぽくなります。
KiCAD上で完全に回路を再現するためのカスタムIC部品の製作、とかも手を出すとステキですが、似たサイズのピンヘッダやピンソケットを代わりに置いてしまえば大丈夫です。
また、配線を手でやらなくても配線自動生成（AutoRouting）を使うことで凄く簡単にそれっぽい基板になります。KiCADの回路図エディタを怖がらずに数時間使ってみると、 配線自動生成のお手軽さの恩恵を受けられて、すぐに投資した時間を回収できます。
ケースを作るために3D CADを覚える
非商用であればFusion360が無償です。情報がとても多いのとYouTubeの解説講座も充実しているので、おすすめです。
また、3Dプリンタは3万円程度の物でも（ケース程度であれば）十分に使えます。
ThingsverseにあるケースのstlファイルをFusion360に読み込んで、無理やり改変して取っ手を付けたりサイズを調整する、というところまで出来るようになると、一気に世界が広くなった気持ちになります。
好きなものを作る
Enjoy!
電動昇降デスクとオーダー天板で夢の作業環境を自室に構築した話
概要
自室の模様替えをする機会があり、今まで使っていた机を処分して新規に用立てたらメチャクチャ快適になったので書きます。
セットアップとしては
- 椅子（ハーマンミラーのエンボディチェア）
- 電動昇降デスクの脚（FlexiSpotのE3B）
- オーダー天板（パイン集成材）
という組み合わせになります。その他ケーブル周りの色々小道具を買いました。
掛かった費用としては、机周りで合計7万円弱くらいです。
今回の大事な点、電動昇降デスクとオーダー天板
電動昇降デスク
電動昇降デスクは、スタンディングと椅子を自由に切り替えられます。
健康志向というか、集中力を維持し続ける為に腰痛対策としてスタンディング机との切り替えが必要になりました。
手動昇降デスクでハンドルを回して高さを調整したりするのは、怠惰な僕には無理なので
- 電動昇降機能
- ワンボタンで指定した高さに切り替えられるプリセット付き
- 最低時の天板の高さを65cm以下に出来る
という3点を重視して FlexiSpotのE3B を選びました。
電動昇降デスクは選択肢が幾つかありますが、最低時の机の高さが70cmを超えていると、結局肩が凝ったり、フットレストを用意する事になります。
電動⚡️🔧
— izm (@izm) 2020年2月1日
（机高さは最小600mmまで下げられるので市販のデスクより約10cmくらい低くできる） pic.twitter.com/zx7uNgo5Cm
一般的なオフィス用机の高さは72cmですが、これは身長175cm以上の人にフィットします。僕はそこまで背が高くない…
参考
今回購入した FlexiSpotのE3Bは最低時に60cm（これに天板厚が3cmだと、計63cm）なので、多くの人にフィットすると思います。
天板
今回は幅1800mm以上、奥行き700mmの天板を想定していました。このサイズの天板がある電動昇降デスクは、市販だと結構高いのでDIYする価値があります。 （参考：オカムラ swiftで15万円程度）
横幅1820mm ：電子工作や複数PCの同時立ち上げ検証をする機会があるため、出来るだけ幅を確保したいと考えて1820mmです（今回買ったFlexispotの電動昇降デスク脚のサポートする最大幅が1800mmです）
奥行き700mm ：今まで奥行き600mmの机を自室で使っていて、不満があった部分なので10cm足しました。（職場の机の奥行きと合わせました）
多くの先人 たちが、マルトクショップで天板をオーダーしていたので、それに倣って注文しかけたのですが
【DIY】木材の天板で仕事用デスクを自作してみた｜コウノ アスヤ｜note
マルトクショップの見積もりを見たら結構高かったので、お手軽価格の物を探しました。
天板に使う木としてはスーパービバホーム豊洲でパイン集成材が1820mm x 910mm x 24mm で5980円です。いわゆるサブロク板です （この記事にあるようなスギ集成材も同じようなサイズと価格で良さそうです）
天板自体は6000円ですが送料と加工費で約7000円くらい（本体より高い！！！）です。プラス思考に考えると、加工費入れてもIKEAの送料より安いとも言えます。スーパービバホーム豊洲は神。
出来上がった後の写真
天板を一番下げた時の様子
天板が地上高63cmの場所にあります （これは身長161cm の人の最適らしいです）
エンボディチェアは肘掛けの可動範囲が広いので、天板が低いデスクでも肘掛け衝突を避けられて良いです
普段のスタンディング時の様子（椅子とのスペースに注目）
- 85cmくらいの高さにしています
- 椅子は撮影時の比較用に置いてあります。普段はスタンディングで使っている時、椅子は後ろに逃がしています。
背面の取り回し
- エルゴトロンのLXマウントアームとか、モニタ裏にPSVRコントロールボックスを貼り付けるとか、色々やってます
- 43インチモニタを作業用に使う場合は、脚を取り払って机天板にモニタ下部をベタ付けする為に、モニタアームを使うのがオススメです。モニタの上の方を見るときに、首が疲れなくなります
天板裏のケーブル周り処理
- PS4Proをこれでマウント。横幅210mmまでの制限があるのでメインPCが乗らなかった…
- サンワサプライ ケーブル配線トレーを配線隠しに使っています。ワンタッチで外せて便利。専用って書いてあるけど木ネジで固定すれば何でも使えます
サンワサプライ ケーブル配線トレー メッシュ ERDシリーズ専用 CB-CTERD5
- メディア: オフィス用品
- ケーブルまとめるのには、 このケーブルカバー買いました。ファスナーで留められて便利
天板の塗装
東急ハンズ渋谷店でワトコオイルのダークウォルナットと布の端切れ、ビニール手袋などを買って端切れをそのまま手袋越しに掴んで室内で2度塗り。
天板の梱包に使われてたプチプチが養生になるので、うっかり捨てなくて良かった…
天板の加工依頼
こんな感じのポンチ絵を用意して天板を買ったホームセンターで加工の人にお願いしました（照
まとめ
- 7万円くらいと、ちょっとの覚悟があれば、市販で買うと結構高いサイズの電動昇降デスクが手に入ります。
- オシャレなMacベースと無線で構築したケーブル少ない仕様、とかは仕事内容的に難しい人も、試す価値があります。VR関係の開発はケーブル地獄になりがち…
- 電動昇降デスクって床にPCあるとケーブルの伸び縮みやばいんじゃないかと思うかもしれないけど、天板の上下幅は40cmそこらなので、ケーブルをピンと張らずに遊びを持たせておけばなんとかなります。
- 机の横に棚が無いと、天板の上が物置になるので、まずは机の横に棚を買おう！おっきくて背が高いやつ！
以下余談
ツイッターの様子
1820x700x26mmを、やっていきます pic.twitter.com/jaI8MQN1og
— izm (@izm) 2020年2月1日
気合いを入れてます pic.twitter.com/6QJAoOtJVR
— izm (@izm) 2020年2月1日
ふぇぇ僕が買った（さっき組み立てた）電動昇降デスクの脚がタイムセールでめっちゃ安くなってる…46000円で買ったのに
— izm (@izm) 2020年2月1日
FlexiSpot 電動式スタンディングデスク 高さ調節スタンドアップワークテーブル学習机勉強机 ブラックE3B（天板別売り） FLEXISPOT https://t.co/qiKa8Y8Gyz
組み立てに電動ドライバーが必要になる
こういう安いやつで良いのであると便利です。手で回すと死んでしまう…
アイリスオーヤマさんの電動ドライバーは、USB充電出来てバッテリーで使えて便利！
アイリスオーヤマ 電動ドライバー 充電式 RD110-W ホワイト
- メディア: Tools & Hardware
その他機材
- モニタは43インチ4k
- キーボードは Realforceのテンキーレス
- マウスは LogicoolのM336
ロジクール ワイヤレスマウス 無線 マウス M336BK Bluetooth 6ボタン Windows/Mac/Android対応 M336 ブラック 国内正規品 2年間無償保証
- 発売日: 2015/09/10
- メディア: Personal Computers
- スピーカーは BOSEの Companion 2 Series III
OculusQuestハンドトラッキング実装によせて（エッセイ
概要
OculusQuestがハンドトラッキングを実装します。
それに伴って「コントローラは要らなくなる！」とか「どうせ使いものにならない！」とかtwitter上で色んな意見を見たので僕の気持ちをまとめておきます。
入力デバイスの「決定」を示す操作の歴史
タップやマウスクリック相当をハードウェア無しのハンドトラッキングでどうやるか、みたいなのは結構大事です。 （大雑把に言って）入力デバイスは「選択」と「決定」を行うためのものです。
マウスクリックやキーボード打ち込みは物理的な押し込みフィードバックがあります。これはユーザが決定をした、という意図を検出するのがかなり容易で正確です。
スマートフォンというかタッチパネルは、押し込みフィードバックが無い代わりに、ユーザにとっては「板に触れた」というフィードバックがあり、画面上の音やグラフィックの遷移によって実際に作用したのが分かるようになっています。
このスマートフォンのタッチパネルも、最初は「いや、板を指で触るだけだとキー入力が出来ないやんけ」となってましたが、フリック入力が結構使える（そして音と見た目で押したと分かる）ようになって、結構文字打ったり操作するのはハードウェア的にはタダの板であるスマホでもいける。となっているのが現在の様子です。
この「決定」を示す操作が物理フィードバック無くてもいける、というのが個人的に印象に残っています。
ハンドトラッキングや視線トラッキングにおける「決定」を示す操作
それに対してLeapMotionやOculusQuestのハンドトラッキング、あるいはカッコ良い視線入力で問題になるのが、ユーザが行う「決定」をどうやって判断するか、という点です。板に触れる、というのに比べて、ハンドトラッキングや視線入力は（多くの人が知っている）決定的な解決策が提示されていません。
HololensのAirTapや、視線入力のサッカード、LeapMotionの押し込みタップ、OculusQuestのつまんで選択、など様々な方法が試行錯誤されています。そう、今は試行錯誤のフェーズ です。
ハンドトラッキングに対するポジティブな見方とネガティブな見方
ポジティブに考えると決定時の物理フィードバックが無いスマホがなんとかなったように、ハンドトラッキングや視線入力も何とかなる。 という説があります。
ネガティブに見ると「スマホは物理的なフィードバックは無いけど板に触れるという物理的な仕組みがあったので良かった。視線入力やハンドトラッキングはそれが無いからダメ」とも取れます。
僕の考え：ポジティブ
僕の立場はポジティブです。
例えば指のめっちゃ細かい動きがセンシング出来るようになったと仮定します。
そうなると、太ももの上に指を置いたら、スマホの板の代わりを自分の太ももにすれば良くなります。
ハンドトラッキングの検出範囲が広がったら、手を胸の高さに上げなくても、手をブラリと下げた状態でも認識できるようになります。
現時点のOculusQuestに実装されたハンドトラッキングは処理速度と精度の問題で手を胸の高さに上げて、大きな動きが必要だから、疲れるとか実用的ではない。と言う話に対しては、同意します。
でもiPhoneのタッチパネルがありえん精度（とソフトウェアの良さ）で普及したのと同じで、精度が良くなれば解決する問題なら、それは解決される可能性を見越しておく方がお得、というのが僕の考えです。
もちろん、それが一年後なのか百年後なのかはおいておいて…
という感じのことを深夜にツイートしてたんですが、まとめておきたくなったのでまとめました。