Good Game Editor HTML5 porting (resource browser)

斷斷續續製作了一個HTML5版本的Good Game Editor，一方面是作為測試及學習web相關技術，一方面也是利用這個過程持續對good作點改良。雖然目的是想作一個HTML5版的編輯器，但實際上目前只作到resource browser，可以在web browser開啟good package作資源檢視。目前大部份的功能還是原來的C++ code直接以emscripten編譯成javascript，再加上少部份javascript，最後利用w3.css作排版。

<試試>

點擊連結會列出網站上good/uploads目錄下的所有good package，可以再點擊package的play來試玩或者是edit開啟編輯器(res browser)。

目前編輯器大致可以檢視所有類型的資源，包含聲音(audio)、貼圖(texture)、精靈(sprite)、地圖(tilemap)、關卡(level)、腳本(script)及粒子腳本(particle)。

如下圖，為點擊herobye.zip這個package的Edit時顯示的第一個畫面。

編輯器畫面主要分為3個部份。左側依據不同類型資源，列出所有資源列表。右側是屬性顯示區，顯示選取的物件屬性資料。中間區域為編輯區，依據選取的不同類型物件作不同顯示。

下圖是選取了聲音(audio)類型的資源，編輯區顯示標準的播放聲音介面。

下圖是選取了貼圖(texture)類型的資源。

如下圖是選取了精靈(sprite)類型的資源，編輯區顯示此精靈每個frame的資訊及在上方播放精靈動畫。而右側屬性區也會顯示此精靈使用的貼圖物件。

下圖是選取的地圖(tilemap)類型的資源，編輯區顯示己編輯的tilemap，右側屬性區也會顯示目前地圖使用的貼圖。

下圖為選取關卡(level)類型的資源，編輯區顯示關卡內容，右側屬性區上方顯示關卡內物件的階層圖。點擊階層圖上的子物件時，右側屬性區下方會再顯示選取子物件的屬性資訊。

下圖為選取腳本(script)類型的資源。

下圖為選取粒子腳本(particle)類型資源。編輯區有二個分頁，左分頁Source同腳本一樣顯示script內容。右分頁Test為粒子執行preview畫面，同時右側屬性區上方也會列出所有可測試的particle script名稱，點擊時立即執行作preview。

以上是目前Good Game Editor HTML5的移植，還會持續update。

留言

這個網誌中的熱門文章

KillSudoku 4顆星精彩數獨詳解 - 鍊技巧

這題數獨(sudoku)題目估計為4+顆星，有點難度。解題需要應用多種技巧，過程非常精彩有趣，是個好題。底下使用 KillSudoku 作詳細圖解。１，使用基本排除法則，可以簡單填入６個數字。到此為止，開始使用候選數法來解題。如下所示，為填入６個數字後的狀態圖。２，如下圖，使用進階排除法，在第９列和第４行可以先排除幾個候選數。３，如圖，在第２行有一個 Naked Subset (3,4)，可以對3,4候選數作排除。附帶提一下，反過來看在同一行裡面也可以說有另一個Hidden Subset(2,5,8)存在。Naked Subset和Hidden Subset常是一體二面同時存在，只不過對我們來說，Naked Subset是相對比較容易看的出來。排除第２行的3,4後，又可以對第２列以外的3作排除，如下圖。４，接著，在第５行又發現了一個 Naked Subset (3,7,8)。對第５行三個Subset以外的候選數3,7,8作排除後，又接著產生可以對第５行以外的3作排除。５，這一題解到此為止，開始進入高潮。大部份能解到3顆星題目的人，猜想應該就此卡住。以下開始需要應用更高級的鍊技巧，才能夠繼續進行。應用X-Chains鍊技巧，可以找到一條由４條強連結組成的鍊，可以排除候選數2。這裡的鍊指的是由２條以上的強連結組成，而所謂的強連結是指在同一行、或同一列或同一個Box裡，由唯二的候選數構成的連結。如上圖中的第９行中，只有二個2，這二個2構成一條強連結。為什麼說這是一條強連結？因為在這條連結的AB二個端點中，肯定會有一個2存在，要麼是A點要麼是B點。鍊技巧就是將多條強連結串連起來作候選數排除的技巧，而X-Chains是高級的鍊技巧裡面的基本技巧。接上圖，這樣一來就又可以應用基本排除方法，填入３個數字，如下圖所示。６，接下來就是本題最精彩的部份，以下需要連續找到３條鍊，才能繼續往下解。７，找出３條鍊後，剩下來的部份就沒什麼特別的了，只需要應用基本法就能把所有剩餘數字填完。

單人撲克牌遊戲 - 蒙地卡羅

更多可在網頁玩的單人撲克牌遊戲；新增一個簡單的單人撲克牌遊戲：蒙地卡羅，簡單介紹一下玩法。下載事先排列好5x5張牌。每次移動一張可以配對的牌，並消除這對牌。在上下、左右及斜向相隣的二張牌，只要擁有同樣數字(不計花色)，即可配對。消除二張配對的牌後，剩餘的牌以往左往上的方式補滿空隙，接著在發新牌補滿後面的空格。重覆步驟2~3，直到沒有牌可以配對及發完所有牌為止。結果有二種。一個是勝利，成功的消除掉所有牌。另一個是Gameover沒有牌可以再作配對。

窮人的 AI：自動漫畫分鏡切割

( 試試看 ) 在手機上看漫畫時，有一個體驗上的問題：漫畫原本是「整頁設計」手機最適合的是「一格一格往下滑」與其強迫使用者縮放、拖曳、放大，更直覺的做法是：直接把一頁漫畫自動切成多個分鏡，轉成瀑布流閱讀。這篇文章分享一個不靠深度學習、完全在前端完成的實作方式：使用 OpenCV.js 做分鏡偵測輸出 rect list 再用全畫面 Canvas 把每個分鏡當成一個「閱讀單位」整個系統可以拆成三層：漫畫圖片 ↓ 影像處理（找出 rects） ↓ 排序後的 rect list ↓ 全畫面 Canvas 逐格呈現（瀑布流） Step 1：灰階化漫畫的資訊 90% 都在線條上，顏色反而是干擾。 cv.cvtColor(src, grayImage, cv.COLOR_RGBA2GRAY); 灰階化的好處：降低維度對邊緣偵測更穩定對黑白漫畫特別有效 Step 2：邊緣偵測，抓出「分鏡的邊」接下來用最經典、也最夠用的 Canny Edge Detection： cv.Canny(grayImage, edges, 50, 150); 在漫畫中，分鏡外框通常就是最明顯的邊界。 Step 3：形態學操作，把破碎邊框「補起來」真實漫畫的線條並不完美，常常有斷線、陰影、留白。所以要做一個很重要的步驟：膨脹（Dilation） const kernel = cv.Mat.ones( 5 , 5 , cv.CV_8U); cv.dilate(edges, dilatedEdges, kernel); 直覺理解就是：把細線「抹粗一點」，讓本來斷掉的邊界連成封閉區域。這一步直接決定後面能不能成功抓到「一整格分鏡」。 Step 4：找輪廓，轉成矩形框（rect）有了封閉區域之後，就可以找輪廓： cv.findContours( dilatedEdges, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE ); 每一個 contour，代表一個「可能的分鏡區塊」。接著轉成矩形： const rect = cv.boundingRect(contour); rects.push([rect.x, rect.y, rect.widt...

很讚的遊戲編輯器

搜尋此網誌