小鰻的 Cocos2D-X / JSB / HTML5 學習筆記

[cocosBuilder篇]在timeline上添加使用Callbacks或Sound effects

文章撰寫日期︰2013/08/18 17：10
cocos2dx使用版本︰v 2.1.4
cocosBuilder使用版本︰v 3.0 alpha 5

使用了cocosBuilder，
如何使用timeline上的Callbacks和Sound effects呢？
介面上找了半天，
都找不到添增的方式。

原來，
使用方式是按著mac的option鍵+滑鼠左鍵在Callbacks或Sound effects上添加。

[cocos2dx-JSB/HTML5篇]在各個瀏覽器上播放音檔

文章撰寫日期︰2013/08/18 13：31
文章修改日期︰2013/11/30 16：25
文章修改次數︰5
cocos2dx使用版本︰v 2.1.4 / v 2.1.5
cocosBuilder使用版本︰v 3.0 alpha 5

一、前言

**Codec support in modern desktop browsers**
Browser	Ogg Vorbis	MP3	WAV
FireFox 3.6+	✓		✓
Safari 5+		✓	✓
Chrome 6	✓	✓
Opera 10.5+	✓		✓
Internet Explorer 9 (beta)		✓	✓

由於每個瀏覽器能播放的音檔格式皆不同，
Cocos2d-HTML5 也幫我們處理了這個問題。

二、本文開始

以下文章來自raywenderlich

Gratuitious Music and Sound Effects

You’re pretty close to having a workable (but extremely simple) game now. You just need to add some sound effects and music (since what kind of game doesn’t have sound!) and some simple game logic.
這個遊戲就快要完成了(但貌似還非常簡單)，現在你還需要做的就是替這個遊戲添加聲音和特效(哪個遊戲沒有特效!)和一些簡單的遊戲邏輯。

First, update Cocos2DSimpleGame\Src\resource.js to add the sound effects:
首先，先更新在Cocos2DSimpleGame\Src\resource.js裡的這個聲音特效檔︰

var dirArt = "Art/";
var dirSounds = "Sounds/";
 
var s_player = dirArt + "player.png";
var s_monster = dirArt + "monster.png";
var s_projectile = dirArt + "projectile.png";
 
var s_bgMusic = dirSounds + "background-music.mp3";
var s_bgMusicOgg = dirSounds + "background-music.ogg";
var s_bgMusicCaf = dirSounds + "background-music.caf";
 
var s_shootEffect = dirSounds + "pew-pew-lei.mp3";
var s_shootEffectOgg = dirSounds + "pew-pew-lei.ogg";
var s_shootEffectWav = dirSounds + "pew-pew-lei.wav";
 
var g_ressources = [
 
    {type:"image", src:s_player},
    {type:"image", src:s_monster},
    {type:"image", src:s_projectile},
 
    {type:"sound", src:s_bgMusic},
    {type:"sound", src:s_bgMusicOgg},
    {type:"sound", src:s_bgMusicCaf},
 
    {type:"sound", src:s_shootEffect},
    {type:"sound", src:s_shootEffectOgg},
    {type:"sound", src:s_shootEffectWav}
 
];

Note that both the background music and sound effects are each saved in three different formats: mp3, ogg, and wav. This is because not all browsers support all formats, so by adding all three we will have the highest possible chance of the player being able to hear something. Cocos2D will detect what the browser supports and use the appropriate file – as long as they have the same filename.
注意︰這邊看到每一個背景音樂、聲音特效都被分別儲存了3種格式︰mp3、ogg和wav。主要是因為並非每種瀏覽器都能播放所有的音檔格式，所以準備3種格式的音檔，最能確保聲音播放是沒問題的。Cocos2D會偵測使用者用的瀏覽器支援了哪種適合的檔案-只要檔名都一樣就找的到。

var audioEngine = cc.AudioEngine.getInstance();

This gets a global reference to the audio engine so you can use it later. Then add this line to the end of onEnter:
這行取得到公域參照︰audio引擎，因此接下來的code你可以開始使用這個物件。把這行加到onEnter函式的最後一行吧！

audioEngine.playMusic(s_bgMusic, true);

audioEngine.playEffect(s_shootEffect);

Save the file and refresh your browser, and now you should have some groovy tunes!
存檔，重整您的瀏覽器，現在您將聽到優雅動人的音樂！

