Cocos2D 教學影片

在寫遊戲的過程中，有很多的技巧和寫一般的程式很不同，尤其是一些動畫和遊戲中物件的互動方式，讓我花了很多的時間在網路上找相關的資料。在找資料的過程中，cocos2D這個字一直出現在我的搜尋結果裡，我只知道它是一個“物理引擎”， Angry Bird就是用cocos2D（正確的說法應該是Box2D）來做到像是被彈弓射出去的鳥，或是被鳥打到垮掉的房子等。一聽起來就很艱深的感覺，所以我就一直對cocos2D視而不見，覺得那是寫遊戲的大公司才會用到的工具。

直到昨天看到了這段教學影片，突然覺得茅塞頓開、有如醍醐灌頂，原來是這麼簡單啊！如果早個幾個月看到這段影片，有很多的功能我就不必寫了幾百行的程式只為了達到cocos2D寫個2行程式的功能。一共有20段影片，每一段都十分鐘左右，大概專心的花個2天看完，功力應該就可以比自已花1個月看書來的高強了。以下是第一段影片，每一段影片完後都會出現下一堂課的影片，如果對遊戲製作有興趣的人，絕對值得花幾個小時的時間把這些影片看完。

從電影來的靈感

在設計iphone APP UI的時侯，我會習慣性的重覆看Mark Coleran的作品來找靈感， Mark Coleran幫很多的電影設計過在電影裡出現的華麗具科技感的電腦畫面，大家看了以下的demo影片應該會覺得很熟悉。

Mark Coleran帶給我最大的靈感不是畫面的設計而已，我從他的設計裡學到很多過場效果的呈現。我覺得一個APP能讓使用者有“哇”的感覺，最重要的元素就是音效和動畫。每一次使用者點擊螢幕都是充滿期待，如果程式的回應只是安靜的直接換個畫面，雖然不至於讓使用者失望，但是就好像少了點什麼吸引人的元素。

我在每個APP設計時在找適合的音效和設計動畫的呈現上都花了很多的時間，但是得到正面的回應都會讓我覺得這時間花的很值得。

下次再來分享鋼鐵人HUD畫面的實作方法。

這裡是Mark Coleran的網頁，非常的具有參考價值。

用AVAudioRecorder感應聲音

這是一個還沒有完成的app, 這2年其實還有不少寫到一半就荒癈的程式，有時侯是靈感沒了，有時侯是突然有別的想法就全心投入另一件事了，有時侯是突然接到案子，有錢賺的事當然優先，所以就丟下做到一半的事。當初想寫這個app是因為我姐剛生了小baby, 我就想寫一個app是可以感應到baby的哭聲，然後就會開始放安撫小孩的音樂。因為當初我女兒小時侯有一個類似的玩具，就是小孩哭的時侯他會自已播音樂，我覺得iphone應該也能做到同樣的功能。

當初我是設計了白天模式與夜晚模式可以切換，白天模式（其實也不一定是白天用，就是手動模式）可以自已選曲，自已手動啟動，就像是個音樂盒，大人可以手動播音樂給baby聽。夜間模式就是大家都睡了的時侯，他會自動偵測是不是有baby的哭聲，如果偵測到了，就會自已播放音樂安撫baby。

怎麼去設定感應的敏感度下次再談，等一下要出門去吃喜酒，先把怎麼設感應聲音的功能分享一下，免得又忘了。

在.h先import AVFoundation

#import <AVFoundation/AVFoundation.h>

然後宣告

AVAudioRecorder *recorder;

在.m的ViewDidLoad裡init recorder

recorder = [[AVAudioRecorder alloc] initWithURL:url settings:settings error:&error];

設定一個NSTimer固定頻率去偵測有沒有哭聲

