第十屆 優選

software-dev
遊戲之美 - 連連看經典遊戲開發
Claire Chang

系列文章

DAY 11

[11- 遊戲製作] 使用模組介紹

什麼是NPM 下面是官網上對於NPM的說明 Use npm to install, share, and distribute code; manage de...

DAY 12

[12- 遊戲製作] 介面設計

連連看遊戲需求 我所規劃的連連看應要有下面的功能: 時間限制:需要在8分鐘內完成遊戲,否則就算是沒有過關。 重整牌面的限制:最多只能重整牌面3次,每次耗1點生...

DAY 13

[13- 遊戲製作] 素材處理

PixiJS能使用的素材 承上一篇文章,我們排好的UI介面,其最終的產出是一個fla檔案,但是這樣的檔案pixiJS是無法使用的。 因此我們必需要整理素材並匯出...

DAY 14

[14- Pixi教學] PIXI場景設定

載入所使用的Library 在開發遊戲時我們會使用到PixiJS、SystemJS、和JQuery,因此我們會需要將這幾個library加進html裡。 首先我...

DAY 15

[15- Pixi教學] 載入素材

用PIXI.Sprite來載入圖檔 在PIXI.Sprite裡有一個fromImage(‘URL’)的方法可以直接讓我們將某個圖檔載入Sprite裡面,如: v...

DAY 16

[16- Pixi教學] 與網頁互動-控制loading page

加入loading page 上一篇的成果在載入檔案時畫面就會停在那邊,一般的遊戲通常會有一個下載中的畫面,告知使用者現在下載了幾%,還差幾%還未下載完成。 因...

DAY 17

[17- Pixi教學] 音樂音效設定

PixiJS Sound PixiJS本身有開發可供使用的PIXI.sound。 並且官網上有很詳細的使用範例以及API手冊:PixiJS Sound Pix...

DAY 18

[18- Pixi教學] 按鈕製作

開啟按鈕效果 官網點擊效果範例:https://pixijs.io/examples/#/basics/click.js 預設sprite是無法被點擊到的,因為...

DAY 19

[19- Pixi教學] 連連看盤面實作

PIXI顯示元件介紹 PixiJS裡較常使用的顯示元件有:PIXI.Container、Sprite、AnimatedSprite PIXI.Container...

DAY 20

[20- Pixi教學] 連連看公仔實作- 逐格動畫

動畫物件 在一般的2D遊戲中,動畫可以用2D骨骼動畫製作(如:Spine)、粒子系統(如:Particles)、或者使用Tween(如:gsap)以及逐格動畫來...