# Pixi - log
###### tags: `Log`

## 不知道多久之前
#### Basic concept
1. 建構實例 ： 跟所有的前端框架一樣，需要於某個element上掛載使用的instance。
2. option api :
- width : canvas的寬度。
- height : canvas的高度。
- antialis : 字體設定，預設為true，可以使字體比較平順。
- transparent : 透明度，但只能設定程true或false。
- backgroundColor : 背景顏色，好像只吃16進位(0x------)。
- forceCanvas : 渲染器的選擇，預設為webGL。
3. member :
- view : HTML element，用於掛載的。
- render : app的渲染器。

- 註 ： 有說法說pixi.js比較像一個render engine，不是game engine。
- 雖然不知道是什麼意思，但應該可以想成，pixi.js比較重於render部分。

const app=new PIXI.application({
    width : 400,
    height : 400 ,
});
document.body.appendChild(app.view);

4. container : 容器，不同於bootstrap的定容容器。
- 功用 ： 包含所有在同一個場景的element，組成的最基本元素。
- app.stage : root conatiner(官方文件的解釋)
- ```addChild``` : 加入元素的方法。
#### Texture
1. PIXI.Textrue : 暫存圖片資料的object。
- 不是提供直接使用為可互動物件的。
- 可以使用網址。

官方文件 ： 
A texture stores the information that represents an image or 
part of an image.

It cannot be added to the display list directly; instead use it 
as the texture for a Sprite. If no frame is provided for a texture, 
then the whole image is used.

2. PIXI.Sprite : 可以直接互動的物件。
- 可以直接載入圖片，但不可以用網址。
- 可以用textrue為圖片source。
- 可以用屬性```sprite.x```和``` sprite.y```
- 註 ： Sprite ，常用來表示2D遊戲中，二維陣列組成的圖片物件。
3. Loader : 用來載入其他的資料。

官方文件 ： 
A generic resource loader, made with web games in mind.

## 2021.3.20
### (一) . 找出可以做出殘影特效的方法
- canvas的作法 ： 在每楨的動畫不用清除，用一層有alpha的黑色渲染。
- PIXI的問題 ： 好像沒有方法可以設定```PIXI.renderer```的每楨中間的過程。
1. 方法一 ： 用```PIXI.Rope```去做。
- 失敗 ： PIXI.Rope是扭曲一個材質，不會造成重疊。
2.