備註︰
audioEngine.playMusic如果直接傳參數xxx.mp3，
Cocos2d-html5就不會自動的幫你找xxx.ogg檔播放。
請宣告變數

var s_bgMusic = "xxx.mp3";

再用

audioEngine.playMusic(s_bgMusic, true);

播放，
這樣才會在Firefox上自動找xxx.ogg檔播放。

三、我的試驗心得

使用playMusic()時，
Cocos2d-html5會幫我們在背後自動判斷該音檔是否能夠在瀏覽器播放，
假設現在我們要播abc.mp3，
Cocos2d-html5發現Firefox不能播mp3，
那麼Cocos2d-html5會再去找有沒有abc.ogg或abc.wav檔來播放。

但是，
cocos2d-html選擇前，
會先去resources-html5.js資源裡去找是否有宣告此資源可用。

因此，
即使您有放置abc.ogg檔在資源目錄下，
但卻沒在resources-html5.js檔裡宣告。
Firefox仍會無法播音！

CocosBuilder3.0 Alpha5 目前仍沒有將ogg檔宣告進resources-htm5.js的資源檔中，這個問題會導致Firefox一直無法聽到音檔。唯一的做法就是去修改CocosBuilder源碼，請CocosBuilder輸岀HTML5資料夾時，也一併將ogg檔添加進resource-html5.js裡。

修改的方法(以CocosBuilder 3.0 Alpha5 為例)

在CocosBuilder源碼檔案CocosBuilder\Publishing\CCBPublisher.m裡

1. 60行: 函式initWithProjectSettings中

    // Setup extensions to copy
    copyExtensions = [[NSArray alloc] initWithObjects:@"jpg",@"png", @"pvr", @"ccz", @"plist", @"fnt", @"ttf",@"js", @"json", @"wav",@"mp3",@"m4a",@"caf", nil];

改成

    // Setup extensions to copy
    copyExtensions = [[NSArray alloc] initWithObjects:@"jpg",@"png", @"pvr", @"ccz", @"plist", @"fnt", @"ttf",@"js", @"json", @"wav",@"mp3",@"ogg",@"m4a",@"caf", nil];//添加ogg副檔

2. 774行: 函式publishGeneratedFiles中

if ([ext isEqualToString:@"plist"]) type = @"plist";
            else if ([ext isEqualToString:@"png"]) type = @"image";
            else if ([ext isEqualToString:@"jpg"]) type = @"image";
            else if ([ext isEqualToString:@"jpeg"]) type = @"image";
            else if ([ext isEqualToString:@"mp3"]) type = @"sound";
            else if ([ext isEqualToString:@"ccbi"]) type = @"ccbi";
            else if ([ext isEqualToString:@"fnt"]) type = @"fnt";

改成

if ([ext isEqualToString:@"plist"]) type = @"plist";
            else if ([ext isEqualToString:@"png"]) type = @"image";
            else if ([ext isEqualToString:@"jpg"]) type = @"image";
            else if ([ext isEqualToString:@"jpeg"]) type = @"image";
            else if ([ext isEqualToString:@"mp3"]) type = @"sound";
            else if ([ext isEqualToString:@"ogg"]) type = @"sound";//加入這行
            else if ([ext isEqualToString:@"ccbi"]) type = @"ccbi";
            else if ([ext isEqualToString:@"fnt"]) type = @"fnt";

編譯並執行CocosBuilder，
會發現輸岀的HTML5資料夾resources-htm5.js檔裡，都含蓋.ogg檔了！

[Git篇]在Git上Discard修改

在StackOverFlow查到的指令

git clean -df & git checkout -- .

[cocos2dx-JSB篇]tool-project-creator無法Run創建岀來的Xcode專案

文章撰寫日期︰2013/08/17 16：48
cocos2dx使用版本︰v 2.1.4
cocosBuilder使用版本︰v 3.0 alpha 5

一、問題

今天遇到使用/Users/urname/cocos2d-x/tools/project-creator/create_project.py創建跨平臺專案時，遇到創建岀來的cocos2dx-JSP-Xcode專案無法在simulator和device Run的問題，編譯完後一直沒任何開啟simulator的動作，整個呆在那邊。

二、解決辦法

