傅老師@Construct2/3 的内容（查看所有内容）

[CONSTRUCT 2範例] 收集魂魄效果(使用moveTo)

傅老師 2017-06-24

注意! 本範例使用C3 + rex_moveTo插件

一般來說我們會將血條坐在parallax為(0,0)的ui層，因此在進行遊戲物件與ui物件的互動時，座標必須進行轉換。

轉換相關的表達式包括:
1. LayerToCanvasX / LayerToCanvasY: 將指定圖層上的某座標轉換為H5遊戲canvas的座標
2. CanvasToLayerX / CanvasToLayerY: 將H5遊戲的canvas座標轉換為指定圖層上的某座標

另外補充一點，若有利用layoutScale做出整個遊戲畫面的縮放效果，則左上角canvas座標是(0,0)，右下角canvas座標是(WindowWidth, WindowHeight)

http://pan.baidu.com/s/1bA6SCQ

Image title

（转发自：原日志地址）

4 喜欢评论: 3

[CONSTRUCT 2範例] Dungeon Crawl 範例 + 新書章節

傅老師 2017-06-06

在幾個大學的支持下，最近我開始撰寫給高中生看的Construct 2課本。
在新合作的出版社建議之下，我們選出了Pong、AVG、以及Maze這三課作為<C2高中微課程>的首部曲。
我想有上過美啊Meia C2課程的同學們，一定對這幾課必定不陌生的啦~~
不過呢，這次在遊戲歷史部分我稍微做了小小的更動，一來是希望高中生能知道這段歷史，二來也希望引起他們課後探索的興趣。
所以~~我這就來看看新篇章：Dungeon Crawl吧！

==========

第四章地城迷宮遊戲Dungeon crawl

4.1 地城迷宮遊戲簡介
地城迷宮(Dungeon)，是一種非常常見的遊戲機制與世界觀設定，在現今許多不同類型的遊
戲中都可見到地城迷宮機制的身影。從薩爾達傳說Zelda，到暗黑破壞神Diablo，到黑暗靈
魂Dark souls。。等等，無數的地城迷宮牽引著數量龐大的玩家去釋放他們探索的慾望，也
奠定了遊戲關卡設計的理論最奧妙的部分。你知道地城迷宮遊戲在歷史上是如何誕生的嗎？
現在就讓我們來談談他的歷史吧。

。。。。

。。。。其中一個幸運留下紀錄的遊戲叫做pedit5 – The Dungeon（1975），這個遊戲是目前可追
溯到最早的地城迷宮遊戲。Pedit5是由美國伊利諾大學的研究員Rusty Rutherford在PLATO
系統上所製作的，作者最初的想法乃是將當時極為流行的桌遊---龍與地下城(Dungeon and
Dragon)製作為電腦版的遊戲，因此採用了許多該遊戲的機制，包括：HP血量、EXP經驗值、
職業別（戰士、魔法師、僧侶）、層級式的迷宮。。等等。pedit5的世界觀承襲自龍與地下
城，作者也很用心地幫pedit5製作了像素美術，所以pedit5成為當時PLATO系統中受歡迎
又易上癮的遊戲。可惜的是在當時PLATO系統的用意並非用來製作遊戲，而是用來做各式
各樣的科學研究，因此管理員常常會把pedit5這個遊戲刪掉。pedit5能夠幸運地保存到今日
是由於當初留下了幾份系統備份，我們今天才能從系統備份中復原出這些遠古級別的遊戲。
http://insight.ieeeusa.org/insight/content/views/371703

在pedit5之後，伴隨著龍與地下城桌遊系列的興起，地城類型的遊戲逐漸形成一個完整的體
系，稱之為地城迷宮探索Dungeon crawl類型。早期經典地城迷宮遊戲有以下幾個特色：
1. 預先設計好的網格狀迷宮地圖
2. 重探索與戰鬥，不重劇情
3. 具有寶物獎勵機制
4. 古典奇幻(high fantasy)的世界觀
發展到了1980年代，地城迷宮遊戲出現了數量的上升，在此時刻擴增出了多種新式機制，
戰鬥模式也呈現多樣化的發展，劇情所占的重要性也逐漸提升，直接助益了當代RPG遊戲
的形成。

=============================
Dungeon Crawl 與 RPG的差異？
一般來說，Dungeon Crawl的特色在於強調迷宮探索，讓玩家體驗更直接的刺激感；而
RPG則具備更多的劇情與角色間的互動，與玩家更深層的感情進行互動。一些Dungeon
Crawl的重度玩家則進一步認為網格狀迷宮是一個必要的元素。

=============================

元祖Dungeon Crawl試作(3x2視野)：
http://www.memoryabc.com/c2_example/dungeonCrawl

按<Enter>就會跳出隨機地形，請注意由於我懶得畫太精美，所以牆面是片超薄的紙...真正實作時可以：
1. 畫成有厚度的牆
2. 設計合理的迷宮地圖，避免露出紙張般的牆面

Image title

範例下載：

http://pan.baidu.com/s/1o8oJbU6

