如何在iOS中将动画与单个Sprite表格区分开？ [英] how to differentiate animation from single sprite sheet in ios?

问题描述

我正在使用不使用 cocos2D 的精灵表的应用程序。

I am working on application which is using sprite sheet without help of cocos2D.

我在下面使用图像作为精灵表

I am using below images as sprite sheet

在蝴蝶结图片中有许多不同的图片。我想让它们在不同位置播放动画

In the bow picture there are many different images . I want to make them animation at different position

我已经按照本教程操作，但是它只有一个动画

I have follow this tutorial but it has only one animation

UIKit-TexturePacker

我想在没有cocos2d的帮助下（使用UIKIT）实现这一目标。

I want to achieve this without help of cocos2d (using UIKIT).

任何帮助将不胜感激。

推荐答案

您有2个选择：

困难的方式
保持原样并提取精灵的坐标和大小。
使用此信息，您将必须使用以下数据创建一个.plist文件：

The hard way You take the sprite sheet as it is and extract the coordinates and sizes of the sprites. With this information you'll have to create a .plist file with the data:

<key>green_bird</key>
<dict>
    <key>x</key><real>2</real>   <!-- x position in the sheet -->
    <key>y</key><real>259</real> <!-- y position in the sheet -->
    <key>w</key><real>126</real> <!-- width in the sheet -->
    <key>h</key><real>255</real> <!-- height in the sheet -->
    <key>oX</key><real>13</real> <!-- offset in the sprite, x-->
    <key>oY</key><real>2</real>  <!-- offset in the sprite, y-->
    <key>oW</key><real>150</real> <!-- original width of the sprite -->
    <key>oH</key><real>261</real> <!-- original height of the sprite -->
</dict>

Loader处理已删除的精灵周围的透明度。这是oX，oY，oW和oH值的来源。它们为您提供了精灵的原始大小和原始精灵中的位置。您可能会离开而将它们保留为与w和h相同的oX = 0，oY = 0，oW和oH。

Loader handles removed transparency around sprites. This is where the oX, oY, oW and oH values come from. They give you the original size of the sprite and the position in the original sprite. You might get away with leaving them at oX=0, oY=0, oW and oH same as w and h.

简单方法

您需要使用一些图形软件（Photoshop，Gimp等），并从子图形表中分割子图形。

You take some graphics software (Photoshop, Gimp, whatever) and slice the sprites from the sprite sheet.

在切割时对齐精灵：使相同动画的所有精灵大小相同。检查它们是否重叠良好。如果您不这样做，则在将精灵用作动画时会遇到麻烦。他们会发抖。

Align the sprites while cutting: Make all sprites of the same animation the same size. Check if they overlap nicely. If you don't do that you'll be in trouble when you want to use the sprites as animations. They are going to jitter. You don't want that.

最后给它们取好名字：red_bird_01.png，red_bird_02.png等等。

Finally give them nice names: red_bird_01.png, red_bird_02.png and so on.

现在将它们拖放到TexturePacker上。它将为您重新创建布局-包含在动画中使用图纸所需的所有信息。

Now drag and drop them onto TexturePacker. It'll re-create the layout for you - with all information required to use the sheet in animations.

由于您正在使用教程中的加载程序代码，因此您也可以启用修剪功能-消除了透明度-重新包装的精灵表将比原始的精灵表小得多。

Since you are using the loader code from the tutorial you can also turn on trimming - this removes that transparency - the re-packed sprite sheet will be much smaller than the original one.

Btw。有一个教程解释了您在github上找到的示例代码中的详细信息：
https://www.codeandweb.com/blog/2013/05/16/uikit-animations-with-texturepacker

Btw. there's a tutorial explaining the details in the example code you found on github: https://www.codeandweb.com/blog/2013/05/16/uikit-animations-with-texturepacker

关于游戏开发的一些最终结论

如果您想研究游戏开发，我真的建议您获得一些游戏开发框架-cocos2d，cocos2d -x，spritekit等，它们会让您的生活变得更加轻松。可能需要一些时间才能上手-但是它们可以更有效地处理图形内容，并且还包含物理引擎和所有其他所需的内容。
在UIKIT之上从头开始构建它不是一个好主意。

If you want to dig into game development I really propose that you get some game development framework - cocos2d, cocos2d-x, spritekit,... they'll make your life so much easier. It might take some time to get started - but they handle the graphics stuff more efficient and also contain physics engines and all the other stuff required. Building it from scratch on top of UIKIT is not a good idea.

这篇关于如何在iOS中将动画与单个Sprite表格区分开？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！