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

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


    フォントサイズをリキッドさせるjQueryプラグイン

    0

      使用頻度が増えてきたので、毎回書くのが面倒になり、ライブラリ化。

      もとのフォントサイズとウインドウサイズの比率をベースに

      ウインドウの可変にあわせてサイズをリキッドさせる。

      レスポンシブで、デバイステキストを使いたいけど、デザイン崩したくない時などに。

       

       

      http://jsdo.it/design_peke/4H5G


      IEでも有効な、ラジオボタン・チェックボックスのデザイン変更(ラベルクリック対応)

      0

        ひとまずコピペのみ。


        input[type=radio]{
            display: none;
            margin: 0;

        }
        input[type=radio] + label {
            background-image: url(radio_off.png);
            background-repeat: no-repeat;
            background-position: left center;
            padding: 0;
            padding-left: 30px;
            display: inline-block;
            margin-right: 12px;
            font-size: 14px;
            line-height: 30px;
            cursor: pointer;
        }

        input[type=radio]:checked + label {
            background-image: url(radio_on.png);
        }
         


        AudioContext覚書き

        0

          html5のaudioは問題が多いのでAudioContextを使いたいが

          そこまで高機能じゃなくていいので、自分が使いやすい程度に整理。

          IEでの代替処理に対応させた。

           


          【特長】
          ・ボリューム設定可能
          ・ループあり(BGM等)、なし(SE等)両対応
          ・読み込み後コールバック対応
          ・IEの場合、代替処理

          【サンプル】


              var snd1=new WebSound("http://jsrun.it/assets/K/B/5/T/KB5Tv.mp3",1,false,function(){
                  alert("snd1 ready!")
              });
               var snd2=new WebSound("http://jsrun.it/assets/K/B/5/T/KB5Tv.mp3",0.5,true,function(){
                  alert("snd2 ready!")
              });

              function playSound(str){
                    eval(str).playSound();
              }
              

           function stopSound(str){
                    eval(str).stopSound();
              }

           

          【コード】

          http://jsdo.it/design_peke/02PA/edit

           

           

           


          JSのオブジェクトをソートする(chrome対応)

          0

            JavaScriptの配列にはもともとソート機能がついているが、デフォルトだと昇順にしか並ばない。また、オブジェクトの配列の場合はそのまま使えない。

             

            なので、今までは

             array.sort(function (a,b){
                       return a.prop - b.prop;
                    });

            のようにしてたが、a.propとb.propが同じ値のとき、chromeで正しくソートされない。これは、returnで0が返されたときの解釈がブラウザごとに異なるため。

             

            そこで「もとのオブジェクトに配列用の連番を付与し、同じ値のときはその連番でソートする」といった代替処置が必要。加えて、文字列のソートができると便利なので、関数を整理する。以下サンプル。

             

            ソート関数サンプル http://jsdo.it/design_peke/swqj

             

            ちなみに、普通の配列を降順にするには、余計な関数を使わず

            array.sort();

            array.reverse();

            とやってしまうのが無難。せこいけど。

             


            << | 2/21PAGES | >>

            selected entries

            categories

            archives

            recent comment

            recommend

            profile

            BOOKS

            links

            search this site.

            others