HTML5的Pixi.js怎么使用

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

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

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

　　主要特性

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

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

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

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

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

　　簡易API：設計直觀，易于上手。

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

　　支持精靈表單(Sprite sheet)。

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

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

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

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

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

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

　　部分示例頁面

　　快速使用

　　// 創建pixi的stage

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

　　// 創建一個渲染

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

　　// 添加到頁面

　　document.body.appendChild(renderer.view);

　　requestAnimFrame( animate );

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

　　// 創建添加一個素材

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

　　// 使用素材創建一個動畫元素

　　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 );

　　//添加旋轉效果

　　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);

　　}

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