讓我們利用官方的範例開起我們的旅程吧～ＧＯ！ＧＯ！ＧＯ！
可以先到點擊下載，把官方的素材先載下來～如果懶得一天一天跟著做的人可以用它裡面的 code 唷～！

讓我們開始吧！！！！

preload 載入素材

利用先前說到的 preload 函數把我們需要用的的素材先拉進來。
並且給上他們的 key 值，來讓我們調用。

function preload ()
{
    // 載入圖片
    this.load.image('sky', 'assets/sky.png');
    this.load.image('ground', 'assets/platform.png');
    this.load.image('star', 'assets/star.png');
    this.load.image('bomb', 'assets/bomb.png');
    //載入精靈圖（亦稱雪碧圖或拼合圖）
    this.load.spritesheet('dude', 
        'assets/dude.png',
        { frameWidth: 32, frameHeight: 48 } //每張圖片的大小
    );
}

精靈圖可以用來做動畫，可以讓你的人物動起來的感覺，也可以拿來做動畫唷！以下有官方精靈圖的範例。

create 加入背景與地形

加入背景

function create ()
{
    //加入背景，參數為 （x,y,圖片key）
    this.add.image(400, 300, 'sky');
}

為什麼 x,y 是 400,300 呢？

因為在 Phaser 裡面圖片擺放位置預設會以圖片的中心來擺放唷！
所以我們的場景大小為 800x600 ，我們要把圖片的中心對齊中間 400,300 的地方來擺放我們的背景。
不過也有另外一種方法來擺放唷！可以利用 setOrigin 來改變圖片預設拿來擺放的點是哪裡，像是以下範例。

function create ()
{
    //利用 setOrigin 來改變擺放的點，將圖片的 0,0 對上 場景的0,0
    this.add.image(0, 0, 'sky').setOrigin(0,0);
}

加入地形

這裡很特別，由於我們的地形需要跟其他東西有碰撞的物理效果，所以我們不能單單使用 add 來把他加入場景，需要使用先前提到的 physics 來幫助我們讓物件有碰撞的效果。
再加入平台前，我們要先在 config 裡面設定物理效果。

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade', //default 是 Arcade physics
        arcade: {
            gravity: { y: 300 },
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

加完物理效果之後就可以把平台加上去囉～！

var platforms;

function create ()
{
    this.add.image(400, 300, 'sky');
    // 創造平台物件
    platforms = this.physics.add.staticGroup();
    // 利用 create 一一加入所需要的平台 （x,y,圖片key,frame,visible,active）
    // setScale 用來放大物件
    // refreshBody 是用來與你的物理世界告知，因為我們放大了靜態物件，要通知物件的改變，通常只有在靜態物件上改變
    platforms.create(400, 568, 'ground').setScale(2).refreshBody();

    platforms.create(600, 400, 'ground');
    platforms.create(50, 250, 'ground');
    platforms.create(750, 220, 'ground');
}

加完之後我們的場景就佈置好囉！

總結

今天利用官方範例，設置好了我們的背景與平台，是不是讓有遊戲有些畫面了，那我們明天再繼續！

tags: Phaser Game 2020鐵人賽