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

資訊專欄INFORMATION COLUMN

學習 PixiJS — 精靈狀態

Tonny / 2210人閱讀

摘要：每個多帶帶的行為稱為狀態。狀態播放器用于控制精靈狀態。這個雪碧圖中實際上有八個精靈狀態四個靜態狀態和四個動畫狀態。下圖顯示了雪碧圖上的狀態以及標識這些狀態的幀號。將每個鍵的值設置為與狀態對應的幀編號。

精靈狀態

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

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

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

sprite

定義：

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

用法：

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

參數：

第一個參數 frameTextures 可以是以下任何一個：

一個 PNG 圖像字符串

一個Pixi 紋理對象

紋理圖集幀 id 數組

一個 PNG 圖像字符串的數組

一個 Pixi 紋理對象數組

如果你為 sprite 方法提供一個數組，它將返回一個動畫精靈，這個動畫精靈會內置了一個狀態播放器。

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

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

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

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

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

第二個參數 xPosition 和 第三個參數 yPosition 表示創建的精靈的 x 和 y 坐標。

什么是精靈狀態？

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

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

靜態狀態

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

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

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

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

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

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

Iori.show(Iori.states.left);

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

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

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

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

動畫狀態

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

這些狀態中的每一個由?四個幀組成，當在循環中播放時，將創建連續的步行動畫。要定義每個動畫狀態，就在 states 對象中創建描述該狀態的鍵。鍵的值應該是一個包含兩個元素的數組：起始幀編號和結束幀編號。例如，以下是如何定義 walkLeft 狀態：

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

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

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

現在它的狀態都被定義了，讓我們做一個會走的精靈。

把制作動畫精靈和定義狀態還有鍵盤響應所學到的知識相結合，就可以制作一個步行游戲角色。

查看效果

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

制作動畫幀的工具

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

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

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

Dragon Bones，Spine，和 Creature。這三個工具都非常相似。它們可以創建復雜的游戲角色，為它們設置動畫，并將它們導出為雪碧圖和 JSON 文件。

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

上一篇 學習 PixiJS — 動畫精靈

下一篇 學習 PixiJS — 粒子效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101203.html

相關文章

  • 學習 PixiJS — 動畫精靈

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

    PrototypeZ 評論0 收藏0

  • 學習 PixiJS — 交互工具

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

    zlyBear 評論0 收藏0

  • 學習 PixiJS — 粒子效果

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

    chanjarster 評論0 收藏0

  • 開始學習 PixiJS

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

    fredshare 評論0 收藏0

  • 學習 PixiJS — 小精靈冒險

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

    dmlllll 評論0 收藏0

發表評論

0條評論

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