4 喜欢评论: 9

[CONSTRUCT 2範例] 動態水流效果

傅老師 2017-04-13

使用<Warp>特效製作水流效果(0條指令):
Image title

http://pan.baidu.com/s/1mieASZm

（转发自：原日志地址）

3 喜欢评论: 0

[CONSTRUCT 2範例] 自行實現Platform sustain功能

傅老師 2017-04-05

Image title

在遊戲設計程式教學的基礎課中，我們通常會要求同學自行嘗試實現古典物理重力定律：

1. V = Vo + gt
2. S = Vo*t + 0.5*g*t^2

這算是比較簡單的題目，只需讓實件知道自己當下的速度即可輕鬆實現。
比較困難的是，如何實現長按跳躍鍵時延長滯空時間呢？

很簡單，你只需要：

1. 按住跳躍時，逐漸地減小g值
2. 設定g值的最小值，以免減扣至0造成飛翔

http://pan.baidu.com/s/1c2tdReK

（转发自：原日志地址）

6 喜欢评论: 2

[Construct 2與Node.js] #1 - 好用的Auto-reload Server

傅老師 2017-04-03

Node.js是一套可以讓你在本地端運行JS代碼的運行環境，Node.js近年來常被使用於製作app後台，很大程度的取代了PHP在網路技術的角色。本文教你使用Node.js架設一個http伺服器，讓免費版C2輸出的檔案能夠在瀏覽器中順利執行。

=====================

眾所周知的，免費版C2所輸出的檔案是不能夠直接點擊兩次或是用Chrome來開啟執行的。如果你這樣做，將會看到以下的畫面:

這個問題在百度貼吧大概是月經貼...每個月都有新人問這個問題啊...
這個錯誤，是因為C2使用了file://通訊協議來讀取項目資源，而Chrome(以及很多瀏覽器)是不支援本地執行file://協議的。
為什麼瀏覽器不支援file協議呢? 很簡單~ 這是為了保障你的個人資訊安全。
變通的方法，就是真的在本地電腦上架設一個http伺服器，再將C2 H5遊戲放上http伺服器後以網址運行。
可是架設http伺服器對於一般用戶可是難如登天的啊。。所以~~本文教你如何輕輕鬆鬆地使用Node.js第三方模組---simple-autoreload-server來自架http伺服器，保證你用一次就成鐵粉!

好啦~坐穩吧~我們開始囉~

讀者請務必先自行安裝Node.js:
https://nodejs.org/en/

=======================

首先確認電腦已連上網路。接著在Windows下開啟一個主控台程序(cmd)，輸入以下程序即可安裝simple-autoreload-server:

npm install -g simple-autoreload-server

Image title

程式很小，很快就可安裝完畢。

=======================

接著跳至C2遊戲輸出資料夾，點及任意空白處取消選取焦點，按住<Shift>鍵不放，於空白處點擊滑鼠右鍵，選擇<在此處開啟命令視窗>。

在開啟的主控台中輸入以下指令，即可將C2遊戲資料夾轉換成伺服器根目錄。

autoreload-server

Image title

在瀏覽器中運行 http://localhost:8080 即可看到整個完整的目錄夾，點擊index.html就可以運行你的C2遊戲了。

Image title

使用autoreload-server的好處有二:

1. 可以讓免費版輸出亦能使用手機運行

2. 伺服器偵測到檔案更新時會自動刷新瀏覽器內頁面

===========================

使用手機運行

上述的localhost站名是指本機的意思，若想從手機或是其他PC連過來，則需要具體以ip位址連接。
請開啟一個新的主控台，輸入以下指令，取得本機ip位址:

ipconfig

以上圖為例，傅老師開啟autoreload-server的這台PC，其ip位址為 192.168.2.13。
192.168開頭的ip是內網ip，所以請將你的手機連至與PC相同的Wifi路由器，方可以此ip位址連接。

=================

本節教大家一個基礎好用的node.js第三方模組功能，希望你會喜歡。
其實傅老師也常常使用autoreload-server來進行內網的檔案分享。我最常做的事情就是在PC上做投影片，再利用autoreload-server開出一個檔案伺服器，從筆電上抓取我的投影片。

下節我們會來介紹更多好用的Node.js功能，並且用更多的花式絕招與Construct 2串接起來!

（转发自：原日志地址）

6 喜欢评论: 2

[CONSTRUCT 2範例] 超直覺Sprite高亮閃爍範例 0 喜欢

傅老師 2017-03-08

Image title

C2自帶的閃爍在閃爍間隔會讓Sprite消失，對於一些遊戲設計來說，我們希望在閃爍間隔是以高亮呈現，這該怎麼辦呢？
其實啊～調整Sprite的高亮設置可使用C2自帶的<brightness> effect，brightness調到200就整個變成白色的了。

但是，如何使用簡易的方式來做出閃爍功能呢?

答案是：使用<Sine>跟<Fade>

你猜到了這是怎麼做的嗎？

http://pan.baidu.com/s/1miAwRri

（转发自：原日志地址）

7 喜欢评论: 7