缩略图的适配问题

一个好的皮肤,其适配性一定要好,而在皮肤的适配性上,最需要我们留意就是缩略图。本篇文章借着谈适配问题再深入的讲解一下缩略图,希望通过本篇文章,我们能更好的了解怎么制作适配性好的缩略图。

我们在基础教程文章 制作缩略图导览 中介绍了基本的制作缩略图的步骤,并且分了两类,一类是自动创建的缩略图,一类是手动创建的缩略图。

我们对缩略图的适配性提出一个最基本需求:当场景不多时,不多的标准是不超出屏幕显示,缩略图居中显示,当场景太多,超出屏幕显示,可以滑动条浏览,且滑动条左对齐。

基于这个需求,本篇文章我们只讨论自动创建的这种缩略图,即带有滚动区域的缩略图。因为手动创建的额那种不包含滑动区域,实现不了适配性需求,因此不作讨论。

我们就从组件库的这个缩略图组件开始分析。

基础文章中介绍了如何制作,这里就不再重述了,直接看它的“结构”。

自动创建缩略图有两个关键点,克隆和节点图象。

说了半天的缩略图其实是节点图象,一个缩略图是由一个节点图象生成出来的,如果没有“节点图象”,比如在版本4里只能自己手动截取制作。

上图是节点图象的参数。漫游节点,选择场景。投影方式,可以选择不同的投影类型。去掉使用默认试图勾选,可以更改下面的参数选择合适的视图,也即选择哪一块视野。这里仅作了解,这些参数在克隆中,不需要任何设置。

自动创建缩略图比较省事,省事的关键就是利用了克隆。克隆元素的作用就是,只要给克隆一个子级内容,它就能按照规则递推显示内容。这里给的是节点图象,所以克隆就会将节点图像依次显示出来。当然并不是什么都可以进行克隆,一般也就是节点图象,标题文本这些和节点有关的内容。

克隆方向,可以选择水平横向的克隆,也可以选择垂直竖向的克隆。

对应的行、列也可以设置成多行。

我们就以组件库添加的缩略图组件,完全默认的设置看一下预览效果。

上面看到是场景比较少(3张)和场景比较多(10多张)的情况,场景比较多的情况就不讨论了,场景多了出现滑动条,符合需求。而场景较少时,是不符合要求的,我们就需要“调整”一下。

以上啰嗦了这么多,现在才说到重点。

对于现在的现成的缩略图组件,我们只需要去掉背景,内容居中即可实现需求。

背景、边框、对齐这三处设置如上,其中最重要的就是“对齐”,背景和边框修不修改都可以,去掉背景和边框,视觉上会好一点。

在去掉背景勾选和边框为0时要注意,可能由于软件自身的问题,在设置的时候有时候可能不生效,重复多设置几次就可以了,一定要看最终效果。

预览一下。

以上长篇大论这么多,其实一句话就可以解决。在版本5中将滚顶区域的滚动区——对齐参数,由默认的左上改为中上即可。

到了版本6,通过组件库添加的缩略图组件,默认就是类似我们上述设置适配好的样子。

[会员] 弹出图片并放大


Warning: Undefined array key "pano2vr_player_version" in /www/wwwroot/www.pano2vr8.com/wp-content/plugins/garden-gnome-package/include/ggpackage.php on line 43

Warning: Undefined array key "object2vr_player_version" in /www/wwwroot/www.pano2vr8.com/wp-content/plugins/garden-gnome-package/include/ggpackage.php on line 44
以下内容为普通会员专属,请登录后查看。

了解3D变形热点


Warning: Undefined array key "pano2vr_player_version" in /www/wwwroot/www.pano2vr8.com/wp-content/plugins/garden-gnome-package/include/ggpackage.php on line 43

Warning: Undefined array key "object2vr_player_version" in /www/wwwroot/www.pano2vr8.com/wp-content/plugins/garden-gnome-package/include/ggpackage.php on line 44

先比较一下下面的两个热点

左边的是正常的热点,右边的是3D变形热点。

左边的正常热点,其实是“浮”于场景上的,是不随场景缩放改变大小的,拖动浏览,不会“变形”。右边的3D变形热点,相当于“贴”在场景里了,会随场景缩放改变大小,会在拖动浏览时,在拖至边缘不正对时而变形。

下面我们看看如何将普通热点变成3D变形热点。

选中热点模板。

在右侧属性设置的热点模板参数下,勾选开启即可。

至于3D距离参数,这个的值需要根据热点所在场景的全景图大小设置,全景图大小指的是全景图像素尺寸的“宽”。3D距离时是由全景图的宽除以2π得来的,我们这里全景图的宽是5000px,所以3D距离就是5000÷2÷3.1415≈795.8px。

这样普通热点就变成变形的热点了。

3D变形场景会在“制作开关门效果”时用到。

皮肤特效篇——交互音效


Warning: Undefined array key "pano2vr_player_version" in /www/wwwroot/www.pano2vr8.com/wp-content/plugins/garden-gnome-package/include/ggpackage.php on line 43

Warning: Undefined array key "object2vr_player_version" in /www/wwwroot/www.pano2vr8.com/wp-content/plugins/garden-gnome-package/include/ggpackage.php on line 44

在Pano2VR的皮肤中是可以添加“声音”元素的。

本篇文章,我们就通过在皮肤中添加“声音”来制作交互音效。

交互音效听起来挺高大上,实际上就是按键音。

点击“元素”中“添加音频”,选择音频文件。

添加后,左侧树列表里会自动创建一个音频组,子级对应是音频文件。需要注意的是,这里的音频“组”只是为了方便归类,并不是真正的“组”,不要拖动编辑,否则大概率的会导致软件闪退。

右侧属性栏是音频的相关参数。注意如果添加的音频包含中文,ID这里中文字符会变成?显示,添加完音频注意一下这里,及时修改替换为英文数字命名。音频响度可以调节音频的音量,默认是1。循环这里之前也说过,默认 -1,表示不自动播放,0是无限循环播放,1及以上的数字是播放的循环次数。

然后给按钮添加动作,鼠标点击播放我们添加的音频。

将该动作复制给其它按钮(选中动作Ctrl  C,然后选中其它按钮后Ctrl  V 即可)。

以上是给按钮添加声效,除此之外我们还可以给热点添加,并将热点制作成形象具体的内容,以便插入到场景中。

给热点添加动作。以第二个为例,鼠标进入播放添加的音频。

在场景中添加热点,并对应选择热点皮肤。(此处热点类型不重要)

输出预览一下。

 

电脑端是正常的,移动端有点小问题,鼠标点击的声音出不来,出来有延迟,鼠标进入的声音,第一遍播放是正常的,第二遍之后就破音了。造成这些的原因还不太清楚。

 

Tips:利用皮肤里的添加音频,也可以制作全景漫游的背景音乐哦。