Tweenの並行実行

0

    ひとつのオブジェクト(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');


    imageAlphaの一括処理

    0

      pngを一括圧縮する、なかなかよいツールが見つからない。

       

      ・imageAlpha 圧縮率が高く、細かい調整が可能だが、一括圧縮ができない。

      ・PNG mini.app 一括処理は便利、圧縮率もそこそこだが、調整ができない。

      ・PNG Compressor.app 一括処理はできるが、圧縮率が低い。

      ・Pngyu.app 一括処理も可能で、圧縮調整が可能だが、何故か色が変わってしまう場合がある。

      ・iMage Tools.app 圧縮ではなく、一括リサイズやファイルタイプの変換ができるツール

      ・ImageOptim.app 不要なメタ情報を削除するツール

      etc...

       

      調べていたら、ターミナルから直接コマンドを実行する方法を発見。メモ。

       

      /Applications/ImageAlpha.app/Contents/MacOS/pngquant --speed 1 --force --ext .png 64 *.png; open -a imageoptim *.png

       

      ※数字は色数


      サウンド実装用コピペ

      0

        var loadedSounds=0;
        var assetPath = "./sounds/";
        var sounds = [
        {src:"click.mp3",id:"click"},

        {src:"bgm.mp3",id:"bgm"}
        ];

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

         

        function pauseBGM(bol){

        bgm.setPaused(bol);

        }

        function seekBGM(num){

        bgm.setPosition(num);

        }


        IEでbackground-attachment: fixedがガタつく問題を解決

        0

          パララックス的な表現につかう、背景画像の固定cssが

          IEだと最新版でもガタガタする不具合がある。 ググって解決方法を探したので、覚書。

          if(navigator.userAgent.match(/MSIE 10/i) || navigator.userAgent.match(/Trident¥/7¥./) || navigator.userAgent.match(/Edge¥/12¥./)) { $('body').on("mousewheel", function () { event.preventDefault(); var wd = event.wheelDelta; var csp = window.pageYOffset; window.scrollTo(0, csp - wd); }); }

           

          引用元:http://cloud-collector.link/2016/05/08/ie-fixed-scroll-bug/

           


          スプライト機能でキャラクターアニメーション

          0

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


            | 1/21PAGES | >>

            selected entries

            categories

            archives

            recent comment

            recommend

            profile

            BOOKS

            links

            search this site.

            others