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

資訊專欄INFORMATION COLUMN

開始學(xué)習(xí) PixiJS

fredshare / 615人閱讀

摘要：它自動(dòng)偵測(cè)使用或者。開發(fā)者無(wú)需專門學(xué)習(xí)就能感受到強(qiáng)大的硬件加速的力量。要注意的是，雖然非常適合制作游戲，但它并不是一個(gè)游戲引擎，它的核心本質(zhì)是盡可能快速有效地在屏幕上移動(dòng)物體?？梢员惶幚淼膱D像被稱作紋理。

PixiJS 介紹

PixiJS 是一個(gè)超快的2D渲染引擎。它自動(dòng)偵測(cè)使用 WebGL 或者 Canvas。開發(fā)者無(wú)需專門學(xué)習(xí) WebGL 就能感受到強(qiáng)大的硬件加速的力量。

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

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

感受一下

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

cavalier challenge

Run Pixie Run

Filters Demo

WASTE INVADERS

Storm Brewing

H5場(chǎng)景小動(dòng)畫

打磚塊游戲

安裝

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

NPM 安裝：

$> npm install pixi.js

CDN 安裝：

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

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




  
  Hello World

如果 PixiJS 安裝成功，在瀏覽器的控制臺(tái)中你會(huì)看見(jiàn)這樣的東西。

概念介紹

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

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

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

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

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

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

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

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

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

我們來(lái)看一個(gè)用 PixiJS 實(shí)現(xiàn)的讓圖片波浪化的效果。

效果圖

示例效果地址：

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

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

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

原圖

置換圖

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

在這個(gè)效果中，是這樣的
原圖

置換圖

使用置換濾鏡后

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

完整代碼 




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

因?yàn)樽罱趯W(xué)習(xí) PixiJS，所以想把學(xué)習(xí)的知識(shí)總結(jié)一下，這篇文章是簡(jiǎn)單的介紹了下 PixiJS，后續(xù)還會(huì)繼續(xù)寫一些關(guān)于 PixiJS 其他的東西。

如果文中有錯(cuò)誤的地方，還請(qǐng)小伙伴們指出，萬(wàn)分感謝。

參考

PixiJS 官網(wǎng)

Pixi 中文教程

PixiJS API 文檔

Pixi JS Displacement Effect

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

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

相關(guān)文章

  • 學(xué)習(xí) PixiJS — 動(dòng)畫精靈

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

    PrototypeZ 評(píng)論0 收藏0

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

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

    ddongjian0000 評(píng)論0 收藏0

  • 學(xué)習(xí) PixiJS — 精靈狀態(tài)

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

    Tonny 評(píng)論0 收藏0

  • 學(xué)習(xí) PixiJS — 小精靈冒險(xiǎn)

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

    dmlllll 評(píng)論0 收藏0

  • 學(xué)習(xí) PixiJS — 粒子效果

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

    chanjarster 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

fredshare

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<