ゲームエンジンを使ったWebゲーム開発とVRシステムの研究 "英語と物理でWebゲーム開発！"

1. [WiiRemote Programming] Cover Illustrated by Yukari Tanaka
ゲームエンジンを使ったWebゲーム開発と
VRシステムの研究
集合・開始 13：30 - 終了 14：30
神奈川工科大学 情報学部 情報メディア学科
白井 暁彦
http://blog.shirai.la

3. 白井暁彦 博士(工学) 東京工業大学
“VRエンタテイメントシステム”の研究者
∗ ゲーム技術を未来にアタッチしたい
∗ IVRC国際VRコンテスト運営・国際化（2001年～)
∗ “Manga Generator”
学生のコンペ作品を研究に引き上げる
∗ 欧州最大の国際VR展 Laval Virtual
デモ部門“ReVolution” Chair（2006～）
∗ 多重化隠蔽映像
[Scritter],[2x3D],[ExPixel],[ExField]…
情報メディア学科 白井研究室
これまでの研究成果・論文は
こちらに掲示・公開されております
http://blog.shirai.la/publications/

4. ▶ 書籍「白井博士の未来のゲームデザイン〜エンターテインメントシステムの科学」より

5. ゲームエンジンを使ったWebゲーム開発と
VRシステムの研究
＜Program＞
Today’s workshop
開始 13:30 Ice Break
13:35 ゲームエンジンとは？
13:45 英語と物理とWebゲーム開発！
14:10 発表会
14:20 まとめ
VRエンタテイメントシステムの開発とは
終了 14：30

6. ゲームを開発するための
クルマのエンジンにあたるシステム。
ちょっと前まではゼロから構築していたが、
近年では多様なエンジンが開発されており、
エンジンを使いこなすことがゲーム開発の
重要な技術になりつつある！
ゲームエンジンとは？

7. HTML5環境で動作するWebGLベースのゲームエンジン
JavaScriptで記述でき、無料で利用できる。
HTML5: Webサイトを記述する言語
JavaScript: 動的Webのためのプログラミング言語
WebGL: ブラウザで動く3Dグラフィックス
「無料で」：もちろんプロの業務用は有料です
PlayCanvas とは？

8. いくつか紹介
無限 無添 くら寿司｜くらコーポレーション採用サイト
CREATE｜株式会社サイバーエージェント技術職新卒採用サイト
GLSL Sandbox
WebGLを使った面白サイトたち

9. https://playcanvas.com/explore/featured
PlayCanvas

10. つまり...
英語と物理でWebゲーム開発！

11. 新しいプロジェクトを作成！

14. Blank New Project - Create
名前をアルファベットで
クリック
最後にクリック

15. エディタを起動！

22. キューブの弾性を変えたい？
★物理関連英語
Restitution 弾性係数(もどりやすさ)
語源・フランス語 Re-stitute (再度立つ)
Friction 摩擦
ヒント...

23. まったく跳ねない…CubeのRestitution=0
跳ね続ける…CubeとPlaneのRestitutionとFrictionを1に
小さく跳ね続ける…Cube Position Y = 2
PlaneのRotation XかZを10など
回答編

25. 回転させたいときは左上の
回転ツールを選ぶのも良い

26. このURLにアクセスして Fork する
http://bit.ly/pcpenpro
Penguin Challenge!!

28. 右クリックして
HTMLを
Editする

29. アルファベット名’s＋Penguin
そして Fork ↓

30. 目的：ペンギンをより遠くへ美しく飛ばす
ルール
OK
∗ オブジェクト作成
∗ スクリプト作成
∗ 重力変更
NG
∗ penguin.js, record.js の変更

32. ヒント...

33. Codeを書きたい人は...

34. Google で検索！「PlayCanvas」+...
● スクリプトの新規作成
● スクリプトをアタッチする
● オブジェクトに力を加える
● リジッドボディについて
● 当たり判定とトリガー
さらに遠くまで，美しく，
ペンギンを飛ばそう！
もっとPlayCanvasを使いこなしたい

35. 13:45 英語と物理とWebゲーム開発！
14:10 発表会
参考まで
先輩方の作品はこちら...
http://blog.shirai.la/blog/2017/08/playcanvas-ws/

36. ゲームエンジンを使ったWebゲーム開発と
VRシステムの研究
＜Program＞
時間を創り出すのもクリエイタ
開始 13:30 Ice Break
13:35 ゲームエンジンとは？
13:45 英語と物理とWebゲーム開発！
14:10 発表会
14:20 まとめ
VRエンタテイメントシステムの開発とは
終了 14：30

37. 「エンタテイメントシステム」とは何なのか？
• 定義 (Definition in this talk)
「人間の娯楽に作用するように
デザインされたコンピュータシステム」
Computer systems that was designed to affect to human amusements.
ビデオゲーム，体感ゲーム，テーマパークアトラクション,
メディアアート，科学館などの展示物，デジタルサイネージ,
VRエンタテインメント, ARG...

