canvas系ライブラリのあれやこれや2015
TRANSCRIPT
Canvas系ライブラリのあれやこれや 2015
自己紹介幸脇 健太（コウワキ ケンタ）です
フリーランス1年目で コウワキデザイン という屋号でやっています
元Flasherなフロントエンドエンジニアです
最近はサーバやバックエンド言語もさわってます
Twitter : @kuwk
Web : http://kuwk.jp
/* 注意 */
・個人の体験を多分に含みます ・そのため情報に偏りがあります ・マサカリは…
受託系フロントエンドエンジニア がさわってきた
Canvas系ライブラリ
今日のアジェンダ
どんなときに Canvasを使いますか
自分の場合は 主にゲーム制作
enchant.js CreateJS tmlib.js
Cocos2d-JS
それぞれの使用感は？
enchant.js
制作物：ブロック系パズルゲーム
使ったころのバージョンはv0.4 （最新は、v0.8.2）
実はその頃はまだCanvas非対応
非常にとっつきやすかった
//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(); //ゲーム実行 }
CreateJS制作物：オセロゲーム、某社さんのR18なゲーム
情報が多いのは大きなメリット
Flashから書き出せる
ただ意外に変なところではまる ・zoomでボタンのヒットエリアのずれ ・ブラウザをリロードしても重いまま
どの端末でも画面にフィットさせたい
理想
ボタン
ヒットエリア
bodyにzoomかけると
ボタンヒットエリア
でも実際は
ボタンヒットエリア
ボタン
ヒットエリア
bodyにzoomかけると
zoomでボタンのヒットエリアのずれ 端末毎にフィットするようbodyにzoomを使うとボタンのヒットエリアがずれてしまう
ボタン
ボタン
ヒットエリア
ヒットエリア 理想
bodyにzoomかけると
ボタンヒットエリア
Canvas要素に対して、 css3のtransformでサイズ調整することで解決
canvas { -webkit-transform-origin: top left; -webkit-transform: scale3d(0.5, 0.5, 0.5); }
ブラウザをリロードしていくと どんどん動作が重くなっていく
解決できず
制作物：バブル系パズルゲーム
ゲーム制作向けに作られていて 画面管理が簡単
気軽に試せる （http://phi-jp.github.io/runstant/）
今は後継のphina.jsが開発されてる （http://phinajs.com/）
tmlib.js
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() {} //タッチ処理
}
番外編
swf2js
swfのバイナリをJSで読み込んでCanvasに出力
つまり swfをまるっと
Canvas化してくれる
Flash Lite1.x / 2.x ActionScript 1.0 / 2.0
対応
詳しくはこちら http://qiita.com/ienaga/items/b4412baa95afe882907b http://qiita.com/ienaga/items/c9f04d6cd9874d4ec1a7
<script type="text/javascript" src=“swf2js.js”></script>
<script type="text/javascript"> swf2js.load('hoge.swf');
</script>
すごい！
Flashは死なない！
ご静聴ありがとうございました