後來交叉查明後發現，
這個被create_project創建岀來的proj.ios專案裡面又吃了一個cocos2dx專案，
把它當成framework來用，
因此在編譯它時，最好不要又另外開啟一個同為cocos2dx的專案，
避免Xcode在編譯時，遇到找不到此專案檔導致無法編譯的問題。

[Android篇]在Android中使用Cocos2D-X + Box2D

cocos2dx使用版本︰v 2.0.4
cocosBuilder使用版本︰v 2.0 alpha 1

來源網址
Cocos2d-x 结合Box2D开发Android游戏配置方法
先通过 create-android-project.sh 脚本创建一个新的 cocos2d-x for android 工程。注意，在执行该脚本前需要先对该脚本进行编辑，来设定 NDK_ROOT 和 ANDROID_SDK_ROOT 两个变量的值（在该脚本文件的最前面几行）。NDK_ROOT 变量用来指定你计算机上 android ndk 的安装位置；ANDROID_SDK_ROOT 变量用来指定你计算机上 android sdk 的安装位置。

        工程建立完毕后，会在和 create-android-project.sh 同目录下看到你刚刚新建的工程文件夹。这里我们假设我们刚刚建立了一个名为 Box2DTest 的工程。则工程目录机构如下：

                Box2DTest
                        --android
                        --Classes
                        --Resource

        Classes 文件夹下主要是 C++ 源代码文件，该文件夹是你主要编写逻辑的地方。Resource 文件夹是资源文件，例如图片素材、音效文件等资源文件都必须放到这个文件夹下面。当然，这篇日志不是讲 cocos2d-x 入门。而是讲怎样在 cocos2d-x 中使用 Box2D，所以这里我们主要要看的是 android 文件夹。

        android 文件夹下面是个标准的 android 工程。通过 Eclipse 可以方便的将该工程导入并运行。当我们编写完毕我们的 C++ 代码后通过执行 android 文件夹下的 build_native.sh 脚本，可以将我们编写的 C++ 代码连同 cocos2d-x 引擎以及其他一些库编译成 so 文件，以供 android 程序通过 jni 调用它们。

        默认的 cocos2d-x for android 工程并没有将 Box2D 物理引擎库引入到工程中。如果我们想要在我们的程序中使用 Box2D 引擎，我们需要对编译脚本进行一些设置。首先我们看看一个默认的 cocos2d-x for android 工程都有哪些编译脚本。

                Box2DTest
                        --android
                                --jni
                                        --Android.mk
                                        --Application.mk
                                        --helloworld
                                                --Android.mk

        mk 文件是 Android NDK 所使用的 make file 。一个标准的 cocos2d-x for android 工程默认有三个 mk 文件，这三个文件在编译 C++ 代码时起到重要的作用。而要在自己的工程中使用 Box2D 物理引擎，则需要对这三个 mk 文件进行编辑，否则无法编译通过。

        首先是 Box2DTest/android/jni/Application.mk 文件。这里我们需要关注的是 APP_MODULES 这个变量，这个变量后面的值是指定我们需要编译的模块的名称。默认是这样的：

 APP_MODULES := cocos2d box2d cocosdenshion game_logic game

这里我们需要将 Box2D 模块加入，这样在编译 C++ 代码是，会将 Box2D 模块编译成为 so 库文件。加入后是这样的：

 APP_STL := stlport_static
                APP_CPPFLAGS += -frtti
               APP_MODULES := cocos2d box2d cocosdenshion game_logic game

