unity贪吃蛇ugui简单的ui设计

summerwasfun. summerwasfun.     2023-01-21     137

关键词:

UI界面大致的样子

 导入素材资源后,使用UGUI进行创作

创建画布Canvas,我们使用UGUI,大多数UI功能直接在Canvas下进行

将Canvas的渲染模式改为Screen Space-Cemare 注意密钥把摄像机拖进Render Camera

格子背景 冰淇淋的图片 贪吃蛇的Title只有视觉功能,直接创建组件Text,Image即可。注意!一定要创建在Canvas里面

Canvas的渲染很有意思,在上面的位于最底层,如:Bg与Title

 Bg在Title上面,正常显示

 Bg在Title下面,发现被挡住了。

我们可以这样想,位于Project面板Canvas中的东西,位置处于越下面的越靠近摄像机,越先渲染

 

再来谈谈控制游戏开始的按钮

添加Button组件,再在其下创建Text,输入想要的文字,调整大小即可

添加Button成功后运行,点击Button按钮,我们就会发现点击时会有一个阴影效果 

除此之外,我们还可以add OutlIne与Shadow组件

 

 

 Outline控制左右上下同时加粗 Shadow可以单向的做到这种黑边加粗效果,让按钮看上去更立体

 当然,我们也可以改变effete color使用不同的颜色效果。

接着创建左边具有关键功能的control menu

 直接创建一张Image 将颜色设置为白色 调节合适透明度。我们要做3个功能 

首先 皮肤功能:

创建2个toggle(英语 切换 的意思)组件,一个toggle有下图这些东西

当我们点击钩是 钩图标会出现或消失 

checkmark就是这个

label自带一个text 你可以编辑一些文字

2个toggle的background选择好合适的颜色即可 

重点!我们创建好2个toggle后发现2个都打勾了,这显然不是我们想要的结果 如何打勾一个的时候让别的取消钩呢?

在Skin下添加toggle group组件

 

我们将blue yellow中的group直接拖入skin

让blue yellow中 钩子默认只开一个 通过is on调节 开一个 关一个就行 

 

skin中的allow switch off 取消勾选 就算有4399个钩 你只要这样做 即可实现永远只有一个toggle打勾 

玩法同理,自己尝试做一做吧!

 

分数就3个text,很简单

 

 

 

《结对-贪吃蛇-设计文档》

项目:贪吃蛇游戏,所用软件,eclipse成员:孙晨旭,高云鹏贪吃蛇游戏设计文档:搭建环境:AndroidStudio,eclipse“贪吃蛇”游戏是一个经典的游戏,它操作简单、界面美观、功能较齐全的“贪吃蛇”游戏。整个游戏程序分为二个... 查看详情

unity3d_(游戏)贪吃蛇(代码片段)

   未完!!预计10月3日前完成  贪吃蛇  项目完成时有展示~   实现过程制作场景UI   开始场景界面   添加一个Canvas作为游戏开始场景并将Canvas下的RenderMode设置为ScreenSpace—Camera1:ScreenSpace... 查看详情

贪吃蛇需求分析

Partone项目题目 贪吃蛇游戏(单词版)Parttwo选题背景和意义 作为一个经典的游戏,贪吃蛇设计简单,实用和娱乐性高,是90后的我们童年的美好回忆。对于贪吃蛇传统的玩法,大家众所周知,即:玩家通过控制游戏手柄... 查看详情

unity:贪吃蛇(代码片段)

SatUIController代码usingUnityEngine;usingUnityEngine.UI;publicclassStartUIController:MonoBehaviourpublicTextlastText;publicTextbestText;publicToggleblue;publicToggleyellow;publicToggleborder;publicTogglenoBorder;voidAwake()lastText.text="上次:长度"+PlayerPrefs.GetInt(... 查看详情

《结队-结队编程项目贪吃蛇--需求分析》

...。项目功能设计概述:1.需求分析:  本系统主要完成贪吃蛇的基本操作,满足余下几点要求:  1)利用方向键(或A,B,C,D)改变蛇的运行方向  2)空格键控制游戏的开始和暂停,并在随机的地方生成食物  3)蛇吃... 查看详情

gui简单实战——贪吃蛇(代码片段)

将前面学到的GUI基础知识完成实战,完成一个简单的贪吃蛇项目项目功能用键盘上下左右实现贪吃蛇的自动移动贪吃蛇吃到食物后,长度加一,分数加一贪吃蛇吃到自己的身体,则游戏结束按空格键实现游戏的暂停和继续效果截... 查看详情