-(void)levelTimerCallback:(NSTimer *)timer{

[recorder updateMeters];

const double ALPHA = 0.05;

  double peakPowerForChannel = pow(10, (0.05 *[recorder peakPowerForChannel:0]));

  lowPassResults = ALPHA * peakPowerForChannel + (1.0 - ALPHA) * lowPassResults;

  if (pause = NO) {

  if (lowPassResults > senseValue) {

  NSLog(@"baby cry detected");

  [playSong play];

  playing = YES;

  [playStatus setImage:[UIImage imageNamed:@"StopIcon.png"]];

  }

  }

}

先出門了，還沒完，下次再補...sorry....

App of the Week - Picture Show

現在是怎麼樣，每一個APP都要拍一段這麼美的Demo嗎？那叫我們這種一人工作室怎麼活下去呢？

   

今天要推薦的是這個我最常用的拍照APP - Picture Show。與其說是拍照APP，它應該比較算是後製APP。同樣的，第一眼會吸引我的都是它特別美的UI, 在操作後更吸引我的是它真是什麼拍照軟體該有的後製功能都有，而且操作起來不會憋手憋腳的感覺，很直覺，也很流暢。

我也寫過類似的拍照APP, 是在發現Picture Show前寫的，後來才發現Picture Show完全是我要寫出來的樣子，而且比我能寫出來的好多了，所以我的拍照APP現在又變成另一個荒癈的專案，被塵封在“未完成的專案”目錄中。不過那支程式裡也滿多部份可以分享的，有機會再來分享拍照相機的一些實作方法。

有興趣可以參考一下這家公司的網站：Picture Show

UIView 同時移動、旋轉、放大的作法

在orderGear裡有個我很喜歡的動畫效果，就是如果點選左手邊的菜色相片，它就會移動到畫面的中央並放大、轉正。

點選前：

點選後：

這裡來示範一下怎麼用setAnimation來實作這樣的效果。

先在.h宣告

IBOutlet UIView *photoframeView_4;


因為這張看似拍立得的相片中包含了相片、框、菜名、按揵等好幾個物件，所以設定為UIView來包含所有物件, 而不是用UIImageView, 如果只有一張圖的時侯還是可以用UIImageView。

然後在.m實作一個IBAction，就是當按下這張相片時的動作。

-(IBAction) showEnlargePhotoframe:(id)sender{

   CGPoint photoframe_4CurrentPOS = photoframeView_4.center;

photoframe_4CurrentPOS.x = 142; //移動前的x座標

photoframe_4CurrentPOS.y = 573; //移動前的y座標

photoframeView_4.center = photoframe_4CurrentPOS;

float angle_4  = -14*(PI/100); //原來旋轉的角度

CGAffineTransform transformRotate_4 = CGAffineTransformMakeRotation(angle_4);

CGAffineTransform transform_4 = CGAffineTransformScale(transformRotate_4, 0.36, 0.36); //原來的大小（原本尺寸縮到36%的大小)

[photoframeView_4 setTransform:transform_4];

[UIView beginAnimations:nil context:nil];

[UIView setAnimationDuration:0.5f];

[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];

photoframeView_4.hidden = NO;

enlargeButton_4.hidden = YES; //隱藏放大的按鍵

normalButton_4.hidden = NO; //顯示放大後的按鍵

photoframe_4CurrentPOS.x = 512; //移動後的x座標

photoframe_4CurrentPOS.y = 374; //移動後的y座標

photoframeView_4.center = photoframe_4CurrentPOS;

angle_4  = 0*(PI/100); //旋轉UIView成正的

transformRotate_4 = CGAffineTransformMakeRotation(angle_4);

transform_4 = CGAffineTransformScale(transformRotate_4, 1, 1); //放大回原本大小

[photoframeView_4 setTransform:transform_4];

[UIView commitAnimations]; //執行動畫

}

所以，與其說是點選後開始變型(transform), 不如說是讓原本又小又歪的圖在點選後回復成原本的角度和大小。

Introduce Order Gear

Introduce 樂田麵包屋 (Game)