技術 Day20 為遊戲加入開始畫面吧~( ⓛ ω ⓛ *)(2)

開始畫面建立完畢後，就來加入開始按鈕讓遊戲開始吧^o^/ 開始按鈕 今天進行的是開始畫面教學的第二步驟---開始按鈕在畫面中加入按鈕，點擊後進入遊戲場景~ 那麼...

技術 Day22 用滑鼠移動物件吧┏ (゜ω゜)=?---Phaser3 滑鼠拖移(1)

加入滑鼠拖移，移動物件吧(∩^o^)⊃━☆ 滑鼠拖移 讓物件可以與滑鼠互動，可以拖拉移動，移動到想要的位置，增加不同的玩法!!因為內容較多所以分成三篇進行教學(...

技術 Day7 Phaser3 2D網頁遊戲關卡----圖片音效匯入篇(oﾟvﾟ)ノ

再來就把資源，圖片與音效匯入到遊戲中吧！！ 在開始之前，如果還沒有準備圖片或音效的人可以到 ==> https://github.com/michelle...

技術 Day9 物體特性小幫手--Phaser3 內建工具篇✧(▀̿Ĺ̯▀̿ ̿)

今天要來介紹方便好用Phaser3 內建小工具 *:･ﾟ✧ Debug & Gravity *:･ﾟ✧ Gravity也就是遊戲中的重力，輸入之後可...

技術 Day26 做出跟著角色移動的鏡頭/ᐠ｡ꞈ｡ᐟ\---Phaser3 鏡頭設定

設定跟隨角色的鏡頭，變成卷軸遊戲吧!✪ ω ✪ 鏡頭設定 設定鏡頭讓遊戲畫面跟隨著角色一起移動吧o((>ω< ))o 今天的內容為基礎鏡頭設定，Ph...

技術 Day6 Phaser3 2D網頁遊戲關卡----場景設定篇(oﾟvﾟ)ノ

遊戲框設定完畢，再來進入場景設定階段~~ 那就先來看場景的架構吧ヾ(•ω•)o 無論是要設定目錄、關卡等畫面都是用此架構喔~ 而架構可以分為4個部分： 場景設...

技術 Day25 遊戲畫面中加入華麗特效吧(^._.^)ﾉ---Phaser3 粒子系統

加入粒子系統特效使遊戲畫面更加豐富絢麗吧!(/≧▽≦)/ 粒子系統 設定由設定的地方不斷有圖片往四面八方射出，可以用於各項物件，甚至是滑鼠中♪(´▽｀) (這邊...

技術 Day29 Phaser3 網頁遊戲製作 總結 d=====(￣▽￣*)b

終於來到教學的最後一天了!!來做整個教學的重點整理吧(〃￣︶￣)人(￣︶￣〃) 總整理 這次的30天教學主要是要教各位運用Phaser3遊戲引擎製作遊戲時會運用...

技術 Day19 為遊戲加入開始畫面吧~( ⓛ ω ⓛ *)(1)

在遊戲開始之前為遊戲加入開始畫面吧!!♪(´▽｀) 開始畫面 加入開始畫面，點擊開始按鈕後進入遊戲，是我們的教學目標o((>ω< ))o(學會了之後...

技術 Day21 拿到物件後得分吧*(੭*ˊᵕˋ)੭*ଘ---Phaser3 遊戲分數計算

接下來要在遊戲中加入計分機制喔，讓角色拿東西獲得分數吧o(^▽^)┛ 遊戲分數計算 在遊戲中加入遊戲得分文字，並讓角色在拿到特定物品時改變得分數值~內容是設定在...

技術 Day15 讓圖片與圖片相互互動吧(❁´◡`❁)---Phaser3 重疊事件

學會碰撞事件的下一步，就來學習Phaser3的重疊事件吧~ 重疊事件 簡單來說，就是不同圖檔相互重疊時發生的事件，事件能自行設定喔~ 重疊事件多用於： 角色的...

技術 Day8 讓圖片豐富遊戲畫面吧(´▽`ʃ♡ƪ) --Phaser3 圖片位置設定

將圖片匯入後就來將它呈現在畫面上吧~ 還不會圖片匯入的人可以點擊連結觀看教學(≧∇≦)ﾉ==>https://ithelp.ithome.com.tw/a...

技術 Day11 幫角色加入特性吧✪ ω ✪--角色設定篇(2)

今天要來繼續完成角色的設定( •̀ .̫ •́ )✧ 接下來要加入角色的架構，如下圖所示 檔案名稱的部分一樣可以自己設定，之後直接輸入該檔案名稱時即可套入此角...

技術 Day27 GameOver後重來( ﾉ ﾟｰﾟ)ﾉ---Phaser3 Restart 按鈕設定

角色碰到敵人怎麼辦？從新再來就好囉!(o゜▽゜)o☆ Restart按鈕設定 製作重新開始按鈕，點選後關卡會從目前的遊戲場景重新開始，讓遊戲GameOver後能...

技術 Day14 角色有地方可以站了♪(´▽｀)---Phaser3 物理群組&碰撞事件

在遊戲中加入碰撞事件吧!! 所謂的碰撞事件呢，好比說就像是在遊戲中常見會讓主角無法通過的"障礙物"讓兩樣物體產生碰撞事件後，這樣物體就無法穿...

技術 Day18 敵人也要動起來---遊戲敵人設定補充篇ヾ(⌐■_■)ノ♪

這篇為敵人設定的相關補充(oﾟvﾟ)ノ 敵人設定補充 今天的教學是我自己認為可以加入的補充，當然，依照玩法的不同也能夠有不同的設定ヾ(•ω•')o 那就馬上來說...

技術 Day17 果然敵人還是需要的吧---遊戲敵人設定篇(2)ผ(•̀_•́ผ)

將敵人的角色設定設定完畢後就來讓敵人動起來吧!!ヽ(✿ﾟ▽ﾟ)ノ 敵人移動設定 我們學過角色的操控設定，但遊戲中的敵人都是自己移動的，所以今天的教學就是要讓敵人...

技術 Day13 角色動起來了o(*ﾟ▽ﾟ*)o~~--Phaser3 角色動畫設定篇

將角色的移動鍵盤設定寫好了後，接下來替角色加入動畫，使角色的移動更自然吧(≧∇≦)ﾉ 在圖片匯入時，我們設定角色為spritesheet 可切割圖片，將圖片切成...