国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

開始學習 PixiJS

fredshare / 625人閱讀

摘要：它自動偵測使用或者。開發(fā)者無需專門學習就能感受到強大的硬件加速的力量。要注意的是，雖然非常適合制作游戲，但它并不是一個游戲引擎，它的核心本質(zhì)是盡可能快速有效地在屏幕上移動物體。可以被處理的圖像被稱作紋理。

PixiJS 介紹

PixiJS 是一個超快的2D渲染引擎。它自動偵測使用 WebGL 或者 Canvas。開發(fā)者無需專門學習 WebGL 就能感受到強大的硬件加速的力量。

PixiJS 會幫助你用 JavaScript 或者其他 HTML5 技術(shù)來顯示媒體，創(chuàng)建動畫或管理交互式圖像，從而制作一個游戲或應(yīng)用。它擁有語義化的，簡潔的 API 接口并且加入了一些非常有用的特性。比如支持紋理貼圖集和為精靈（交互式圖像）提供了一個簡單的動畫系統(tǒng)。它也提供了一個完備的場景圖，你可以在精靈圖層里面創(chuàng)建另一個精靈，當然也可以讓精靈響應(yīng)你的鼠標或觸摸事件。

要注意的是，雖然 PixiJS 非常適合制作游戲，但它并不是一個游戲引擎，它的核心本質(zhì)是盡可能快速有效地在屏幕上移動物體。

感受一下

下面這些是用 PixiJS 實現(xiàn)的一些例子，你可以點開看看。

cavalier challenge

Run Pixie Run

Filters Demo

WASTE INVADERS

Storm Brewing

H5場景小動畫

打磚塊游戲

安裝

為了能很好的使用 PixiJS ，你需要在你項目的根目錄運行一個 web 服務(wù)器，這里推薦使用 node.js 并且去用命令行安裝 http-server，當然你也可以用其他的 web 服務(wù)器，比如
Apache、Nginx，總之你需要讓你的項目在服務(wù)器環(huán)境下運行，也就是用 http://xxxxxx 這種方式來訪問你的項目，而不是 file://xxxxxx ，如果直接在本地打開 HTML 文件有些時候是會出問題的，比如用 file://xxxxxx 的方式運行項目時，圖片是跨域的，調(diào)用一些方法時，就會報錯了。

NPM 安裝：

$> npm install pixi.js

CDN 安裝：

你也可以直接去 Github 下載 js 文件。

你可以用下面這樣的代碼，測試是否已經(jīng)安裝了PixiJS




  
  Hello World

如果 PixiJS 安裝成功，在瀏覽器的控制臺中你會看見這樣的東西。

概念介紹

PixiJS 中有些比較重要的概念是需要知道的。

Pixi 應(yīng)用
使用 PixiJS ，我們首先應(yīng)該創(chuàng)建一個 Pixi 應(yīng)用，使用 PIXI.Application() 方法可以 new 一個，這個方法可以傳入一個對象參數(shù)，這個對象中，可以設(shè)置 Pixi 應(yīng)用的寬、高、是否透明，等一些屬性，具體所有可以設(shè)置的屬性可以到 Pixi 的文檔里看。

在使用 PIXI.Application() 方法時，如果你沒有給傳入的參數(shù)對象設(shè)置 view 屬性，它會自動創(chuàng)建一個 canvas 元素，創(chuàng)建出來的 canvas 元素就在 Pixi 應(yīng)用的 view 屬性中。

// 創(chuàng)建一個Pixi 應(yīng)用
let app = new PIXI.Application({width: 256, height: 256});

// 把 Pixi 應(yīng)用中創(chuàng)建出來的 canvas 添加到頁面上
document.body.appendChild(app.view);

容器
容器是用來裝載多個顯示對象的， 它可以用 PIXI.Container() 方法來創(chuàng)建，而我們創(chuàng)建的 Pixi 應(yīng)用的 stage 屬性就是一個容器對象，它被當作根容器使用，它將包裹所有你想用 Pixi 顯示的東西。

精靈
精靈是可以放在容器里的特殊圖像對象。精靈是你能用代碼控制圖像的基礎(chǔ)。你能夠控制他們的位置，大小，和許多其他有用的屬性來產(chǎn)生交互和動畫。
創(chuàng)建一個精靈需要用 PIXI.Sprite() 方法。

紋理
因為 Pixi 用 WebGL 和 GPU 去渲染圖像，所以圖像需要轉(zhuǎn)化成 GPU 可以處理的格式。可以被 GPU 處理的圖像被稱作 紋理 。在你讓精靈顯示圖片之前，需要將普通的圖片轉(zhuǎn)化成 WebGL 紋理。為了讓所有工作執(zhí)行的快速有效率，Pixi使用 紋理緩存 來存儲和引用所有你的精靈需要的紋理。紋理的名稱字符串就是圖像的地址。這意味著如果你有從"images/cat.png" 加載的圖像，你可以在紋理緩存中這樣找到他：

PIXI.utils.TextureCache["images/cat.png"];
示例

我們來看一個用 PixiJS 實現(xiàn)的讓圖片波浪化的效果。

效果圖

示例效果地址：

https://www.kkkk1000.com/images/learnPixiJS/

