$30 off During Our Annual Pro Sale. View Details »

卒業制作の企画と作品

 卒業制作の企画と作品

来年以降の人たちの参考のために。

さっちゃん

February 23, 2015
Tweet

More Decks by さっちゃん

Other Decks in Programming

Transcript

  1. 未来創造展2015

    View Slide

  2. 作ったもの

    View Slide

  3. View Slide

  4. GASSEN
    合戦をもとにした全方位スポーツ
    多人数で体を動かそう
    コンセプト

    View Slide

  5. GASSEN
    兜や武器などは、AR (拡張現実) に映し出す
    IT要素

    View Slide

  6. 企画を作る わたしの
    担当範囲
    1 2

    View Slide

  7. 企画を作る
    未来の世界を
    かんがえる
    当日までにつくるものを
    かんがえる

    View Slide

  8. 企画を作る
    未来の世界を
    かんがえる

    View Slide

  9. 未来の世界をかんがえる
    未来の世界で、テーマにそったものが有ったら?
    当日までにつくるものはかんがえない

    View Slide

  10. View Slide

  11. View Slide

  12. 企画を作る
    当日までにつくるものを
    かんがえる

    View Slide

  13. 当日までにつくるものをかんがえる
    かんがえたコンセプトを、観客に説得する。
    コンセプトはあくまで遠い導き。囚われすぎない。チー
    ムメンバーを見渡して、作れるものをつくる。
    「いちばんプログラミングができる者」、「いちばん工作
    ができる者」、「いちばんメンバーを管理できる者」の3
    人をみつける。

    View Slide

  14. リーダーはプログラミングや工作をしている
    暇はありません。

    View Slide

  15. わたしの担当範囲
    ゲームのアニメーション
    ゲームのランキングのサーバー
    ランキングの表示UI

    View Slide

  16. ゲームのアニメーション
    Androidアプリのカメラで読み取る、ARマーカーを表示する

    View Slide

  17. ゲームのアニメーション
    App
    Scene
    Bgm
    BgmPlayer
    Bg
    ObjFactory
    Obj
    ObjLow ObjMiddle ObjHigh
    DOM
    Scene
    animate()
    animate()
    createRandom()
    new()
    継承
    animate()
    play()

    View Slide

  18. Gassen Animation Demo (CSS+JavaScript)
    http://jsdo.it/ne_sachirou/7wwz
    ゲームのアニメーション
    シーンを中心とした普通のゲームプログラミン
    グです。
    JavaScriptで実装しました。アニメーションは
    CSS3 AnimationとrequestAnimationFrame
    (VSYNCのようなもの)。音はHTML Audio要
    素。
    jQueryを使う人はもういませんよね?

    View Slide

  19. ゲームのランキングのサーバー
    Androidアプリから送られてくる点数を管理する

    View Slide

  20. ゲームのランキングのサーバー
    ユーザー名
    点数
    ランキングRDB
    Web, APIサーバー
    更新データー
    更新データー

    View Slide

  21. ゲームのランキングのサーバー
    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サーバーを起こせるようにしました。

    View Slide

  22. ランキングの表示UI
    プレイしたランキングを表示する
    リアルタイムに表示を更新する

    View Slide

  23. ランキングの表示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で。
    細部、細部、細部…

    View Slide

  24. Appendix

    View Slide

  25. 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

    View Slide