Dept. of Electronics Engineering

Construct 2基本操作電子工程系電腦遊戲設計組

吳錫修

2014.3.3

Wu, ShyiShiou2

新增專案

Ctrl-N或由File功能表執行New命令

選取專案樣板

Wu, ShyiShiou3

專案命名

專案預設名稱為New project

由專案Properties/Name設定專案名稱

Wu, ShyiShiou4

儲存專案

專案名稱後標示*，表示修改後尚未存檔

Ctrl-S或由File功能表執行Save命令

Wu, ShyiShiou5

如果專案異動後尚未存檔，則會提示是否進行存檔作業

關閉專案

由專案名稱之快顯功能表執行Close project命令，或由File功能表執行Close project命令

Wu, ShyiShiou6

測試專案 1/2

執行，F4

Wu, ShyiShiou7

測試專案 2/2

除錯模式執行，Ctrl-F4

Wu, ShyiShiou8

使用瀏覽器除錯工具

Internet Explorer: Press F12 to open Developer Tools

Google Chrome: Press Ctrl + Shift + J to open Developer Tools

Firefox: Press Ctrl + Shift + J to open the error console

Opera: Press Ctrl + Shift + O to open the error console.

Safari: Press Ctrl + Alt + C to open the error console.

Wu, ShyiShiou9

Wu, ShyiShiou10

Layout & Window

Construct專案預設會包含⼀個Layout

Layout就是遊戲的⼀個關卡或場景地圖

Wu, ShyiShiou11

Layout左上方虛線區域稱為Window空間，就在遊戲玩家可看到的遊戲畫面空間， Layout外圍深色區為Margins空間，為遊戲尚未上場角色準備區

Layout空間

Window空間

Layout Size設定

場景屬性之中可看到Layout Size設定值，預設為寬1280、高1024；Margins設定值，預設寬500、高500

Wu, ShyiShiou12

Layout Width

Layout Height

Margins Height

Margins Width

Window Size設定

專案屬性中可看到Window Size設定值，預設為寬640、高480

Wu, ShyiShiou13

Window Width

Window Height

設定遊戲畫面縮放模式 1/2

專案Fullscreen in Browser屬性

Off

停止畫面縮放功能，以window size尺寸嵌入在HTML頁面

Crop mode

當螢幕尺寸小於window size時，置中裁切window size內容

Letterbox scale mode

依據螢幕尺寸等比例縮放window size內容，剩餘空間填滿黑色

Letterbox integer scale

依據螢幕尺寸，以整數倍率等比例縮放window size內容，剩餘空間填滿黑色

Wu, ShyiShiou14

設定遊戲畫面縮放模式 2/2

Scale outer mode

依據螢幕尺寸，等比例縮放window size內容，剩餘空間會顯示window外的場景內容

Scale inner mode

等比例縮放window size內容使其全螢幕顯示，如果螢幕寬高比例與window size不⼀樣時，會裁切window內容，以避免顯示window外的場景內容

Wu, ShyiShiou15

Wu, ShyiShiou16

格線設定

View/Grid options

讓物件位置貼齊格線Snap to grid

View/Grid size

格線寬度Grid width

格線高度Grid height

Wu, ShyiShiou17

加入物件 1/2

layout作業窗格快顯功能表/ Insert new object

雙擊layout作業窗格，開啟「插入新物件 (Insert New Object)」對話視窗

選取物件後按下「Insert」按鈕

點擊layout作業窗格置入物件

設定物件內容

拖曳調整物件大小、位置

Wu, ShyiShiou18

加入物件 2/2

shift-drag等比例縮放物件

Wu, ShyiShiou19

drag調整高度

drag調整寬度

drag調整大小

drag調整旋轉角度

設定物件行為能力 1/2

選取物件

點擊Properties/Behaviors開啟物件的Behaviors視窗

點擊工具列「Add new」按鈕，開啟「Add behaviors」對話視窗

Wu, ShyiShiou20

選取行為模組後按下「Add」按鈕

設定物件行為能力 2/2

移除行為能力

點擊Properties/Behaviors開啟物件的Behaviors視窗

由清單中選取要移除的行為模組

點擊工具列「Delete」按鈕

Wu, ShyiShiou21

設定物件特效 1/2

選取物件

點擊Properties/Effects開啟物件的Effects視窗

點擊工具列「Add new」按鈕，開啟「Add effect」對話視窗

