解决滚屏背景/拼接地图有黑边(缝隙)/动画播放出现毛边以及禁止游戏中自动锁屏问题!

 李华明Himi 原创,转载务必在明显处注明:
转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/iphone-cocos2d/507.html


     本章节主要为大家介绍在游戏开发过程中经常遇到的两个问题;
     1. 解决滚屏背景或拼接地图有黑边!
      对于游戏开发中,背景(游戏地图)是必要的元素之一,那么对于大部分游戏的背景都是动态,或者不断移动的;例如RPG中的背景随着人物、主角而移动,那么一般情况下背景都是由地图编辑器(图块)拼出来的,要不就是直接一整张大图去显示,在或者就是将一张大图进行裁减成N张,然后再进行拼接完成等等;
      那么对于背景(地图)元素中存在的重复图块很少的话基本上就没有利用地图编辑器的必要了;在这里Himi不来介绍如何在cocos2d中使用地图编辑器做背景地图 ,而是介绍在cocos2d中制作滚动地图时利用拼接地图方式遇到的黑边问题;
     如下图所示,背景是由3张图片拼接而成,如下3张图:
                                               

     然后Himi将此3张作为3个精灵然后顺次绘制在屏幕上代码如下: 
[cpp] view plaincopyprint?//将三张图拼成一张完整背景    
        CGSize screenSize =[[CCDirector sharedDirector]winSize];  
        CCSprite *bgTile1 =[CCSprite spriteWithFile:@"himi_01.png"];  
        bgTile1.position=ccp(bgTile1.contentSize.width*0.5,screenSize.height*0.5);  
        CCSprite *bgTile2 =[CCSprite spriteWithFile:@"himi_02.png"];  
        bgTile2.position=ccp(bgTile1.position.x+bgTile1.contentSize.width,bgTile1.position.y);  
        CCSprite *bgTile3 =[CCSprite spriteWithFile:@"himi_03.png"];  
        bgTile3.position=ccp(bgTile2.position.x+bgTile2.contentSize.width,bgTile2.position.y);  
        [self addChild:bgTile1 z:0 tag:11];  
        [self addChild:bgTile2 z:0 tag:22];  
        [self addChild:bgTile3 z:0 tag:33];  
//将三张图拼成一张完整背景 
        CGSize screenSize =[[CCDirector sharedDirector]winSize];
        CCSprite *bgTile1 =[CCSprite spriteWithFile:@"himi_01.png"];
        bgTile1.position=ccp(bgTile1.contentSize.width*0.5,screenSize.height*0.5);
        CCSprite *bgTile2 =[CCSprite spriteWithFile:@"himi_02.png"];
        bgTile2.position=ccp(bgTile1.position.x+bgTile1.contentSize.width,bgTile1.position.y);
        CCSprite *bgTile3 =[CCSprite spriteWithFile:@"himi_03.png"];
        bgTile3.position=ccp(bgTile2.position.x+bgTile2.contentSize.width,bgTile2.position.y);
        [self addChild:bgTile1 z:0 tag:11];
        [self addChild:bgTile2 z:0 tag:22];
        [self addChild:bgTile3 z:0 tag:33];
此时运行的截图如下:
               



    从上图童鞋们就可以看到拼接有裂缝,那么接着让3个精灵从左向右不断的x轴+1进行移动,代码如下:

[cpp] view plaincopyprint?//----init函数中    
       //每0.1秒刷新函数move   
        [self schedule:@selector(move) interval:0.1];  
//move函数   
-(void)move{  
    CCSprite *tempSprite =(CCSprite*)[self getChildByTag:11];  
    tempSprite.position=ccpAdd(tempSprite.position, ccp(1,0));  
    tempSprite =(CCSprite*)[self getChildByTag:22];  
    tempSprite.position=ccpAdd(tempSprite.position, ccp(1,0));  
    tempSprite =(CCSprite*)[self getChildByTag:33];  
    tempSprite.position=ccpAdd(tempSprite.position, ccp(1,0));  
}  
//----init函数中 
       //每0.1秒刷新函数move
        [self schedule:@selector(move) interval:0.1];
