GitBubble 原型設計師來跟你聊聊這個小遊戲的那些事!

2021-02-25 GitCafe

2014 年 12 月 23 日下午四點,GitCafe 聖誕暖心之作——GitBubble 正式上線,小遊戲推出以來受到了很多朋友的喜愛,大家都紛紛發送截圖至微信後臺參與我們的帝王至尊大禮包的抽獎,我們今天早上也抽出了三位幸運者,並與他們取得了聯繫,而每一位參與我們活動的朋友都可以得到 GitCoin 作為獎勵!


當然想要參與我們聖誕大禮包,也有另外一種方法,詳情請見 GitCafe 微信訂閱號歷史消息中的「再見 2014,你好 2015」的相關文章。


在聖誕到來之際,首先祝各位小夥伴聖誕快樂,希望你能喜歡我們的這份聖誕禮物,感謝各位對我們的支持。


今天,我們邀請到了這款遊戲最初的原型設計者 George 來跟我們一起聊聊關於 GitBubble 的那些事兒~

寫在GitBubble上線之後

「在一個晚上,我的母親問我,今天怎....麼不開心?」


「我說在我的想像中,有一個小遊戲,摩擦摩擦....」(神經病=_=|||)

事情是這樣的,2014 年 11 月底的某一天傍晚,我正在電腦前思索如何增長我們 GitCafe 的微信粉絲數,一直一來,我們 GitCafe 的微信公眾號粉絲數其實徘徊在 2000 左右,基本上我們的粉絲每天僅保持著小幅度的增長。在我們的「程式設計師會生活」系列專題面世之前,我們在微信的內容運營上不是這個活動就是那個活動的信息發布,訂閱我們微信公眾號的小夥伴也是知道這點的。

沒錯,可以說是相當的單調、枯燥。而此時距離 2014 年的聖誕節恰好還有一個月。

「我們 GitCafe 是不是可以來一發什麼有意思的東西呢?」

伴隨這個想法,我腦子裡突然就回想起當年的一個奇葩遊戲——「圍住神經貓」,這個遊戲上線 48 小時以來,PV 達 1026 萬,IP 達 241 萬,而它的開發時間僅一天半,美術一人,程序一人。

想想就 shi 了是吧,當時我內心的真實心理活動是這樣的:「我們也來做一個小遊戲看看咯,試試看病毒營銷怎麼樣?不管最後它會不會火會不會有效,試試總不會有錯的咯!」 而事實上呢,我在加入 GitCafe 之前做了兩年的 Java 程序汪,來 GitCafe 之後才轉型作了市場,在這之前對於什麼是市場並不沒有深刻的認知,對 「病毒營銷」 這個名詞都也只是 「大概就是那麼回事兒」 的水平。可是這些都無法抑制我心中的一團熱火,感覺這件事,在這個時間點,我們應該去做,而且相信一定會做得好。

懷揣這股熱情我馬上在一張 A4 上手繪了一個簡陋的效果圖,並寫了幾個大概的規則。我們的老大 Thomas 和 市場總監 Richard 看完草圖並聽完我的想法後也表示了支持,並示意鼓勵我們放手去做。(這裡也要感謝託尼瑪在工作上給予的極大自由度)。

第二天我帶著那張原始的草圖把我的想法告訴了 G-Room 的小夥伴們(G-Room 是 GitCafe 內部的神 (xie) 迷 (jiao) 組織,有機會下次給你們介紹),他們也表示了強烈的支持。而特別幸運的是,我們的前端工程師 Ryan 具有相當豐富的移動端開發經驗,開發一個基於 Html5 的遊戲對他來說根本就不是個事兒。當天晚上我開始畫起了 GitBubble 的原型圖。但畢竟我不是作設計出身,再加上 Ubuntu 狗找不到什麼好的原型設計軟體,所以...我是用金山的 WPS Presentation 畫的,是的,就是這麼任 (diu) 性 (ren)。

大家可以看下當初的原 (cu) 型 (cao) 設計:

這裡有個小插曲:為了給我的 PM 演示我到底要什麼效果,我不得不在 Presentation 裡一個個加好動畫效果,使它看起來像那麼回事兒,下面是當年的效果(說多了都是淚)。



視頻地址:

http://v.qq.com/page/p/1/6/p0143yorw16.html



第二天我拿著這套 Presentation 去給 Ryan 演示效果,獲得了肯定的回覆 「能做,不難。」 接下來的事情就像是一場線下的 Hackathon 那樣,我拿著我的 idea 和原型依次說服了我們的前端王子 Ryan、型男插畫師 Kawi 來作我的搭 (da) 檔 (ye)。當然,一個項目要進行的順利需要一個 PM,我厚著臉皮邀請其幫助我在項目任務分配及進度管理上多費點心。


