# LearningWonderlandFOBsp # 操作方式 點選左方按鈕觀看範例 - 舞台：舞台範例，滑鼠右下方會顯示xy座標 - 捲軸背景：演示使用ScrollingBg製作出的捲軸背景 - 攝影機：演示GameCamera的基本用法及設定焦點物件 - 補間動畫：Tween範例，各種不同Easing的呈現 - AUTOWRAP：AutoWrapTextBox試驗，為了我方便而寫的Class - 鍵盤；演示各種鍵盤事件的差異 - 物理：演示如何新增物理物件及連結可視物件 - 音效：演示如何播放音效和改變音量，來源：https://audionautix.com/ (ClapAlong) - 科皓不要: 科皓不要啊 # 第一次接觸程式？ [請移駕](cg://source/CG.LearningWonderlandFOBsp/CG_NiceToMeetYou.md) # 科皓不要 # 舞台初始化 製作遊戲首先應該要製作一個遊戲舞台，而在CG(Code Gamelet)中，我們使用以下方法初始化一個長600像素(px)、寬400像素的舞台： ```typescript CG.Base.pixi.initialize(600, 400) ``` 接著按下試玩遊戲，你會得到一片黑，但是舞台的確已經出現了，讓我們改變舞台顏色使其可見： ```typescript // 指定一個Sprite(精靈)給bg(backgorund) let bg = new PIXI.Sprite(PIXI.Texture.WHITE) // 設定bg的長寬為舞台的長寬 bg.width = CG.Base.pixi.stageWidth bg.height = CG.Base.pixi.stageHeight // 將設定好的bg加進我們的舞台(root) CG.Base.pixi.root.addChild(bg) ``` 資源載入 ```typescript // e.g. LearningWonderlandFOBsp.cover CG.Base.resourceManager.addAppResource('專案名稱.資源1') .addAppResource('專案名稱.資源2') .addAppResource('專案名稱.資源3') .addAppResource('專案名稱.資源4') // function會在資源載入完成後呼叫 CG.Base.resourceManager.load(function(){ console.log('資源載入完成') }) ``` 音效播放 ```typescript // 假設「已經」載入ProjectName.sound這個音效 // sound是一種PIXI.sound.Sound let sound = CG.Base.resourceManager.getSound('ProjectName.sound') // 開始播放 sound.play() // 停止播放 sound.stop() // 繼續播放 sound.resume() // 暫停 sound.pause() // 循環播放 sound.play({loop: true}) ``` ## 物理 快速入門： ```typescript // 用CG.Base.physics創造一個「動態」物理物件，並用phyOb接住 let phyOb: CG.Base.physics2d.PhysicsObject = CG.Base.physics.createPhysicsObject('physicsObjectName', { type: 'dynamic' }) // 給phyOb圓形 phyOb.addCircle(0, 0, 25, { restitution: 1 }) // 啟用除錯繪圖，使物理物件可見 CG.Base.pixi.physcisDebugDraw.setActive(true) ``` 類別介紹： - Physics - PhysicsObject - PhysicsDebugDraw ### Physics ## Authors **[FOBShippingPoint](/profile/FOBShippingPoint)**