iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 4
2
Modern Web

PixiJS,方便好用的 WebGL 內容產生工具系列 第 4

[PixiJS - Day-04] PixiJS 的特性

  • 分享至 

  • xImage
  •  

本文列出一些官網上的英文說明,我會簡單翻譯並加上自己的心得
http://www.pixijs.com/#features-list


Fast

PixiJS' strength is speed. When it comes to 2D rendering, PixiJS is the fastest there is.
PixiJS 很快,而且用在2D運算上時,PixiJS真的很快。

很多時候在看 PixiJS 的效能表現時,會覺得效能比想像中的好上不少 (尤其是在手機上)


Flexible

Friendly, feature-rich API lets PixiJS take care of the fundamentals whilst you focus on producing incredible multiplatform experiences.
友善且豐富的 API,讓你可以更專注在作多裝置的互動體驗上。

在 canvas 或 WebGL 上要產生物件、讓物件動起來,使用原生的 canvas 或 WebGL 程式碼會是滿辛苦的一個過程,使用 PixiJS 時可以很方便且快速實作想要的效果。


Free

PixiJS is and always will be Open Source, with a large and supportive community pushing its growth and evolution.
PixiJS 是,而且一直會是開放原始碼的專案,而且有龐大的社群會讓 PixiJS 成長與進化。

因為 MIT License 的開源方式,使用上相當安心。我自己滿喜歡用 PixiJS,也會希望 PixiJS 本身能進化的更加好用。


MULTI-PLATFORM SUPPORT

Interactive, visually compelling content on desktop, mobile and beyond, all reached with a single codebase to deliver transferable experiences.
使用一套程式碼,能在桌機與手機等裝置上體會到相近的互動與視覺體驗。

對PixiJS 來說,不同裝置主要是尺寸大小不同,開發者可使用一套原始碼完成跨裝置的 PixiJS 專案
舉例來說,點物件的這個行為,就能分作

on('mousedown') // 僅滑鼠按下
on('touchstart') // 僅碰觸螢幕
on('pointerdown') // 一套程式碼,同時可監聽滑鼠按下與碰觸螢幕

TINTING & BLENDING MODES

Designers and clients will be thrilled by Photoshop quality blending and colour modes.
PixiJS實作了 Photoshop 裡的混合模式與色彩模式

除了支援混合模式很厲害外,我也很常用 HSV 色彩模型 (色相 H、飽和度 S、明度 V) 來製作相同飽和度與明度的顏色變化

  • 彩虹便是一個飽和度與明度相同,只有色相有變化的例子

SPRITE SHEET SUPPORT

Pixi caters for a range of sprite sheet formats and includes advanced support for features like trimming and rotational packing.
PixiJS 有實作 Sprite Sheet 並增加了新的功能。

Sprite Sheet 是 CSS 動態技巧之一,與 CSS 的 Sprite Sheet 使用上有些不同,但基本原理是相同的


ASSET LOADER

Sprite-sheets, graphics, fonts, animation data (soon to have Adobe Animate support). All your incoming assets can be loaded and handled by PixiJS.
如 Sprite-sheets、圖像、文字、動態資料都可使用 PixiJS 的 Loader 處理並控制 (在後續版本會支援 Adobe Animate)

2017/12/15 補充:
Loader 處理了很多麻煩的部分:
PixiJS 是 JS 的類別庫,
平常習慣使用 HTML / CSS 的 Srite-sheets 圖片
在沒有 CSS background-size 與 background-position 的情況下,用 Loader 搭配 sprite 圖片的 JSON 檔,就能建立一個會動的 AnimatedSprite 物件
另外如 CSS 的字體也有在 PixiJS 裡實作.可以做到一些 HTML / CSS 做不到或比較不好做的字體呈現


EASY API

Designed to be intuitive and easy to pick up. Developers old and new will find themselves right at home with its simple yet powerful API.
直觀與方便使用,讓新開發者或熟練的開發者都能找到簡單到位的API。

PixiJS 的 API 使用上相當直覺,比使用原生 canvas 或 WebGL API 方便許多
之前曾研究過 WebGL 的 API,後來還是覺得目標是會看會寫,但要使用的話,還是使用第三方套件就好


WEBGL FILTERS

Use and create your own spectacular WebGL filters and shaders to give your projects next-level visual fidelity and performance.
可在 PixiJS 專案上再使用 WebGL 濾鏡。


ADVANCED TEXT RENDERING

Beautiful anti-aliased text at native and retina resolutions means that Pixi copy is as easy on the eye as it is on any other delivery method.
反鋸齒文字運算,讓 PixiJS 可輕易在 Retina 螢幕實現漂亮的文字。

PixiJS 支援文字運算,文字上可做的變化相當多
http://pixijs.io/examples/#/demos/text-demo.js
alt
這是一個官方範例:包含文字漸層、多行、CSS Fonts、文字漸層、邊框等
後續會另有文章介紹


FULL SCENE GRAPH

Organise your objects in hierarchical trees, with parent-child relationships.
PixiJS 的物件為 parent-child 的親子關係。

後續會有一篇文章提到 PixiJS 裡物件的父子關係,並介紹在 PixiJS 裡取得與控制物件關係的方法。


RENDERER AUTO-DETECT

Certain, older platforms may not be able to use WebGL. Not a problem with Pixi as Canvas fallback is seamless and automated.
較舊的瀏覽器可能無法使用WebGL,PixiJS 可自動轉成 canvas 模式。

除了轉換 PixiJS 使用 WebGL 與 canvas 模式外, PixiJS 的 Renderer 也有許多功能與設定,後續也會有文章提到。


DEPLOY INTO APPS

Use technologies such as Cordova to rapidly deploy your Pixi project as an App. Superb for both concepting and full delivery.
PixiJS 可使用 Cordova 來佈署 App。

這個特色目前沒使用到,也許以後用到會補上,如果有使用過 Cordova 的開發心得,也歡迎互相交流了。


ACCESSIBILITY

Pixi is an inclusive technology and all content can be made to be screen reader accessible with ease. The only WebGL renderer out there that does.
PixiJS 裡所有的內容都可輕鬆的被 WebGL renderer 渲染出來。


MULTI TOUCH INTERACTIVITY

True multi-touch input and tracking means that you can create interactions such as pinch-to-scale that give audiences native feeling experiences.
支援多點輸入,代表可以實作雙指縮放這類原生事件。

在物件上設定監聽後,監聽裡收到的互動事件包含了互動的ID,可能是鍵盤,或是從0開始多點觸控的ID。


在介紹 PixiJS 官網提到的特色時,很多部分很有感覺
有些特色在我一開始列大綱的時候,也已經預計有篇幅會提到

下一篇會是系列第一部分的最後一篇:
簡單自我介紹與我用 PixiJS 做過的例子

用來銜接第二部分:PixiJS 功能與方法說明


上一篇
[PixiJS - Day-03] 使用 PixiJS 製作的內容,也許並不少
下一篇
[PixiJS - Day-05] 我,與PixiJS
系列文
PixiJS,方便好用的 WebGL 內容產生工具31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
King Tzeng
iT邦新手 3 級 ‧ 2017-12-07 01:32:06

看到PixiJS 可使用 Cordova 來佈署 App。嚇了一跳/images/emoticon/emoticon04.gif
因為我有用Cordova來作APP,下次可以來玩玩看PixiJS XD~
謝謝前輩的分享^^

Cool! 之後再跟妳交流

我要留言

立即登入留言