這裡要再次感謝我們的前端小王子 Ryan,那個時候他還在忙於我們 GitCafe Enterprise 版本的前端工作,但是在看完 Presentation 後沒幾天,他就做出了第一個 GitBubble 原型,你們感受下。

大家其實已經可以看出這個原型雖然還非常樸 (chou) 素 (lou),但是在遊戲機制上已經初見雛形。為了豐富整個遊戲的質 (B) 感 (ge),免得上線上被大家吐槽成過於 low 的遊戲,我又對於一些規則做了細化,這裡給出部分設計文檔內的內容,由於我們 GitCafe 團隊成員骨子裡那股對產品質量的追求,其中有部分內容已經和現在大家手裡玩的 GitCafe 有所出入:

規則:

戳破(手指點擊)帶有 Git/GitCafe 命令的泡泡即可得分

點擊任意帶有 GitCafe 命令泡泡 + 100分

戳破空白泡泡會扣減時間

目前設定 - 1s(所以玩家可以選擇犧牲時間來戳破若干白色泡泡 有機會去戳另一個帶有相同命令的泡泡獲得加成得分)

點擊白色泡泡沒有分數(或者扣50分 這個在模塊裡先做成 - 0 分就好)

連續戳破相同有效泡泡會得分加成

得分公式 f(cnt) = 100 × 2cnt-1

cnt: 同命令泡泡連擊數(所以靠相同泡泡刷分能很厲害!)

吃到帶有 GitCafe 會加時間

目前設定 +5s

泡泡會從小變大,最後會自動爆炸

泡泡變大速度會變快(意味著爆炸會越來越快)

f(s) = 2s / 2

s: 泡泡存在時(秒)

隨機出現 Shake 事件:

Shake 事件出現時,其他事件暫停:

泡泡出現、變化的速度會變得很慢不會出現、變大、消失

計時會停止

Shake 事件得分:

上下晃動手機

得分公式:f(times)=10 × 2times

times=Shake 期間 手機晃動次數

此時需要搖晃手機進行刷分

Game Over 後出現的界面:

a). [關注 GitCafe ]:引導用戶關注 GitCafe 微信公眾號

b). [曬一曬]:曬分數到朋友圈

c). [再來一發]:重新開始

……..


在對這些細節做了進一步的規範化後,GitBubble 的可玩性又上升了一個檔次,但是我們的界面依然很樸 (chou) 素 (lou) 對不對?

所以說,人有時候不得不承認自己是多麼的 Too young, too simple, sometimes naive!

那天上午看到 Kawi 給出下面 2 張圖的瞬間,房間裡每個人嘴裡只蹦出了兩個字—— 「臥——槽——!」,你們再和當初我設計的原型比較下,是不是有股屌絲逆襲高富帥的感覺。

慢慢地,Tips 畫面、泡泡爆炸效果、得分效果、Shake 界面動畫、結束畫面.這些元素一個個從 Kawi 神奇的腦袋中跑到了現實,再由 Ryan 以一個個 document.getElementById() function 去賦予生命。由於我們的素材非常精美,所以我們又不得不得對運行效率問題表示擔憂。我們不斷的去尋找各類手機作性能測試,雖然在主流機型上上表現非常不錯,但是在一些老舊機型上一些動畫效果並不能很好的展示,對於這些用戶我們真的表示非常抱歉,我們尋找了很多方法試圖做到優雅降級,但很遺憾的是對於那些過於老舊的機型—— 「臣妾真的做不到啊 T^T」。

….

很快,時間來到了 2014.12.19 。

這是一個值得紀念的日子,GitBubble 實裝了所有的得分、扣分、加時間、Shake 事件的功能,僅分享功能尚未實裝,這意味著什麼?一個最最接近完整版的 GitBubble 完成了!


我異常興奮地拿著這個版本的 GitBubble 給幾個同事去試玩,其中最厲害的那位玩出了當時的最高分 31W。


但是問題也來了:

點擊泡泡後,得分在泡泡內顯示,導致 「戳破」 的效果有延遲

增加時間的 GitCafe 泡泡與普通泡泡無差異,不具備強烈的用戶品牌認識度

本因作為彩蛋出現的 Shake 事件刷分收益過高,遠高於戳泡泡收益,影響平衡,還不如叫 GitShake……

…….

——系列的問題擺在我們面前,怎們辦?


「怪我咯?」 各個改呀!

