2013年12月18日 星期三

Monster Madness – 透過 Emscripten 建構 Web 遊戲

當你正在使用C++開發你的3D遊戲,C++已經被證實是可以橫跨最多遊戲裝置,但僅限於需要安裝遊戲的平台,但對於no-plugin, free-download的HTML5呢

HTML5的規格已經被廣為接受未來任何裝置都會把HTML5作為最通用的程式語言,包含desktop top-browser, mobile browser, standalone都能夠直接使用HTML5.如果現在什麼現有技術都沒有重新去使用HTML5打造新的3D遊戲是值得投資的事情,但是對於已有C++現有技術的公司而言,這樣的開發成本太大了.因此很多公司就會使用Emscripten來將C++轉成JavaScript.

Trendy Entertainment 與 Nom Nom Games兩間工作室將現有用Unreal Engine 3所打造的遊戲Monster Madness Online 將C++透過Emscripten及asm.js轉換到JavaScript成功支援HTML5.

http://blog.mozilla.com.tw/posts/4541/monster-madness-creating-games-on-the-web-with-emscripten

http://blog.mozilla.com.tw/posts/4557/monster-madness-creating-games-on-the-web-with-emscripten-2

2013年12月15日 星期日

Bring Hobbit to life with WebGL

The article introduces how to use ThreeJS to make a WebGL game which works well on desktop browsers and Android-Chrome.

Some optimization approach we can refer!! This is so great, and this approach also could bring nice performance on 3D rendering engine.
  • Use low-poly models
  • Use low-res textures
  • Reduce the number of drawcalls as much as possible by merging geometry
  • Simplify materials and lighting
  • Remove post effects and turn off antialiasing
  • Optimise Javascript performance
  • Render the WebGL canvas at half size and scale up with CSS
Reference:
http://www.html5rocks.com/en/tutorials/casestudies/hobbit/
http://middle-earth.thehobbit.com/trollshaw/experience


2013年11月24日 星期日

Design your mobile app using JQuery mobile preview tool



http://jqmdesigner.appspot.com/designer.html

2013年11月18日 星期一

Get married II

2013.11.16是我跟我老婆結婚宴客的日子。前一天我還跟我老妹測試我的收禮金系統,這次我要讓大家知道收禮金的時代需要革命,我的革命就是全面E化,就帶著我的Mac筆電出門了。

一到了會場,就發現老婆的新娘鞋忘了帶,趕緊拜託小夫再跑一趟載我回家拿鞋子...難道今天上回一直忘記放炮的伴郎棠皓還沒出現,就要開始出包了嗎?

