Claire Morwood 給所有人的 Bitsy 游戲制作教程 A Bitsy Tutorial (2017)
譯按
落日間始終期望能讓所有人都能享受創(chuàng)作游戲的快樂，就像先前寫的給所有人的 Game Jam 介紹《》中提到的那樣，游戲可以成為一種每個人日常的，個體化，輕量地書寫。在這個分享的中我演示了幾個超輕量的游戲創(chuàng)作工具，今天這份翻譯便是介紹其中演示的專門用于制作 像素 RPG 游戲的網(wǎng)頁端游戲引擎 Bitsy。
這個游戲創(chuàng)作工具，我相信任何人，如果你能夠跟隨下面的教程一步步進(jìn)行操作，我相信你在半個小時(shí)之內(nèi)，就能夠上手，并且無需代碼，無需任何費(fèi)用（開源免費(fèi)）就能制作出一個游戲來，甚至可以直接上傳 Github 或 直接與你的家人朋友分享（也歡迎大家把自己創(chuàng)作的在評論區(qū)分享）。
「開發(fā)游戲變得不再具有挑戰(zhàn)性，你可以在幾分鐘內(nèi)做一款游戲，盡管做出來的內(nèi)容和雅達(dá)利的老游戲差不多，但我的確做出了一個游戲?！?/span>
國內(nèi)業(yè)界對Bitsy少有介紹，倒是極客公園有寫過文章談過，作為工具的背景及國外社群的補(bǔ)充值得一讀《》，其中有一章標(biāo)題是這樣寫的：像寫「俳句」一樣做游戲。
我也玩過文中提到了的一個叫做 的Bitsy 游戲，有人這樣評價(jià)道：
「Cecile Richard 開發(fā)的 Novena 是最讓我感動的 Bitsy 游戲之一。這是一首關(guān)于海洋的詩，只有幾分鐘游戲時(shí)間，從一座有光的教堂開始，當(dāng)你和大海對話時(shí)，你們的交互變成了這首詩歌。它的故事如此簡單，但人人都能從游戲中找到對于海洋、人生、寬容、傾聽等元素的不同理解，假如這是在 Unity 中制作，它也許會有更精美的圖形，但我認(rèn)為 Bitsy 的單純和簡潔會讓玩家專注于作者要傳達(dá)的重點(diǎn)?！?/span>
Claire Morwood
Claire 是一位自學(xué)成才的游戲設(shè)計(jì)師、程序員和藝術(shù)家。她目前正在開發(fā)Asterism，這是一個以太空為背景的互動音樂專輯電子游戲。在此之前，她與她的公司3-Fold Games合作開發(fā)了《Before I Forget》，一個關(guān)于一個患有早發(fā)性癡呆癥的女人 Sunita 的敘事探索，在游戲中，玩家通過與整個房子里的物品互動，看到她的想法和與之相關(guān)的記憶，從而了解 Sunita 的生活。此作獲得 BAFTA 提名。
Claire 對游戲作為創(chuàng)造性的個人表達(dá)媒介也很感興趣，并對 Bitsy 等游戲開發(fā)工具很著迷，這些工具為沒有游戲開發(fā)經(jīng)驗(yàn)的人提供了制作和分享他們的游戲的方便途徑。她為人們舉辦活動和研討會，學(xué)習(xí)如何制作游戲，同時(shí)也非常熱衷于游戲聚會，自2017年起在布里斯托爾舉辦 Fuse Jam。她也是一名藝術(shù)家，對像素藝術(shù)和粘土動畫特別感興趣，并喜歡在游戲中嘗試新的藝術(shù)風(fēng)格。
翻譯已獲得原作者授權(quán)
原文鏈接：https://www.shimmerwitch.space/bitsyTutorial.html配合閱讀打開的 Bitsy https://make.bitsy.org/
A Bitsy Tutorial
什么是Bitsy？
Bitsy 是 上的一個基于網(wǎng)頁的游戲制作工具，由 制作，你可以打開 https://ledoux.itch.io/bitsy ?來直接使用它（這個鏈接更直接 https://make.bitsy.org/）。
這是一個有著活躍和不斷增長的社區(qū)的工具，成百上千個游戲被制作出來，從簡短的個人故事到復(fù)雜幻想世界的探索，以及兩者之間的一切。
人們非常喜愛它，恰恰是因?yàn)樗南拗?。有限的調(diào)色板、迷你的像素畫布和簡單的機(jī)制使得人們在其中創(chuàng)造的游戲可以有非常集中的想法和思路。每個像素、單詞和顏色的決定都有很大的分量，在沒有其他噪音的情況下能傳達(dá)很多東西。但是，一個8x8像素的網(wǎng)格為每塊瓷磚提供了1.8446744 x 1019 種可能的選擇。這哪有多大的局限性呢？
它的使用也超級簡單和令人滿意，不需要編寫任何代碼。它的表現(xiàn)力很強(qiáng)，基本上每一個Bitsy游戲最后默認(rèn)都是非常迷人的。
我可以在Bitsy中制作什么？
Bitsy 對于短篇敘事游戲、小片段（vignette）游戲（個人或其他）或迷你冒險(xiǎn)來說很不錯。如果你需要出發(fā)點(diǎn)，也許可以想想生活中你想講一個故事的一件事或一個地方，但你的選擇是無窮寬廣的，去做任何感覺正確的事吧！
如果你需要靈感，itch.io上有很多優(yōu)秀的 Bitsy 游戲。Lorenzo Pilia[6]?做了一個?非常棒的Bitsy游戲列表[7]，并定期更新。我也會在本教程末尾列出了我自己喜歡的一些。
介紹足夠了，我如何制作一個Bitsy游戲？
我很高興你這么問!！首先，去 https://ledoux.itch.io/bitsy。你會看到的第一件事就是這個屏幕。
花點(diǎn)時(shí)間看一下各個面板，并展開「關(guān)于 about」部分。
旁邊有一個「工具」按鈕，點(diǎn)擊它看看有哪些其他選項(xiàng)。（譯注：建議選擇 Title 右側(cè)的 Tool 面板-設(shè)置，將語言改為簡體中文）接下來，回到「房間 room」面板并按下播放鍵，在游戲中走動，看看一個基本的Bitsy游戲是如何工作的，馬上你就應(yīng)該看到你剛剛輸入的標(biāo)題了!游戲的主要元素是這些：
一個主角 Avatar ：你的可玩角色。你可以用方向鍵操控它走來走去，并看看其他角色有什么話要說
瓷磚 Tiles：不可交互的布景，可以設(shè)置成主角不能通過的墻磚（wall-tiles）。
精靈圖 Sprites：交互式的布景和非玩家角色，可以有對話。
點(diǎn)擊「停止 stop」來退出游戲模式并且繼續(xù)編輯你的游戲。
畫些像素
讓我們來畫點(diǎn)角色！確?！府媹D paint」工具是打開的：如果你看不到它，打開「工具 tools」菜單，確保它被選中。如果你打開了很多工具面板，你可以在主屏幕上拖動它們來重排它們。
通過繪畫工具的「主角 avatar」一欄，你可以通過點(diǎn)擊每個方塊來切換像素顏色（其實(shí)就只有上色/不上色 兩個狀態(tài)）來編輯默認(rèn)角色。我畫了一個生動的自己的形象作為主角，請隨意畫你想畫的東西，你會看到在「房間 room」面板中的人物會自動更新。切換網(wǎng)格的開關(guān)以獲得像素輔助線。
現(xiàn)在點(diǎn)擊「動畫 animation」，你的主角就開始閃爍了。開始畫你的第一個2幀Bitsy動畫吧。
點(diǎn)擊第二幀來編輯它，你會看到另一幀的透明覆蓋（譯注：動畫中稱之為洋蔥皮 Onion Skin），如果你喜歡的話，可以作為參考。如果你只想為一個簡單的動畫編輯一兩個像素，這真的很有用。在你的 8x8 網(wǎng)格中，你可以做出一些非?？岬脑O(shè)計(jì)選擇來表現(xiàn)你的主角。你想展示的最重要的特征是什么？什么定義了這個角色？如果有合適的上下文，一兩個像素就能夠表示出驚人數(shù)量的事物。不過現(xiàn)在，我只想向你揮揮手，嗨!
讓我們再畫幾塊瓷磚，添加到房間里。
點(diǎn)擊「畫圖 paint」面板上的「瓷磚 tiles」標(biāo)簽。用你編輯主角的同樣方法編輯默認(rèn)瓷磚，你會看到它在房間面板中自動更新。
要制作一個新的瓷磚，點(diǎn)擊瓷磚圖像下的+符號。你會得到一個空白的瓷磚，可以隨意編輯。要在你制作的瓷磚之間進(jìn)行切換，點(diǎn)擊圖片下方的左右箭頭。現(xiàn)在點(diǎn)擊放大鏡，「尋找圖畫 find drawing」面板就會打開，上面有一個網(wǎng)格狀的瓷磚列表。
編輯房間里瓷磚的方式與編輯瓷磚中的像素相同：點(diǎn)擊一個瓷磚來移除它，然后再點(diǎn)擊就能把目前在「尋找圖畫 find drawing」選擇的那個瓷磚放置在面板中。
在「畫圖 paint」工具中，你也可以復(fù)制和刪除瓷磚，并添加動畫。
試著在你的房間里制作和放置一些不同的瓷磚類型！(點(diǎn)擊和拖動非常有用。）
要查看的最后一個按鈕是「墻壁 walls」按鈕：你可以切換這個按鈕，使瓷磚無法通過。一個重要的提示是，設(shè)置墻壁只適用于一個房間，除非你選擇「適用于所有房間」（所以如果你突然發(fā)現(xiàn)你可以在游戲中穿墻，這就是要檢查的第一件事！）。
現(xiàn)在試著玩你的游戲，看看走動的感覺如何吧！
目前，我的游戲是我在一個空房間里和一只貓說話，雖然我不討厭這想法（說實(shí)話，聽起來挺吸引人的），但我可能會為我想做的游戲做些改變。
要編輯一個精靈，請點(diǎn)開「畫圖 paint」面板上的「精靈 sprite」標(biāo)簽。你可以編輯默認(rèn)的貓，或者保存它并制作一個新的精靈，它將以與瓷磚相同的方式出現(xiàn)在「尋找圖畫 find drawing」面板上。制作一個新的精靈，并添加你想和它一起出現(xiàn)的文字。
點(diǎn)擊你想瓷磚出現(xiàn)在的房間。需要注意的是，任何精靈在每個房間只能有一個實(shí)例（instance），如果你點(diǎn)擊其他地方，它們就會出現(xiàn)在那個地方（這意味著，如果你想在多個房間使用同一個精靈，你必須復(fù)制這個精靈，把一個副本放在一個房間，一個副本放在另一個房間）。
在這里，我改變了我的主角的起始位置，在「尋找圖畫 find drawing」面板中選擇它，然后點(diǎn)擊我希望它在房間里的位置。一旦你添加了你的新精靈，再玩一次游戲，走到它面前，就可以看到你的文字了！
小提示：對于一個空白的新房間，可以嘗試制作一個非常簡單的瓷磚（甚至只有一種純色），擺出房間的大致布局，比如可以指出玩家將走過的路徑或關(guān)鍵物體和場景的位置。然后逐漸替換瓷磚，并將它們移動直到合適為止（這也是我做任何多瓷磚布景的方法）。
出口！
如果你的房間和我的一樣，那么它看起來是需要通向其他地方。你當(dāng)然可以在一個房間里做完一個完整的 Bitsy 游戲（見文末例子），但是「出口 exits」（房間之間的過渡）是 Bitsy 的核心元素之一，在我看來，也是其中最有趣的探索部分之一。
讓我們從一些基礎(chǔ)開始，只是讓玩家從這個房間的邊緣走進(jìn)一個新的房間。
點(diǎn)擊房間下方的「房間工具 room tools」。這里有些有用的導(dǎo)航和視圖工具，值得探索?！父褡?Grid」 按鈕可以切換瓷磚網(wǎng)格的開關(guān)，使你更容易看到房間里發(fā)生的事情?！笁?Wall」按鈕會顯示所有被標(biāo)記為「墻」瓷磚的遮罩，方便快速檢查碰撞區(qū)。要建立一個新的房間，可以點(diǎn)擊右上方「+」按鈕，如果你想保留你的瓷磚設(shè)計(jì)，也可以旁邊的復(fù)制按鈕。用箭頭按鈕在房間間切換。
讓我們先放一個出口，這樣你就可以看到它是如何工作的：如果你想的話，你可以改變位置，刪除它，或之后添加更多。（譯注：最新版 Bitsy 布局有所調(diào)整，下方幾段有改動）
點(diǎn)擊房間板塊底部的「出口&結(jié)局 exits and ending」，然后在新出現(xiàn)的面板上點(diǎn)擊「+」。你可以選擇想要添加的出口類型：雙向的「返回出口」，單向的「one-way exit」，還有「結(jié)局」。然后你可以看到雙向傳送門的位置。
把這些出口看成是你主角的傳送門是個好辦法。出口可以通往任何地方，甚至通向同一個房間。據(jù)我所知，可放置的出口數(shù)量也沒有限制。一旦放置了好目的地，啟動游戲，看看它如何工作。
要編輯一個出口，在房間面板上點(diǎn)擊它的瓷磚來選擇它，編輯窗口會重新出現(xiàn)，你可以點(diǎn)擊下方的移動然后選擇一個位置，或直接拖動它到想要的瓷磚上。你可以選擇「出口&結(jié)局 exits and ending」面板上方的垃圾桶按鈕來刪除你選擇的出口。試著放置和編輯幾個出口，直到你對這個過程感到舒適。
在放置出口時(shí)需要考慮它們會如何影響玩家的方向感。如果你引導(dǎo)他們離開房間的右側(cè)，卻出現(xiàn)在下一個屏幕的頂部，他們可能會迷失方向：為什么移動的方向突然改變了？在房間里尋找自己的人物，這可能會讓人感到挫?。ㄎ业囊粋€游戲中有幾個房間是這樣......）。然而！也許這就是你想要的效果？你的游戲是關(guān)于迷失和困惑的嗎？也許這就是強(qiáng)調(diào)這一點(diǎn)的好方法?；蛘?，你甚至不想讓玩家意識到他們已經(jīng)換了房間？
有很多關(guān)于出口的選擇，以及如何使用出口的很好例子（詳見文末鏈接，因?yàn)榫瓦@個可以聊好久）。
另外，確保出口的位置足夠明顯（除非這是你游戲的一部分），不得不尋找繼續(xù)游戲的道路是種令人挫敗的體驗(yàn)。另外記得按照需選擇單向或者雙向的普通出口。
只有三種顏色？！
現(xiàn)在可能是時(shí)候?yàn)槟愕南聜€房間多做幾種瓷磚了，但首先我將介紹一下調(diào)色板，以便你能知道它們?nèi)绾喂ぷ鞯?，并融入你的新房間中。
在頂部的工具中，確?！割伾?colors」被選中。你會看到可編輯的3種顏色的調(diào)色板，以及它們在游戲中的含義。你可以開始編輯默認(rèn)的調(diào)色板，或者如果你想保留這個調(diào)色板，通過點(diǎn)擊+號創(chuàng)建一個新調(diào)色板，然后編輯新的。要看你的新調(diào)色板在游戲中的樣子，從「房間 room」面板底部的下拉列表中選擇你想要的調(diào)色板。
你可以為每個房間設(shè)置一個調(diào)色板，所以3種顏色的限制并不像它聽起來那么嚴(yán)格。當(dāng)你選擇你的顏色時(shí)，考慮一下諸如場景的光線：顏色是暖的還是冷的？是否應(yīng)該有大量的對比？試著保持背景色不變，改變瓷磚顏色的亮度，以獲得一些很酷的效果! 我將在最后添加一些鏈接，其中有一些有趣的顏色使用實(shí)例。
如果你卡住了，你可以試試像 Paletton[8] 這樣的網(wǎng)站，在那里你可以玩轉(zhuǎn)色彩方案。你也可以在 colorschemer[9] 這看到一些有趣的配色。
就快結(jié)束了
在你添加了所有你想要的精靈、瓷磚、房間和對話之后，你可能想要一種方法來結(jié)束你的游戲（雖然，這真的是可選的）。
選擇「結(jié)尾 endings」工具，輸入你想要的結(jié)尾文本，然后以與出口相同的方式放置它。你可以有任何你想要的結(jié)局，并把它們放在你想在游戲中的任何地方。
玩一遍你的游戲，欣賞一下自己的作品吧！
下載/保存你的游戲
有幾個最后的工具我還沒有涉及。第一個是「錄制動圖 record gif 」面板，它的作用正如它所說：你在游戲模式下，按「開始錄制」，移動到你想錄制的序列，然后按「停止錄制」。它將只記錄你移動的時(shí)間，所以不用擔(dān)心時(shí)間點(diǎn)的完美。然后你可以下載 GIF 來做你想做的事！
你也可以在「下載 download」面板中下載游戲的 html，這樣你就可以把它上傳到 itch.io[10]（并提交給每月的 Bitsy jams?。?。
你可以設(shè)置背景顏色，設(shè)置導(dǎo)出游戲的尺寸（512px對大多數(shù)來說很好了）。
「游戲數(shù)據(jù) game data」面板為你提供了游戲本體的文本版本（我總是在開始一個新項(xiàng)目之前把它復(fù)制并粘貼到一個文本文件中，以備不時(shí)之需）。如果你有興趣的話，可以看一下這些數(shù)據(jù)，你可以看到你在這里做出的每一個決定!
我想做更多的游戲！
如果你對你的游戲感到滿意，已下載并保存，準(zhǔn)備繼續(xù)前進(jìn)：點(diǎn)擊「新游戲 new game」按鈕來開始一個新的游戲吧！如果你刷新頁面或關(guān)閉瀏覽器，你會打開正在工作的任何Bitsy游戲的最近版本。但是，一旦你開始了一個新的游戲，除非你已經(jīng)保存了游戲數(shù)據(jù)，否則要找回游戲就不那么簡單了，所以要確保你已經(jīng)準(zhǔn)備繼續(xù)前進(jìn)，當(dāng)你準(zhǔn)備好了，就盡情創(chuàng)作吧！
教程游戲的游戲數(shù)據(jù)
我把寫這個教程時(shí)制作的游戲數(shù)據(jù)放在這里，如果有人想玩的話：它有一個有趣的房間切換，你可以看到它是如何工作的（雖然，它實(shí)際上看起來有點(diǎn)夸張，因?yàn)槲也坏貌粡?fù)制大量的精靈來完成它，而且每個房間至少有4個出口，但是，它可以做到這樣?。?。哦，你還會注意到有大約80個相同的精靈，那是為調(diào)色板房間準(zhǔn)備的：我的意思是，不要像我這樣做，找到一個更好的方法來做一些更酷的事！) 這里是游戲數(shù)據(jù)！[11]
教程游戲體驗(yàn)地址 Tutorial[12]
額外的Bitsy提示！!
精彩的Bitsy社區(qū)創(chuàng)建了一個Wiki，其中包含了粉絲制作的 Bitsy 額外功能的提示和特殊做法（hacks）。
我已經(jīng)準(zhǔn)備好探索了...[13]
很酷的游戲的例子
我想分享一些我過去特別喜歡的 Bitsy 游戲的例子（今天是2017年10月7日，作為對所有驚人的未來 Bitsy 游戲的免責(zé)聲明，我以后難免會忘記加入這個列表），那些我在思考自己的游戲時(shí)發(fā)現(xiàn)的特別有啟發(fā)的作品。
有趣的敘述：W.I.P https://rhythmlynx.itch.io/wip 一篇自傳，也是我的教程游戲的靈感 https://arcadim.itch.io/local-network 這個游戲很有深度。
令人驚奇的房間過渡：https://seansleblanc.itch.io/rain 過渡可以是時(shí)間，也可以是空間 https://saranomy.itch.io/ihadb 看起來很簡單，直到你想起它的制作過程
有趣的人物角色：https://cephalopodunk.itch.io/silence-would-be-better 你是一個收音機(jī)https://seansleblanc.itch.io/i-wonder ?傾聽人們的想法https://acgodliman.itch.io/tomb-raider 考古發(fā)現(xiàn)
視角 Perspectives https://jctwood.itch.io/thirdcrypt - 第一人稱 https://night-driver.itch.io/day-in-the-life - 滾軸式 https://rarelikeaunicorn.itch.io/penroses - 正交視角
使用其他游戲類型：https://tencow.itch.io/metrodungeon - 有一個有趣的戰(zhàn)斗機(jī)制 https://joshavanier.itch.io/porte - 一個很酷的解謎游戲！https://ebeth.itch.io/slow-growing - 一個模擬農(nóng)場！
使用音頻！這仍然讓我驚訝：https://triage.itch.io/waking-up-while-the-sun-sets - 美麗的背景音 https://candle.itch.io/no-destination - 環(huán)境聲音效果
漂亮的美術(shù)：https://itch.io/g/samkeeper/moth - https://supiket.itch.io/tusanhomichi - https://hyperstructure.itch.io/a-secret-bitsy-jam
用 Bitsy 做的實(shí)驗(yàn)。https://jctwood.itch.io/tunnel - 雙倍Bitsy!
單一房間的游戲: https://seansleblanc.itch.io/running-late - https://cephalopodunk.itch.io/zen-garden-portland如果你有興趣，
你可以在https://claire1605.itch.io/找到我的游戲。你也可以在 https://twitter.com/shimmerwitch 找到我。
同時(shí)感謝Mark[14]幫助我編輯這篇文章，并提供了一些很好的建議!
當(dāng)然，還要感謝?Adam[15]?制作了 Bitsy 和圍繞著它的整個驚人的社區(qū)!
譯注：此外我的友人 MITOO 在這次的機(jī)核Booom Jam上用Bitsy制作了作品《普通的一天[16]》，也歡迎大家去體驗(yàn)，一個很棒的作品！他補(bǔ)充了一些他在創(chuàng)作過程中的參考資料：Bitsy 的對話判斷邏輯 Overview[17]??，添加背景音樂 https://candle.itch.io/bitsy-audio ，第三方工具?Borksy Game Hacker[18]??，還有他推薦的 Bitsy 的 Discord 社區(qū)，你可以在官網(wǎng)找到 https://bitsy.org/#0,0
參考資料
[1]讓游戲成為它自己:?https://mp.weixin.qq.com/s/UpNeuYsp7w5b-t74R0Kidg
[2]itch.io:?http://itch.io
[3]Novena:?https://haraiva.itch.io/novena
[4]itch.io:?http://itch.io
[5]Adam Le Doux:?https://twitter.com/adamledoux
[6]Lorenzo Pilia:?https://twitter.com/LorenzoPilia
[7]非常棒的Bitsy游戲列表:?https://itch.io/c/201121/bitsy-faves
[8]Paletton:?https://paletton.com/
[9]colorschemer:?https://twitter.com/colorschemez
[10]itch.io:?http://itch.io
[11]這里是游戲數(shù)據(jù)！:?https://www.shimmerwitch.space/Tutorial_GameData.txt
[12]Tutorial:?https://shimmerwitch.itch.io/tutorial
[13]我已經(jīng)準(zhǔn)備好探索了...:?http://bitsy.wikia.com/wiki/Bitsy_Wiki
[14]Mark:?https://twitter.com/ragzouken
[15]Adam:?https://twitter.com/adamledoux
[16]普通的一天:?https://www.gcores.com/games/81381
[17]Bitsy 的對話判斷邏輯 Overview:?https://www.youtube.com/watch?v=IbgZPCdkY2U&list=PLlXuD3kyVEr7s1qLkKSC2nKXiZFFZsfSz
[18]Borksy Game Hacker:?https://ayolland.itch.io/borksy
日 | 落譯介計(jì)劃? 是媒體實(shí)驗(yàn)室落日間對一些有助于思考游戲/電子游戲的外文文本翻譯和推薦/索引計(jì)劃。（點(diǎn)擊原文或查看網(wǎng)站?xpaidia.com/sunset-project/）
感謝支持落日間的朋友們！
歡迎贊賞或贊助落日間
