HTML5とか勉強会 第21回 に行ってきた #html5j

HTML5Study HTML5 Event


HTML5とか勉強会 第21回 に行ってきた。
今回のテーマは「HTML5+ゲーム」。正直なところ、僕はGREEやDeNAの携帯ゲームをやったことがない。でも最近はスマートフォン化が進んでいて、HTML5がいろいろな場面で使われているのは知っていたので、楽しみにしていた。申し込み開始から40分くらいで100人の枠が埋まっていた。すごすぎる。

発表はこんな感じ。

togetterはこちら。

Smartphone 向け HTML5 ゲームの作り方

  • DeNAのゲームアプリはほぼAndroid/iOSに対応済
  • ゲームの作り方
    • HTML/CSSベースで作る
    • Canvasベースで作る
    • SWF使う(ExGame)
  • HTML/CSS
    • 選択→アニメ→選択を繰り返すゲームが向いている
  • Canvas
    • 即時反応性の必要なゲーム
    • タイミングが重要なもの
  • 怪盗ロワイヤル
    • コマンド選択で戦闘が進行
    • データ管理、セキュリティをどうするか
      • ローカルだと改ざんされてしまう
  • Client/Server型
    • 選択されたコマンドを送る、結果を再生する
  • Server
    • コマンドを受付る、データを管理する等
    • クライントで改ざんしても問題ない
  • 複雑なアニメーション
    • ボス攻撃
      • ボス画像がせりだす
      • キャラクタが揺れる
      • ダメージ値が表示される
      • HPが減る
      • 個々のアニメはCSS3で
      • タイムラインに並べて関数化して表示
      • 行動を結びつける
      • 1ターンは行動が連続している
  • jsDeferred
    • DeferredObject
    • ちゃんと待ち合わせてから実行してほしい
    • 非同期処理を待ち合わせる
    • スマートフォンの場合、jqueryは読み込みに300ms位かかる
    • なるべくjqueryに依存したコードは書かないようにしている

アメーバピグのスマフォ化


僕のメモよりは、こちらを読んだほうがよっぽどまとまっている。

  • こんなサイトは嫌だ
    • 音
    • ポップアップ
    • オールフラッシュ
    • 画像が多くて重い
  • アメーバピグのスマフォ版を作るとき意識したこと
    • 速さ
    • 反応したあとのタイムラグを減らそう
    • ノーラグ(タイムラグのないこと)
  • アバターを書く
    • パーツがものすごく多い
  • 試したこと
    • image
      • パーツが多くて重い
    • css sprites
      • 一気に読んでも重い
      • メモリを消費してしまう
    • svg
      • AndroidではSVGがうまく表示できなかった
    • canvas
      • 形のパーツと、色があって、種類が多い
      • SVG/CANVASではパスを定義して色を変えればいい
  • ページ作成
    • HTML 構成する要素
    • CSS　どう表示するか
    • JavaScript アクションに対する動作
  • HTMLは一枚にまとめた
    • 読み込まれているのですぐ表示される
    • ノーラグ
    • onhashchangeを使って遷移
    • ハッシュをIDに入れる
    • いろいろ問題があるけど、別ページに遷移しない、キャッシュしないのでいいかなと
  • Custom Data Attributeでアバターを作る
  • ローディング画像にDataURI Schemeを使った
    • 何回も取得して欲しくない
    • ただし1.3倍くらいの容量になる
  • Sassを使った
    • ループ便利
    • CSSスプライトも簡単に
  • 高速化
    • サーバへのリクエストは最小限に
    • css sprites
    • 画像最適化
    • minify
    • ファイル結合
  • プロならなるべく高速化したほうがいい

HTML5 Game with Web UI / HTML5 ゲームと WebUI アーキテクチャ

  • flash→HTML5
    • reel
      • ライブラリを作った
      • SWFをCanvasに変換する
      • これまでの開発フローが変わると開発効率が下がる
  • WebUIアーキテクチャ
    • HTML5による利点はそのまま
    • HTMLでできないことをネイティブアプリで補う
    • Web+ネイティブのハイブリッド
  • ネイティブでやること
  • ネイティブにどこまで任せるかの線引きが重要
  • ネイティブの力を借りることでゲームの体験を更に良くできる
  • 基本的にはHTML5で書いて、ネイティブで使いたい機能だけを使うのがいいかも

JSクイズゲームの作り方（HTML5実力テストの紹介）


メモは取ってないけど、資料が公開されているのでこちらをどうぞ。

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


メモは取ってないけど、資料が公開されているのでこちらをどうぞ。

「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション
View more presentations from Ryohei Fushimi

まとめ

HTML5がいちばん使われているのはスマートフォンだと思う。そしてHTML5を本気で使っているのもスマートフォンだと思う。現場で使われている技術や、対策を聞くことができてとても面白かった。
ちょっと体調が悪かったけど、そのまま懇親会に参加した。同じ会場でビールとピザ。いろいろなひととお話できて楽しかった。学生の方も参加されていて、いろいろ話を聞く事ができて楽しかった。僕が学生だったのはもう10年前か…。
やっぱりこういったビアバッシュ形式の懇親会があると、いろいろなことを話したり聞いたりできるので楽しい。

参加されたかたのエントリ

これまでに参加したときのエントリ

一覧は [HTML5Study]記事一覧 - techlog からどうぞ。