GameMaker|Camera|滑鼠點方塊|幼幼班08

更新於 發佈於 閱讀時間約 3 分鐘

這篇內容,將會以實戰教學的方式,讓各位認識GameMaker中的Camera。

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

raw-image


前置知識


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


實戰範例:滑鼠點方塊


從幼幼班05開始,我會一邊講解GameMaker的基礎功能,一邊加入實戰的操作,讓各位能完成這個,看起來蠻無聊的「滑鼠點方塊」遊戲。

實戰範例:滑鼠點方塊

實戰範例:滑鼠點方塊


Camera的簡介


Camera的中文翻譯是相機,他的用途,是用來設定,玩家們能看到的「鏡頭畫面」。

各位可以理解成,有一台相機,他會依照遊戲的需求,在Room上面進行移動。而我們最終看到的,就是這台相機在移動中,所攝影出來的畫面。

用一台相機來顯示遊戲畫面,是比較基礎的用法。如果開發者有需要,也能使用多個Camera,來顯示多個遊戲畫面,概念就很像是,保全室裡面的監視器畫面。

另外,至少會需要有一個Camera,GameMaker才能正常執行遊戲,這點是跟Room的需求是一樣的。


設定Camera的方法


Camera是比較特別的物件,無法直接在Asset Browser中直接生成,而是只能透過Room裡面的參數,或是利用程式碼的方式,來進行相關設定。

假設我們沒有透過程式碼,來設定相機的話,那GameMaker就會使用Room裡面的設定,來生成一個預設的相機。

本次的實戰範例,只會使用到Room裡面的設定。用程式碼來設定Camera,是屬於中高階的用法,並不適合當作幼幼班的教學內容。


Viewport的簡介


在正式設定Camera的參數之前,我們還需要了解,什麼是Viewport。

Viewport的中文翻譯是視窗,各位可以把他理解成是「Camera的外接螢幕」。簡單來說,他的用途就是用來放大(或縮小)Camera的輸出畫面。

舉例來說,我們設計了一款遊戲,使用的Camera大小是640*360,但這對主流的電腦螢幕來說太小了。

因此我們能設定一個Viewport,大小為1920*1080,並把這個Camera「串接」到Viewport上。這樣就能在電腦螢幕上,顯示出1920*1080的遊戲畫面了。


進行Camera的設定


先在Asset Browser中,雙擊叫出rm_main,此時在左側的Inspector中,可以找到「Viewports and Cameras」的標籤,點擊後,下方會出現設定的選項。

首先,我們先把「Enable Viewports」的參數打勾,這樣Camera才能串接到Viewport上面。在沒有勾選的狀況下,會直接顯示Camera的畫面大小。

接著,我們能看到下方有很多的Viewport,這表示我們能一次使用多個Viewport。而在實戰範例中,我們只需要使用到一個,所以我們點擊「Viewport 0」的標籤。

點擊後,會出現很多的參數,找到「Visible」的參數並打勾,這樣表示我們要顯示Viewport 0這個畫面。


串接完成後,接著只要設定好寬高大小,Camera的設定就算完成了。

在這次的實戰範例中,Camera的大小和Room是一樣大的,而且不需要進行任何的移動。而Viewport寬高則是Camera大小的5倍。

在Viewport 0的標籤裡,能找到Camera和Viewport的寬(Width)高(Height)參數。將Camera設定成240*160,Viewport則是設定成1200*800。

備註:其他的參數請保持不變,未來的教學裡如果有使用到,會在進行詳細的說明。

調整寬高的流程圖

調整寬高的流程圖




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


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

