Sparticle入门教程
安装
这个工具使用了Adobe的跨平台技术AIR,所以不管你用的是 Windows 还是 Mac OS都可以使用. 安装过程很简单,用浏览器打开下载页面,然后你可以选择两种方式:
自动安装 – 打开(http://www.effecthub.com/t/sparticle),点击一下安装按钮,然后不断点下一步就可以。如果你的电脑里面没有AIR的环境,它会自动安转AIR,但是过程就会稍微长一些,需要耐心等待一下。
手动安装 – 首先请确保你电脑上已经有AIR环境(如果没有的话,需要点击这个连接http://get.adobe.com/air/去安装),然后下载安装程序 http://www.effecthub.com/download/software/sparticle,接下来打开它安转就可以。一旦你完成首次安转,你就不用再担心升级的问题,因为它会在每次启动的时候检查是否有新版本可用。
编辑器初探
现在打开这个新装的程序,它会提示你登录.
如果你还没有一个Effecthub的帐号, 建议你先注册一个。它是免费的并且很简单。回到编辑器,然后用你的帐号登录进去。这时你看到的应该是这样一个界面.
这个界面从左到右可以分为3个大部分:1.左边是信息框,它显示一些关于自己的信息和一些社交相关的内容;2.中间是预览框,用于播放和观察效果。3.右边是编辑框,用于设置效果的各种属性。
在我们创作效果的时候,我们不会太多关注与左边的信息框,所以我们可以点击最左边的小箭头(黄色圆圈出)将其折叠起来,这样我们就有了更大的空间来方便我们的效果创作。
从零开始创建效果
现在我们可以开始创建效果了。这里我们来做一个公园里经常见到的喷泉效果。点击file菜单,选择new。
然后给新的效果输入一个名字比如说fountain。确认之后,一个默认的粒子效果就会出现在预览框之中。
现在看看右边的编辑框的animations部分。这里animation 0就代表这个默认的效果。如果我们点击右上角的del按钮把它删掉,这时就没有任何效果显示了。相反,我们也点击add按钮来增加更多的效果。
好吧,为了继续我们的创作,我们只留下一个默认效果,然后选中它。这时编辑框中的Properties和Behaviors就会指示当前选中的animation的参数。
为了让我们对整个流程更加清楚,我们需要把这个默认效果设置成最简单的状态。所以我们把Behaviors里面能删除的节点都删掉(点击上图所示的黄色圈中的叉),然后把Time节点展开,把checkbox都关掉,如下图。
这时预览框中的效果应该会变成一个静止不动的红色方框。我们用鼠标调整预览的视角(通过拖拽和鼠标中键滚轮),应该看到形如下图的样子就对了
水珠
接下来我们来考虑怎么做喷泉的效果。喷泉是有成千上万的水珠组成,所以我们首先需要考虑的是水珠的问题:我们希望把这个红色的正方形变成一个水珠的形态。由于我们做的是3D效果,所以你也许会首先想到用一个3D水珠模型来替换它。确实可以这样,这个工具允许你导入3D模型来作为粒子,看看编辑框中Properties的shape这个下拉框,最下面一个External Model就是外部模型的类型。
不过我们并没有准备好一个现成的模型,并且做一个像水珠的模型并不轻松。我们需要一个3D的建模工具并且花上一些功夫才能完成。另一方面,一个3D模型可能包含数千的顶点。我们来这样计算一下,一个喷泉包含数千的水珠,一个水珠包含数千的顶点,那么最终就有数百万的顶点需要去渲染,这很可能会造成一些性能问题。所以我们要换一种方式,就用这个默认的Plane类型吧。
但是这里有一个明显的问题:当我们调整视角到某个角度,这个红色的小方框就看不见了。但是3D效果可是存在调整视角这样的需求的。
这里有一个3D粒子效果的常见技巧——用Billboard。现在我们找到Behaviors中的”add one behavior”这个下拉框,然后选择Billboard这个节点:
现在我们再来旋转一下我们的视角。无论怎么旋转,这个红框会永远朝向我们。
你可能会问,即使是这样,它仍然不是真正的3D啊。您说得对,但是水珠是非常小的粒子,当成千上万的水珠运动起来,我们就不会察觉这个不真实的地方了。这样做有两点好处:1.我们不用花时间在创建模型上;2.相对一个模型可能有上千个顶点,一个矩形只有4个顶点.
贴图
显然现在这个红色的矩形还不符合水珠的形态。下一步我们来改变它的贴图.点一下material这个tab。默认情况下,我们用的是红色的纯色贴图,所以你看到了现在的形态。我们可以稍作修改,把它变成蓝色。但是效果仍然不理想。现在我们需要换另外一种类型:texture material,然后点击open按钮,去打开一张像水珠的外部图片。
为了简化我们的制作流程,我仅仅是用画图软件作了一个简单的蓝点来表示水的形态。你也可以像我一样做一个简单的,也可以多花些时间做精美一点。这里有一件事情需要注意一下,作为给GPU渲染的贴图,它的宽和高都必须是2的n次方(形如128*128,256*512…)。这是底层硬件上为了更高效地渲染做出的限制。所以这个编辑器不允许输入非2的n次方的贴图。
移动
接下来我们要让粒子移动起来。先想想喷泉是怎么形成的。喷泉的水源不断的发射着水珠,水珠以一定的初速度往天上飞。同时水珠还受到地球重力的影响,所以最终会掉到地面上。所以我们先给这个效果加上速度吧。像加Billboard一样,我们需要添加Velocity 这个节点。不同于Billboard的地方是Velocity要求我们对速度这个参数做一定的设置。速度是一个3维属性。对于三维的属性,编辑器提供了若干种类型,如下图所示:
每种类型我们就不再这里一一介绍了,大家可以自己来尝试。这里我们选择ThreeDShpere这种类型,它表示所有粒子的这个属性的值会随机从这个球体内选择一点。我们的目的是希望所有的粒子有一个延着Y轴方向较大的初速度,同时每个粒子的速度在每个方向上又略有一点不同,以便形成一个向旁边散开的效果。于是我们把里面的数值设置成如下图所示:
这时候可以点一下预览框左下角的Restart按钮,那么水珠就会和我们预期的那样移动起来。
接下来我们找到Acceleration这个节点,用加速度来模拟重力的效果。加速度是一个向下的常量,所以我们选择ThreeDConst然后设置成(0,-500,0)
再次点击Restart。是不是很像喷泉了?
时间
实际中的喷泉会持续不断的发射水珠,但是我们现在这个只发射了一会儿就停止了。所以接下来我们需要调整时间节点。
展开时间节点,我们看到这里有很多属性可以设置。第一个是startTime,这是一维的属性了。一维的属性也有若干种类型,这里默认选的是OneDRandom,表示随机从两点之间取一个值。startTime就像他名字描述的那样,指示着粒子在什么时候出来。现在的默认值是0至2秒,也就是说所有水珠的发射时间是在0至2秒之间。我们现在不用修改这个数值。startTime下面的duration表示粒子出来之后会持续存在多久。不勾选的意思是粒子会永远持续下去。这里过了几秒之后我们就看不到粒子的原因是粒子受重力不断往下掉,最后超出了我们的视线,但它仍然还在继续往下掉,只是我们看不到了,并不是说粒子生命结束了。
对于喷泉效果,我们希望每个水珠大概在落到地面时就消失,所以我们开启这个参数,并且设置为1至2秒的随机。第三个loop表示当粒子完成自己的时间周期后是否重新再来过,这个参数需要在duration不是无限大的情况下才有意义。如果我们开启它,水珠就会不断地喷射出来,这显然是我们想要的。最后的一个delay参数一会之后我再解释。那么现在的Time节点的设置应该如下图所示:
好了,现在应该十分接近我们想要的效果了,就是水珠数量感觉有点少。那么我们找到Properties下geometry中的particle num这个属性,直接设置成5000吧。
现在效果应该就是这样的了:
复制像素的效果
接下来我们需要再把效果提升一下。记得公园里有一些喷泉是挺复杂的,它们有很多的水源围绕成某些形状,并且发射的节奏也有一定规律。所以我们也来做一个稍微高级一点的喷泉。我的想法是再添加一个水源,但是它喷射得更高一点,并且带有一点节奏。考虑到第二个水源和第一个大部分属性是一样的,我只需要复制一份,然后略微修改一些参数就可以。那么现在我们选中Animation 0
然后点击Edit菜单中的copy,然后再点击paste.立刻一个相同的效果Animation 1出现了,不过他们是完全一样的,所以从效果上只是水珠的数量更多了。接下来我们来修改一下Animation 1的一些参数。首先需要选中它,否则我们修改的可不是它的参数。我是想让它喷射的高一点并且扩散小一点,所以找到Velocity节点,把数值调整成这样:
因为飞得更高了,水珠的置空时间也就需要更多了。所以找到Time这个节点,首先粒子的生命时间设置长一点。这次我把它改成常量,值是2.5。
接下来我希望第二个喷泉发射的节奏有一点不一样。现在来看看最后一个参数delay吧,它指示着粒子从消失到再次出现的时间间隔。原来的那个喷泉并没有设置,这就意味着粒子死亡后马上又出现,所以造成了源源不断喷射的效果。现在我们把它设置为5秒,于是呢间歇性发射的喷泉效果就出来了。
效果如下图:
和社区一起分享你的效果
最后我对这个效果非常满意,所以我希望和其他设计师分享一下我们的成果。这样会得到别人的赞赏,也许还会收到一些改进的意见。我们非常鼓励大家多上传一些资源,把我们这个社区丰富起来。分享的过程很简单,点击预览框中的这个图标 。然后把标题和描述填一下,然后点击uplod即可。
上面喷泉效果的源代码在此处可以下载 www.effecthub.com.
You must Sign up as a member of Effecthub to view the content.
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
26123 views 20 comments
You must Sign up as a member of Effecthub to join the conversation.
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
赞
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
很好 很强大,谢谢分享
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
新手入门必须的 感谢廖大神 对于新手希望多些这个编辑器的教程
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
装了Adobe AIR,然后安装软件,提示此应用程序的安装已损坏。请尝试重新安装或与发行商联系以寻求帮助。卸了重新装,还是这样,求解~
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
好资源 谢谢分享
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
我希望有多点这样的入学教程,
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
压缩包怎么安装啊 求大神
需要装个Adobe AIR
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
压缩包怎么安装啊 求大神
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
很好的入门教程,我都想对着来做个效果了
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
很好的教程 已经实验成功,但是在实际使用的过程中发现ParticleGroup没有办法clone,要同时使用多个相同的ParticleGroup应该怎么办?
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
请问下这个编辑器编完后,怎么整合到AWAY3D的代码里呢?
@joeeee 这里有详细介绍。http://www.effecthub.com/topic/5
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
请问下这个编辑器编完后,怎么整合到AWAY3D的代码里呢?
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
http://bbs.9ria.com/forum.php?mod=viewthread&tid=264255&highlight=%E7%B2%92%E5%AD%90
你好
粒子lua脚本有开放和编辑教程么?
@paling lua脚本的功能现在还没有开发,等教程写完了一起发布,敬请关注
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
http://bbs.9ria.com/forum.php?mod=viewthread&tid=264255&highlight=%E7%B2%92%E5%AD%90
你好
粒子lua脚本有开放和编辑教程么?
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
很有用!:)
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
useful.
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
It's very useful for Chinese users.
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
Good tutorial!
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
Nice.