iT邦幫忙

鐵人檔案

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

Phaser 幫我撐個 30 天 系列

Phaser 是一款 2D 遊戲開發框架。是否曾經想做些遊戲,但不知道從何下手?那我們一起從零開始來玩 Phaser 吧!本系列將從無到有,透過小範例並搭配說明來認識 Phaser,一起探索網頁遊戲世界,一起學習吧!

DAY 1

Day 1:前言

》前言大家好,這是我第一次參加鐵人賽。 一開始不知道要挑什麼題目,那就挑沒有學過的 Phaser 吧(疑?)其實有一次在逛網頁的時候,看到非常吸引我的網頁 ht...

2018-10-16 ‧ 由 K. 分享
DAY 2

Day 2:基本環境設定

》一開始基本的事前準備為下列三項,可依照個人喜好決定瀏覽器:Google Chrome開發工具:VS CodeWeb Server:VS Code 上的 Liv...

2018-10-17 ‧ 由 K. 分享
DAY 3

Day 3:生命週期

》生命週期除了前一天新增的基本設定外,這次我們要來看看 life cycle 有哪些可以使用,且用在什麼時機init:初始化preload:加載素材(圖片、聲音...

2018-10-18 ‧ 由 K. 分享
DAY 4

Day 4:基本變形

》深度、變形深度:當載入很多素材,有時候需要調整它的前後位置,就像 css 的 z-index 一樣變形:可以想像成 css 3 的 scale、rotate...

2018-10-19 ‧ 由 K. 分享
DAY 5

Day 5:更新畫面

》旋轉、更新旋轉:將物件以角度或弧度,進行旋轉。如 css 3 的 rotate(n deg)更新:update 生命週期 》Javascript 內容旋轉設定...

2018-10-20 ‧ 由 K. 分享
DAY 6

Day 6:使用者互動

》互動、偵測重疊對於一個遊戲,畫面上可能會有點擊鍵盤、滑鼠、觸控來與畫面上的角色做互動。 》Javascript 內容在生命週期 init 上,定義變數,這樣就...

2018-10-21 ‧ 由 K. 分享
DAY 7

Day 7:重新與暫停

》重新與暫停除了 player,今天先創建其它物件到場景上,我們這邊新增兩台坦克,並讓它們動起來。如果 player 與 house 重疊的話,代表到家了,先讓...

2018-10-22 ‧ 由 K. 分享
DAY 8

Day 8:群組

》群組今天的內容比較簡單,我們要來使用群組的功能,來創建重複的房子 》Javascript 內容可以用群組創建重複的物件,節省一些事情。 scene.creat...

2018-10-23 ‧ 由 K. 分享
DAY 9

Day 9:Resize

》Resize目前我們的遊戲寬高設為 640 x 320,但我們希望可以在任何視窗、裝置大小可以填滿整個畫面,讓遊戲體驗能夠更好,更加完善。 原本的狀況,如圖:...

2018-10-24 ‧ 由 K. 分享
DAY 10

Day 10:Camera

》CameraPhaser 有提供一些 camera 上的特效,如 fade shake flash,今日我們會提到如何使用這些特效、偵聽動畫結束後以及防止多次...

2018-10-25 ‧ 由 K. 分享