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。


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




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


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

留言
avatar-img
留言分享你的想法!
avatar-img
開心做遊戲 Happy Making Game
11會員
68內容數
免費、開心、簡單,這是我做教學的理念,我希望透過我的行動,讓人們找回自我學習的快樂,讓那些資源稀少的自學者們,也能朝著自己的夢想來前進。讓我們一起開心的做出遊戲吧!
2024/09/05
這篇內容,主要會講解,關於球的相關設定,包括了如何讓玩家發球、如何讓球移動、如何讓球反彈、如何改變球的大小,等等的相關功能。
Thumbnail
2024/09/05
這篇內容,主要會講解,關於球的相關設定,包括了如何讓玩家發球、如何讓球移動、如何讓球反彈、如何改變球的大小,等等的相關功能。
Thumbnail
2024/09/02
這篇內容,主要會講解,如何讓玩家進行移動,在解釋的過程中,會接觸到碰撞遮罩、Nine Slice、鍵盤事件,等等的相關設定。
Thumbnail
2024/09/02
這篇內容,主要會講解,如何讓玩家進行移動,在解釋的過程中,會接觸到碰撞遮罩、Nine Slice、鍵盤事件,等等的相關設定。
Thumbnail
2024/09/02
這是一篇前導文章,主要解釋「打方塊」的實戰範例,可以學習到哪方面的技巧,讀完之後,各位可以決定,要不要繼續學習這個專案。
Thumbnail
2024/09/02
這是一篇前導文章,主要解釋「打方塊」的實戰範例,可以學習到哪方面的技巧,讀完之後,各位可以決定,要不要繼續學習這個專案。
Thumbnail
看更多
你可能也想看
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
這篇內容,將會講解什麼是運算子,以及與運算子相關的知識。包括運算子的簡介、賦值運算子、算術運算子、遞增/遞減、比較運算子、邏輯運算子。
Thumbnail
這篇內容,將會講解什麼是運算子,以及與運算子相關的知識。包括運算子的簡介、賦值運算子、算術運算子、遞增/遞減、比較運算子、邏輯運算子。
Thumbnail
這篇內容,將會講解什麼是資料型態,以及與資料型態相關的知識。包括資料型態的簡介、實數、布林值、 字串、陣列。
Thumbnail
這篇內容,將會講解什麼是資料型態,以及與資料型態相關的知識。包括資料型態的簡介、實數、布林值、 字串、陣列。
Thumbnail
這篇內容,將會講解什麼是變數,以及與變數相關的知識。包括變數、資料型態、變數賦值、變數的命名規則、變數的作用區域、變數的可重複性、內建變數。
Thumbnail
這篇內容,將會講解什麼是變數,以及與變數相關的知識。包括變數、資料型態、變數賦值、變數的命名規則、變數的作用區域、變數的可重複性、內建變數。
Thumbnail
這篇內容,將透過實戰教學,來講解「滑鼠點方塊」的程式碼。包括如何測試遊戲、座標系統、自訂參數和內建參數、if else、and、遊戲的邏輯設計、程式碼解析。
Thumbnail
這篇內容,將透過實戰教學,來講解「滑鼠點方塊」的程式碼。包括如何測試遊戲、座標系統、自訂參數和內建參數、if else、and、遊戲的邏輯設計、程式碼解析。
Thumbnail
這篇內容,將透過實戰教學,介紹GameMaker中的Room。包括Room的簡介、調整寬高、圖層功能的概述、用Object來建立實體。
Thumbnail
這篇內容,將透過實戰教學,介紹GameMaker中的Room。包括Room的簡介、調整寬高、圖層功能的概述、用Object來建立實體。
Thumbnail
這篇內容,介紹了知識傳遞的三種型態,以及GameMaker教學的分類方式。閱讀本篇指南,能夠理解GameMaker教學的整體規劃和知識結構。
Thumbnail
這篇內容,介紹了知識傳遞的三種型態,以及GameMaker教學的分類方式。閱讀本篇指南,能夠理解GameMaker教學的整體規劃和知識結構。
Thumbnail
上次我們完成用Unity 建完一張椅子,還有學習基本變數的應用,那我們就繼續寫更多的腳本來讓物體有更多的ㄅㄧㄢ #一般不會用Unity來建模啦,主要還是要靠其他3D軟體導入 ●Gravity Scale 重力預設為1,是造成物體下墜的主因,可以先調到0。 (Unity有支援負
Thumbnail
上次我們完成用Unity 建完一張椅子,還有學習基本變數的應用,那我們就繼續寫更多的腳本來讓物體有更多的ㄅㄧㄢ #一般不會用Unity來建模啦,主要還是要靠其他3D軟體導入 ●Gravity Scale 重力預設為1,是造成物體下墜的主因,可以先調到0。 (Unity有支援負
Thumbnail
這周KP分享的第二個概念是相對單位(relative units) ,使用上的陷阱與原則,以及如何應用它們來做Responsive Layout。
Thumbnail
這周KP分享的第二個概念是相對單位(relative units) ,使用上的陷阱與原則,以及如何應用它們來做Responsive Layout。
Thumbnail
「px」,即像素,是最基本的單位,它常被用於指定字體大小、邊框粗細等。「em」和「rem」通常用於調整相對大小,「em」在子元素中的適用,而「rem」則以根元素為參考。另一方面,「vh」和「vw」分別代表視窗的高度和寬度百分比,特別適合實現響應式設計。「vmin」和「vmax」則根據視窗的最小或最大
Thumbnail
「px」,即像素,是最基本的單位,它常被用於指定字體大小、邊框粗細等。「em」和「rem」通常用於調整相對大小,「em」在子元素中的適用,而「rem」則以根元素為參考。另一方面,「vh」和「vw」分別代表視窗的高度和寬度百分比,特別適合實現響應式設計。「vmin」和「vmax」則根據視窗的最小或最大
Thumbnail
網頁中經常會出現正方形的設計,在切版時如果直接設定固定寬高就是破版的節奏,但單用百分比設定長寬,RWD 時還是會變得不夠正,這邊提供兩個方法:
Thumbnail
網頁中經常會出現正方形的設計,在切版時如果直接設定固定寬高就是破版的節奏,但單用百分比設定長寬,RWD 時還是會變得不夠正,這邊提供兩個方法:
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News