Unity iPhone Touch Animation Tutorial

I started working with Unity iPhone a few days ago and I’ve been digging around in the example game project files and reading thru forum posts looking for clues on how to make stuff work.   I’ve found a few good/basic tutorials but I was looking for something a little different so I figured I’d just dive in.

For my first “hello world” app, I came up with a basic goal: touch the screen to play an animation on an object.

After an hour or two digging around in forums, scripting manual, and the iPhone-Match example game, I managed to come up with a simple little app that actually works on my iPhone!

I was so excited to see this thing working and it was so much fun to put together that I figured why not put together a tutorial!?  So I did!

This tutorial covers quite a few basics including:
– playing animations on a 3d object when you touch and un-touch the screen.
– creating and animating a simple object in Maya
– setting up the animations in Unity
– setting up a basic 2D scene with default lighting and Main Camera position
– adding a 2D background image

You can download the entire Tut1-TouchAnim.zip project before you get started or you can do the whole thing from scratch just by following along with the steps below. Let’s get started!

1. Create a new Project: Go to File –> New Project –> Set… and browse to where you keep your Unity projects (mine are in Documents/Unity Projects), then in the Save As… field type “Tut1-TouchAnim” and click the Save button.

2. Create Project folders: In the Project panel, click the Create button and then select Folder from the list. This will add a new folder to your Project named New Folder. The folder is also created on the hard drive in your Tut1-TouchAnim/Assets directory.

Click once on the folder name (New Folder) to edit it and type “Objects” (without the quotes).

Click anywhere in the Project panel to deselect the Objects folder then click the Create button again and select Folder from the list. Rename this 2nd folder “Scripts“.

Click anywhere in the Project panel to deselect the Scripts folder then click the Create button again and select Folder from the list. Rename this 2nd folder “Textures“.

3. Save your Scene: Go to  File –> Save Scene and name it “Tut1-TouchAnim”

4. Maya Setup: In Maya go to Window –> Settings/Preferences –> Preferences and then click onSettings in the Preferences window.

– Set the Up axis to “Y” since Y is up in Unity.

– Change the Linear Working Units to “Millimeter”. Currently I find that this is the best scale for getting a good (close enough?) 1:1 size from Maya to Unity.

Note: please feel free to comment on the above Maya settings if you’ve found a better setup.

5. Create an object in Maya: I’m using Maya 2008, but the general ideas here will apply to any modeling/animation program.

Make a cube by going to Create –> Polygon Primitives –> Cube and then draw out a rough cube on the grid.

Select the cube and then in the Channel Bar under INPUTS click on polyCube1 (yours may be named slightly different). Set the Width, Height and Depth to 20 (this assumes your working units are set to millimeters).

Set the Translate X:0, Y:0 and Z:0 so the cube is centered on the grid.

Set the Rotate X:45, Rotate Y:45, and Rotate Z:45. This will make the cube kinda stand up on one corner to give the animation a little visual interest.

6. Animate the cube: We’re going to be making 2 very simple animations where the cube will rotate “forward” 180 degrees and then rotate “backward” 180 degrees to its default position.

First create the forward animation:
With the Timeline slider at Frame 1 and your Cube selected, press the “s” key to add a frame. Or go toAnimate –> Set key (you’ll need to be in Animation mode).

Drag the slider on the timeline to Frame 10, change the cube’s Rotate Y:225 and press “s” to add a new keyframe at frame 10.

Next create the backward animation:
Drag the timeline slider to Frame 20, change the cube’s Rotate Y:45 and press the “s” key to add a new keyframe at frame 20.

That’s it for the animations. As far as Maya is concerned, we’ve only created 1 animation, but in Unity we’ll see how this single Maya anim can be made into 2.

7. Save the animated cube: In Maya go to File –> Save Scene As… and browse to your Tut1-TouchAnim/Assets/Objects directory and save it there as cubeAnim.mb.

8. Setting up the animated object in Unity: Switch back to Unity and you’ll see that there’s now a file in the project’s Object folder named “cubeAnim”.

Select cubeAnim (top node) in the project’s Objects folder and then click on the Settings… button.  This will bring up a dialogue that allows you to adjust the objects Import settings.

Click the Add clip button which will add a default animation to the list below named “idle”. Click on the word “idle” and type in forward. Leave first frame set to 1 and change the last frame to 10.

