2013年6月25日火曜日

テクスチャ画像の圧縮

1メモリに確保するテクスチャ画像を圧縮する方法としてPVRTCアルゴリズムをiPhoneのGPUであるPowerVR MBX/SGXで利用可能です。

1. ファイルの変換方法

[準備] 
パスを追加
$ vi ~/.bash_profile 
export PATH=$PATH:/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin

[利用方法]
$ texturetool  --bits-per-pixels-2 --channel-weighting-linear  ¥
    -e PVRTC -fPVR -o output.pvr  input.png

   --bits-per-pixels-2     2bit(サイズ1/16)    
   --bits-per-pixels-4    4bit(サイズ1/8)

   --channel-weighting-linear   誤差をRGBに均等に分散  
   --channel-weighting-perceptual  緑を優先に
  -m  ミップマップをつける(ファイルサイズが 1.3倍になる)

[変換サイズ例]
input.png     328kB(パレットカラー) 非圧縮だと4MB
output-2.pvr    256kB
output-4.pvr    512kB

2. テクスチャとして読み込む方法

const char PVRIdentifier[4] = { 'P', 'V', 'R', '!' };
enum Constants {
    PVR_FLAG_TYPE_PVRTC_2 = 24,
    PVR_FLAG_TYPE_PVRTC_4 = 25,
    PVR_FLAG_TYPE_MASK    = 0xff,
    PVR_MAX_SURFACES      = 16
};
struct Header {
    uint32_t headerSize;
    uint32_t height;
    uint32_t width;
    uint32_t numMipmaps;
    uint32_t flags;
    uint32_t dataSize;
    uint32_t bpp;
    uint32_t bitmaskRed;
    uint32_t bitmaskGreen;
    uint32_t bitmaskBlue;
    uint32_t bitmaskAlpha;
    uint32_t tag;
    uint32_t numSurfaces;
};
struct Surface {
    GLuint      size;
    const void* bits;
};

static void _loadCompressedTexture( const char* fname, 
    uint *texture, uint *_width, uint *_height) {
    
    char *buf;
    GLuint  width, height;
    GLenum format;
    //bool    hasAlpha;
    GLuint  numSurfaces;
    Surface surfaces[PVR_MAX_SURFACES];
    
    NSString* fileLocation = [[NSBundle mainBundle] 
           pathForResource:[NSString stringWithUTF8String:fname] ofType:@""];
    std::ifstream f;
    f.open([fileLocation UTF8String]);
    if(!f.good())
        return;
    
    f.seekg(0, std::ios::end);
    int size = f.tellg();
    f.seekg(0, std::ios::beg);
    buf = new char[size];
    f.read(buf, size);
    const Header& header = *reinterpret_cast(buf);
    uint32_t      tag    = OSSwapLittleToHostInt32(header.tag);
    if(PVRIdentifier[0] != ((tag >>  0) & 0xff) ||
       PVRIdentifier[1] != ((tag >>  8) & 0xff) ||
       PVRIdentifier[2] != ((tag >> 16) & 0xff) ||
       PVRIdentifier[3] != ((tag >> 24) & 0xff)) {
        return;
    }
    uint32_t flags       = OSSwapLittleToHostInt32(header.flags);
    uint32_t formatFlags = flags & PVR_FLAG_TYPE_MASK;
    if(formatFlags == PVR_FLAG_TYPE_PVRTC_4 
        || formatFlags == PVR_FLAG_TYPE_PVRTC_2) {
        if(formatFlags == PVR_FLAG_TYPE_PVRTC_4)
            format = GL_COMPRESSED_RGBA_PVRTC_4BPPV1_IMG;
        else if(formatFlags == PVR_FLAG_TYPE_PVRTC_2)
            format = GL_COMPRESSED_RGBA_PVRTC_2BPPV1_IMG;
        else
            return; // false;
        
        width       = OSSwapLittleToHostInt32(header.width);
        height      = OSSwapLittleToHostInt32(header.height);
       // hasAlpha    = OSSwapLittleToHostInt32(header.bitmaskAlpha) ? true : false;
        numSurfaces = 0;
        
        GLuint         w      = width;
        GLuint         h      = height;
        GLuint         offset = 0;
        GLuint         size   = OSSwapLittleToHostInt32(header.dataSize);
        const uint8_t* pBytes = reinterpret_cast(buf) + sizeof(header);
        
        while(offset < size && numSurfaces < PVR_MAX_SURFACES) {
            GLuint   blockSize, widthBlocks, heightBlocks, bpp;
            Surface& surface = surfaces[numSurfaces++];
            
            if (formatFlags == PVR_FLAG_TYPE_PVRTC_4) {
                blockSize    = 4 * 4;
                widthBlocks  = w / 4;
                heightBlocks = h / 4;
                bpp = 4;
            } else {
                blockSize    = 8 * 4;
                widthBlocks  = w / 8;
                heightBlocks = h / 4;
                bpp = 2;
            }
            
            if (widthBlocks < 2)
                widthBlocks = 2;
            if (heightBlocks < 2)
                heightBlocks = 2;
            
            surface.size = widthBlocks * heightBlocks * ((blockSize  * bpp) / 8);
            surface.bits = &pBytes[offset];
            
            (w >>= 1) || (w = 1);
            (h >>= 1) || (h = 1);
            offset += surface.size;
        }
        
        if(numSurfaces <= 0) return;
        
        // テクスチャに登録
        w = width;
        h = height;
        (*_width) = width;
        (*_height) = height;
        
        for(GLuint i = 0 ; i < numSurfaces ; ++i)
        {
            const Surface& surface = surfaces[i];

            glGenTextures(1, texture);
            glBindTexture(GL_TEXTURE_2D, (*texture) );
            // テクスチャの設定を行う
            // glEnable(GL_TEXTURE_2D);
            glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
            glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
            glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
            glEnable(GL_BLEND);
            glDisable(GL_DEPTH_TEST);

            glCompressedTexImage2D(GL_TEXTURE_2D,
                                   i,
                                   format,
                                   w,
                                   h,
                                   0,
                                   surface.size,
                                   surface.bits);
            (w >>= 1) || (w = 1);
            (h >>= 1) || (h = 1);
        }
        glBindTexture(GL_TEXTURE_2D, 0 );
        free(buf);
    }
}

