Javascriptでスプライトシートアニメーション

気が付けば、今年の挨拶をすることなく、すでに2月。今更ながらあけm、・・いや、もうやめておこう。
ちなみに正月休み等の連休もメインPCを1回も起動することなく終わってしまいました。ネットブックはかろうじて開くんですけどね。

そんな中、とりあえず何をしているかというと、ゲーム製作はそっちのけで、取りあえず何か公開・配布できるものを作ろうと思ってアプリ製作に注力しています。あ、いや、することにしました。いつからって?さっき。

メインPCでしか動かないような大型開発環境では続かないということは分かっているので、ネットブックで動く開発環境でというと、HTML、Javascriptを主体とするしかない。

そして、久々の一人の休日、一日かけて出来たのがこれ。
《クリックエフェクトアニメーション》
http://tiblab.net/programming/javascript/touch-effect/
クリック(またはタップ)すると、薄緑の円が抜け出せないほわ~んとアニメーションします。

ダウンロード
http://tiblab.net/cgi-bin/download/?id=touch-effect


いや、待って。何でこれなんだ!っと言う疑問はひとまず置いといて、実はこのほわ~んは下のスプライトシートと呼ばれる画像を使用するんですが、この画像自作です。
touch_effect.png

何で作ったかと言うと、Blenderです。いやー、久々に使いましたね!Blender!
最初はフリー素材探してたんですが、案外ないものですね。





Blenderファイル


ソース
○touch_effect.js
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
 
var spriteSheetData = {
"images": ["touch_effect.png"],
"frames":
{
"height": 64,
"width":64,
"regX": 0,
"regY": 0,
"count": 15
},
"animations": { "touch": [0, 15] }
}
 
var stage;
var spriteContainer = [];
var spriteFrames = [];
 
function init() {
var canvasElement = document.getElementById("canvas");
stage = new createjs.Stage(canvasElement);
createjs.Ticker.setFPS(30);
canvas.addEventListener("mousedown" , click);
createjs.Ticker.addEventListener("tick", showEffect);
}
 
function click(event) {
var spriteSheet = new createjs.SpriteSheet(spriteSheetData);
var sprite = new createjs.Sprite(spriteSheet,"touch");
sprite.x = stage.mouseX-64/2;
sprite.y = stage.mouseY-64/2;
 
stage.addChild(sprite);
spriteContainer.push(sprite);
spriteFrames.push(0);
}
 
function showEffect(event){
if(spriteContainer.length==0){
return;
}
stage.update();
frame = spriteFrames[0];
if(frame > 15){
stage.removeChild(spriteContainer[0]);
spriteContainer.splice(0, 1);
spriteFrames.splice(0, 1);
}
for(var i=0;i<spriteFrames.length; i++){
spriteFrames[i] = spriteFrames[i]+1;
}
}
 
window.onload = init;
 


○index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>クリックエフェクトアニメーション</title>
<style type="text/css">
<!--
canvas {
background-color: #eaeaea;
width: 320px;
}
-->
</style>
<script type="text/javascript" src="createjs-2014.12.12.min.js"></script>
<script type="text/javascript" src="touch_effect.js"></script>
</head>
<body>
<h1>クリックエフェクトアニメーション</h1>
<canvas id="canvas"></canvas>
<p>CreateJSを使用</p>
<footer>Powered by <a href="//tiblab.net">TiBra</a></footer>
</body>
</html>


Javascriptフレームワークとして、CreateJSを使用。

CreateJS
http://createjs.com/

さて、これを作った経緯ですが、
家の家具類をレイアウトするアプリを作ろうとしてまして、
やっている内になんか座標の取得がおかしいなっと思いまして、
タップした座標をマーキングする機能が欲しくなりまして、
どうせなら格好良くしてみようと遊心を抱きまして、
拾ってきたコードがうまく動作せずドツボにはまりまして、この様です。
まさか脱線して一日使い果たすとは・・。

しかも、いざ適用すると、このライブラリを使うと、自前で実装した部分が機能しなくなることが判明。結局、使えず終い。僕の休日は何だったんだろう。

僕が初級者という事もあるけど、とにかくJavascriptはデバックが面倒。ハマったら抜け出せない。やっぱPythonがいいなぁ。
関連記事

コメント

コメントの投稿

非公開コメント

このブログについて
□ ブログ内容
決まった趣旨はありません。
興味を持ったこと・日常で行ったことを何でも書きます。

3DCG・プログラミングなどが多めです。

□ 現在の活動
・ウェブサイト制作
 (http://tiblab.net)
・3Dゲーム制作
 (コックパニック)
検索フォーム
ユーザータグ

Blender キャプチャ blendファイル BGE Python GameEngine ムービー Android CG  Red5 Terragen C# C++ 

カテゴリー
プロフィール

TiBra

Author:TiBra
趣味でCG制作、プログラミング等を行っています。メイカーズに憧れています。

ネットを通じた交流を広げたく思っていますので、コメント・メールはお気軽にどぞー

戯言程度のことは、こちらのブログに投稿しています。基本戯言なので、実質移転しているようなものです。

Mail:tibraあっとlive.jp
HP:TibLabmemocode
動画:VimeoFC2動画ニコニコ
ファイル:SkyDrive
企画:3Dゲーム作業実況

Blogリンク
不都合がございましたらご連絡ください。
当ブログのリンクバナー
FC2カウンター
RSSフィード+解析コード