iPhone上如何实现剪切效果?

发布于 2024-09-30 13:47:43 字数 124 浏览 11 评论 0原文

我所说的“切割”效果可以在著名的iPhone游戏《水果忍者》和《割绳子》中看到,即当你的手指在屏幕上移动时,有一条轨迹跟随你的手指,模拟刀切效果。

我想知道这种效果的名称是什么以及它是如何实现的。 有人能给我提示吗?

The "cutting" effect I am talking about can be seen in the famous iPhone game "Fruit Ninja" and "Cut the Rope", that is, when you move your finger across the screen, there is a trail following your finger to simulate the knife cutting effect.

I am wondering what's the name of this kind of effect and how it is implemented.
Could anyone give me a hint?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

沉溺在你眼里的海 2024-10-07 13:47:44

WWDC 2010 视频是开始了解 CoreAnimation 的好地方。

  • 课程 424 - 核心动画实践,第 1 部分
  • 课程 425 - 核心动画实践,第 2 部分

要访问它,您将被要求使用您的开发帐户登录。

A good place to start with CoreAnimation are the WWDC 2010 Videos.

  • Session 424 - Core Animation in Practice, Part 1
  • Session 425 - Core Animation in Practice, Part 2

To access it you will be asked to login with your developing-account.

季末如歌 2024-10-07 13:47:43

这取决于到目前为止您如何实现游戏,即使用 Cocoa 中的 2D 图形或使用 OpenGL。例如《水果忍者》就使用后者,因为它的水果是3D模型。在这种情况下,您的 Render() 链通常会绘制所有 3D 对象,然后将投影更改为正交,以在所有内容之上渲染精灵字体或未转换的 2D 精灵(如 HUD)等内容。这些“精灵”中的每一个都是一个四边形(两个三角形形成一个矩形),并映射了纹理图像。一旦纹理被加载到图形内存中,GPU 就可以将其绘制并绘制出来。速度非常快,并且可以拉伸或旋转它,无需额外费用!

这就是我要做的:一个具有透明纹理的四边形,看起来像你想要的“条纹”。然后观察触摸点并跟踪前一个(或多个前一个)触摸坐标。计算两点之间的距离(谷歌“距离公式”)及其角度向量(现在您已经有了距离,只需对 deltaX、deltaY 进行两次除法运算)。将它们应用到您将用来变换四边形的 4x4 矩阵,以便拉伸它(按距离缩放 X),根据矢量旋转它,并将其转换为最近触摸点的 X、Y。当触摸抬起时,您可以轻松缩小/淡化条纹。

您可以使用另一种方法来处理弯曲滑动。比较困难,但看起来会更好。使用三角形条,并沿其长度在顶点上应用“条纹”图像(纹理坐标 0.0 到 1.0)。然后根据所有先前的触摸点,自己设置所有顶点坐标,计算点之间的线并垂直偏移顶点。有道理吗?我希望如此!我保证,这种方法很有趣,而且并不像听起来那么痛苦!

This depends on how you have implemented your game thus far, i.e., using 2D graphics like in Cocoa or using OpenGL. Fruit Ninja, for example, uses the latter, because its fruits are 3D models. In that case, your Render() chain will typically draw all your 3D objects, then change projection to orthographic to render things like sprite fonts or untransformed 2D sprites (like a HUD) on top of everything. Each of these "sprites" is a quad (2 triangles forming a rectangle) with a texture image mapped to it. Once the texture is loaded into graphics memory, the GPU can draw it over & over really fast, and stretch it or rotate it with no additional cost!

So that's the way I'd do it: a quad with a transparent texture that looks like the "streak" you want. Then watch for the touch point and keep track of the previous (or multiple previous) touch coordinates. Calculate the distance between the two points (Google "distance formula") and its angle vector (just two division operations on deltaX,deltaY now that you have the distance). Apply these to the 4x4 matrix you'll use to transform your quad, so that you stretch it (scale X by the distance), rotate it according to your vector, and translate it to the X,Y of the most recent touch point. When the touch is lifted, you can shrink/fade the streak easily.

There's another approach you could use to handle curved swipes. It's more difficult but would look better. Use a TRIANGLE STRIP with your "streak" image applied (texture coordinates 0.0 to 1.0) across the vertices along its length. Then based on all those previous touch points, set all the the vertex coordinates yourself, calculating lines between the points and offsetting vertices perpendicularly. Make sense? I hope so! This approach is fun and it's not as painful as it might sound, I promise!

去了角落 2024-10-07 13:47:43

GLPaint 示例可能会给您一些提示。

The GLPaint sample may give you some hint.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文