3. 結果

圧縮画像を使用するとメモリ使用量が50%以下に低減した(1/8, 1/16まで小さくはならなかった)。2bit/4bitの圧縮はイラストだと線の描画でジャギーが目立つ。

自然画像を多用する場合は、iPhoneに限りPVTRCを利用することを検討するのが良いと思う。

参考



2013年6月24日月曜日

プロジェクトの新規開始

iOS/Android 両対応のプロジェクトの作成方法についてもう一度整理する。

プロジェクト名: Sample2     パッケージ名: jp.hoge.hoge  とする

1. プロジェクトを新規作成してgitに登録

1.1 プロジェクトの作成と環境設定
$ pwd
/cocos/cocos2d-x-2.1.4/tools/project-creator
$ ./create_project.py -project Sample2 -package jp.hoge.hoge -language cpp
$ cd ../../projects/Sample2/proj.android/
$ vi build_native.sh
APPNAME="Sample2"  // この次の行に追加
NDK_ROOT=/cocos/android-ndk-r8e

Eclipseに登録 & ビルド
1.  File>New>Other     Android>Android Project From Existing Code
     /cocos/cocos2d-x-2.1.4/cocos2dx を開いて libcocos2dxプロジェクトを開く
2. 同じ手順で
   /cocos/cocos2d-x-2.1.4/projects/Sample2/proj.android を開き、Sample2プロジェクトを開く
3. Sample2/AndroidManifest.xml   Manifest Extras>Uses Sdkで 
    Min SDK Versionを 8 から 14に変更
4. ビルド実行 (Command + b)  エラーが無くなるまで
5. Sample2プロジェクトを右クリック>Run As>Android Application
    初回の場合はVMを設定すれば Android Simulatorが起動
6. スクリーンロックを解除、しばらくするとEclipseのLogCatが更新されアプリが起動する

Xcodeに登録 & ビルド
1. proj.ios/を選択 Terminalの場合はopen . でファインダを開く
    Sample2.xcodeprojからXcodeを起動
2. 左上のSchemaを cocos2dx/デバイス   から  Sample2/iPhone6.1 Simulatorを選択
3. ビルド(Command +b)  して実行(Command +r)

git でバージョン管理下させて、レポジトリに送信
$ pwd
/cocos/cocos2d-x-2.1.4/projects/Sample2
$ git init 
$ git add .
$ git commit -m "first commit"
$ git remote add origin https://git.codebreak.com/xxxxx/Sample2.git
$ git push -u origin master
Username for 'https://git.codebreak.com': username (登録したユーザネーム)
Password for 'https://username@git.codebreak.com': xxxxxxxx

== ファイルの追加
Resources/{large|medium|small|bgm} フォルダを作成しファイルを格納
→ Xcode にドラッグする。この時  Foldersの設定を2つ目のfolder referencesを作成する
ファイルを修正 &追加しプログラムがきちんと動作することを確認(Xcode & Eclipse)

$ git add .
$ git status (追加(new file)、修正(modified)ファイル一覧が表示)
$ git push 

