環境互動設計:向布局中注入真實感

2020-12-23 GameRes遊資網

文/Katana編譯

今天要向大家介紹一種基於開放世界場地的關卡設計方法。

理由!理由!

這裡有一種基於現有建築結構生成有趣的布局和設計的方法。

該過程包括確認一個具有很大潛力作為遊戲玩法機會的場地,並將其轉化為娛樂空間(Game-play Space)。

而選擇的過程,主要依賴於在Google圖片或者是Google地圖等搜尋引擎編輯器,於外部進行探索性的工作,並使用我們的能力來識別現實世界中常見的可玩功能交互性(Affordances)。

如果它在現實生活中有效,那麼它在遊戲中應該也能生效。而如果它在現實生活中無效,但看起來可能可行,那麼它應該也能在遊戲中生效。

倫敦—跑酷示例

讓我們一起來審視跑酷藝術家是如何看待三維空間,這可能是可轉換到遊戲中最完美的例子。

普通人對於空間的理解——它反映了其原始目的。

跑酷健兒對於空間的理解-因為他們知道自己的物理邊界。

在電子遊戲中,我們有一些指標,它可以準確地告訴我們,為了實現環境交互,障礙物到底需要達到多高?我們有最小值和最大值,我們可以以此來理解空間。

第二部分涉及到該空間的實際轉換,以便使它符合我們的設計標準,而我之前在我的其他博客中的文章和Twitter線程中提到過這一點:

遊戲指標是為了確保該場地支持遊戲玩法。這並不是要把遊戲玩法放在不支持的地方。這是為了確保可以在其中進行遊戲。空間不應是為了控制遊戲玩法而構建,而是應被設計為用以支持遊戲玩法。如果空間支持遊戲玩法,則我們就可以控制它(空間)。與遊戲空間相比,現實中的地方往往非常大,當我們嘗試對整個場地重新進行蠻力縮放時,可能會導致一些位置感的意外丟失。現實世界中還有很多我們可能不想在地圖中使用的東西,僅僅是因為這會過多地影響我們的生產工作。在我們處理不斷變化的生產目標和意圖時,請根據我們能夠如期完成的工作量來制訂需求,這可能也意味著按時發布產品和可怕的項目推遲之間的差距。

所以說!我們應該怎麼做呢?

當然是先去谷歌一下,讓我們輸入感興趣的內容:

尋找出色的參考文獻-西班牙,鄉村,橋梁(Spain, Village, Bridges)

Puente Nuevo是西班牙的一個真實地方。

Puente Nuevo — 西班牙

我在這個階段感興趣的是在此上下文中發現有趣的內容。所以我拿了一堆參考圖片,然後慢慢地開始建立自己的參考庫。

如果我對建造整個城鎮感興趣,那麼實際上我會去嘗試對整個地方進行更全面和更深入的了解。

像這樣:

整個Puente Nuevo城.

構建一座完整的城市始終是一件成本非常昂貴的事情,它涉及到大量規劃和場地管理,如果你想了解更多有關信息,可以點擊以下連結:

場地勘察(Location Scouting)

然而,我們這次要做的並不是專注於構建全局,而是考慮到全局已經存在,我們將嘗試確定一些很酷的場地,然後將其轉換為娛樂空間。

在此階段,我們正在尋找一些東西:

有趣的幾何圖案有趣的高度變化房屋結構中的開口

像這樣的東西:

城市範圍內有趣的構造

一些考量因素:

我們希望我們的場地具有標誌性(地標)我們希望它們像要塞一樣建造

如果它們同時滿足這兩個條件,我們就可以繼續。

場地1:

該場地的標誌性非常出色,它們可以用作地標。但除非你有著足夠預算去生產它,否則它們不一定具有遊戲功能。

刺客信條:大革命中的巴黎聖母院就是一個兩者兼而有之的例子。

巴黎聖母院-刺客信條:大革命

而我們的小教堂……不大,咳咳。但如果這是一個更大的建築,比如說烏普薩拉大教堂,那麼我們的討論可能會因此不同

烏普薩拉大教堂