Click the Add clip button again, click on the “idle” text, and type in backward. Leave the first frame set to 11 and change the last frame to 20.

Leave “loop frame” unchecked for both clips.

Click the Import button and after a few seconds you should see in the Project panel under cubeAnimthat there are now 2 animations named backward and forward. If you select cubeAnim and look in the Inspector under Animations, you’ll see that Element 0 has the “forward” animation assigned and Element 1 has the “backward” animation assigned.

9. Adding your object to the Scene: First thing we’re going to do is add a new empty Game Object to the scene which we will Parent our cubeAnim object to. Go to Game Object –> Create Empty. You’ll see that a GameObject has been added to the Hierarchy panel.

Next select the cubeAnim object in the Projects panel and drag-and-drop it onto the GameObject in the Hierarchy panel to make the cubeAnim a child of GameObject. Your cubeAnim object should now also be visible in the Scene and in the Game panel (if you have it open).

Note: you could simply drag cubeAnim into the scene without parenting it to a GameObject, but you’ll find that when the cubeAnim’s animation plays, it’ll always reset its position in the Scene to Frame 1 as it was set in Maya. With the cube parented to a GameObject, you can move the GameObject anywhere in the scene and the animation will play at that location.

10. Adding a script: In the Project panel, select the Scripts folder, click the Create button, and select JavaScript from the drop down list. This will add a new script to the Scripts folder named NewBehaviorScript. Click on the scripts text and rename it to TouchAnim.

Double click the TouchAnim script in the Projects panel to open it up in Unitron (or whatever script editor you have set).

Download my TouchAnim.js file (right or ctrl click to save as…) and copy/paste the contents into your own script.  Save your script file and then task back to Unity. If you click on the TouchAnim script in the Project panel, you should see the contents of the file in the Inspector.

11. Attach the script to your object: Select the TouchAnim script in the Project panel and then drag-and-drop it onto the cubeAnim object in the Hierarchy panel.

To confirm that the script is attached, select the cubeAnim object in the Hierarchy panel and you should see Touch Anim (Script) component listed in the Inspector.

12. Add a Mesh Collider to your object: Select cubeAnim in the Hierarchy panel and then go toComponent –> Physics –> Mesh Collider. This will add the Mesh Collider component to your object — you should see it in the Inspector. Without a Mesh Collider the script won’t be able to detect a collision with your cube.

At this point, if you press the Play button on your Game view, you can mouse-click on/off the cube and it should animate forward and backward.

13. Adjusting the Main Camera : Something that I don’t understand about the default Main Camera Position and Rotation, is that it’s set to look at the scene from the back instead of the front. Which means any objects you import from Maya will look backwards in the Game view.  We’re going to set up the Main Camera so that it’s facing (what I consider to be) forward and adjust its position so that it’ll nicely frame the background image we’ll be creating in the next step.

Select the Main Camera in the Hierarchy panel and set Position: 0,0, 8.1 and Rotation: 0, 180,0.

14. Adding a textured background: To give the scene a little nicer presentation, add a Plane by going to Game Object –> Create Other –> Plane.  This will add a Plane at 0,0,0.

Select the Plane in the Scene or from the Hierarchy and set Rotation:90,0,0.  The default position (0,0,0) and Scale (1,1,1) should be just right for the Main Camera we setup in the previous step.

Your new Plane will have the Mesh Collider component on it by default (mine does at least).  You’ll need to remove this so that the script will only collide with the cube and not with the background.  Select the Plane, then in the Inspector click the little “gear” icon next to the Mesh Collider component and select “Remove Component” from the dropdown list.

Download this default grid texture and put it in your Tut1-TouchAnim/Assets/Textures directory.

In Unity, select the defGrid texture from the Project’s Textures folder and drag-and-drop it onto thePlane in the Scene view.  If you adjusted the Main Camera position and the Plane rotation correctly in the previous steps, the Grid pattern should fit perfectly in the Game view.

15. Adding a Light to the scene: To get a nice bright rendering of the scene, add a light by going toGame Object –> Create Other –> Directional Light. This will create a new Directional Light at 0,0,0. Move the light somewhere near the Main Camera and rotate it so it points at the cube. My position is set to 0,0,15 and the rotation is set to 0,180,0.