== gitプロジェクトのスリム化
- iOS、Android以外のプロジェクトを削除
$ git rm  -r proj.blackberry/ proj.marmalade/ proj.mac/ proj.linux/ proj.win32/

- .DS_Storeを除外する
$ pwd
/cocos/cocos2d-x-2.1.4/projects/Sample2
$ vi .gitignore
.DS_Store
- すでに取り込んでしまったファイルを削除
$ find . -name .DS_Store -print0 | xargs -0 git rm

$ git commit -m "clean DS_Store and other projects"
$ git push







  

2013年6月19日水曜日

gitによるバージョン管理

将来の複数人開発や、一人開発でもある時点に戻したいことはよくあるためgitの使い方を整理しておきます。

1. 開発中の作業

開発中は チェックアウト→ 修正 → ローカルコミット→マージ→ローカルコミット→プッシュ の基本の流れと、修正を取り消すことが主な作業となるので整理します。
 
$ git clone git://localhost/test2.git
$ cd test2
== ファイルを追加、削除、ファイル移動
$ touch "hoge" > newfile.txt
$ git add .     
$ rm currentfile.txt
$ git rm currentfile.txt
$ git mv test.txt rename.txt 


== 状況確認, コミット
$ git status   // どのファイルが追加・編集・削除 されたか
$ git diff        // ローカルレポジトリとの比較
$ git commit -m "コメント"

== レポジトリの確認
$ git log      // コミット日時とコメント一覧

== もとに戻す
$ git reset --hard commit_hash  
# 指定したコミットにローカルリポジトリ、インデックスを完全に戻す。
# コミットしていない状態に戻り無かったことになる

$ git reset --soft HEAD~  
# 1つ前のコミットに戻す。ワーキングツリー・インデックスファイルは影響しない

$ git reset --mixed HEAD~  
# 1つ前のコミットにインデックス・リポジトリを戻す。ワーキングツリーには影響しない

2. バージョン管理開始や移行作業

gitへの登録やgitサーバを切り替えるときの作業。合わせてgitサーバをMacで起動する方法も整理する。

2.1 gitサーバの起動

標準のgit-daemonを利用してgitサーバを構築します。

== テスト用レポジトリの作成
$ cd /cocos/repositories   ## ここをgitのレポジトリとする
$ mkdir test1.git
$ cd test1.git
$ git init --bare --shared
Initialized empty Git repository in /cocos/repositories/test1/

== git-daemonを起動
$ /usr/libexec/git-core/git-daemon --verbose --export-all ¥
--enable=receive-pack --base-path=/cocos/repositories &
 [16161] Ready to rumble

== 別ウィンドウ・ディレクトリでチェックアウトとコミットのテスト
$ cd 
$ git clone git://localhost/test1.git
Cloning into 'test1'...
warning: You appear to have cloned an empty repository.
$ cd test1
$ ls
$ echo "test" > text.txt
$ git add .
$ git commit -m "initial commit"  // 初回は名前とメールアドレスを自動設定したとのメッセージが表示
$ git config --global user.name "Name"    // 適当に設定する
$ git config --global user.email "hoge@gmail.com"
$ git remote add origin git://localhost/test1.git
$ git push -u origin master
Counting objects: 3, done.
Writing objects: 100% (3/3), 219 bytes, done.
Total 3 (delta 0), reused 0 (delta 0)
To git://localhost/test1.git
 * [new branch]      master -> master

よく使うコマンドはこちら

2.2 別gitからのパッケージ移行

 
$ git remote -v     # 現在のリモートレポジトリを確認
origin git://localhost/test1.git (fetch)
origin git://localhost/test1.git (push)

$ git remote set-url origin git://localhost/test2.git
$ git remote -v
origin git://localhost/test2.git (fetch)
origin git://localhost/test2.git (push)

$ git push 

2.3 外部のgitサービスを利用

$ cd tmp   ⇐ フォルダ名はなんでもいい
$ touch README.md   
$ git init
Initialized empty Git repository in /Users/xxxxx/tmp/.git/
$ git add README.md 
$ git commit -m "first commit"
[master (root-commit) 2af2742] first commit
 0 files changed
 create mode 100644 README.md
$ git remote add origin https://git.codebreak.com/xxxxx/hoge.git
$ git push -u origin master       ⇐ originをレポジトリのmasterにして送信
Username for 'https://git.codebreak.com': xxxxxxxx
Password for 'https://xxxxx@git.codebreak.com':  xxxxxxx 
Counting objects: 3, done.
Writing objects: 100% (3/3), 204 bytes, done.
Total 3 (delta 0), reused 0 (delta 0)
remote: Updating references: 100% (1/1)
To https://git.codebreak.com/xxxxxx/hoge.git
 * [new branch]      master -> master
Branch master set up to track remote branch master from origin.

