2009年11月18日星期三

香港人製作的出色XNA遊戲

微軟的XNA推出了幾年,甚少見到亞洲區有作品,其實國外一樣都不算多,始終開發一隻遊戲,粗略去做都要一年半載,程式加美術還要種種功夫,人力物力不會少,寫完出來即使自己有滿足感,但沒有人玩都好像沒有太大意思。
而且正如早前我聽過一句話:( 起香港,搞High Tech就High o野,Low Tech就真係撈o野),咁既情況下,要香港還有人去寫Game真係難上加難。

不過今日見到一個Blog,有幾個幾高質素的XNA遊戲 (當然你不能搵商業作品去比較...),一開始我見到個Blog是繁體中文,以為是台灣人。
最後看多幾下至知道原來係香港人出品!!!
其實香港已經很少熱心的人非謀利咁去做開發了,值得支持一下。

Zephyr[XNA] : 遊戲設計 X 遊戲開發
http://koetap.mysinablog.com/
Hong Kong Indie Game Development Blog
http://percytse.blogspot.com/


2009年11月17日星期二

Object Oriented CSS Framework For ASP.NET & PHP

無論你是寫網頁程式還是網頁設計,近幾年應該經常聽到Framework這個字。
Javascript有Framework (jQuery, ExtJS, Prototype...) ; PHP有Framework (Zend , CodeIgniter , CakePHP ...) ; ASP.NET本身屬.NET Framework,最近又有MVC Framework等等。

或者很多Web Designer看到"Framework"這個字,都會避之則吉,看似都是和Programming有關,但如果你忽略了的話就走寶了。

近這一年,CSS Framework慢慢冒出來,在delicious.com都開始很多同類Bookmark,亦有很多討論區開始比較各種CSS Framework。

如果你想了解什麼是CSS Framework,建議先看看這幾篇文章。
Definitive List of CSS Frameworks – Pick Your Style
CSS Frameworks: Pros and Cons
CSS framework 利弊淺見

現時CSS Framework大概分兩種,大多數的一種是本身已經定義了很多Style,例如Grid式的Table Template,Header或Footer Style,甚至排板方面都可以直接套用CSS Framework而快速建立完整Design。由於現時CSS Framework定義其實沒有很統一,不同的CSS Framework提供不同的"功能",但肯定的是,全部都輔助你快速建立Layout。

提供一個CSS Framework選擇參考連結:
10 Promising CSS Framework That Worth A Look

至於另一種亦是我有興趣的是Object Oriented CSS Framework,這種Framework是針對編寫CSS方面,和之前講的一種相反,本身並沒有包含"罐頭"的"即食"樣式。
CSS加上Object Oriented,本身兩種在網頁開發上沒有關係的字詞,很難想像到會是什麼,但看到以下例子後,如果加上少少Programming知識,你就明白箇中奧妙。

Variables
把@brand_color設定成變數重覆使用,假若日後要更改的話,只需要修改一行就可以。
@brand_color: #4D926F;

#header {
color: @brand_color;
}

h2 {
color: @brand_color;
}

Mixins
Define 名稱為rounded_corners 的 Property後,可以整個打包去其他的style中使用。
.rounded_corners {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

#header {
.rounded_corners;
}

#footer {
.rounded_corners;
}

Operations
在CSS中直接進行加減乘除計算。
@the-border: 1px;
@base-color: #111;

#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}

#footer { 
color: (@base-color + #111) * 1.5; 
}

Nested Rules
這類似是OOP的中Class。
#header {
color: red;
a { 
font-weight: bold; 
text-decoration: none; 
} 
}

使用OO寫法的CSS可以簡潔很多,而且可以重覆使用或者承繼。不過暫時OO的CSS選擇並不多。
ASP.NET 的話可以試試.less CSS就有齊以上的功能,PHP的話可以試試xCSS,兩隻都是很容易使用和Setup的。

2009年11月16日星期一

ASP.NET使用Throw中止頁面

