オブジェクトの乗算

0
    sprite.compositeOperation = "multiply";

    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"},

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


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

        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.framerate = 60;
                      createjs.Ticker.timingMode = createjs.Ticker.RAF;

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


                      | 1/1PAGES |

                      selected entries

                      categories

                      archives

                      recent comment

                      recommend

                      profile

                      BOOKS

                      links

                      search this site.

                      others