NAKEDのインターンに参加してきた

8/5~8/15まで約2週間、株式会社ネイキッド(Naked Inc.)の実務インターンに参加させていただきました。

そのインターンで学んだこと、感じたことなどをまとめたいと思います。

 

株式会社ネイキッドとは

NAKEDは、空間全体を演出するクリエイティブカンパニーです。

具体的には、映像による空間演出やインスタレーションプロジェクションマッピングなどを行っています。これらの業界で有名なのは、チームラボとかですね。

元々はドラマのタイトルバックや、ミュージックビデオとかの制作を行っていたそうですが、最近は上記のような空間演出系のこともされているようです。

 

 

インターンに参加したきっかけ

僕は大学に入ってからプログラミングにハマり、色々開発・制作をしていますがVR・AR系の開発を結構しています。VRといえばHMDというのが今の時代だと思いますが、HMDの映像は3DCGです。さらに、ユーザーの行動によって映像が変化するのが普通なため、インタラクティブ3DCGです。僕自身もそういったHMDの映像を作っていました。その後、インタラクティブアートに出会い、自分がやっているVR/ARという分野に近いインタラクティブ3DCGによって、幻想的な空間が作り出せることを知り、いつか現実空間とコンピュータ世界の空間の境界を超えた作品を作ってみたいなと思っていました。

そんな中、テレビCMで興味深いものを目にしました。石原さとみさんが出演している、フレアフレグランスのCMです。

このCMの演出が面白いなと思い調べて見たら、花が舞うのは映像編集ではなくインタラクティブプロジェクションマッピングだったのです!

で、これを作っているのがNAKEDでした。NAKEDについて調べてみるとインターンシップを募集しており、

プロジェクションマッピング、AR(拡張現実)といった既存の表現にとどまらない空間を創造していきます。
映像表現がモニターのフレームを越えてリアルな空間に広がって行くにつれ、多様なデバイスをコントロールしたり、新しい表現の追求のために、それを実現するツールを生み出す技術が必要とされています。 

と記述がありました。僕は「これだ!」と思い、すぐにインターンシップの応募をしました。 

 

 

インターン選考

流れとしては、エントリーシート提出→面接→採用と一般的なものでした。

エントリーシートは、大学などの基本情報に加えなぜNAKEDのインターンに参加したいかを書いたと思います。

面接はSkypeで行っていただけました。NAKEDのインターンになぜ参加したいか、自分の経歴や経験はどんなものか、インターンで何を学びたいかなどありきたりな質問でした。

面接したその日のうちにインターンシップ採用のメールをいただきました。

テクニカルディレクター(メディアアートプログラマー)として参加することになりました。

 

 

業務内容

NAKEDは、大きく分けてblue、green、redの3チームに 別れており、blueが事務や企画(?)など、greenが映像の制作やインタラクティブ機能の作成など、redがNAKEDの核となるシステムの開発を行う、といったように別れているようです。

僕はredチームで働きました。概要としてはgreenチームの人が簡単に制作をできるようにするシミュレーションシステムの開発や、既存映像ツールでは制作困難なものをグラフィックプログラミングによって制作可能にし誰でも簡単に使えるツールにするなどを行いました。

 

 

インターンで学んだこと、感じたこと

  • オブジェクト指向のコーディングをもっと学ぶべき
    • インターフェースやイベントなど、オブジェクト指向の特性や能力をもっと生かしていくべき。そうすることで、クラス間の依存関係を薄めることや、機能拡張性、修正容易性が大幅に向上する!
      オブジェクト指向のコーディングをもっと学ぶには、既存の各クラスやメソッドを積極的に利用すべし。リファレンスを軽く眺めるのも1つの手。既存のものを利用すると、バグも少なくなり(リファレンスなどがあるため)誰にとってもわかりやすい。
    • 汚いコードは読むだけで一苦労と痛感。結局何をしているかが伝わらないこともある
    • クラスを分けることで頭の中も整理できる
      • 各クラスの役割を明確に定めることで、そのクラスで何を担当すべきか、データをどのように扱うが変わってくる。
  • 様々な視点から書いたコードを観察する
    • エンジニアでない人が使うツールの作成を行ったために、どうすれば使いやすいか、人的なミスをなくし自動化できるかを、かなり考えた。
      それにより、将来的に機能拡張をするときにどんなことが考えられるか、必要なデータがない時の処理やエラーハンドリングをどうするかなど、普段とは異なった視点からコードを観察できた
  • コーディングとリファクタリングを短いスパンで回す
    • コーディングをして一段落したら、放置せずに出来るだけ早くリファクタリングをすべき。コードが膨大になってしまうと、理想的な設計にするのは不可能だと思う。できるとしても、ほぼ作り直し
  • 勝手に自分の中のフィルターを作らない
    • グラフィックの動き・綺麗さ、既存アルゴリズムの使用による限界など、「現状の手段では難しい」とか、「こんなものかな」など、現状に満足しないようにすること。何か少しでも気になるところがある場合は、何らかの解決手段を探し検討すべき。
      それが、繊細なところまでこだわりぬく事につながり、素晴らしい作品作りには不可欠である
    • 繊細な調整や、処理負荷を考えられるのはエンジニアのみ。すなわちこだわり抜くことができるのもエンジニアにしかできない醍醐味。
  • グラフィックプログラミング、GPGPUは面白い!
    • パラメータ1つで出てくる絵が大きく変わることもあり、奥が深い
    • GPGPUによって多量並列実行が可能であるため、膨大な量のシミュレーションが可能
      →圧倒的な映像美をプログラミングで魅せれる

 

 