通常新接觸ASP.NET的朋友,都會把程式碼放進Page_Load事件中,如果因為不符合某條件而要中止網頁運行的話(例如一些要檢查登入的頁面),可能會用Exit Sub(VB)或者return(C#)退出Page_Load事件。

當然如果整個載入過程只有Page_Load的話,這個做法都還可以的。但假如還有其他Stage,例如Page_Init , Page_LoadComplete... (可參考ASP.NET Page Life Cycle Overview),單純地退出Page_Load事件就可以為你帶來一些程式上的錯誤。

當然概念上,大家要注意,即使你沒有寫上其他Stage的程式碼,但Runtime時,ASP.NET都會經過的,所以不要認為只把程式碼放進Page_Load事件中,便不會觸發其他Stage Event。

以下面段Code為例,網頁載入的過程會經過三個Stage : Page_Init => Page_Load => Page_LoadComplete

假如我使用return;(Exit Sub)的話 :
partial class DefaultPage : System.Web.UI.Page
{
protected void Page_Init(object sender, System.EventArgs e)
{
object intNum = "abcde";
int _intNum = 0;
if (!Int32.TryParse(intNum, _intNum)) {
return;
}
System.Diagnostics.Debug.Print("Page_Init is Loaded.");
}

protected void Page_Load(object sender, System.EventArgs e)
{
System.Diagnostics.Debug.Print("Page_Load is Loaded.");
}

protected void Page_LoadComplete(object sender, System.EventArgs e)
{
System.Diagnostics.Debug.Print("Page_LoadComplete is Loaded.");
}
}

Output Window便會顯示出
Page_Load is Loaded.
Page_LoadComplete is Loaded.

換句話說,return並不會中止其後的事件。但如果我們使用throw的話:
partial class DefaultPage : System.Web.UI.Page
{
protected void Page_Init(object sender, System.EventArgs e)
{
object intNum = "abcde";
int _intNum = 0;
if (!Int32.TryParse(intNum, _intNum)) {
throw;
}
System.Diagnostics.Debug.Print("Page_Init is Loaded.");
}

protected void Page_Load(object sender, System.EventArgs e)
{
System.Diagnostics.Debug.Print("Page_Load is Loaded.");
}

protected void Page_LoadComplete(object sender, System.EventArgs e)
{
System.Diagnostics.Debug.Print("Page_LoadComplete is Loaded.");
}
}

這樣Page_Load和Page_LoadComplete都不會執行,而頁面會轉去錯誤信息頁。

當然throw也是一個決定性的做法,正常未必需要因為不符合要求就把瀏覽者轉向錯誤頁面。
但大家從這個範例也可以看出一些ASP.NET Page Cycle上要注意的地方。

2009年11月13日星期五

Hornil StylePix - 超強的Portable Image Editor

我在這Blog介紹過的免費Image Editor都有好幾次,之前曾經介紹過Artweaver / PicPick,不過前者開始商業化,後者就不支援Layer而且功能比較少,雖然Paint.NET前幾天終於推出3.5版本,不過Paint.NET的Lasso Tool依然沒有改進,很難使用,所以我再物色一下有什麼新軟件。

今次介紹這個叫Hornil StylePix,韓國人出品。
這個Software幾好用的,介面很似Photoshop,除了基本應該有的修圖功能。
更支援Filter,Layer,和Batch processing,這幾個功能都是很多免費軟件都缺乏的,中文字支援方面我試過沒有問題。
Hornil StylePix更有Portable版本供選擇。

Download Hornil StylePix
http://hornil.com
Hornil StylePix功能說明
http://hornil.com/en/products/stylepix/features.html
Hornil StylePix Screen Shot
http://hornil.com/en/products/stylepix/screenshots.html

2009年11月12日星期四

Javascript - Passing arguments as Function

在Javascript中,Call Function絕對不會陌生,但如果有若干數量的Function因應不同的情況才Call怎麼辦呢?
當然有很多可能性,其中最常見的亦是傳統做法不外乎
if..(condition)..then...
function1();
function2();
function3();
...
而我的做法就是自行寫一個Helper,用Array以arguments型式去呼叫Function。
function SayGoodBye()
{
   $('#hello').html('GoodBye');
}

function SeeYou()
{
   $('#hello').html($('#hello').html() + ',' + 'See you next time!');
}

function caller(aryfunc)
{
   $.each(aryfunc,function(i,n) //用jQuery的each
     {  Function.call(n());  }
   );
}

$(document).ready(function() { 
  //if..(condition)..then...
  var myFunc = new Array(SayGoodBye,SeeYou); //and more...
  caller(myFunc); //Print out : GoodBye,See you next time!
}); 
<div id="hello"></div>

這就可以把 condition 移至外部,用Helper去呼叫Function更加靈活。而且Array中的項目,Function的arguments不只是資料型態(String,Int...),更可以是function()吧。

PhotoImpact正式死亡

今晚上Corel睇下有冇新版本,誰不知完全找不到產品介紹頁,連Download都沒有了。
再去Corel的官方討論區,連PhotoImpact的版塊都刪除了,已經心知不妙~回到Ulead的官方討論區看,果然Corel已經停止開發PhotoImpact,而且是想PI消失於世上,連未代的X3版本都不再出售。
可以看看這Post,Ulead前公司的人員都証實了 -
Photoimpact Dead ?
http://phpbb.ulead.com.tw/EN/viewtopic.php?t=35779
Corel已經前後殺死幾個好用的軟件,例如COOL 3D, GIF Animator, MediaStudio Pro...

其實我都不知Corel收購Ulead幹什麼,我又不覺得Corel的PaintShop Pro好用過PhotoImpact。(而且PaintShop Pro都是收購自Jasc)

PI我由第5代用到最後的X3,前前後後都有10年有多的時間,軟件來說都算是有感情的一個。

2009年11月7日星期六

jQuery - 當Javascript Ajax遇上Loop

之前已經略略打過一篇jQuery 的Async和sync的問題:
jQuery – Why Ajax return blank data?

近日我再次遇上近似的問題,我把一段jQuery.ajax 放在一段For...Loop中運行,發現同樣會出現同步問題。
再次上網查證一下,發現原來這不是jQuery的問題,問題在於Javascript原生的XMLHttpRequest和Synchronous問題。

出現問題的程式碼如下:
ASP.NET 2.0 Web Service :
<WebMethod()> _
Public Function returnString(ByVal inputString As String) As String
Return inputString
End Function

網頁上的jQuery Ajax CallBack :
<script type="text/javascript">
$(document).ready(function () { 
for (var i = 1 ;i <= 10;i++)
{
var Options= {
type: "POST",
url: "webservice/DataService.asmx/returnString",
data:'{ inputString: ' + i +'}',
async: "true",
contentType: "application/json; charset=utf-8",
dataType: "JSON",
success: function(response)  { alert(response);  } 
} 
$.ajax(Options); 
}
});
</script>

運行程式後,得出的alert不是順序的12345678910,有可能是4231789...或者9714523。
最後把async設成false就可以解決問題,但是運行時,Browser會呈現硬直狀態。
解決方法雖然是找到了,但是為什麼會這樣?
可以睇睇國外高手的Blog文:
Ajax and javascript don't use threads
Ajax, javascript and threads : the final truth

睇過之後,不難理解為什麼會出現這個同步問題。