這裡將利用教程所提供的"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()階段,獲得一條腰帶。
// 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++。
++Treasure Hunter Game這遊戲將會分成2個場景做切換++:
++Container++:
上方2個場景將由2個Container()
物件創造。
container中文翻譯為容器,所以可以想像Container()
物件的用法,就有點像是去給東西們分組或組隊的概念,讓我們可以同時一次管理同一個容器內的所有東西。
++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的部份!