作為程式設計師出身的我非常理解 PM 汪頻繁更改需求的感受,當時真的生怕我剛一開口向 Ryan 提需求就被回一句 「U can u up. No can no BB」 -_-|||。但是我們的前端王子 Ryan 非常爽氣地就開始著手修改代碼,並告訴我現在就是讓大家多挑刺,多挑刺多修改多迭代才能讓我們的產品是拿得出手的!碰到這樣的程序猿還有什麼好說的,我要是個女的分分鐘給他生孩子啊!

晚上下班的時候我在地鐵裡再次打開我們的 GitBubble,又有了新的意外,GitBubble 的素材大小將近 1MB,地鐵裡的信號基本只能維持 10 幾 K 的速度,甚至還有部分 CSS 加載不完全導致畫面奇葩無比的情況。但你要知道地鐵恰恰是我很看中的一段碎片時間,地鐵行徑兩站平均花費 2min,而一局 GitBubble 的遊戲時間正好處在 [1,2] min 這個區間之內。

怎麼取捨?

無奈,我再次詢問 Ryan 和 Kawi 是否可以進一步壓縮素材材質尋找一個素材精度和素材體積的平衡點。當時 Ryan 的一句話立刻打消了這個念頭——「我們做的是一個遊戲,是一個有質量的遊戲。」 真是醍醐灌頂,確實,我們寧願讓我們的玩家多話幾秒鐘下載好素材去體驗一個有厚度的遊戲,也不願意隨隨便便塞給用戶一個粗製濫造的小作坊作品。在產品質量的打磨上,無論是對於 GitCafe 這個主線產品還是對於 GitBubble 這個支線附屬物,我們都同樣重視,這是我司逼格。

你們可能以為事情到這裡就 Happy Ending 了,那句話怎麼說來著:理想是豐滿的,現實是骨感的。

2014.12.23 冬至

我們計劃的上線時間是 2014.12.23 下午 4 點,或者說是對外公布的時間更加準確。我在 22 號的下午開始陸續聯繫了幾家關係不錯的小夥伴希望上線後能幫我們推一下這個小遊戲。作為我們 GitBubble 雲主機服務的提供商 UCloud 自然成為重點內測夥伴。在暗搓搓的保密協議下,UCloud 的小夥伴們很積極的成為了我們的首批內測用戶。

事實證明我們的內測用戶都非常給力而且十分專業。欣怡,UCloud Mkt一姐,你們別看她整天朋友圈說自己是腦慘兒童歡樂多自黑小霸王其樂無窮,關鍵時刻這種牛逼人物表達專業看法的時候一點都不含糊。試玩結束後馬上就一通電話告訴我們遊戲在市場策略上考慮不周的幾點,並提出了許多非常寶貴的建議,老實說一開始我也是蠻固執的沒聽進去,但是回頭想想她說的很有道理,自己真心圖樣圖森破,感謝欣怡感謝 UCloud。恩,今年託尼馬還有 32 場裸奔秀(偽) ,你要不要拿張觀摩券?(大誤)

哦對,然後又是一場項目迭代的修羅場,Ryan 不哭站著擼。

…...

再後來,GitBubble 就長成了各位現在看到的樣子,和其他遊戲相比,我們在遊戲質量上完全有自信有底氣說 GitBubble 一點都不必它們差,甚至比他們要好得多。GitBubbleGitCafe 做的第一個移動端小遊戲,也可能是最後一個。它能活多久我不知道,它會不會火起來我也不知道,但是我知道在這開發的期間,我們經歷過的那些點滴。我們遇到了許許多多未曾想到的問題,我們有的選擇了克服有的選擇了妥協,但最終,我們把它實現了。如果說 Ryan 賜予了 GitBubble 骨骼與血肉,那麼 Kawi 則賦予了 GitBubble 極佳的氣質與長相。感謝兩位一直以來的辛苦工作把我的一個小小 idea 變成了現實,感謝 Ryan 每一個工作到凌晨 2-3 點的周末,感謝 Kawi 在繁忙的工作中還能作出如此完美的視覺設計,也感謝我們的 PM在整個 GitBubble 項目周期中給與的建議與支持。

最後附上 GitBubble 的地址:

http://gitbubble.gitcafe.com/

推薦使用移動端微信瀏覽器打開,你懂的。(請點擊「閱讀全文」)

今天是 2014.12.24,我們的 GitBubble 剛剛正式上線 1 天,在這個平安夜,希望我們的 GitBubble 能給各位帶來一絲溫暖和歡樂,感謝各位。

Merry Christmas & Happy New Year!

——GitCafe

專業打雜 George@Gu_Bonjour



