iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

關於你關於我關於phaser 系列

透過30天的文章與練習,帶大家認識phaser,一個canvas做2D遊戲的框架,讓大家隨心所欲就能信手拈來一個小遊戲

鐵人鍊成 | 共 30 篇文章 | 28 人訂閱 訂閱系列文 RSS系列文 團隊好想工作室第二屆鐵人賽
DAY 1

Day1 前言

這是一篇有感而發的長篇大論,可以等明天正式進入主題再來看啦 先說結論:希望 30 天可以做出一些經典的小遊戲並更瞭解怎麽做遊戲 對我來說,夢想是驅動我往前的動力...

2018-10-16 ‧ 由 kai 分享
DAY 2

Day2 我選擇了 phaser 3

這邊就要先說,講到做遊戲,不管是 2D 還是 3D 大家第一個想到的應該是 Unity,不管是資源、成熟度都有一定的程度 但是 但是 但是 先說這邊會扯比較遠,...

2018-10-17 ‧ 由 kai 分享
DAY 3

Day3 第一個遊戲: ~ 建立

現在我們來做一個遊戲吧 如果有名詞上或是有問題的地方都可以討論 這一個範例是用官網範例(內文有一個 Download this zip file )來練習,可以...

2018-10-18 ‧ 由 kai 分享
DAY 4

Day4 第一個遊戲:~場景佈置完成

接下來我們要先載入靜態資源檔,將檔案初始化在我們的頁面上,並透過規則制定遊戲的方式,所以我們一步一步來 載入資源並渲染 //載入圖片,有兩個參數 //第一個...

2018-10-19 ‧ 由 kai 分享
DAY 5

Day5 第一個遊戲:~加入主角

加入我們的主角 而這裡可以分成三個部分看 先一樣在物理裡面加入新的物件,但這次用的是 sprite ,代表此物件是動態的,而這邊加入了一些物理特性: setBo...

2018-10-20 ‧ 由 kai 分享
DAY 6

Day 6 第一個遊戲:完成遊戲啦

接下來加入我們的星星,加入步驟爲: create 出星星物件 -> 爲星星加上相對的物理特性(相對於地板與相對於主角) //create() //設定星星...

2018-10-21 ‧ 由 kai 分享
DAY 7

Day7 phaser的滑鼠監聽

今天來講講滑鼠的監聽事件,在 phaser3 中,要讓目標物被監聽的話,要先 setInteractive,並用串聯的方式掛上監聽事件(有點類似用 js 掛監聽...

2018-10-22 ‧ 由 kai 分享
DAY 8

Day 8 關於背景

phaser3 有幾種建立背景的方式,而下面是我有用過的: 整張圖片當背景 var sky var ground class backgroundScene e...

2018-10-23 ‧ 由 kai 分享
DAY 9

Day 9 關於scene

我們的遊戲都是有狀態的 來一個簡單的遊戲流程: 從這邊我們有幾個狀態:載入、開始、進行、(是否繼續)、結束 每個狀態會有每個狀態要渲染的畫面(一個遊戲可能會有...

2018-10-24 ‧ 由 kai 分享
DAY 10

Day 10 關於 webpack + phaser (前傳)

前言... 因爲開始找到了一些範例(之後會跟大家介紹),並自己實作後發現很好玩,很有野心的想要開始加東加西,發現怎麽這個程式的擴增性這麼受到限制,而且程式碼還越...

2018-10-25 ‧ 由 kai 分享