1.簡介

2.安裝

1.如何使用Construct 3：有兩種方式
（1）方法1：（線上使用）免安裝，直接使用雲端網頁： https://scratch.mit.edu/
注意：要在上方先（加入Construct)註冊帳號

（2）方法2：下載App（離線使用），安裝在電腦上
在官網選：下載

1.

（1）成果：由下穿越向上： 成果圖片1
（2）下載成果專案檔案

下載貓圖片檔案

範例2-1：開啟templates，修改角色，新增平台物件
1.開啟templates框架：
(1)選擇：platformer，然後測試play，圖片
(2)templates框架：表示已經設定基本架構，可以遊玩，可以進一步修改編輯，有各種物件object（地面，移動物件，角色，子彈，怪物）

2.遊戲場景的概念：
(1)場景scene → layout：整個遊戲的範圍
(2)鏡頭camera → viewport：你目前所看到的畫面，參數viewport size，就是camera size
(3)遊戲可能有多場景，就是有多個layout
3.修改play時的viewport size：
(1)左邊屬性→選擇view(project property)→display→viewport size=340x480
圖片1，圖片2
(2)結果測試：圖片
(3)再改成viewport size=640x480

4.修改play時的layout size：
(1)點按左邊灰色場外區→屬性視窗→選擇layout→layout size=500x500，
圖片
(2)改變場景的縮放比例：ctrl+滑鼠中鍵轉動
平移場景：滑鼠中鍵拖曵移動
(3)再改成viewport size=1280x1024

5.編輯角色player的behaviour：
(1)點選角色player→左邊屬性→選擇behaviour→add/edit behaviour
圖片
(2)目前有2個behaviour：
A.platform：代表player是個角色，可以站立在平台上
B.scrollto：代表camera可以隨著角色移動視野
(3)刪除一個behaviour：scrollto：點選後直接del
結果：play時，看不到角色player了
(4)增加一個behaviour：scrollto
點選角色player→左邊屬性→選擇behaviour→add/edit behaviour→scrollto
圖片
(5)修改角色player的platform 參數：讓角色可以跳高點，走慢點
點選角色player→左邊屬性→選擇behaviour→platform→jump strength=1000
max speed = 100
圖片
play測試

