CSS、JS、およびCanvasを使用したスプライトのアニメーション化

みなさんこんにちは。 数日前、私は偶然にSpace Rangers 2：Disk DepositsのDominatorsを偶然見つけました。 インストールしなかったのは、今では適切に突っ込むのに十分な時間がないからです。 ディスクの内容を確認することにしました。 私はファンアートを見て、そこでレンジャーリソースを選ぶためのプログラムを見ました。 そこで、私たちの支配者が何でできているのかを見ることにしました。 少しクリックすると、アニメーションがGAI形式のファイルが見つかりました。 私はそのアニメーションを賞賛し始めました。 私はそれらを「gif」で保存したかったのですが、どうしてそのプログラムはアニメーションを保存させなかったのでしょうか？ 現在のフレームまたはすべてのファイルをPNGで保存できます。 すべてのフレームを保存することにしましたが、それらは150個ありましたが、まだ写真があり、同じアニメーションを作成してみませんか。

スプライト

このようなアニメーションに満足するために、CSS + JSを手伝いました。 150個の画像ファイルをどうすればよいですか？ それらの重量は合計1メガバイト以上ですが、重要ではありません。 同時読み込みと操作の主な問題。 したがって、それらを1つに「接着」することにしました。 ロードは1つだけで、CSS + JSを使用すると、正しく配置するだけで済みます。

「接着」の方法を選択する必要があります。 私はプログラマーであり、私たちはみんな怠け者です:)ので、グラフィカルエディターでの手動の接着はすぐに破棄しました。 私が最初にしたことは、いつものように、PHPとGDライブラリに急いで行きました。 しかし、半透明のPNGを使用するためには、多くのことが望まれます。 それから私は、他に何が写真を「接着」できるのかと考えました。 そして、彼は今、誰もが今流行していると考えられているもの、HTML5を聞いているという事実に留まりました。 彼はグラフィックス-Canvasを扱う責任があり、この「おいしい」が本当に好きです。 だからこそ、「キャンバス」に「接着」することにしました。

そして、このタグをHTMLに追加します。

<canvas id="sprite"> </canvas>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

JSでは、写真の名前、最初の写真、最後の写真の番号のマスクを示します（すべての写真が順番どおりになるため、写真の名前を変更する必要はありませんでした）。 次のようになります。

 var first = '000'; //     var last = 49; //   var num = 0; // var maskFileName = ['2HULL_PEOPLE_P_A_', '.png'];//   var dir = 'ship'; //,    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、判明するスプライトのサイズを指定して、そのコンテキストを取得できます。

 var canvas = document.getElementById("sprite"); //   canvas.width = (last + 1) * 75; // ,     canvas.height = 75; var width = 0; //,      var context = canvas.getContext("2d"); // 
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

数値から文字列への変換を容易にするため（PHPのstr_padのアナログ）、zerofikator（）というワイルドネームを使用してコンバーター関数を作成しました。

 function zerofikator(int, length) { //       var prefix = ''; for (var i = num.toString().length; i < length; i++) { prefix += '0'; } return prefix + num; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに、「キャンバス」に絵を描くために、つまり スプライトを作成します。ここにそのような単純な関数があります：

 function draw() { var img = document.createElement('img'); /*          - */ img.onload = function () { //       context.drawImage(img, width, 0); width += 75; //       ,      ,     if (zerofikator(num, first.length) != zerofikator(last, first.length)) { //      num++; //  draw(); //    } } img.src = dir + '/' + maskFileName[0] + zerofikator(num, first.length) + maskFileName[1]; //      } draw(); //  
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このようなページを起動すると、フレームごとに幅の広い画像が表示されます。保存した場合、それをスプライトと呼ぶことができます。 ちなみに、保存されたスプライトの重量は615 KBで、150枚の画像は1,189 KBです、うーん、もう1つプラスです:)。



キャンバスをクリックして、すぐにファイルに変換を追加することにしました（一部のブラウザーの保存の問題を解決します）。

 canvas.onclick = function () { window.location = context.canvas.toDataURL('image/png'); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デモ

アニメーション

さて、今、あなたはアニメーションを開始することができます。

HTMLでは、引き続き作業を続けるためのいくつかの「仕切り」を追加します。

 <div id="gun"></div> <div id="ship"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、スプ​​ライトをアニメーション化する関数を作成しましたが、一度に複数のアニメーションに使用できるように、設定を個別に行うことにしました。

 var styles = {}; styles.cursor = 'pointer'; //      ,   styles.width = '75px'; //  styles.height = '75px'; var elementId = 'gun'; // id ,     var imgName = 'canvas.png'; //   
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、関数自体：

 function spriteAnimation(elementId, imgName, styles) { var img = document.createElement('img'); var offset = 0; img.onload = function () { //    var element = document.getElementById(elementId); element.style.cursor = styles.cursor; element.style.width = styles.width; element.style.height = styles.height; element.style.background = "url('" + imgName + "') " + offset + "px 50%"; //     var i = 0; element.onmouseover = function() { //     interval = setInterval(function() { //  if (offset < img.width) { //    i++; //      } else { i = 0; //     } offset = 75 * i; //   element.style.background = "url('" + imgName + "') " + offset + "px 50%"; //   } , 1000/24) //24    } element.onmouseout = function(){ //      clearInterval(interval) //  ( ) } } img.src = imgName; //    }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そうです、まだこの関数を呼び出す必要があります。

 spriteAnimation(elementId, imgName, styles); spriteAnimation('ship', 'ship.png', styles);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、その場所を見るために、背景付きの画像を追加して、正しく配置することができます：

 <img src="fon.png" /> <div class="conteiner"><div id="gun"></div></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デモ



ソースコード



彼らが言うように-「ちょうど楽しみ」。 そして、雨の多い秋の夜にどのように時間を過ごしますか？