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

2021-02-13 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內部原理揭秘!
    我們時常有一種「我會用這個技術、這個框架」的錯覺,等到真正遇到問題,才發現事情沒有那麼簡單。而Git也是一個大部分人都知道如何去使用它,知道有哪些命令,卻只有少部分人知道具體原理的東西。了解一些底層的東西,可以更好的幫你理清思路,知道你真正在操作什麼,不會迷失在Git大量的指令和參數上面。
  • Git的奇技淫巧
    而「版本管理工具」能記錄每次的修改,只要提交到版本倉庫,你就可以找到之前任何時刻的狀態(文本狀態)。到時候別拿著砍刀來找我2、所有的命令都在 git version2.7.4(AppleGit-66)下測試通過3、統一概念:工作區:改動(增刪文件和內容)暫存區:輸入命令: git add改動的文件名,此次改動就放到了『暫存區』本地倉庫(簡稱:本地):輸入命令: git commit此次修改的描述,此次改動就放到了』本地倉庫』,每個
  • Git-給發行版籤名
    如果你決定以維護者的身份給發行版籤名,應該這樣做:$ git tag -s v1.5 -m 'my signed 1.5 tag' You need a passphrase to unlock the secret key for user: "Scott Chacon <schacon@gmail.com>" 1024-bit
  • 聊聊臺灣交換的那些事
    按照慣例,我們先界定下討論範圍,筆者主要從教育、經濟、旅遊和文化等角度,跟大家分享臺北生活的所見所聞,至於政治、文學、娛樂等話題,不是本文的重點討論範圍。關於臺灣交換,每個人的初衷都不太一樣,據筆者在臺灣交換半年接觸的陸生而言,或出於學術交換的需求,或換種生活方式,或找個地方度假。赴臺交換之前,有朋友跟我說,在臺灣交換的時間很短,你如果能把學習或者旅遊做好,就很好了。
  • 三招教你輕鬆擴展 git bash 命令(下)
    劇情回顧在上一節中我們已經介紹了兩種方式來擴展 git bash 命令,解決了一般性命令不足的問題,最後我們還留下了一個疑問,如果兩種方式均無法擴展某些命令又該怎麼辦?再介紹最後一個大招之前,我們首先來回憶一下前面兩種擴展方式.
  • 如何恢復丟棄的 git stash 數據
    不要讓 git 命令中的錯誤抹去你數天的工作今天我的同事幾乎失去了他在四天工作中所做的一切。
  • 用 Python 還能玩 Git?
    所以,用 Python 來實現是一個愉快的選擇。這時,就需要在 Python 中操作 Git 的庫。0.方法是:使用你的 everything 搜索 git-daemon.exe 在哪個目錄下,複製這個路徑設置到 PATH 裡去。在 Linux 下,需要先執行:./init-tests-after-clone.sh,配置一下,那麼這個文件從哪來呢?在 Github 上:https://github.com/gitpython-developers/GitPython2.
  • Git命令和Sourcetree你更喜歡哪個?--文末送書
    Visualize and manage your repositories through Sourcetree's simple Git GUI.一款強大的Windows和Mac的免費Git客戶端Sourcetree簡化你如何與你的Git存儲庫使您可以專注於編碼。可視化和通過Sourcetree簡單的Git GUI管理你的知識庫。
  • git 版本控制初學者指南
    幾乎可以肯定都是,Git 在任何職業環境中都會用到,你越早熟悉它,對僱主來說你就越有價值。此外,這將使團隊的項目工作變得更容易管理。你是否曾經將你的代碼搞得一團糟,甚至覺得從頭開始會更容易?有了版本控制,你可以返回到之前的某一個版本,而不需要在凌晨 2 點從頭再來。
  • 第三期創意遊戲來了,你方了嗎?我不方,我手裡遊戲多.比如這個元氣騎士小遊戲!
    被評選為創意小遊戲的遊戲也越來越多了。第一期創意遊戲:1月9日新報丨微信公開課吐槽一下?首批創意小遊戲什麼鬼?!第二期創意遊戲:微信剛公布了三款「都挺好」的創意小遊戲!然小遊戲叒被家長舉報了!這對原創開發者來說,是很棒的事不是嗎~這一期最有趣的是,《消滅病毒》也入選了!誰說爆款小遊戲就不能是創意小遊戲了?
  • 玩轉Git就這麼簡單!這些常用命令你確定都用過嗎?
    一般存放在 .git 目錄下的 index 文件(.git/index)中,所以我們把暫存區有時也叫作索引(index)。版本庫:工作區有一個隱藏目錄 .git,這個不算工作區,而是 Git 的版本庫。
  • 聊聊那些年我們的「醜」事
    那麼,讓我們聊聊那些年你我的「醜」事吧。會展網絡營銷那些年大人們的誇獎你會不會有跟我一樣的困惑,從小到大,別人家的孩子總是那麼的優秀,「美麗漂亮」這些大人會誇的詞都會在別人身上見到小時候你不懂,可長大發現,原來長得健康僅僅是你長得高,你身體好僅僅是他們找不到其他形容詞。看到這裡,是不是如鯁在喉,吐不出也咽不下?你是否跟我一樣幻想著,自己像當代的網紅一般,眾星捧月,站在舞臺的中央,多好。那些年暗戀的女孩or男孩
  • 來聊聊那些跟豬有關的英文…
    今天我們就借著這個機會來跟大家聊聊那些跟豬有關的英文吧~每逢過年,人們就會在豬圈貼上「肥豬滿圈」,來表示人們對富足生活的期盼。(對.貪得無厭)、eat like a pig(像豬一樣吃得多,吃相難看)、to make a pig of oneself(吃得太多)、to live like pigs in clover(養尊處優)、to teach a pig to play on a flute(做荒誕或不可能的事)。在漢語中,若表示某件事發生的可能性極小,異想天開或者荒誕離奇,常說太陽從西邊出來了。
  • 亞沙會 | 「亞亞」陪你聊聊父親的那些事!
    回過頭來看自己的成長之路  每一步都有一個身影在守候  給你力量,給你信心  而這份力量來自父親  6月21日父親節  「亞亞」祝願所有的父親  你陪我長大  我陪你到老  2020年第六屆亞洲沙灘運動會  將在11月28日-12月6日舉辦  屆時,「亞亞」歡迎大家  帶著父親一起來收穫美好回憶
  • 小姐姐用動畫圖解Git命令,一看就懂!
    4、git revert舉個例子,我們在 ec5be 上添加了 index.js 文件。之後發現並不需要這個文件。7、git pullgit pull 指令實際做了兩件事:git fetch 和 git merge。如下圖所示:
  • 惠法君上線首秀,和你聊聊網絡司法拍賣那些事
    惠法君上線首秀,和你聊聊網絡司法拍賣那些事 2020-12-24 19:26 來源:澎湃新聞·澎湃號·政務
  • 跟你聊聊頭皮屑那些事兒
    跟你聊聊頭皮屑那些事兒時間:2020-11-19 00:28   來源:倉鼠手遊   責任編輯:沫朵 川北在線核心提示:原標題:頭皮癢、頭皮屑多有可能傳染嗎?跟你聊聊 頭皮屑那些事兒 支付寶螞蟻莊園小課堂2020年11月19答案是什麼呢?2020年11月19的螞蟻莊園題目是頭皮癢、頭皮屑多有可能傳染嗎?
  • 媒盤點 那些年,我們「根本停不下來」的小遊戲
    編者按:近段時間,你的朋友圈是否也被一波一波的小遊戲分享刷屏啦?這樣的遊戲風一樣地來,之後往往又突然消失。
  • 「雙語彙」Bubble/泡泡
    因澳大利亞和紐西蘭分處塔斯曼海(Tasman Sea)兩側,這項安排名為trans-Tasman travel bubble。也許「travel bubble」這一表述並不常見,英美媒體在報導時大多附上簡要說明:「旅行走廊」(travel corridor)、「安全區」(safe zone)。
  • 豎屏小遊戲與橫屏小遊戲,你pick誰?
    它有點那種RPG遊戲的感覺~不過,又在某一方面很像這個時代的地牢roguelike遊戲。另外,它其實還有一點魔塔的感覺!遊戲內容還可以,適合喜歡這種策略的,地牢探索型小遊戲的玩家~我玩的時候只想說「你下快點吧你」。豎屏小遊戲的部分暫時推薦到這裡,下面開始橫屏小遊戲!樓下都很熟也很熱情,隨便撩!不要害羞~