PixiJs系列實戰課程- 基礎篇-02初始化

基礎篇

第二章 初始化

這一章是作好一鏡到底最關鍵的一課，打開vscode，確保文件夾和文件的結構跟我本地是否一致，而後開始live-server啓動vscode本地服務器。

本地瀏覽器輸入地址

http://127.0.0.1:8080/

2.1 初始化階段資源：resources.js

2.1.1 建立舞臺

這一步就至關於flash按鍵盤的ctrl+n，設置了舞臺寬度爲1344，高度爲750
    let app = new PIXI.Application({width: 1344, height: 750});
複製代碼

2.1.2 導入圖片資源

這一步至關於flash，導入了素材
    const loader = new PIXI.loaders.Loader();
    loader.add('bg1', 'imgs/bg1.jpg')
    ......
複製代碼

2.1.3 監聽圖片加載進度

target.progress會根據上面圖片的多少真實的實現loading效果，返回0~100的小數，而後須要用parseInt()格式化整數。
    loader.on("progress", function(target, resource) {  //加載進度
        console.log(target.progress+"%")
    });
複製代碼

2.1.4 監聽圖片加載完成事件

loader.once('complete', function(target, resource) {  //加載完成
    document.body.appendChild(app.view)
    
    //初始化場景
      initScenes();
    //初始化精靈
     initSprites();
    //初始化動畫
     initAnimation();
    
}
loader.load();  // 開始加載資源

================================================================
這句話document.body.appendChild(app.view)寫完，才能夠顯示舞臺
這句話loader.load()寫完，才能夠監聽到加載進度;
complete事件中，完成咱們一鏡到底要完成的事情

複製代碼

2.2 初始化階段場景：scenes.js

2.2.1 建立場景須要的數據json

const scenesOptions = [ // 場景數據：定義每一個場景的寬高,x/y距離
    {
      name:"scene1",
      x:1000,y:0,
      width:3554,height:750
    },
    {
      name:"scene2",
      x:1000,y:0,
      width:3554,height:750
    }
    .....
 ];
================================================================
name:就是場景的名字
x,y就是它初始化的位置
width,height就是設計稿場景1的寬度和高度

複製代碼

2.2.2 循環場景數據json

const scenes = {};  // 場景集合 - pixi對象

function initScenes(){ // 初始化場景
  for (let i = scenesOptions.length-1; i >= 0 ; i--) {
    scenes[scenesOptions[i].name] = new PIXI.Container({
      width:scenesOptions[i].width,
      height:scenesOptions[i].height
    });
    scenes[scenesOptions[i].name].x = scenesOptions[i].x;
    app.stage.addChild(scenes[scenesOptions[i].name]);
  }
}
=========================================================
這句話若是不封裝，其實很好理解就是這麼幾句話
const scenes = {}; 
scenes.scene1 = new PIXI.Container({
      width:1344,
      height:750
});
scenes.scene1.x = 0;
app.stage.addChild(scenes.scene1);把場景添加到舞臺
複製代碼

2.3 初始化階段精靈：sprites.js

2.3.1 建立精靈須要的數據json

const spritesOptions = [
    {// 第一個場景的精靈
      bg1:{
        position:{x:0,y:0}
      },
      {
          ...
      }
    },
    {// 第二個場景的精靈
      bg1:{
        position:{x:0,y:0}
      },
      {
          ...
      }
    }
]
複製代碼

2.3.2 循環精靈數據json

function initSprites(){  // new出全部精靈對象，並交給函數initSprite分別賦值
    for (let i = 0; i < spritesOptions.length; i++) {
      let obj = spritesOptions[i];
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          sprites[key] = PIXI.Sprite.fromImage(key);
          initSprite(sprites[key],obj[key],i+1);
        }
      }
    }
    initSpecialProp();
  }
  function initSprite(sprite,prop,i){  // 初始化單個精靈的屬性並加入對應的場景中
    for (let key in prop) {
      if (prop.hasOwnProperty(key)) {
        sprite[key] = prop[key];
      }
    }
    scenes['scene'+i].addChild(sprite);
  }
  =========================================================
  這句話若是不封裝，其實很好理解就是這麼幾句話
  sprites.bg1 = PIXI.Sprite.fromImage('bg1');
  bg1.position.x = 0;
  bg1.position.y = 0;
  scenes.scenes1.addChild('bg1');把精靈給到場景
複製代碼

2.4 初始化階段動畫：animation.js

2.4.1 建立動畫須要的數據json

const animationsOptions = {  // 精靈動畫集合
    jzLeft:[{
      delay:0,
      duration:0.11,
      to:{x:600,y:200,ease:Power0.easeNone}
    }],
    jzRight:[{
        delay:0,
        duration:0.11,
        to:{x:1746,y:200,ease:Power0.easeNone}
    }]
}
複製代碼

2.4.2 循環動畫數據json

function initAnimation(){
        // delay=0.1 表示滾動到10%開始播放動畫
        // duration=0.1 表示運動時間佔滾動的百分比
        for (let key in animationsOptions) {
          if (animationsOptions.hasOwnProperty(key)) {
            let obj = animationsOptions[key];
            for (let i = 0; i < obj.length; i++) {
              let act;
              let target;
              if (obj[i].prop) {
                target = sprites[key][obj[i].prop];
              } else {
                target = sprites[key];
              }
              if(obj[i].from & obj[i].to){
                act = TweenMax.fromTo(target,obj[i].duration,obj[i].from,obj[i].to);
              } else if (obj[i].from) {
                act = TweenMax.from(target,obj[i].duration,obj[i].from);
              }else if (obj[i].to) {
                act = TweenMax.to(target,obj[i].duration,obj[i].to);
              }
              let tm = new TimelineMax({delay:obj[i].delay});
              tm.add(act,0);
              tm.play();
              timeline.add(tm,0);
            }
          }
        }
    }
    ===================================================================
    let act;
    let tm;
    
    act = TweenMax.to(scenes.scene1,0.11,{x:2400})
    tm = new TimelineMax({delay:0});
    tm.add(act,0);
    tm.play();
    timeline.add(tm,0);
複製代碼

結束語

到這裏就結束啦，下一章解決橫豎適配問題，在下一章分享如何經過滑動結合時間控制動畫。