????《SVG小游戲大全》????
此前，我們?cè)凇秮?lái)玩玩玩玩玩玩玩玩玩玩玩玩??！》介紹了一批圈內(nèi)優(yōu)秀的 SVG 開(kāi)發(fā)作品。如今隨著 E2 編輯器（https://www.e2.cool/）的全行業(yè)覆蓋，已經(jīng)出現(xiàn)了不少純 SVG 編輯器實(shí)現(xiàn)的小游戲佳作，本期我們就來(lái)盤(pán)點(diǎn)一批行業(yè)內(nèi) SVG 小游戲天才級(jí)設(shè)計(jì)吧！
IP 向主題游戲
以近期熱門(mén)的《羅小黑戰(zhàn)記2》為例，JZ Creative Studio 發(fā)布了 SVG 小游戲關(guān)卡設(shè)計(jì)《【羅小黑】在線游樂(lè)園 (((o(*?▽?*)o)))》，共分三個(gè)關(guān)卡：
其中第一關(guān)和第三關(guān)可通過(guò) E2 編輯器實(shí)現(xiàn)，分別基于「密碼解鎖」組件和「長(zhǎng)按差速上移」組件排版。而這類 IP 向主題的創(chuàng)作往往可以結(jié)合 IP 劇情本身進(jìn)行交互設(shè)計(jì)策劃，同理《點(diǎn) 開(kāi) 即 玩 ← ↑ → ↓ 塞 爾 達(dá) 傳 說(shuō)》全部采用 E2 編輯器內(nèi)部組件，融合了「荒野之息」和「王國(guó)之淚」兩作的劇情開(kāi)展小游戲互動(dòng)，將多個(gè)經(jīng)典的游戲梗一一埋入，操作起來(lái)令人忍俊不禁：
本作的 E2 編輯器工程文件目前已由創(chuàng)作者開(kāi)放共享，如需作品草稿可在評(píng)論區(qū)參與留言互動(dòng)并索要，平臺(tái)管理員將與取得聯(lián)系，將草稿發(fā)送到指定 E2 編輯器賬戶 Draft 界面。
實(shí)體游戲數(shù)字還原
有的品牌在落地活動(dòng)宣發(fā)中，會(huì)采用將線下活動(dòng)轉(zhuǎn)換為線上模擬的方式直觀而生動(dòng)地呈現(xiàn)。在《點(diǎn)擊進(jìn)入：香奈兒 腕表游樂(lè)園》案例中，香奈兒上海線下展的多個(gè)現(xiàn)場(chǎng)體驗(yàn)活動(dòng)均以 SVG 交互方式巧妙表達(dá)，讓讀者提前模擬感受的同時(shí)，進(jìn)一步放大了好奇心：
同樣，該作品內(nèi)的互動(dòng)效果均由 E2 編輯器布局實(shí)現(xiàn)，其中「長(zhǎng)按敲錘」的排版策略令人拍案叫絕——以「零高容器」為框架，將「點(diǎn)擊擦除」與「幸運(yùn)抽簽-長(zhǎng)按式」疊加，有意缺傳一簽使得下層互動(dòng)漏出。同樣，如需作品草稿可在評(píng)論區(qū)參與留言互動(dòng)并索要，平臺(tái)管理員將與取得聯(lián)系，將草稿發(fā)送到指定 E2 編輯器賬戶 Draft 界面。
還有一類實(shí)體游戲的數(shù)字還原，是指將傳統(tǒng)實(shí)體物品的娛樂(lè)方式變換為 SVG 交互形式。如生活中常被我們把玩的氣泡紙，就在網(wǎng)易《絕 對(duì) の 無(wú) 聊 挑 戰(zhàn)（極 致 自 虐 加 長(zhǎng) 版）》中首次被數(shù)字還原。那么如何實(shí)現(xiàn)這樣的泡泡陣列組合呢？參考《「送你一張泡泡紙」》的如下排版方法：
又如 E2 編輯器著名的「娃娃機(jī)」組件，通過(guò) SVG 細(xì)膩演繹了實(shí)體娃娃機(jī)的互動(dòng)操作流程，抓取獲得一個(gè)隨機(jī)結(jié)果：
除此以外，在《地球上最無(wú)厘頭腦洞SVG交互圖文，們！》合集中，還有定制級(jí) SVG 案例如《 電 子 木 魚(yú) . e x e》、《（荔 枝）轉(zhuǎn) 運(yùn) 木 魚(yú) . e x e》和《 鯊 魚(yú) 玩 具.svg》等也屬于實(shí)體游戲的數(shù)字還原設(shè)計(jì)，由于其目前未獲得模板化授權(quán)因而不做詳述，如有需要可具體咨詢出品方微信 Zhuoya_Work 咨詢商務(wù)合作。
簡(jiǎn)單電子游戲復(fù)刻
有一類形式經(jīng)典、操作簡(jiǎn)單的爺爺輩電子游戲，目前通過(guò)純 SVG 也可以在圖文中實(shí)現(xiàn)。如 E2 編輯器「消消樂(lè)」UGC 組件就完全實(shí)現(xiàn)了這款電子游戲的配對(duì)消除邏輯：
除了麻將，你也可以將自己的品牌要素與該組件結(jié)合，如寶礦力水特的《福利解密局｜小寶這場(chǎng)生日會(huì)玩到next level了》中就應(yīng)用它實(shí)現(xiàn)了用戶對(duì)產(chǎn)品營(yíng)養(yǎng)成分的強(qiáng)化記憶：
“上下左右BABA？”，紅白機(jī)上的經(jīng)典方向操作也可以通過(guò)一定形式簡(jiǎn)化并引導(dǎo)用戶順利完成游戲過(guò)程。近期我們發(fā)布的《大 展 鴻 圖 .SVG ?? 游 戲 啟 動(dòng)！》就為用戶們展現(xiàn)了 E2 編輯器駕馭像素互動(dòng)游戲的逆天能力：
關(guān)于它的排版方法，我們?cè)诟咝C(jī)構(gòu)會(huì)員專屬的「英杰計(jì)劃」培訓(xùn)班中已做直播授課。如需作品草稿可在評(píng)論區(qū)參與留言互動(dòng)并索要，平臺(tái)管理員將與取得聯(lián)系，將草稿發(fā)送到指定 E2 編輯器賬戶 Draft 界面。
「雷電戰(zhàn)機(jī)」則是另一種經(jīng)典的 8-bits 游戲互動(dòng)形式，在《這是一枚，SVG小火箭！咻咻咻！》中我們主要通過(guò)「相對(duì)位移」這一個(gè)組件的反復(fù)應(yīng)用，演繹了中國(guó)載人登月工程環(huán)環(huán)相扣的技術(shù)細(xì)節(jié)：
更多游戲感體驗(yàn)
除了上述提到的幾種典型 SVG 小游戲創(chuàng)作模式，我們還可以通過(guò)如撲克出牌、地圖冒險(xiǎn)、畫(huà)板填涂、海報(bào)生成、盲盒抽取等交互為讀者提供游戲感體驗(yàn)。
同時(shí)推薦部分具有游戲感的特殊 E2 編輯器 SVG 組件，能與特定主題適配形成 SVG 小游戲效果：
滑動(dòng)解鎖漸變——拼圖游戲；我是誰(shuí)？——寶可夢(mèng)揭曉；黑科技點(diǎn)擊進(jìn)場(chǎng)-伸長(zhǎng)——打印門(mén)票；多熱區(qū)漸現(xiàn)——畫(huà)板填色；全局滑動(dòng)——線索收集；密碼解鎖——數(shù)字/字符解密；多圖穿梭放大——時(shí)空穿梭；可輸入文本——孔明燈心愿放飛；GIF控制器——貪吃蛇……
如果你還想了解更多 SVG 業(yè)內(nèi)諸位大神的游戲模式交互設(shè)計(jì)，推薦訪問(wèn)isvg.com 輸入「游戲」獲得更多檢索結(jié)果：
據(jù)悉，iSVG 是中國(guó)首個(gè)免費(fèi)公益的 SVG 代碼交互設(shè)計(jì)作品精品案例庫(kù)，杜絕批量無(wú)門(mén)檻地泛濫收錄，所有入選作品都經(jīng)過(guò)業(yè)內(nèi)專業(yè)評(píng)審考察。其他近期運(yùn)營(yíng)技巧專題推薦：
專業(yè)SVG交互設(shè)計(jì)創(chuàng)意靈感策劃指南如何查看已發(fā)表圖文的歷史編輯記錄？E2黑科技編輯器&秀米&135如何混合使用SVG？
文末互動(dòng)
你還希望 E2 編輯器展現(xiàn)哪些「小游戲」效果？歡迎在文章底部評(píng)論區(qū)留言說(shuō)說(shuō)的構(gòu)想！并可以索要本期文章提及的多款黑科技排版互動(dòng)組合的 E2 編輯器工程草稿。
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_(kāi)頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
暫無(wú)評(píng)論哦，快來(lái)評(píng)論一下吧！
全部評(píng)論（0條）