青瓷qici - H5小游戏 抽奖机 2 界面布局

背景图片

首先我们需要在当前场景下面创建UI的根节点,这个根节点决定了我们整个游戏的元素布局,以及适应多分辨率的缩放布局问题,所以我们其他的元素都要放在UIRoot下面。

考虑到我自己测试的时候在PC下面也想看得舒服,所以UIRoot的布局采用居中宽高比固定,然后在最下面Manual Type 设置为Expand 匹配宽或高,让显示区域在显示屏内填充满。

3d7c45be-81eb-4312-a93d-c6c49d34596f21130964-8be2-43e3-a7c1-925cff985ca4c4670516-fa24-4079-ad67-ecd08a7e2377

 

分辨率设置好了,我们现在来贴背景图。当前背景图为两张,一张是正常背景,用来显示玩的界面。一张背景图是较暗的,用来显示抽奖后烟火的效果。

在UIRoot上面右键,创建两个UIImage,青瓷的图片和UIImage和资源绑定的方式,是选中这个对象,再把资源界面中的元素拖拽到Altas素材栏上,跟Unity3D很像。

配置好后调整下坐标和大小,满屏显示。

3a0cbda9-d740-4d39-9f2d-d8de527ac2a5945aad29-4141-41d3-b840-6fb456b1c576ff38e3a1-a31c-415e-9983-5f4cf0f1c11ba4916461-3a17-40c4-a225-7265fcba68cd18229ef2-bec7-4166-b698-c414ffbf0584

 

游戏拉杆

我们的抽奖机有个拉杆,我们先来布局好,UIRoot下创建一个stick的空节点。

空节点下创建两个UIImage,用来存放拉杆的球和杆。显示的次序是越向下越在前,其实跟绘制的顺序一致就很好理解了。

现在我们先来布好局,球体在拉杆的前面。所以排在拉杆下方。

c018bcac-fd98-43fa-94a6-13ac61e75f5859b548e5-a893-401b-91b7-f18840d3c5d20225e257-2df0-46af-89a3-d3dc96ee9f153e3b81fd-5f58-4ec5-b064-f1a550a94a27

得奖后烟火

按照我们的设想,拉杆抽完奖后应该点燃烟火以示庆祝。

这里用到粒子效果,默认是没有的,需要在插件管理里面添加粒子效果。如图所示。

添加完后记得刷新场景,点击保存并刷新页面可以立刻刷新。

9d2556a4-7dab-4caf-9087-3cc4be22144b31786a7e-9808-4b3f-83b1-8486013797db0d80a535-022c-404d-ac54-98b39b94aa2cdc7c8803-6962-4d55-ac1b-f3caf7cd94304a1976f7-b68f-42ef-a0bc-a775260bea71

这时候就看到一个向上的粒子出现在画面上方了。我们建一个空node节点,拷贝并放置5个围着我们放置在得奖区域的附近。如图

139f91e2-d87d-45d7-98a1-41d2a0ae04122e594895-3e31-497c-90c0-dbbd2d74a289

排布好位置和隶属关系

滚动奖品

滚动抽奖其实是一个遮罩层,里面放置我们要的动作效果。

创建一个空节点,用作遮罩,所以我们要调整好大小,刚好符合我们出现奖品的区域,并添加遮罩脚本。

3a563799-c461-44b7-abef-f4735890da51b2a7435b-d4c9-4da4-b24b-a83709e394242220e1ae-b282-45c1-9fdc-ae32adeebc4385861cfe-3ed8-4afd-8c33-c392b1867b9a

 

我们的滚动分为两部分,一个是随机的盲滚,动态效果又快到慢。一个是显示最终得奖。

所以我们在刚刚创建的遮罩层下面,创建两个图片元素,一个是fast一个是last。

37822878-bd27-44c4-a071-da52e23919200a05246b-fd80-485d-b982-e549221acadd9117254e-0420-496a-82d8-9484f8af1607

 

这个奖品,我们采用刚刚打包好的雪碧图,在atlas素材包里,把压缩过得奖字拖出来,绑定到我们两个图片上。

雪碧图切换通过frame属性的变化可以得到切换,这样在编程的时候就不需要重新加载图片了,只需要切换名称即可。