感想

コーディングに関しては、ほぼ自分で考え自分で思ったことばかりを書きましたが、やはり他の人にとって読みやすくするなり、他の人が使いやすいものにするなりと、他人を意識することで、良いコードが身についていくと思いました。

また、グラフィックプログラミング、グラフィックエンジニアリングの面白さを実感しました。想像している通りになるまでこだわり抜くこと、CGに関する知識や様々なツールを利用することで、未知なるものを生み出すことができると感じました。

僕もいつの日か、誰もみたことのない未知なるものを生み出してみたいものです...。

 

株式会社Aimingのインターンシップに行ってきた

3/25 ~ 3/29までの1週間、株式会社Aimingのエンジニアインターンに参加させていただきました。

今回はそのことについて書きます。

 

Aimingとは

Aimingはオンラインゲームの企画からプロデュース・開発・運営までを行なっているゲーム会社です。

制作タイトルで有名どころだと剣と魔法のログレスなどがあります。剣と魔法のログレスは運営元は株式会社マーベラスとなっていますが、開発はAiminigが行なっています。

f:id:IKEP:20190331172111j:plain

 

 

インターンに参加したきっかけ

大きく分けて2つ理由があります。

プロの現場でコードを書いてみたい

私は前々からインターンに参加し、プロのエンジニアの現場を体験したいと思っていました。Aimingインターンに参加する1ヶ月ほど前に任天堂のインターンに行きましたが、プログラミングはしていません。なので、実際にコードを書くインターンに行きたいと思っていました。また、コードを書くのは個人でもできますが、自分の周りにCG関連のコーディングに強い友人がいないため、プロの現場なら学べるのではないかと思ったからです。

 

Webの知識を活かせるゲーム開発をしてみたい

私はアルバイトで開発の仕事をしていますが、そこでWeb系の知識をある程度身につけました。

一方、私の興味のある分野がVRやCG関連であるため、ゲーム会社のインターンをしてみたいと思っていました。今の時代、多くのゲーム会社がスマホゲームを作っています。そして、そのほとんどがオンラインゲームです。しかし、それらのゲーム会社のインターンの募集を見るとほぼすべて、クライアントとサーバ側でカリキュラムや日程が分けられています。しかし、Aimingインターン募集の時点でそういった区別がありませんでした。

実際に会社でオンラインゲームを開発するなら、私はお互いのことをある程度理解しておくべきだと思います。そうすれば、お互いのことを考えた開発ができます。Aimingはゲーム開発のみではなくWeb技術なども含む、技術的多様性のあるインターンを体験できると思ったからです。

 

 

インターンの内容

私が参加した回だけかもしれませんが、インターン生は私1人でした。しかし、チーム開発の手法を教わり、擬似的に実行していました。その中で社員さんからのアドバイスやフィードバックを受けつつ、ひたすら開発を行なっていました。

制作物としては、ドイツの2人対戦型のボードゲームガイスター」をオンラインゲームとして作りました。ユーザの作成&ログインからゲームルームの作成&参加、対戦相手とのマッチング、対戦準備処理、ゲーム操作、ゲーム状況の更新&提示、勝敗判定までオンラインゲームの基本となるものを一通り作成し、独自にオリジナル拡張機能の作成もさせていただきました。

