スマホ(android,ios)＋WEBブラウザ(IE,Chrome,Firefox)全部で動くアニメーションを作る方法
mixiアプリのスマホ＋PC版で同じソースを使って
アニメーションを描画できないか調査しました。
GREEなどのアプリを見ると、AndroidはFlashで、iOSではSVGなどで表示しているものも
多くあるようです。
ただ、個人でアプリを作る場合など、
なるべく工数や変換に掛かるコストを減らしたいものです。
下記、５種類のなかで、今回採用したのは5)です。
簡単なソースを貼り付けたのでこれを元に
開発をしていこうと思います。
1)GoogleSwiffyを使ってFlash->SVG変換
http://www.google.com/doubleclick/studio/swiffy/
↓
SVGを使うのでandroidで再生できず
android×
ios〇
IE,Chrome,Firefox〇
4)ユーザーエージェントでFlashとSVGを切替
工数かかる...
<?php function return_useragent_code(){ $isiPhone = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPhone'); $isiPod = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPod'); $isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad'); $isAndroid = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'Android'); if($isiPad){return 1;} else if($isiPod){return 2;} else if($isiPhone){return 3;} else if($isAndroid){return 4;} else{return 5;} } ?>
5)純粋なhtml5のみで描き、IEはexcanvas.jsで動かす
↓
全部動く！excanvas.jsは動かない関数もあることに注意。
5-1)・動的にcanvasを使用している場合。->getElementByIdで取得している場合は問題ない。
5-2)uupaa-excanvas.jsとExplorerCanvasで微妙に対応している関数が違う
uupaa-excanvas.js 未実装: MaxWidth, strokeText(in Silverlight) 制限あり: createLinearGradient, createRadialGradient, clip, drawImage, globalCompositeOperation, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY ExplorerCanvas 未実装: clip, createPattern, createRadialGradient, globalCompositeOperation, テキストAPI(strokeText, fillText, measureText, textAlign等), Shadow API(shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY) 制限あり: drawImage, fillStyle, strokeStyle, clearRect, drawImage + 移動/変形
5-3)onloadが実行されない様子なので外したら動いた
img_1.src = "/jpg/test1.png"; //img_1.onload = function(){ ctx.drawImage(img_1,initEnemy.x,initEnemy.y); //}
6)サンプルコード
6-1)画像を用意
6-2)動かし方を考える
6-3)ソース
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if IE]><script type="text/javascript" src="./excanvas_r3/excanvas.compiled.js"></script><![endif]-->
<title>canvas test</title>
</head>
<style type="text/css">
<!--
canvas#testCanvas{
display:block;
margin:0 auto;
margin-top:0;
margin-left:0;
}
-->
</style>
<body>
<div style="text-align:center;">
<canvas id="testCanvas" width="320" height="320" style="border:0px solid #CCC;"></canvas>
</div>
<script type="text/javascript">
//制御
var timerID;
var cW=320;
var cH=320;
var back_X=0;
var back_Y=0;
var human_X=-50;
var human_Y=0;
window.onload = function(){
setTimer();
}
//フレームレート
function setTimer(){
clearInterval(timerID);
timerID = setInterval("setMove()", 100);
}
//制御
function setMove(){
back_Y-=50;
human_X+=2;
draw();
}
var i=0;
//描画
function draw(){
//Canvas
var canvas=document.getElementById('testCanvas');
if (!canvas||!canvas.getContext) return false;
var ctx = canvas.getContext('2d');
//refresh
ctx.clearRect(0,0,cW,cH);
//images
back_img = new Image();
back_img.src = "/jpg/back.png";
human_img = new Image();
human_img.src = "/jpg/human.png";
char_img = new Image();
char_img.src = "/jpg/char.png";
ctx.drawImage(back_img, back_X, back_Y);
ctx.drawImage(human_img, human_X, human_Y);
i+=1;
if(i%5==0){
ctx.drawImage(char_img, 0, 100);
}
}
</script>
</body>
</html>