All of the default light settings for the Directional Light should work fine, except change the Render Mode to “Force vertex”.  I’m not sure yet what that does, but that’s how the iPhone-Match game has their Directional Light set.

16. Set the iPhone Bundle Identifier: I’m still a bit confused as to exactly how this works as I think it’s supposed to somehow match your App ID that you setup at the iPhone Developer Portal. But I set my Bundle Identifier to * (asterisks) so I assumed that’s what I’d enter in Unity… but that doesn’t work for me.

In Unity, go to Edit –> Project Settings –> Player to display the player settings in the Inspector. Next toiPhone Bundle Identifier, you should see “com.Company.ProductName“. I set this tocom.bleepng.touchanim which works for me. You may need to play around with this on your side to get it to work properly.

17. Play it in Unity: We’re all done. If you press the Play button in your Game view, you should be able to click on and off of the cube to see the animation play forward and backward. Note that the animation should only play if you click directly on the cube, not on the background plane.

Note, if you want the animation to play when you click anywhere on the screen, simply remove the if (Physics.Raycast (ray, hit, 100)) lines from the script.  Or add a Mesh Collider component to your background Plane.

18. Build & Run it on your iPhone: Setting up Xcode and configuring your iPhone to run apps is beyond the scope of this tutorial, so I’ll assume you’ve done all of that already.

Launch Xcode and plug in your iPhone. Be sure to unlock your phone or Xcode may give you warnings when it tries to install and launch the app on your phone.

In Unity, go to File –> Build & Run and then click the Build & Run button on the Build Game screen.  At the Save Player window, type touchanim and click Save.

Once Unity finishes building the game, Xcode will compile everything, install it on your iPhone and automatically launch it (if your iPhone isn’t locked).

Conclusion:
When you’re all done, your Unity project should look something like my setup in this screenshot (click the image to see full sized).

Hopefully you had as much fun following this tutorial as I had writing it. Feel free to leave comments on how to improve this tutorial, or if you find any bugs in it, or if you have any questions. Also please let me know if you’re aware of any other tutorials out there we should look at.

I should point out that I’m a Designer by trade and not a programmer, so any questions on the scripting side of this tutorial should probably directed towards the Unity Forums rather than to me. That said, I’m just as eager to understand the programming side of Unity as you are so I’ll be following along with the discussion.

I’ve posted a link to this tutorial from the Unity Forums, so be sure to check there for related discussion. 

 