最終日にはコードレビューを行なっていただき、これから自分が改善していくべき課題やプロのゲームエンジニア目線の考え方などを教わりました。

 

 

インターンで学んだこと・学ぶべきと感じたこと

いかなる時もコーディング前の設計を大切に

今回のインターン生が私1人だったこと、開発速度を向上しインターンでもっと学びたいという思いから、私はコーディング前の設計を軽視してしまいました。結果、複雑な処理の実装時にどうやって作るべきかを悩んでしまいました。そして、無理くりな手法で実装したことで、コードが汚くなり、挙動も不安定なシステムになってしまい、後々修正する羽目になりました。

チーム開発の時は設計をしないと、チーム全体での実装方針が決まらないため、設計はきちんと行なっています。しかし、私は1人開発の時に開発速度を優先することにより、設計を軽視する側面があることに気づきました。今回のように開発速度を優先して設計を軽視しても、修正作業が入ってしまい、結果全体で見たときの開発速度は落ちてしまいます。

1人の開発でもチーム開発と同じです。1人開発はいわば、「過去の自分、今の自分、未来の自分とのチーム開発」なのです。

 

常に綺麗なコードを書こう。プロのコードは綺麗だよ。

  • 設計の話と絡む話ではありますが、設計がしっかりすれば綺麗なコードを書けるはずです。
  • 実装方法に悩んだ時は、すぐに無理くりな方法を実装しないようにすべき。周りに相談したり、より良い方法がないかを調べるようにする。
    結果、チームメンバーのコードのより深い理解につながるし、新たな技術の習得にもつながる。
  • 綺麗なコードを書くことは結果として、開発速度の向上や、機能拡張をする時にも役に立つ(長いスパンで考えた場合だけでなく、短いスパンの場合でも)
  • コピペをしない。コピペをすると、その機能に最適な処理でない可能性が高い
  • デフォルトで用意されている機能がないかを調べる。すでに用意されているものがある場合、自分で作るのは時間の無駄&他人は理解しづらい。一番理解しやすいのはコードを書かないこと!(この辺はリーダブルコードにも書いてあったような気が...)

 

オブジェクト指向型言語ならではのコーディング手法を身につける

  • MVCモデルを意識し、きっちりと処理を分ける。
    Viewは極力データを持つべきではない。
  • オブジェクトごとに細かくクラスを分け、機能拡張を容易に行えるコーディングを心がける
  • Unityの場合、何でもかんでもMonoBehaviourを継承するのをやめ、Unityの機能を本当に必要とするものにのみ継承すべき。こうすることで、Unityを使わないプロットフォームでの開発に利用できる。ロジック系のクラスは特に。
  • オブジェクト指向エクササイズのススメ」の9つのルールなどを参考に
  • ReactiveXとかは非常に便利

 

重たい処理を極力避ける 

  • ゲームはパフォーマンスが大事なので、CPUや, GPU, メモリのことを考えたコーディングを心がける
  • どれが重たい処理なのかを理解し、使うべき時を考える。初期化時に行なったり、本当に必要な時にのみ使用する。少なくとも、ループする関数では使わない。チリも積もれば山!
  • デフォルトで配置しておくオブジェクトを少なくする。多いと、データの読み込みに時間がかかってしまう。必要な時にコードから生成しよう
  • 定期的に、どこか重い処理がないかを確認しよう。

 

定期的に振り返ろう 

KPTというプロジェクト振り返り手法を学びました。

Keep: よかったこと、これからも続けていきたいこと

Problem: 悪かったこと、今後はやめること

Try: Problemをなくすために具体的にこれから行うこと

これらを書き出し、短いスパンで定期的に振り返りを行うことで、プロジェクトの改善を加速することができるそう。

参考:

【徹底解説】正しい「KPT」が仕事の成果を生み出す!進め方のコツ、現場の事例を紹介 | SELECK [セレック]

 

 

感想

 自分の周りにはCG関連に詳しい友人がいないので、なかなか他人にコードを見てもらう機会がありません。そんな中、今回のインターンで自分のコードを見てもらったことで、自分のコードの何がダメで何が良いのかが明確になりました。

個人開発では絶対に経験できないことを学べたので、非常に良い体験でした。

 

 

 

VR作品「I AM MAN」がISCA2018で佳作賞を受賞しました

研究室の実習の1つとして、VRコンテンツを作成して、INTERNATIONAL STUDENTS CREATIVE AWARD 2018 (ISCA2018)に応募することになりました。応募するとノミネート作品として選出され、本大会に招待されました。さらに、本大会では佳作賞を受賞しました。

