PIXI入門-PIXI文檔翻譯(1)

[b]1、創建渲染器和舞臺[/b]
第一步是創建一個矩形顯示區域，您可以開始在其上顯示圖像。Pixi有一個 renderer對象爲你創建這個。它自動生成一個HTML <canvas>元素，並計算如何在畫布上顯示您的圖像。然後需要創建一個特殊的Pixi Container對象稱爲stage。正如你將看到的，這個階段對象將被用作根容器，包含你想要Pixi顯示的所有東西。

這裏是你需要寫的代碼來創建renderer 和stage。將此代碼添加到您的HTML文檔的<script>標籤之間：


//Create the renderer
var renderer = PIXI.autoDetectRenderer(256, 256);

//Add the canvas to the HTML document
document.body.appendChild(renderer.view);

//Create a container object called the `stage`
var stage = new PIXI.Container();

//Tell the `renderer` to `render` the `stage`
renderer.render(stage);

這是你需要寫的最基本的代碼，以開始使用Pixi。它生成一個黑色的256像素乘256像素的畫布元素，並將其添加到您的HTML文檔。以下是運行此代碼時在瀏覽器中顯示的內容。

Yay，一個黑色的正方形！

Pixi的autoDetectRenderer方法確定是否使用Canvas繪圖API或WebGL來渲染圖形，這取決於可用的。它的第一個和第二個參數是畫布的寬度和高度。但是，您可以包括可選的第三個參數以及可以設置的一些附加值。這第三個參數是一個對象字面量，這裏如何使用它設置抗鋸齒，透明度和分辨率：


renderer =  PIXI。autoDetectRenderer（
   256，256，
  {antialias : false,transparent: false,resolution: 1 }
）;

第三個參數（選項對象）是可選的 - 如果你對Pixi的默認設置感到滿意，你可以放棄它，通常不需要改變它們。（但是，如果需要，請參閱Pixi的有關Canvas Renderer 和 WebGLRenderer的文檔以獲取更多信息。）

這些選項做什麼？


{antialias: false, transparent: false, resolution: 1}

antialias平滑字體和圖形基元的邊緣。（WebGL抗鋸齒不是在所有平臺上都可用，因此您需要在遊戲的目標平臺上測試此功能。）transparent使畫布背景透明。resolution使得更容易使用不同分辨率和像素密度的顯示器。設置分辨率有點超出本教程的範圍，但檢查Mat Grove 關於如何使用resolution所有細節的解釋。但通常，resolution 對於大多數項目，只保持在1，你會沒事的。

（注意：渲染器有一個額外的，第四個選項preserveDrawingBuffer，默認爲false。設置它的唯一原因true是，如果你需要調用Pixi的專門的dataToURL 方法在WebGL畫布上下文）。

Pixi的渲染器對象默認使用WebGL，這是很好的，因爲WebGL是令人難以置信的快，讓你使用一些壯觀的視覺效果，你會學到所有關於未來。但是如果你需要強制Canvas繪圖API渲染通過WebGL，你可以這樣做：


renderer = new PIXI.CanvasRenderer(256, 256);

只有前兩個參數是必需的：width和height。

你可以強制WebGL渲染這樣：


renderer = new PIXI.WebGLRenderer(256, 256);

該renderer.view對象只是一個普通的老式普通的<canvas> 對象，所以你可以控制它，你將控制其他任何畫布對象以同樣的方式。下面是如何給畫佈一個可選的虛線邊框：


renderer.view.style.border = "1px dashed black";

如果您需要在創建後更改畫布的背景顏色，請將renderer對象的backgroundColor屬性設置爲任何十六進制顏色值：


renderer.backgroundColor = 0x061639;

如果要找到的寬度或高度renderer，請使用 renderer.view.width和renderer.view.height。

（重要：雖然stage也有width和height性能，他們並不指渲染窗口的大小舞臺的，width而height 只是告訴你通過你把它裏面的東西所佔據的區域-更多的在前面！）