======================给大家补充一点翻译啊，希望对大家有用，最好尽量卡原文========================
你可以下载整个Tut1 - TouchAnim.zip项目开始之前或只是按照下面的步骤你可以沿着从无到有整个事情。让我们开始吧！ 
1。创建一个新的项目：进入文件 - >“新建项目 - >设置...，并浏览到您保持您的统一项目（矿文件/统一项目中），然后在另存为...字段中键入”Tut1 - TouchAnim“，并点击保存按钮。 
2。创建项目文件夹：在项目面板中，单击创建按钮，然后从 列表中选择文件夹。这将添加一个新的文件夹到您的项目命名的新文件夹。还创建该文件夹，在你的Tut1 - TouchAnim /资产目录中的硬盘驱动器。 
一次在文件夹名称（新文件夹）点击编辑，输入“对象” （不带引号）。 
任何地方在项目面板点击取消选择对象文件夹然后点击创 建按钮再从列表中选择文件夹。这第二重命名文件夹“脚本”。 
任何地方在项目面板点击取消选择Scripts文件 夹，然后点击创建按钮再从列表中选择文件夹。这第二重命名文件夹“素材”。 
3。保存你的场景：进入文件 - >“保存场景，并将其命名为”Tut1 - TouchAnim“ 
4。玛雅安装程序：在进入玛雅到窗口 - >“设置/首选项 - >”首选项，然后在Preferences窗口中点击设置。 
- 设置最多轴的“Y”，因为Y是在统一。 
- 更改线性工作单位“毫米”。目前，我觉得这是最好的，规模越来越好（足够接近？） 从玛雅1:1大小的统一。 
注：请随时评论上述玛雅设置如果你已经找到了更好的设 置。 
5。在Maya中创建一个对象：我使用的玛雅2008年， 但这里的一般想法将适用于任何建模/动画节目。 
请通过去创建 - >多边形原库 - >魔方立方体，然后制定出一个粗略的网格立方体。 
选择多维数据集和在通道酒吧然后在输入端点击 polyCube1（你可能被命名为稍有不同）。设置宽度，高度和深度，以20（假定你的工作单位设置 为毫米）。 
设置翻译谢：0，Ÿ：0和Z：0，这样的立方体是在网 格中心。 
设置旋转谢：45，旋转Ÿ：45，和旋转ž：45。这将使立方体上站起来有点儿一个角落，使一个小动画视 觉兴趣。 
6。动画的立方体：我们将会非常简单的动画制作2立方体将 轮流在“前进”，然后旋转180度“落后”180度到它的默认位置。 
首先创建了动画：随着时间轴滑块在第1帧并选择你的魔 方，
按下“S”键以添加一个框架。或到动画 - >设置键（你需要在动画模式）。 
拖动时间轴滑块到第10帧，更改立方体的旋转 Ÿ：225，然后按“S”以添加一个新的关键帧帧10。 
下一步创建落后动画：
拖动时间轴滑块到20帧，改变 立方体的旋转Ÿ：45，按“S”键来添加一个新的关键帧帧20。 
这对于它的动画。至于玛雅而言，我们只创建一动画，但在统一，我们将看 到如何单玛雅阿尼姆可分为二的。
7。保存动画立方体：在玛雅进入文件 - >“另存为...场景并浏览到您的Tut1 - TouchAnim /资产/对象目录并将其保存为cubeAnim.mb它。 
8。在统一设置动画的对象：切换回统一，你会看到，现在有 一个项目中的对象文件夹文件名为“cubeAnim”。 
选择cubeAnim（顶级节点）在项目的对象文件 夹，然后在点击设置...按钮。这将弹出一个对话，让您调整对象导入设置。 
按一下按钮，这将剪辑添加一个默认的动画添加到下述名 单“闲置”。关于这个词点击“闲置”，并在转发型。给第一帧设置为1，改变最后一帧为10。 
点击添加按钮再次剪辑，点击“闲置”的文本，在落后的 类型。给第一帧设置为11帧，改变过去的20。 
给“循环框架”，为剪辑选中。 
点击导入按钮，几秒钟后，你应该看到下 cubeAnim在项目小组，目前有2名为向后和向前的动画。如果您选择cubeAnim和督察下看动画，你会看到 有元素0“前沿”动画分配和元一有“落后”的动画分配。 
9。你的对象添加到场景：第一件事我们要做的就是添加一个 新的空对象的游戏场景，我们将我们的cubeAnim家长反对。到游戏的目标 - >“创建空。你会看到一个游戏物体上拥有已被添加到面板的层次。 
下一步就是选择在项目面板并拖动并放置在面板的层次上 的游戏物体上拥有它使cubeAnim的游戏物体上拥有儿童cubeAnim对象。您cubeAnim对象现在应该也可以看到在现场，并 在游戏面板（如果您有它打开）。 
注意：你可以简单地拖放到场景没有父母到一个游戏物体 上拥有cubeAnim，但你会发现，当cubeAnim的动画剧本，它会永远重置其位置在第1帧的场景，因为它是在玛雅集。与父到游戏物体上拥有的立方体，你可以移动游戏物体上 拥有任何地方的场景和动画将播放在该位置。 
10。添加脚本：在项目面板中，选择Scripts文件夹， 单击创建按钮，并选择的JavaScript从下拉列表中。这将添加一个新的脚本的脚本文件夹名为 NewBehaviorScript。点击脚本文本和重命名为TouchAnim。 
双击该项目小组的TouchAnim脚本来打开它在优 利康（或任何您已设置的脚本编辑器）。 
下载我TouchAnim.js文件（右或CTRL点 击另存为...）和复制/粘贴到您自己的脚本的内容。保存您的脚本文件，然后回到任务的统一。如果您在项目面板TouchAnim脚本点击，您应该 看到在Inspector文件的内容。 
11。附加到对象的脚本：选择在项目面板TouchAnim 脚本，然后拖和拖放到cubeAnim对象的层次面板它。 
要确认该脚本连接，选择对象的层次面板 cubeAnim，你应该看到触摸阿尼姆（脚本）组件在Inspector中列出。 
12。添加到您的网撞机对象：在层次结构中面板选择 cubeAnim然后转到组件 - >物理学 - >网对撞机。这将添加到您的网撞机的组件对象 - 你应该看到它的督察。没有网对撞机的脚本将不能检测出你的立方体的碰撞。 
此时，如果您按您的游戏的看法播放按钮，你可以鼠标点 击/关闭动画立方体，它应该向前和向后。 
13。调整的主要照相机：一些我不明白有关默认主摄像机的位 置和旋转，是它的设置看从后面而不是前面现场。这意味着任何对象你会从进口看玛雅在游戏的看法后退。 我们要设置主照相机，以便它的正面（我认为是）提出，并调整其位置，以便它会很好的框架背景图片，我们将在下一步的创作。 
选择层次结构中的主相机设定面板的位 置：0,0，8.1和旋转：0，180,0。 
14。添加纹理背景：为了让现场演示更好一点，要添加游戏对 象 - >“创建其他 - >平面一个平面。0,0,0，这将增加在平面上。 
选择飞机上的场景，或从层次结构，并设置旋 转：90,0,0。默认位置（0,0,0）和规模（1,1,1）应只为我们的主相机设定权上一步。 
您的新飞机将有网对撞机上的默认组件（矿井至少一 样）。您需要删除该脚本只能碰撞的立方体和背景。选择平面，然后在不要这样做督察点击小“齿轮”图标旁边的网撞机组件并选择“删除 组件”从下拉列表中。 
下载此默认网格纹理放在你的Tut1 - TouchAnim /资产/素材目录。 
在统一，选择从项目的纹理文件夹，拖和拖放到飞机上的 场景观看defGrid纹理。如果你正确调整在前面的步骤主要摄像机的位置和平面旋转，网格模式应伏贴在游戏的看法。 
15。添加一盏灯，现场：要获得一个不错的明亮的场景渲染， 将添加游戏对象 - >“创建其他 - >定向光一光。这将创建一个新的方向在0,0,0光。移动光某处附近的主相机和旋转，以便它在多维数据集 点。我的位置设置为0,0,15和旋转设置为 0,180,0。 
在默认的定向光灯的设置都应该正常工作，除非改变渲染 模式，“强制顶点。”但我不知道是什么做，但那是怎样的iPhone匹配游戏都有自己的一套定向光。 
16。设置iPhone捆绑标识符：我还是以准确是如何工作 的，因为我觉得它应该以某种方式匹配您的应用程序ID，您在iPhone开发者门户网站设置有少许混乱。但是我设置我的束标识符为*（星号），所以我假定这就 是我想要进入统一...但是，这并不为我工作。 
在团结，去编辑 - >“项目设置” - >播放器显示在播放器设置督察。下一步，iPhone捆绑标识符，你应该看到 “com.Company.ProductName”。我设置为com.bleepng.touchanim 这对我的作品。您可能需要玩，约在您身边得到正常的工作。 
17。发挥团结的：我们都是这样做。如果按你的游戏的看法播放按钮，你应该可以点击和看到 过的立方体动画播放前进和后退。请注意，动画只应发挥如果您单击直接在立方体，飞机上 没有的背景。 
请注意，如果你想时播放的动画在屏幕上你点击任何地 方，只需删除如果（Physics.Raycast（射线，击中，100））从脚本行。或者添加一个网格对撞机组件你的背景平面。 
18。建立和运行在你的iPhone：Xcode中设置和配 置您的iPhone应用程序运行超出了本教程的范围，所以我假设你已经做了这一切。 
启动Xcode中，并插入iPhone。一定要解锁你的手机或Xcode中可能会给你警告，当 它试图安装和启动手机上的应用程序。 
在团结，转到文件 - >“生成和运行，然后单击生成和运行游戏屏幕上生成按钮。在储存播放器窗口中，键入touchanim，然后点击保存。 
一旦完成建立统一的游戏，将编译的Xcode一切，你 的iPhone上安装它，并自动启动它（如果你的iPhone是未锁定）。

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

http://www.bleepng.com/blog/2009/05/unity-iphone-touch-animation-tutorial/

http://www.u3dpro.com/read.php?tid=141