今回はその制作過程を書きます。

 

INTERNATIONAL STUDENTS CREATIVE AWARD 2018とは

INTERNATIONAL STUDENTS CREATIVE AWARD(ISCA)は大阪で開催されている、国内、国外の学生を対象とした国際的なクリエイティブアワードです。作品を募集し、表彰するだけでなく、若い才能を発掘し、社会や海外との交流を提供し、人材育成に貢献しているそうです。

国内映像部門、海外映像部門、デジタルコンテンツ部門と3部門あり、私はデジタルコンテンツ部門に応募しました。

今年は国内172作品、海外121作品、計293作品の応募があったそうです。

f:id:IKEP:20181211165150j:plain

 

企画

実習の一環なので、VRコンテンツということは決まっていました。

そこで、VRでできたら面白いと思うアイデア(キーワード)を出していきました。

ある程度アイデアを出した後それらを見ていくと、「充電器(充電される感覚)」、「腕からビーム」、「アイアンマン」、「壁破壊」「体が重くなる」といったキーワードがありこれらを融合した物を作ったら面白いのではないかと....

とりあえず、これらを組み合わせてメンバーにプレゼンしたのが↓

f:id:IKEP:20181209194920p:plain

f:id:IKEP:20181209194951p:plain

この後、先生や他のメンバーからの意見を受け考えた具体的な実装案が↓

f:id:IKEP:20181209195409p:plain

(企画時にニンテンドーラボ ロボットキットが販売されたこともあり、少しゲーム性の参考にしました 笑)

 

最終的な作品の企画としては、

「体験者がパワードスーツを着たヒーローになって、飛んでくる障害物をパンチやビームで破壊していく」というものになりました。

そして体験者の行動量に応じてパワードスーツのバッテリー量が増減し、それと連動して実際に自分の体が重くなったり、パワードスーツが充電され実際に電気が流れるような感覚を提示するといったようなものを実装することにしました。

 

 パワードスーツのアイデアがアイアンマンからきていることから、作品名は「I AM MAN」(アイアムマン)にしました(ダジャレやんけ.....笑)

 

制作

企画は6月ごろに行っていました。7月はテスト期間であったため全然活動できず、8月から制作を始めました。

ISCAの前に、大学としての展示が9月初旬にあったので、約1ヶ月の制作の制作でした。

1ヶ月の成果がこちら↓

 

 

 

僕はメインプログラマを担当したので、Unityによるゲームの実装全てと感覚提示デバイス群との通信を担当しました。

 

そして大学の展示で初披露

f:id:IKEP:20181210180145j:plain

f:id:IKEP:20181210180206j:plain

多くの方に体験してもらい楽しんでいただけた一方、改善点も多く見つかりました。

 

大きな改善点としては...

- 感覚提示デバイス

・感覚提示デバイスの着脱に時間がかかる

・激しく動いた時にデバイスがずれる、外れるなど

・体を回転させた時に、デバイスのコードに体が絡まる

 

- ゲーム性

・初心者にはゲームがむずすぎる

・パンチのタイミング、パンチ出来たのかがわかりにくい

・操作法がわかりにくい

 

などが挙がりました。

そして本番のISCAに向けて1ヶ月ほど、ブラッシュアップを行いました。

僕が担当したゲーム性については、

 

チュートリアルモードの作成によって、操作性やパンチのタイミング、ゲームレベルに慣れるように

・パンチのヒットがわかるように、スコアの表示&エフェクトの修正

・デバイスのコードに体が絡まらないように、ゲームのアルゴリズムの修正

 

などを中心に大まかな改善を行いました。

そして完成!!

 

 

 

 

システム構成

全体のシステム構成は以下のようになっています。

f:id:IKEP:20181215143234p:plain

 

自作ハードウェアの構造はこんな感じ

・関節制御デバイス(空気圧人工筋肉)

f:id:IKEP:20181215143456p:plain

 

・靴型デバイス

f:id:IKEP:20181215143546p:plain

 

ゲームとハードウェアの通信や、大きな負荷をかけるのに苦労しました...

 

 ISCA本大会に参加

準備日も含めて3日間で開催されました。

1日目は、準備で終わり。

 

2日目は、朝の開場前に審査員の方々へのプレゼンから始まりました。

体が重たくなるという感覚提示を行い、それをゲームと連動させる。

体験者が何も意識しなくていいように自然に感覚提示を行う。