要更改畫布的大小，請使用renderer's' resize 方法，並提供任何新值width和height值。但是，要確保畫布的大小調整爲與分辨率匹配，請設置autoResize 爲true。


renderer.autoResize = true;
renderer.resize(512, 512);

如果要使畫布填滿整個窗口，您可以應用此CSS樣式，並將渲染器的大小調整爲瀏覽器窗口的大小。


renderer.view.style.position = "absolute";
renderer.view.style.display = "block";
renderer.autoResize = true;
renderer.resize(window.innerWidth, window.innerHeight);

但是，如果你這樣做，請確保你也設置默認填充和邊距爲0在所有的HTML元素與此位的CSS代碼：


<style> *{ padding:0;margin:0 } </style>

（上面的代碼中的星號*是CSS“通用選擇器”，它只是意味着“HTML文檔中的所有標籤”）。

如果您希望畫布按比例縮放到任何瀏覽器窗口大小，則可以使用此自定義scaleToWindow函數。

[b]2、Pixi Sprite[/b]
在上一節中，您學習瞭如何創建一個stage對象，如下所示：

var stage =  new  PIXI.Container();

該stage是Pixi的Container對象。你可以把一個容器看成是一個空的盒子，它將組合在一起並存儲你放在裏面的任何東西。stage我們創建的對象是你場景中所有可見東西的根容器。Pixi要求你有一個根容器對象，因爲renderer需要渲染的東西：

renderer.render(stage);

無論你放在裏面stage將會呈現在canvas上。現在stage是空的，但很快我們就要開始把東西放在裏面。

（注意：你可以給你的根容器任何你喜歡的名字，調用它 scene或者root如果你喜歡這個名字 stage只是一個古老但有用的約定，我們將在本教程中堅持）

那麼你把什麼放在舞臺上？特殊圖像對象稱爲精靈。Sprite基本上只是你可以用代碼控制的圖片。您可以控制它們的位置，大小和其他一些對於製作交互式和動畫圖形有用的屬性。學習製作和控制精靈是真正的最重要的事情，學習使用Pixi。如果你知道如何製作精靈，並將它們添加到舞臺上，你只是一個小步驟，開始製作遊戲。

Pixi有一個Sprite類，是一個多才多藝的方式來製作遊戲精靈。有三種主要方法來創建它們：

(1)從單個圖像文件。
(2)從圖塊上的子圖像。tileset是一個單一的大圖片，包括您在遊戲中需要的所有圖片。
(3)從紋理地圖集（定義圖像集大小和位置的JSON文件）。

你將學習所有三種方法，但在你做之前，讓我們先了解你需要了解的圖像，然後才能用Pixi顯示它們。

將圖像加載到紋理緩存中
因爲Pixi使用WebGL在GPU上渲染圖像，所以圖像需要採用GPU可以處理的格式。WebGL準備好的圖像稱爲紋理。在使sprite顯示圖像之前，您需要將普通圖像文件轉換爲WebGL紋理。爲了保持一切工作的快速和有效的底層，Pixi使用紋理緩存來存儲和引用你的sprites將需要的所有紋理。紋理的名稱是與它們所引用的圖像的文件位置匹配的字符串。這意味着如果你有一個紋理加載"images/cat.png"，你可以在紋理緩存中找到它，如下所示：

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

紋理存儲在一個WebGL兼容的格式，這是有效的Pixi的渲染器工作。然後你可以使用Pixi的Sprite類使用紋理創建一個新的sprite。

var texture = PIXI.utils.TextureCache["images/anySpriteImage.png"];
var sprite = new PIXI.Sprite(texture);

但是如何加載圖像文件並將其轉換爲紋理？使用Pixi的內置loader對象。

Pixi的強大的loader對象是所有你需要加載任何類型的圖像。以下是如何使用它來加載圖像並調用setup在圖像加載完成後調用的函數：


PIXI.loader
  .add("images/anyImage.png")
  .load(setup);

function setup() {
  //This code will run when the loader has finished loading the image
}