留言
avatar-img
留言分享你的想法!
avatar-img
開心做遊戲 Happy Making Game
10會員
68內容數
免費、開心、簡單,這是我做教學的理念,我希望透過我的行動,讓人們找回自我學習的快樂,讓那些資源稀少的自學者們,也能朝著自己的夢想來前進。讓我們一起開心的做出遊戲吧!
2024/07/24
這篇內容,將透過實戰教學,來講解「滑鼠點方塊」的程式碼。包括如何測試遊戲、座標系統、自訂參數和內建參數、if else、and、遊戲的邏輯設計、程式碼解析。
Thumbnail
2024/07/24
這篇內容,將透過實戰教學,來講解「滑鼠點方塊」的程式碼。包括如何測試遊戲、座標系統、自訂參數和內建參數、if else、and、遊戲的邏輯設計、程式碼解析。
Thumbnail
2024/07/23
這篇內容,將透過實戰教學,介紹GameMaker中的Event。包括Event的簡介、Create的講解、Step的講解、Events的基本操作。
Thumbnail
2024/07/23
這篇內容,將透過實戰教學,介紹GameMaker中的Event。包括Event的簡介、Create的講解、Step的講解、Events的基本操作。
Thumbnail
2024/07/21
這篇內容,將透過實戰教學,介紹GameMaker中的Room。包括Room的簡介、調整寬高、圖層功能的概述、用Object來建立實體。
Thumbnail
2024/07/21
這篇內容,將透過實戰教學,介紹GameMaker中的Room。包括Room的簡介、調整寬高、圖層功能的概述、用Object來建立實體。
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
https://www.youtube.com/watch?v=0L2OgNQDzTc 之前看了啾啾鞋這部影片,裡面說退坑一款手遊,也說到一些觀念,就如下圖這樣
Thumbnail
https://www.youtube.com/watch?v=0L2OgNQDzTc 之前看了啾啾鞋這部影片,裡面說退坑一款手遊,也說到一些觀念,就如下圖這樣
Thumbnail
這篇內容,簡單介紹了GameMaker的遊戲製作原理。包括Object、參數、程式碼等概念。同時也簡單介紹了GameMaker的適用範圍和特色。
Thumbnail
這篇內容,簡單介紹了GameMaker的遊戲製作原理。包括Object、參數、程式碼等概念。同時也簡單介紹了GameMaker的適用範圍和特色。
Thumbnail
學完基礎的Lua語法後,今天開始製作第一個遊戲畫面了!
Thumbnail
學完基礎的Lua語法後,今天開始製作第一個遊戲畫面了!
Thumbnail
一、了解思維 二、大量體驗 三、拆解架構 四、找出樂趣
Thumbnail
一、了解思維 二、大量體驗 三、拆解架構 四、找出樂趣
Thumbnail
剩下兩週上課囉,大家加油!! 在一開始我們在課程完成了椅子(角色的移動嘛),但遠遠的看著他移動好像缺少了一些遊戲體驗 嗎?>< 這週我們就來改變遊戲的視角吧~~ 來看一下兩個版本的比較~~ 原本WASD AD控制Y軸旋轉(轉頭),後來改成WASD控制平移座標,把旋轉特別移出來到滑鼠上,
Thumbnail
剩下兩週上課囉,大家加油!! 在一開始我們在課程完成了椅子(角色的移動嘛),但遠遠的看著他移動好像缺少了一些遊戲體驗 嗎?>< 這週我們就來改變遊戲的視角吧~~ 來看一下兩個版本的比較~~ 原本WASD AD控制Y軸旋轉(轉頭),後來改成WASD控制平移座標,把旋轉特別移出來到滑鼠上,
Thumbnail
有些風景需要親自經歷後才能了解箇中滋味,這初衷,也可能讓您在20幾年後的今天,被現實打擊到身心疲憊時為了鼓舞自己大聲吶喊莫忘初衷後可以立即回憶起的經歷。 以上故事純屬虛構,如有雷同實屬巧合,以下開始本次教學。 依照慣例我們一樣先來看看完成後的的遊玩影片: A、提案企劃 一句話形容這個遊戲 遊戲類型
Thumbnail
有些風景需要親自經歷後才能了解箇中滋味,這初衷,也可能讓您在20幾年後的今天,被現實打擊到身心疲憊時為了鼓舞自己大聲吶喊莫忘初衷後可以立即回憶起的經歷。 以上故事純屬虛構,如有雷同實屬巧合,以下開始本次教學。 依照慣例我們一樣先來看看完成後的的遊玩影片: A、提案企劃 一句話形容這個遊戲 遊戲類型
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News