妳可以使用加速計(重力感應)來控制飛船的移動,並且可以點擊屏幕來發射激光武器。
如果妳對於如何制作基於cocos2d-x3.0的遊戲完全陌生的話,這個教程可以幫助妳!妳將會學習到,如何從頭至尾構建壹個完整的遊戲,不需要任何的經驗!
假如妳對cocos2d-x3.0編程完全陌生的話,那麽妳可能需要先學習壹下相關的教程了。
這個教程對於中級開發者來說也非常好,因為它覆蓋了壹些比較高級的主題,比如視差滾動(parallax scrolling),預分配Node,加速計移動以及粒子系統的使用。
話不多說,直入主題!
添加相關資源文件
為了做這樣壹個手機遊戲,妳將需要壹些跟太空主題相關的圖片資源和聲音資源。
妳可以直接下載我老婆制作的太空遊戲資源。
因此,請直接下載吧,並且把它解壓到妳的項目的Resources目錄下面去。
如果妳很好奇,妳可以隨便看看妳剛剛向工程裏面添加進去了壹些什麽東西。下面是完整的內容列表:
Backgrounds: 壹些背景圖片,妳等下會使用它們來制作壹個滾動背景。裏面包含星系,太陽,和空間異常(它移動速度比較慢),還有壹組空間塵埃圖片(它們會出現在背景前面,而且會移動地稍微快壹點)
Fonts: 使用 Glyph Designer制作的位圖字體,我們將使用這些字體來在遊戲中顯示文字。
Particles: 使用 Particle Designer制作的壹些特殊的粒子效果。 在這裏,我們用來創建星星飛動的效果。
Sounds: 壹些與太空相關的背景音樂和音效。使用 Garage Band 和 cxfr制作的。
Spritesheets: 壹張格式為pvr.ccz的大圖片,裏面包含了遊戲中將要用到的許多小圖片,比如隕石,太空船等。這個文件使用 Texture Packer制作的---如果妳想使用pvr.ccz文件格式的話,妳可能就需要使用這個工具。當然pvr.ccz格式的優點就是文件小,加載速度快。
如果妳還沒安裝上面任何壹款工具的話,也不用擔心!對於這個教程來說,妳完全不需要他們,妳可以使用我已經制作好的這些資源就夠了。以後,如果有條件,妳可以再去試試上面提到的工具。
妳可能會奇怪,為什麽要把所有的這些圖片都弄成這樣壹張大圖呢?因為,首先,它可以幫助節省內存,同時還可以提高性能。
接下來,讓我們開始coding吧!:)
添加壹個太空船
首先,讓我們在屏幕上添加壹艘太空船吧!
讓我們試試,看是否工作!打開HelloWorld.h,在HelloWorld類開頭加入下面代碼(在已有public:行的上面)
SpriteBatchNode *_batchNode;
Sprite *_ship;
上面的代碼創建了兩個私有實例變量 – 壹個是SpriteBatchNode,壹個是太空飛船精靈。
現在切換到HelloWorldScene.cpp,在init()方法裏,刪除從註釋“2. add a menu item”到方法最後的所有代碼,加入下面代碼:
_batchNode = SpriteBatchNode::create("Sprites.pvr.ccz"); // 1
this->addChild(_batchNode); // 2
SpriteFrameCache::getInstance()->addSpriteFramesWithFile("Sprites.plist"); // 3
_ship = Sprite::createWithSpriteFrameName("SpaceFlier_sm_1.png"); // 4
auto winSize = Director::getInstance()->getWinSize(); // 5
_ship->setPosition(Point(winSize.width *0.1, winSize.height *0.5)); // 6
_batchNode->addChild(_ship,1); // 7
註意這些代碼與妳過去使用的Objective-C版的cocos2d 非常類似。API是有很多相同的地方的,僅僅是有壹些與C++的語法不同。
編譯運行,妳應該可以看到妳的船出現在屏幕上
增加視差滾動
接下來,我們會加入宇宙背景,使它以視差滾動這種很酷的方式來滾動。
首先,我們不得不在所有的類名前面加上cocos2d::這個名字空間,這太煩人了!所以在HelloWorld.h類聲明前加入下面行:
USING_NS_CC;
接著在HelloWorld的private部分加入壹些新的變量(註意我們不再需要加cocos2d前綴):
ParallaxNodeExtras *_backgroundNode;
Sprite *_spacedust1;
Sprite *_spacedust2;
Sprite *_planetsunrise;
Sprite *_galaxy;
Sprite *_spacialanomaly;
Sprite *_spacialanomaly2;
然後,在HelloWorldScene.cpp的init方法中,return語句前加入下面代碼:
// 1) Create the ParallaxNodeExtras
_backgroundNode = ParallaxNodeExtras::node();
this->addChild(_backgroundNode,-1);
// 2) Create the sprites we'll add to the ParallaxNodeExtras
_spacedust1 = Sprite::create("bg_front_spacedust.png");
_spacedust2 = Sprite::create("bg_front_spacedust.png");
_planetsunrise = Sprite::create("bg_planetsunrise.png");
_galaxy = Sprite::create("bg_galaxy.png");
_spacialanomaly = Sprite::create("bg_spacialanomaly.png");
_spacialanomaly2 = Sprite::create("bg_spacialanomaly2.png");
// 3) Determine relative movement speeds for space dust and background
Point dustSpeed = Point(0.1, 0.1);
Point bgSpeed = Point(0.05, 0.05);
// 4) Add children to ParallaxNodeExtras
_backgroundNode->addChild(_spacedust1,0,dustSpeed,Point(0, winSize.height / 2));
_backgroundNode->addChild(_spacedust2,0,dustSpeed,Point(_spacedust1->getContentSize().width, winSize.height / 2));
_backgroundNode->addChild(_galaxy, -1, bgSpeed,Point(0, winSize.height *0.7));
_backgroundNode->addChild(_planetsunrise, -1, bgSpeed,Point(600, winSize.height * 0));
_backgroundNode->addChild(_spacialanomaly, -1, bgSpeed,Point(900, winSize.height *0.3));
_backgroundNode->addChild(_spacialanomaly2, -1, bgSpeed,Point(1500, winSize.height *0.9));
編譯運行,妳應該可以看到壹個宇宙場景的啟動
而,這還不是很有趣,因為還沒有任何東西在動!
為了移動太空塵埃和相關背景層,妳只需要移動壹樣東西就可以了,ParallaxNodeExtras。對於移動parallax node的每壹個y值,灰塵就會移動0.1y值,同時背景會移動0.05y值。
為了移動parallax節點,妳只需要飛壹幀更新壹下它的位置就可以了。打開HelloWorldLayer.m文件,加入下列的代碼:(添加位置註意看註釋)
this->scheduleUpdate();
void HelloWorld::update(float dt)
{
Point backgroundScrollVel = Point(-1000, 0);
_backgroundNode->setPosition(_backgroundNode->getPosition()+backgroundScrollVel*dt);
}
編譯並運行工程,妳會看到,使用parallax來做視差滾動效果真是太簡潔了!