Nisra Hackathon 2017 心得

2017-02-23

前言

由於去年的Nisra Hackathon不小心在ㄆㄆ家睡過頭xDD,所以今年決定來雪恥www, 今年的獎金也蠻豐碩的第一名有一萬元,希望藉由黑客松來籌畢旅的基金 哈哈。

正文

這次的黑客松在參賽前就想好題目了,剛好因為研究所的計劃要做一個LBGM,所以想說來做一個LBGM版的小精靈遊戲,這個題目是受到Google在2015年彩蛋(是能在Google Maps上玩小精靈)的啟發,但當時好像只Web版而已,沒有真正的Loaction Base,有此想說如果用React Native來做一個,應該蠻有挑戰的。

當年彩蛋的截圖

alt text

小精靈規則簡介與遊戲構想

玩家為小精靈, 遊戲中會出現鬼魂, 被鬼魂碰到的話就輸了。 迷宮為使用者所在地圖, 豆子會出現在街道上,玩家吃了豆子會得分。 大力丸會出現在特殊地點(lbs), 大力丸提供小精靈一小段時間,可以反過來吃掉鬼魂。鬼魂在這段時間內會變成深藍色,會往反方向逃逸,而且比平常的移動速度慢。當鬼魂被吃掉時,它的眼睛還在,會飛回鬼屋,並再生而回復正常的顏色。

最後的遊戲積分可以轉換成金錢 金錢可以購買skin

遊戲積分可以分享到社群

運動的里程數當做成就

達成一定成就可以拿錢

技術選用

由於以前有摸過Mapbox,而且Mapbox Studio的高度客制化功能剛好是我要的,因此地圖選擇使用Mapbox。

React Native的部分因為他真的很強大,在不偷跑的情況下要在短短的兩天內做出一個可以看的App,使用它真的會方便許多。

豆子的產生是由銓哥用C++程式寫的,主要原理是先在地圖道路上選兩個點,然後由其中一點向另一點不停打點。由於如果要在全地圖打點有點麻煩,所以我們一開始的考量就是只在輔大的地圖上打點就好,這些點算是Hard Code哈哈。

配色的啟發是在黑客松前幾天剛好在medium上看到一篇在講 Color trend 2016/2017

成果

實際在校園裡遊玩的螢幕錄影

alt text

Zoom in 地圖

alt text

Zoom out 地圖

alt text

遊戲玩法

在地圖的右下角有三個按鈕,從上到下分別是磁鐵定位回中心地圖縮放

磁鐵: 是用來吸收玩家附近的豆子,我們改良了經典的小精靈的玩法

定位回中心: 由於地圖是可以滑動的,怕玩家在滑動後位子會跑掉,因此設計了這個按鍵,讓地圖可以迅速回到中心(以使用者的位置為中心)。

地圖縮放: 我們只設定了兩種zoom level

心得

這次非常感謝老楊與銓哥兩位夥伴陪我這個係邊參加黑客松,雖然最後只拿到第三名,但已滿足哈哈哈。 要用React Native做遊戲真的不容易,尤其是沒有什麼遊戲引擎可以用,要什麼新增什麼酷炫功能都要自己來。

alt text

No Comments Yet