2017-04-23 11:35:04 yu__jiaoshou 阅读数 4086

Unity 3D - UGUI 自适应文本框 :

说明 :

同一个文本框根据内容 , 自动缩放文本框大小 .

效果图 :

这里写图片描述

这里写图片描述

实现方式 ( 重点 ) :

  • 第一步 : 创建一个文本( Text ) , 文本下再创建另一个文本( Text ) 和 一个图片( Image ) .

这里写图片描述

  • 第二步 : 给父节点文本( Text )添加 Content Size Fitter 组件 , 设置 Horizontal Fit 和 Vertical Fit 为 Preferred Size ( 如图所示 ).

这里写图片描述

  • 第三步 : 两个子节点都设置 锚点 ( Anchor presets ) 适应父节点 . ( 点击锚点按住 Alt 键 , 就可以选择了 )

这里写图片描述

  • 第四步 : 同步两个文本框内容显示 , 利用脚本控制 , 将两个文本内容同步. ( 因为父节点文本只是为了控制显示区域 , 真正显示内容在子节点文本上 .)

这里写图片描述

文本数据 :

  • 埃辛诺斯战刃 - 文本信息 :
<color=orange>埃辛诺斯战刃</color>
<color=yellow>物品等级 : 156</color>
拾取绑定
主手
302-563物理伤害
(+每秒伤害154.403)
+22 敏捷
+47 耐力
<color=green>+21 命中等级</color>
职业 : 战士,潜行者,死亡骑士,武僧
要求等级 : 70

埃辛诺斯双刃 (0/2)
<color=grey>埃辛诺斯双刃</color>
<color=grey>(2) 套装 : 你的近战攻击有一定几率令你的急速提高450</color>
<color=grey>点,持续10秒. 对恶魔的攻击强度提高200.</color>

出售价钱 : 24G

<color=yellow>物品来源 : </color>
<color=yellow>伊利丹怒风</color>
  • 艾利的天镜 - 文本信息 :
<color=blue>艾利的天镜</color>
<color=#5cacee>玩具</color> 
<color=#00cd00>使用 :呈现微弱闪现的目标形象, 持续</color> 
<color=#00cd00>10分钟. (1小时冷却)</color> 
<color=orange>"外沿镶着一圈不断变幻的云环."</color> 
2018-03-18 22:48:50 A13155283231 阅读数 1042

在把Canvas设置成随屏幕大小缩放后,Text全屏就没了,这令我很疑惑。

解决方案:

方案一:修改overflow属性
这里写图片描述

方案二:添加自适应控件
这里写图片描述

写到这里问题已经很明白了,text自动缩放,然后太大就显示出错了。

2019-05-31 08:38:20 dlhcoder 阅读数 720
Unity 导出WebGL时,会生成一个 .html文件(如下所示),加入屏幕自适应的代码即可
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | Detention</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <script src="TemplateData/UnityProgress.js"></script>  
    <script src="Build/UnityLoader.js"></script>
    <script src="Player.js"></script>		//引用 Player.js 表示Unity可以调用该文件中的JS方法
    <script>
      var gameInstance = UnityLoader.instantiate("gameContainer", "Build/Builds.json", {onProgress: UnityProgress});
    </script>
  </head>
  <body onResize="ChangeCanvas()">			//调用设置屏幕自适应的方法
    <div class="webgl-content">
      <div id="gameContainer" style="width: 960px; height: 600px"></div>
      <div class="footer">
        <div class="webgl-logo"></div>
        <!-- <div class="fullscreen" οnclick="gameInstance.SetFullscreen(1)"></div> -->			//Unity导出WebGL时默认的全屏按钮点击事件
        <div class="fullscreen" οnclick="ChangeCanvas()"></div>									//点击全屏按钮实现屏幕自适应
        <div class="title">运行我</div>
      </div>
    </div>
  </body>
  
  
   //设置屏幕自适应的方法
   <script type="text/javascript">
      function ChangeCanvas()
      {
         document.getElementById("gameContainer").style.width = window.innerWidth + "px";
         document.getElementById("gameContainer").style.height = window.innerHeight + "px";
         document.getElementById("#canvas").style.width = window.innerWidth + "px";
         document.getElementById("#canvas").style.height = window.innerHeight + "px";
      }
    </script>
  
</html>
2013-05-03 21:38:10 iteye_20251 阅读数 230

    Label控件是Unity 3D GUI高级控件中的标签控件,可以在游戏界面中以文本的形式展示出一段字符串信息,还可以展示贴图。

 

    下边是实例代码如下:

#pragma strict

//定义公有的字符串变量,用来接收外部赋值字符串(默认是公有的)
var str:String;

//定义公有的贴图对象变量,用来接收外部赋值的贴图(默认是公有的)
var image:Texture;

//定义私有的贴图宽度变量
private var imageWidth:int;
//定义私有的贴图高度变量
private var imageHeight:int;

//定义私有的屏幕宽度变量
private var screenWidth:int;
//定义私有的屏幕高度变量
private var screenHeight:int;

function Start () {
	//通过Screen来获取屏幕的宽度和高度
	screenWidth = Screen.width;
	screenHeight = Screen.height;
	//通过image贴图对象来获取贴图的宽度和高度
	imageWidth = image.width;
	imageHeight = image.height;	
}

function OnGUI () {
	//将文字内容显示在屏幕中
	GUI.Label(Rect(10,10,200,30),str);
	GUI.Label(Rect(10,50,200,30),"当前屏幕的宽度:"+screenWidth);
	GUI.Label(Rect(10,90,200,30),"当前屏幕的高度:"+screenHeight);
	
	//将贴图显示在屏幕中
	GUI.Label(Rect(10,130,imageWidth,imageHeight),image);
}

 

 

上述的代码示例中,使用了两个方法:第一个是Start()方法,该方法只会执行一次,在程序运行的时候执行,所以需要将初始化的相关代码都放在Start()方法中;第二个是OnGUI()方法,它是界面绘制方法,所有GUI的绘制都需要在这个方法中实现。

 

所有的脚本只有绑定在游戏对象上时,才会执行脚本自身的生命周期。此处你可以将上述的脚本对象添加给任何一个游戏对象模型。将脚本添加给模型后,记得在Inspector

视图中为脚本中的公有变量赋值,如下图所示:

注意:只有公有的变量才能在编译器中以拖拽对象或输入的形式赋值。在声明变量时,在变量前方添加public关键字或未添加任何关键字表示该变量为公有变量,如:

public var str :String ;

var str:String ;

如果在变量前方添加private关键字的变量,则为私有变量。私有变量不会出现在编辑器中,只能在脚本中使用。

运行程序后的结果是如下所示:

 

 

<!--EndFragment-->

 

<!--EndFragment-->
没有更多推荐了,返回首页