iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
1
Modern Web

30天Pixi帶你飛上天系列 第 2

Day2 起飛之建立pixi

一開始我們先到pixi的官網下載pixi.min.js的檔案

並且載入到專案中


<script src="pixi.min.js"></script>

我使用的編輯器是VSCODE,並且安裝Live Server,可以快速建立LocalHost的環境,
如果直接使用file路徑開啟,在pixi中載入圖片路徑會失敗

https://ithelp.ithome.com.tw/upload/images/20181014/20111962jJYT2lGlZ1.jpg

在中放入以下,測試pixi是否正確載入

<script type="text/javascript">
    let type = "WebGL"
    if(!PIXI.utils.isWebGLSupported()){
      type = "canvas"
    }

    PIXI.utils.sayHello(type)
</script>

如果正確載入的話,瀏覽器的console就會出現以下

PixiJS 4.5.5 - ✰ WebGL ✰ http://www.pixijs.com/ ♥♥♥

(如果瀏覽器不支援webGL,就會改用canvas運算,上面這段的✰ WebGL ✰也會變成canvas)

建立一個400*200的pixi Application,並且繪製在一個canvas物件上

//建立200的pixi Application
let app = new PIXI.Application({width: 256, height: 256,backgroundColor: 0x1099bb});

//app.view是一個canvas
document.body.appendChild(app.view);

https://ithelp.ithome.com.tw/upload/images/20181014/20111962nDyoY4WlZM.jpg

關於pixi Application還有許多屬性可以使用,可以參照 PIXI.Application文件

常用的有幾個

  • antialias :反鋸齒 預設:false
  • backgroundColor 背景色 預設0x000000黑色,像我這種廢物菜鳥來說,剛看的時候想說這是甚麼奇怪的色碼?是不是要換算,殊不知只是#000000換成0x000000
  • transparent 背景透明,預設false,當你想要使用css的背景色的時候,就可以把它開啟,pixi似乎不支援漸層色,如果有像是這類的需求,可以嘗試這樣使用。

另外文件中有提到關於destroy的method,當不需要使用canvas或是載入新的canvas的時候可以使用removeView去移除不需要使用的,減少資源的浪費。


上一篇
Day 1 滑行/前言
下一篇
Day3 pixi建立之後
系列文
30天Pixi帶你飛上天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言