GameMaker|打方塊-03|尺寸規劃

閱讀時間約 3 分鐘

這篇內容,主要會講解,要如何規劃房間、相機,以及各種物件的尺寸大小。

本篇教學所使用的系統是Windows 10,如果有按鍵相關的說明,會用Windows的系統來解釋。如果你用的是Mac系統,再麻煩自行換成相對應的按鍵。

raw-image


前置知識


在學習本篇內容之前,最好具備以下的前置知識,以免看不懂這篇教學的內容。


目標講解


本篇沒有太多的實作內容,主要是分享一些概念,以及思考的方式。

這邊也要提醒一下,我本身沒有太多的相關經驗,尺寸規劃的方法,是我透過對GameMaker,和2D美術的理解,進而推導出來的結果。

如果你有更好的想法,非常歡迎留言跟我分享。


畫面的載體


規劃尺寸的第一步,是先決定你的遊戲,要放在哪種螢幕上面,不同的螢幕,有不同的長寬比,解析度的大小也是五花八門。

這個打方塊的範例,我只打算在電腦上面運行,因此我先訂出了16:9的長寬比。

接著透過網路上的搜索,得知4K解析度的主流大小為3840*2160。


決定比例尺方塊


在打方塊的範例中,比例尺方塊的大小,其實就是「牆壁」方塊的大小。

比例尺方塊的用意,是用來規劃所有物件的比例大小,像是消除用的方塊,長寬比是3:1,玩家的比例大約是6:1。

當然,這個比例尺也會用來規劃相機,以及房間的長寬大小。


我把比例尺的方塊,設定成80*80,設定成這個大小的理由,是我認為,這樣子的畫布大小,已經足夠顯示,物件裡的作畫精度了。

如果想要有更高的精度,就是把比例尺加大,只是房間和相機的長寬,也會跟著變大就是了。


測試和實驗


接下來就是進行「畫面測試」,也就是實驗各種尺寸的幾何圖形,放在遊戲上面,看看感覺如何。

在做這個實驗之前,需要讓遊戲,擁有一定的操作能力,才能開始做測試。

像我是已經完成「玩家移動」、「發球」、「球會反彈」,等等的功能之後,才開始規劃尺寸的。

如果畫面無法移動的話,我個人會覺得,很難去「體驗」尺寸的適合度。


實驗的過程分享


實驗的方法和過程,我覺得因人而異,這邊只是稍微分享一下,我自己在這個專案的「實驗過程」,希望能對各位產生一些啟發。


由於我的電腦螢幕是1080p的,所以我把Viewport的部分設定成1600*900,這樣遊戲的視窗,才不會超出我的螢幕範圍。

接著是相機的大小,我一開始的設定是3840*2160,也就是主流的4K螢幕大小。房間則是和房間一樣大。

玩家的長寬比,一開始的規劃是4:1,所以尺寸是320*80。方塊的比例是3:1,尺寸是240*80。球的直徑大小是80。


在排版完牆壁之後,我覺得房間有點太小了,似乎不能塞足夠多的方塊,於是先調整房間的大小,最後決定使用5120*2880的尺寸(相機也用相同的尺寸)。

因為方塊和球的尺寸,我覺得沒啥問題,但是玩家的長度,以及整體的長寬比,看起來都不是很和諧,於是我開始調整玩家的尺寸。


後來我決定,把玩家的比例,設定成6:1,只不過不是用原本的比例尺,而是改用120*120,換算成實際的大小,也就是720*120。

不過後來覺得120的高度,似乎有點太厚了,所以就稍微砍了一點尺寸,最後的尺寸就變成了720*100。


道具尺寸的部分,我就不分享了,基本上概念就跟上面一樣,只是這部分的測試,是等到我把「物品掉落」的功能製作完之後,才開始進行測試的。




🔔如果內容對你有幫助,可以按個喜歡,這樣就能讓更多人,接觸到這些棒棒的內容🔔


✨祝各位也能開心的做出好遊戲✨

