用phaser開發(fā)2D平臺游戲

前言

phaser是一個非常好用的html5游戲開發(fā)框架,官網(wǎng)上是這樣介紹的:“一個快速、免費(fèi)并且完全開源的框架,提供Canvas和WebGL兩種渲染方式,致力于增強(qiáng)桌面端與移動端瀏覽器游戲的體驗”。使用的過程中,個人確實感覺它的方便與易用性,能夠快速實現(xiàn)自己的游戲想法。

phaser.png

目標(biāo)

為了學(xué)習(xí)phaser框架,開發(fā)了一款簡單的平臺跳躍游戲。學(xué)習(xí)了如何在phaser中使用場景(State),精靈(Sprite),游戲輸入(Input)以及碰撞檢測,算是簡單的入門而已。這個框架還有更多精彩出眾的地方,等著我去發(fā)掘。主要的學(xué)習(xí)手段是參閱框架API文檔,不得不說phaser的API文檔寫得很贊,結(jié)構(gòu)清晰,內(nèi)容完整準(zhǔn)確,讓初學(xué)者能夠快速上手。

platformer.png

開始

一切的一切,從一個platformer目錄開始。platformer目錄包含一個index.html入口文件以及img和js文件夾。html文件很簡單,只是標(biāo)準(zhǔn)的html5文件結(jié)構(gòu),里面引用了js文件夾中phaser.min.js游戲框架文件和main.js游戲邏輯文件。需要注意的是在html文件中要注意js的引用的順序,main.js會使用phaser.min.js提供的Phaser全局變量,所以要先引用phaser.min.js文件,接著引用main.js文件,否則會報錯。img文件中是游戲的資源文件,一張白色的方塊圖片,在游戲中會被渲染成不同的顏色,表示不同的游戲?qū)ο蟆?/p>

構(gòu)建游戲世界

html5游戲,世界都構(gòu)建在<canvas>標(biāo)簽上面。首先來構(gòu)建當(dāng)前的游戲世界,并直接進(jìn)入主要場景(Main State)。游戲很簡單,所以只有一個主場景,如果開發(fā)復(fù)雜一些的游戲,就要考慮到場景的管理與切換了(從開始場景到游戲場景再到結(jié)束場景等等)。

var game = new Phaser.Game(600, 250 , Phaser.AUTO,"");
var main = new Phaser.State();
game.state.add('Main', main);
game.state.start('Main');

Phaser.Game用來構(gòu)建游戲世界,接受的參數(shù)依次是游戲世界的寬、高、渲染模式和<canvas>標(biāo)簽的id屬性,本游戲渲染模式使用Phaser.AUTO,也就是自動檢測,在瀏覽器支持WebGL的時候使用WebGL渲染,不支持的時候回退到Canvas渲染。id參數(shù)傳入""是讓框架在<body>中生成<canvas>標(biāo)簽。如果需要在特定的<div>標(biāo)簽內(nèi)生成,首先應(yīng)該在html文件中添加帶id屬性的<div>標(biāo)簽,然后傳入id屬性即可。Phaser.Game返回一個游戲?qū)ο螅@是整個游戲的核心,通過這個游戲?qū)ο螅ㄓ萌肿兞?code>game引用),就可以快速使用phaser提供的各種方法來開發(fā)html5游戲了。
Phaser.State用來創(chuàng)建游戲場景。從名稱上來說state應(yīng)該譯為狀態(tài),但我覺得稱為場景更加妥當(dāng)。因為Phaser.State中提供的各個方法搭起了一個腳手架,用來展現(xiàn)當(dāng)前游戲畫面。本游戲用到了init方法,preload方法,create方法和update方法,分別管理當(dāng)前場景的初始化、預(yù)加載、生成游戲?qū)ο笠约案掠螒蜓h(huán)。通過擴(kuò)展這些方法,就可以實現(xiàn)精彩紛呈的各種游戲了。

