雜物聚集地

使用瀏覽器做shader效果測試

Sat, 07 Nov 2015 13:11:51 GMT

最近在與特效美術之間溝通一些shader效果時,基本希望能夠便於溝通以及快速的測試一個雛形,所以把念頭打到瀏覽器上,主要是因為HTML5上的WebGL已經相當成熟,也有一些相關服務可以用,所以想說可以試試看,找了以下幾個服務:

  • ShaderToy
    基本上應該是範例最多的一個,特別的是除了紋理以外還提供影片、聲音可以使用,目前的成品數量應該也是最多最好的,不過僅提供fragment shader,但感覺網路上的強者都可以用特別的方式達到想要的效果。
  • ShaderFrog
    一個新的服務,提供兩種作法來建立shader,一個是Composed Shader,這有點像是一些現成的shader讓你來組合,另一個是Basic Shader就是讓你寫自己的shader,可以寫vertex shader,另外感覺這個網站有心要作大,有計畫要提供一些付費服務,像是shader匯出到Unity或者是自行上傳紋理等功能,不過目前未開放。
  • shdr
    可寫vertex shader與fragment shader,但似乎不能使用紋理,內建多種模型供使用。
  • Kick.js Shader Editor
    另一個比較陽春的線上shader編輯工具,只是我還是搞不懂他的紋理怎麼增加。

綜觀上面的一些服務,基本上提供了shader的編輯與測試,但是還是缺少了一些功能,第一是大多不支援自己自訂紋理,第二是如果要給美術可能需要更方便的編輯方式。

所以最後還是選了使用自己來的方式,選擇的是three.js,這個程式庫很久以前就在一些文章中見到他的名字,去到他的官網可以看到許多特色專案,另外就是他提供了詳細的文件與範例,基本上不用怕找不到寫法。

這裡是一個製作出來的簡單範例:
連結
畫面的部分使用three.js,右上的UI使用dat.GUI可以很方便的設置要修改的參數並顯示介面,這樣美術也可以簡單的調整參數,程式也可以即時的修改程式碼,美術只要更新一下即可。

另外要注意的是網頁需要放到網路上chrome瀏覽器在讀圖的時候才不會出錯,個人使用最簡單的Dropbox public資料夾,產出公開鏈結即可。


cocos2d-x 骨骼動畫方案

Sat, 03 Oct 2015 04:44:37 GMT

cocos2d-x上面可用的骨骼動畫方案並不多,列出如下:

一個支援多引擎的骨骼動畫方案,功能強大,支援IK,為骨骼動畫而生。 其檔案格式有json與binary兩種,cocos2d-x只支援json檔,這點要注意,有需要的話需要自行寫parser,之前看只有libgdx版本支援binary,現在狀況不太確定。

以Flash為基礎,刀塔傳奇的骨骼動畫方案,個人是沒有操作過,不過開發prototype時倒是用第三方程式庫讀刀塔的人物來使用 《刀塔传奇》骨骼动画查看器 DragonBonesCPP

個人感覺編輯器最強的一套,不過看似沒有IK。

  • cocostudio

cocos2d-x自己的編輯器,只是實在不能算好用。


Spine二進制檔轉json檔測試

Fri, 20 Feb 2015 16:31:40 GMT

由於cocos2d-x目前版本(3.4)仍然不能讀取spine 2.0後推出的binary格式(.skel)
加上自己沒有購買spine所以不能將binary檔匯入後再輸出為json格式
所以嚐試自己弄一個轉換的小工具
雖然最後沒有使用
但還是記載一下過程