ソフトウェアとハードウェアの利点、欠点を補い相互作用を考えた設計工夫

などをアピールしました。

f:id:IKEP:20181211174019p:plain
f:id:IKEP:20181211174101p:plain

 

数時間後、佳作賞を受賞しました🎉

審査員の方からは、「非常にチャレンジングな作品だった」とのこと。

おそらく、「ゲーム進行によってプレイヤーが不利になっていく新しいゲーム性」や、VR分野で困難な部類の、重力強化」に挑戦したからだと思います。

 

授賞式の後は、映像部門の作品上映を行ったり、参加者で交流会をしたりして2日目が終わりました。

3日目はずっと展示を行っていました。

 

「I AM MAN」を制作&ISCAに参加してみて

真っ先に思ったのは、私たちはゲームのグラフィック完成度が低いと思いました。他の方の作品はどれも高グラフィックでかつ、個々人の「思い」が込められていました。

ゲーム部分の制作を私一人が担当だった(他に担当できる者がいなかった)ことから、グラフィックについて深く話せなかったことが反省点ですね。

作品制作において、グラフィックはそれだけで評価に値する要素だと思うのでもっとクオリティを上げれるようにしたいです。

 

また、作品に「思い」を込めることが、自分の作品を見てくれた人を魅了すると身を持って感じました。私自身、今までの作品に「思い」がこもっていないということではないですが、その「思い」の大きさが違うなと感じました。

例えば、障がい者の方のためだったり、何かを知ってもらいたいとか、自分の個性を埋め込んだり...

私も作品を通して、誰かを魅了しその人の原動力となる作品を作っていきたいと、心から思いました。

 

まだまだ、ISCAで得たものは多いですが書ききれないのでこれくらいに...笑

今回の受賞で満足せずに得たことをバネにして、これからもさらに上を目指していきます!

最後になりましたが、関係者のみなさま、体験していただいた方々、ありがとうございました。

UnityでGitHubとGit LFSを使ったバージョン管理初期設定まとめ

Unityで扱うデータサイズは(画像や音声などがあって)大きいため、UnityのプロジェクトをGithubでバージョン管理するのは、ちょっとめんどくさい印象がありました。

新しいプロジェクトを作るときは、いつもいろいろ調べながらGit管理のセットアップをしています。

いちいち調べるのがめんどくさくなったので個人的にベストだと思った、新規Unityプロジェクトのgit管理初期設定をまとめておきます。(あくまで個人的なまとめです)

 

  1. Unityでプロジェクト作成
  2. Unityの「Edit」→「Project Settings」→「Editor」で以下を設定
  3. ブラウザでGitHubにアクセスし、新規のリポジトリ作成。readme, gitignore, gitattributesはまだ加えない
  4. ターミナルで 「git init」
  5. ターミナルで 「touch README.md」
  6. READMEの内容書き込み
  7. ターミナルで 「touch .gitignore」
  8. gitignoreに以下書き込み
  9. ターミナルで 「git lfs install」
  10. ターミナルで 「touch .gitattributes」
  11. attributesに以下書き込み
  12. ターミナルで 「git add .」
  13. ターミナルで 「git commit -m "メッセージ"」
  14. ターミナルで 「git remote add origin <ブラウザで作成したリモートリポジトリのurl>」
  15. ターミナルで 「git push origin master」

 

これで、容量が大きいファイルはGit LFSによって、Large File Storageに保存され、unityプロジェクトがgit管理できます。

あとは開発していくのみ💪

 

 

参考:

Git LFS

IKEPのwebサイトができました!!

前々から自分のwebサイトを持って見たい!と思っていました。

しかし、自分はweb系を専門にしているわけではないのでレンタルサーバなどはちょっと...

そんな中、Google App Engine(GAE)とDjangoPythonを学習する機会がありこれを使ってwebサイトを開設できるのではと思い、やってみました。

 

完成したwebサイトはこちら

 IKEP

ドメインも取得しました♪

 

Development

HTML/CSS

JavaScript

WebGL(Three.js)

Python3

Django

Google Cloud Platform(App Engine, Cloud Storage, Cloud SQL)

 

サイトデザイン

GAEとDjango,Pythonを使って開発するのは良しとして、どんなデザインのサイトにするかをまず考えました。WordPressAdobe Dreamweaverなどの使用も考えました。

しかし、エンジニアとしてのサイトを作るので、コードは全部自分オリジナルで書こうと思いました。

 