然后是 Box2DTest/android/jni/Android.mk 文件。这个文件我们需要检查 subdirs 这个变量。这个变量的值是指定一些公共库的头文件的目录位置。在这个变量中我们需要确保将 Box2D 的库目录放入了其中。加入后完整的 subdirs 变量的赋值语句是这样的：

            LOCAL_PATH := $(call my-dir)
            include $(CLEAR_VARS)

           subdirs := $(addprefix $(LOCAL_PATH)/../../../,$(addsuffix /Android.mk, \
           Box2D \
           cocos2dx \
           CocosDenshion/android \
 ))
       subdirs += $(LOCAL_PATH)/../../Classes/Android.mk                   $(LOCAL_PATH)/helloworld/Android.mk

       include $(subdirs)

        接下来是 Box2DTest/android/jni/helloworld/Android.mk 文件。在这个文件中我们主要编辑 LOCAL_C_INCLUDES 变量。该变量指定我们 C++ 源代码中 include 的头文件的查找位置。默认的 LOCAL_C_INCLUDES 赋值是这样的：

                LOCAL_C_INCLUDES := $(LOCAL_PATH)/../../../../cocos2dx \
                    $(LOCAL_PATH)/../../../../cocos2dx/platform \
                    $(LOCAL_PATH)/../../../../cocos2dx/include \
                    $(LOCAL_PATH)/../../../../CocosDenshion/include \
                    $(LOCAL_PATH)/../../../Classes

        默认的 LOCAL_C_INCLUDES 并没有将 Box2D 的头文件目录加入进去，在这种情况下我们在自己的 C++ 源代码中引入 Box2D 的话是无法编译通过的。简便的方法是加入下面两个路径：

 LOCAL_PATH := $(call my-dir)
include $(CLEAR_VARS)
LOCAL_MODULE := game

LOCAL_SRC_FILES := main.cpp

LOCAL_C_INCLUDES := $(LOCAL_PATH)/../../../../cocos2dx \
                    $(LOCAL_PATH)/../../../../cocos2dx/platform \
                    $(LOCAL_PATH)/../../../../cocos2dx/include \
                    $(LOCAL_PATH)/../../../../ \
                    $(LOCAL_PATH)/../../../../Box2D \
                    $(LOCAL_PATH)/../../../Classes

LOCAL_LDLIBS := -L$(call host-path, $(LOCAL_PATH)/../../libs/$(TARGET_ARCH_ABI)) \
                -lcocos2d -llog -lgame_logic \
                -lbox2d 
            
include $(BUILD_SHARED_LIBRARY)

        加入这两个路径之后，我们要想在我们的 C++ 源代码中引入 Box2D 库的话，只需要在 C++ 源代码中加入这样的语句就可以了。

                #include "Box2D/Box2D.h"

         这样我们就可以在享受 cocos2d 引擎给我们带来的开发便利的同时享受到 Box2D 物理引擎给我们带来的开发乐趣了。

[Android篇]建立一個cocos2D-Android專案

cocos2dx使用版本︰v 2.0.4
cocosBuilder使用版本︰v 2.0 alpha 1

一、前提

如果NDK是放在D槽
請先設定環變
export NDK_ROOT=/cygdrive/d/Android/cygwin/android-ndk-r8

二、步驟

創立一個cocos2Dx-Android專案
先下在cocos2Dx目錄底下，
輸入create-android-project.bat指令
註︰不能在Cygwin環境下執行。使用前請先將create-android-project.sh和create-android-project.bat裡的預設目錄設好。
針對這個專案目錄內執行build_native.sh
創建完後，
針對這個專案目錄內執行build_native.sh
即可完成Android專屬的cocos2D專案
即可使用Eclipse匯入修改。

3.如果org.cocos2dx目錄遺失

4 down vote

In cocos2d-x 2.0.3 ...Cocos2d-x Lib java files has been considered as a different project only So import that project in the eclipse
Lets make it Simple

First Import the project in eclipse from this path - cocos2d-2.0-x-2.0.3/cocos2dx/platform/android/java

You will see libcocos2dx project in eclipse ...Keep this project open always otherwise your projects will give error on the syntax of library

Run create-android-project
Now Import the project which you have created and just Run (If you know the concept of isLibrary then that's how they are maintaining it now ..)

Also additional information to run build-native.sh from eclipse only , Right Click Project ->C/C++ Build Uncheck Use Default Build COmmand and add following bash ${workspace_loc:/YourProjName}/build_native.sh NDK_DEBUG=1 V=1
Good Luck ..If any question please feel free to ask

三、其它

無法在Visual Studio 2012 Express安裝Cocos2DX template

Editing InstallWizardForVS2012.js located in cocos2D\template\msvc
Line 92, replace vcprojects with vcprojects_WDExpress then run install-templates-msvc.bat and templates will be installed succesfully in VS 2012 Express.
var strDestFolder = FileSys.BuildPath(strValue, "vcprojects_WDExpress");

[coco2dx-Android篇]添加NDK境變數

訂閱：文章 ( Atom )