很好,现在场景看起来即完整又漂亮,不过,让我们再加上一些会在场景中移动的动态元素,肯定会让场景充满活力。我们会从增加一张简单的移动图片开始,之后将重点转至制作动画和运用复杂的动画效果。
5.1 - 添加会移动的蘑菇 – Velocity(速度)
如之前所说,我们从简单的入手,你可以看到mario012.pcx是一张小蘑菇的图片,我们现在要将它添加到地板上,并在人物身后进行水平移动。
- 一开始先把mario012.pcx图加入到Sff文件中,然后保存;我将它放在2,0图位上,定位坐标0,0。
- 现在,打开Def文件,将蘑菇图片代码写入,这样蘑菇才能完美地贴合在地板上。你现在可以随便选个X轴的值,反正不会有太大影响。
- 到这一步,你应该开始自己编写代码了;不过……以防万一:
我将这段代码添加在了[BG Big Mushrooms, Plants, etc.]和[BG Floor]之间。
代码:
[BG Moving Mushroom]
type = normal
spriteno = 2, 0
layerno = 0
start = 0, 187
delta = 1, 1
mask = 1
- 完成之后,你应该会获得和以下图类似的画面,有一个静止的蘑菇会出现在地板上:
我们现在要用一段简单的Velocity代码,让蘑菇进行水平移动。如果你观察过地板图片的代码, 你会发现:
代码:
velocity = 0, 0
tile = 0, 0
tilespacing = 0, 0
将这些值设置为0会让目标装饰呈现为单一静止状,恰好是地板所应有的状态。将这三行代码复制到蘑菇的代码中去。
下面会对这三行代码进行分析,解释其内部含义:
- velocity 是图片或动画的移动参数。第一个值是横向速度(X轴),第二个是纵向速度(Y轴)。如果你想让装饰进行对角(斜向)移动,就得对两个轴速度都进行赋值。在当前情况下,你只需要更改横向速度。
- tile 的值可以是任何整数。假如设置为0,那么图片就不会在场景中进行重复出现(也就是说,动画效果仅出现一次)。设置为1,动画就会在你所赋值的方向上无限平铺开。第一个值是横向平铺,第二个则为纵向平铺。就我们来说,只需要在X轴上无限平铺即可。假如我们不使用tile,那么位移动画就会在场景上只出现一次,然后消失。当tile值高于1时,动画出现次数也是有限的,而这并不是我们所期待的效果。例如,当tile = 2,0时,场景装饰便会在原地的水平方向上再现一次。因此,tile = 2,0会让装饰重复出现两次。在场景中,你可以使用这种tile用法对某些装饰进行有限次数的平铺。
- tilespacing 可设置平铺图像之间的间隔距离。假如你只想要一张图案,你可以将此留空。然而,要制作会移动的蘑菇,我们不能在一个屏幕中同时放出10个蘑菇图片来实现,况且我们也不想让蘑菇出现得过于频繁。对此,我们必须找出一个比较合适的值来完成动画。
你现在应该开始调试这些数值了,试着让蘑菇动画合理些。下面是我为这个动画写的代码,你大可以自由些,去使用自己觉得适合的数值:
代码:
velocity = 2, 0
tile = 1, 0
tilespacing = 1500, 0
- 只在X轴上有速度值。数值为正可使蘑菇从左往右移动,如果你想反过来移动,那就设置一个负数值。
- 只在X轴上进行平铺,平铺间隔为1500像素以确保图片不会出现得过于频繁。
- 在同时,我将start参数的X轴值也改为了-270,这样之后,动画便不会在战斗一开始就出现在屏幕中, 而是过个几秒再出现。
5.2 – 添加云朵 – Transparency(透明度)
我们接下来会在天空中增加一些移动的云朵。这一块并不会有很多涉及动画的知识。本段教程的目标是:
- 通过增加不同速度和高度的云朵来训进行练习。一些云朵会从山前飘过,一些则在山后。
- 为图片添加透明效果。
这一次,我不会再手把手进行教学,因为你应该已经足够老道到去自己添加图片和编写代码了。
- 个人是在第3图组中按照0,1,2的顺序将图片mario003.pcx,mario004.pcx和mario005.pcx添加到Sff内,并将所有图都定位在了0,0上。
- 其中中等尺寸的云朵图我在场景中放入了2张。一张用于山的前方,另一张则用于山的后方。大的云朵飘在山前,小的则位居山后。就如我所说的,这里有足够的空间来让你创造你想要的效果,你可以将云朵放在你认为合适的高度。在我的场景中,云是从右往左飘的。
- 如果你想看的话,下面就是我所用的代码:整段代码都位于[BG Big Mushrooms, Plants, etc.]和[BG Far mountains]之间。你就能看到被云朵所环绕的山峰了。
代码:
[BG clouds 3.1 medium]
type = normal
spriteno = 3,2
start = 150,-30
delta = 1,.85
tile = 1,1
tilespacing = 400,400
velocity = -.4,0
mask = 1
[BG clouds 2 small]
type = normal
spriteno = 3,1
start = 100,20
delta = 1,.85
tile = 1,1
tilespacing = 350,380
velocity = -.7,0
mask = 1
[BG close mountains left]
type = normal
spriteno = 1, 0
layerno = 0
start = -250, -30
delta = 0.8, 1
mask = 1
[BG close mountains right]
type = normal
spriteno = 1, 0
layerno = 0
start = 160, 0
delta = 0.8, 1
mask = 1
[BG clouds 1 big]
type = normal
spriteno = 3,0
start = 100,-10
delta = 1,.85
tile = 1,1
tilespacing = 450,280
velocity = -.5,0
mask = 1
[BG clouds 3.2 medium]
type = normal
spriteno = 3,2
start = 20,50
delta = 1,.85
tile = 1,1
tilespacing = 400,400
velocity = -.6,0
mask = 1
- 写完我这段代码后所应获得的效果如下图:
我们接下来要让云朵和现实中一样,表现出一些透明感。声明:因为考虑到素材风格的协调统一,本人通常不会让云朵应用这类透明效果,但本章教程必须涉及尽可能多的知识,而且这也是我所能想到比较好的介绍透明度的方式了。
要应用透明效果,有两种方法。其一是在制作动画的时候进行透明定义,这在之后会有介绍;我们重点学习第二种方法:用场景代码来实现透明化,期间还会介绍透明的不同分类。
- 在位于山前的云的代码中增加一行"trans = "。
- 你可以赋予"trans" 参数各种不同的值:
+ "none" 适用于一般图片。假如你略过trans不写,这个便是通常的默认选项 (就像教程刚开始教写代码那样)。
+ "add" 颜色叠加(类似于聚光灯[加亮]效果)。
+ "add1" 颜色叠加附带背景亮度降低50%。
+ "sub"减去颜色(类似于阴影效果)。
+ "addalpha"透明加色效果(透明值[Alpha]必须是具体的数值).
最好能用云朵图片测试这个参数,然后自我感觉其效果。以下三图分别为使用"add"、"add1"和"sub"的效果:
- 如你所见,"add"和"add1"的透明效果很低,而"sub" 的效果肯定不是我们所寻求的。
- 现在,我们开始使用"addalpha",在代码中先加入这行代码"alpha = "
- 这段代码的一般写法:"alpha = int, int",第一个值是源图(图1)的透明值,第二个则是目标图(被图1覆盖的图)的透明值。两个值的大小在0到256之间。
- 透明值(Alpha)的几个测试例子:
+ 第一张图的Alpha值为256,128。图片会比原来更亮,而且略带透明。
+ 第二张图的Alpha值为128,128。图片亮度和图一一样,但透明亮度略低。
+ 第三张图的值为128,256。图片亮度不变,但透明效果更强。
- 测试过后,我将以下代码加入到了所有云朵的代码中:
代码:
trans = addalpha
alpha = 200,255
- 下图便是我所获得的代码效果,在我看来,这个值所赋予的透明度和亮度恰到好处:
5.3 – 添加碧奇公主 – 创建动画
直到现在为止,我们为了使场景富有动感而添加的装饰都是单图素材,需要通过速度控制器来运动。在本章中,我们要学习如何制作动画和将其在场景中放出。
- 让我们从向Sff中添加多张碧奇公主的图片开始。图片从mario006.pcx开始,到mario009.pcx为止。
- 虽然我们可以像以前那样,一张一张添加图片,但是同时进行批量添加的话会更加便捷一些。
- 和平时一样,点击“增加”按键,但不要只选一张图进行添加,按住Ctrl键将碧奇公主的4张图片都选中添加,放入第4图片组,选择图号方式"0,1,2,3,4..."(下图虚线框处):
- 完成后,点击“OK”,你就往Sff中添加了4张图片。这功能在制作需要添加大批量图片的场景时会非常有效。
- 更幸运的是,你的图片都已整齐排列。如果你看过所有图片,你会发现这些图片的坐标并不是混乱无序的。但假如你在之后的场景动画创作中遇到图片定位问题,最好在Sff中动手调整,比用代码来得更简单整齐。
- 保存Sff文件。接下来我们要为动画写代码。
用于动画的代码和我们之前所用的代码几乎一样。以下是其正常工作所需的“基础”代码:
代码:
[BG Princess Peach]
type = anim
actionno = 1
start = 0,20
- 你会发现"type" 使用的不再是"normal",而是"anim"
- 你在这个背景控制器里用"actionno"定义的是所要播放的动画编号,而不再是图片编号。在代码中,碧奇公主的动画将会被定义在1号动画中。
- 你可能已经注意到了,代码里没有"mask=1" 这一行。实际上,在使用动画的时候,底色就自动地被透明化处理了。
显而易见,我们现在需要开工,写1号动画的相关代码了。以下是该代码的写法:
代码:
[Begin Action 1] ;Peach on cloud
4,0,0,0,120
4,1,0,0,10
4,0,0,0,100
4,2,0,0,70
4,3,0,0,15
4,2,0,0,50
- 要定义一个动画,你得将信息[Begin Action XXX]写明, XXX 就是你所想用的动画编号。
- 每一行的信息结构如下:“图组,图号,X轴位置,Y轴位置,显示时间”。 还有其他一些可选参数,在之后会有涉及。我们现在先来关注这些基础参数。
- “X轴位置”和“Y轴位置”是调整图片位置所用的参数,可以辅助制作在不同位置出现图片的动画效果。
- “时间”是指在转至下一张图片前,一张图片可以展示的时间帧数。1秒钟包含有60帧。
- Mugen按照从上到下的顺序解析代码,而且当动画代码结束时,会自动进行循环。因此,动画会以这个图片顺序反复呈现:0 1 0 2 3 2 0 1 0 2 3 2 ……
- 古怪的时间数值和图片顺序只是为了让动画以更好的方式出现。你会在场景中发现碧奇公主先会转头看一会儿别处,眨个眼后,又会看向你。
将上面那段代码写在Def文件的最后,保存,然后启动Mugen:
- 你现在可以好好欣赏下这个动画效果了,然后自我感觉下是否合适。碧奇现在明显是静止在空中的。你可以给她添加些速度代码来让她移动。(别忘记进行平铺)。 在下一部分教程中,我们会增加一些代码来让移动显得更绚丽些。
注意事项:tilespacing参数在"normal"类和"anim"类代码中的效果并不相同。
- 在"normal"类代码中,当tilespacing = 0, 0时, 平铺效果就如同一般人所想的那样,会在图片间形成无缝连接。一张100X100大小的图在X轴上平铺一次后,就会有能覆盖200X100面积大小的图出现。
- 在"anim"类代码中,当tilespacing = 0, 0时,平铺效果并没有出现,但其实它已经在原动画的原坐标位置上平铺了一个一样的动画。一个大小为100X100的动画在X轴上平铺一次,只能覆盖掉原来的动画。要达到正常的平铺效果, tilespacing的值应与动画图的宽度相同,以100X100为例:tilespacing = 100, 0。
5.4 – 添加正弦曲线运动 – 大功告成
祝贺你!!假如你学习到了这一章,那么这个场景就快完成了!!! 在本小章中,我们会为碧奇增加一些正弦运动,然后你还能通过制作飞行马里奥的动画和代码来进行练习。
首先,先写下我让碧奇移动的代码:
[BG Princess Peach]
type = anim
start = -20,20
actionno = 1
layerno = 0
tile = 1,0
tilespacing = 960,0
velocity = -1,0
这段代码能让碧奇在屏幕上慢慢地从左往右移动,达到每几秒钟出现一次的效果。然而,我觉得这种移动方式看起来不太自然,没有给人留下她在云中浮空的感觉。要达到这个效果,我们要在碧奇动画中使用正弦运动代码,影响她在Y轴上的运动(不是X轴)
我加入了以下代码来施加影响:
代码:
sin.y = 7.5,96,0
- 三个参数按照顺序,分别是:最值(magnitude),周期(time)与相位(phase)- “magnitude”是上下移动范围的像素值(使用sin.x时为左右移动范围)。
- “time”是完成一次循环所必需的时间帧。
- “phase”应该被运用在有多项正弦曲线运动的情况中,你可以用它来略微异化各项运动轨迹。学点数学就知道实际上是怎么回事了。
你现在已拥有教程最后部分所需的一切了;开始添加马里奥的图片(mario010.pcx 和 mario011.pcx),制作动画和动态效果吧。
- 只要小心一件事:假如你用"axis = 0,0"的位置导入这两张图,那么这两张图的位置就没有统一。
- 剩下的代码工作和碧奇的一样。你必须用另一组动画号来制作动画。当然,让马里奥从左往右飞会更好些。
下图就是在压缩包(最早下载那份)内部所有图片都添加完毕后,场景所看起来的效果:
恭喜!你已经学完了这份教程!!\o/ 你现在已具备了所有必需的知识,可以制作各种场景。唯一挡在你面前的障碍就只剩想象力了。自然,掌握了场景代码的知识并不意味着你就能创造出“高质量”的场景。在制作场景过程中,你需要格外细心,特别是那些自定义场景(自制),但是,你现在已经拥有创造一份佳作所需要的所有工具了。
后面就是最终成品的一个连接,以防你需要一份Mario代码作参考:(别这么逊 ) : network.mugenguild.com/cybaster/stage_tutorial/stage_end.rar