ただ、どんなデザインが良いのかわからないので、いろんなサイトを見ました。結果、カードベースのデザインにすることにしました。

考え中のデザイン案↓

まだカードベースのサイトにするだけで背景画像や色などは考えていませんでした。

f:id:IKEP:20181104222846j:plain

ホーム画面の例

(だいたい思い通りに作成できたかと....^_^)

 

 

とりあえず骨組みの制作

前述したようにサーバーはGoogle App Engineを使用しました。サーバー実装にはPython+Djangoを使用。 PythonDjangoも全く知りませんでしたが、Django公式のチュートリアルが非常にわかりやすくなっているので、サーバー側はなんなく実装できました。Pythonの学習にはPython-izmのサイトを使用しました。

 

フロント側のHTMLとJavaScriptについては問題なかったですが、CSSについてはちゃんと使ったことないので、軽く学習してからフロント作成をしました。

 

ここまでで先ほど↑の画像のような形にはなりました。

 

本格的に開発(こだわったとこ)

ここまでで8割型完成しましたが、もう少しこだわりました。

こだわったことの一つ目は、スマホへの対応です。

対応の仕方としてはレスポンシブ・デザインで行いました。

単純に表示画面のアスペクト比などによって文字サイズを変えたりしています。

 

f:id:IKEP:20181104230443p:plain

f:id:IKEP:20181104230517p:plain

Productページがわかりやすいです。縦画面では作品が縦に並び、メニューバーが3本線(ハンバーガーメニューっていうのかな?)になっています。横画面では作品が横並びでメニューの内容が見えています。

 

こだわったことの二つ目は、管理者ページの作成です。

管理者用ページを作成し、そこからGUIGoogle Cloud SQLの内容を読み取り、変更できるようにしました(Djangoの機能ですけどね 笑)。これでNewsを更新したいときに、いちいちHTMLをサーバーにデプロイする手間を省きました。

また、Contactページからの連絡は、僕にメールを送る前に、CloudSQLにデータを保存するようにしました。

 

f:id:IKEP:20181104231910p:plain

 

 

こだわったことの三つ目は、WebGLの使用です。

 サイトのデザインクオリティを上げることを考えたときに、どんなデザインコンセプトのサイトにするかを考えました。

自分の専門はXRや3D, CG, インタラクティブなので、その雰囲気を組み込んだオリジナルデザインにしたいと思いました。

そこで調べたらwebGLを見つけました。webGLとはウェブブラウザでインタラクティブCGをレンダリングするJavaScript APIです。

これを見た瞬間、これだ!!ってなりました 笑

しかもThree.jsというライブラリならコードもめっちゃシンプルで簡単!!

軽く勉強しただけで使えるようになりました♪

 

今回、背景とホームのIKEPロゴに使用しました。

f:id:IKEP:20181104233232p:plain

背景は、3Dという奥行き感とCGの基礎であるポリゴンワイヤーフレーム、僕が好きな幾何学模様をコンセプトに作成しました。また黒背景にすることで、エンジニアが好きな黒背景エディタの雰囲気も組み込みました♪

*背景全体にcanvasを広げる方法はこちら

 

IKEPロゴはJS内でI,K,E,Pそれぞれの3Dモデルを作成して表示させました。クリックすることでパーティクル発生&アニメーションするという遊びを入れ、CGアニメーションインタラクティブ性を組み込みました♪

f:id:IKEP:20181104234312p:plain

 

一応、webGL非対応のブラウザにも対応してます...

CSSのz-index要素を使いHTML全体の重ね順を指定することで対応しました。

後ろから、

 

ただの黒背景

webGL背景

サイトの各要素

 

と並べることで、webGLが無効時は「ただの黒背景」が見えるという風になっています。ちなみにこれでJavaScriptの無効にも同時に対応できました。

js無効にした時の表示↓

f:id:IKEP:20181105001114p:plain

 

 

GAEにデプロイ

 GCPのサイトDjangoのデプロイ方法が書いてあるので、これの通りにやれば問題なくできます。

ただ、最近GAEのstandard環境でPython3が使えるようになったので、この辺だけこちらのサイトを参考にしました。

 

 

まとめ

念願の個人webサイトがもててかなり嬉しいです♪

GCPを使うと、サーバーメンテナンスやセキュリティなどもGoogleにお任せできるので、非常に簡単でした

ただ、webGLでのクオリティ上げとサイトの読み込み速度の調和を取るのがなかなか大変でした。

 

