[titanium]用webview結合html中的javaScript – 「スカイビュー」

東京天空樹(東京スカイツリー)就要在今年的5月22日開放了!張小建說他們系為了這個活動決定要以東京天空樹來做為一次專題的題目,希望我可以幫忙一起來做一個app。正好我也想要做一個單純用titanium的webview的app,剛好就趁此機會來試一試。原本張小建取名叫做「ソラ大冒険」,但是後來又覺得在名字放漢字有點….不是那麼帥,最後就定名「スカイビュー」!

因為時間並不多,所以我就想說先上網找一個現成的小蜜蜂遊戲來改一改在放到webview就好。很順利的找到一個經典的Space Invaders遊戲。
本來長得是這個樣子:

整合到titanium後:

閱讀全文

[iphone App]関ヶ原演義リリースしました!

「関ヶ原演義」是一個有關於日本戰國時代的iphone遊戲,也是我在公司主要的工作~終於,今天在apple store跟大家見面了!

不過這個app並不是一個鈀所有東西包在app中的遊戲,玩的時候仍然需要有網路來跟server端做連結。遊戲的底層建立在日本遊戲公司モバゲー的系統上。
我負責的是裡面所有的動畫部分,也就是所以會動的地方。

第一次用html5做動畫其實沒有想像中的難,本來是考慮用canvas來畫,但是canvas在iphone 4以下的機器實在是慢到無與倫比,因此採用的是css3跟簡單的javascript來完成。
不過在app中用webView來做遊戲,很大的缺點就是下載的速度問題,所以如果在網路速度比較慢的地方,就會看到一些奇怪的缺圖的現象….

不過正常情況下應該是會蠻順的啦~呵呵!

感覺現在日本來蠻流行這種微sns的RPG遊戲,玩家用很簡單的方式可以解任務升級,然後收集寶物,結黨對戰…..
有趣嗎?嗯,玩玩看就知道囉~(招待ID請輸入【justfly】,謝謝^^)

[html5] 用canvas作動畫

為了即將要弄的iphone遊戲,實在是不得不要來理解一下html5…
雖然開頭總是一頭霧水,總之還是先把它一部分一部分的拆開來慢慢了解,為了遊戲的需求,canvas理所當然就是我的第一個目標囉~

canvas如他字面意思就是一張畫布,所以想要讓他變成像是flash一樣的動畫就得先為他加上時間軸,我是把它想像成小時候我們有時會畫在書角的小人一樣,當快速翻動時,人,就可以動起來了!
以下是實現時間軸的code:

function init(){
	canvas = document.getElementById("canvas");
	canvas.width  = WIDTH;
	canvas.height = HEIGHT;
	canvas.addEventListener("click",ctxOnClick,false);
	ctx = canvas.getContext('2d');
	//時間軸
	setInterval(drawCanvas, 1000/FPS);
}

function drawCanvas(){
	//sceneTime --;
	// console.log(sceneTime);
	for(i=0;i

也就是說,每執行一次drawCanvas,就要把canvas清空一次,然後再從「更新過」的objarr陣列中,一一把東西再畫出來。
閱讀全文