PIXI開發團隊建議，如果你使用的裝載機，應通過引用紋理在創建精靈loader的resources對象，就像這樣：


var sprite = new PIXI.Sprite(
  PIXI.loader.resources["images/anyImage.png"].texture
);

這裏有一些完整的代碼示例，您可以寫入以加載圖像，調用setup函數，並從加載的圖像創建sprite：


PIXI.loader
  .add("images/anyImage.png")
  .load(setup);

function setup() {
  var sprite = new PIXI.Sprite(
    PIXI.loader.resources["images/anyImage.png"].texture
  );
}

您可以通過使用可鏈接的add方法列出來加載多個圖像，如下所示：


PIXI.loader
  .add("images/imageOne.png")
  .add("images/imageTwo.png")
  .add("images/imageThree.png")
  .load(setup);

更好的是，只需列出所有要加載到單個add方法中的數組中的文件，如下所示：


PIXI.loader
  .add([
    "images/imageOne.png",
    "images/imageTwo.png",
    "images/imageThree.png"
  ])
  .load(setup);

該loader還可以讓你加載JSON文件，您將在後面瞭解到。

[b]3、顯示sprites[/b]
加載圖像並使用它來製作精靈後，還需要做兩件事，然後才能在畫布上看到它：

-1。你需要精靈添加到陂溪的stage與stage.addChild方法，如下：

stage.addChild(cat);

舞臺是容納所有精靈的主要容器。

-2。你需要告訴Pixi的renderer渲染舞臺。

renderer.render(stage);

在你做這兩件事之前，你的精靈都不會顯示。

在我們繼續之前，讓我們來看一個如何使用剛纔學到的內容顯示單個圖像的實際示例。在examples/images 文件夾中，你會發現一個64×64像素的PNG圖像的一隻貓。

[img]http://dl2.iteye.com/upload/attachment/0123/3301/736c9d15-4b20-3ceb-8ff5-a8c7a4ac343f.png[/img]
這裏是所有的JavaScript代碼，你需要加載圖像，創建一個sprite，並顯示在Pixi的舞臺上：


var stage = new PIXI.Container(),
    renderer = PIXI.autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);

//Use Pixi's built-in `loader` object to load an image
PIXI.loader
  .add("images/cat.png")
  .load(setup);

//This `setup` function will run when the image has loaded
function setup() {

  //Create the `cat` sprite from the texture
  var cat = new PIXI.Sprite(
    PIXI.loader.resources["images/cat.png"].texture
  );

  //Add the cat to the stage
  stage.addChild(cat);

  //Render the stage   
  renderer.render(stage);
}

運行此代碼時，您會看到以下內容：

[img]http://dl2.iteye.com/upload/attachment/0123/3303/848d5f5a-b3fc-3f23-a809-e201f1861b46.png[/img]

現在我們到這裏了！
如果你需要從舞臺上刪除一個精靈，使用removeChild方法：

stage.removeChild(anySprite)

但通常設置sprite的visible屬性false將是一個更簡單和更有效的方式使sprites消失。

anySprite.visible = false;

使用別名
您可以通過爲您經常使用的Pixi對象和方法創建簡短形式的別名，爲自己節省一些打字並使代碼更具可讀性。例如，PIXI.utils.TextureCache鍵入太多了？我想是這樣，特別是在一個大項目，你可以使用它幾十次。所以，創建一個較短的別名指向它，像這樣：

var TextureCache = PIXI.utils.TextureCache

然後，使用別名代替原始，像這樣：

var texture = TextureCache["images/cat.png"];

除了讓你寫更簡潔的代碼，使用別名還有一個額外的好處：它有助於略微緩衝你的Pixi經常變化的API。如果Pixi的API在未來的版本改變 - 這將！ - 你只需要更新這些別名到Pixi對象和方法在一個地方，在程序的開始，而不是每個實例，他們在整個代碼中使用。所以當Pixi的開發團隊決定他們想要重新排列傢俱時，你會比他們領先一步！

爲了看看如何做到這一點，讓我們重寫我們寫的代碼來加載一個圖像並顯示它，使用別名對所有Pixi對象和方法。


