PixiJS—アニメの妖精を勉強します.

13188 ワード

javascript canvas pixi.js ゲーム開発

説明
公式教程の中で言及したこの本—Learn Pixi.jsを読み終わって、書いて読後感を読むつもりで、公式教程の中で言った内容、基本的には本の前4章です.だから私は第5章から書きます.
アニメーションの精霊とは、一連の少し違った画像を順番に使用して、精霊を作成し、その後のフレームでこれらの画像を再生することで、動きの幻覚を生じることができるというものです.
つまりこのような写真を使います.
このような効果を出す
アニメの精霊を作るには、PixiJSのAnimedSpriteの方法が必要です.
PIXI.extres.AnimedSprite
定義:
テクスチャ配列を使ってアニメーションの精霊を作成する方法.
使い方:

new PIXI.extras.AnimatedSprite(textures,autoUpdate)

パラメータ:
名前
タイプ
標準値
説明
textures
array
一連の異なる画像で作られたテクスチャ配列.
aut Update
bollan
true
PIXI.ticker.sharedを使ってアニメーション時間を自動更新するかどうかを判断します.
戻り値:オブジェクトを返します.オブジェクトにはいくつかの属性と方法があります.アニメーションの精霊を制御します.
値オブジェクトの属性を返します.
名前
タイプ
説明
animation Speed
number
アニメーションの精霊の再生速度.高いほど速く、低いほど遅くなります.標準値は1です.
currentFrame
number(読み取り専用)
現在表示されているフレーム番号
onComplettee
機能loop属性がfalseの場合、一つのアニメーション精霊が再生を完了すると呼び出します.
playing
ボロア
現在のアニメーションの精霊が再生されているかどうかを確認します.
オン・フライム・チャン
機能
アニメーションの精霊が現れたいテクスチャを変更すると呼び出します.
loop
bollan
動画の精霊は再生後に繰り返し再生されますか?
onloop
機能loop属性がtrueであるときに呼び出す関数
textures
array
このアニメーションの精霊用テクスチャ配列
トートフライス
number(読み取り専用)
アニメーションの総フレーム数
値のオブジェクトを返す方法:
名前
パラメータ
説明
プレイ
アニメの精霊を再生
gotoAndPlayframeNumber、numberタイプ、フレームのインデックスを開始します.
特定のフレームに移動してアニメーションの精霊を再生します.
stop
アニメーションの精霊の再生を停止します.
gotoAndStopframeNumber、numberタイプ、フレームのインデックスを停止します.
特定のフレームに移動し、アニメーションの精霊の再生を停止します.
戻り値のこれらの属性と方法を使うと、アニメの精霊を再生したり、アニメのスピードを設定したり、循環再生を設定したりするほか、PIXI.extres.AnimedSprite法がPIXI.Sprite法から継承されていることが分かりますので、アニメの精霊も普通の精霊の属性と方法でxを使うことができます.y、width、height、scale、rotation、su.
はい、この方法を試してみます.





    
        



    

    
    
        //      Pixi          
        let option = {
            width: 400,
            height: 300,
            transparent: true,
        }
        //      Pixi  
        let app = new PIXI.Application(option);
        //      
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        //   Pixi     canvas       
        playground.appendChild(renderer.view); 

        //    
        let TextureCache = PIXI.utils.TextureCache;
        let Texture = PIXI.Texture;
        let Rectangle = PIXI.Rectangle;
        let AnimatedSprite = PIXI.extras.AnimatedSprite;

        //           （             ）
        let imgURL = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.png";
 
        //    ，       setup   
        PIXI.loader.add(imgURL).load(setup);
        
        function setup() {  
            //    
            let base = TextureCache[imgURL];
            
            //     
            let texture0 = new Texture(base);
            texture0.frame = new Rectangle(0, 0, 80, 143);
            //     
            let texture1 = new Texture(base);
            texture1.frame = new Rectangle(80, 0, 80, 143);
            //     
            let texture2 = new Texture(base);
            texture2.frame = new Rectangle(160, 0, 80, 143);
            //     
            let texture3 = new Texture(base);
            texture3.frame = new Rectangle(240, 0, 80, 143);

            //      
            let textures = [texture0, texture1, texture2,texture3];
            //      
            let pixie = new PIXI.extras.AnimatedSprite(textures); 
            //         
            pixie.animationSpeed=0.1;
            
            //          
            app.stage.addChild(pixie);
            //      
            pixie.play();
        }

