手机捕鱼类游戏开发设计基本思路
程序员文章站
2022-06-24 11:22:32
首先创建两个场景，第一个设置为主界面，包含背景，开始游戏和退出的按钮。后一个设置为游戏界面，包含背景，炮台，切换炮台等级按钮，返回按钮。其实后面鱼类的游动，捕鱼网的动画以及子弹都是在游戏界面里面设计。在这里先不讲，只讲场景吧。 添加背景图片 ......
首先创建两个场景，第一个设置为主界面，包含背景，开始游戏和退出的按钮。后一个设置为游戏界面，包含背景，炮台，切换炮台等级按钮，返回按钮。其实后面鱼类的游动，捕鱼网的动画以及子弹都是在游戏界面里面设计。在这里先不讲，只讲场景吧。
添加背景图片：
<span style=“white-space:pre”> </span>auto background = sprite::create(“background.png”); background->setposition(vec2(visiblesize.width / 2, visiblesize.height / 2)); this->addchild(background);
这里的visiblesize就是主场景的规格，创建背景精灵设置坐标后添加上去。对于两个界面都是一样的用法。
然后就是切换场景：
void helloworld::onstart(ref* psender){
auto ss = (menuitemimage*)psender;
string str = ss->getname();
//sound->playeffect(“21.mp3”); //切换音效
if (str == “start”){ //切换场景
auto scene = gamescene::createscene();
director::getinstance()->pushscene(scene);
}
else{
director::getinstance()->end();
}
}
这里切换音效屏蔽了，可以根据自己的需要添加。根据图片设置的名字获取到名字，判断点击的东西获取到的字符串是否等于获取到的名字，从而结束或者切换场景。
主场景用到的pushscene();就是方便与后面场景来回切换，对应于游戏场景的popscene()。
director::getinstance()->popscene();
二、炮台
炮台是添加在游戏界面的，当主界面切换到游戏界面的时候就会显示一个初始的炮台，而炮弹有着自己多个类型。玩过捕鱼游戏的人应该知道炮台通过两个按钮去实现炮台的循环切换。
先讲炮台吧：
<span style=”white-space:pre”> </span>//增加炮台等级的按钮 auto right = menuitemimage::create(“+.png”, “+++.png”, cc_callback_1(gamescene::changebattery, this)); right->setname(“right”); auto menu1 = menu::create(right,nullptr); //减少炮台等级的按钮 auto left = menuitemimage::create(“-.png”, “—.png”, cc_callback_1(gamescene::changebattery, this)); left->setname(“left”); auto menu2 = menu::create(left, nullptr); this->addchild(menu1, 9); menu1->setposition(vec2(visiblesize.width / 2 + 230, visiblesize.height / 2 – 365)); this->addchild(menu2, 9); menu2->setposition(vec2(visiblesize.width / 2 – 50, visiblesize.height / 2 – 365)); //添加一个初始炮台 battery = sprite::create(“paotai1.png”); battery->setposition(vec2(visiblesize.width / 2 + 90, visiblesize.height / 2 – 340)); addchild(battery, 9);</span>
首先创建两个按钮精灵，就是放上两个图片，设置名字为right和left，用来控制炮台的等级，后面创建添加一个初始炮台到游戏界面。后面给按钮写上回调方法changebattery();
<span style=”font-size:14px;”>void gamescene::changebattery(ref* psender){
size visiblesize = director::getinstance()->getvisiblesize();
auto ss = (menuitemimage*)psender;
string str = ss->getname();
if (str == “right”){ //增加炮台等级
if (type == 3){
type = 1;
}
else{
type++;
}
}
else if (str == “left”){ //减少炮台等级
if (type == 1){
type = 3;
}
else{
type–;
}
}
<span style=”color:#ff0000;”>makebattery(type)</span>;
}</span>
传入点击的对象转化字符串，判断字符串与设置的名字是否相等，进入不同的语句。这里的type是炮台类型，设置的是3个炮台，以上就是控制炮台类型，后面写了makebattery（type）; 也就是生成炮台的关键：
<span style=”font-size:14px;”>void gamescene::makebattery(int type){
size visiblesize = director::getinstance()->getvisiblesize();
if (battery){
battery->removefromparent();
battery = null;
}
if (type == 1 && battery == null){
battery = sprite::create(“paotai1.png”);
}
else if (type == 2 && battery == null){
battery = sprite::create(“paotai2.png”);
}
else if (type == 3 && battery == null){
battery = sprite::create(“paotai3.png”);
}
battery->setposition(vec2(visiblesize.width / 2 + 90, visiblesize.height / 2 – 340));
this->addchild(battery,9);
}</span>
传入一个炮台类型，先判断炮台是否存在，如果存在就删除它，再根据类型type进入不同语句从而生成新的炮台，给它设置坐标，添加到游戏界面，就可以通过两个按钮实现炮台循环切换，这样就完成了炮台部分。 三、炮弹
分析炮弹对象，首先炮弹肯定是有它的类型，然后根据点击的坐标发射，每点击一次发射一颗炮弹。它有着自己的动作属性，例如速度和方向，还有金币不足时不允许发射炮弹。
void gamescene::ontouchended(touch* touch, event* event){
size visiblesize = director::getinstance()->getvisiblesize();
auto location = touch->getlocation(); ? ? ? //获得坐标getlocation();
auto dx = location.x – battery->getpositionx();
auto dy = location.y – battery->getpositiony();
auto radian = atan2(dy , dx);
auto inclination = radian * 180 / 3.14;
rotation = -(inclination)+90;
if (rotation <= 90 && rotation >= -90){
battery->setrotation(rotation);
this->makebullet(type);
auto move2 = moveby::create(2, vec2(dx * 10, dy * 10));
bullet->runaction(move2);
}
}
看代码，设置点击事件，根据点击坐标获取到x和y，计算出与炮台之间的角度，可以根据炮台的设置点击之后将炮台设置偏转角，重点在于偏转角的弧度与角度之间的转换，atan2(y,x);这个函数先传入偏移y，再传偏移x。计算出偏转角rotation之后炮台设置该角度，子弹设置该角度。makebullet（type）;type是传入炮台类型从而生成炮弹时就可以根据类型生成不同的炮弹，然后执行炮弹的移动。
void gamescene::makebullet(int type){
size visiblesize = director::getinstance()->getvisiblesize();
if (coin>0){
if (type == 1){
bullet = sprite::create(“zidan1.png”);
coin -= 1;
}
else if (type == 2){
bullet = sprite::create(“zidan2.png”);
coin -= 10;
}
else if (type == 3){
bullet = sprite::create(“zidan3.png”);
coin -= 100;
}
bullet->setrotation(rotation);
bullet->setposition(vec2(visiblesize.width / 2 + 90, visiblesize.height / 2 – 333));
this->addchild(bullet, 8);
bulletvec.pushback(bullet);
}
if (coin<t){
auto gg = sprite::create(“gg.png”);
gg->setposition(visiblesize.width / 2, visiblesize.height / 2 + 290);
addchild(gg, 9);
}
}
这是生成炮弹时代码，当金币小于0是加载gg的图片，就是显示金币不足。当金币大于0时才可以创建炮弹，根据传入的炮台类型type判断生成的炮弹类型，扣除不同金币，设置全局的偏转角，将其放入数组bulletvec。其实还是很简单的代码，将其放入数组是用于优化游戏，方便删除，节省资源占用。其实做的时候会有很多细节需要处理，例如不放入数组删除，程序运行久了之后就会有点卡，可以试试。
四、序列帧动画
序列帧动画主要有几个类：
? ? ccspriteframe:精灵帧信息，序列帧动画是依靠多个精灵帧信息来显示相应的纹理图像，一个精灵帧信息包包含了所使用的纹理，对应纹理块的位置以及纹理块是否经过旋转和偏移，这些信息可以取得对应纹理中正确的纹理块区域做为精灵帧显示的图像。
? ? ccanimationframe:序列帧动画单帧信息，它存储了对应的精灵帧信息。
? ? ccanimation：序列帧动画信息，它存储了所有的单帧信息，可以对单帧信息进行管理。
? ? ccanimate:序列帧动画处理类，它是真正完成动画表演的类。
void gamescene::fishanim(){
<span style=”white-space:pre”> </span>spriteframecache *framecache = spriteframecache::getinstance();
framecache->addspriteframeswithfile(“fish.plist”, “fish.png”); ? ?//加载plist缓存
size visiblesize = director::getinstance()->getvisiblesize();
auto fish = sprite::createwithspriteframename(“fish1.png”); ? ? //创建一个鱼的首个帧
fishvec.pushback(fish); ? ? ?//放进数组
fish->setposition(vec2(dd, dt)); ? ? //设置坐标
this->addchild(fish, 5); ? ? //添加到场景
animation* animation = animation::create(); ? ? ? //创建序列帧动画
animation->setdelayperunit(0.01f); ? ? ? ? ? ? ? //0.01s播放完序列帧动画
animation->addspriteframe(framecache1->getspriteframebyname(“fish1.png”));
animation->addspriteframe(framecache1->getspriteframebyname(“fish2.png”));
animation->addspriteframe(framecache1->getspriteframebyname(“fish3.png”)); ? ? //3个序列帧动画顺序执行
animate* animate = animate::create(animation); ? ? ? ? ? ? //帧动画处理
fish->runaction(sequence::create(animate, callfunc::create(cc_callback_0(gamescene::remove, this)), nullptr));
}
最后那个remove回调函数是用于删除动画，优化游戏环境。
五、鱼
鱼是游戏中比较关键的一部分。
一步一步来，先分析游戏，首先鱼是从屏幕外生成，然后它有个移动的动作，而且分为不同的类型。
然后就可以进入代码部分，首先设置一个计时器，控制时间生成鱼，而鱼分种类，所以就用到随机函数，随机输出一个值，传入switch语句，从而生成不同的鱼。
<span style=”font-size:18px;”>void gamescene::xiaoyuupdate(float dt){
size visiblesize = director::getinstance()->getvisiblesize();
int s = rand() % 7; ? ? ? //随机的s用于传入switch语句
auto move = moveto::create(8, vec2(visiblesize.width + 650, rand() % 768)); ? ? //下面做两个移动的动作move1和move
auto move1 = moveto::create(15, vec2(-650, rand() % 768));
switch (s){
case 0:
xiaoyu = sprite::createwithspriteframename(“wugui1.png”);
xiaoyu->setposition(vec2(-xiaoyu->getcontentsize().width / 2, rand() % 768));
playanim(0);
xiaoyu->runaction(move);
p = 2;
break;
case 1:
xiaoyu = sprite::createwithspriteframename(“huangyu1.png”);
xiaoyu->setposition(vec2(-xiaoyu->getcontentsize().width / 2, rand() % 768));
playanim(1);
xiaoyu->runaction(move);
p = 1;
break;
case 2:
xiaoyu = sprite::createwithspriteframename(“dly01.png”);
xiaoyu->setposition(vec2(visiblesize.width + xiaoyu->getcontentsize().width / 2, rand() % 768));
playanim(2);
xiaoyu->runaction(move1);
p = 2;
break;
case 3:
xiaoyu = sprite::createwithspriteframename(“dm01.png”);
xiaoyu->setposition(vec2(visiblesize.width + xiaoyu->getcontentsize().width / 2, rand() % 768));
playanim(3);
p = 2;
xiaoyu->runaction(move1);
break;
default:
break;
}
addchild(xiaoyu);
}</span>
四只不同的鱼类就可以添加到场景了，然后就是鱼的动作，上面只是有个移动，如果没有动画的鱼就会看起来很尴尬，所以上面看不懂的playanim就是定义的一个动画函数，传入一个int型常量，就是鱼的动画播放动画，看过前一章的就知道也是利用序列帧动画完成的鱼的动作。
<span style=”font-size:18px;”>void gamescene::playanim(int x){
size visiblesize = director::getinstance()->getvisiblesize();
if (x == 0){
animation* animation1 = animation::create();
animation1->setdelayperunit(0.4f);
animation1->addspriteframe(framecache->getspriteframebyname(“wugui1.png”));
animation1->addspriteframe(framecache->getspriteframebyname(“wugui2.png”));
animation1->addspriteframe(framecache->getspriteframebyname(“wugui3.png”));
animation1->addspriteframe(framecache->getspriteframebyname(“wugui2.png”));
animation1->addspriteframe(framecache->getspriteframebyname(“wugui1.png”));
animation1->addspriteframe(framecache->getspriteframebyname(“wugui2.png”));
animation1->addspriteframe(framecache->getspriteframebyname(“wugui3.png”));
animation1->addspriteframe(framecache->getspriteframebyname(“wugui2.png”));
animation1->addspriteframe(framecache->getspriteframebyname(“wugui1.png”));
animate* animate1 = animate::create(animation1);
xiaoyu->runaction(repeatforever::create(animate1));
}
else if (x == 1){
animation* animation2 = animation::create();
animation2->setdelayperunit(0.1f);
animation2->addspriteframe(framecache->getspriteframebyname(“huangyu1.png”));
animation2->addspriteframe(framecache->getspriteframebyname(“huangyu2.png”));
animation2->addspriteframe(framecache->getspriteframebyname(“huangyu3.png”));
animation2->addspriteframe(framecache->getspriteframebyname(“huangyu2.png”));
animation2->addspriteframe(framecache->getspriteframebyname(“huangyu1.png”));
animation2->addspriteframe(framecache->getspriteframebyname(“huangyu2.png”));
animation2->addspriteframe(framecache->getspriteframebyname(“huangyu3.png”));
animation2->addspriteframe(framecache->getspriteframebyname(“huangyu2.png”));
animation2->addspriteframe(framecache->getspriteframebyname(“huangyu1.png”));
animate* animate2 = animate::create(animation2);
xiaoyu->runaction(repeatforever::create(animate2));
}
else if (x == 2){
animation* animation3 = animation::create();
animation3->setdelayperunit(0.1f);
animation3->addspriteframe(framecache1->getspriteframebyname(“dly01.png”));
animation3->addspriteframe(framecache1->getspriteframebyname(“dly02.png”));
animation3->addspriteframe(framecache1->getspriteframebyname(“dly03.png”));
animation3->addspriteframe(framecache1->getspriteframebyname(“dly04.png”));
animation3->addspriteframe(framecache1->getspriteframebyname(“dly05.png”));
animation3->addspriteframe(framecache1->getspriteframebyname(“dly06.png”));
animation3->addspriteframe(framecache1->getspriteframebyname(“dly07.png”));
animation3->addspriteframe(framecache1->getspriteframebyname(“dly08.png”));
animation3->addspriteframe(framecache1->getspriteframebyname(“dly09.png”));
animation3->addspriteframe(framecache1->getspriteframebyname(“dly10.png”));
animate* animate3 = animate::create(animation3);
xiaoyu->runaction(repeatforever::create(animate3));
}
else if (x == 3){
animation* animation5 = animation::create();
animation5->setdelayperunit(0.1f);
animation5->addspriteframe(framecache1->getspriteframebyname(“dm01.png”));
animation5->addspriteframe(framecache1->getspriteframebyname(“dm02.png”));
animation5->addspriteframe(framecache1->getspriteframebyname(“dm03.png”));
animation5->addspriteframe(framecache1->getspriteframebyname(“dm04.png”));
animation5->addspriteframe(framecache1->getspriteframebyname(“dm05.png”));
animation5->addspriteframe(framecache1->getspriteframebyname(“dm06.png”));
animation5->addspriteframe(framecache1->getspriteframebyname(“dm07.png”));
animation5->addspriteframe(framecache1->getspriteframebyname(“dm08.png”));
animate* animate5 = animate::create(animation5);
xiaoyu->runaction(repeatforever::create(animate5));
}
fishvec.pushback(xiaoyu); ? //将鱼放进数组
}</span>
那我就不讲序列帧动画了，可以去看前面的博客，最后放进数组也是用于优化游戏。
其实这里也做的不是很好，只是一个简单的demo，可以给鱼添加一些动作，让它活灵活现的在游戏里，也可以根据自己的爱好或者需要添加东西。
六、碰撞检测
炮弹和鱼的碰撞可以说是很关键的部分，对这个游戏分析吧，首先炮弹有它的类型，比如1号炮，2号炮……鱼也有它的类型，比如小黄鱼，乌龟，鲸鱼……
然后再分析，当鱼和炮弹碰撞上的时候，鱼会生成一个死亡动画然后消失，炮弹会生成渔网，然后消失，当然渔网和鱼的死亡动画也会消失。
在这里要判断鱼是否和炮弹碰撞到就要用到一个api，那就是getboundingbox()
void gamescene::update(float dt){
for (int i = 0; i < fishvec.size(); i++){
for (int j = 0; j < bulletvec.size(); j++){
if (fishvec.at(i)->getboundingbox().intersectsrect(bulletvec.at(j)->getboundingbox())){
makeyuwang(type, bulletvec.at(j)->getpositionx(), bulletvec.at(j)->getpositiony());
remove2(bulletvec.at(j));
return;
}
}
}
这个用法就是精灵->getboundingbox().intersectsrect(精灵2->getboundingbox())。
getboundingbox()就是获取矩形框，然后intersectsrect就是用于判断两个矩形框是否发生碰撞。