這個效果用到了 PixiJS 提供的一個濾鏡 — DisplacementFilter（置換濾鏡）

置換濾鏡就是選擇另一幅圖片，讓其在當前的圖片上產(chǎn)生凹凸效果。

原圖

置換圖

用 置換濾鏡 把 置換圖 平鋪 到 原圖 上之后

在這個效果中，是這樣的
原圖

置換圖

使用置換濾鏡后

用置換濾鏡讓原圖產(chǎn)生扭曲，通過不斷的改變置換圖的位置，使原圖的扭曲不斷的改變，看上去就像波浪了。

完整代碼 




    
    Pixi JS 置換濾鏡效果
總結(jié)

因為最近在學習 PixiJS，所以想把學習的知識總結(jié)一下，這篇文章是簡單的介紹了下 PixiJS，后續(xù)還會繼續(xù)寫一些關(guān)于 PixiJS 其他的東西。

如果文中有錯誤的地方，還請小伙伴們指出，萬分感謝。

參考

PixiJS 官網(wǎng)

Pixi 中文教程

PixiJS API 文檔

Pixi JS Displacement Effect

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99414.html

相關(guān)文章

  • 學習 PixiJS — 動畫精靈

    摘要：也就是說用這種圖片做出這樣的效果要制作動畫精靈我們需要用到的方法。定義使用紋理數(shù)組創(chuàng)建動畫精靈的方法。返回值返回一個對象，對象會有一些屬性和方法，用于控制動畫精靈。下一篇學習精靈狀態(tài) 說明 看完官方教程中提到的這本書 — Learn Pixi.js ，準備寫寫讀后感了，官方教程中所說的內(nèi)容，基本上就是書的前4章，所以我就從第5章開始寫寫吧。 動畫精靈指的是按順序使用一系列略有不同的圖像...

    PrototypeZ 評論0 收藏0

  • 前端動畫調(diào)研-V1

    摘要：支持動畫狀態(tài)的，在動畫開始，執(zhí)行中，結(jié)束時提供回調(diào)函數(shù)支持動畫可以自定義貝塞爾曲線任何包含數(shù)值的屬性都可以設(shè)置動畫倉庫文檔演示功能介紹一定程度上，也是一個動畫庫，適用所有的屬性，并且實現(xiàn)的能更方便的實現(xiàn)幀動畫，替代復雜的定義方式。 動畫調(diào)研-V1 前言：動畫從用途上可以分為兩種，一種是展示型的動畫，類似于一張GIF圖，或者一段視頻，另一種就是交互性的動畫。這兩種都有具體的應(yīng)用場景，比如...

    ddongjian0000 評論0 收藏0

  • 學習 PixiJS — 精靈狀態(tài)

    摘要：每個單獨的行為稱為狀態(tài)。狀態(tài)播放器用于控制精靈狀態(tài)。這個雪碧圖中實際上有八個精靈狀態(tài)四個靜態(tài)狀態(tài)和四個動畫狀態(tài)。下圖顯示了雪碧圖上的狀態(tài)以及標識這些狀態(tài)的幀號。將每個鍵的值設(shè)置為與狀態(tài)對應(yīng)的幀編號。 精靈狀態(tài) 如果你有復雜的游戲角色或交互式對象，你可能希望該角色根據(jù)游戲環(huán)境中發(fā)生的情況，以不同的方式運行。每個單獨的行為稱為狀態(tài)。如果你在精靈上定義狀態(tài)，那么只要游戲中出現(xiàn)與該狀態(tài)相對應(yīng)的...

    Tonny 評論0 收藏0

  • 學習 PixiJS — 小精靈冒險

    摘要：說明小精靈冒險是一書中最后一個案例。在游戲循環(huán)中，通過減小平鋪精靈的值，使其向左移動。如果方法返回，則退出循環(huán)，表示小精靈碰撞到柱子了。重置游戲如果小精靈碰撞到柱子，則在秒鐘延遲后重置游戲。 說明 小精靈冒險 是 Learn Pixi.js 一書中最后一個案例。點擊屏幕讓小精靈飛起來，小精靈上升時，會拍打翅膀，并且會有小星星產(chǎn)生。如果她撞到柱子上，她會爆炸成一堆小星星。幫助她通過15個...

    dmlllll 評論0 收藏0

  • 學習 PixiJS — 粒子效果

    摘要：使用粒子發(fā)射器方法會產(chǎn)生一次粒子爆發(fā)，但通常你必須產(chǎn)生連續(xù)的粒子流。發(fā)射器具有和方法，可讓打開和關(guān)閉粒子流，并可以定義粒子的創(chuàng)建間隔。 你如何創(chuàng)造火，煙，魔法和爆炸等效果？你制作了許多小精靈，幾十，幾百，甚至上千個精靈。然后對這些精靈應(yīng)用一些物理效果，使它們的行為類似于你嘗試模擬的元素。你還必須給他們一些關(guān)于它們應(yīng)該如何出現(xiàn)和消失以及應(yīng)該形成什么樣的模式的規(guī)則。這些微小的精靈被稱為粒子...

    chanjarster 評論0 收藏0

發(fā)表評論

0條評論

fredshare

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<