免費、開心、簡單,這是我做教學的理念,我希望透過我的行動,讓人們找回自我學習的快樂,讓那些資源稀少的自學者們,也能朝著自己的夢想來前進。讓我們一起開心的做出遊戲吧!
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
這篇內容,主要會講解,如何讓玩家進行移動,在解釋的過程中,會接觸到碰撞遮罩、Nine Slice、鍵盤事件,等等的相關設定。
這是一篇前導文章,主要解釋「打方塊」的實戰範例,可以學習到哪方面的技巧,讀完之後,各位可以決定,要不要繼續學習這個專案。
這篇內容,介紹了知識傳遞的三種型態,以及GameMaker教學的分類方式。閱讀本篇指南,能夠理解GameMaker教學的整體規劃和知識結構。
這篇內容,主要會講解,如何讓玩家進行移動,在解釋的過程中,會接觸到碰撞遮罩、Nine Slice、鍵盤事件,等等的相關設定。
這是一篇前導文章,主要解釋「打方塊」的實戰範例,可以學習到哪方面的技巧,讀完之後,各位可以決定,要不要繼續學習這個專案。
這篇內容,介紹了知識傳遞的三種型態,以及GameMaker教學的分類方式。閱讀本篇指南,能夠理解GameMaker教學的整體規劃和知識結構。
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
這篇內容,將會講解什麼是表達式(Expression),什麼是陳述式(Statement)。有了這些概念,各位會更容易理解,要如何設計程式碼。
Thumbnail
這篇內容,將會講解什麼是方法,以及與方法相關的知識。包括定義Method、Method Variable 方法變數、跨區使用Method、使用函式時要注意括號。
Thumbnail
這篇內容,將會用一個簡單的範例,來解釋物件(Object)和實體(Instance)的差別。包括Instance的簡介、ID、物件改變會影響實體。
Thumbnail
這篇內容,將透過實戰教學,介紹GameMaker中的Event。包括Event的簡介、Create的講解、Step的講解、Events的基本操作。
Thumbnail
這篇內容,將透過實戰教學,介紹GameMaker中的Camera。包括Camera的簡介、設定Camera的方法、Viewport的介紹。
Thumbnail
這篇內容,將透過實戰教學,介紹GameMaker中的Room。包括Room的簡介、調整寬高、圖層功能的概述、用Object來建立實體。
Thumbnail
這篇內容,將透過實戰教學,介紹GameMaker中的Sprite。包括建立新的Sprite、重新命名及刪除、建議的命名方式、編輯圖像、調整圖像大小、動畫的概述、原點設置、碰撞遮罩的概述。
Thumbnail
這篇內容,將簡單介紹Asset Browser、Workspace、Inspector、Code Browser,作為入門的介面導覽。
Thumbnail
這篇內容,將教你如何開啟新的GameMaker專案,並調整畫面佈局。也會講解,為何建議用英文語系,來進行遊戲開發。
Thumbnail
這篇內容,將教你如何安裝GameMaker,並更改語言設定。包括GameMaker的下載說明、版本說明、安裝說明、語系更改。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
這篇內容,將會講解什麼是表達式(Expression),什麼是陳述式(Statement)。有了這些概念,各位會更容易理解,要如何設計程式碼。
Thumbnail
這篇內容,將會講解什麼是方法,以及與方法相關的知識。包括定義Method、Method Variable 方法變數、跨區使用Method、使用函式時要注意括號。
Thumbnail
這篇內容,將會用一個簡單的範例,來解釋物件(Object)和實體(Instance)的差別。包括Instance的簡介、ID、物件改變會影響實體。
Thumbnail
這篇內容,將透過實戰教學,介紹GameMaker中的Event。包括Event的簡介、Create的講解、Step的講解、Events的基本操作。
Thumbnail
這篇內容,將透過實戰教學,介紹GameMaker中的Camera。包括Camera的簡介、設定Camera的方法、Viewport的介紹。
Thumbnail
這篇內容,將透過實戰教學,介紹GameMaker中的Room。包括Room的簡介、調整寬高、圖層功能的概述、用Object來建立實體。
Thumbnail
這篇內容,將透過實戰教學,介紹GameMaker中的Sprite。包括建立新的Sprite、重新命名及刪除、建議的命名方式、編輯圖像、調整圖像大小、動畫的概述、原點設置、碰撞遮罩的概述。
Thumbnail
這篇內容,將簡單介紹Asset Browser、Workspace、Inspector、Code Browser,作為入門的介面導覽。
Thumbnail
這篇內容,將教你如何開啟新的GameMaker專案,並調整畫面佈局。也會講解,為何建議用英文語系,來進行遊戲開發。
Thumbnail
這篇內容,將教你如何安裝GameMaker,並更改語言設定。包括GameMaker的下載說明、版本說明、安裝說明、語系更改。