關於該要塞的屬性,我會說:「讓我們不要選擇(Push)它!」 因為它一點也不酷。

在這一點上,我給它1星,然後我們繼續前進。

場地2

看起來有點像一座堡壘,但它具有標誌性嗎?

場地2有一張充滿著功能交互性的有趣地圖的所有組成部分,但是,喜歡遨遊世界的玩家如果沒有地圖,將很難找到它。

同樣,就藝術成本而言,它的尺寸也很難讓人為它繼續辯解,所以1星。

場地3

哇!這是一個變化。

這是別的場地。它具有標誌性嗎?好吧,它是城市最高的建築物之一。

它是要塞嗎?並不是,但其中也包含了許多室內的遊戲玩法,並且製作成本可能較低(也許吧)。我是一名關卡設計師,但我也會有缺點,所以我可能會將這2星因為一個(也許)更好地選擇,給另外兩個場地。但請別擔心,我們會在最後重新評級。因為在關卡設計中,可能還會有很多好東西。

場地4

一個有趣的組合

場地4有一個標誌性的競技場和一個有趣的公園空間相連,令人印象深刻,這是不是可用的娛樂空間呢?

一些探索

它可能會起作用,所以我將給出3點開始並繼續前進。

我非常喜歡這樣一個事實,它有著一個巨大的遠景:

現在,如果你去向美術總監或者主美詢問關於這個場地的信息,他們肯定會說,除了競技場以外,所有東西都得報廢。但是,為了展示一種方法,我們現在將暫時忽略這條建議。

向前跳過

我們的評分如下:

我不會費盡心思和其他人討論細節,因為它們要麼太無聊,要麼太具有標誌性,要麼就是沒有足夠的娛樂空間來發揮作用。

所以,我們將討論第四點:

皇家騎兵大師託羅斯廣場(皇家騎兵廣場)

上一張照片-西班牙

在該階段,如果可能的話,我想從歷史的角度進一步地了解該場地。很明顯它在這裡已經有著很長一段時間了,所以它可以看出,它可能有著很多故事。

一位遊客說:

「 (Original) Arena più antica di Spagna. un pezzo di storia di questo paese e』 meglio munirsi di audio guida molto bello il monumento al toro e non solo tutta Ronda merita di essere vista. panorami stupendi」

讓我們翻譯下,

「西班牙最古老的競技場。受益於音頻指南,我們得以了解到其中的一些歷史。非常漂亮的鬥牛紀念碑,整個競技場都非常值得參觀,很棒的全景」。

但不幸的是,我找不到它的維基頁面。雖然我確實找到了一些關於西班牙和世界上其他鬥牛場的一些很棒的參考資料。

在馬德裡,競技場的結構如下:

馬德裡鬥牛場

我不想在細節上打擾你,因為你還會有很多很多東西要學。

如果你對該鬥牛場感興趣,可以點擊此處:

通常,到了此時,我會試著根據這裡可能發生的故事來構建一個敘事結構:

下注出錯鬥牛交易和投機當地黑幫試圖擴大他們的影響力為了備受矚目的目標所舉辦的私人鬥牛比賽刻意阻礙鬥牛士,令其在場上受傷,這樣你便可以贏下/輸掉比賽

只要保持對該場地的幻想,任何事情都可能會發生。

布局(The Layout)

現在到了最有趣的部分:

我們搜尋了場地我們發現了一些很酷的東西我們發現了其中的一些缺陷我們知道我們想在這裡講一個什麼樣的故事讓我們組裝布局!

我們從地圖的俯視圖開始:

真實再現

首先我們先嘗試確定地圖中的關鍵區域:

覆蓋重點區域

接著,讓我們嘗試簡化問題,減少在我們的開放世界地圖中實際可用的細節數量。

歐瑪噶!好醜哦!

現在,我們可以利用這些信息來制訂關係圖,以便從分子的角度來思考我們的地圖應該是什麼樣的:

分子圖

注意!這一點很重要,原因如下:

