Posts

Showing posts from 2013

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

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 modelsUse low-res texturesReduce the number of drawcalls as much as possible by merging geometrySimplify materials and lightingRemove post effects and turn off antialiasingOptimise Javascript performanceRender the WebGL canvas at half size and scale up with CSSReference:
http://www.html5rocks.com/en/tutorials/casestudies/hobbit/
http://middle-earth.thehobbit.com/trollshaw/experience


Design your mobile app using JQuery mobile preview tool

Get married II

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

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

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

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

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

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

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



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

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

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

這場婚宴滿是對朋友的感謝,…

Get married I

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

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

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

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

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

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

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

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

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

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

Live editing WebGL shaders with Firefox Developer Tools

Hewlett-Packard 精神

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

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

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; }

Solid-wireframe model using OpenGL/Direct3D

Image
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: http://msdn.microsoft.com/en-us/library/windows/desktop/bb205599(v=vs.85).aspx
http://lwjgl.org/forum/index.php?topic=1162.0;wap2

Coca-Cola Mini-Me (3D printing)

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彼此互相贈送或推廣。

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/

ThreeJS: Research

Image
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-inspectorDebug:
node --debug server.js node-inspector open http://127.0.0.1:8080/debug?port=5858 in your favorite WebKit based browserNode.js

GDC 2013: HTML5

Image

Porting a HTML5 game to mobile platform

Image
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



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…