Cocos2d - iPhone 上的月食效果 [英] Cocos2d - lunar eclipse effect on iPhone

问题描述

我有一个关于实现像月食这样的效果的问题.效果应该看起来像这个 gif 的前几秒.所以就像一个黑色的阴影越过圆圈.理想的情况是一个函数，我可以传递一个百分比参数来获得这个数量作为圆圈上的阴影:

我面临的问题是我的背景是渐变的.所以不可能有一个在月球上移动的黑色圆圈来获得效果.

我用 CCClippingNode 尝试了一些东西，但它看起来不太好.此外，边缘的剪辑总是有点像素化.

我曾想过使用 GLSL Shader 之类的东西来实现效果，但我对 GLSL 不太熟悉，也找不到示例.

效果适用于为 iphone 开发的应用游戏.我使用的是版本3(当前版本)的cocos2d框架.

有人知道如何获得这种效果吗?我可以从哪里开始搜索?

提前谢谢你

解决方案

计算月亮的每个渲染像素

你显然有月亮的 2D 纹理.因此，您现在需要获取 1D 光照纹理内每个像素的位置.因此，如果月亮完全可见，那么您就处于阳光下.当部分黯然失色时，您处于本影区域.最后，当日全食时，你在半影区.所以只需计算月球位置的中点.其余的使用卫星运动方向的相对位置.

所以现在只需将月球表面与光照纹理相乘并渲染输出.

工作时可以添加曲率校正

现在您得到了线性切割的月相，但实际月相是弯曲的，因为照明条件也随着与运动方向和卫星中心的径向距离而异.要解决此问题，您可以这样做

• 将光照转换为 2D 纹理
• 或根据径向距离将纹理坐标移动一些曲率

i have a question about achieving an effect like on a lunar eclipse. The effect should look like in the first seconds of this gif. So just like a black shadow which goes over the circle. The ideal situation would be a function where i can passed a parameter in percentage to get this amount as a shadow on the circle:

The problem which i am facing is that my background is an gradient. So it's not possible to have a black circle which moves over the moon to get the effect.

I tried something with CCClippingNode but it looks not nice. Furthermore the clip on the edges was always a bit pixelated.

I thought about using something like a GLSL Shader to achieve the effect but i am not so familiar with GLSL and i can't find an example.

The effect is for an app game developed for an iphone. I use the cocos2d framework in version 3 (the current one).

Has somebody an idea how to get this effect? An idea where i can start to search?

Thank you in advance

解决方案

The physics behind is simple you change the light shining on the moon. So

1. I would create a 1D gradient texture representing the lighting conditions

2. compute each rendered pixel of moon

   you obviously have the 2D texture of moon. So you now need to obtain the position of each pixel inside the 1D lighting texture. So if moon is fully visible you are in sunlight. When partially eclipsed then you are in the umbra region. And finaly while total eclipse you are in penumbra region. so just compute the middle point's of the moon position. And for the rest use relative position in the moons motion direction.

   So now just multiply the Moon surface with the lighting texture and render the output.

3. when working you can add the curvature correction

   Now you got linerly cutted Moon phases but the real phases are curved as the lighting conditions differs also with radial distance from motion direction and moons center. To fix this you can do

   • convert the lighting to 2D texture
   • or shift the texture coordinate by some curvature dependent on the radial distance

这篇关于Cocos2d - iPhone 上的月食效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！