Slide 1
Slide 1 text
未来創造展2015
Slide 2
Slide 2 text
作ったもの
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
GASSEN
合戦をもとにした全方位スポーツ
多人数で体を動かそう
コンセプト
Slide 5
Slide 5 text
GASSEN
兜や武器などは、AR (拡張現実) に映し出す
IT要素
Slide 6
Slide 6 text
企画を作る わたしの
担当範囲
1 2
Slide 7
Slide 7 text
企画を作る
未来の世界を
かんがえる
当日までにつくるものを
かんがえる
Slide 8
Slide 8 text
企画を作る
未来の世界を
かんがえる
Slide 9
Slide 9 text
未来の世界をかんがえる
未来の世界で、テーマにそったものが有ったら?
当日までにつくるものはかんがえない
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
企画を作る
当日までにつくるものを
かんがえる
Slide 13
Slide 13 text
当日までにつくるものをかんがえる
かんがえたコンセプトを、観客に説得する。
コンセプトはあくまで遠い導き。囚われすぎない。チー
ムメンバーを見渡して、作れるものをつくる。
「いちばんプログラミングができる者」、「いちばん工作
ができる者」、「いちばんメンバーを管理できる者」の3
人をみつける。
Slide 14
Slide 14 text
リーダーはプログラミングや工作をしている
暇はありません。
Slide 15
Slide 15 text
わたしの担当範囲
ゲームのアニメーション
ゲームのランキングのサーバー
ランキングの表示UI
Slide 16
Slide 16 text
ゲームのアニメーション
Androidアプリのカメラで読み取る、ARマーカーを表示する
Slide 17
Slide 17 text
ゲームのアニメーション
App
Scene
Bgm
BgmPlayer
Bg
ObjFactory
Obj
ObjLow ObjMiddle ObjHigh
DOM
Scene
animate()
animate()
createRandom()
new()
継承
animate()
play()
Slide 18
Slide 18 text
Gassen Animation Demo (CSS+JavaScript)
http://jsdo.it/ne_sachirou/7wwz
ゲームのアニメーション
シーンを中心とした普通のゲームプログラミン
グです。
JavaScriptで実装しました。アニメーションは
CSS3 AnimationとrequestAnimationFrame
(VSYNCのようなもの)。音はHTML Audio要
素。
jQueryを使う人はもういませんよね?
Slide 19
Slide 19 text
ゲームのランキングのサーバー
Androidアプリから送られてくる点数を管理する
Slide 20
Slide 20 text
ゲームのランキングのサーバー
ユーザー名
点数
ランキングRDB
Web, APIサーバー
更新データー
更新データー
Slide 21
Slide 21 text
ゲームのランキングのサーバー
https://bitbucket.org/ne_sachirou/mst-gassen-api
RabbitMQやQ4MやNATSやRedis Pub/Subのように
サーバーをたてません。分散キューには使えませんが、
一対一なら充分なメッセージキューです。HTTPサーバー
からWSサーバーにランキングの更新を伝えます。
PHP 5.6
Ratchetを使いWebSocketサーバーをPHPで作りました。
Reactという非同期IOライブラリが基礎になっています。
WAFにはフルスタックのLaravelを使いました。Web
Socketサーバーとはモデルを共有しています。Artisan
コマンドでWSサーバーを起こせるようにしました。
Slide 22
Slide 22 text
ランキングの表示UI
プレイしたランキングを表示する
リアルタイムに表示を更新する
Slide 23
Slide 23 text
ランキングの表示UI
Ranking update Animation demo
http://jsdo.it/ne_sachirou/ApPS
アニメーションは、こだわりの逸品。
CSSはBEMで構造化。JSからMedia Queryを
あつかい、スマートフォンの画面にも対応した。
音はSynth1 VSTで自作。
初回表示時には、現状のランキングをページに
埋め込んでページがダウンロードされるので、表
示が遅延しません。その後は2分に一回Ajaxでラ
ンキングを問い合わせ。またリアルタイムにWeb
Socketでランキングデータが知らされるので、そ
れを基に表示を更新します。
正しいJSを書きましょう。HTML Template要素
は助かります。React.jsのJSXは好きません。せ
めてE4Xがあれば…。
非同期APIはPromise functorで。
細部、細部、細部…
Slide 24
Slide 24 text
Appendix
Slide 25
Slide 25 text
Sean MacEntee "presentation outline" CC by 2.0 2011-05-05 https://www.flickr.com/photos/smemon/5690542503
vassilis galopoulos "thinking?" CC by-nc-nd 2.0 2005-03-19 https://www.flickr.com/photos/galopoulos/567890941
Matt Jacoby "Sound Baffle Tab Slots" CC by-nc 2.0 2006-08-30 https://www.flickr.com/photos/msjacoby/229587978
reynermedia "server room" CC by 2.0 2010-02-22 https://www.flickr.com/photos/89228431@N06/11285592553
My Online Estate Agent "Zoopla property search on a Samsung Galaxy " CC by 2.0 2014-12-15
https://www.flickr.com/photos/129146418@N05/15419766384
DevCom 'server_vista' from "DevCom Network" Freeware need links. http://findicons.com/icon/61657/server_vista?id=61684
Chris Messina "Most downloaded services in the last 7 days – Opera Unite Services" CC by-nc-sa 2.0 2009-06-17
https://www.flickr.com/photos/factoryjoe/3633281756
Barry Mieny "Database" CC by-nc-sa http://findicons.com/icon/64433/database_1?id=64461
luigi alesi "dream" CC by-nc 2.0 2008-06-25 https://www.flickr.com/photos/gigi62/3029974414
Ramona Forcella "Japan Dream Kenjin" CC by 2.0 2009-04-27 https://www.flickr.com/photos/ramona538/3476332639
Guillaume Speurt "Tallinn's weathercock" CC by-sa 2.0 2013-09-21 https://www.flickr.com/photos/guillaumespeurt/12247835313
Photos