-
-
分散型SNSのMastodonはこれからのスタンダードとなりうるのか
-
さくっとCreateJSで遊ぶ
制作部の稲葉です。
今回はCreateJS公式サイトのチュートリアルを元にtweenjsを学んでみました。
元となるチュートリアルはこちらです。
詳細はリンク先を見て頂くとして、その中のinit()内だけにフォーカスして行きますね。
// チュートリアル
function init() {
var stage = new createjs.Stage("demoCanvas");
var circle = new createjs.Shape();
circle.graphics.beginFill("Crimson").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
createjs.Tween.get(circle, {loop: true})
.to({x: 400}, 1000, createjs.Ease.getPowInOut(4))
.to({alpha: 0, y: 75}, 500, createjs.Ease.getPowInOut(2))
.to({alpha: 0, y: 125}, 100)
.to({alpha: 1, y: 100}, 500, createjs.Ease.getPowInOut(2))
.to({x: 100}, 800, createjs.Ease.getPowInOut(2));
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
}
ここから少しずつ変更していきます。まずさっくとネコを用意します。
このネコにぴょこぴょこ飛び跳ねてもらうのが目標です。
まず右にすっと移動するイージングを、飛び跳ねている風の動きに変更してみます。
function init() {
var stage = new createjs.Stage("demoCanvas");
var circle = new createjs.Shape();
circle.graphics.beginFill("Crimson").drawCircle(0, 0, 50);
circle.x = -25; //開始位置変更
circle.y = 250; //開始位置変更
stage.addChild(circle);
createjs.Tween.get(circle, {loop: true})
.to({x: 200}, 3000, createjs.Ease.elasticOut); //イージング変更
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
}
こんな感じでしょうか。
次に、createjs.Bitmapを使って赤い円をネコの画像に変更してみます。
function init() {
var stage = new createjs.Stage("demoCanvas");
var cat = new createjs.Bitmap("http://jsrun.it/assets/i/G/L/Y/iGLYn.png"); //ネコに変更
cat.x = -100; //開始位置変更
cat.y = 100; //開始位置変更
stage.addChild(cat);
createjs.Tween.get(cat, {loop: true})
.to({x: 200}, 3000, createjs.Ease.elasticOut);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
}
まだ、横に移動しているので、縦方向の移動にしましょう。
function init() {
var stage = new createjs.Stage("demoCanvas");
var cat = new createjs.Bitmap("http://jsrun.it/assets/i/G/L/Y/iGLYn.png");
cat.x = 150; //開始位置変更
cat.y = 500; //開始位置変更
stage.addChild(cat);
createjs.Tween.get(cat, {loop: true})
.to({y: 200}, 3000, createjs.Ease.elasticOut); //y軸移動に変更
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
}
canvasサイズが500pxで基準位置がcanvasの上になるので、yは500から始めました。
良い感じになってきましたが、もう少しネコを増やしたくなってきました。
適当に4匹にしてみます。
function init() {
var stage = new createjs.Stage("demoCanvas");
//ネコを増やす
var cats = [];
for(var i = 0, l = 4; i < l; i++){
cats[i] = new createjs.Bitmap("http://jsrun.it/assets/i/G/L/Y/iGLYn.png");
cats[i].x = i * 100;
cats[i].y = 500;
stage.addChild(cats[i]);
createjs.Tween.get(cats[i], {loop: true})
.to({y: 200}, 3000, createjs.Ease.elasticOut);
}
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
}
高さがそろったジャンプが見られるようになりました。
でもどうせならランダムにジャンプする方が自然ですね。
function init() {
var stage = new createjs.Stage("demoCanvas");
var cats = [];
for(var i = 0, l = 4; i < l; i++){
cats[i] = new createjs.Bitmap("http://jsrun.it/assets/i/G/L/Y/iGLYn.png");
cats[i].x = i * 100;
cats[i].y = 500;
stage.addChild(cats[i]);
createjs.Tween.get(cats[i], {loop: true})
.to({y: (200 * Math.random())}, (3000 * (Math.random()+1)), createjs.Ease.elasticOut); //高さと時間をランダムに
}
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
}
無事にぴょこぴょこ元気にジャンプするネコが見られました。
まだ変更したい部分はありますが、今回はここまでです。最終コードはこちらから確認できます。
(埋め込みできなかった、、、)それではまた。
-
久々にライブに行きました
-
オフショア開発の増加現象
-
問い合わせフォーム不具合のお知らせとお詫び
弊社ホームページをご利用いただき、誠にありがとうございます。
この度、問い合わせフォーム（https://vitalify.jp/contact/）の不具合により、ご送信頂いたお問い合わせが一部確認できていない可能性のあることが判明いたしました。
現在は復旧しております。以下の期間に、お問い合わせいただいた方は誠にお手数ですが、問い合わせフォームより再度ご連絡いただきますよう、よろしくお願い申し上げます。
◆不具合が生じていた期間◆
2017年4月12日頃～5月30日お問い合わせを頂きました皆様に、大変ご迷惑をおかけしましたことを深くお詫び申し上げます。
以後かかることがなきよう、細心の注意を払い対応していく所存です。
