ios游戏制作了一个遮罩层效果

时间:2022-03-16 23:56:46

ios游戏制作了一个遮罩层效果I need a 'mask' layer that covers the whole screen, with the center part (a circle) to be transparent. Then I can move the mask layer around using touch. User are only able to see the transparent part in the middle.

我需要一个覆盖整个屏幕的“遮罩”层,中间部分(圆圈)是透明的。然后我可以使用触摸移动遮罩层。用户只能在中间看到透明部分。

I don't think a png file can help because the file need to be very large to cover the whole screen.

我不认为png文件可以提供帮助,因为文件需要非常大才能覆盖整个屏幕。

So is it possible to do it by coding?

那么通过编码可以做到吗?

i found this online, but don't know much about openGL. http://www.cocos2d-iphone.org/forum/topic/7921.

我在网上找到了这个,但对openGL了解不多。 http://www.cocos2d-iphone.org/forum/topic/7921。

it would be great if i can use a CCMaskLayer and input with the radius. i can handle the touch event by my self.

如果我可以使用CCMaskLayer并输入半径,那将是很好的。我可以自己处理触摸事件。

the attached png file is expected result, the center part is transparent. i need this to cover my screen, and only show the middle part. the red part is covered.

附加的png文件是预期的结果,中心部分是透明的。我需要这个来覆盖我的屏幕,只显示中间部分。红色部分被覆盖。

2 个解决方案

#1


3  

I write a CCMaskLayer to do the exactly same thing.

我写了一个CCMaskLayer来完成同样的事情。

https://github.com/smilingpoplar/CCMaskLayer

#2


3  

You may solve this task with cropped circle texture in two ways:

您可以通过两种方式使用裁剪的圆形纹理来解决此任务:

1) Draw sprite with circle texture in screen center and draw another 4 sprites around (on top, bottom, left and right sides) with small red texture but scaled to cover all screen.

1)在屏幕中心绘制带有圆形纹理的精灵,并绘制另外4个精灵(在顶部,底部,左侧和右侧),具有小的红色纹理,但缩放以覆盖所有屏幕。

2) (more elegant but harder to implement) Make your mask layer fullscreen but adjust texture coordinates. In details:

2)(更优雅,但更难实现)使您的遮罩层全屏,但调整纹理坐标。详情如下:

  • set wrap mode to GL_CLAMP_TO_EDGE to your circle texture
  • 将环绕模式设置为GL_CLAMP_TO_EDGE到圆形纹理

  • adjust texture coordinates of your layer vertices (to do this you need to subclass base CCLayer):

    调整图层顶点的纹理坐标(为此,您需要子类化基础CCLayer):

    ios游戏制作了一个遮罩层效果

Here v means vertex position and t - texture coordinates. You need to set correct texture coordinates for four corner vertices of layer. For future if you will want to drag circle you will need to add some offset values to texture coordinates.

这里v表示顶点位置和t - 纹理坐标。您需要为图层的四个角顶点设置正确的纹理坐标。对于将来,如果您想要拖动圆,则需要向纹理坐标添加一些偏移值。

#1


3  

I write a CCMaskLayer to do the exactly same thing.

我写了一个CCMaskLayer来完成同样的事情。

https://github.com/smilingpoplar/CCMaskLayer

#2


3  

You may solve this task with cropped circle texture in two ways:

您可以通过两种方式使用裁剪的圆形纹理来解决此任务:

1) Draw sprite with circle texture in screen center and draw another 4 sprites around (on top, bottom, left and right sides) with small red texture but scaled to cover all screen.

1)在屏幕中心绘制带有圆形纹理的精灵,并绘制另外4个精灵(在顶部,底部,左侧和右侧),具有小的红色纹理,但缩放以覆盖所有屏幕。

2) (more elegant but harder to implement) Make your mask layer fullscreen but adjust texture coordinates. In details:

2)(更优雅,但更难实现)使您的遮罩层全屏,但调整纹理坐标。详情如下:

  • set wrap mode to GL_CLAMP_TO_EDGE to your circle texture
  • 将环绕模式设置为GL_CLAMP_TO_EDGE到圆形纹理

  • adjust texture coordinates of your layer vertices (to do this you need to subclass base CCLayer):

    调整图层顶点的纹理坐标(为此,您需要子类化基础CCLayer):

    ios游戏制作了一个遮罩层效果

Here v means vertex position and t - texture coordinates. You need to set correct texture coordinates for four corner vertices of layer. For future if you will want to drag circle you will need to add some offset values to texture coordinates.

这里v表示顶点位置和t - 纹理坐标。您需要为图层的四个角顶点设置正确的纹理坐标。对于将来,如果您想要拖动圆,则需要向纹理坐标添加一些偏移值。