mainstate.png

擴(kuò)展游戲場景

  • 初始化方法:啟動物理引擎(ARCADE),這是Phaser框架自帶的最簡單的物理引擎,用于矩形盒的碰撞檢測,適于本游戲,設(shè)定游戲的背景顏色。
main.init = function(){
    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.world.enableBody = true;
    game.stage.backgroundColor = "#489ad8";
}
  • 預(yù)加載方法:加載本游戲唯一的一張圖片資源,關(guān)鍵在于設(shè)定每張圖片的唯一id,便于在整個游戲中引用。主要用到game.load加載器,用來加載游戲中需要的各種資源,用音樂,圖片,精靈圖,JSON配置文件等等。
game.load.image('box', 'img/box.png');
  • 生成游戲?qū)ο蠓椒ǎ禾砑幼笥覊Ρ冢孛嬉约爸鹘恰ⅹ剟钜约罢系K物。代碼展示如何生成地面,里面用到了phaser中組(Group)的概念。用于管理相同的、游戲中大量出現(xiàn)的游戲?qū)ο螅ū热缱訌棥⒌谰叩龋绕鹩醚h(huán)來增刪對象,使用組更加有效率,性能更高,實現(xiàn)了緩沖池的功能)。向游戲中添加游戲?qū)ο笾饕玫?code>game.add方法,用來快速將對象加入到游戲舞臺上,如精靈,文字,聲音等。然后開啟地面圖片的碰撞屬性,設(shè)置body.immovable=true,防止主角從上方掉下時,將地面也砸下去。主角、獎勵和障礙物生成代碼類似,不再贅述。最后生成游戲控制按鍵(鍵盤中的上、下、左、右方向鍵)。
main.create = function(){
    this.walls = game.add.group();
    ...
    //ground
    for(var i=1; i<13; i++){
        var wall = game.add.sprite(30*i, 90, 'box','', this.walls);
        wall.scale.setTo(0.6, 0.6);
    }
    ...
    this.walls.x = 90;
    this.walls.y = game.world.centerY-60;
    this.walls.setAll('tint', 0x1a5882);
    this.walls.forEach(game.physics.enable, game.physics);
    this.walls.setAll('body.immovable', true);
    ...
     this.cursor = game.input.keyboard.createCursorKeys();
     }
  • 更新循環(huán)方法:通過方向鍵控制主角左右移動和跳躍,當(dāng)主角撞到障礙時,游戲重新開始,撞到獎勵時,銷毀獎勵物品。
main.update = function(){
    ...
    game.physics.arcade.overlap(this.player, this.lava, this.restart, null, this);
    ...
    if (this.cursor.left.isDown) 
        this.player.body.velocity.x = -200;
    ...
    if (this.cursor.up.isDown && this.player.body.touching.down) 
        this.player.body.velocity.y = -250;
}
  • 其余方法:重新開始以及銷毀獎勵物品。獎勵物品同地面類似,是用組來管理的,因此默認(rèn)擁有kill方法來銷毀自身。
main.restart = function(){      game.state.start('Main');       }
main.getCoin = function(player, coin){     coin.kill();     }

鏈接

GitHub

后記

這個游戲雖然簡單,但是涉及到了開發(fā)一個html5小游戲的各個方面。游戲開發(fā)是一條很長遠(yuǎn)的路,其中每一點(diǎn)都可以進(jìn)行深入地研究和擴(kuò)展。就此游戲而言,可以加入記分系統(tǒng),更改地面及墻壁障礙的位置來生成關(guān)卡,還可以給主角添加動畫效果,加入音效提升游戲體驗等等。這些都是要慢慢擴(kuò)展出來的。想法是要實現(xiàn)出來的。在實現(xiàn)的過程中,有時會觸發(fā)更多靈感,但更多的是向現(xiàn)實妥協(xié),舍棄掉一些東西,然而這樣才是真正的成長。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容