本日上課工具-Construct2教學.PDF

本日上課工具 • 有帶電腦上課的同學，請先安裝: – Scirra Construct 2 r204.2 – Notepad++ – Google Chrome 講師介紹 講師介紹 • 傅子恆 • 學歷: – 台灣大學電機系(1998畢業) – 台灣大學電機所(2000畢業) • 經歷: – 工業技術研究院工程師 – 工業技術研究院專案經理 – 宏達電(hTC)專案經理 – 恆進線上學習中心主任 – 高智能學習顧問主任講師 • 專長: – App遊戲設計，微電子電路設計，嵌入式系統設計，PHP+MySQL ， – 高效率讀書方法 講師介紹 • 恆進線上教學（ ） – 專業的Construct 2教學中心 作品介紹 - 傅老師的萬聖節 • Android app 作品介紹 - 任天堂馬戲團複刻 作品介紹 - 快樂農莊 作品介紹 - 傅老師的聖誕 作品介紹 - 傅老師的賀年 作品介紹 – 雙人連線坦克大戰 /c2_example/G5_tank_multi/ 作品介紹 FB粉絲頁 /MrFu88 什麼是遊戲引擎? 體驗Canvas • 先來看看： – 以傳統自製引擎做HTML5遊戲 – 體驗Canvas • 什麼是Canvas?(有空再看) – /canvas.html • 遊戲引擎 – 維護遊戲內物件 • 繪製到canvas 、自動運行步數tick 、接受腳本操作 – 構築物理世 – 運用系統資源(RAM, HD) – 管理內部資源(影、音、表格) 體驗複雜度 index.html !DOCTYPE HTML html lang=zh-tw head meta charset=UTF-8/ titleHTML5遊戲範本/title link rel=stylesheet href=reset.css type=text/css / /head body !--放置一塊canvas畫布 -- div id=container canvas id=game width=320 height=480/canvas /div !--匯入引擎與腳本-- script src=engine.js/script script src=game.js/script /body /html CSS 加入reset.css中 /* Center the container */ #container { padding-top:50px; margin:0 auto; width:480px; } /* Give canvas a background */ canvas { background-color: black; } 牛刀小試 • 將腳本game.js先mark掉 • 插入以下指令: !-- script src=gam