相關焦點

  • Git 自救指南:這些坑你都跳得出嗎?
    再加上 git 的官方文檔也一直存在著 「先有雞還是先有蛋」 的問題,雖然文檔非常全面,但如果你不知道你遇到的問題叫什麼,那麼根本就無從查起。作為國內領先的研發管理解決方案供應商,CODING 一直致力於在國內普及 git 的使用,為軟體研發提供更高效率。
  • 對比 git pull和 git pull --rebase的使用區別
    首選區別這兩個操作:git pull = git fetch + git merge
  • Susie Bubble在2015年紐約春夏時裝周鍾愛的"爆款" 你還不知道嗎?
    有些秀的邀請函甚至都讓一些大叔大嬸子拿到了,跟遊客一樣的在fashion week裡面晃!場面不忍直視。吐槽一下,Faustine Stenimetz SS 2015的collection,設計師是把家裡的拖把頭摘下來做衣服了嗎?!學textile的同學看著也都醉了!不知道Susie Bubble嗎?
  • 瘋狂騎士團:這個遊戲最近又火了!高分推薦小遊戲,值得玩
    《瘋狂騎士團》小遊戲怎麼玩?怎麼進入《瘋狂騎士團》?文章下拉到底部,點最後一個圖片進入遊戲!只有你想不到,沒有我找不到的好遊戲!沐沐今天推薦這款遊戲叫《瘋狂騎士團》,這個遊戲之前沐沐推薦過,之前這個遊戲還叫《藥水騎士》,為什麼又要推薦這個遊戲呢?
  • 姐姐問我什麼是變基操作(git-rebase)
    代碼review不方便,當你要做code review時,一個很小的功能卻提交了很多次,看起來就不是很方便了。這一篇文章我們先不講git提交規範,我們先來解決一下如何合併多次提交記錄。作用二:分支合併這個作用我們使用的很少,但是還是要知道,下面我們一起來看一下使用場景。
  • 榮格原型:你有什麼不為人知的隱藏面?
    某網友說:「看上去很好說話的人,其實遇到事很難搞;而有些看上去很冷很傲的人,其實心裡很軟、對人很好……」此話誠不欺我。生活中很多人(包括我們自己),都有兩幅面孔,一副是眾人見到的樣子,一副是不為人知的樣子;而且這兩幅面孔通常反差很大!
  • 科普:這些賤萌表情的原型都是誰?
    今天給大家科普一下,在網上常見的那些賤表情,原型都是誰。這個表情的原圖是這樣的↓這個在開頭就提到過啦,我們偉大的歌神,不知道為什麼在電影《旺角卡門》裡做出這種表情。這表情和他說出的話大有現在撕逼學的典範:食屎啦你!
  • 劉華強的原型張寶林,當時在石家莊有多狂?看這件事就知道
    《徵服》裡許多地方就是根據真事拍的,只有極少地方是改編的,絕大部分都是以真實事件為原型的。其中劇中劉華強開始是給吳天看場子的,劉華強本來在石家莊名不見經傳,在石家莊出名主要因為這件事。石家莊老照片吳天的原型是丁旭,石家莊最早一批開賭博機的。經人介紹了張寶林(劉華強)他們來了丁旭這裡看場子。
  • 測一測:你內心的英雄原型是哪個神話人物?
    在這個過程中,珂珂也不斷積蓄勇氣和力量,做了很多過去不敢想的嘗試,完全開啟了另一種不同的人生。「以前每次遇到問題的時候,總希望有個超級英雄來救我。到了這把年紀才發現,英雄,其實一直都藏在我的心裡。」所以,挖掘自己內在隱藏的、獨一無二的英雄原型,讀懂自己的使命和人生課題,是每個人需要做的功課:愛神的使命,是學會愛人;西西弗斯的使命,是尋找你所熱愛之事;普羅米修斯的使命,則是尋找勇氣;.比如珂珂,她的內在英雄原型就是象徵著無畏的【普羅米修斯】。
  • 世紀難題:設計師到底要不要會編程
    從Sketch到Pixate再到Framer,設計師的工具箱已變得越來越簡單有效,可以用來製作原型,製作應用程式的成本從未如此低,而且從來沒有這麼快。我們正在迅速轉向以行動裝置為主導的世界。從Sketch到Pixate再到Framer,設計師的工具箱已變得越來越簡單有效,可以用來製作原型原型。製作應用程式的成本從未如此低。而且從來沒有這麼快。對於開發人員來說,這意味著他們可以開始學習設計了。
  • 乾貨錦集:面向開發者和設計師的軟體錦集
    Oh My Star - GitHub的star功能弱,比如分類,本地組織你的GitHub star!GitUp - 一個簡單功能強大的git客戶端。 Balsamiq Mockups - 一個快速的網頁設計原型工具,幫助你更快、更聰明的工作。Marvel - 簡單設計,原型設計和協作。
  • JavaScript原型:關於對象的深入研究
    原型(prototype)是 JavaScript 中每個對象都包含的一個屬性(除非使用 Object.create(null) 來創建對象)。但是它的內部工作機制鮮為人知。原型屬性的分配機制是一個重要的概念,利用它可以在 JavaScript 中應用繼承。
  • 原創| 那些年那些事
    2012年,跟一班同學在一起,那時臨近高考,緊張學習的同時也會放鬆一下,聊聊自己的夢想。那時候的我們,只想著考個好大學,同時又憧憬著美好的大學生活。那一年,只有一個念頭,就是考上一所好點的大學,不讓我媽失望。我怕她失望,因為在那之前,每次人生路上的選擇,我都錯過了最好的機會,不想再出現一次。
  • 莉莉絲製作人吳迪:如何從玩家成為遊戲設計師?
    不像程式設計師需要一定知識的儲備、美術需要一定的畫功和藝術修養等等,感覺就有「任何人都能來做策劃」這樣的一種感覺。那究竟是不是這樣?從一個遊戲玩家到一個遊戲設計師,中間會有什麼差別?包括想成為遊戲策劃的人,在此過程中需要怎樣自我提升?我今天想跟大家聊聊我自己的一些看法。
  • 瘋狂動物園:正版瘋狂動物園小遊戲上線!這款令人瘋狂的手遊終於登陸微信小遊戲~
    標籤:3D、動物園、動作、跑酷蝦吐槽:來了!最最正宗的《瘋狂動物園》微信小遊戲版!手感上真的跟端遊版近乎神似啊!如果你之前沒玩過《瘋狂動物園》,那我會告訴你,這是一款榮獲2016 IndiePlus全球大獎的精品遊戲!目前微信小遊戲版剛上線,建議先添加到自己的小遊戲收藏夾再說~遊戲攻略:瘋狂動物園小遊戲下載,二維碼,玩家群瘋狂動物園遊戲攻略,小技巧,角色解鎖瘋狂動物園怎麼玩?
  • 大雪紛飛的日子裡,來個可摺疊浴缸如何?
    想跟設計癖聊聊?神出鬼沒客服小癖:15210428522。有緣自會相見٩͡[๏̯͡๏]۶近日刷起朋友圈,幾乎就是全國的天氣預報,大夥都在感嘆「你在南方的豔陽裡大雪紛飛,我在北方的寒夜裡妖風肆虐」。這時候如果能在大浴缸裡溫暖的泡個澡,絕對美得很。
  • 街霸小遊戲:正版街霸微信小遊戲,復古卡普空《街霸2》街機遊戲.街霸官方手遊禮包領取入口~
    ,遊戲禮包街霸小遊戲怎麼玩?不過在我跟朋友的測試中發現,伺服器經常斷開,而且加載實在太慢了……而且非主機,貌似也存在掉幀的問題,操作無比詭異。遊戲攻略:街霸小遊戲小遊戲下載,二維碼,玩家群街霸小遊戲遊戲攻略,小技巧,角色解鎖街霸小遊戲破解版無限金幣無限鑽石,遊戲禮包街霸小遊戲怎麼玩
  • 過年期間:這個 GitHub 項目你必能用到
    如果家裡來了客人:倒水,吃水果,八卦,嗑瓜子,更重要的是要連 WiFi。這時七大姑八大姨會問:小王呀,你家 WiFi 密碼多少?你心頭一驚,我常年在外 996,哪知道家裡的 WiFi 密碼。不過這個問題難不倒咱們技術人,今天推薦一個 GitHub 項目:wifi-password ,該項目支持 macOS、Linux 和 Windows。
  • 魔獸世界:那些極端令人討厭的NPC,玩家表示最想要他進本
    但正所謂「林子大了什麼鳥都有」,有那麼一些NPC在腳男的冒險途中處處添亂,讓人好生厭煩,下面我們就來見識一下他們。  一隻海龜成功入水 始祖龜大爺大媽 相信很多初次登上新大陸的朋友都會被這兩隻始祖龜給煩到,他們簡直比軍團版本那些肯瑞託的法師還要無聊。
  • 高級策劃分享:做《這是我的戰爭》學到的七件事
    再比如《Papers,Please》的做法也不一樣,但你做的決定都是主角生活的一部分,而且有很明顯的影響,這就是你自己的故事。4.失敗可以讓玩家印象深刻當然,失敗指的不僅是作為一個遊戲設計師,還包括玩家作為一個角色在遊戲裡遇到的問題。