(6)查看各種不同地面的不同特性設定(behaviour)
有些是solid：無法穿透，可以站立（測試：把solid刪除，測試是否還能站立？）
圖片
有些是jumpthru：可以由下向上穿過，然後站立在上面
圖片
有些是sin：可以移動到平台(左右移動，或上下移動）
圖片
（測試：把sin裡面的movement參數改成vertical，讓它上下移動）
（測試：把sin裡面的間隔時間perido（頻率倒數）參數，改成5，讓它快速移動）
（測試：把sin裡面的振幅magnitude參數，改成100，讓它移動振幅變大）

(7)新增一個movingSolidTile，旋轉，並設定它是上下移動
圖片

(8)把角色換成貓圖片：
下載圖片
角色→滑鼠右鍵→edit→刪除舊圖，新增新圖:圖片1，圖片2
測試，play

(9)修改角色圖片的中心點：
角色→滑鼠右鍵→edit→image point:圖片1，改成圖片2
測試，當左右鍵移動時，會有不連續跳格
修改：將中心點改回center，bottom

(10)編輯角色的碰撞框點：
碰撞框：是角色與其他物件碰撞的邊界點
調大碰撞框collison polygon：角色→滑鼠右鍵→edit→edit collison polygon:圖片1，改成圖片2
測試結果：角色無法跳上第一個平台地板，因為碰撞框會先碰到平台地板
修改：將碰撞框collison polygon改回原本，密貼角色

(11)新增一個物件object：sprite（可穿越而上的平台，可以左右移動）：
右邊project視窗→object type→滑鼠右鍵→add new object type→general→sprite
圖片1，圖片2
在場景內點按→拉出橢圓形物件→填滿顏色：圖片
設定sprite物件的碰撞框collision polygon：圖片
設定物件的特性behaviour：圖片
設定2個behaviour：sine，jumpthru：圖片
測試結果：圖片

(12)save the project

(13)下載成果專案檔案

exp3_1

下載貓圖片檔案

1.開啟範例2-1的project
2.注意：layout1的event設定是：event sheet1：圖片1，圖片2
（1）鍵盤：W，S：上，下
（2）鍵盤：A，D：左，右
（3）鍵盤：左A，←：角色顯示鏡像(mirror)
（4）如果角色高度y>layout height，則重新載入場景（原點在左上角）
或是角色y值，向下跌到layout的底部，則重新載入場景
測試：讓角色向左跌出地板，到了layout的底部，會出現什麼結果?
結果：會重新回到原處

3.幫角色sprite新增一個behaviour：按一下R就旋轉10度
關鍵是要選：→ on key pressed（有箭頭）
圖片1， 圖片2， 圖片3， 圖片4， 圖片5， 圖片6
測試結果：按一下R就旋轉10度（一直按R，也只能轉動一次）

4.幫角色sprite新增一個behaviour：一直按R就會一直旋轉
關鍵是要選：key is douwn： 圖片
測試結果：一直按R，就會一直旋轉
結論：
（1）事件：→ on key pressed（有箭頭）：按下鍵不放，只能執行一次
（2）事件：key is douwn（沒有箭頭）：按下鍵不放，就會一直執行功能

5.幫角色sprite新增一個behaviour：按下V就會一直上下移動
關鍵是要選：→ on key pressed（有箭頭）： 圖片1， 圖片2
測試結果

6.幫角色sprite新增一個behaviour：按下H就會一直左右移動
關鍵是要選：→ on key pressed（有箭頭）： 圖片
測試結果

7.下載成果專案檔案

exp4_1

範例4-1：建立新專案與設定動畫
（1）成果圖片， （2）下載成果專案檔案

1.建立新專案new
下載bear圖片檔案
2.建立新的物件object：
project視窗→object types→滑鼠右鍵→add new object→sprite→命名：bear→在場景點按一下→開啟物件圖片編輯窗
圖片1， 圖片2
→匯入圖片:bear1
下載圖片→
3.設定第一個動畫animation的名稱：wait： 圖片

4.建立第二個動畫：walk：
（1）建立第0個frame的動畫圖片：
project視窗→空白處→滑鼠右鍵→add animation， 圖片
（2）命名動畫animation：walk， 圖片
→匯入第0個frame的圖片：bear1
（3）建立第1個frame的動畫圖片：
在第1個frame的右邊→滑鼠右鍵→add Frame→ 圖片
點按 Frame1→匯入bear2
（4）重複做，共匯入8張圖片： 圖片
測試：還是不能出現動畫

5.建立第2個新的物件object：
（1）project視窗→object types→滑鼠右鍵→add new object
→general→Tiled background→命名：floor1→在場景點按一下→開啟物件圖片編輯窗
圖片1， →匯入圖片:plate1
圖片2
下載圖片
→在場景內，拉長圖片，floor會成磁磚連續圖： 圖片
（2）設定floor1物件的behaviour：solid： 圖片1， 圖片2

6.設定第1個物件bear的behaviour：
（1）設定物件bear的behaviour：plateform，scrollto： 圖片
測試：可以用鍵盤左右鍵，控制bear移動，但是沒有顯示動畫： 圖片

7.設定第1個物件bear，向右可以顯示動畫：
（1）目的：當按下向右鍵，要顯示動畫：
A.新增一個鍵盤物件：keyboard： 圖片
B.在event sheet新增一個鍵盤event：keyboard： 圖片1， 圖片2
按向右鍵：圖片3， 圖片4， 圖片5， 圖片6， 圖片7
測試結果：向右移動，有動畫了，但是只會播放動畫一次後，就會停止
C.修改動畫設定，loop=true（重複播放），走路速度變快=3：
圖片
測試結果：可以快速循環動畫了，但是按鍵停止後，還繼續動畫
D.修改動畫設定，按鍵停止後，動畫也停止：
目標：當on key release時，要切換到wait動畫（靜止）
圖片1， 圖片2， 圖片3， 圖片4，
8.設定第1個物件bear，向左可以顯示動畫：
（1）目的：當按下向左鍵，要顯示動畫：
A.到event sheet新增一個鍵盤event：keyboard：
B.on key pressed（有箭頭）
C.Left Arrow
D.animations：walk
E.animation：loop=true，speed=10
（2）當向左鍵放開後，動畫結束
目標：當on key release時，要切換到wait動畫（靜止）
A.到event sheet新增一個鍵盤event：keyboard：
B.on key released（有箭頭）
C.Left Arrow
D.animations：wait
測試結果：鍵盤，向右，向左，向上，都可以正常動畫

exp5_1

範例5-1：發射子彈打怪物，生命值為0則消失，並上傳到免費網頁空間
（1）成果：按z發射子彈，當bat被打中5次，則消失： 成果圖片
（2）下載成果專案檔案
（3）如何把construct專案轉成html5，並上傳到免費網頁空間
（4）上傳到免費網頁空間成果

1.開啟範例4-1的專案：下載4-1成果專案檔案
下載圖片檔案

2.建立子彈物件：
project視窗→object types→滑鼠右鍵→add new object→sprite→命名：bullet→在場景點按一下→開啟物件圖片編輯窗
圖片
→匯入圖片:bulllet（下載圖片）
→向右旋轉圖片：圖片

3.設定按z鍵後，熊發射子彈bullet：
（1）在event sheet→add event→物件選：keyboard→on key press→Z→
（2）add action→物件選bear→Misc：選spawn another object
圖片1， 圖片2
測試：按z可以發送子彈了，但是子彈不會移動：圖片

4.如何讓子彈可以移動：
（1）點選子彈物件→左邊視窗→add behavior→add new behaviour→Movements:bullet特性：圖片
測試：按z子彈可以移動了：圖片

5.目前缺點：子彈不斷產生，不會消失，會一直累積在記憶體裡面：
（1）觀察物件在記憶體的狀況：play→debug the layout： 圖片1， 圖片2
點選子彈0：發現坐標x值一直在向右移動圖片3
（2）如何讓子彈飛過邊界，就消失：
點選子彈物件→左邊視窗→add behavior→add new behaviour→General:destroy outside layout特性：圖片
測試：按z子彈，子彈可以自動消失了：圖片

6.建立怪物，上下移動，並顯示動畫：
（1）下載怪物圖片
或是到scratch下載動物bat動畫
（2）建立bat物件與動畫：
A.project視窗→object types→滑鼠右鍵→add new object→sprite→命名：bat→在場景點按一下→開啟物件圖片編輯窗
B.建立兩個動畫：
wait動畫：只有一張圖:bat-a.svg
wait動畫：有4張圖:bat-a.svg, bat-b.svg, bat-c.svg, bat-d.svg
圖片
測試：bat無法顯示動畫，無法上下移動
（3）讓bat可以上下sine移動：
A.點選bat物件→左邊視窗→add behavior→add new behaviour→sine特性：圖片
（4）讓bat可以在layout一開始就顯示動畫：
A.在event sheet→add event→物件選：System→Start & End：on start of layout： 圖片
B.Add action→add event→物件選：bat→Set animations："fly： 圖片
測試：bat怪物可以上下移動，顯示動畫了

7.子彈打到怪物，就消失：
（1）事件：當子彈碰撞到bat，就把bat消失
因為與事件event有關，所以要在event sheet裡面設定事件event
（2）在 event sheet→add event→物件選bullet→conditions選→collision：on collision with another object→物件選bat： 圖片， 圖片
（3）add action：（把bat消失）：物件選bat→action選：misc：destroy： 圖片
測試：子彈打中bat，就會消失bat
缺點：但是打中後，子彈沒有消失（只有bat消失）
（4）設定打中後，子彈也消失： 事件：當子彈碰撞到bat，就把bullet消失
因為與事件event有關，所以要在event sheet裡面設定事件event
注意：相同事件，不用重複做，只要設定第二個action即可： 圖片， 圖片

8.使用變數（子彈打到怪物5次，怪物生命值由5變成0，才消失）：
（1）先刪除上面做的：bat destroy
（2）建立bat的生命值health變數(=5)：
先點選bat物件→左邊屬性視窗→add instance variable：（health，起始值=5）： 圖片， 圖片
（3）設定事件：當子彈打到bat，減少1點生命值，bat的health(-1)：
在bullet碰撞bat地方事件→add action→物件選bat→action選instance variable：add to： 圖片
設定health的value= -1： 圖片
（4）設定當bat的health=0，則消失：
在event sheet的bullet碰撞bat地方事件→下方空白處→滑鼠右鍵→add→add sub event： 圖片
物件選bat→instance variable：compare instance variable： 圖片
條件設定→health <= 0： 圖片
則→misc：destroy： 圖片
測試：按z發射子彈，當bat被打中5次，則消失： 圖片

exp6_1

1.各種角色移動的方法
（1）方法1：設定面向，及移動值
（2）方法2：設定x，y座標（設定，或滑行）
（3）方法3：移動到某個特定位置

exp6_1

專案6-1：向滑鼠位置移動的瓢蟲
成果圖片， 成果網頁
角色設計a，
腳本設計， 專案成果檔案

exp6_2

專案6-2：向滑鼠位置滑行的小熊
成果圖片， 成果網頁
角色設計a，
腳本設計， 專案成果檔案

exp6_3

專案6-3：用分身技巧打出很多球
成果圖片， 成果網頁
角色設計，
腳本設計a， 腳本設計b， 腳本設計c
腳本設計d
專案成果檔案

2.限制角色移動的範圍
（1）方法1：限制x，y座標的移動值
（2）方法2：用顏色來限制角色移動範圍

exp6_4

專案6-4：滑鼠控制只能在海平面以下行走的獅子
成果圖片， 成果網頁
角色設計，
腳本設計， 專案成果檔案

exp6_5

專案6-5：用鍵盤上下左右幾控制長頸鹿移動，但不能超過地面
成果圖片， 成果網頁
角色設計，
腳本設計， 專案成果檔案

exp6_6

專案6-6：在迷宮內朝滑鼠方向走路的猴子，不可走到外面
成果圖片， 成果網頁
角色設計，
腳本設計， 專案成果檔案

exp6_7

專案6-7：只能在道路上朝滑鼠走的猴子(不可走到草地，用腳上的紅點控制)
成果圖片， 成果網頁
角色設計，
腳本設計， 腳本設計， 專案成果檔案

3.角色的三種不斷重複移動方式
（1）遇到邊緣，反彈移動
（2）在固定x,y範圍內，來回移動
（3）由一邊走出後，從另外一邊走入

exp6_8

專案6-8：鍵盤控制上下左右移動鍵盤控制上下左右移動(只能在圓圈內移動，用角色外框黑色判別)
成果圖片， 成果網頁
角色設計，
腳本設計， 專案成果檔案

exp6_9

專案6-9：公雞在兩個布幕之間來回移動
成果圖片， 成果網頁
角色設計，
腳本設計， 專案成果檔案

exp6_10

專案6-10：人在由一布幕出，從另外一布幕進
成果圖片， 成果網頁
角色設計，
腳本設計， 專案成果檔案

exp7_1

專案7-1：計算魚吃到飼料需要多少時間
成果圖片， 成果網頁
角色設計，
腳本設計a， 腳本設計b， 腳本設計c
專案成果檔案

exp7_2

專案7-2：倒數5秒後開始賽跑
成果圖片， 成果網頁
角色設計，
腳本設計a， 腳本設計b， 腳本設計c， 腳本設計d
專案成果檔案

1.

1.不斷運動的場景有兩種方法：
（1）幾個小圖形，重複循環運動（改變位置，大小，透明度），造成流動效果 （2）數個連續背景圖片，接續向左移動，造成角色移動的效果

exp8_1

專案8-1：重複移動的雲朵(造成鳥飛效果)
成果圖片， 成果網頁
角色設計，
腳本設計a， 腳本設計b， 腳本設計c， 腳本設計d
專案成果檔案

exp8_2

專案8-2：連續運動的背景(造成馬跑效果)
成果圖片， 成果網頁
角色設計，
（1）設定馬跑的腳本：
腳本設計a， 腳本設計b
（2）從舞台匯出一張背景圖片，匯入角色區：
腳本設計c， 腳本設計d， 腳本設計e， 腳本設計f， 腳本設計g
（3）幫4張圖片設定重複接續顯示的程式腳本：
腳本設計h， 腳本設計i， 腳本設計j， 腳本設計k
專案成果檔案

1.

1.重力加速度：
（1）直接向下的重力加速度：形成自由落體
（2）有起始速度的移動自由落體：形成拋物線
加速度，速度，距離的關係公式：

exp9_1

專案9-1：計算足球自由落體到地面所需的時間(y2=y1+(gt^2)/2)
成果圖片， 成果網頁
角色設計，
腳本設計， 專案成果檔案

exp9_2

專案9-2：有起始速度的拋物線丟球，形成拋物線
加速度，速度，距離的關係公式：

成果圖片， 成果網頁
角色設計，
腳本設計a， 腳本設計b，
專案成果檔案

exp9_3

專案9-3：有起始速度的拋物線丟球，打中目標則得分類似（類似憤怒鳥）
加速度，速度，距離的關係公式：

成果圖片a， 成果圖片b， 成果網頁
角色設計，
腳本設計a， 腳本設計b， 腳本設計c
專案成果檔案

exp10-1

專案10-1：通關電流急急棒
下載關卡背景圖
成果圖片， 成果網頁
角色設計，
腳本設計a

腳本設計b， 腳本設計c
腳本設計d， 腳本設計e
腳本設計f， 腳本設計g， 腳本設計h
專案成果檔案

exp10_2

專案10-2：多關卡的電流急急棒
（1）複製專案10-1，修改名稱為專案10-2
（2）
成果圖片a， 成果圖片b， 成果網頁
角色設計，
腳本設計a， 腳本設計b， 腳本設計c
腳本設計d， 腳本設計e
腳本設計f， 腳本設計g
腳本設計h， 腳本設計i
專案成果檔案

exp10_3

專案10-3：簡易乒乓球
成果圖片， 成果網頁
角色設計，
腳本設計a， 腳本設計b， 腳本設計c
腳本設計d， 腳本設計e
腳本設計f
專案成果檔案

exp10_4

專案10-4：逐漸加快的乒乓球，得分30過關
（1）複製專案10-3，修改名稱為專案10-4
（2）
成果圖片， 成果網頁
角色設計，
腳本設計a
腳本設計b， 腳本設計c
腳本設計d
專案成果檔案

exp10_5

專案10-5：乒乓球打寶物，得分7分過關
（1）複製專案10-3，修改名稱為專案10-5
（2）
成果圖片a， 成果圖片b， 成果網頁
角色設計a， 角色設計b，
腳本設計0
腳本設計a， 腳本設計b
腳本設計c， 腳本設計d， 腳本設計e
腳本設計f， 腳本設計g， 腳本設計h， 腳本設計i
專案成果檔案

exp10_6

專案10-6：憤怒鳥可以飛多遠(簡易詢問輸入力道，角度)
成果圖片a， 成果圖片b， 成果圖片c， 成果網頁
角色設計，
腳本設計a， 腳本設計b， 腳本設計c
專案成果檔案

exp10_7

專案10-7：憤怒鳥可以飛多遠(複雜設定力道，角度)
（1）如何選定力道：當力道燈閃到目標值時，點按舞台一下
（2）如何選定角度：當箭頭旋轉目標值時，點按舞台一下
成果圖片， 成果網頁
角色設計，
腳本設計a， 腳本設計b
腳本設計c， 腳本設計d， 腳本設計e
腳本設計f， 腳本設計g
腳本設計h
專案成果檔案