發表文章

目前顯示的是 8月, 2019的文章

第一次用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:'Ga