雖然專案條是粉紅色的, 但卻是一個貨真價實 iOS 的專案, 在介接上, 用 Swift
去接 C
的 code 比較麻煩,
所以還是選擇 Objective-C
當作起手, Get a girl friend in programming
這個 Slogan 來自於 paiza,
一個靠著做 Programming 解鎖美少女配件的網站, 很喜歡這個 slogan, 所以借過來當作這個專案的副標,
至於 Live2D, 是一個可以讓繪師將圖片輸出成程式可以控制的元件, 讓程式設計師可以做出各種想像中的應用,
不會畫畫的人, 可以從官方下載 sample data 來玩, 或是我後面會慢慢把檔案輸出補齊,
這是一個 for fun, 發揮想像力的專案, 希望大家可以做出心目中的女孩, O3Ob.
- Xcode 7.2
- iOS 9.0 以上
建置的過程中有許多小地方需要注意, 為了避免自己忘記, 把這一份文件寫下來, 方便下次建置時不會再花時間, 也分享給想要嘗試 Live2D
的大家.
先到官方的網站下載最新版本的 iOS SDK, 這份文件用的版本是 2.0.06_1
, 在這邊下載 Live2D Cubism SDK
下載完之後, 解壓縮開來應該可以看見像是這樣的結構,
我們主要會需要 lib
, framework
, include
這三個部分, sample 的話可以打開來看看, 有些可以動, 有些不行, O3O.
選擇一個普通的 Single View Application
當作起手,
專案名稱任意, 這邊我們先一致叫他 MyFirstLive2DProject
開啟 Finder
, 我們移動到 MyFirstLive2DProject
這個專案下, 然後建立一個資料夾, 叫做 Live2DSDK
之後, 我們把剛剛解壓縮出來提到的三個項目(lib
, framework
, include
), 完完全全的複製過來
然後先回到 Xcode 內, 為這些檔案做些設置.
回到專案內, 我們開啟 Build Setting
分頁, 要設置幾個項目,
Other Linker Flags
, 設-lLive2D
, 前面的l
不是多打的, 就是有個l
在那
Library Search Paths
, Debug 的部分設"$(SRCROOT)/MyFirstLive2DProject/Live2DSDK/lib/$(CONFIGURATION)-$(PLATFORM_NAME)"
, Release 的部分設"$(SRCROOT)/MyFirstLive2DProject/Live2DSDK/lib/$(CONFIGURATION)-$(PLATFORM_NAME)"
User Header Search Paths
, 設置"$(SRCROOT)/MyFirstLive2DProject/Live2DSDK/include"
, Debug / Release 都是
Preprocessor Macros
, 在 Debug 與 Releease 中, 都多加入一個值L2D_TARGET_IPHONE
- Framework 加入
GLKit
,OpenGLES
都設定好之後, 往下一個部分邁進.
由於在下手殘, 美術技能不足, 因此, 所有的 model 是從官方網站 Live2D Sample Data抓下來的, 大家可以上去挑選一個喜歡的下來, 這邊我們用一個雙馬尾女僕 Haru 醬當作範例,
- 先將這個 git 專案
Download Zip
一份下來到你的硬碟裡面, 按鈕在截圖的右下角
- 解壓縮開來之後, 我們先找到
DaiLive2DViewController
,HaruViewController
,Live2DResource
這三個資料夾
DaiLive2DViewController
, HaruViewController
是我自己寫的, 在包裝上, 會減少看到 c++ 的 code, 控制上, 也會較為的簡易, 有興趣的話可以詳細的去看下面是怎麼跟 Live2DSDK
作動, 這邊就不累述了.
- 把他們複製到
MyFirstLive2DProject
- 在 Xcode 裡面先加入
DaiLive2DViewController
,HaruViewController
這兩個項目, 記得選取Create groups
- 再加入
Live2DResource
, 這個要選Create folder references
, 跟上面的是不一樣的喔, 切記!!
最後完成的時候, 目錄結構會像是這樣,
有兩個 Framework, 一個藍色的 Live2DResource
, 兩個黃色的 DaiLive2DViewController
, HaruViewController
, 然後我們終於要開始寫 code 啦, >3<
到目前的情況, 我們 build 按下去, 應該是不會出現任何的錯誤訊息, 如果有錯誤的話, 麻煩檢查一下上面的所有步驟是不是都有完整的設置.
由於 Live2D
是 c++ 的 code, 所以我們在 AppDelegate.m
裡面 init 他的時候, 需要把 AppDelegate.m
改為 AppDelegate.mm
, 然後在這裡面的 code 會像是
#import "AppDelegate.h"
#import "Live2D.h"
using namespace live2d;
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
Live2D::init();
return YES;
}
@end
在 ViewController.m
裡面的 code 會是
#import "ViewController.h"
#import "HaruViewController.h"
@interface ViewController ()
@property (nonatomic, strong) DaiLive2DViewController *live2DViewController;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.live2DViewController = [HaruViewController new];
self.live2DViewController.view.frame = self.view.bounds;
[self.view addSubview:self.live2DViewController.view];
}
@end
然後請把 HaruViewController.m
中, 有一行
self = [super initFromBundlePath:@"/Haru/model.plist"];
改為
self = [super initFromBundlePath:@"/Live2DResource/Haru/model.plist"];
主要是因為檔案路徑跟我原先的專案有些不同而已.
如果看見 Haru 醬出現在畫面裡面, 恭喜你就已經成功了!!