鈍足ランナーのIT日記

走るのが好きな5流のITエンジニアのブログ。

趣味の範囲は広いけど、どれも中途半端なクソブロガー楽しめるWebアプリを作ってあっと言わせたい。サーバーサイドPerl(Mojolicious)、クライアントサイドVue.js。Arduinoにも触手を伸ばす予定。

もっと面白い!を目指して、もっともっとHTML5に参加

ものすごい走り書きになってしまいました。 昨日行われたmswaveでの勉強会のメモを公開いたします。

ソーシャルゲームの開発フロー

gloopsって

売上269億 600人 渋谷クレストヒット 国内17本、IOS1本

開発フローは

  • プランナー 企画のコンペ
  • 基本、プランナーがProducerになる
  • コンセプトの設計
  • 開発、プランナー 仕様
  • デザイナ、イラストレーター
  • デーたーまイニング、バランスチューニング
  • レビュー(えらい人)
  • 最終的には、全社でみる

3から4か月という期間でつくりあげる。

どんな人が

  • 遊ぶのが好きの人
  • コミュニケーション能力
  • 考えるちからがある人
  • 責任感がある人

DeNAさんと一緒に開発。ドラゴンエクリプス。

<< 公開前なので撮影はご遠慮 >>

フロントエンドの高速化

自己紹介

小島芳樹HTML5の人、金髪の人

新規コンテンツの立ち上げ、HTML5の勉強会。 UIレイアウト設計、コーディング、パーツデザイン UIデザイナーを担っている

せっかちです

レスポンスの良しあしが満足度の影響 離脱という ゲーム内容が良くても、レスポンスで離脱

4秒→2秒

せっかち度が上がっている

装飾しない

没入感が必要 ライト+リッチが求められる

ライトでリッチなこと

UIパーツを増やしすぎていない? UIのパーツを精査 どんなパーツが必要か洗い出して

とりあえず汎用的なパーツを作りこむ

UI Frameworkと呼ばれるもの 3つ紹介。

  • Bootstrap
  • JQUERY UI
  • Pure yahoo CSSだけで書かれているフレームワーク(軽量)→ タブレットなどに UIの見本帳として見ている

限界までCSSで表現しようとする! border-radius gradient box-shadow,text-shadow

CSS3ジェネレーターが充実している、Fireworksの出力機能

CSS3 botton Gererator Ultimate CSS Gradient Geretator

振る舞い(アニメーション)

CSSでできるアニメーション手法

CSS Transition(黒から白へだんだん変化する、)

javascriptできっかけをつけてあげる。

CSS Animation

繰り返しとか ページを開くと勝手に動いてしまう。停止などは、停止ボタンをjavascript

意地でも画像を使わない

アイコンをWebフォント。単色で単純なものはフォント化をおすすめ

IcoMoon いられでつくる→SVG形式で保存→フォント化

スプライト画像(リクエスト回数を減らす) CSS PRRITES ジェネレーター 自分でFIREWORKSで詰めている

JAVASCRIPTの出番

scriptタグ、<body>の〆の前に置くのが良い 上から順番に見るので描画が止まってしまうことがあるから。

でかいライブラリはNG

JQUERY100KB近い。スマホでは致命的。

QUO.JS 20kb(ピンチイン、ピンチアウトが用意されている) Zepto.js 26kb JQUERYとまったく同じ書き方でいける

振る舞いの違い

クリックのonClick指を離した瞬間にイベントが発行 タブレット 誤操作 onTouchEnd(シングル、ダブルタップとわず発行する)

HTML5 Canvasで挑む 「ぷちココ」のできるまで

ぷちココ

マイページ画面。 ここ(動物) でこ(置物t) DeNAのフラッシュ→キャンバスに変換する便利なツール

キャンバス+javascript 一枚のimg要素

javascriptは5割、絵の計算 4割 通信 1割Canvasをたたく

スプライトシートの再生順序とインターバルを変えている。

落とし穴 javascript + img CANVAS drawImageで書き込める imageの読み込みが終わる前にdrawImageが呼ばれると、

  • iPhone読み込が終われば、表示される
  • アンドロイドは読み込みがとまってしまう

Imageはコールバックをもつ 素直にImageオブジェクトをラップしてよみこみずみフラグを持たせた。Imageを拡張しちょうとしたら上手くできなかった。

画像の描写

1枚の絵に8駒の画面を埋め込み、切り出して使う。 ctx.drawImage(img,x,y) ctx.drawImage(img,x,y,width,length) ctx.drawImage(img,src_x,src_y,src_width,src_length,x,y,width,length)

切り出し範囲を御指定すると、読み込みがとまる挙動あり。 注意!

全体的な感想

Canvasは、意外とうまくうごく! Webの知識よりも、ゲーム制作の知識が重要! 昔ながらのゲームづくりと同じ! Canvasを使えばなんとかなるかも、手間はかかる iphone+safari の方はすごく早い andoroidはもう少しがんばって

600名のコミュニケーションは?

G=global loops コミュニケーション

社内SNS「Yammar」

徳田 頻度 10回とか 小島 パンの自販機 ホイップアンパン部。お茶会 関係ない部署とのつながり

社内勉強会「Study」

誰でも好きなテーマで Unity、文書の書き方、インフラ、UIUX  オンラインゲーム技術入門 月に20本の勉強会が開かれている! 30分から1時間という単位、業務上のつながりながくても 色々な部署が参加する

その他イベント

フルーツの食べ放題 かきごおり ハンバーガー食べ放題

社員総会

社長、表彰式、半期に1回

gloopsでは社員募集しているそうです。 興味のあるかたは、どうぞ。。

私には到底無理っす。。。www もっと成長しなくては。

懇親会は、終電になるので辞めてしまった。 行きたかった。

以上。