受託系フロントエンドエンジニアが今年さわったCanvas系ライブラリ（enchant.js、CreateJS、tmlib）について

1. Canvas系ライブラリの
あれやこれや 2015

2. 自己紹介
幸脇 健太（コウワキ ケンタ）です
フリーランス1年目で
コウワキデザイン
という屋号でやっています
元Flasherなフロントエンドエンジニアです
最近はサーバやバックエンド言語もさわっ
てます
Twitter : @kuwk
Web : http://kuwk.jp

3. /* 注意 */
・個人の体験を多分に含みます
・そのため情報に偏りがあります
・マサカリは…

4. 受託系フロントエンドエンジニア
がさわってきた
Canvas系ライブラリ
今日のアジェンダ

5. どんなときに
Canvasを使いますか

6. 自分の場合は
主にゲーム制作

7. enchant.js
CreateJS
tmlib.js
Cocos2d-JS

8. それぞれの使用感は？

9. enchant.js
制作物：ブロック系パズルゲーム
使ったころのバージョンはv0.4
（最新は、v0.8.2）
実はその頃はまだCanvas非対応
非常にとっつきやすかった

10. //v0.4のものなので今は多少変わってると思います。
//enchant初期化
enchant();
var game = new Game(640, 960); //画面サイズ設定
game.preload(['./img/title.png, ./img/game.png ]); //プリロード
game.fps = 30; //フレームレート
game.onload = function() {
var titleScene = new Scene(); //タイトル画面生成
game.rootScene.addChild(titleScene);
var title = new Sprite(w, h); //タイトル生成
title.image = './img/title.png';
title.x = 100;
title.y = 50;
titleScene.addChild(title);
title.addEventListener("touchstart", function(e) {
game.pushScene(gameScene); //ゲーム画面へ
});
game.start(); //ゲーム実行
}

11. 詳しくはこちら
http://enchantjs.com/ja/

12. CreateJS
制作物：オセロゲーム、某社さんのR18なゲーム
情報が多いのは大きなメリット
Flashから書き出せる
ただ意外に変なところではまる
・zoomでボタンのヒットエリアのずれ
・ブラウザをリロードしても重いまま

13. どの端末でも画面に
フィットさせたい

14. 理想
ボタン
ヒットエリア
bodyにzoomかけると
ボタン
ヒットエリア

15. でも実際は
ボタン
ヒットエリア
ボタン
ヒットエリア
bodyにzoomかけると

16. zoomでボタンのヒットエリアのずれ
端末毎にフィットするようbodyにzoomを使うとボ
タンのヒットエリアがずれてしまう
ボタン
ボタン
ヒットエリア
ヒットエリア
理想
bodyにzoomかけると
ボタン
ヒットエリア

17. Canvas要素に対して、
css3のtransformでサイズ
調整することで解決

18. canvas {
-webkit-transform-origin: top left;
-webkit-transform: scale3d(0.5, 0.5, 0.5);
}

19. ブラウザをリロードしていくと
どんどん動作が重くなっていく

20. 解決できず

21. 制作物：バブル系パズルゲーム
ゲーム制作向けに作られていて
画面管理が簡単
気軽に試せる
（http://phi-jp.github.io/runstant/）
今は後継のphina.jsが開発されてる
（http://phinajs.com/）
tmlib.js

22. tm.define('MainScene', {
superClass: "tm.game.ManagerScene",
init: function(app) {
this.superInit({
scenes: [ //画面遷移設定
{
className: tm.game.LoadingScene , //ローディング
label: "loading",
arguments: {
assets: {//プリロード
"titleBg":{path: "./img/bg_ground.png", type: png"},
"gameBg":{path:"./img/chara.png", type: png"},
},
width: 640,
height: 960,
bgColor:"white",
autopop: true
}
}, {
className: tm.game.TitleScene", //タイトル画面
label: title",
arguments: { //画面設定
title : "ゲームタイトル",
message: "",
bgColor: "black",
bgImage: "title",
width : 640,
height : 960,
fontColor: "white",
fontSize: 60,
autopop: true
}, {
className: GameScene ,//ゲーム画面
label: "game"
arguments: {
bgImage: "gameBg"
}
},
]
});
},
});
tm.main(function() {
var app = tm.app.CanvasApp( #app"); // アプリケーション作成
app.resize(gameWidth, gameHeight); // 画面サイズに合わせる
app.fitWindow(); // リサイズ対応
app.replaceScene(MainScene(app)); // シーンの切り替え
app.run(); // tmlibの実行
});
tm.define("GameScene", { //ゲーム画面の処理
superClass : "tm.app.Scene",
init : function() {}, //初期実行
update: function (app) {}, //update処理
onpointingstart: function() {} //タッチ処理
}

23. 番外編

24. swf2js

25. swfのバイナリをJSで読
み込んでCanvasに出力

26. つまり
swfをまるっと
Canvas化してくれる

27. Flash Lite1.x / 2.x
ActionScript 1.0 / 2.0
対応

28. 詳しくはこちら
http://qiita.com/ienaga/items/b4412baa95afe882907b
http://qiita.com/ienaga/items/c9f04d6cd9874d4ec1a7

29. <script type="text/javascript" src= swf2js.js ></script>
<script type="text/javascript">
swf2js.load('hoge.swf');
</script>

30. すごい！

31. Flashは死なない！

32. ご静聴ありがとうございました