Wu, ShyiShiou22

選取特效模組後按下「Add」按鈕

設定物件特效 2/2

移除特效

點擊Properties/Effects開啟物件的Effects視窗

由清單中選取要移除的特效模組

點擊工具列「Delete」按鈕

Wu, ShyiShiou23

加入事件 1/2

點擊事件表(Event sheet)中的「Add event」

在事件表任何地方Double click

事件表快顯功能表 Add event

事件 (event)：發生了什麼事

選擇事件發生對象 (物件)

物件發生了什麼事件?

Wu, ShyiShiou24

加入事件 2/2

動作 (action)：發生事件後要做什麼?

作用在那個物件上?

要做什麼?

Wu, ShyiShiou25

事件註解

事件快顯功能表Add/Add comment

Wu, ShyiShiou26

Sprite物件作業 1/10

Sprite圖片編輯器

Wu, ShyiShiou27

Clear imageRectangle select

EraserPencilBrush

Line RectangleFill

Color pickerSet origin and image points

Set collision polygonMirror

FlipRotate 90 anticlockwise

Rotate 90 clockwiseCrop transparent edges

ResizeZoom in

Zoom out

Zoom inToggle background brightness

Sprite物件作業 2/10

Wu, ShyiShiou28

編輯圖片

Sprite物件作業 3/10

編輯圖框原點及參考點 (Set origin and image points)

Wu, ShyiShiou29

Add image pointRename image point

Delete image pointMove image point up

Move image point down

Sprite物件作業 4/10

載入單張圖片

Load an image from a file

Wu, ShyiShiou30

Sprite物件作業 5/10

載入連續動畫圖片

Import sprite strip…

確認strip圖片分割方式

刪除預設的圖框0

Wu, ShyiShiou31

圖片來源：http://www.vickiwenderlich.com/wp-content/uploads/2012/02/Explosion-Sprite-Sheet.png

Sprite物件作業 6/10

連續動畫屬性

Speed每秒撥放的圖框數，預設為5

Loop是否連續撥放，預設為No

Repeat count當Loop為No時，動畫重撥次數，預設為1

Repeat to結束撥放時的停止圖框，預設為0

Ping-pong正轉-倒轉方式交替撥放動畫，預設為No

Wu, ShyiShiou32

Sprite物件作業 7/10

處理矩陣式連續動畫

Import sprite strip…

確認strip圖片分割方式

刪除預設的frame 0

Wu, ShyiShiou33

圖片來源：http://twewy1.deviantart.com/art/RPG-Maker-VX-Ace-Sprite-Sheet-Beat-335186810

Sprite物件作業 8/10

裁切空白邊，自動調整圖片尺寸

Crop transparent edges (配合shift鍵可裁切整個動畫)

Wu, ShyiShiou34

Sprite物件作業 9/10

分割矩陣式連續動畫

複製動畫

刪除多餘畫格

重新命名

Wu, ShyiShiou35

Sprite物件作業 10/10

調整圖框參考點

避免動畫跳動現象

Wu, ShyiShiou36

Wu, ShyiShiou37

Layers窗格工具列

Wu, ShyiShiou38

Add layer at topToggle layer visible

Toggle layer locked

Rename layer

Delete layerMove layer up

Move layer down

常見的場景圖層安排方式

HUD (top layer - health bar, UI info etc.)

Foreground (main game objects)

Middleground (a parallaxing background layer)

Background (bottom layer - the background)

Wu, ShyiShiou39

圖層屬性 1/2

Background color

圖層底色

Transparent

透明處理

Opacity

不透明度，預設100

0表示全透明

Wu, ShyiShiou40

圖層屬性 2/2

Parallex

Parallex屬性決定圖層水平與垂直方向的相對滾動速度 (以百分比計算)，設為0, 0表示該圖層靜止不動，例如HUD圖層就應將Parallex屬性設為0, 0

愈深遠的背景圖層應該其Parallex屬性相對值應較小，就能在移動時營造景深效果

Wu, ShyiShiou41

Wu, ShyiShiou42

場景事件表

每個場景可搭配⼀個事件表 (Event sheet)

新專案預設會建立⼀個場景及⼀個事件表

新增場景

Wu, ShyiShiou43

管理場景及事件表

依據遊戲角本適當命名

Wu, ShyiShiou44

場景轉換

Add event

SystemGeneral/Go to layout

Wu, ShyiShiou45