//move函数
-(void)move{
    CCSprite *tempSprite =(CCSprite*)[self getChildByTag:11];
    tempSprite.position=ccpAdd(tempSprite.position, ccp(1,0));
    tempSprite =(CCSprite*)[self getChildByTag:22];
    tempSprite.position=ccpAdd(tempSprite.position, ccp(1,0));
    tempSprite =(CCSprite*)[self getChildByTag:33];
    tempSprite.position=ccpAdd(tempSprite.position, ccp(1,0));
}
运行截图如下:
              



     这时当移动到一定距离时候会发现刚才的缝隙消失了,是消失了,通过以上两张运行效果图可以说明:
     在cocos2d中如图你使用拼接背景地图的方式去做的话,每处拼接处在移动时都会时不时的出现黑边(裂缝),至于如何解决我想童鞋们第一想法就是在裁图的时候多切出一像素的方法,第一张比如原来是100,故意裁出101,第二张绘制的时候X轴前一个像素...以此类推,还有些童鞋认为是美工的原因,可能在裁图的时候有透明像素的存在造成,当然美工裁图的不仔细确实是个不可排除的原因,但是最终解决的方案应该是将精灵设置贴图无锯齿的属性,这样就可以完美解决此问题,设置精灵贴图无锯齿方法如下:
[cpp] view plaincopyprint?[CCSprite.texture setAliasTexParameters];  
[CCSprite.texture setAliasTexParameters];
    我们将这句添加上之后再次运行,代码更改如下:
[cpp] view plaincopyprint?//将三张图拼成一张完整背景    
CGSize screenSize =[[CCDirector sharedDirector]winSize];  
CCSprite *bgTile1 =[CCSprite spriteWithFile:@"himi_01.png"];  
bgTile1.position=ccp(bgTile1.contentSize.width*0.5,screenSize.height*0.5);  
CCSprite *bgTile2 =[CCSprite spriteWithFile:@"himi_02.png"];  
bgTile2.position=ccp(bgTile1.position.x+bgTile1.contentSize.width,bgTile1.position.y);  
CCSprite *bgTile3 =[CCSprite spriteWithFile:@"himi_03.png"];  
bgTile3.position=ccp(bgTile2.position.x+bgTile2.contentSize.width,bgTile2.position.y);  
//让3个精灵都设置贴图无锯齿   
[bgTile1.texture setAliasTexParameters];  
[bgTile2.texture setAliasTexParameters];  
[bgTile3.texture setAliasTexParameters];  
[self addChild:bgTile1 z:0 tag:11];  
[self addChild:bgTile2 z:0 tag:22];  
[self addChild:bgTile3 z:0 tag:33];  
        //将三张图拼成一张完整背景 
        CGSize screenSize =[[CCDirector sharedDirector]winSize];
        CCSprite *bgTile1 =[CCSprite spriteWithFile:@"himi_01.png"];
        bgTile1.position=ccp(bgTile1.contentSize.width*0.5,screenSize.height*0.5);
        CCSprite *bgTile2 =[CCSprite spriteWithFile:@"himi_02.png"];
        bgTile2.position=ccp(bgTile1.position.x+bgTile1.contentSize.width,bgTile1.position.y);
        CCSprite *bgTile3 =[CCSprite spriteWithFile:@"himi_03.png"];
        bgTile3.position=ccp(bgTile2.position.x+bgTile2.contentSize.width,bgTile2.position.y);
        //让3个精灵都设置贴图无锯齿
        [bgTile1.texture setAliasTexParameters];
        [bgTile2.texture setAliasTexParameters];
        [bgTile3.texture setAliasTexParameters];
        [self addChild:bgTile1 z:0 tag:11];
        [self addChild:bgTile2 z:0 tag:22];
        [self addChild:bgTile3 z:0 tag:33];