它有助於藝術團隊估算其場地美術資產的生產範圍(Scope)它讓關卡設計團隊得以保持關注於該場地到底有多大它防止了功能主義(Feature Creed)。如果你知道你的地圖上有哪些空間,就可以避免當你一覺醒來時,發現地圖上有一堆你沒有計劃好的隨機事件。

譯者:這裡本人並不是很確定Feature Creed是否是指建築學中的Functionalism。

這是關於布局的一個非常綜合的表示。

360度接近

此刻也是在你的布局中引入洋蔥層的好機會:

從理論上來說,開放世界應只能和外部密室相連。外部密室始終與開放世界和內部密室保持相連。而內部密室(困難層)只能連接到外部密室。

如果出於某種原因需要將其連接到開放世界,請確保它被一個上鎖的門所隔開。同時建議玩家通過審查(Check)/測試(Test)/挑戰(Challenge),從而進入紅色區域。紅色區域之所以是紅色是有原因的。

你要添加到布局中的層數,取決於你希望布局有多複雜。

門控

你還應該考慮在進入內部密室之前,通過一種讓玩家先探索外部密室層的方式來設置你的布局。

簡單的分子表達

另外,請考慮以下事實:如果一種策略失敗,玩家將可能會想要更改路徑,因此請確保你的布局具有很多條相互連接的路徑。

但是,請儘量不要把玩家弄的暈頭轉向,不知所措。

在這個階段,敵人的部署或多或少都是具有猜測性質的,但是我們可以根據他們的實際密度做一些安排。

根據你的目標層,NPC的密度可高或低。

在潛入遊戲中,每一層的有限佔地面積將影響NPC的密度。這將增加難度曲線。

同時請花一些時間鎖定你的主要和次要目標。

如果你遇到過任何地方,有著讓你難忘的特殊遭遇,請立刻添加:

目標放置

例如:

玩家需要潛入到建築群中,並在圓形劇場中的暗殺目標外面的聖所裡有顆汽車電池可以偷一些壞蛋在一個側面的院子裡餵食公牛類固醇,他們必須被阻止你甚至可能不得不在競技場中間與公牛搏鬥也許牛棚裡發生了一件什麼事,可以幫助你不被發現等等。

可能性是無止境的!

下一步我們將討論的是準備布局,讓它變成更專業的版本,專注於分鐘到分鐘的遊戲玩法[1]。

但這將會是另一個帖子的焦點。

譯者:關於該系列文章中所出現的分子,分子圖的概念,實質上在關卡設計中,分子等同於元素。可參考以下這篇文章,理解在理性關卡設計中,元素設計相關的內容。

原作者:Iuliu-Cosmin Oniscu

