代码库> 游戏源码> [下载]创建九宫格精灵, 或者仅横向/纵向自适应(另有疑问想请教~)
[下载]创建九宫格精灵, 或者仅横向/纵向自适应(另有疑问想请教~)
关注
上传者:何夕 分类:游戏源码(Game Source Code)
查看次数:5646 下载次数:283
上传时间:2013-03-10 大小:3 B
看了一个TinyWIngs的教程, 讲如何动态创建纹理, 学习了不少. 
正好一直有个精灵圆角图片的问题, 即类似iPhone短信的气泡效果, 随文字自适应扩大.
之前参考过一些帖子, 需要在UIImage和CCSprite之间转化.
但是这种做法有个问题, 就是高清和非高清设备出来的效果不一样, 这个当时把我弄晕了.
看了动态创建纹理的教程, 觉得可以做这个自适应. 于是有了这份代码.
算是勉强完成, 但其中还有一些问题, 还请大家多指导!


效果图:




调用:

//图片尺寸没有要求, 四个边界值也没要求.
    CCSprite *origin = [CCSprite spriteWithFile:@"iconImage.png"];
    CCSprite *sprite = [HXNineGridSprite nineGridSpriteWithSprite:origin size:CGSizeMake(100, 80) edgeInsets:UIEdgeInsetsMake(30, 30, 30, 30)];
//    CCSprite *sprite = [HXNineGridSprite horizontalSpriteWithSprite:origin width:400 edgeInsets_H:(HXEdgeInsets_H){120, 40}];
//    CCSprite *sprite = [HXNineGridSprite verticalSpriteWithSprite:origin height:200 edgeInsets_V:(HXEdgeInsets_V){15, 30}];
    sprite.position = CGPointMake(240, 160);
    [self addChild:sprite];



我的疑问:
九宫格裁剪, 把一张图分成9份:
1 2 3
4 5 6
7 8 9
然后把2,4,5,6,8进行延伸.
(初学GLES, 用的是GL_LINEAR. 我发现用GL_REPEAT更会出现下图中的白色缝隙)
下面几行代码是裁剪九宫格之中, 会拉伸的部分, 即: 上,下,左,右,中间 5个部分.
但是裁剪左边和下边这两个的时候, 如果不像注释所说的+1/-1修正, 会出现缝隙, 像这样:



请赐教~~!!


  const float edge = 2;//必须是2的n次方, 如:1,2,4... 不可太大
  CCSprite *sprite2 = [self subSpriteWithSprite:sprite rect:CGRectMake(left, 0, edge, top)];
  CCSprite *sprite4 = [self subSpriteWithSprite:sprite rect:CGRectMake(0, top, left+1, edge)];//宽+1是修正缝隙
  CCSprite *sprite5 = [self subSpriteWithSprite:sprite rect:CGRectMake(left, top, edge, edge)];
  CCSprite *sprite6 = [self subSpriteWithSprite:sprite rect:CGRectMake(width-right, top, right, edge)];
  CCSprite *sprite8 = [self subSpriteWithSprite:sprite rect:CGRectMake(left, height-bottom-1, edge, bottom+1)];//y-1,高+1是修正缝隙



另一个疑问:

这个是纵向自适应, 结果下图红框处, 边缘的过渡没有了, 实际应该是像顶部和底部的边缘过渡那样, 颜色较深才对.
请问大家, 这是为什么?

  

代码下载:


收藏
我来说两句
发表评论
您还没有登录!请登录注册
所有评论(0


综合评论
提示
sina weixin mail 回到顶部