PIXI.js
1.安裝:
npm install pixi.js
2.引入:
import * as PIXI from 'pixi.js'
3.使用:
幾個基本概念:
PIXI應用
首先我們在使用PIXI.js時需要先創建一個PIXI應用,也就是生成一個實例,可以傳入相應的參數設置, 此時會生成一個canvas元素,這個元素就是app的view屬性,然後需要將創建出來的元素添加到頁面中
let app = new PIXI.Application({width: 256, height: 256})
document.body.appendChild(app.view)
舞臺/stage
在PIXI中舞臺只有一個,即app.stage。舞臺的本質是一個容器,所有容器有的屬性舞臺也有,舞臺繼承 自容器。
舞臺是所有需要被顯示的內容的根容器,所有要被顯示的對象最後都是要添加到舞臺裏去的。
app.stage.addChild(diaplayObject)
容器/container
container是用來裝載多個顯示對象的,使用PIXI.Container()方法來創建,一個舞臺(stage)中可以包 含多個container。一般是在需要展示覆雜的畫面時,可以設置多個容器,將精靈分別放到對應的容器 裏,再把容器放到舞臺裏去,這樣就方便後續的操作。如果需要多場景切換時,每個場景就可以是一個 容器,每個場景都有自己的精靈,方便控制和管理。
const container = new PIXI.Container()
container.addChild(sprite)
加載器/loader
如果頁面中需要加載大量的圖片時,可能需要耗費很長的時間,所以需要一次性預加載所有的圖片,同 時可以跟蹤進度
const loader = new PIXI.Loader()
loader.add('bunny', 'data/bunny.png')
.add('spaceship', 'assets/spritesheet.json')
loader.load((loader, resources) => {
// do something
})
loader.onProgress.add(() => {})
loader.onError.add(() => {})
loader.onLoad.add(() => {})
loader.onComplete.add(() => {})
精靈/sprite
精靈是可以放在容器中的特殊圖像對象,可用代碼控制圖像的基礎,比如位置,大小等,也可以通過控 制其他屬性來進行交互和動畫
const sprite = PIXI.Sprite().from(imgUrl)
紋理/texture
因爲PIXI.js是用WebGL和GPU渲染圖像,所以需要將圖片轉化成GPU可以處理的格式,這種格式叫做紋 理。在精靈顯示圖片前,需要將普通的圖片轉換成WebGL紋理。爲了更高的效率,PIXI使用紋理緩存來 存儲和引用精靈需要的紋理,紋理的名稱字符串就是圖像的地址。如果你有從 “images/image.png” 加載的圖像,你可以在紋理緩存中這樣找到他:
PIXI.utils.TextureCache["images/image.png"]
下面是一個簡單的在頁面中生成精靈Sprite的demo
const app = new PIXI.Application()
document.body.appendChild(app.view)
app.loader.add('bunny', 'bunny.png').load((loader, resources) => {
const bunny = new PIXI.Sprite(resources.bunny.texture)
bunny.x = app.renderer.width / 2
bunny.y = app.renderer.height / 2
bunny.anchor.x = 0.5
bunny.anchor.y = 0.5
app.stage.addChild(bunny)
app.ticker.add(() => {
bunny.rotation += 0.01
})
})
下邊列出了一些我們常用的API
1)graphics
graphics主要用於繪製原始形狀(如線條,圓形和矩形)以及他們的上色和填充
const graphics = new PIXI.Graphics()
// 線框
graphics.lineStyle(2, 0x0000FF, 1) graphics.drawRect(50, 250, 100, 100)
// 四邊形
graphics.drawRect(50, 50, 100, 100)
// 圓形
graphics.drawCircle(100, 250, 50)
// 橢圓
graphics.drawEllipse(600, 250, 80, 50)
// 圓角矩形
graphics.drawRoundedRect(50, 440, 100, 100, 16)
// 星星
graphics.drawStar(360, 370, 5, 50)
// 多邊形
graphics.drawPolygon(path)
// 貝塞爾曲線
graphics.bezierCurveTo(100, 240, 200, 200, 240, 100)
// 圓弧
graphics.arc(300, 100, 50, Math.PI, 2 * Math.PI)
app.stage.addChild(graphics)
清除圖形 用graphics.clear()方法
2)text
// 基礎文字
const basicText = new PIXI.Text('6666666')
// 自定義文字樣式
const style = new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 36,
fontStyle: 'italic',
fontWeight: 'bold',
fill: ['#ffffff', '#00ff99'],
stroke: '#4a1850',
strokeThickness: 5,
dropShadow: true,
dropShadowColor: '#000000',
dropShadowBlur: 4,
dropShadowAngle: Math.PI / 6,
dropShadowDistance: 6,
wordWrap: true,
wordWrapWidth: 440
})
const richText = new PIXI.Text('6666666', style)
app.stage.addChild(richText)
3)sprite
sprite對象渲染頁面中已加載的所有紋理對象的基礎,texture相當於拿到了一個圖像,作爲紋理被 sprite加載
const bunny = PIXI.Sprite.from('examples/assets/bunny.png')
bunny.anchor.set(0.5)
bunny.x = app.screen.width / 2
bunny.y = app.screen.height / 2
app.stage.addChild(bunny)
如果有多個紋理需要處理,可以使用spritesheet來達到更高的效率
PIXI.Loader.shared.add("assets/spritesheet.json").load(setup);
function setup() {
let sheet = PIXI.Loader.shared.resources["assets/spritesheet.json"].spritesheet;
let sprite = new PIXI.Sprite(sheet.textures["image.png"]);
...
}
sprite 具有zIndex屬性,當容器的sortableChildren屬性爲true時容器中的所有子元素按照zIndex大小 排序
4)texture
texture用於存儲圖像或者圖像的一部分信息,不能直接被加載到頁面中去,而是作爲sprite的紋理被加 載,texture創建之後可被重複多次使用;要注意的是由svg製成的紋理在文件處理未完成前不能被使用, 可以通過檢查_textureID這個屬性來驗證文件是否處理完成,完成後該屬性不爲undefined
let texture = PIXI.Texture.from('assets/image.png')
let sprite1 = new PIXI.Sprite(texture)
let sprite2 = new PIXI.Sprite(texture)
let texture1 = PIXI.Texture.from('assets/image.svg')
// 銷燬紋理 texture.destroy()
// 刷新紋理 texture.update()
5)交互
pixi.js中的事件交互可同時兼容移動端和pc端,在綁定事件之前需要開啓交互模式
graphics.interactive = true
在pc端需要出現cursor: pointer的效果
graphics.buttonMode = true
綁定事件在文檔中都有詳細描述(click, tap,mousedown, mousemove……),下邊簡單寫一下
graphics.on('click', onClick)
function onClick() {
graphics.scale.x *= 1.25
graphics.scale.y *= 1.25
}
拖拽功能
const texture = PIXI.Texture.from('examples/assets/bunny.png')
const bunny = new PIXI.Sprite(texture)
bunny
.on('pointerdown', onDragStart)
.on('pointerup', onDragEnd)
.on('pointerupoutside', onDragEnd)
.on('pointermove', onDragMove)
function onDragStart(event) {
this.data = event.data
this.alpha = 0.5
this.dragging = true
}
function onDragEnd() {
this.alpha = 1
this.dragging = false
this.data = null
}
function onDragMove() {
if (this.dragging) {
const newPosition = this.data.getLocalPosition(this.parent)
this.x = newPosition.x
this.y = newPosition.y
}
}
6)其他
在離開頁面時需要手動清理內存,否則無法釋放WebGL內存
app.destroy(true)
4、PIXI.js 地址
https://www.pixijs.com/
5、一些用PIXI實現的例子
https://cavalierchallenge.com/
http://work.goodboydigital.com/runpixierun/
https://flashvhtml.com/html/
https://death-sa.com/Game-Html/Balls%20Break/index.html