相關焦點

  • 創意十足的web布局及互動設計
    富有靈感和創意的設計與一般設計的區別在於,它不那麼容易被想到和實現,一旦它被實現,一個非常有趣並且迷人的網站就誕生了。網站幾乎每天都能見到,但是不是每一個網站你都會說「真希望我也能想到過!」
  • 交互規範:系統布局讓頁面模塊更統一
    通過定義頁面的模塊布局,讓用戶高效了解產品頁面框架結構的劃分,以及產品在各個平臺的體驗的一致性。本文主要圍繞統一畫板、網頁框架、模塊布局、典型頁面布局四個部分進行闡述,在項目中提前定義好這4部分將有助於協作的設計師輸出頁面模塊高度統一的頁面,希望對正在了解布局知識的你有幫助!
  • 什麼是設計——交互&UI
    編輯導語:網際網路產品設計主要指通過用戶研究和分析進行的整套服務體系和價值體系的設計過程,設計也分不同的方向,網際網路產品在設計過程中分成多個階段,每個階段是不同的設計活動;本文作者方向了設計的幾個方面,我們一起來看一下。一、什麼是設計1.
  • 互動設計是什麼?深入分析互動設計專業,附全球互動設計院校推薦
    隨著網際網路時代高速發展,越來越多的交互設備開始進入人們的生活,互動設計師就開始顯得愈發重要。據統計,即使是互動設計專業的應屆畢業生,月薪平均也在1萬以上,有2年以上工作經驗的互動設計師,月薪可達2萬5以上。互動設計儼然成為了設計領域一個炙手可熱的專業。那到底互動設計是什麼?哪些大學的互動設計專業最好?未來的就業前景又如何?
  • 互動設計 | 在互動設計領域裡,如何考研、成為大牛?一篇乾貨貼
    當然,互動不僅限於人與人之間,還可以發生在系統和系統之間,比如人和機器,人和環境,機器和環境,等等。這張圖能加深大家對這個學科年輕而混亂的印象(互動設計大概在五點鐘方向):所理解的互動設計,紮根於三大領域:人——心理學機——計算機/工程美——設計國內互動設計院校教育首先需要明確的是,國內的大學本科專業設置裡是沒有互動設計這一門的!那麼網際網路公司中做互動設計的的本科生是哪裡來的呢?
  • 抖音播放主頁互動設計分析
    眾所周知,互動設計是產品經理的必備技能,對一款產品進行互動設計分析,也是產品經理的日常工作之一。那麼對於網際網路產品來說,我們應該如何對其進行互動設計分析?選取的維度,關注的重點又有哪些?下文我以抖音播放主頁為例,說說我的看法。1.
  • 作為一名交互新人,在成長中Get的5點感悟
    設計團隊內合作作為新人,要主動向同事戰友請教,明確合作方式。通過溝通,我知道可以向用研同學了解產品各入口、按鈕的用戶數據,討論如何在設計中進行埋點;向做動效的同學請教特技的哲學;也漸漸明白文案怎樣寫才規範易懂;視覺同學需要何種形式的交互產出物,以及賣萌打滾請資深設計師review交互稿。
  • web交互中,如何區分彈窗、抽屜、跳轉新頁面?
    抽屜彈出的交互方式的操作成本和用戶使用心理負擔則小很多,比如「iOS人際交互指南」中的「Action Sheets」,「MaterialDesign」中的「BackDrop」,包括網頁端,Chrome瀏覽器中的添加標籤的交互方式,還有Antdesign中AntdesignPro預覽更換顏色和主題,他們使用彈窗是完全可以的,但是出於上述目的,使用了類似側邊彈出的交互方式
  • 基於PACT-P模式的社交網站互動設計策略研究【2】
    二、社交網站互動設計構成要素模型 (一)產品互動設計中的構成要素模型 在產品互動設計理論中,有一種被稱為產品互動設計構成要素PACT—P系統模型,即:互動設計主要因素由圍繞產品(PRODUCT)為中心的人(PEOPLE)、人的行(ACTIVITY)
  • 趙景| 從室內設計到互動設計,且把時光,融於夢想
    正是這個選擇讓她打開了一個新世界的大門,體驗到互動設計的無窮魅力,並有機會領略到世界五百強企業西門子的企業文化底蘊。比起室內設計、建築設計、平面設計,或是純粹的工業設計,互動設計在國內一直帶有一些神秘性。互動設計和人機工程學密切相關。在大多說人眼中,互動設計師是做界面做APP的,酬勞豐厚,且薪資上漲空間大,除此之外,其他一無所知。什麼是互動設計?
  • 一次帶你看完世界最TOP的互動設計專業學院!
    CMU作為綜合類大學,計算機專業與麻省理工大學齊名,並列全美第一,而且CMU大學非常注重信息現代化和資源共享建設工作,率先建立連接校園每臺計算機的網絡,也就是著名的「安德魯」校園計算機網絡,該網絡至今在全美高校中是最先進的。另外,為最大限度地實現資源共享,學校規定除一些承擔軍工科研項目需保密的實驗室外,所有實驗基地和設備向本校教師開放。
  • 品牌官網設計的交互應該怎麼做
    那麼基於這個交互動效,本期高端定製網站設計Angle就為大家來講講應該怎麼做品牌官網設計的交互。因為互動設計是面對大眾媒體的,目的是讓用戶能夠根據自己的喜好去操作整個系統的交互,從而可以讓用戶更加主觀的認同這個網站。隨著用戶的年輕化,傳統的網站設計只是非常的死板的操作已經遠遠滿足不了現在的用戶需求了,他們需要更多的是新穎獨特的操作,所以品牌網站中,用戶擁有自主性是一種趨勢。
  • 設計回歸本原!OriginOS給用戶帶來「獨特」交互方式
    要知道,該系統帶來的獨特UI美學設計,顏值在線不說,還能夠讓用戶打造屬於自己的個性化桌面風格,極具亮點。而讓廣大用戶更加驚訝的是OriginOS帶來的創新性交互方式,其與桌面風格一樣都可以進行自定義設置,讓用戶可以打造出獨一無二的交互界面,非常吸引人!
  • 〔Part 3〕Oculus Quest手部交互指南之互動設計
    下面映維網進行了相應的整理:交互在設計交互時,Oculus已經嘗試了多種條件。根據你設計的體驗類型,「Interaction Options(交互選項)」頁面列出了你可能會遇到的注意事項。瞄準光線或將手移向目標,然後捏抓對象。拇指和食指的觸碰感覺可以幫助彌補對象或組件的觸覺反饋不足。註:使用這一方法可以在近場組件和遠場組件之間實現更無縫的過渡,這樣用戶就可以捏抓並與任意距離的目標進行交互。
  • Facebook創建Habitat,一個極具世界真實感的模擬系統
    考慮到實際機器人在現實生活中的移動速度太慢,不能指望他們很快勾畫出現實環境。Facebook創建的Habitat可以構建足夠真實感的虛擬環境,以至於AI在導航中學習到的東西也可以應用於現實世界。戳右邊連結上 新智元小程序 了解更多!訓練一個智能體在複雜的3D世界中導航,在計算上是昂貴和耗時的。
  • 互動設計Studio | iF競賽:Design for Collaboration 為協作而設計
    幫助詹姆斯邦德在下一次拯救世界任務中所需的設計?2.  我們需要偶爾停止一下的設計?3.  2019年三星設計獎by iF – 為協作而設計:針對工作空間提出新型態的協作工具與智能解決方案以促進擴增實境體驗。4.  2019年名創優品設計獎by iF – 在2030年之前消除世界各地各種形式的貧困。
  • 向文杰:人機互動的終極形態是腦機交互
    大會上,Rokid副總裁、產品技術中心總經理向文杰做了《下一代的人機互動》主題演講。從第一臺PC出現,比爾蓋茨讓每個人辦公桌上有了一臺PC。接下來Smart Phone,賈伯斯推動了手機普及,接下來是什麼呢?
  • 新版《蝙蝠俠》曝光概念圖 蝙蝠車設計突出真實感
    近日,影片劇組在社交網站上公布了蝙蝠車的設計概念圖。這些設計圖稿從不同的側面展現了蝙蝠車的各種細節。整體而言,這一版的蝙蝠車的設計,取消了之前蝙蝠車的科幻感,取而代之的是一種真實感。那種粗糲的、原始的肌肉車的質感,可以說是撲面而來。按照計劃,《蝙蝠俠》的故事並不會聚焦在蝙蝠俠後期的經歷之上,而是會聚焦在布魯斯·韋恩的年輕時代,講述黑暗騎士和他的「惡棍畫廊」的故事。
  • 從交互層面探討:不一樣的App該如何設計?
    其次,對於以商業目標為根本的APP應用設計開發,設計風格的投入產出比並不高(遊戲依然除外),設計模式的流行以及交互方式的單一使得保守的設計投入產出更高。最後在現今的消費領域,功能主義盛行,界面設計中理性居於主導地位,設計風格顯示不是理性思考的首要考量目標。」
  • HCI互動設計留學-年薪百萬的交互專業有哪些學校可以申?
    互動設計專業的範疇主要是設計交互的產品(硬體)和規劃交互的服務(看不見的硬體,無形的交互)。 不只是名校及校友 Network 的效應,HCI 和互動設計類專業的學科屬性及教學方式就決定了,在就讀過程中就可以積累出比較豐富全面的作品集,有完整的 User Research,有豐富的 Visual Design,也會有跨領域的合作經驗,這不僅決定了求職的起點,也在一定程度上提升了人機互動工程師、互動設計師及產品經歷的職業天花板。