//Aliases
var Container = PIXI.Container,
    autoDetectRenderer = PIXI.autoDetectRenderer,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    Sprite = PIXI.Sprite;

//Create a Pixi stage and renderer and add the 
//renderer.view to the DOM
var stage = new Container(),
    renderer = autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);

//load an image and run the `setup` function when it's done
loader
  .add("images/cat.png")
  .load(setup);

function setup() {

  //Create the `cat` sprite, add it to the stage, and render it
  var cat = new Sprite(resources["images/cat.png"].texture);  
  stage.addChild(cat);
  renderer.render(stage);
}

本教程中的大多數示例將使用跟隨此相同模型的Pixi對象的別名。除非另有說明，否則您可以假設所有代碼示例都使用類似這樣的別名。

這是所有你需要知道開始加載圖像和創建精靈。

[b]4、一點點關於裝載進度loading的東西[/b]

我上面顯示的格式是我建議您使用作爲加載圖像和顯示精靈的標準模板。所以，你可以安全地忽略接下來的幾個段落，直接跳到下一節“定位精靈”。但Pixi的loader對象是相當複雜的，包括一些功能，你應該注意，即使你不使用它們定期。讓我們看看一些最有用的。

從普通的JavaScript Image對象或Canvas創建sprite

爲了優化和效率，最好從已經預先加載到Pixi的紋理緩存中的紋理創建sprite。但是如果由於某種原因你需要從一個常規JavaScript Image 對象創建一個紋理，你可以使用Pixi BaseTexture和Texture 類：


var base = new PIXI.BaseTexture(anyImageObject),
    texture = new PIXI.Texture(base),
    sprite = new PIXI.Sprite(texture);

你可以使用，BaseTexture.fromCanvas如果你想從任何現有的canvas元素做一個紋理：


var base = new PIXI.BaseTexture.fromCanvas(anyCanvasElement),

如果要更改sprite正在顯示的紋理，請使用 texture屬性。將其設置爲任何Texture對象，如下所示：

anySprite.texture = PIXI.utils.TextureCache["anyTexture.png"];

你可以使用這種技術交互式改變精靈的外觀，如果在遊戲中發生重大事情。

爲加載文件指定名稱

可以爲要加載的每個資源分配唯一的名稱。只需提供名稱（字符串）作爲add方法中的第一個參數。例如，下面是如何命名一個貓的圖像 catImage。


PIXI.loader
  .add("catImage", "images/cat.png")
  .load(setup);

這將創建稱爲對象catImage在loader.resources。這意味着您可以通過引用catImage對象來創建sprite ，如下所示：


var cat = new PIXI.Sprite(PIXI.loader.resources.catImage.texture);

但是，我建議您不要使用此功能！這是因爲你必須記住你給每個加載的文件的所有名稱，以及確保你不會不小心使用同一個名稱多次。使用文件路徑名，就像我們在前面的例子中做的一樣，它更容易出錯。

監控負載進度

Pixi的加載器有一個特殊的progress事件，將調用一個可定製的函數，每次加載文件時運行。progress事件被稱爲 loader的on方法，就像這樣：


PIXI.loader.on("progress", loadProgressHandler);

下面是如何將on方法包含在加載鏈中，以及在loadProgressHandler每次加載文件時調用用戶可定義的函數


PIXI.loader.on("progress", loadProgressHandler);

PIXI.loader
  .add([
    "images/one.png",
    "images/two.png",
    "images/three.png"
  ])
  .on("progress", loadProgressHandler)
  .load(setup);

function loadProgressHandler() {
  console.log("loading"); 
}

function setup() {
  console.log("setup");
}

每次加載其中一個文件時，progress事件將調用 loadProgressHandler在控制檯中顯示“加載”。當所有三個文件都加載後，setup 函數將運行。這裏是控制檯中上面的代碼的輸出：

loading
loading
loading
setup