今まで、このブログを僕のエンジニアサイト的な感じで使ってましたが、自分のwebサイトでできるのは良いですね!

もしかしたら、webサイトに自作ブログを実装してこのブログを使わなくなる時がくるかも? 笑

一つだけ言えるのは、僕の中でこのブログの扱いが「エンジニアサイト」から「本当のブログ」に変わることですね.....

 

 

コロプラ勉強会に行ってきた


ある日突然サマーインターンシップに応募したからか、ゲームプログラマー向け勉強会&座談会に来ませんか?とコロプラから連絡をいただきました。
いろいろ悩んだが、大学の授業もちょうど休みだったので参加させていただきました。
てことで行って来たので、学んだことをメモ程度に書いていきます

f:id:IKEP:20181006140937j:image

 

イベント全体の流れ

会社説明&勉強会→オフィスツアー→コロプラ若手エンジニアとの座談会
会社説明とオフィスツアーはざっくりとした感じで、勉強会と座談会が中心でした。

 

勉強会&座談会
勉強会では白猫プロジェクトを題材に、コロプラ流の開発手法を話されていました。
座談会では1グループ6人に1人若手エンジニアが付き、1人あたり25分×3人でした。
7グループあったので、3/7人の方と話しました。


勉強会&座談会と質疑応答などで学んだこと


コロプラ流ゲーム開発手法(題材:白猫プロジェクト)

- 開発フローは「プロトタイプ版開発→承認→α版→β版→βテスト→リリース」

 

- プロトタイプ版開発

  • 考えたゲームが面白いかどうかを確認するために仮として作成
    ラピッドプロトタイピングによって「とにかく速く、多く」試作品を作成。デザインは仮のものでOK
  • 「ゲームとしての新規性」、「ユーザーに受けるのか」、「面白いか」といったことが足りなければボツに。(白猫プロジェクトはもともと2Dゲームだったが、新規性を求めて3Dになったらしい)
  • 面白いと思って考えていたゲームが、実際に作ってみると面白くない時がある
    →早い段階でラピッドプロトタイピングを行うことで面白いと思ってもらえるものを見出す

 

- 承認

プロトタイプを作成し会社からの承認をもらえたら、リビルド

- α版開発

  • ゲームに必要な各要素(ステージ選択メニュー、バトル、ガチャ、マルチプレーなどなど)を作成していく
  • これらの各要素ができているのがα版(各要素の連携はβ)

 

- β版開発

  • α版で作成した各要素をつなげ、ゲームを繰り返しプレイできリリースできる状態にする
  • βテストを行った結果、改善&デバック&ブラッシュアップ

 

- βテスト

  • プロジェクトチームでのデバック
  • 実際にプレイしてもらう環境でのテストが重要
  • ゲームをしてもらう人を増やしていき、最終的には全社員にやってもらう
    →チーム内では思いつかない改善点やバグ&クリエイター以外の人からの意見などを修正&デバック&追加
    →何回も繰り返すと、指摘が鋭くなりゲームが洗練されていく

 

その他
  • コロプラではVRゲームはUE4で制作。UnityよりもUEの方がクオリティが出しやすい(クオリティ優先?)
  • 通信負荷軽減のために、次のステージやミッションで必要なデータをゲームプレイ中の裏側でダウンロード
    →通信時間が短いように感じさせる
  • 敵AI実装について
    • フレンドのAIは、最初は賢かったけど強くて敵を全部倒してしまいユーザーが何もしなくてよくなるので、バカにしてユーザーが頑張るように
    • 最初は、勝てるけど強いもので作成=>そこから弱く(最初に弱く作って強くするのは難しいから)
    • ユーザーに体験してほしいことを考える=>AI実装(いっぱい倒す快感を与えたいなら=>多数の雑魚キャラが集まってくるように)
  • 学生のゲームに求めるのはクオリティよりかは、ユーザーに面白いと思ってもらえるか
  • ゲームが重たい時に役立つ=>Unityプロファイラー、Xcode Instruments Time Profiler
  • gitができないと、仕事できない。音声など重たいデータはgitのモジュールとか利用
 

