成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Tonny / 2274人閱讀

摘要：每個多帶帶的行為稱為狀態(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)

如果你有復(fù)雜的游戲角色或交互式對象，你可能希望該角色根據(jù)游戲環(huán)境中發(fā)生的情況，以不同的方式運行。每個多帶帶的行為稱為狀態(tài)。如果你在精靈上定義狀態(tài)，那么只要游戲中出現(xiàn)與該狀態(tài)相對應(yīng)的事件，就可以觸發(fā)這些狀態(tài)。
比如，通過鍵盤的方向鍵控制一個游戲角色時，按下左箭頭，角色就向左移動，其實可以理解為，按下左鍵頭時，觸發(fā)了角色的向左移動的狀態(tài)。

如果要開始使用精靈狀態(tài)，首先需要一個狀態(tài)播放器。狀態(tài)播放器用于控制精靈狀態(tài)。Pixi 精靈沒有自己的狀態(tài)播放器，但你可以使用 SpriteUtilities 庫中的 sprite 的方法，該方法將創(chuàng)建一個內(nèi)置狀態(tài)播放器的精靈。

SpriteUtilities 庫的使用上一篇提到過了，可以看 學(xué)習(xí) PixiJS — 動畫精靈 這篇文章。

sprite

定義：

使用 sprite 函數(shù)制作任何類型的 Pixi 精靈。

用法：

let anySprite = su.sprite(frameTextures, xPosition, yPosition);

參數(shù)：

第一個參數(shù) frameTextures 可以是以下任何一個：

一個 PNG 圖像字符串

一個Pixi 紋理對象

紋理圖集幀 id 數(shù)組

一個 PNG 圖像字符串的數(shù)組

一個 Pixi 紋理對象數(shù)組

如果你為 sprite 方法提供一個數(shù)組，它將返回一個動畫精靈，這個動畫精靈會內(nèi)置了一個狀態(tài)播放器。

狀態(tài)播放器只是四個新屬性和方法的集合，用于控制精靈動畫狀態(tài)。

fps：用于設(shè)置精確的動畫速度的屬性，以每秒幀數(shù)為單位。它的默認值是12，fps 與游戲循環(huán) fps 無關(guān)，這意味著你可以讓精靈動畫以獨立于游戲或應(yīng)用程序速度的速度播放。

playAnimation：一種播放精靈動畫的方法。如果要播放幀的子集，就傳入開始幀編號和結(jié)束幀編號兩個參數(shù)。默認情況下，動畫將循環(huán)播放，除非你將精靈的 loop 屬性值設(shè)置為 false 。

stopAnimation：一種在當前幀停止精靈動畫的方法。

show：接受參數(shù)是一個數(shù)字，用來顯示特定幀編號的方法。

第二個參數(shù) xPosition 和 第三個參數(shù) yPosition 表示創(chuàng)建的精靈的 x 和 y 坐標。

什么是精靈狀態(tài)？

下圖是一個游戲角色的 PNG 圖像，其中包含使角色看起來像是在四個不同方向行走所需的所有幀。

這個雪碧圖中實際上有八個精靈狀態(tài)：四個靜態(tài)狀態(tài)和四個動畫狀態(tài)。讓我們看看這些狀態(tài)是什么以及如何定義它們。

靜態(tài)狀態(tài)

精靈的靜態(tài)狀態(tài)定義精靈在不移動時的四個位置。這些狀態(tài)是：down， left， right，和up。下圖顯示了雪碧圖上的狀態(tài)以及標識這些狀態(tài)的幀號。

可以看到第0幀是向下狀態(tài)，第4幀是左側(cè)狀態(tài)，第8幀是右側(cè)狀態(tài)，第12幀是向上狀態(tài)。怎么定義這些狀態(tài)呢？首先，創(chuàng)建精靈，以下代碼展示了如何使用 sprite 方法創(chuàng)建精靈。

let frames = su.filmstrip("images/Iori.png", 32, 32);
let Iori = su.sprite(frames);

接下來，在精靈上創(chuàng)建一個名為 states 的對象字面量屬性。并在 states 對象中創(chuàng)建down，left，right，和up 的鍵。將每個鍵的值設(shè)置為與狀態(tài)對應(yīng)的幀編號。

Iori.states = {
    down: 0,
    left: 4,
    right: 8,
    up: 12
};

接下來就是使用精靈的 show 方法來顯示正確的狀態(tài)。例如，以下代碼展示如何顯示精靈的 left 狀態(tài)：

