基础代码快速入门「Artemis教程全站首发」居然更新了!
Redroadsl
2024年07月03日 09:52
收录于文集
共5篇

各位读者,你们好。

非常抱歉,我因为各种原因一年没有更新了,前面的教程也是半半拉拉,所以我准备开一个以实用为目标的 快速入门基础教程。

好的我们直入正题。

准备部分已经在我之前的教程中写得很清楚了,大家可以直接参考:

Artemis介绍与开发环境配置​

第一次试飞:编写设置​

本章任务一:火箭发射。

我们将要实现火箭飞离地球的效果,甚至让它鬼畜起来。

准备充分后,请保存以下两张素材,放在Artemis.exe同文件夹下:

(以上图片来自我的项目https://github.com/Redroadsl/HIGHWAY_BASKET)

将地球宇宙图片命名为space.png,火箭rocket.png。

打开main.iet,写下以下代码:


[lyc id=0 color=000000 width=1920 height=1080]

[lyc id=1 file="space"]

[lyc id=2 file="rocket"]

[flip]

[@]


(B站专栏编辑器好难用)

标准的代码语句要用 [ ] 包裹(半角方括号)

我将介绍每一句的意思。

#############################################

1:[lyc id=0 color=000000 width=1920 height=1080]

2:[lyc id=1 file="space"]

3:[lyc id=2 file="rocket"]

lyc是创建图层(layer create),你需要为图层分配一个编号id。id可以是任意文本,推荐使用数字,你可以通过加点.来区分父图层和子图层,比如1.1.2是1.1的子图层,1.1是1的子图层,父图层某些参数变动会影响子图层。

图层分为颜色图层(1)或者图片图层(2)。

用color参数的是颜色图层,颜色使用ARGB格式,Alpha通道可以省略。代码1表示创建了一个黑色的1080p大小的颜色图层。

用file参数的是图片图层,在没有重名文件的情况下可以省略文件后缀名。

颜色图层要规定图层宽高,图片图层默认是图片大小。

图层在创建好之后并不会立刻显示,在下一次刷新时会显示。

########################################

4:[flip]

flip是立刻刷新显示,就是转场,将之前创建的图层显示出来、之前删除的图层停止显示。

大家在创建/删除图层后别忘了调用它。

比flip更常用的是trans方法,故重点介绍trans方法:

[trans type=0 input=2]

[trans type=1 time=1000 input=2]

[trans type=2 time=2000 rule="rule1" vague=32 input=2]

(斜体是可选参数)

有三种trans类型,type=1是瞬切,2是交叉淡化,3是通过规则图像渐变。

瞬切好说,字面意思,瞬间切换,约等于flip

交叉淡化也好说,淡入淡出,超级常用。使用time参数设置持续时间(毫秒)。

规则图像渐变呢,可以做出很特别的渐变效果,要求设置一张规则图片,这张图片只准有灰度通道,使用XnView、PS等软件可以把一般图片转换成灰度图片。注意规则图片的大小要和图层大小相同(1920x1080)

转换如下图:

灰度渐变实现的效果如下:

是不是越来越像ppt了?新的场景会由规则黑覆盖的部分向规则白覆盖的部分过度。这就是type=2的trans方法。vague参数设置规则渐变的温柔程度,建议设置32。

trans的最后一个参数input控制转场是否允许跳过,0是不允许用户点击跳过,1是允许,2是不允许用户跳过但允许快进模式自动播放跳过。默认1,建议2。

trans除了type=0的时候,都会阻塞线程,trans之前的代码是同是执行的

########################################

[@]

最后一行的神秘@,表示暂停等待用户动作,等用户点击屏幕或者按下enter、shift、ctrl等键后继续执行代码。它也会阻塞线程。按照偷懒守则,你可以只写一个@而不加括号。。。

########################################

最终执行结果如图:

但是这个火箭非常大啊,我们要让它从地球表面飞出来,应该从小变大。而且火箭的角度也不对,根据实际,应该是走弧线上升的。这时候应该修改火箭图层的缩放和角度。

########################################

在[flip]那一行的上方再插入一行:

[lyprop id=2 xscale=10 yscale=10 rotate=45]

此代码中,lyprop(layer properties)修改图层属性。

通过id确定要修改的图层。

xscale横向缩放,yscale是纵向缩放,单位是百分比数字(100相当于原大小),缩放不会调整图层大小,只会调整图层里内容的大小(绕人)。

rotate是旋转角度,从0到359。

lyprop还有许多复杂的参数可以设置。我会单独出官方教程的译注的(挖个天坑)

运行结果:

可见火箭确实缩小了并且扭转了角度,但是位置不对,我们继续调整位置就行了。

修改刚才lyprop的代码如下:

[lyprop id=2 left=100 top=500 xscale=10 yscale=10 rotate=45]

添加了left和top参数,设置图层的x和y坐标。注意缩放后的图层大小是不变的。

火箭就在地球表面了。

至此,你已经成功完成了火箭发射的预备操作,接下来就是发射了。

本文所有代码可以在https://Redroadsl.github.io/的“有福一起享”板块的“Artemis哔哩哔哩教程同步资源”链接内找到。

休息一下,马上回来~


发射火箭:动画

为了让火箭呈弧形起飞,让它动起来并变大,我们给它添加动画。

########################################

在[@]下方插入以下代码:

[lytween id=2 param=left from=100 to=1500 time=2000]

[lytween id=2 param=top from=500 to=0 time=2000]

[lytween id=2 param=xscale from=10 to=80 time=2000]

[lytween id=2 param=yscale from=10 to=80 time=2000]

[@]

为了向右上方移动,我们要同时向右向上并放大

lytween(layer tween)图层补间动画。id用来指定火箭图层,param指定要添加动画的参数,from和to决定参数值补间范围(可以递增也可递减),time指定动画持续时间(毫秒)。

我们已知,Artemis的代码是同步并行处理的,所以这几个动画其实是一起运行的。

#补充知识:如果需要几个动画一个接一个运行的话(当然现在暂时不需要),需要用到动画串(动画链)。使用方法:在几个需要依次运行的动画语句 的整体的 前面和后面分别加上[tweenset]、[/tweenset]。例子如图(来自官方教程):

这样被包裹着的一串动画就会依次运行,而它们整体被视为一个动画,和其他动画并行处理。例如,第1秒运行了left的动画,第二秒运行了top的动画......补充完毕#

保存运行,点击一下后,效果如下:

虽然可喜可贺动起来了,但是无论怎么看都有些生硬...

存在这些问题:

  1. 路线不是弧形

  2. 火箭角度奇怪

很好解决。

需要火箭轨迹是圆形,我们可以在水平移动速度不变的情况下,让垂直移动速度先快后慢,以此模拟火箭发射的轨迹。

角度奇怪,只需要给角度也加上动画就行了。

修改param=top的那行代码:

[lytween id=2 param=top from=500 to=0 ease=easeout_cubic time=2000]

其中ease=easeout_cubic为这个动画添加了缓动函数。

想试试其他缓动函数?访问:https://easings.net/zh-cn

请注意小写和下划线。

接下来添加火箭旋转动画,在最后一个[@]上方插入一行代码:

[lytween id=2 param=rotate from=45 to=120 time=2000]

这行代码用于旋转火箭。保存,运行,最终效果如下:

有那味儿了。

至此,恭喜你完成火箭发射任务了!(?)

本文所有代码可以在https://Redroadsl.github.io/的“有福一起享”板块的“Artemis哔哩哔哩教程同步资源”链接内找到。

休息两下,马上回来~


本章任务二:进一步深入+多媒体处理

开始之前,建议你对照我的网站中的标准代码,修改完善你的代码。

接下来的代码接着已有代码基础上写就行了。

人通过视觉听觉触觉味觉嗅觉认识世界,我们也就从能下手的视觉和听觉来提升用户体验。一个完成的游戏不能没有音乐、音效,甚至视频。

为我们的火箭添加音效!为游戏添加bgm!

下载素材:

https://redroadsl.github.io/learnArtemis/xiu.wav

https://redroadsl.github.io/learnArtemis/mikuv4_eng.ogg

将下载的素材存放在artemis.exe同一文件夹下。

########################################

在最后一行[@]的上方插入以下代码:

[wait time=1000 input=0]

[seplay id="se1" file="xiu"]

wait是等待。像trans一样,此代码阻塞线程,所以它可以将下面的播放音效往后延迟,而不是和其他动画一起一开始一股脑放完。虽然说它阻塞线程,但是等待期间所有已经开始的动画都是正常运行的,阻塞的只是读取新的代码的线程,不是程序运行线程。input参数和trans的一样。

可选参数:scenario<0|1>、se、video都是用来等待某个文字或音效或视频播放完成的。

seplay(Sound Effect Play)播放短小的效果音频,比如“咻”的一声,也比如某个人物的对话。

########################################

我们在火箭成功进入太空后放一首歌庆祝一下吧~(强行提出无理要求)

在刚才两行代码下方插入这几行代码:

[wait se="se1"]

[splay file="mikuv4_eng" loop=1]

wait会等待 id=1的se播放结束,接下来splay(sound play)播放bgm。loop=1循环播放。至于splay为什么不设置id,因为始终只允许一个bgm同时播放。

好了,音频部分主要就是这两个用法。

出乎意料的是,mp3格式音频兼容性却特别差,ogg和wav非常好。

所以某些播放不出来的音频可以提起转换成44100Hz 16bit的wav或者压缩成ogg。


既然放了音频,也顺便放个视频吧。

Artemis的解码能力完全依赖系统,兼容性非常差。

在Windows环境下,mp4无法播放,mpeg支持,wmv支持。而mpeg要求使用mp2音频,而Artemis又不支持mp2音频,所以artemis的视频播放就是废物。而我试验的几个小时,发现mpeg和wmv也不是完美支持,不能播放声音,视频也无法播放。

在安卓、iOS,都支持mp4(未测试,实际情况会更糟)

全平台软件解码支持ogv、mja格式,但是CPU负载很重。

总结:我也放不出来。此块内容不教学。如果像获得视频体验,去安卓或iOS上用mp4格式吧,Windows无能为力了。我已经向ies-net发邮件询问此事了。。。

本文所有代码可以在https://Redroadsl.github.io/的“有福一起享”板块的“Artemis哔哩哔哩教程同步资源”链接内找到。

就到这里吧,再见!