這是整潔，但它變得更好。您還可以準確地確定已加載的文件以及當前加載的文件的百分比。你可以通過添加可選的loader和 resource參數來做到這一點loadProgressHandler，像這樣：

function loadProgressHandler(loader, resource) { //...

然後，您可以使用resource.url查找當前加載的文件。（resource.name如果要查找可能已分配給文件的可選名稱，請使用此選項作爲方法的第一個參數 add。）您可以使用loader.progress查找當前加載的總資源的百分比。這裏有一些代碼。



PIXI.loader
  .add([
    "images/one.png",
    "images/two.png",
    "images/three.png"
  ])
  .on("progress", loadProgressHandler)
  .load(setup);

function loadProgressHandler(loader, resource) {

  //Display the file `url` currently being loaded
  console.log("loading: " + resource.url); 

  //Display the precentage of files currently loaded
  console.log("progress: " + loader.progress + "%"); 

  //If you gave your files names as the first argument 
  //of the `add` method, you can access them like this
  //console.log("loading: " + resource.name);
}

function setup() {
  console.log("All files loaded");
}

以下是代碼在運行時顯示在控制檯中的代碼：


loading: images/one.png
progress: 33.333333333333336%
loading: images/two.png
progress: 66.66666666666667%
loading: images/three.png
progress: 100%
All files loaded

這真的很酷，因爲你可以使用它作爲創建加載進度條的基礎。

（注意：您可以訪問 resource對象的其他屬性resource.error將告訴您嘗試加載文件時發生的任何可能的錯誤，resource.data讓您訪問文件的原始二進制數據。）

更多關於Pixi的裝載機

Pixi的加載器是可笑的功能豐富和可配置。讓我們快速瀏覽一下它的用法，讓你開始。

加載器的chainable add方法需要4個基本參數：

add(name, url, optionObject, callbackFunction)

下面是加載器的源代碼文檔對這些參數的說明：

name（string）：要加載的資源的名稱。如果沒有通過，url則使用。
url（string）：這個資源的url，相對於baseUrl加載器的。
options（object literal）：加載的選項。
options.crossOrigin（Boolean）：請求是否是跨源的？默認值是自動確定。
options.loadType：資源應該如何加載？默認值爲Resource.LOAD_TYPE.XHR。
options.xhrType：使用XHR時應如何解釋加載的數據？默認值爲Resource.XHR_RESPONSE_TYPE.DEFAULT
callbackFunction：當此特定資源完成加載時調用的函數。

這些參數中唯一需要的參數是url（要加載的文件）。

下面是一些您可以使用該add 方法加載文件的方法的示例。這些第一個是文檔稱爲加載器的“正常語法”：


.add('key', 'http://...', function () {})
.add('http://...', function () {})
.add('http://...')

這些都是加載器的“對象語法”的例子：


.add({
  name: 'key2',
  url: 'http://...'
}, function () {})

.add({
  url: 'http://...'
}, function () {})

.add({
  name: 'key3',
  url: 'http://...'
  onComplete: function () {}
})

.add({
  url: 'https://...',
  onComplete: function () {},
  crossOrigin: true
})

您還可以將add對象或網址或兩者的數組傳遞給方法：


.add([
  {name: 'key4', url: 'http://...', onComplete: function () {} },
  {url: 'http://...', onComplete: function () {} },
  'http://...'
]);

（注：如果你需要重置加載器加載一個新的批處理文件，調用加載器的reset方法：PIXI.loader.reset();）

Pixi的加載器有更多的高級功能，包括選項，讓您加載和解析所有類型的二進制文件。這不是你需要做的日常工作，超出了本教程的範圍，所以請確保檢查加載器的GitHub存儲庫，瞭解更多信息。

PIXI入門-PIXI文檔翻譯(1)

PIXI Sprite的定位，尺寸和旋轉-PIXI文檔翻譯(2)

PIXI 移動 Sprite-PIXI文檔翻譯(4)

JDK7安裝

記錄掃描嗅探與反掃描嗅探的那些事

PIXI 創建 Sprite的幾種方法-PIXI文檔翻譯(3)

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結