Construct2/3

创建于:2017-02-24

创建人: iconboy

103 信息 354 成员
Construct2/3 引擎开发专题
傅老師@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



(转发自:原日志地址
[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



[CONSTRUCT 2範例] 動態水流效果
傅老師 2017-04-13

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

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

(转发自:原日志地址
[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


(转发自:原日志地址
[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串接起來!


(转发自:原日志地址
[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

(转发自:原日志地址
[Construct 2基礎] 平台遊戲中的子彈發射
傅老師 2017-03-02

在設計一個基礎的平台射擊遊戲時,子彈是必定得實現的物件。
然而在實作子彈的過程中,初學者往往會犯上一些小錯誤。
本文列舉出幾個常見的錯誤,以供參考

最簡範例

以下範例主角[player]擁有兩組動畫: <idle>與<fire>。[player]攜帶<Platform>平台特性。

透過對<A><D>鍵的設置我們可以移動[player],並且以<set mirror>指令進行影像水平翻轉。


  [player]的動畫設置

在按下<Space>鍵時,將會在[player]座標上產生一個新的[bullet]實例,[bullet]攜帶有<Bullet>特性因此會向前方飛行。
而所謂的前方,就是[bullet]實例之影像在繪製時,其0度角指向方向。為了讓大家看清楚,我們刻意點上了一小點墨綠色


運行,一切正常:

Image title

接下來是錯誤示範。

錯誤示範#1

搞錯事件母子關係。注意看下圖中事件#4,#5,這個糊塗蟲把原本應隸屬於#3鍵盤觸發指令的程式碼,通通搬到根層級去了。
如此一來在遊戲進行中,只要[player]轉向,全體子彈就會按照事件#4,#5的設置改變。
為什麼是全體子彈呢?因為在根層級,關卡內所有物件是處於全部被選中的狀態


Image title

錯誤示範#2

這位同學為了讓程式模塊化(modulization),使用Function函數將轉向功能移至<turn>函數內。
這樣做,一樣會出現選取範圍的問題。這個問題我稱為<Create objet>/<Spawn object>的陷阱。請先理解以下C2 create指令的特性

  1. create完畢後,該物件類型的選取範圍會縮限剛剛產生一枚實例
  2. 上述之縮限,會在create動作執行後成立,並隨create所屬事件之結束而結束

以此觀念來看,在#3內呼叫"turn"函數後會跳到#5執行,而#5是位於根層級啊!所以#5開始執行時,選中的[bullet]是關卡內全數的[bullet]實例,也就造成了嘗試牽一髮卻誤動全身的狀況。


Image title

精簡寫法

在理解了上述常見錯誤後,我們於文末提出一組精簡精良的寫法。而這個精簡得力於Rexrainbow的<SpriteExt>行為插件:
<SpriteExt>可使用表達式偵測物件目前mirror狀況。偵測到之後我們使用A?B:C這個分岔邏輯語句直接給定子彈角度。



運行結果一切正常,並且縮短了事件表,工作起來清爽多了。


(转发自:原日志地址
【资源】線上免費LPC Sprite圖精靈產生器 (適合用於RPG)
傅老師 2017-03-01

想要製作RPG的人物,卻苦於沒有美術支援? 讓LPC Sprite產生器來拯救你!
http://gaurav.munjal.us/Universal-LPC-Spritesheet-Character-Generator/


什麼是LPC? 

LPC是Liberated Pixel Cup的縮寫,是一個競賽。這個競賽分為兩部份,第一階段比的是開源美術,第二階段比的是開源遊戲。我們可以很明顯地看到,整個LPC競賽有一個非常重要的訴求:開源。舉辦單位的用意也很明確,就是讓第一階段的成果能夠用於第二階段的開發,如此規劃可說是設想周到。

由於此遊戲受到opengameart.org網站的支持,因此當時所產出的許多<LPC兼容>美術素材,迄今還可在opengameart上搜尋到。若讀者未曾光臨過opengameart,強烈建議可以撥個時間瀏覽一下,一起支持這個佛心來的網站。

LPC兼容格式?

為了讓整體產出的美術出現互搭配性,LPC規範了美術的格式(當然要規範~ 不然A君畫的屋頂搭不上B君畫的屋子)。在此重點節錄一些出來,如下:

  • 瓦片地圖每格32x32
  • 任何物品之透視,都以正投影方式進行(orthographic)
  • 著色方式為卡通風格,邊緣採主色調加深,邊緣不可用黑線。
  • 採用經典15格地形

其中,人物規範部分就是本次主題<LPC Sprite產生器>所遵循的規範。詳情請見:http://lpc.opengameart.org/static/lpc-style-guide/styleguide.html

如何使用

連至產生器網頁,右下角可以看到目前使用的素體。右上角可切換目前演示動畫。左側可修改目前動畫的各個參數。


使用方式基本上非常直覺,請直接體驗試試看。

下載成品

點擊畫面正下方save result as PNG即可下載。請注意!下載後的檔案可能需要改名才可開啟,請手動命名為xxx.png。


一個裸體弓箭手就這摸產生哩... 

Image title

結語

針對RPG遊戲來說,LPC Sprite generator真是個不可多得的好工具。希望這個工具能幫上你的作品。

我們下次見!

(转发自:原日志地址
【作品】學生Construct 2作品 - 【糖廍時光機】
傅老師 2017-02-27

Image title

Image title

糖廍時光機

作者:蔡旻佑、郭子瑄
指導老師:傅子恒
遊戲類型:SIM

遊戲簡介:

糖廍台语台罗表记:thn̂g-phōo),又称为蔗廍,是制糖的场所,也是台湾早期的制糖工厂,由压榨甘蔗的棚屋和煮糖的熬糖屋所构成[1]日本时代新式糖厂出现后,旧式糖廍与改良糖廍皆逐渐没落。

本遊戲真實還原台灣糖業公司百年間的經營歷史。以一門大學三年級的課程來說,這個兩人製作的期末專題的完整度已經遠超出平均水平。



傅老師到此一遊
傅老師 2017-02-25

這個站啊~~

加入 indienova

  • 建立个人/工作室档案
  • 建立开发中的游戏档案
  • 关注个人/工作室动态
  • 寻找合作伙伴共同开发
  • 寻求线上发行
  • 更多服务……
登录/注册