1. [30- 相關工具] 手機遠程測試
      發表時間: 2018-11-14 下午 3:24下午 3:24
      Android系統的手機設備偵錯 在電腦上的偵錯工具首推的就是 Chrome 開發者工具,但是由於若我們想要做手機遊戲,不同的設備有可能會有不同的狀況,我們會需要在不同手機上去做除錯。如果是Android系統的手機,開啟Enable USB Debugging之後,用USB線連至電腦,則可以藉著使用chrome去做遠端偵錯。 偵錯步驟如下: 選擇 Settings > Developer Opti
    2. [29- 相關工具] 效能評估工具
      發表時間: 2018-11-13 下午 3:24下午 3:24
      遊戲效能評估方式 FPS是指影格速率,是用於測量顯示張數的量度。測量單位為「每秒顯示張數」(Frame per Second,FPS)或「赫茲」,一般來說FPS用於描述影片、電子繪圖或遊戲每秒播放多少影格。一般說來,顯示器的張數為60Hz,因此,若超過60的fps容易會有畫面撕裂的狀況產生。而60FPS的遊戲體驗會相較30FPS的遊戲體驗來得更順暢。 PixiJS的ticker的預設FPS為60
    3. [28- 相關工具] PixiJS devtools
      發表時間: 2018-11-12 下午 3:23下午 3:23
      開發人員工具 Chrome 開發者工具是網頁開發者常在使用的偵錯工具,可以檢查下載的檔案、html的dom元素檢視及編輯、調整css等... 開發工具打開方式: 1. 功能表 -> 工具 -> 開發人員工具 2. 直接按 F12 叫出來 3. 在網頁任何位置按右鍵,選擇"檢查元素",就可以看到原始碼。 工具有許多的面版在最上列,左邊也可以直接選擇要找的html元素的位置 上圖即為偵錯面板的圖示。
    4. [27- Pixi教學] PixiParticles
      發表時間: 2018-11-11 下午 3:23下午 3:23
      Particles System 遊戲經常透過粒子系統製作各種視覺效果,例如火焰、煙霧、下雨、沙塵、爆炸等效果,並不容易使用一般的動畫工具製作。通常粒子系統在三維空間中的位置與運動是由發射器控制的,發射器可以設定粒子生成速度(即單位時間粒子生成的數目)、粒子初始速度向量(例如什麼時候向什麼方向運動)、粒子壽命(經過多長時間粒子湮滅)、粒子顏色、在粒子生命周期中的變化以及其它參數等等。經由這些參數,
    5. [26- Pixi教學] 實作所有遊戲功能
      發表時間: 2018-11-10 下午 3:23下午 3:23
      還未完成的功能 前一篇的成果和我們的mockup相比 還有時間、生命和FB按鈕還未完成。 今天我們要將這些功能全部實作完成。 時間倒數 新增Clock.ts,內容如下 [crayon-63db12374039e941177761/] 重整次數限制 新增Stars.ts,內容如下: [crayon-63db1237403a6380680475/] FB按鈕實作 新增FBBtn.ts,內容如下: [c
    6. [25- Pixi教學] 遊戲開始、結束與過關畫面
      發表時間: 2018-11-09 下午 3:23下午 3:23
      遊戲關卡概念 每個遊戲一般都會需要關卡的概念,也就是過關後可以再重新進行遊戲,並且需要有關卡結局畫面。 今天我們就是要製作這樣的一個過關或遊戲結束的畫面,如下圖: 在pixi內使用文字 在pixi4.0之後可以直接利用pixi來做出很漂亮的文字效果,以下為官網的範例 [crayon-63db123740786265603990/] 成果如下: 現在更支援Bitmap font,請參見官網的dem
    7. [24- Pixi教學] 提示、重整按鈕功能實作
      發表時間: 2018-11-08 下午 3:23下午 3:23
      實作提示按鈕 新增檔案TipBtn.ts,內容如下: [crayon-63db123740b3e627621450/] 在GameBoard.ts裡的constructor監聽TipsRequest事件 [crayon-63db123740b44400373016/] 並新增所需要的方法 [crayon-63db123740b47673939479/] 因為若玩家此時選擇了其他的方塊,我們需要把提
    8. [23- Pixi教學] 復原按鈕功能實作
      發表時間: 2018-11-07 下午 3:22下午 3:22
      堆疊與佇列 堆疊 (Stack) 加入(push)與刪除(pop)於同一端 具有後進先出(LIFO, Last-in-First-out)或先進後出(FILO, First-in-Last-out)性質的有序串列 例子:疊盤子、發牌、走迷宮 佇列 (Queue) 加入(enqueue)與刪除(dequeue)於不同端(front & rear) 先進先出(FIFO, First-in-First-
    9. [22- Pixi教學] 按鈕動態- Tween
      發表時間: 2018-11-06 下午 3:22下午 3:22
      GreenSock 下面是GSAP官網對這個產品的說明: Think of GSAP as the Swiss Army Knife of javascript animation...but better. It animates anything JavaScript can touch (CSS properties, canvas library objects, SVG, generic
    10. [21- Pixi教學] 連線效果實作-Graphics
      發表時間: 2018-11-05 下午 3:22下午 3:22
      連連看連線及選擇題示 在進行遊戲時,清楚的玩家操作說明及互動是很重要的遊戲要素。因此,像一般的連連看遊戲,都會在玩家選擇圖示之後,把玩家所選擇的圖示做效果,提示玩家已經選擇了某個符號。並且在玩家選擇了第二個符號且連線成功時,會顯示所經過的路徑,並畫出一條線來消除這兩個符號,如下圖: 在這一篇裡,我們就要實做這樣的功能。 Graphics 這邊是官網使用Graphics的一個使用範例:Graphic
    11. [20- Pixi教學] 連連看公仔實作- 逐格動畫
      發表時間: 2018-11-04 下午 3:22下午 3:22
      動畫物件在一般的2D遊戲中,動畫可以用2D骨骼動畫製作(如:Spine)、粒子系統(如:Particles)、或者使用Tween(如:gsap)以及逐格動畫來製作。 下面為這四種動畫的介紹: 骨骼動畫:針對角色動畫的骨架做設定,並且經由改變骨骼元件方向及變形來讓角色做出如行走、跳躍等動態動作。使用骨骼動畫可以大大降低角色所占的圖像空間,尤其是在2D的遊戲裡,這是不可或缺的技術。 粒子系統:有許多編
    12. [19- Pixi教學] 連連看盤面實作
      發表時間: 2018-11-03 下午 3:22下午 3:22
      PIXI顯示元件介紹 PixiJS裡較常使用的顯示元件有:PIXI.Container、Sprite、AnimatedSprite PIXI.Container在官網上的解釋如下: A Container represents a collection of display objects. It is the base class of all display objects that act
    13. [18- Pixi教學] 按鈕製作
      發表時間: 2018-11-02 下午 3:21下午 3:21
      開啟按鈕效果 官網點擊效果範例:https://pixijs.io/examples/#/basics/click.js 預設sprite是無法被點擊到的,因為要偵測這些事件會讓sprite更耗資源,因此如果我們想要讓一個sprite可以被點擊,則要特別對元件設定: [crayon-63db123742557113219533/] 在連連看專案加入按鈕 ButtonBase 因為連連看裡面有許多個
    14. [17- Pixi教學] 音樂音效設定
      發表時間: 2018-11-01 下午 3:21下午 3:21
      PixiJS Sound PixiJS本身有開發可供使用的PIXI.sound。 並且官網上有很詳細的使用範例以及API手冊:PixiJS Sound PixiJS Sound最大的優點是它可以與pixi的素材共用同一個Loader,下載mp3的資源檔案。並支援相當多種的音樂格式,也可以將多個音效壓縮在一個mp3內,再根據要開始與結束的秒數去切成多個聲音資源。在一般的狀況下,PixiJS Sou
    15. [16- Pixi教學] 與網頁互動-控制loading page
      發表時間: 2018-10-31 下午 8:08下午 8:08
      加入loading page 上一篇的成果在載入檔案時畫面就會停在那邊,一般的遊戲通常會有一個下載中的畫面,告知使用者現在下載了幾%,還差幾%還未下載完成。 因此今日我們就要來製作這個loading page 首先,在index.html裡加上一個div [crayon-63db123742c34873141842/] 並在style.css裡設定 [crayon-63db123742c3959
    16. [15- Pixi教學] 載入素材
      發表時間: 2018-10-30 下午 3:21下午 3:21
      用PIXI.Sprite來載入圖檔 在PIXI.Sprite裡有一個fromImage('URL')的方法可以直接讓我們將某個圖檔載入Sprite裡面,如: [crayon-63db123743086269039598/] 但這只能針對單張圖檔,而不能處理SpriteSheet的狀況。 並且當我們在做一個遊戲專案時,通常會需要先載完所有的遊戲素材,這樣才不會在進遊戲時看到未載完圖檔的空白而產生錯
    17. [14- Pixi教學] PIXI場景設定
      發表時間: 2018-10-29 下午 3:21下午 3:21
      載入所使用的Library 在開發遊戲時我們會使用到PixiJS、SystemJS、和JQuery,因此我們會需要將這幾個library加進html裡。 首先我們新增一個index.html的入口檔案,內容如下: [crayon-63db1237434c0630796115/] 打開這個html後,會看到找不到檔案的訊息。 這時我們在gulpfile.js裡增加一個task名為libs,將我們所
    18. [13- 遊戲製作] 素材處理
      發表時間: 2018-10-28 下午 3:20下午 3:20
      PixiJS能使用的素材 承上一篇文章,我們排好的UI介面,其最終的產出是一個fla檔案,但是這樣的檔案pixiJS是無法使用的。 因此我們必需要整理素材並匯出pixiJS可以使用的素材。 那麼,pixiJS可以使用那些素材呢?最基本的是單張的圖檔,但是因為HTTP/1.1在載入檔案是每個檔案都需額外處理request和response header,會讓下載的速度變慢。並且GPU在處理圖檔上,因
    19. [12- 遊戲製作] 介面設計
      發表時間: 2018-10-27 下午 3:20下午 3:20
      連連看遊戲需求 我所規劃的連連看應要有下面的功能: 時間限制:需要在8分鐘內完成遊戲,否則就算是沒有過關。 重整牌面的限制:最多只能重整牌面3次,每次耗1點生命,生命值耗光遊戲就結束了。 音樂、音效需能開或關 重新整理牌面:可以手動洗牌 提示:提示可連線的路徑 復原:還原已消除的圖案 可連到我的FB 其版面配置如下: 尋找免費素材 有了mockup之後,身為一個不會美術的程式設計師,鐵人賽又沒有美
    20. [11- 遊戲製作] 使用模組介紹
      發表時間: 2018-10-26 下午 3:20下午 3:20
      什麼是NPM 下面是官網上對於NPM的說明 Use npm to install, share, and distribute code; manage dependencies in your projects; and share & receive feedback with others. 簡而言之,NPM是一個套件管理的工具,我們可以使用npm來建立、分享、發佈模組,並且於其平台上分享、
    21. [10- 遊戲製作] PixiJS介紹
      發表時間: 2018-10-25 下午 3:20下午 3:20
      關於PixiJS 下面文字是官網裡對於 Pixi.js 特性的說法: Pixi.js is a 2D webGL renderer with a seamless canvas fallback that enables it to work across all modern browsers both desktop and mobile. Helping Goodboy and hopefu
    22. [9 – 遊戲介紹] 遊戲開發技術介紹
      發表時間: 2018-10-24 下午 7:47下午 7:47
      遊戲開發技術介紹 在開發遊戲時,遊戲畫面、特效、音效的呈現是吸引玩家很重要的關鍵,也是讓玩家能夠更加放鬆的享受遊戲內容的必備要素,例如現在強調的虛擬實境等,也都是為了此目的而存在。 因此在開發遊戲程式時,會較一般網頁或應用程式的開發上,花更多的時間與心力在畫面的串接以及動畫邏輯撰寫,讓遊戲畫面能夠與玩家有更多的互動。 如畫面元素的物理性、玩家投擲物體時飛落的路徑、物件間碰撞的偵測與觸發的事件、遊戲
    23. [8 – 遊戲介紹] 遊戲歷史簡介
      發表時間: 2018-10-23 下午 6:05下午 6:05
      遊戲的要素 前一篇的成果是連連看的純邏輯程式,沒有具備一般遊戲必備的遊戲畫面、動畫、音效、特效等...。 其成果看起來是這樣的: 只有數字的畫面、沒有連線效果只有文字,一般人很難能夠有耐性的持續玩它,去享受其中遊戲的樂趣。 其實,一款成功的遊戲應有幾個不可或缺的要素: 要素一:畫面及音效 要素二:內容架構 要素三:收費機制 要素四:耐玩度及娛樂性 在前一個單元裡,我們完成了這個遊戲內容架構(遊戲邏
    24. [7 – 遊戲邏輯] 電腦搜尋路徑
      發表時間: 2018-10-22 下午 3:19下午 3:19
      判斷是否存在任一條路徑 在這個連連看遊戲中,是有可能存在死局的,也就是沒有任何兩個圖案可以用兩個轉彎內的線連接起來時。這時我們需要讓電腦能夠自動判斷這種狀況並做出反應,讓玩家可以更明確知道是否有可行的路徑。 那要如何判斷是否存在任一可能路徑呢?有幾個條件: 第一點:電腦能夠判斷連線是否合法 第二點:遍歷所有可能的圖案去確認是否存在可能路徑 第一點在上一篇我們已經做到了,因此在這一篇,我們要找到一
    25. [6 – 遊戲邏輯] 連線消除程式撰寫
      發表時間: 2018-10-21 下午 3:19下午 3:19
      主要遊戲流程 連連看點選兩個圖案後,可消除的邏輯是: 兩個所點擊到的圖案相同 連線不超過兩個轉彎 因此我們先來寫遊戲主流程的部份,玩家會先點第一個圖案,代表他想要消除這個圖案,接著再消第二個圖案,這時再來判斷是否符合可消除,這部份的流程圖如下: 撰寫的程式碼如下 [crayon-63db123744392279719180/] 判斷所選圖案是否相同 在上面的程式碼中,可以看到我們用board.ha
    26. [5 – 遊戲邏輯] 圖形連線消除邏輯發想
      發表時間: 2018-10-20 下午 3:18下午 3:18
      搜尋邏輯思考 在連連看裡面,連線的線條不可超過兩個轉彎處,兩個轉彎處的意思,代表連接的線最多只能由三條直線來組成。 這時候我們來思考該如何找出這兩點間所存在的那條線。先觀察一下棋盤,最多三條直線,代表有可能是一條直線、兩條直線或三條直線來做連接的。 不論如何,兩個點之間的那條線,一定一邊是從第一個點(A)開始,到另一個點(B)結束,因此,可以視為這兩個點之中,有可能存在A點連出的的(C)點與B點連
    27. [4 – 遊戲邏輯] 產生初始盤面
      發表時間: 2018-10-19 下午 3:18下午 3:18
      棋盤設計 用一個陣列來代表盤面,裡面儲存1~N來代表不同的圖形 隨機產生盤面 觀察連連看遊戲裡,同樣的圖形通常會有四個,因此如果盤面是10x10的話,總共會有100的icon,一種icon會有四個,則代表會有25種不同的icon。 一開始為了方便測試,先製作6*6=36的棋盤,這樣會有36/4=9種不同的icon。 [crayon-63db123744a8b347939506/] 這時候可以看到已
    28. [3 – 環境設定] 開發環境介紹
      發表時間: 2018-10-18 下午 3:18下午 3:18
      VS Code Visual Studio Code(簡稱VS Code)是一個由微軟開發的IDE,它最大的優點就是它是完全免費且Open Source的。它支援偵錯,並內建了Git版本控制功能,同時也具有開發環境功能。我個人覺得他在算是滿方便好用的,自動提示、自動補完和顏色選擇功能都很強大。 這邊是下載連結:Download Visual Studio Code NPM NPM 是 Node P
    29. [2 – 演算法] 演算法介紹
      發表時間: 2018-10-17 下午 3:17下午 3:17
      何為演算法 演算法的簡單定義:輸入 + 演算法 = 輸出 這一篇文章有非常詳細的介紹演算法是什麼:初學者學演算法-談什麼是演算法和時間複雜度 一般判斷演算法的好壞是使用『空間複雜度』和『時間複雜度』來評估, 時間複雜度 所謂時間複雜度,指的是執行一段演算法,跑完整個運算邏輯所要花的時間。 雖然這個複雜度名為『時間複雜度』,但實際上,我們要真正衡量某個演算法時,是以步驟次數來看。 如果一個演算法執行
    30. [1 – 前言] 連連看遊戲開發
      發表時間: 2018-10-16 上午 9:04上午 9:04
      連連看遊戲起源 遊戲《連連看》顧名思義就是找出相關聯的東西連起來,做關連配對的一種益智遊戲。 最早是使用在幼兒教育的教具上,由於玩法簡單,常用作兒童啟蒙教育遊戲,建立兒童對物品之間的關連性連結。有一種字圖連連看,是專供幼童識字認圖的遊戲,與一般連連看不同的是它並非以一對相同圖案成對,而是以字配圖成對。相關內容連連看則是以兩張內容相關的卡片(可以是字或圖)配成對代替相同圖案。 後來出現了桌面遊戲的連