---
# System prepended metadata

title: Pixi - log
tags: [Log]

---

# 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部分。
```javascript=
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. 
