文章搬遷搬遷~~

因為自己弄了HEXO將來文章會放到那,這裡將停止更新,而文章也會慢慢更新到那裏去,歡迎大家來看與指教。 網址:https://donggualemon.github.io/

第一次用Phaser.js做2D遊戲

因為參加F2E精神時光屋活動的直播讓我知道了Phaser.js,也讓我著手用來做了小遊戲。
Phaser2是利用Pixi.js為基底製作,而3是完全隔離出來的,而且蠻容易上手,我相信很適合做些小遊戲來玩玩。
官方連結

這次我做了一個外太空飛船閃躲障礙物的小遊戲。(感謝精神時光屋的UI設計投稿者)
閃躲障礙物透過鍵盤控制

假如受到物理碰撞死掉
非常簡單又上手的小遊戲 大家可以玩玩看,雖然沒有弄得更完整。連結
而這篇文章大概算是紀錄而已,所以沒有詳細的教學,之後如果有時間或更深入研究在來寫教學文章。(然後做遊戲圖片超重要,希望人人都有設計師!!)

先去官方網站clone或用CDN引入lib~~
然後建立個index.html吧,並在body部分引入所需的js
<body>
    <div id="app"></div>
    <script src='./lib/phaser.min.js'></script> 
    <script src='./js/index.js'></script>
</body>
而div區塊的id是妳phaser.js config上設定來layout canvas的部分。
在我們的index.js來開始使用phaser吧
const config={
    type: Phaser.AUTO,//type有Canvas and WebGL AUTO則是有WebGL就用WebGL
    width: 1200,//設定你要layout的寬度就像做canvas
    height: window.innerHeight,//設定高度
    parent: 'app',//妳要layout區塊的id
    scene: [GameStart],//場景做變換或呈現所要用的
}
const game = new Phaser.Game(config) //宣告遊戲物件
這樣妳就能看到有畫面啦~~一個黑色場景的canvas。
接下來我們要布置GameStart的場景。
const GameStart={
    key:'Game',
    preload () {},
    create() {},
    update() {},
}
而preload create update就像生命週期一樣,我們在preload載入圖片、預先檔案,在create生成我們要的物件、配置圖片位置等等,create執行玩後則是換update 利用fps60的速度來不斷重新渲染畫面,我們所對遊戲的控制、物理引擎、邏輯都是寫在這裡,讓他一直不斷更新。
記得要用Server方式去執行哦!!不然會報錯。
接下來就是利用官方API時間啦~~最基本設置就是這樣,而其他場景運用配置等等,就之後來寫吧!!
我的遊戲github連結程式碼大家可以摸索看看。

留言

這個網誌中的熱門文章

專題 FPGA Zynq7000 RSA篇 1

Vue-CLI 2 => Vue-CLI 3 升級囉~~