$ cd 
$ git clone https://git.codebreak.com/xxxx/hoge.git
$ cd hoge
$ ls 
README.md




Jenkinsを利用した自動化

Jenkinsを使ってユニットテストやビルドを自動化する手順について模索します。

(とりあえず書きなぐっているのでAndroidまで調べきれたら綺麗にしますのであしからず。。。)


1. 環境構築

1.1 プログラムのインストール

Homebrew(Mac OSXのフリーウェアパッケージツール)をインストール
http://mxcl.github.io/homebrew/index_ja.html  より
$ ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

$ brew doctor   // インストールが上手く行ったか確認
$ brew update  // パッケージの更新
$ brew install git    // gitのインストール
$ brew install jenkins   // jenkinsのインストール
$ ln -sfv /usr/local/opt/jenkins/*.plist ~/Library/LaunchAgents
$ launchctl load ~/Library/LaunchAgents/homebrew.mxcl.jenkins.plist
  → Java SDKがない場合インストールが求められる
$ launchctl start homebrew.mxcl.jenkins
$ launchctl list|grep jenkins
10746 - homebrew.mxcl.jenkins  // PID, ステータス(0/143=停止  -=起動中)
Jenkinsを停止・削除する方法
$ launchctl stop jenkins
$ launchctl unload ~/Library/LaunchAgents/homebrew.mxcl.jenkins.plist

1.2 Jenkinsの設定

http://localhost:8080 にアクセス
Jenkinsの管理
       プラグインの管理 > 以下のプラグインを検索してインストール
           Xcode plugin, git plugin, android emulator plugin, multiple SCMs plugin
       システムの設定> インストール済みGit ボタンをクリック
                  > 名前(任意)  インストールディレクトリ(/usr/bin/git) > 保存

2. プロジェクトのビルド

2.1 iOSのビルド

新規ビルドを作成 > ジョブ名(例 Xcode)、フリースタイルプロジェクトのビルドにチェック
  [ローカルに保存したプロジェクトの場合] ソースコード管理 なし
      Target RecipeBook
      SDK    iphonesimulator6.1
      Configuration Release→ Debugに
      Xcode Project Directory /cocos/cocos2dx_recipe-master/projects/RecipeBook/proj.ios
      Xcode Project File      RecipeBook.xcodeproj
  [gitから取得する場合] ソースコード管理git
     リポジトリのURL(git@github.com:syuhari/cocos2dx_recipe.git)、ブランチ名(必要に応じて)を入力
     ビルド手順の追加>Xcode    build IPA?をチェック
     ビルド後の処理の追加 > 成果物の保存    build/**/*.ipa

トップ画面に今のジョブが表示される 一番右の「実行」アイコンをクリック

2.2 Androidのビルド

Jenkinsを使う前にコマンドラインの使い方を調べておく
$ cd proj.android/
$ ./build_native.sh clean  // クリーン(Errorとなるが成功はしている)
$ ./build_native.sh NDK_DEBUG=1
$ ant debug install -Dsdk.dir=/cocos/adt-bundle-mac-x86_64-20130522/sdk   // パッケージのインストール
$ ./ndkgdb.sh  // gdbの実行 ????

2013年6月18日火曜日

実機(リリース環境)での動作。。。途中まで

Apple App StoreとGoogle Playへの配布方法をまとめておきたいと思います。まだ、完成には程遠いのでここでは作業手順のまとめまでとします。また開発用実機での動作と同じ手順であればこちらを見てください。

1. Apple App Storeでの配布

1.1 アプリアップロードまでの準備

すること設定内容
スクリーンショットの取得1. 実機にてアプリを起動させてからXCode > Organizerを開く
2. 接続したデバイスの「Screen Shots」を選び右下の「New Screenshot」でスクリーンショットを記録
バージョンを1.0にios/Info.plist で 「Bundle Version」が1.0になっていることを確認
証明書と
プロビジョニング
ファイルの登録
[証明書]
iOS SupportのCertificates... 画面のCertificates > +
  ProductionのApp Store and Ad Hocを選択
  証明書ファイル(CertificateSigningRequest.certSigningRequest)をアップロード
  生成された証明書ファイル(ios_distribution.cer)を開いて
  キーチェーンアクセスに登録

[プロビジョニングプロファイル]
同画面のProvisioning Profiles > +
  プロファイルの選択 Distribution  > App Store もしくは Ad Hocを選択
   App IDの選択(開発時と同じ)、証明書の選択(同左)
   [Ad Hocの場合] 実行する端末の選択
   プロファイル名の設定 (例:Sample2AppStore)
   生成されたプロビジョニングプロファイルファイル
   (Sample2AppStore.mobileprovision)を開いてキーチェーンアクセスに登録
