オブジェクトの乗算
- 2023.01.19 Thursday
- createjs、canvas
- 23:07
- -
- -
- -
- by DESIGN PEKE
ひとつのオブジェクト(target)の複数のパラメータを異なるタイミング・イージングでアニメーションさせたい場合の書き方メモ。
var timeline = new createjs.Timeline([], { start: 0 }, { paused: true });
timeline.addTween(
createjs.Tween.get(target).wait(0).to({ x: 100 }, 1000, createjs.Ease.quartOut),
createjs.Tween.get(target).wait(100).to({ y: 100 }, 1000, createjs.Ease.quartIn)
);
timeline.gotoAndPlay('start');
var loadedSounds=0;
var assetPath = "./sounds/";
var sounds = [
{src:"click.mp3",id:"click"},
{src:"bgm.mp3",id:"bgm"},
{
src:"se_set.mp3",
data: {
audioSprite: [
{id:"se_1", startTime:0, duration:2000},
{id:"se_2", startTime:5000, duration:2000},
{id:"se_3", startTime:10000, duration:2000},
]}
},
];
var bgm;
$(function(){
//createjs.Sound.alternateExtensions = ["mp3"];//任意?
createjs.Sound.on("fileload", handleLoad);
createjs.Sound.registerSounds(sounds, assetPath);
});
function handleLoad(evt){
loadedSounds++;
if(loadedSounds>=sounds.length){
console.log("complete");
}
}
function playSE(str){
createjs.Sound.play(str);
}
function playBGM(){
bgm=createjs.Sound.play("bgm",{loop:-1});
bgm.volume=0.2;
bgm.addEventListener("complete", function(){
// musicEnd();
});
}
function pauseBGM(bol){
bgm.setPaused(bol);
}
function seekBGM(num){
bgm.setPosition(num);
}
//キュー方式
var queue;
queue = new createjs.LoadQueue(true);
queue.installPlugin(createjs.Sound);
createjs.Sound.alternateExtensions = ["mp3"];
queue.addEventListener("progress", function(e){
//進行
});
queue.addEventListener("complete", function(){
//完了
});
queue.loadManifest(sounds);
createjsにはスプライト機能があって、簡単にキャラクターアニメーションができる。
このとき使用するスプライトシートは、animate(FLASH)を使って作成できる。
//スプライトシートの定義
var chara = {
images: ["chara.png"],
frames: {width:100, height:100,imageIndex:0,regX:50,regY:50},
animations: {
stand:0, //固定フレーム
walk:[1,2], //ループフレーム
jump:[1,7,"walk"] //一回再生フレーム。最終パラメータは終了後のラベル
shoot: { //詳細なパラメータはオブジェクトで設定可能
frames: [0, 3, 4, 5],
next: "walk",
speed: 0.5
}
}
};
//スプライトシートとスプライトを紐付け
var spriteSheet=new createjs.SpriteSheet(chara);
var sprite=new createjs.Sprite(spriteSheet);
stage.addChild(sprite)
//スプライトの切り替え
sprite.gotoAndPlay( "jump");
sprite.gotoAndStop( "stand");
createjs.Graphics.prototype.drawCircleEx = function( x, y, radius, startAngle, endAngle ) {
var cos = Math.cos( startAngle );
var sin = Math.sin( startAngle );
this.moveTo( x, y )
.lineTo( x + radius * cos, y + radius * sin )
.arc( x, y, radius, startAngle, endAngle );
};
obj.graphics.drawCircleEx(x座標,y座標,半径,スタート角radian,エンド角radian);
■まずこれをやらないと、ほとんどなんも効かない
var stage=new createjs.Stage("mycanvas");
createjs.Touch.enable( stage )
■マウスダウン
obj.addEventListener('mousedown', function(evt){
})
■マウスアップ
obj.addEventListener('mouseup', function(evt){
})
■クリック
obj.addEventListener('click', function(evt){
})
■ドラッグ開始(座標取得)
obj.addEventListener('pressmove', function(evt){
evt.target.x = evt.stageX;
evt.target.y = evt.stageY;
})
■ドラッグ終了
obj.addEventListener('pressup', function(evt){
})
createjs最新版はマルチタッチに対応。
複数オブジェクトのタッチイベントは同時に実行可能。
もちろん、1オブジェクト内のマルチタッチも個々に取得できる。すげえ。
■マルチタッチイベント時のインデックス取得
obj.addEventListener('mousedown', function(evt){
console.log(evt.nativeEvent.targetTouches[0])
}
■マウスオーバーは以下
stage.enableMouseOver();
obj.addEventListener("mouseover", function(evt){
});
obj.addEventListener("mouseout", function(evt){
});
■フレームレートの設定
createjs.Ticker.setFPS(60)←効かない??
createjs.Ticker.framerate = 60;
createjs.Ticker.timingMode = createjs.Ticker.RAF;
■毎フレーム実行
createjs.Ticker.addEventListener("tick",function(){
//実行命令
})