再次运行效果图如下:
               

  OK,完美解决;


 2.下面介绍第二个问题:如何禁止手机自动锁屏的问题;
     对于手机自动锁屏的问题一般都是在项目尾声的时候发现由于手机自动锁屏所带来的各种问题,例如,在cocos2d中我们调用暂停游戏的函数后,如果用户无操作,手机自动锁屏后,解锁再次进入游戏就会发现游戏不处于暂停了,(如果你有暂停界面的话,你将看到你暂停界面存在,而后面的游戏照常运行- -)
    那么这里Himi给出在应用中禁止手机自动锁屏的代码,如下:
[cpp] view plaincopyprint?[[UIApplication sharedApplication] setIdleTimerDisabled:YES];  
 [[UIApplication sharedApplication] setIdleTimerDisabled:YES];

     OK,本章介绍的知识点虽然很少解决的方法也很简单,但是也是游戏中最容易遇到的两个问题;
     那么这里肯定会有不少童鞋认为本身一句代码的事情非写这么多进行说明,嗯 ,确实写的过于详细,但是Himi之所以写这么详细主要还是想让还没有遇到此类问题的童鞋清晰化此类问题出现的原因,这样能让更多童鞋减少以后遇到此问题的疑问~


【2011年11月17日补充】:

       如果解决拼接裂缝问题利用下面这行代码还是不给力的话 : 
[html] view plaincopyprint?[sprite.texture setAliasTexParameters];  
[sprite.texture setAliasTexParameters];

      那么请继续利用下面这行代码:(放在AppDelegate.m  的 applicationDidFinishLaunching方法中最后即可)
[html] view plaincopyprint?[[CCDirector sharedDirector] setProjection:kCCDirectorProjection2D];  
[[CCDirector sharedDirector] setProjection:kCCDirectorProjection2D];




	如果还是不行 ,那么检查你TP打包工具进行打包的时候,是不是忘记将帧与帧之间忘记空出1-2像素了!!!因为帧与帧之间离得特别近的话,那么渲染时正好将旁边那帧的图绘制出来了!!!!!!


如果还不行,宝贝们,你们赢了!只要以上方法都尝试过100%没问题的!!!!!!


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用CSS的`scroll-behavior`属性来实现平滑滚动效果,使用`overflow`和`overflow-y`属性来控制滚动条的出现和消失,并使用JavaScript来实现回弹效果。 具体实现步骤如下: 1. 在对话框的CSS样式设置`overflow: auto;`和`overflow-y: scroll;`来控制滚动条的出现和消失。 2. 设置`scroll-behavior: smooth;`来实现平滑滚动效果。 3. 使用JavaScript监听对话框的滚动事件,当滚动到底部时,设置一个定时器,将滚动条滚动到底部,然后再将滚动条回弹一定的距离。 以下是一个简单的示例代码: HTML: ```html <div class="dialogue"> <!-- 对话内容 --> </div> ``` CSS: ```css .dialogue { height: 300px; /* 对话框高度 */ overflow: auto; overflow-y: scroll; scroll-behavior: smooth; } ``` JavaScript: ```javascript const dialogue = document.querySelector('.dialogue'); // 监听滚动事件 dialogue.addEventListener('scroll', function() { // 判断是否滚动到底部 if (dialogue.scrollTop + dialogue.clientHeight >= dialogue.scrollHeight) { // 设置定时器,将滚动条滚动到底部 setTimeout(() => { dialogue.scrollTop = dialogue.scrollHeight; // 设置定时器,将滚动条回弹一定的距离 setTimeout(() => { dialogue.scrollTop -= 20; // 回弹距离为20px }, 100); // 回弹时间为100ms }, 100); // 滚动到底部时间为100ms } }); ``` 注意:以上代码仅为示例代码,实际情况下可能需要根据具体需求进行修改和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值