construct 2基本操作
DESCRIPTION
介紹Construct 2環境基本操,包括專案設定、物件、事件、圖層作業、Sprite動畫、場景作業等TRANSCRIPT
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