アプリの登録準備iTunes Connect画面 Manage Your Apps(右上) > Add New APPS
   Default Languate(ja), App Name(製品名)、
      SKU Number(任意の番号(10000とする))Bundle ID (実機開発と同じもの)
   Availability Date(有効日)  Price Tier(Free, Tier1=85円など)
   バージョン(1.0), コピーライト(会社名など)、
   カテゴリ  最大2つ (例 Education, Life Style)
        Rating (暴力、性描写、アルコール、タバコ、ホラー、ギャンブル)なければすべてNone
        Description (説明)、キーワード、サポートURL
        コンタクト情報(氏名、メールアドレス、電話番号(+81から))
        アイコン画像 (1024x1024px), スクリーンショット(※)の登録
        ※ iPhone(3.5[960x640]/4 inch[1136x640]), iPad[1024x768]

1.2 アプリのアップロード

  1. プロジェクトアイコン(左の一番上)をクリック > TARGETSで今回のアプリ > Build Settings > Code Signing > Release/Any iOS SDK に
    iPhone Distribution を選択
  2. Product > Schema > Edit Scheme > Archive で
    Build Configuration をDebugからDistributionに変更してOK
  3. Product > Archiveで配布用ビルドを実行
  4. Organizerを開き Archiveタブから配布したいプロジェクトを選択してDistribute
  5. (許可とiTunes Connectのログインが何回か求められる)
  6. [AppStoreの場合]
    1.  Submit to the iOS App Store
    2. 送信が完了すると iTunes Connect のステータスがReady for UploadからWaiting for Reviewになる
    3. 審査が開始するとIn Reviewとなり、Ready for sale となると指定した日から公開される(1-2週間)。何らかの問題があるとRejectedとなる
  7. [Ad Hocの場合]
    1. Save for Enterprize or a Ad-Hoc Deployment
    2. ipaファイルを保存するよう求められる
    3. ipaファイルを登録したデバイスと同期しているiTunesにドラッグするとインストールできる
[エラーケース]

  • Product>Archive作成時にCode Signing Errorとなりビルドできなかった→ プロビジョニングプロファイルを入れ忘れた
  • cocos2dx.xcodeprojが別で開いているのがありビルドできない→一旦Xcodeを終了させてからこのプロジェクトのみ開く

関連するファイルや設定がややこしいので図にまとめました。




2. Google Playでの配布

1.1 アプリアップロード

すること設定内容
スクリーンショット
取得
アイコン作成
- 1辺 320px 以上で 2つ以上
- 512x512px のアイコン
バージョンを1.0にAndroidManifest.xmlのManifestタブで次の値となっていること
version code = 1
version name = 1.0
証明書と
パッケージの作成
[証明書とパッケージの作成]
プロジェクトを右クリック> Android Tools > Export Signed Package
  → プロジェクトはそのままで 次へ
  → Keystore selectionで Existing ... から「Create new keystore」を選択
        Locationは任意(たとえば プロジェクトproj.android/market.keystoreとする)
        パスワードも任意に設定して 次へ
  → エイリアス(例 プロジェクト名と同じ)、パスワード(任意)
      有効期限(例 25年)  
      姓名、組織名=組織、県名、地方名、国名(JP) → 次へ
  → apkファイルの名前と保存先(例 proj.android/(プロジェクト名).apk)
アプリの登録Google Play Development Consoleに「新しいアプリを追加」
apk: 先ほど作成したapkファイルを登録
ストアの掲載情報: タイトル、説明
                           スクリーンショット(2つ以上)
                           高解像度アイコン(512x512px)
                           アプリのタイプ、カテゴリ、コンテンツレーティング
                           Webサイト もしくは メール
                           プライバシーポリシー(とりあえずURLは送信しないにチェック)
価格と販売/配布地域: 無料で日本のみ選択
                      同意事項すべてチェック(マーケティングの除外、コンテンツガイドライン、米国輸出法)

→ 3つの項目にチェックが付けばOK
→ ストアの掲載情報で右上の「公開準備の完了」を「ストアに公開」とすれば
    2-3時間でストアから検索できるようになる


2013年6月16日日曜日

最初のシーン、ボタン

今日からはXcode(iOS) →  Androidの順に進めていこうと思います。

[今回の内容]

  • 2つのシーンを作成してボタンで入れ替える
  • アプリアイコンを整備

 1. 全体設定

したいこと設定内容
画面を縦向きにするプロジェクトの設定  Target > Sample2 で
  iPhone/iPad Deployment Info > Supported Interface Orientation
     最初の2つ(Portrait, Upside Down)のみ有効にする (× Landscape Left|Right)
