PIXI

https://github.com/Zainking/learningPixi

game1

// HTMLドキュメントにキャンバスを追加        document.body.appendChild（renderer.view）。//



       
        

        


        `stage`と呼ばれるコンテナオブジェクトを作成
        するvar段階= 新しいPIXI.Containerを（）; 

        // 知らせる`` `stage` render`にrenderer` 
        renderer.render（ステージ）。
    </スクリプト> 
</ BODY> 

</ HTML>

game2

<！DOCTYPE HTML> 
<HTML LANG = "亜鉛"> 

<HEAD> 
    <METAのcharset = "UTF-8"> 
    <タイトル>アニメーションウィザード</ TITLE> 
</ HEAD> 

<BODY> 
    <divの上記のid以上=「PX-レンダリング"> </ div> 

    <スクリプトSRC =" https://www.kkkk1000.com/js/pixi4.8.2.js「> </ SCRIPT> 
    <SCRIPT> // ピクシー・アプリケーションは、いくつかのパラメータが必要と作成 
        オプションをしましょう= { 
            幅： 400 、
            高さ： 300 、
            透明：trueに、
        } // のピクシーアプリケーション作成 
        せアプリ= 新しい新しいPIXIを。
        アプリケーション（オプション）; //は、レンダラを取得
        
        
        レンダラ=のlet app.renderer; 
        遊び場ましょう =のdocument.getElementById（ 'レンダリング-PX' ）;
         // ピクシーは、ページ作成キャンバスに追加
        playground.appendChild（renderer.viewを）; 

        // 別名を設定 
        しましょうTextureCache = PIXIを。 utils.TextureCache; 
        テクスチャせ = PIXI.Texture; 
        長方形せ = PIXI.Rectangle; 
        LET AnimatedSprite = PIXI.extras.AnimatedSprite; 

        // アドレスが図スプライト（クロスドメインの画像処理はサーバ側で行われている）ロードする 
        LET imgUrl = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.png" ; 
 
        //セットアップ機能をロード完了を行った後、画像をロードし
        、PIXI.loader.add（imgUrl）.LOAD（セットアップ）
        
        機能設定（）{  
             // 取得テクスチャ 
            せ基地= TextureCache [imgUrl]; 
            
            // 最初のテクスチャ 
            のlet texture0 = 新しい新規のテクスチャー（ベース）; 
            texture0.frame = 新しい新しい矩形（0、0、80、143 ）;
             // 第二のテクスチャ 
            のlet texture1 = 新しい新しいテクスチャ（塩基）; 
            texture1.frame = 新しい新しい矩形（80、0、80、143 ）;
             // 第三のテクスチャ 
            のlet texture2 = 新新テクスチャー（ベース）; 
            texture2.frame = 新しい新しい矩形（160、0、80、143 ）;
             // 第テクスチャ 
            のlet texture3 = 新しい新しいテクスチャ（塩基）; 
            texture3.frame = 新しい新しい矩形（240、0、80、143 ）; 

            //は、テクスチャの配列を作成 
            LETテクスチャ= [texture0、texture1、texture2をtexture3];
             // アニメーションスプライトを作成 
            せピクシー= 新しい新しいPIXI.extras.AnimatedSprite（テクスチャ）; 
             // アニメーションスプライト速度を 
            pixie.animationSpeed = 0.1 ; 
            
            // ステージにアニメーションスプライトを追加
            app.stage.addChild（ピクシー）;
             // アニメーションスプライトの再生
            pixie.playを（）; 
        }
     </ SCRIPT> 
</ BODY> 

</ HTML>

おすすめ