iT邦幫忙

2022 iThome 鐵人賽

DAY 9
0
Modern Web

PixiJS青銅玩家系列 第 9

【LV. 9】PixiJS青銅玩家:setUp( )(1)

  • 分享至 

  • xImage
  •  

▉ 前言

這裡將利用教程所提供的"Treasure Hunter Game"來直接學習PixiJS中的語法。"Treasure Hunter Game"的程式碼 ---> Click Here !

系統說明:「The man who has made up his mind to win will never say "impossible ".--Napoleon」,PixiJS青銅玩家進入setUp()階段,獲得一條腰帶。

▉ 主線任務:setUp( ):製作遊戲中場景

// Make the game scene and add it to the stage

▍任務說明

【LV. 8】階段,完成了前置作業,接下來將要進入setUp()的部份。

setUp()大致上要完成的就是一些遊戲場景上的所有物件的設置(包含遊戲場景)。

那首先要設置的便是最重要的「遊戲場景」,並且要將他加到舞台之上。

▍作法

gameScene = new Container();
app.stage.addChild(gameScene);

▍分析

這個任務將會有3個重點:++Treasure Hunter Game這遊戲將會分成2個場景做切換++、++Container++、++stage++。

  1. ++Treasure Hunter Game這遊戲將會分成2個場景做切換++:

    • gameScene:遊戲中的場景(即目前階段要完成的任務)
    • gameOverScene:遊戲結束的場景(又分成2個結果)
      • 「You WIN!」畫面
      • 「You LOSE!」畫面
  2. ++Container++:
    上方2個場景將由2個Container()物件創造。

    container中文翻譯為容器,所以可以想像Container()物件的用法,就有點像是去給東西們分組或組隊的概念,讓我們可以同時一次管理同一個容器內的所有東西。

  3. ++stage++:
    PIXI.Application底下的其中一個member叫做「stage」,再利用stage物件的方法.addChild(),將Sprites放上stage舞台之上。

    stage物件本身也是一個Container物件,它是所有PIXI sprites的根容器。

操作步驟:
接著來看看如何操作。

  • 先創建Sprites,並且給他們設置位置,但是先不要把他們添加到舞台上:

    //劍士
    let 劍士 = new Sprite(id["劍士.png"]);
    劍士.position.set(16, 16);
    
    //巫師
    let 巫師 = new Sprite(id["巫師.png"]);
    巫師.position.set(32, 32);
    
    //刺客
    let 刺客 = new Sprite(id["刺客.png"]);
    刺客.position.set(64, 64);
    
  • 創建一個稱為「group」的容器,把「劍士」、「巫師」、「刺客」加進「group」容器(可以想像就是現在要刷副本,一位劍士、一位巫師,與一位刺客想一起組隊,所以必須先「創建隊伍」)

    let group = new Container();
    
  • 利用addChild()將三張Sprites加到「group」容器中(「創建隊伍」完成後,就可以把成員一一加入隊伍)

    group.addChild(劍士);
    group.addChild(巫師);
    group.addChild(刺客);
    
  • 最後把「group」容器加到舞台之上(也就是「劍士」、「巫師」、「刺客」加入隊伍完成後,就可以出發進入副本,來到舞台之上)

    app.stage.addChild(group);
    

    以上程式碼用底下這張圖片來做解釋應該會更清楚(吧)(至少幫助我理解它的操作步驟即過程):

▉ 結語

回顧一下今天的內容,最大的重點在於「container」,而「stage」也屬於container的一種,只是我們把他分類在「root container」,所有我們想顯示出來的東西,都務必加進這個stage舞台中,我們必須將東西放進stage中,那些東西才能被渲染到canvas上,進而使我們能看見。

另一個重點就是container物件底下的.addChild()方法,他可以幫助我們將子元素加入父層的container容器中。

底下為官方文件對於.addChild()方法的說明:

大概是這樣!早上打工結束,就待在外面寫今天的文章,外加今天為了讓自己更理解他的用法,所以還畫了圖,除了費時之外,手機平板筆電電量都完全不到10%了QQ本來還打算用codepen寫個程式碼實際操作範例,但...只好先作罷了,明天會寫製作Sprites的部份!


參考資料


上一篇
【LV. 8】PixiJS青銅玩家:前置作業(4)
下一篇
【LV. 10】PixiJS青銅玩家:setUp( )(2)
系列文
PixiJS青銅玩家30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言