一个简单的“贪吃蛇”小游戏

一个简单的“贪吃蛇”小游戏页面结构简单的21x21的方块,页面结构id为container的div包含所21个class名为row的div,每个row代表贪吃蛇的一整行,每个row中又包含21个div,代表这一行的每一个div方格,如果这个方格是空的话,div... 查看详情

结对-贪吃蛇游戏设计文档

贪吃蛇项目设计准备阶段1pygame简介及安装2surface对象3窗口显示4绘制几何图形5event事件设计阶段1首先绘制屏幕2绘制一个点作为蛇的蛇头3实现键盘对于蛇头的控制4随机在屏幕上出现一个点(食物)5解决蛇和苹果如何存储和显示、蛇... 查看详情

结对-贪吃蛇游戏-设计文档

准备阶段pygame简介及安装surface对象窗口显示绘制几何图形event事件设计阶段首先绘制屏幕绘制一个点作为蛇的蛇头实现键盘对于蛇头的控制随机在屏幕上出现一个点(食物)解决蛇和苹果如何存储和显示、蛇如何移动和吃苹果变长... 查看详情

结对-结对编项目贪吃蛇-设计文档

项目名称:贪吃蛇成员:张立新、李根使用工具:python目标:1.使用pygame模块,开发制作贪吃蛇游戏。   蛇头碰到食物时加长蛇身,蛇头碰到蛇身或者边界GOMEOVER(GG)。   2.每吃到一个食物加一分。游戏控制:1.暂停。... 查看详情

做一个简单的贪吃蛇游戏

这是一个贪吃蛇游戏,你可以忽略他的外表,好了,先上html代码<styletype="text/css"> *{margin:0;padding:0;} #container{width:1000px;height:550px;border:1pxsolid#000;margin:0auto;} #container#ground{width:1000px;height:500px; 查看详情

《结队-结队编程项目贪吃蛇--需求分析》

项目功能设计概述:1.需求分析:  本系统主要完成贪吃蛇的基本操作,满足余下几点要求:  1)利用方向键(或A,B,C,D)改变蛇的运行方向  2)空格键控制游戏的开始和暂停,并在随机的地方生成食物  3)蛇吃到... 查看详情

unity贪吃蛇作战—2(代码片段)

 今天接着上个讲,上次讲到了玩家蛇和BaseSnake类了,下面讲讲AI蛇了,这里我写的AI是比较简单了。AI蛇的AI逻辑是这样的,蛇主要存在2中状态,一种是漫游状态,漫游状态每隔多少秒,给蛇一个方向&#... 查看详情

javascript-简单的贪吃蛇小游戏

实现逻辑://获取Html中的格子(行,列)//建立数组存储所有格子(x,y)//建立数组用于存储蛇身(x,y)//生成随机坐标(x,y)的函数//随机创建蛇身并存储到蛇身数组//创建食物(不能与蛇身重合,利用不等于蛇身数组中任... 查看详情

java一个简单的贪吃蛇(代码片段)

Java一个简单的贪吃蛇虽然GUI已经要淘汰了,但是手动写写界面还是有助于理解语法的,像构造函数,函数调用,内部类,继承,接口。有助于半初学者强化理解。直接上代码游戏主体类:packagecom.chenghu.snake;importjavax.swing.*;publiccl... 查看详情

javascript实现简单贪吃蛇小游戏

...师要求写几个静态页面,要用到JavaScript。想了想就写个贪吃蛇吧。其实之前用pygame写过一次GUI的贪吃蛇,素材都是自己拿画图画的,其丑无比。所以这次还是老老实实用字符吧。   首先,是一些全局变量的定义:1<script... 查看详情

最简单的html5游戏——贪吃蛇

<html><head><metacharset="UTF-8"/><title>贪吃蛇</title></head><body>   <canvasid="canvas"width="1000"height=" 查看详情

结对-结对编项目贪吃蛇-设计文档

1.引言  1.1编写目的  1.2背景  1.3开发工具语言  1.4术语说明  1.5参考资料2.数据结构设计  2.1蛇食物表示  2.2蛇移动  2.3蛇移动的方向  2.4蛇身移动方向  2.5吃到食物判定3.类的设计  3.1设计    3.1... 查看详情