ホームを押したら終了Info.plistの設定(バックグラウンドで動作させたくない)
Application does not run in background = YES
アプリ名の変更プロジェクトの設定 Target > Sample2で
   Bundle display nameを $(PROJECT_NAME} から 任意の文字に変更
   (6文字を超えると途中が..になる)
起動時の画像の変更(詳細はもう一度調べる)
proj.ios/ の以下の2ファイルを置き換え
 Default.png    320x480
 Default@2x.png    640x960
 Default-568h@2x.png    640x1136  → 容量節約として消す
[エラーケース] アプリ名と次のアプリアイコンは、すでにインストールしていたものを削除しないと反映されない

2. アプリアイコン

端末の種類や解像度ごとに用意しておきます。
保存ディレクトリ ファイル名 解像度 用途
proj.ios/Icon-57.png 57x57 iPhone3ホーム
Icon-72.png72x72 iPad ホーム
Icon-114.png 114x114 iPhone4~ ホーム
Icon-144.png 144x144 iPad2~ ホーム
proj.android/
res/
drawable-ldpi/
icon.png
36x36 100-140dpi
drawable-mdpi/
icon.png
48x48 140-180dpi
drawable-hdpi/
icon.png
72x72190-250dpi
drawable-xdpi/ - 未使用

3. 素材ファイルの追加

シーンごとにファイルを管理することにする。
  1. Resources/ に フォルダを作成して画像ファイルを格納
    1. FoldersはCreate Groups for any added 
  2. 追加したいファイルやフォルダをFinderから XcodeのResourcesにドラッグ
    Destinationのチェックは外す
    Foldersは1つめのCreate Groups for any added foldersにする
    Add to Targetsに今回のプロジェクトにチェックがあることを確認

4. 背景とボタンの配置

Sceneを2つ用意しボタンをタップするごとにシーンを置き換えます。
やったこと

  • シーンのトランジション
  • ボタン配置
  • 背景配置


実機(開発環境)での動作

iPhone, iPad, Androidの実機でプログラムを動かす流れを整理します。

1. iPhone/iPadでの動作

1.1 証明書の発行と実機の準備

  1. アプリケーション>ユーティリティ>キーチェーンアクセス
  2. 左上から環境設定 > 証明書 : OCSP, CRLがどちらも切の確認
  3. 左上から証明書アシスタント>認証局に証明書を要求
    メールアドレス、要求の処理をファイルに保存/鍵ペア情報を指定にチェック
    デスクトップに保存、2048bit,RSAのままで続ける → 完了
    証明書要求ファイルがデスクトップなどに生成(CertificateSigningRequest.certSigningRequest)
  4. iOS Dev Centerの右上 Certificates, Identifiers and Profilesにアクセス
    Certificates > development > + > iOS App Developmentにチェック
    ファイル選択画面で先ほどデスクトップに保存したキーをアップロード
    証明書(ios_development.cer)をダウンロード
  5. 証明書ファイルを開くとキーチェーンアクセスに登録される
  6. 実機をMacに接続
  7. Xcodeの Window > Organizer
    接続したデバイスで「Use for development」をクリック
    キーの使用許可、Apple IDのログインの指示 → Deviceの右の色が黄色から緑になる

1.2 アプリケーションを登録

  1. 前記Certificates, Identifiers and ProfilesのIdentifiers > Apple ID > +
    description(英語での説明文)、BundleID(jp.ne.akbob.Sample2)
  2. 同ページの Provisioning > development >  +
    iOS App Development → 先ほど作った Bundle ID = App IDを選択
    → 証明書を先程のを選択
    → デバイスも先ほど開発用にした実機を選択
    → プロファイル名(表示用途のみ)を指定 (例: Sample2)
  3. プロビジョニングファイル(Sample2.mobileprovision)をダウンロード
  4. 開くとOrganizerに登録される
  5. 一番上のプロジェクトを選択した時に表示される設定画面でBundler Identifierを先ほどのApp IDに登録
    (ドメイン名しか書かれていないのでアプリ名も含めておく)

1.3 実機での起動

  1. 実機でパスコードロックがかかっていたら解除しておく
  2. 画面上のSchemaに対象の実機を選択して Runを実行する
  3. キーチェーンの許可が要求されるので 常に許可


2. Androidでの動作

2.1 実機の設定

  1. 設定 > セキュリティ > 提供元不明のアプリにチェック
  2. 設定 > 端末情報 > ビルド番号を7回程度タップ → ディベロッパーモードになる
    (Android4.2より開発者向けオプションは非表示となった)
  3. 1つ戻って > 開発者向けオプション > USBデバッグにチェック 
[戻し方] 1,3はチェックを外す、 2は隠すことはできないらしいので開発者向けオプション画面の一番上のトグル設定を無効にする

