• さくっと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);
    }

    チュートリアル画像
    ここから少しずつ変更していきます。

    まずさっくとネコを用意します。
    ねこイラスト1

    このネコにぴょこぴょこ飛び跳ねてもらうのが目標です。

    まず右にすっと移動するイージングを、飛び跳ねている風の動きに変更してみます。

    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);
    }

    ねこイラスト2
    まだ、横に移動しているので、縦方向の移動にしましょう。


    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);
    }

    ねこイラスト3
    高さがそろったジャンプが見られるようになりました。
    でもどうせならランダムにジャンプする方が自然ですね。


    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);
    }

    ねこイラスト4
    無事にぴょこぴょこ元気にジャンプするネコが見られました。
    まだ変更したい部分はありますが、今回はここまでです。

    最終コードはこちらから確認できます。
    (埋め込みできなかった、、、)

    それではまた。


    投稿日:

    カテゴリー 技術 / デザイン / 制作
  • Googleの画像認識API「Cloud Vision API」を使って画像判定をしてみた

    itouhirotaka

    こんにちは、ロボホンに興味がある中村です。

    ロボホンを始め、巷では人工知能や機械学習というワードが非常に騒がれています。

    世の中の流れに取り残されないように機械学習について最近勉強しています。

    今回そんな機械学習系サービスのひとつであるGoogle社の画像認識APIサービス「Cloud Vision API」を使ってみました。
    “Googleの画像認識API「Cloud Vision API」を使って画像判定をしてみた”の続きを読む


  • htmlの勉強を始めるならこれ!おすすめサイトまとめ

    こんにちは、制作部の松村です。
    フロントエンドエンジニアになって1年経ちました。はやいですね。
    1年前は初心者丸出しもいいところでした。
    今回は、そんな初心者へっぽこエンジニアだった1年前の私が、フロントの勉強をするのに使った
    個人的おすすめサイトを紹介したいと思います!
    “htmlの勉強を始めるならこれ!おすすめサイトまとめ”の続きを読む


    投稿日:

    カテゴリー 技術 / デザイン / 制作
  • レゴバットマン ザ・ムービー

    今回は石川が見てよかった映画の紹介をします。
    それは「レゴバットマン ザ・ムービー」です。

    本作は2014年に公開された「LEGO ムービー」のスピンオフです。
    レゴブロックの世界を舞台にレゴのバットマンと仲間たちが大活躍します。

    僕はとにかく前作が大好きでした。
    レゴで長編映画を一本作るという無謀にも思える課題をなんなくこなし、数々の巧みなギャグと演出、
    そして創造することとは何かという問いかけるメッセージ性の高いストーリー。

    「レゴのアニメなんて…」と思っている方にこそ見て欲しい、大傑作だったと思います。

    今回は「LEGO ムービー」でも登場したバットマンを主役にした話です。

    皆が知っているバットマンの、暗くて、ニヒルなイメージを逆手に取ったギャグは
    非常に面白い!

    “レゴバットマン ザ・ムービー”の続きを読む


  • デザインパターンとは?活かし方を考える

    こんにちは、UMLのL1試験を8年ぐらい前に取得した中村です。
    当時周りでなんでも(彼女の作り方とか)モデリングするのが流行っていました。

    UMLとはモデリングの手法ですが、ソフトウェアにはオブジェクト指向を始め、様々な定義方法があります。

    今回はそのソフトウェア開発における定義の一つであるデザインパターンについて書いてみました。

    このデザインパターンを生かすと以下のようなメリットが実現できます。
    ・機能の追加・更新がしやすくなる!
    ・バグの原因を特定しやすくなる!
    ・エンジニア同士でコミュニケーションをとりやすくなる!

    スピードを求められるWeb業界でとっても活かせそうですね。

    “デザインパターンとは?活かし方を考える”の続きを読む


  1. ページ 1

  2. ページ 2

  3. ページ 25