38. 先史時代の絵画から... • ラスコー洞窟の壁画
• 15,000年前のクロマニョン人による
● 顔料も自作
● 遠近法を使用

39. 「あそび」の研究とその近代史
Research of “Plays” in modern history

40. 玩具とおもちゃ
●日本語「おもちゃ」
語源は「持ち遊ぶ」という宮廷言葉
「持って遊ぶもの」→「おもちゃ」
●「玩具」
「玩弄物」という言葉が語源であり，
「玩；もてあそぶ」
「弄；戯れる(手の動作)」という意味
も あそ

41. 2年生で演習します
•「WiiRemote
プログラミング」
（オーム社開発部）
(著)白井 暁彦, 小坂 崇之, くるくる研究室, 木村 秀敬
単行本: 400ページ 2,940円
ISBN-10: 4274067505
• 単なるWiiRemoteのハッキングではなく
インタラクティブ技術の教科書。

42. 多義性：中国語における「遊び」
• 「遊」･･･旅行する（出歩く）友達のところへ行ったり，一緒に旅行したりする．
• 「游」･･･泳ぐ→水面を浮くようにして泳ぐこと(「泳」は水中を潜行しておよぐこと)
• 「戯」･･･たわむれる→動作や言葉に重点がある
• 「玩」･･･もてあそぶ→愛でる．よい意味と悪い意味がある．
• 「弄」･･･たわむれる（手の動作に重点がある）
• その手段（触る，歩く，言葉，移動，泳ぐ)や対象によって，異なる語であることが興味深い．
同じ「遊ぶ」でも，英語の「Play」なども全く意味が異なる！

43. 現代における問題（Ingress以降）
2000年代のモバイル化に起きた「遊びの崩壊」を超えて、
｛非生産的，選択の自由があり未確定である｝自己目的性の行為である。
日常に重畳
やめられない・終わらない
区別がついていない
人多し
ルール変更多し

44. 自然な遊び状態を笑顔だけで測れないか？
おもしろさの評価研究

45. http://blog.shirai.la
ゲーム制作会社
フロム・ソフトウェア
本学OBによる特別講演
加藤 匠 Takumi KATO
入社5年で体験してきた
ゲーム作りの現場について入社して約5年間で何を見て、感じてきたのか。
ゲーム作りの制作工程や現場の話をします。
また、神奈川工科大学の在学中にどのような活動をして、
フロム・ソフトウェアへ入社したのかもお話します。
■加藤匠 ～ 略歴／経験タイトル
2012年3月 神奈川工科大学大学院 工学研究科 博士前期課程 情報工学専攻 修了。
同年4月 株式会社フロム・ソフトウェア 入社。『DARK SOULS Ⅱ』，
『DARK SOULS Ⅱ SCHOLAR OF THE FIRST SIN』の開発に企画として参加。 日時： 12月20日11:20～
場所：3103教室
（非受講者も聴講可、前から詰めて座ること）
担当：情報メディア学科・白井
DARK SOULS Ⅱ SCHOLAR OF THE FIRST SIN
© 2016 BANDAI NAMCO Entertainment Inc. / © 2011-2016 FromSoftware, Inc.

46. 「宇宙パトロールルル子」
「グレンラガン」「キルラキル」などを手がける
日本のアニメーション制作会社 TRIGGER設立
5周年記念作。
紙と鉛筆を使った手描きアニメーションのた
めのワークフローに適したプレビューツール
「SengaDoga」の開発でお手伝いさせていただ
きました。
Bluray Disc発売開始
エンディングスタッフロールで名前を探してみ
てください。
テレビアニメ制作技術なども...

47. Real Baby - Real Family
神奈川工科大学 白井研究室
望月宥冶
浅野 隆弥 我妻大樹 東田茉莉花 Rex Hsieh

48. 体験希望の方は6F-605・白井研究室までお立ち寄りください

49. チーム紹介
Leader and Founder: 望月 宥冶
Unity Programmer: 浅野 隆弥
Hardware/ Audio Design: 我妻大樹
2D and 3D Design: 東田茉莉花
English Translation: Rex Hsieh
Supervisor / Professor : 白井暁彦

50. Laval Virtual Award in IVRC2016
100+ projects submitted in IVRC2016

51. Motivation
• IVRC2016 「Real Baby - Real Family」
• “Real Baby” can teach the players how to handle a baby.
• it can also simulate the level of family ties through an
entertainment experience.

52. 技術的な３要素
• HMDを装着したまま、違和感なく赤ちゃんを抱擁できる技術
• 体験者の顔から体験者の赤ちゃんを生成する技術
• 赤ちゃんの存在感の演出として、触覚を使ったフィードバック技術