2.2 プロジェクトの設定

  1. AndroidManifest.xml > Applicationタブ > debuggable = trueにする
  2. 実行するとAndroid Device Chooser が表示されるのでデバイスを選択すればOK
[エラーケース] 最後の画面でターゲットがunknown,stateがofflineとなってしまった。ぐぐるとUSBデバッグボタンを入れなおせばうまくいくとも書いているがうまく行かず。USBケーブルを抜き差ししたらうまくいった!

2013年6月15日土曜日

開発環境(Mac)の構築

それでは、MacにCocos2d-xでiOS, Android開発を行うプログラムのインストールや設定を行なってみます。今回は各Simulatorが動作するまでとします。

1. プログラムのインストール

次のプログラムを標準的な方法でインストールする
関連プログラムは /cocos  以下にフォルダを作って保存
プログラムインストール方法
XcodeMac App Storeからインストール
XCodeを起動して左上のXCode > Preferences
    Downloads > Componentsで次をインストール
    Command Line Tools
    iOS 6.1 Simulator (最新のものでOK)
Cocos2d-x最新版のCocos2d-xをダウンロード (例: cocos2d-2.1rc0-x-2.1.3.zip)
ターミナルで解凍してインストール 解凍したものも次に配置
$ cd /cocos
$ unzip cocos2d-2.1rc0-x-2.1.3.zip
$ cd cocos2d-2.1rc0-x-2.1.3
$ sudo ./install-templates-xcode.sh

→ Xcodeを起動 新規プロジェクトでcocos2d-xカテゴリのcocos2dx_box2dを選択
    ProductName, Company Identifierは任意 (例: CocosSample1, jp.ne.akbob)
    左上の「Run」をクリックして Simulatorが表示されればOK
Android用Eclipse
+環境設定


Android SDK  ダウンロードして 展開したものを /cocos にコピー
Android NDK  Mac 64bit版をダウンロードして /cocos にコピー
xxxxxsdk/eclipse/Eclipse  を起動
→  Java SEのインストールを要求されるのでインストール→完了後Eclipseを開く
→ ワークスペースの設定 /cocos/workspace とする
   (Use this as the default and do not ask againにチェック)
   Welcomeタブは閉じる
[プラグインの追加]
Help->Install New Software
   work with: Android Developer Tools Update Siteに
      Developer ToolsとNDK PLuginsを両方選択

[環境設定]
→ ADT(左上)→環境設定
    General>Workspace>Linked Resources → New
       Name   COCOS2DX   Folder 上記cocos2d-xのフォルダ
    C/C++>Build>Environment → Add
       Name  NDK_ROOT   value  上記NDKのフォルダ
→ Java>Editor>Typing (セミコロンとカッコの自動挿入)
    Automatically insert at correct positionのSemicolonとBracesにチェック
→General
   Open ModeをDouble Click -> Single Clickに変更(選んだらすぐ開く)
→General>Editors>Text Editors
    Show print margin, Show line numbersにチェック マージンカラム数を 80 → 100に
→General>Workspaceの
   Text file encoding  をSJISから  Other > UTF-8に
→ File>New>Other    Android>Android Project from Existing code
        Root Directoryに保存したcocos2dxの  cocos2dx/ を選択
        libcocos2dxプロジェクトにチェックが入っている状態でFinish


Android用
プロジェクト
の作成テスト
ターミナルでcocos2dxのフォルダで以下を実施
$ vi create-android-project.sh
先頭の NDK_ROOT_LOCAL と ANDROID_SDK_ROOTLOCALを正しく記述
NDK_ROOT_LOCAL="/cocos/android-ndk-r8e"
ANDROID_SDK_ROOT_LOCAL="/cocos/adt-bundle-mac-x86_64-20130522/sdk"

$ ./create-android-project.sh
パッケージ名  jp.ne.akbob
ターゲットID  1
プロジェクト名  Sample1
$ cd Sample1/proj.android/
$ vi build_native.sh
APPNAME="Sample1"   // この下に追記
NDK_ROOT=/cocos/android-ndk-r8e

$ ./build_native.sh

Eclipseからこのプロジェクトを取り込む (さっきと同じ既存プロジェクトを取り込む)
Sample1/proj.android/
android-8がないとエラーが表示されている
   Sample1プロジェクトの res/drawable-xxx/ に icon.pngファイルがないのが原因
   cocos2dxのplugins/samples/HelloAds/proj.android/res/drawable-xx/ からicon.pngファイルを取り込む
   (xdpiはないので何もしない。取り込むときはCopy Filesとする)

