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


    サウンド実装用コピペ

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

      }


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

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


        createjsで弧を描く

        0

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


          createjsで、キャンバスの横幅はブラウザ準拠、天地はなりゆきの設定

          0
                var aspect=stageHeight/stageWidth;
                $("#mycanvas")[0].width=canvasWidth;
                $("#mycanvas")[0].height=canvasWidth*aspect;
                $("#mycanvas").width(stageWidth);
                $("#mycanvas").height(stageHeight);

            Tweenアニメーションのコピペ

            0
              createjsのTweenのやりかたはいろいろあるけど、よく使うパターンをコピペ用に貼る。

               var tween=createjs.Tween.get(target,{override:true})
                          .wait(0)  //ディレイ
                          .to({x:100},1000,createjs.Ease.quartInOut)
                          .call(function(){
                             //コールバック
                          })
                          .addEventListener("change",function(e){
                   //ステップ処理
                          });
               

              タッチイベント関連

              0

                ■まずこれをやらないと、ほとんどなんも効かない
                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){

                });

                 

                 

                 


                イメージの読み込み、プリロード

                0
                  シェイプを画像で塗りつぶすときは、プリロードしないとだめ。

                  ■いっちゃんシンプル
                  var bmp=new createjs.Bitmap("hoge.png");


                  var loader=new createjs.LoadQueue(false);
                  loader.addEventListener("complete",function(evt){
                    _image = evt.target.getResult("image1");
                  })
                  var file="hoge.png";
                  loader.loadFile({src:file, id:"image1"});   
                  var bmp=new createjs.Bitmap(file);


                  ■読み込みパターン2:
                  var img=new Image();
                      img.onload=function() {
                          var drawarea=new createjs.Shape();
                          drawarea.graphics.beginBitmapFill(img).drawRect(0,0,960,540);
                          stage.addChild(drawarea);
                      };
                      img.src="photo.jpg";  

                  フレームレートの変更と、毎フレーム実行

                  0
                    ■フレームレートの設定
                    createjs.Ticker.setFPS(60)

                    ■毎フレーム実行
                    createjs.Ticker.addEventListener("tick",function(){
                           //実行命令
                        })

                    | 1/1PAGES |

                    selected entries

                    categories

                    archives

                    recent comment

                    recommend

                    profile

                    BOOKS

                    links

                    search this site.

                    others