舞台

今天會講到昨天說到的pixi.application創造的五個的其中一個stage

• loader
• renderer
• stage
• ticker
• view

stage

stage是root的pixi.container，在引入pixi就會創建好，不用特別建立。
stage有點像是最外面的大群組(容器)，stage裡面還可以有不同的子container，等等下面會有conatainer的介紹。

app.stage

PIXI.Container

每一個conatainer都是一個群組(容器)的概念，container可以用來裝所有你想要顯示在畫布上的物件(像是之後會提到的sprite)，container有許多屬性可以調整，要看更多pixi.container屬性可以看官網的介紹
以下會介紹範例用到的屬性：

屬性 | 參數類別 | 描述
------------- | -------------
interactive | Booleen | 預設false，預設的conatiner是不可以互動，設定為可互動後可以監聽動作並產生相對應效果
alpha | Number | 透明度，預設1
buttonMode | Booleen | 預設false，如為true，滑過container就會有預設pointer的鼠標行為
cursor | String | 預設pointer，滑過時的鼠標樣式，可參照MDN

小小範例

做一個滑過後container透明度變化的範例，而裡面用到的sprite會在明天做介紹
這邊想要提醒，container有width跟height的屬性可以設，但如果沒有設定，container寬高會隨這裡面的物件

let app = new PIXI.Application()
document.body.appendChild(app.view)
let container = new PIXI.Container() //創建容器
let sprite=new PIXI.Sprite.fromImage('./me.png') //載入圖片
app.stage.addChild(container) //先將container放入根container stage
container.addChild(sprite) //再把圖片物件放入container
container.interactive = true // 設定為可互動
container.buttonMode = true  // pointer: cursor
container.x=100 //設定container x座標
container.y=100 //設定container y座標

// 監聽事件
container.on('mouseover', function(){
    //滑鼠移過變半透明
    container.alpha=.5
})
container.on('mouseout', function(){
    //滑鼠移出變回不透明
    container.alpha=1
})

成果畫面

～如有疑問或是錯誤，歡迎不吝指教～

參考來源：
[1]http://pixijs.download/release/docs/PIXI.Container.html
[2]https://github.com/Zainking/learningPixi