20121116 k lab_html5イベント
- 2. ゲームで使ってる
Flash演出の種類
• レベルアップ・ステージクリア
• クエスト進行
• カードバトル
• ガチャ
• その他
2
12年12月11日火曜日
- 3. デバイス別
利用するFlashの種類
• フィーチャーフォン
• FlashLite 1.1
• Android4未満
• FLashLite 2.0
• iPhone, Android4以上
• Flash再生不可＞＜
3
12年12月11日火曜日
- 6. ツールを使ってFlashをHTML5
に変換する
• メリット
• フィーチャーフォン向けに制作したFlashを
そのまま使用できる
• デメリット
• 表現が方法が限られる
• できることがツールに依存する
6
12年12月11日火曜日
- 8. プラットフォームが
提供するツールを使う
• モバゲー
• ExGame
• gree
• Reel
8
12年12月11日火曜日
- 9. プラットフォームが
提供するツールを使う
• メリット
• 再現性が高い！
• デメリット
• パートナーデベロッパーしか使えない
• 他のプラットフォームやプラットフォームに乗ら
ない場合使えない
9
12年12月11日火曜日
- 10. 割愛します
10
12年12月11日火曜日
- 12. フリーの変換ツールを使う
• メリット
• CSS/JSで自主制作するよりは低コスト
• プラットフォーム問わず利用可能
• デメリット
• 開発途上で再現性が低いツールが多い
• いつ開発打ち切りになるかわからない
12
12年12月11日火曜日
- 13. Flash変換ツールの種類
• flaファイル変換タイプ
• Adobe Wallaby, CreateJS
• swfファイル変換タイプ
• Google Swiffy
• Javascriptで書かれたFlashプレイヤー
• mozilla Shumway
13
12年12月11日火曜日
- 14. Flash変換ツールの選定条件
• 動的に生成するFlashに対応できること
• FlashLiteに対応してること
14
12年12月11日火曜日
- 15. フリーの変換ツールを使う
• Adobe Wallaby
•☓開発がストップしてそう。。
• CreateJS
•☓FlashLiteに対応してない
• Google Swiffy
•○ 変換後のデータがJSONで扱いやすい
• mozilla Shumway
•○ 動的に生成したSwfをそのまま再生できる
15
12年12月11日火曜日
- 17. Swiffyを使った
動的Flashの生成方法
• デメリット
• 描画にSVGを使うのでAndroid4未満では表示できな
い！
• ⇛Android4未満だとFlashプレイヤー入ってるはずだから気にしない！
17
12年12月11日火曜日
- 19. <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Swiffy output</title>
<script src="https://www.gstatic.com/swiffy/v4.9/runtime.js"></script>
<script>
swiffyobject = {$swiffy_tmpl};
</script>
<style>html, body {width: 100%; height: 100%}</style>
</head>
<body style="margin: 0; overflow: hidden">
<div id="swiffycontainer" style="width: 480px; height: 640px">
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject);
stage.start();
</script>
</body>
</html>
19
12年12月11日火曜日
- 20. $vars = array(
'koudou0' => 96, 'koudou1' => 98,
'tairyoku0' => 1340, 'tairyoku1' => 1350,
'lv0' => 33, 'lv1' => 29
);
foreach($vars as $key => $val){
$var_str ='{"value":"'.$key.'","type":305},';
$var_str.='{"value":'.$val.',"type":305},';
$var_str.='{"type":29}';
$swiffy_vars[]=$var_str;
} {"value":"koudou0","type":305},
{"value":"96","type":305},
{"type":29},
$swiffy_vars_str = implode(',', $swiffy_vars); {"value":"koudou1","type":305},
{"value":"98","type":305},
{"type":29},
{"value":"lv0","type":305},
{"value":"33","type":305},
{"type":29},
{"value":"lv1","type":305},
{"value":"34","type":305},
{"type":29},
{"value":"tairyoku0","type":305},
{"value":"1340","type":305},
{"type":29},
{"value":"tairyoku1","type":305},
{"value":"1350","type":305},
{"type":29}
20
12年12月11日火曜日
- 21. $swiffy_tmpl =
str_replace("%%SWIFFY_VARS%%",
$swiffy_vars_str,
$swiffy_tmpl);
$swiffy_tmpl =
str_replace("%%IMG_NPC%%", $val,
$swiffy_tmpl);
21
12年12月11日火曜日
- 23. Flashと同等のコンテンツを
自主制作する
• メリット
• スマフォに適したUIを提供できる
• デメリット
• 制作できる人が少ない
• 時間がかかる
23
12年12月11日火曜日
- 25. JS/CSSを駆使して自主制作
• メリット
• CSS/JSの知識を蓄えられる
• デメリット
• とにかくしんどい。。。
25
12年12月11日火曜日
- 28. HTML5オーサリングツール
を使う
• すいません。。使ってません。
• Adobe Edge, mozilla PopcornMaker 等
• まだまだ調査不足
• 扱える人が少ない
• 最終的に出力されるHTML5を動的にいじれ
るなら使いたい。
• 詳しい人教えてください。
28
12年12月11日火曜日
- 29. まとめ
• フィーチャーフォン
• FlashLite 1.1
• Android4未満
• FLashLite 2.0
• iPhone, Android4以上
• FLashLite 2.0を変換 or 自主制作
29
12年12月11日火曜日