fd30b300-6898-4e7e-95eb-341153ffcc7938abee4f-f81a-46bb-9487-f2a56a5a24d7

拖进去之后点击重置大小,咦?资源的比例并不如意,我们换一种方式手动调整,点击界面上方左上角,缩放,然后通过拉动节点上面的点调整比例。

可以看到我们的遮罩层的效果是很明显的,多出的区域已经隐藏了。

55fbfbb9-0faa-4f2c-97ec-7f252536aa96b24812f4-c8be-4c9a-bac5-b9b2aafbfb8f

最终效果。边缘有点不好看,我们先不管,最后发布打开抗锯齿,由于编辑时候顺畅的考虑最后发布再打开。打开抗锯齿后效果确实好看点。

d0135c34-728c-4a2c-b5d7-9b3606f501861c5cc09d-e47f-4a1a-a326-3d2eaffff041

同样的方法对两张图片完成配置。(我是不会告诉你把几个参数拷过来这种都是笨的,拷贝一份刚刚调好参数的对象过来就行了)

c7ad0e77-9d53-4938-818e-f97da05358b5

分享提示

难的已经懂了,简单的还不会么?创建三个UIImage位于share空节点下,手动调整坐标。

由于我们游戏大小固定,缩放全靠UIRoot管理起来了,所以不用怕位置问题,直接拖到那即可。

06762bbc-9759-4789-9996-387a6171107db6589220-d0eb-42b2-a4e1-2ceacb0c47330f73f98c-373f-4ead-81a4-0d6e60dcc27b

转载于:https://www.cnblogs.com/Again/p/5232169.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很高兴能够回答你的问题。首先,让我们来了解一下泰州的文化和创意产业现状。 泰州是江苏省的一个地级市,地处长江三角洲经济区,是一个历史文化名城和中国古代水利文化的发源地,也是国家级历史文化名城。泰州有着悠久的历史和文化底蕴,是一座有着独特文化氛围的城市。泰州的文化资源蕴藏丰富,文化底蕴深厚,但是在文化创意产业发展方面还存在一些问题。 目前,泰州文化创意产业主要以传统文化创意产业和新兴文化创意产业为主。传统文化创意产业主要包括木雕、编织、青瓷、紫砂陶等工艺美术品,而新兴文化创意产业则以数字文化、动漫、游戏、VR等为主要形式。虽然泰州文化创意产业近年来得到了较为快速的发展,但总的来说,泰州文化创意产业的规模相对较小,缺乏系统性、综合性、市场性和竞争力。 未来,泰州的文化创意产业的发展方向应该是以文化与科技的融合、跨界协作、品牌建设、市场开拓为主要特点。有以下几个具体的建议: 一、深化“文创+科技”融合 泰州在文化资源和科技创新方面都具有较为明显的优势。未来应在两方面深化“文创+科技”融合,发挥文化创意产业的创新力和科技引领力。比如,可以开展数字文化、AR、VR等方面的产品研发和应用,将传统文化与现代科技、现代手段有地结合起来,开展新型文化产品开发,探索新型文化消费模式,提高文化创意产业竞争力。 二、实施跨界合作 泰州的文化创意产业需要吸引更多的跨界合作伙伴,以提高产业的创新力和市场竞争力。比如,可以与其他产业进行深度协作,开发出更具特色的文化创意产品,并以此塑造自身的品牌效应;可以在文化旅游、休闲娱乐等方面与相关行业开展合作,创造更多的消费场景,扩大文化创意产业的市场份额。 三、加强品牌建设和提升市场竞争力 在文化创意产业竞争激烈的时代,品牌建设至关重要。泰州要加强品牌建设,将自身文化特色与品牌文化紧密结合起来,提高品牌的知名度和美誉度。同时,还要在市场开拓上下功夫,重视文化创意产品的宣传推广,开拓新的市场渠道,增加消费者对文化创意产品的认知和支持度,提高市场占有率。 总的来说,泰州的文化创意产业有着广阔的发展前景和巨大的市场潜力。未来,泰州应该加大政策支持力度,推进文化创意产业的升级和转型,从而实现更加广阔的市场空间和更加可持续性的发展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值