HTML5的Pixi.js怎么使用

這篇文章主要介紹了HTML5的Pixi.js怎么使用的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇HTML5的Pixi.js怎么使用文章都會有所收獲，下面我們一起來看看吧。

　　Pixi.js 是一款超快的開源 HTML5 2D 渲染引擎，使用帶有 Canvas 回調(diào)功能的 WebGL。作為 JavaScript 的 2D 渲染器，Pixi 的目標是，可以提供一個快速且輕量級的 2D 庫，并能兼容所有設(shè)備。此外讓開發(fā)者無需了解 WebGL，就可以感受到硬件加速的力量。

　　Pixi.js作為一款開源的HTML5 2D渲染引擎，旨在為開發(fā)者提供一個快速且輕量級的2D庫，并能兼容所有設(shè)備。能夠兼容所有設(shè)備，簡單得說也就是跨平臺了，其實說到跨平臺的開發(fā)工具，為數(shù)已經(jīng)不少了，就小編知道的DevStore平臺就已經(jīng)收錄很多了。

　　主要特性

　　真正的跨平臺：在今天，開發(fā)工具跨平臺已經(jīng)不是什么稀奇的事了。不過 Pixi.js 則是一個可以兼容所有設(shè)備的超快 HTML5 2D 渲染引擎，并且擁有 Canvas 回調(diào)功能的 WebGL，實現(xiàn)真正的跨平臺。

　　交互式多點觸控：Pixi不僅支持移動和平板設(shè)備，還具有完整的多點觸控輸入識別，讓開發(fā)者可以發(fā)揮自己的能力去挖掘出它所有的潛力。

　　WebGL過濾器：當使用WebGL時，Pixi允許你使用自己熟悉且現(xiàn)有的過濾器。當然，你也可以使用自己創(chuàng)建的獨一無二的過濾器，比如自定位移和半色調(diào)效果。

　　著色和混合模式：對設(shè)計師來說，會很喜歡這個，Pixi.js允許用戶著色和使用混合模式就像其他常見的視覺包比如Photoshop或Flash。

　　渲染器自動檢測：這個算是Pixi的一大特色，雖然Pixi是主要作為WebGL 2D渲染器而創(chuàng)建的，但仍支持非WebGL平臺。其解決方案就是創(chuàng)建一個Canvas回調(diào)系統(tǒng)，只需一次編碼，Pixi就可無縫管理回調(diào)。

　　簡易API：設(shè)計直觀，易于上手。

　　資源加載：精靈表單、圖形、字體和動畫數(shù)據(jù)等都可通過Pixi.js來加載和處理。

　　支持精靈表單(Sprite sheet)。

　　Pixi.js在跨平臺特性上有什么過人之處呢？

　　它的獨特之處在于其擁有了canvas回調(diào)功能的WebGL，使之可以兼容所有設(shè)備，并且速度會更快。

　　當使用WebGL時，Pixi允許你使用自己熟悉且現(xiàn)有的過濾器。當然，你也可以使用自己創(chuàng)建的獨一無二的過濾器，比如自定位移和半色調(diào)效果。

　　Pixi不僅支持移動和平板設(shè)備，還具有完整的多點觸控輸入識別，讓開發(fā)者可以自由發(fā)揮自己的能力去挖掘出它所有的潛力。除此之外，Pixi.js還允許用戶著色和使用混合模式。

　　但是 Pixi 最大的一個特色要屬渲染器自動檢測了。雖然 Pixi 是主要作為 WebGL 2D 渲染器而創(chuàng)建的，但依然支持非WebGL平臺。其解決方案就是創(chuàng)建一個Canvas回調(diào)系統(tǒng)，只需一次編碼，Pixi 就可無縫管理回調(diào)了。

　　一款產(chǎn)品界面的美觀與否，渲染引擎的選擇真真是極重要的。

　　部分示例頁面

　　快速使用

　　// 創(chuàng)建pixi的stage

　　var stage = new PIXI.Stage(0x222222);

　　// 創(chuàng)建一個渲染

　　var renderer = PIXI.autoDetectRenderer(400, 300);

　　// 添加到頁面

　　document.body.appendChild(renderer.view);

　　requestAnimFrame( animate );

　　以上生成了最簡單的pixi，下面創(chuàng)建游戲元素：

　　// 創(chuàng)建添加一個素材

　　var texture = PIXI.Texture.fromImage("img/fist.png");

　　// 使用素材創(chuàng)建一個動畫元素

　　var bunny = new PIXI.Sprite(texture);

　　// 居中

　　bunny.anchor.x = .5;

　　bunny.anchor.y = .5;

　　// 移動到游戲屏幕中央

　　bunny.position.x = 200;

　　bunny.position.y = 150;

　　stage.addChild(bunny);

　　最后是動畫效果代碼：

　　function animate() {

　　requestAnimFrame( animate );

　　//添加旋轉(zhuǎn)效果

　　bunny.rotation += 0.1;

　　//添加縮放效果

　　if(bunny.scale.x>=1){

　　scaleflag = 1;

　　}else if(bunny.scale.x<=0.5){

　　scaleflag = 0;

　　}

　　scaleflag?bunny.scale.x -= 0.05: bunny.scale.x +=0.05;

　　scaleflag?bunny.scale.y -= 0.05: bunny.scale.y +=0.05;

　　renderer.render(stage);

　　}

關(guān)于“HTML5的Pixi.js怎么使用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“HTML5的Pixi.js怎么使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。