[14- Pixi教學] PIXI場景設定

載入所使用的Library

在開發遊戲時我們會使用到PixiJS、SystemJS、和JQuery，因此我們會需要將這幾個library加進html裡。
首先我們新增一個index.html的入口檔案，內容如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="assets/style.css">
  <script src="lib/system.js"></script>
  <script src="lib/jquery.min.js"></script>
  <script src="lib/pixi.min.js"></script>
</head>
<body>
</body>
</html>

打開這個html後，會看到找不到檔案的訊息。
這時我們在gulpfile.js裡增加一個task名為libs，將我們所需的檔案copy到目標資料夾
其內容如下：

gulp.task('libs', () => {
    return gulp
        .src([
            'node_modules/jquery/dist/jquery.min.js',
            'node_modules/jquery/dist/jquery.min.map',
            'node_modules/systemjs/dist/system-polyfills.js',
            'node_modules/systemjs/dist/system-polyfills.js.map',
            'node_modules/systemjs/dist/system.js',
            'node_modules/systemjs/dist/system.js.map',
            'node_modules/pixi.js/dist/pixi.min.js',
            'node_modules/pixi.js/dist/pixi.min.js.map'
        ])
        .pipe(gulp.dest("build/lib"));
});

這樣子就會在每次編譯時自動複製專案在使用的library進入build/lib裡。

設定場景

要設定一個PixiJS的遊戲場景，這個部份可以先參考關網的範例：Basics
範例裡創建場景的方式如下：

var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

PIXI.Application可以建立一個PIXI的canvas遊戲畫面，其相關API說明請見：PIXI.Application
這個類別有兩種建構子，可以達到相似的功能：

在PixiJS v4以後，官方將所有相關參數都整入options物件內，這樣使用上可以僅傳入需要自行設定的值就好。而要先傳入寬高的則是為了兼容舊版寫法。

new PIXI.Application(960, 540, {width:100, backgroundColor : 0x000000, view: gameCanvasContext});

若兩邊都傳入相同的屬性，會以optionst傳入的值為主。如上面程式碼產生的場景的width會是100。

PIXI.Application可用參數

在創建這個類別時，可以傳入的options參數如下：

Name	Type	Default	Description
`autoStart`	boolean	true	過去
`width`	number	800	renderers view的寬
`height`	number	600	renderers view的高
`view`	HTMLCanvasElement		遊戲場景要放置的canvas目標，如果沒有傳入，則會新建一個canvas做為回傳
`transparent`	boolean	false	是否支援透明可看到底下物件
`antialias`	boolean	false	防鋸齒
`preserveDrawingBuffer`	boolean	false	是否支援toDataUrl
`resolution`	number	1	解析度
`forceCanvas`	boolean	false	即使存在webGL引擎也不使用
`backgroundColor`	number	0x000000	背景顏色
`clearBeforeRender`	boolean	true	在繪圖前先清除canvas上所有元素
`roundPixels`	boolean	false	使用Math.floor()來處理所有圖像
`forceFXAA`	boolean	false	強制使用FXAA，速度會較快，但可能效果較WebGL差
`legacy`	boolean	false	確保能與舊裝置相容
`powerPreference`	string		設定要傳給webGL的參數，對雙顯卡的設備而言可提高效能。
`sharedTicker`	boolean	false	可以有共用的PIXI.ticker.shared物件
`sharedLoader`	boolean	false	可以有共用的PIXI.loaders.shared物件

於專案中建立場景

接下來，我們在index.html新增一個canvas物件，自行建立一個canvas物件的好處是我們可以較方便的在html內設定canvas的位置

<body>
<div id="gameContainer">
  <canvas id="gameCanvas"></canvas>
</div>
</body>

接著建立Main.ts，其內容如下：

import Application = PIXI.Application;

//將application設定為export，這樣可以在專案的任何地方取到這個元件
export let application:Application
/**
 * 主要的 client application.
 *
 */
export class Main {

    public initGame() {
       //設定場景
       let gameCanvasContext = (< HTMLCanvasElement >jQuery("#gameCanvas")[0]);
       application = new PIXI.Application(960, 540, {width:100,backgroundColor : 0x000000, view: gameCanvasContext});

       //貼一張圖片
       var bunny = PIXI.Sprite.fromImage('assets/bunny.png');
       bunny.x = application.screen.width / 2;
       bunny.y = application.screen.height / 2;
       application.stage.addChild(bunny);
    }
}

接著因為我們使用SystemJS，所以必需用SystemJS的方式來啟動遊戲，在index.html加上下面的javascript script

    var game;
    $(function () {
        //設定要載入的js的位置與副檔名
        SystemJS.config({
            baseURL: "/",
            packages: {
                "/": { defaultExtension: "js" }
            }
        });
        //載入Main.js，載完後執行裡面的某個func
        SystemJS.import('Main').then(function (m) {
            m.Main.prototype.initGame();
        });
    });

這時後打開瀏覽器就可以看到下面的畫面

隨螢幕大小改變尺寸

我們可以看到上面的成果裡，右下方有許多的空白，如果沒有特別對Canvas做縮放，Canvas會一直是相同尺寸。這樣就沒辦法在各個平台、尺寸很順利的進行遊戲，因此要自動偵測並縮放canvas以及場景尺寸。

在Main.ts加上onResize()

public onResize() {
    var w = window.innerWidth;
    var h = window.innerHeight;
    var scale = Math.min(w/860,h/540);
    application.view.style.left = (w-scale*860)/2 + "px";
    application.view.style.top = (h-scale*540)/2 + "px";
    application.view.style.width = scale*860 + "px";
    application.view.style.height = scale*540 + "px";
}

並在initGame()新增下面兩行

       //設定遊戲大小隨視窗大小改變
       this.onResize();
       window.onresize = this.onResize;

這樣遊戲畫面就會永遠置中且自動縮放至適合螢幕大小。

今日成果

原始檔請於此下載：ironman20181029
線上展示：http://claire-chang.com/ironman2018/1029/

Claire's Blog