查看效果

上面这个例子中，创建纹理数组时似乎点麻烦，要解决这个问题，我们可以用名叫 SpriteUtilities 的库，该库包含许多有用的函数，用于创建Pixi精灵并使它们更易于使用。

安装：

直接用 script 标签，引入js 文件就可以

インストールがしたら、たちはしいインスタンスをするがあります.コードはのりです.

let su = new SpriteUtilities(PIXI);

その、suオブジェクトですべてのにアクセスすることができます.
ここでなのはjsonオブジェクトのfilmstrip です.
:
filmstrip はスプライトをにをるテクスチャにできます.
い :

su.filmstrip("anyTilesetImage.png", frameWidth, frameHeight, optionalPadding);

パラメータ:

タイプ

anyTilesetImage
ストリングス
スプライトのパス
frame Width
number
フレームの (ピクセル )
frame Height
number
フレームのさ(ピクセル )
optional Padding
number
フレームりのりつぶし (オプション、ピクセル )
り :
アニメーションのテクスチャをするためのをします.
はスピリットをってほどのコードをきえます.





    
        



     

    
    
    
        //     Pixi          
        let option = {
            width: 400,
            height: 300,
            transparent: true,
        }
        //     Pixi  
        let app = new PIXI.Application(option);
        //     
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        //  Pixi     canvas       
        playground.appendChild(renderer.view);
         
        let su = new SpriteUtilities(PIXI);
        //           （             ）
        let imgURL = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.png";
        PIXI.loader.add(imgURL).load(setup); 
        
        function setup() { 
            //      
            let frames = su.filmstrip(imgURL, 80, 143);
            //      
            let pixie = new PIXI.extras.AnimatedSprite(frames);
            //         
            pixie.animationSpeed=0.1;

            //          
            app.stage.addChild(pixie);
            //      
            pixie.play();
        }

効果を表示
filmstrip方法は自動的にスプライト全体をアニメーションの精霊を作るテクスチャ配列に変換します.しかし、私たちがスプライトの一部のフレームだけを使いたいなら?この時はフレームの使い方が必要です.
定義:frame法は、スプライトマップのサブフレームのセットを使用して、テクスチャ配列を作成します.
使い方:

su.frames(source, coordinates, frameWidth, frameHeight)

パラメータ:
名前
タイプ
説明
source
ストリングス
スプライトのパス
coordination
array
各フレームのxとy座標を含む二次元配列
frame Width
number
各フレームの幅(ピクセル単位)
frame Height
number
フレームごとの高さ(ピクセル単位)
値を返します.アニメーション精霊のテクスチャ配列を作成するための配列を返します.
サンプルコード:





    
        



    

    
    
    
        //     Pixi          
        let option = {
            width: 400,
            height: 300,
            transparent: true,
        }
        //     Pixi  
        let app = new PIXI.Application(option);
        //     
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        //  Pixi     canvas       
        playground.appendChild(renderer.view);
         
        let su = new SpriteUtilities(PIXI);
        //           （             ）
        let imgURL = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.png";

        PIXI.loader.add(imgURL).load(setup); 
        function setup() { 
            //      
            let frames = su.frames(imgURL, [[0,0],[80,0],[160,0],[240,0]],80, 143);
            //      
            let pixie = new PIXI.extras.AnimatedSprite(frames);
            //         
            pixie.animationSpeed=0.1;

            //          
            app.stage.addChild(pixie);
            //      
            pixie.play();
        }

查看效果

除了上面提到的方式，还可以用纹理贴图集来创建动画精灵。

使用纹理贴图集来创建动画精灵，就是先通过json文件，加载所有纹理，然后把需要的纹理再放进一个数组中，最后把这个数组当参数，传入PIXI.extras.AnimatedSprite 方法中，来创建动画精灵。

