第21回 HTML5とか勉強会「HTML5+ゲーム」

http://atnd.org/events/20007
という面白そうな勉強会があり、Canvas以外での実装方法やフレームワークについても知っておきたかったので参加してきました。

CanvasFlashゲームを移植してみた経験から、これはフレームワーク化して面倒なところを吸収しないとツラいなぁと思っていて、他の会社ではどんな方法を使っているのかを知りたいというのもあって、、

Smartphone 向け HTML5 ゲームの作り方 @sou さん

  • DeNAでの既存タイトルのスマートフォン対応についての話でした。
  • その方法としてDeNAでは、「HTML5+CSS3」、「Canvas」、「ExGameを使ったSWF->HTML5への変換」の3つあるとのことでした。今回はその中でもHTML5+CSS3についてが中心の発表でした。
  • Canvasについては先日のJavaScript勉強会では公開予定がないと言っていたAS3ライクなフレームワークであるarctic.jsが近日公開とのことで楽しみです。
  • 帝国ロワイヤルの戦闘シーン(ドラクエ的)を題材に、どのようにCSS3でのアニメーションが使われているかという紹介でとてもわかりやすかったです。
データ管理、セキュリティの実現方法

特別なことをしているわけではなく、client側は選択されたコマンドをサーバーに送るだけで、server側はコマンドを受け取りデータの更新・管理をするという方法が取られているそうです。クライアント側に処理をさせないことで不正を防止しているんですね。

  • このゲームのように途中でサーバーとの通信が発生するゲームだとサーバー側で検証が出来るのでなんとかなりますが、クライアント側で完結するようなゲームの場合は、不正のチェックはなかなか難しいなぁと考えさせられました。
  • 個人的には、戦闘シーンのような場合、終了するまでサーバーと通信しないかと思っていたので意外でした。
エフェクトのアニメについて
  • 個々の要素のアニメーションはCSS3を用いて実装されていて、それら各アニメーションを、setTimeoutで作成されたタイムライン上に並べて関数化してまとめることで呼び出しが簡単に出来るようになっているそうです。ここもサンプルコードがあってとてもわかりやすかったです。
  • CSS3のanimation-durationはCSSで指定するのではなく、タイムライン側で算出してJavaScriptでセットしているそうです。
  • また、Aの攻撃->Bの攻撃->ボスの攻撃と流れていくような場面で必要となる非同期処理制御にはJSDeferredがオススメとのことでした。(nextで処理をつないでいくイメージ)
    • その他の場面としてもUIブロック、進行管理、ロード、イベント制御にも使えるのでとにかく便利とのことでした。
    • https://github.com/cho45/jsdeferred
    • JSDeferredは以前から知っていたものの使えていなかったのでこんどこそ使ってみようと思いました。
  • そうなのかと思ったこととしては、jquery使うだけと初期ロード時に300ms遅延するから使っていないという話もありました。その代わりとしてDeNAではRiddle.jsつかっているというのも知らなかったのでそうだったんだと発見でした。
  • DeNAではHTML+CSS3、Canvasの他に新規だとNgCore、移植だとExGameという選択肢があって、その辺りをどう使い分けているのかなぁという点は興味を持ちました。
  • 先日のJavaScript ゲーム製作勉強会 Vol.2とあわせて聞けてとても勉強になりました。


アメーバピグのスマフォ化 @herablog さん

  • アメーバピグスマートフォンウェブ上で実装した際の話で、その中でも主にアバターの素材画像が多くて重くなることの対策をした話でした。
  • 今回の内容は下記の記事で事前に読んでいた内容ではあったのですが、実際の動きを見たり話しを聞くことでとても勉強になりました。
  • 多分ここに内容を書いていくより、上のブログの記事を見たほうがわかりやすいと思うので内容は省略しますが、如何にユーザーにストレスを与えないUIをつくるかということをとても考えされられ、参考になりました。
  • 様々な方向からアプローチしているのも素晴らしいなぁと思いました。
  • アバターものをやるときは参考にしたいし、それ以外でも如何にサーバーとの通信の回数や容量を少なくするかは考えていないといけないポイントだなぁと思いました。快適なUIを作ることはプロとして当然追求すべきですよね。
  • 記事で紹介されていたOptiPNGに代わって使われているというImageOptimも積極的に使っていきたいですね。


HTML5 ゲームと WebUI アーキテクチャ グリー 米川さん

  • 以前naoyaさんが話をしているのを聞いたことがあったネイティブとWebViewをいいとこ取りしたハイブリッド型な構成についてでした。
  • ネイティブでWebViewのアプリをラップすることで、ウェブの気軽に作れて更新も好きなタイミングで出来てA/Bテストなんかも実施しやすいという利点はそのままに、ネイティブだから出来る、カメラ、Notification Push、スクリーンショット取ったりすることを取り入れるという両方のメリットを享受することが出来るものです。
  • またそのようなネイティブ<->html5フレームワークであるticoというものをGREEでは開発中とのことでした。
  • HTML5でも充分な表現力はあるので、本当に必要な部分だけをネイティブで実装してコストのバランスを取るための選択肢としては、検討すべき構成だなと思いました。Titaniumとの比較も含め。
  • 質問では、WebViewとSafariではJavaScriptエンジンが違うという話があり、そのパフォーマンスについての質問もありました。


JSクイズゲームの作り方(HTML5実力テストの紹介) @kyo_ago さん


あなたを"魅了する"開発環境 enchant.js / enchant PRO @sidestepism さん

  • enchant.jsは実際に使ってゲームを作ったりはしていないものの、ソースが読みやすくて勉強させてもらっているのでとても楽しみな発表でした。
  • 早くて簡単に気持よく書けることを目指したということもあってか説明もとてもわかりやすく、ライブコーディングも本当に直感的にわかりやすく書けることが伝わってきて多くの人が使ってみたくなったんじゃないかなと思います。会場の反応も大きかったです。
  • また、enchant PROの紹介もあり、こちらもARを使っていたりして面白そうでした。しかもソースはシンプル。


まとめ


発表者、関係者の皆様ありがとうございました!
内容が盛りだくさんで大満足だったので、これからちゃんと消化していきたいです。