Iori.show(Iori.states.left);

下圖顯示了改變這些狀態(tài)對精靈外觀的影響。

你在可以在任何你需要的地方使用它，讓精靈對游戲世界的變化作出反應(yīng)。比較常見的一個場景是在鍵盤按鍵的時候，這樣你就可以通過箭頭鍵的方向改變精靈面向的方向。例如，按下左箭頭鍵時，你可以通過以下方式將精靈轉(zhuǎn)向左側(cè)。

//左箭頭按下
left.press = () => {
 //顯示`left`狀態(tài)
 Iori.show(Iori.states.left);
};

只需對其余的箭頭鍵使用相同的格式，就可以使精靈面向所有的四個方向。

動畫狀態(tài)

精靈的動畫狀態(tài)定義了精靈移動時的四個動作序列。這些狀態(tài)是：walkDown，walkLeft，walkRight，和walkUp 。下圖顯示了這些狀態(tài)在雪碧圖上的位置。

這些狀態(tài)中的每一個由?四個幀組成，當在循環(huán)中播放時，將創(chuàng)建連續(xù)的步行動畫。要定義每個動畫狀態(tài)，就在 states 對象中創(chuàng)建描述該狀態(tài)的鍵。鍵的值應(yīng)該是一個包含兩個元素的數(shù)組：起始幀編號和結(jié)束幀編號。例如，以下是如何定義 walkLeft 狀態(tài)：

//3是動畫序列 開始的幀編號，5是結(jié)束的幀編號
walkLeft: [3, 5]

以下是如何將這四種新動畫狀態(tài)添加到 Iori 精靈中：

Iori.states = {
    down: 0,
    left: 4,
    right: 8,
    up: 12,
    walkDown: [0, 3],
    walkLeft: [4, 7],
    walkRight: [8, 11],
    walkUp: [12, 15]
};

現(xiàn)在它的狀態(tài)都被定義了，讓我們做一個會走的精靈。

把制作動畫精靈和定義狀態(tài)還有鍵盤響應(yīng)所學(xué)到的知識相結(jié)合，就可以制作一個步行游戲角色。

查看效果

如果希望精靈在屏幕上移動得更快或更慢，就在箭頭鍵方法中更改 vx 和 vy 的值。如果希望精靈的步行動畫效果更快或更慢，就更改精靈的 fps 屬性。

制作動畫幀的工具

使用 Adobe Illustrator 或 Photoshop 手動繪制每個幀。

Flash Professional 只需將動畫導(dǎo)出為雪碧圖，就可以在 JavaScript 游戲中使用它。你還可以使用 Shoebox 等工具將 Flash 的 SWF 文件格式轉(zhuǎn)換為紋理圖集。

Piskel 是一個免費的在線工具，用于制作像素風格的動畫游戲角色。

Dragon Bones，Spine，和 Creature。這三個工具都非常相似。它們可以創(chuàng)建復(fù)雜的游戲角色，為它們設(shè)置動畫，并將它們導(dǎo)出為雪碧圖和 JSON 文件。

Shoebox 是一款基于Adobe Air 的免費應(yīng)用程序，它的功能挺多，比如可以用來制作雪碧圖，也可以拆分雪碧圖，還可以檢測透明圖像中的精靈并將其剪切出來 等。

上一篇 學(xué)習(xí) PixiJS — 動畫精靈

下一篇 學(xué)習(xí) PixiJS — 粒子效果

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101203.html

相關(guān)文章

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

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

    PrototypeZ 評論0 收藏0

  • 學(xué)習(xí) PixiJS — 交互工具

    摘要：設(shè)置縮放比例的構(gòu)造函數(shù)還可以傳入第三個參數(shù)，這個可選的參數(shù)用來確保使用的坐標將匹配畫布的縮放像素坐標。將其設(shè)置為將再次啟用拖動。 說明 Pixi 內(nèi)置一組功能有限的用于鼠標交互和觸摸交互的方法，但是對于游戲和應(yīng)用程序所需的豐富交互性，建議使用第三方庫來簡化操作，這篇文章介紹的是 Tink 庫，它有通用的指針對象、拖放精靈、按鈕對象、鍵盤控制 等一些有用的功能。 使用 Tink 庫 要...

    zlyBear 評論0 收藏0

  • 學(xué)習(xí) 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

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

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

    fredshare 評論0 收藏0

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

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

    dmlllll 評論0 收藏0

發(fā)表評論

0條評論

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