代码：





    
        



    

    
    
        //     Pixi          
        let option = {
            width: 400,
            height: 300,
            transparent: true,
        }
        //     Pixi  
        let app = new PIXI.Application(option);
        //     
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        //  Pixi     canvas       
        playground.appendChild(renderer.view); 

        //             
        let textureURL = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.json";

        //       ，       setup  
        PIXI.loader.add(textureURL).load(setup);

        function setup() {  
            let id = PIXI.loader.resources[textureURL].textures;
                 
            //      
            let frames = [
             id["dnf0.png"],
             id["dnf1.png"],
             id["dnf2.png"],
             id["dnf3.png"]
            ];
            //      
            let pixie = new PIXI.extras.AnimatedSprite(frames);
            //         
            pixie.animationSpeed=0.1;

            //          
            app.stage.addChild(pixie);
            //      
            pixie.play();
        }

查看效果

上面的代码创建纹理数组时，是把纹理一个一个的放进数组中，如果数量比较少还好，多一点呢？假如有100个呢？一个一个的放就太麻烦了，这时候我们可以用 SpriteUtilities 库中提供的 frameSeries 方法。

定义：

frameSeries 方法可以通过已加载的纹理贴图集，使用一系列编号的帧ID来创建动画精灵。

用法：

su.frameSeries(startNumber, endNumber, baseName, extension)

パラメータ:
名前
タイプ
説明
startNumber
number
開始フレームのシリアル番号(標準値は0)
endNumber
number
フレームのシリアル番号を終了します.(デフォルトは1です.)
baseName
ストリングス
オプションの基本ファイル名
extension
ストリングス
オプションのファイル拡張子
値を返します.アニメーション精霊のテクスチャ配列を作成するための配列を返します.
注意:frame Series方法を使用する場合、frame0.png frame1.png frame2.pngファイルで定義されたフレーム毎の名前は、forのような順に来ることを確認する.frame Series方法のソースコードはこのように書かれています.

 frameSeries(startNumber = 0, endNumber = 1, baseName = "", extension = "") {
   //           
   let frames = [];

   for (let i = startNumber; i < endNumber + 1; i++) {
     let frame = this.TextureCache[`${baseName + i + extension}`];
     frames.push(frame);
   }
   return frames;
 }

ソースは、実際には

サイクルでフレーム名をつなぎ合わせています.フレーム名は順番で来てください.でないと、取れません.
じゃ、frame Seriesの方法を試してみましょう.



    
    
    
        //     Pixi          
        let option = {
            width: 400,
            height: 300,
            transparent: true,
        }
        //     Pixi  
        let app = new PIXI.Application(option);
        //     
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        //  Pixi     canvas       
        playground.appendChild(renderer.view);
         
        let su = new SpriteUtilities(PIXI);
        //             
        let textureURL = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.json";

        PIXI.loader.add(textureURL).load(setup); 
        function setup() { 
            //      
            debugger;
            let frames = su.frameSeries(0,7,"dnf",".png"); 
            //      
            let pixie = new PIXI.extras.AnimatedSprite(frames);
            //         
            pixie.animationSpeed=0.1;

            //          
            app.stage.addChild(pixie);
            //      
            pixie.play();
        }

PIXI.extras.AnimatedSprite効果を表示
この方法は元々PIXI.extras.MovieClipと呼ばれていましたが、4.2.1バージョンの時に修正されたもので、本明細書の例示コードの中でPixiJSのバージョンは4.8.2ですので、大丈夫です.もし使用中にPIXI.extras.AnimatedSpriteを呼び出す方法に問題があると発見されたら、まず次のバージョンが正しいかどうかを確認してもいいです.
2、SpriteUtilityesが現在サポートしているPixiJSのバージョンは3.0.11であり、SpriteUtilityesではPIXI.extras.MovieClipの方法を使っていますので、もし高いPixiJSのバージョンを使ったら、SpriteUtilityesで方法の別名を修正してください.
spriteUtilities.jsファイルではrenderingEngine.extras.MovieClipをrenderingEngine.extras.AnimatedSpriteに変更し、renderingEngine.ParticleContainerをPIXI.particles.ParticleContainerに変更する必要があります.
このspriteUtilities.jsは修正されたものです.
もちろん低バージョンのPixiJSも使えます.これでspriteUtilities.jsのコードを変えなくてもいいです.
締め括りをつける
アニメーションの精霊はフレームごとのアニメーションで、1フレームの再生画像を通して動きの幻覚を生みます.
この文章はアニメの精霊を作る方法とアニメの精霊を使う方法を話しました.
文章に間違いがあったら、仲間に指摘してもらいたいです.ありがとうございます.
次はPixiJS—精霊状態を勉強します.

javaScriptの正規表現