53. 要素１:HMD装着時に赤ちゃんを
違和感なく抱擁できる技術
▶ HMDを装着したまま、違和感なく赤ちゃんを
抱擁できる技術として、高精度なポジション
トラッキングを必要としている
▶ コンシューマHMDであるHTC VIVEを使用
して実現

54. 要素2 : 赤ちゃん顔生成
1. 赤ちゃんの平均顔を作る
2. 特定の顔の特徴点を取得する
3. 特徴点を使って若年化モーフィング

55. 赤ちゃん平均顔の生成
Google画像検索により16枚の乳幼児画像を取得し合成

56. Laval Virtual Version
▶ 3つの異なる肌の色を選択できる

57. 特定の顔の特徴点を取得
▶ 顔の特徴点である目、鼻、口、
眉、輪郭の座標を取得し、
▶ 赤ちゃんの平均顔と合成する.

58. ▶ スペクトラム解析をし、音声出力を触覚フィード
バックとして提示する
▶ 高速フーリエ変換を使用し、振動データを
HTCVIVEにリアルタイムに送信する
要素3 : 音声出力と同期した触覚提示

59. バイブロトランスデューサー
「VP2」を使用した触覚提示
▶ HTCVIVEに内蔵されている振動子の提示位置を、
外部振動子を取り付けることで、赤ちゃんモックアップに
最適化した。

60. ロードマップ
6 7 8 9 10 11 12 1 2 3 4 5 6 7
イベント
開発
▲IVRC
企画書提出
▲IVRC
予選大会
▲IVRC
決勝大会
▲HEAT
5th
展示
▲JVRFest
展示
▲Interaction
2017展示
▲VR CENTER
展示
▲Laval Virtual
▲ニコニコ
超会議
▲SIGGRAPH
日本展示版 海外展示版初期開発
Next
Generation
Coming Soon…
2016 2017
© Unity Technologies Japan/UCL

61. IVRC2016

62. Japan VR Fest

63. JVRFestでの展示を通して得られた気づき
JVRFest直後のTweetsより
https://twitter.com/tanji_y/status/835397251400814592
https://twitter.com/tanji_y/status/835399695358799872
https://twitter.com/tanji_y/status/835581751627952128
https://twitter.com/tanji_y/status/835585405680406528
https://twitter.com/tanji_y/status/835592354316742658

64. VR Center

65. イオンレイクタウン

66. Laval Virtual 2017

67. 展示を通して得られた結果
▶ 赤ちゃん顔生成の評価
▶ 生成した赤ちゃんの似ているかどうかの評価は5段階中3.5だった。
▶ VRを用いたナーシングシミュレータ
▶ 現実に寄せて作ることによって, 主体的な育児シミュレーターを短い時間で体験さ
せることができる。
▶ エンターテイメントシステムとしての評価
▶ このシステムは赤ちゃんの顔画像を同性のカップルから生成するだけでなく、写真
や2次元の絵とも子供を作ることが出来る。

68. 2017 Laval Virtual Positive Feedbacks
● ４００人以上が Real Baby - Real Familyを体験
● 多くの意見がポジティブなもので、その内容は
○ Fun and interesting experience
○ Very educational
○ Good concept
○ Has potential

69. 2017 Laval Improvement Suggestions
● ネガティブな意見やアドバイスとして、
○ Need to improve graphic
○ More interaction and animation from the baby
○ A bit confusing in the beginning
○ Transition between different interactions can be a bit abrupt

70. 2017 Laval Virtual Direct Feedbacks
● 以下はユーザーが書いた実際のフィードバックの画像

71. VRCenterについて
・曖昧な状態のカップルが，相手の願望を確認できる瞬間を提供できた
・本コンテンツを通じ，『母性や父性の感情が湧いた』という感想（下記：回答106名）
・VRウェディングや本コンテンツを通じてパートナーと話をしようと考えた方は7割超え
・『日本でのVRコンテンツの楽しみ方を整える，普及する』という視点を考える必要がある

72. アンケート
体験者59人中，「子供が居ない」と答えた41人について

73. アンケート
体験者59人中，「子供が居ない」と答えた41人について

74. アンケート
体験後
6(人) 6(人)

75. LavalVirtualにて
・概ね「良い体験だった」と肯定的な感想が多かった
・言語が違う中，指示が通じず途方にくれる体験者も
・家族としての愛情を表現する，というよりも，
将来的に父母になる人のための，
『練習目的のアプリケーション』としての見方に好意的な印象

76. 可能性
研究として
育児ストレスの軽減を目的とした VRコンテンツ
成長する育児シミュレーター
言語や教本に頼らない育児方法伝達システム
二次元との子供を作るエンターテイメントシステム
商業利用
婚活イベントでの利用
結婚式場等のPRイベントでの利用
→結婚・育児が一体となった
ビジネスモデルの発展に寄与できるのでは？

78. 情報メディアの研究は
とても楽しく，可能性大！
しっかり学んで世界に飛び立とう！