化完妝就開始排演,結果影片出了問題,我的Mac就被徵召過去用...我花了兩天寫的收禮金系統宣告沒有表現的機會了...在此宣布收禮金E化的革命還準備好,大家還是乖乖用筆來記錄吧~~~(有興趣的人可以來這裡自己輸入禮金,但結果不予採納...https://script.google.com/macros/s/AKfycbyUlIWV-mDObQ-_XMXBbQdGRIPbDlpxhCoj65dn-u70j4Al0QM/exec)

預演的我顯得有點緊張,走路都還不太會走。
這是我婚禮的布置!!! 大家還蠻稱讚這個場地。
爺爺坐著輪椅來我的婚宴,看得出來他真的很開心,我能傳達我對他的孝心的地方就只能透過親手幫他別上他的胸花了。

婚禮的影片都是我做的,每個都要花超過一個禮拜來做,不過字幕好像放太低了,賓客很多其實都看不到真對不起XD

整個婚宴的重點其實就是我們會來跳一段舞,從一來會場我老婆就說好緊張好緊張要跳舞,也是拉,整場婚禮我們都講不到話,唯一會互動的就是這個跳舞了。這個舞是拜託我老婆的好友羅老師幫忙教的,我們練習了三個多月,每個禮拜會練習一次,有時候想放棄,差點就不繼續練習了。

上台前,先趁我老婆換裝時,我每一桌都去拜託等等給個面子,幫忙去前面吆喝一下,指定伴郎為我的啦啦隊隊長~~他說:"伴郎紅包,跟啦啦隊隊長是分開計價的~~~",哈~~下次再多請你吃飯嘛!!!



多虧了,大家賣力的支持,讓我們小倆口有勇氣跳到最後,大家反應都還不錯。反應還蠻熱烈的,說真的~~在台上跳舞,如果反應是有互動的,跳起來其實都不會緊張了~~~

後來新娘去換裝,我就一桌一桌先去敬酒道謝,感謝大家今天來光臨,跳舞時候的加油多多謝謝大家的支持了!!! 敬完了六七杯,開始有點失去觸覺麻麻的了。

送客的時候,其實我有點小醉,話有點多如果有說錯話真給大家不好意思,能夠看到很多不同時期照顧過我的好朋友,這些年來真的多謝各位的幫助讓我能夠有今天。

這場婚宴滿是對朋友的感謝,從小照顧我的親友、認識二十幾年的國小同學、沒事會一起出來聊天的國中同學、以前一起住在外面的大學同學、一起窩在實驗室的碩班同學、互相照顧撐過新訓的七班弟兄、在公司一起打拼的公司同事。大家的出現對我來說,就是看到了我人生的走馬燈,重新撥放著我是怎麼成長的。




 晚上喜來登給了我們一個套房, 真的很不錯,就把婚宴後的一些行李擺到這裡就可以明天再帶走。

早上吃著他們的十二廚buffet,跟老婆聊著昨天婚宴的趣事,真的覺得就像是一場夢,真的是很開心。

 最後,這場婚禮真的是有很多人的幫忙才能成功,飯店、主持人、攝影師、婚禮布置、很多來參加的親友、我偉大的司機跟伴郎,我親愛的父母跟岳父岳母,還有最重要的是無時無刻都在幫助我以及享受這一刻的老婆大人~~~我愛你們!!!




2013年11月17日 星期日

Get married I

2013.11.12是我人生的大日子,我們家是一群完全不懂婚禮的禮俗的門外漢,準備了十個月,這天真的是對我一次期末考。

感謝我的好朋友 負責炒熱氣氛的伴郎棠皓、跟情義相挺幫我湊車的司機千翔。如果沒有你們,我的婚禮過程一定沒有辦法這麼順利。

11/12的吉時是上午就要到我未來老婆家文定,大家不到七點鐘就起床準備,我因為床被安了,只能睡沙發@@。我的好朋友一來,我就立刻拉他們到樓下,幫我綁車花。一群男生笨手笨腳,把好好一台車貼滿膠帶,綁一堆軟鐵絲,終於幫車子綁好肉粽。

到了我老婆家前,高大的伴郎竟然害怕放鞭炮,帶著耳機始終點不到著炮。

到了門口搖下車窗,手中捏著等下要給幫我開車門的人的紅包,結果...怎麼沒有人幫我開車、讓我摸橘子...?? 原來是下午迎娶才要,我只能跟小舅子說抱歉拉,紅包我先收走了。

上樓文定儀式,脫線的伴郎棠皓還把我事先安排好的奉茶紅包拿錯,放成自己的伴郎紅包...我給伴郎紅包可是多很多耶XD...
交換完信物後,我們就一起去餐廳吃午宴,下車後,餐廳人員說"你們早上是結婚嗎?" 我說:"沒有啊,是文定!!" 餐廳人員就說: "文定為什麼要綁車頭彩,不是都結婚才綁嗎?"...XD,我又搞笑了,害我早上還因為弄車頭花遲到去我老婆家...

下午回到我家後,趕去買我忘記準備的捧花,還被花店多算錯300元...

下午四點,準備出發去我老婆家,雖然我個性低調,不想讓鄰居知道,但早上綁錯車頭彩的行徑已經讓很多人知道我今天要結婚。我就決定,我下午的迎娶要放三串鞭炮,分別是出門、到老婆家門前、以及回到我家門前,執行者---害怕鞭炮的有線頻道素人嘉賓棠皓

好!! 我們要出發了,一夥人跟著攝影師講著講著垃圾話上車了,一上高架道路,就問棠皓:"你有沒有在我家門口記得放鞭炮?" 棠皓:"案,忘了XD...",棠皓 醜一。

到了中和,想到~~''XD,棠皓!! 你等下不是要執行第二次放鞭炮行動嗎? 怎麼會坐在我旁邊?這是第二台車耶" 棠皓: "怎麼辦啦? 搓賽" 我:"好吧,我去叫在第一台車的攝影師助手放!!" 攝影師:"喂~~沒關係! 我來放就好了,我放完順便走過去拍你們就好了。" 我想說攝影師還蠻照顧助手的就拜託你了...,我就撥給我妹夫:"我快到你們家了,等下我會先放鞭炮通知你們!!!"

結果XD...到了我老婆家路口一個綠燈左轉,我頭車駕駛舅舅,突然加足馬力及衝到我老婆家門口面前停下來,女方親友立刻嚇到趕快點燃鞭炮,攝影師在煙霧中下車,跟我說:"我剛剛真的想要下來去放炮的,只是你舅舅腦充血,突然加速,我就像被關在監獄的犯人下不了車~~"。好吧@@我挺得住!! 可能舅舅尿急了。我就說"沒關係!!! 就跟大家說我們有放炮,外面太吵了你們沒聽到就好。"我果然是當過leader的,下屬犯錯,當然要幫下屬解決問題,讓大家安心。

一下車,摸了橘子,丟出早上就該送出的紅包。就要闖關遊戲。

第一關夾MM巧克力,以往我的夾筷子指力,一直都被我老婆嘲笑,想給我出難題,還讓我練習一分多鐘,結果我竟然在限定時間內成功夾了10顆MM,丟下一句名言:"讓我練習,實在是你們的失策!! 哈哈"。


第二關幫小孩換尿布,這小男孩在我闖關過程中竟然都不會哭,讓我頓時覺得天助我。在一分鐘內換完交差後,被關主指正,尿布穿反了XD。奇怪了~~小孩穿反了也沒哭沒意見,大人是懂甚麼?搞不好這才是最舒服的穿法。
超過時間的我,逞罰就是喝苦茶,我很men的喝了70%,我的伴郎跟司機兩位隨從竟然喊渴,想喝茶,我只好給他們服務的機會了,(其實下關的福利比較優,福利還是不要太早給比較好...)


第三關就是親新娘啦,結果我親了所有的魔王才親到新娘,鞭炮可以少放,親嘴怎麼可以少親呢?

 最後,就是迎娶老婆回家,都是我害的。搞到岳父岳母都哭不出來,一路上傻女婿從早上綁車頭彩來文定,少放鞭炮雖然沒被發現,但到了老婆家把每個魔王都親了一遍,嘴巴紅紅的跟長輩說要取老婆,也難怪在場沒人哭得出來。

 最後,我的老婆終於被我迎娶到家了。(ps:回到我家時,戴著耳機的醜一伴郎,這次總算記得要放鞭炮了...下午放炮完成率33%) ---待續


2013年11月14日 星期四

Live editing WebGL shaders with Firefox Developer Tools



https://hacks.mozilla.org/2013/11/live-editing-webgl-shaders-with-firefox-developer-tools/



2013年11月6日 星期三

Hewlett-Packard 精神


今天看到很多台灣的大企業遇到轉型的困難,產生巨幅虧損。
讓我想起HP的企業精神,要經營一個永續經營的企業實在很難。

HP一開始只是兩位很喜歡做實驗的工程師在家中附近的車庫所創立出來。
  • "鼓勵創新、放開眼界、大膽探索" --- 給予違抗獎章,表揚工程師卓越的違抗行為。
  • "'想成為企業家嗎? 先來HP學習how?" --- 矽谷的成就來自於HP這句話一點都不誇張,很多優秀人才都是培養自HP或是被HP所扶植,ex:蘋果電腦Steve Wozniak
  • "公司賺錢的目的只是為了實現他的目的、做出貢獻。" --- 企業的責任是甚麼? 替股東維持最高收益? 不是!! 我們應該替我們的顧客、員工以及所處的社區負責,

2013年11月3日 星期日

Google App Script

  • While you modify element or add widget, you must return app
  
function listBoxClick( eventInfo )
{
  var app = UiApp.getActiveApplication();
  Logger.log( "listBoxClick: "  +  eventInfo.parameter.searchListbox ); 
  
  var text = app.getElementById( "text" );
  text.setText( eventInfo.parameter.searchListbox );
  
  var title = app.getElementById( "title" );
  title.setText( eventInfo.parameter.searchListbox );
  
  return app;
}

2013年9月5日 星期四

Solid-wireframe model using OpenGL/Direct3D

Depth bias not be supported on line and point mode. 

In solid wireframe , we should enable polygon offset on solid model first, and then disable polygon offset on wireframe model.

OpenGL:
glEnable( GL_POLYGON_OFFSET_FILL );

glPolygonOffset( bias, 1 );

glDisable( GL_POLYGON_OFFSET_FILL );

D3D:
device->SetRenderState( D3DRS_DEPTHBIAS, (DWORD)bias );

device->SetRenderState( D3DRS_DEPTHBIAS, (DWORD)0 );

Reference:


2013年8月23日 星期五

Coca-Cola Mini-Me (3D printing)

Coca-Cola Mini-Me (3D printing) from Gefen Team on Vimeo.

2013年8月9日 星期五

Mobile game development is like a startup

今天我參加了一場關於遊戲市場的分享會。對於一個遊戲要找出他的X因子,讓玩家知道他在玩什麼?要適當的給予玩家reward以及玩家的需求feedback,包含升級,成就,獎品,因為Game as Service。

遊戲的開發應該反覆的在build<->test 中不斷驗證這結果是不是你要的。
遊戲開發過程為:concept, prototype,production,release. 在Mobile game的製作要把大部份時間花在prototype, 當prototype完成要立刻拿到市場做驗證,不受到歡迎就再回去prototype步驟。得到驗證支持後才繼續production,上架後仍要不斷根據玩家feedback來polish它。

盡可能讓產品在三個月丟到市場做實驗。先從小市場相同人口分配比例的國家做實驗,當版本修改完成後再前往主戰場。控制你的成本,不要超過半年,400萬,這樣才能隨時應付外在多變市場。這些觀念很多都跟lean startup所提的一樣,小實驗大創業,最直接的方法就是快速來市場做驗證。

App行銷方法,App store是個很差的宣傳平台,必須善用網站,此法需要長時間經營,或許可以拉到一大票人,不過最有效率的方式還是透過cross-promote透過其它app彼此互相贈送或推廣。

2013年7月22日 星期一

HTML5 library


IvanK Lib is JavaScript library for 2D and 3D graphics, inspired by Flash, so it is familiar to flash developers.
http://lib.ivank.net/

COLLADA to glTF: COLLADA binary format, and will be native supported by WebGL.
(這篇簡報主要介紹glTF: 它是Khronos組織所制定的COLLADA binary format。他們點出了現在的3D format越來越注重兩個重點 --- Compression and streaming。主要是因為WebGL的誕生,3D檔案被要求越快能夠帶到使用者的面前是最重要的。然後glTF將會原生被GL API所支持。)
https://www.khronos.org/assets/uploads/developers/library/2013-siggraph-collada-bof/COLLADA-BOF_SIGGRAPH-2013.pdf

WebGL on Siggraph2013
http://developer.amd.com/community/blog/webgl-craze-at-siggraph-2013/

Holistic WebGL
http://blog.tojicode.com/2013/08/holistic-webgl.html

Html5 game engines
http://techslides.com/html5-game-engines-and-frameworks/

2013年6月27日 星期四

ThreeJS: Research

  • Convert to Json
    https://github.com/mrdoob/three.js/tree/master/utils/converters/fbx

    Download the FBX python binding from here: http://usa.autodesk.com/adsk/servlet/pc/item?siteID=123112&id=10775847  
    Install Python 2.6 after
    Install FBX Python binding

    In command line:
    convert_to_threejs.py srcfile  destfile [option]

    I recommend use [option] = -x, while you fail because of the textures from model, else pass the [option]
  • Debug Node.js
    Use node-inspector, https://github.com/dannycoates/node-inspector
    Install:
    npm install -g node-inspector
    Debug:
    node --debug server.js
    node-inspector
    open http://127.0.0.1:8080/debug?port=5858 in your favorite 
    WebKit based browser
  • Node.js
    • Post
    • Get
  • Debug JavaScript
    NetBeans supports code complete, highlight error/warning immediately. If you want to debug on browsers, you can use NetBeans Connector, but it would slow your pipeline, due to NetBeans Connector has to wait Chrome connection and receives response data from Chrome, sometimes you would have chances without the NetBeans Connector response. Therefore, finally I change my mind and use Chrome developer tool help me debug...
 

2013年5月6日 星期一

GDC 2013: HTML5





值得注意的是這次有三場都在講WebGL:

 
大致結論是,Emscripten還是沒有比直接JavaScript來的快,大概會有兩倍差距,但是如果使用asm.js則會加快CPU計算的部分,可以超過直接JavaScript

2013年4月28日 星期日

Porting a HTML5 game to mobile platform

When I read the article from Michal Budzynski that teaches me the first lesson "How to make a HTML5 game", and I try to let it also can be played fun on mobile devices. Here is the link I put on my Github: https://github.com/DaoshengMu/Simple-game-with-HTML5-Canvas/tree/master/mobile

Link: https://dl.dropboxusercontent.com/u/75721204/Html5/mobile/index.html



  1. Different screen size
    You must define different item-size for supporting different screen size. Therefore, you need to write the CSS file, CSS provides px, %, em to adjust the item size. "px" is absolute pixel of the screen. "%" means percentage of the font size. For example, your browser default font size is 12 point, 80% means you use 9.6 point. "em" is the m letter size, it has the same meaning as "%", if your em is 0.5 that means your item is 6 point. Put the mobile.css in your index.html, and define the media(resolution) you want to support.
    media="screen and (max-device-width: 768px) and (orientation: portrait),
      screen and (max-device-width: 1024px) and (orientation: landscape)"/> 
    Define the special size in mobile.css
    #mario-proto {
        position : relative;
        width : 1.625em;
        height : 2.375em;    
    }
    .mario-size {
        font-size : 40px;
    }
    
    /* use a bigger base size for tablets, in mobile.css */
    @media (min-device-width: 768px) {
        #game {
            font-size : 64px;
        }
        #game-screen .game-board {
            margin : 0.75em;
        }
        .mario-size {
            font-size : 80px;
        }
        
        .platform-size {
            font-size : 80px;
        }
    }
    

  2. User input
    If we play the game on PC browser, we can use our mouse to be the controller, but on mobile device we need to adjust our method, accelerometer is the best choice.
    Mouse move event:
     window.onmousemove = function(e) {
                mouseX = e.pageX;
                mouseY = e.pageY;
                if (player.X > mouseX) {
                    player.moveLeft();
                } else if (player.X < mouseX) {
                    player.moveRight();
                }
            };
    Accelerometer is not the official spec of W3C, so there is some complexity need to be solved:
    if (window.DeviceOrientationEvent) {   // W3C spec
            window.addEventListener("deviceorientation", function () {
             //   tilt([event.beta, event.gamma]);
             player.moveAccMove(event.gamma*0.5);
            }, true);
        } else if (window.DeviceMotionEvent) { // Some devices support it
            window.addEventListener('devicemotion', function () {      
             player.moveAccMove(event.acceleration.x);
            }, true);
        } else {   // Mozilla spec
            window.addEventListener("MozOrientation", function () {      
                player.moveAccMove(orientation.x);
            }, true);
        } 
  3. Cross-browsers
    I can sure every browsers could be supported totally, especially for accelerometer function. On iOS you can the install function to install on your desktop, and that will be an icon likes like an native app which download from app store. On Android, we can hide the address bar
     // hide the address bar on Android devices
            if (/Android/.test(navigator.userAgent)) {
                $("html")[0].style.height = "200%";
                setTimeout(function() {
                    window.scrollTo(0, 1);
                }, 0);
            }
  4. WebStorage
    If you want to save some game data on your browser, you can choose WebStorage or cache, cache just can save 4KB per domain, WebStorage can support 2MB. Therefore, we prefer WebStorage to be our first technology-choice. In WebStorage, we use key/value approach to store our data.
     var db = window.localStorage; // WebStorage 
     db.setItem(key, value); // store data to WebStorage
  5. Debugging on mobile
    https://developers.google.com/chrome-developer-tools/docs/remote-debugging
    It is very easy to debug on mobile. First, you need to download Android SDK to your PC, and then enable USB debugging on your Android device. Second, open your Chrome browser on mobile, go to the setting and enable USB web debugging. Next, open the folder where you downloaded Android SDK, go to android-sdk\platform-tools, use command-line tool enter adb devices to confirm your driver has been installed successfully. Then, enter adb forward tcp:9222 localabstract:chrome_devtools_remote , open your PC Chrome and go to the address localhost:9222,you will see the pages are the same to your mobile device Chrome. Select which page you want to debug. Now, you can debug!!!