zoukankan      html  css  js  c++  java
  • 青瓷qici

    背景图片

    首先我们需要在当前场景下面创建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

  • 相关阅读:
    Oracle11g远程连接配置 visual studio 2003
    窗体设计器的使用套件
    Visual Studio 2003“无法启动调试 没有正确安装调试器“请修复调试器的解决办法
    eclipse maven插件安装教程
    遇到错误ERROR 1044 (42000): Access denied for user ''@'localhost'to database 'mysql',的解决办法
    定位
    盒子模型
    CSS3美化网页元素
    CSS随笔
    前端基础随笔
  • 原文地址:https://www.cnblogs.com/Again/p/5232169.html
Copyright © 2011-2022 走看看