エラーがなくなるのでプロジェクトを右クリック>Run as > Android Application
AVD Error が表示 → Android Virtual Deviceを作成
   Launch a new android virtual deviceを選択 > Manage > New
   NexusSで作る  名前は適当(例 NexusS)  Targetも 4.2.2を選択
   カメラも両面Emulated、SDカード 128MB  (おまけ)
   Use Host GPUにチェックを入れる(重要!)
   ウィンドウを閉じて前の画面で Refresh > nexus7を選択して OK
   ※ Nexus4/7/10でもいいが解像度が大きいと重そうなので480x800にした
もう一度 Run as > Android Application
   Make your self at home 画面→ OK (次回からはロックされているので解除する)
   しばらくするとアプリが起動する 

Custom Locale で ja_JPを選択しておく
Eclipseを閉じるときは Always exit without prompt にチェック

[エラーケース]
※ Emulatorは標準では OpenGL2.0に対応していない 
   configSpecのエラーが出る(Cocs2dxActivity.javaの カラーは意図的に変更させている)   

※ Debug Certificateが期限切れと表示された場合 ターミナルで
$ cd /Users/xxxxxx/.android
$ rm debug.certificate

※ 動かなかったらもう一度 Run> Run を実行
※ Icon.pngエラー  icon.pngとファイル名は小文字にする
Android Simulatorはとにかく遅い。共通部分の開発はiOS環境でやるのがよさそう

2 iOS/Android両対応プロジェクトの作成

1) cocos2d-xのスクリプトでプロジェクトを作成

$ cd tools/project-creator/
$ ./create_project.py -project Sample2 -package jp.ne.akbob -language cpp // パッケージ名は3項目であること
$ cd ../../projects/Sample2/
$ ls
Classes/  proj.blackberry/ proj.mac/
Resources/  proj.ios/  proj.marmalade/
proj.android/  proj.linux/  proj.win32/
$ rm -r proj.mac proj.marmalade proj.linux proj.win32 proj.blackberry

2) [iOS] proj.ios/xxxxx.xcodeprojを開き動作確認
3) [Android] 先のlibcocos2dxプロジェクトのあるワークスペースに proj.androidのプロジェクトを追加
$ cd proj.android/
$ vi build_native.sh
APPNAME="Sample2"   // この下に追記
NDK_ROOT=/cocos/android-ndk-r8e
$ vi jni/Application.mk   // 末尾に追記
APP_PLATFORM := android-8
$ ./build_native.sh

ビルド成功後Eclipseから実行すればOK
[エラーケース] android-14, 8 とバージョンが違うというエラーが出る→APP_PLATFORMの設定でOK


Bloggerの使い方

本題に入る前にこのブログの使い方を慣れておこうと思います。

1. 小見出し 2番目(h3)

見出し(順見出し) 3番め(h4)

今のテンプレートは見出し(h2)は何も表示されない。困るので使わないことにする
  1. 箇条書き
  2. ふたつめ
  • 列挙
  • ふたつめ ”ハイライト
太文字   取り消し線    下線

↑ 区切り線

2. 表

ここをコピペして編集するのがが早い
英語(アメリカ合衆国) ふたつ日本語(日本)
About Me自己紹介
View my complete profile詳細プロフィールを表示
Labelsラベル
Blog Archiveブログのアーカイブ
Subscrib最後の項目

3. ソースコード

テンプレート>HTMLの編集>Layout>のヘッダの中にscriptのファイルを記述
(テンプレートを切り替えたら毎回加える必要がある)

<!-- syntax hilighter-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>

Javaの場合は次のように表示される

public static void main (String[] args) {
    System.out.println("test"); 
}
bloggerの作成エディタ(HTMLではない)で貼り付ければ自動的にエスケープしてくれる
<font color="5"> test </font>
書き方とbrushの種類
<pre class="brush: html"><font color="5"> test </font></pre>
bash, csharp, cpp, c, css, js, java, php, plain, py, sql, xml, 



4. その他

今後出てきたら追記する


はじめに

ご縁があって最近CGについて学習しています。DirectX9/11, OpenGLからはじまりOpenGL ES1/2へ、言語もC/C++についてこつこつとさわってきてわかってきました(ととはいえ今でも、メモリ管理とSTLの冗長な構文はつらいですが。。。)

ひとつiOS, Android両方で動く環境を調査することとなり、せっかくなら何かのアプリを作って身につけようと重い腰を上げることにしました。

こんなのを作ろうと思っています。
[ジャンル] エデュテイメント
[内容] タッチすると音とアニメーションが動く
[動作環境] iPhone, iPad, Android
[利用技術] Cocos2d-x  box2d (言語はC++/Lua &amp; ObjC/Java)
[目標完成時期] 2013/9

それでははじまりはじまり

PS 心機一転でiMacもリニューアルしました。移行アシスタントで時間はかかったけどほぼ何もせずにデータ&アプリ移行ができました。