感想

  • ラピッドプロトタイピングは有用だなと思った。ただ、学生にはしんどいなってのが本音...
  • ゲームの進行に合わせて作成していくのではなく、各要素をバラバラに作成するのは新鮮だった。チーム開発において、ゲームの進行に合わせての作成は開発速度が遅くなるのはわかるけど、個人開発にも使える制作手法なのでは...
  • プロトタイプ、α、β、の各開発段階の様子を見せていただけたが、プロトタイプでそれなりの形になってて驚いた。また、βテストでの指摘例がかなり細かいとこまであったので、さすがプロだと感じた。
  • 実際のプレイ環境でのテストの一例で、「通信テストのために山手線に乗ってぐるぐる回りテストした」とあり、面白いと感じつつも、とことん突き詰める姿勢にプロだと感じた。
  • VRをUEで作成は意外だった。Unityを使っているのは知っていたが、UEも使っているとは....。(UE勉強しなければ...笑)
  • 私もgitを使っているが、もう少ししっかりやっとくべきかも....。ゲーム以外でも使えるし

 

おまけ

RGBカメラ画像処理による関節角度推定

大学の画像処理の実習で、実験の課題が出されました。

実験の内容としては、「今まで学習したことを使って、実験する価値のある画像処理プログラムを作成する」ことです。「実験する価値がある」というのは、すでに実現できるとわかっているものではなく、実験してみないとわからないものということでした。

 

そこで私はRGBカメラによる人間の関節角度推定システムを作ることにしました。

普段、開発をしていてRGBカメラしかない状況で、「深度センサーを組み込んだRGB-Dカメラのような距離情報を取得できるカメラがあれば…」ということが多々あります。例えば、iPhoneアプリ開発で、iPhoneのカメラを使ってセンシングする場合など.....

Kinectのような深度センサーが組み込まれたRGB-Dカメラなら関節推定はできる(と思う)のですが、RGBカメラでは普通にはできません。

 

 

システム構成

今回は腕の関節角度推定をしました。

肌色領域抽出とテンプレートマッチングがベースのシステムになっています。

 

簡単な流れとしては、

1. 上腕と前腕部分をテンプレート画像として抽出

2. 腕を任意の角度に曲げて角度推定開始

3. 上腕と前腕部のテンプレート画像から腕の状態の候補となる合成画像を生成

4. 角度推定を開始したときのフレーム画像と3の合成画像を肌色抽出し、2値化

5. 4で生成した二枚の画像でテンプレートマッチングし類似度計算

6. 3で肘関節、肩関節の角度を変えながら3~5を繰り返す

7. 最も類似度が高かった時の合成画像の状態を推定結果として出力

となっています。実際の画像で見ていきましょう↓

 

1. 上腕と前腕部分をテンプレート画像として抽出

マウスドラッグで赤色の枠を出し、画像切り出し部分を選択します。

f:id:IKEP:20180805142001p:plain

切り出した画像が↓

page6image1768224  page7image1772480
 

 2. 腕を任意の角度に曲げて角度推定開始

適当に腕を曲げて角度推定開始です。今回、角度推定開始はキーボードのpキーを押したら始まるようにしました。

 

3. 上腕と前腕部のテンプレート画像から腕の状態の候補となる合成画像を生成

一度、上腕に対して前腕部を回転させた画像を生成し、その画像全体を回転させています。その結果の合成画像が↓

f:id:IKEP:20180805143821p:plain

前腕部回転により肘の回転、そのあとの画像全体の回転によって肩の回転の候補を作成しています。

 

4. 角度推定を開始したときのフレーム画像と3の合成画像を肌色抽出し、2値化

合成画像に対して肌色領域抽出して2値化したものです↓

f:id:IKEP:20180805150155j:plain

 

5. 4で生成した二枚の画像でテンプレートマッチングし類似度計算

6. 3で肘関節、肩関節の角度を変えながら3~5を繰り返す

7. 最も類似度が高かった時の合成画像の状態を推定結果として出力

 

 

プログラム

以上のことをプログラミングしたのが↓

Visual StudioC++OpenCVで実現しています

今回は腕の肩側が左側に、手のひら側が右側でカメラに映るのを前提にしています。

 

 

 

動かしてみる

コンソールに出力されてる文字が見にくいですが…

肘関節角度は肘の開き具合です。肘を曲げずに腕がまっすぐなら180度、完全に曲げたら10度(?)です。

肩関節は腕を水平にしている状態が0度、そこから下に降ろした状態が-90度、上にあげた状態が90度です。

 

まとめ

色々試行錯誤して作った結果、そこそこいい感じに推定できているのではないかなと....

ただ、計算速度が遅すぎるのは問題ですが....笑

やっぱ、RGB-Dカメラを使うのが手取り早いです..... (^^;