由於spine官方目前有支援binary的runtime似乎只有libgdx 所以下面主要會以參考libgdx的方式來進行

  1. 使用eclipse新建一個java application

  2. 下載spine libgdx程式庫,放在src下

  3. 下載libgdx release版本(本次測試使用1.5.3)
    解開後將gdx.jar加入專案
    由於由於裡面有使用到nativecode
    打開gdx-natives.jar
    將需要的library取出(這裡使用的是libbdx64.dll)
    並在讀入該library

    static {
    	System.loadLibrary("gdx64");
    }
    

    如果有找不到lib的狀況要記得在VM Arguments中加入下面內容 -Djava.library.path=D:\workspace_new\SpineBinary2Json\libs

  4. 新增libgdx的application並實作applicationListener Application我是使用LwjglApplication,所以要將gdx-backend-lwjgl.jar與gdx-backend-lwjgl-natives.jar加入專案裡
    之所以要這樣弄是因為我原本以為可以直接將TextureAtlas物件建立起來並生成SkeletonData
    後來發現會出現錯誤如下

    Exception in thread "main" java.lang.NullPointerException
    	at com.badlogic.gdx.graphics.GLTexture.createGLHandle(GLTexture.java:197)
    	at com.badlogic.gdx.graphics.Texture.<init>(Texture.java:123)
    	at com.badlogic.gdx.graphics.Texture.<init>(Texture.java:103)
    	at com.badlogic.gdx.graphics.g2d.TextureAtlas.load(TextureAtlas.java:244)
    	at com.badlogic.gdx.graphics.g2d.TextureAtlas.<init>(TextureAtlas.java:236)
    	at com.badlogic.gdx.graphics.g2d.TextureAtlas.<init>(TextureAtlas.java:231)
    	at com.badlogic.gdx.graphics.g2d.TextureAtlas.<init>(TextureAtlas.java:226)
    	at com.badlogic.gdx.graphics.g2d.TextureAtlas.<init>(TextureAtlas.java:216)
    	at Main.main(Main.java:76)
    

    發現應該是gl物件未產出
    後來採最簡單的解法就是建立一個libgdx的application就會進行需要的初始化行為了

  5. 依照binary編寫json檔案
    這裡可以參照下面兩個格式的讀取行為
    https://github.com/EsotericSoftware/spine-runtimes/blob/master/spine-libgdx/spine-libgdx/src/com/esotericsoftware/spine/SkeletonJson.java
    https://github.com/EsotericSoftware/spine-runtimes/blob/master/spine-libgdx/spine-libgdx/src/com/esotericsoftware/spine/SkeletonBinary.java
    一開始採取從SkeletonData逆推的方式,但最後失敗
    卡在我無法從skin逆推attachment
    後來只好改採在SkeletonBinary讀取檔案的過程中同時將json建立起來的方法(直接修改SkeletonBinary.java)
    但由於這樣做可能會有版權的問題
    故這裡並不提供程式碼
    做起來應該是不難只是有點麻煩而已


簡易文件編碼轉換工具

Fri, 20 Feb 2015 15:34:07 GMT

原由

因為在工作上有需要將一些簡體編碼的程式碼文件轉換成utf格式,所以寫了這個小工具
該工具的作用:將目標資料夾下的指定副檔名文件的編碼改為utf
<strong>注意:目前無備份功能, 轉換前須自行備份</strong>


開發相關

開發工具

python 2.7 + chardet + py2exe
gui部分為內建的tkinter
py2exe_dist.zip是我自行用py2exe轉換的執行檔
如要自行產生請安裝py2exe module以及chardet並在專案目錄下執行
python setup.py py2exe

基本原理

用chardet這個module來測文件的編碼
測出後將其解碼再轉碼為utf

特殊例子

在測試時有遇到一個特殊狀況
就是當文件編碼為gb2312
但裡面又含有繁體字元
此時要改用gbk編碼來處理

github:
https://github.com/hsienwei/file_encode_to_utf_converter

執行畫面


Unity autosave

Mon, 03 Nov 2014 17:59:58 GMT

昨天遇到了一次Unity的當機,使得我工作三小時的結果完全消失,查了一下Unity本身沒有自動存檔功能卻能用script作到相同的效果。
連結如下:
https://www.daikonforge.com/dfgui/save-on-run/