【0909】unity作业:2d箭头跟随指引物体方向,箭头始终在屏幕内。
第一步:对需要用到的箭头进行抠图:
上课老师说用Sprite Editor。不过那个,好像是用来切片的,不能抠图…参考了一篇文章
原文标题与作者:Unity Shader - Sprite Shader之简单抠图效果( 起个名字真的好难啊)
原文链接:https://blog.csdn.net/e295166319/article/details/80509979
里面步骤不详细,我这里写一下步骤:
1.在Assets中新建一个Material(不用做什么变化)和一个Image Effect Sharder
2.对Image Effect Sharder进行编辑写下段代码
实现原理:
使用当前像素颜色与需要抠掉的颜色相减作比较,然后与一个指定的阈值比较以决定是否将其显示出来;
Shader "Demo/SpriteShader"
{
Properties
{
[PerRendererData]_MainTex ("Sprite Texture", 2D) = "white" {} // 当前的Sprite图(添加[PerRendererData]后在属性面板中不可见)
_Color ("Alpha Color Key", Color) = (0,0,0,1) // 用于比较的基色(想过滤掉什么颜色,这个颜色就设置为那种颜色)
_Range("Range",Range (0, 1.01))=0.1 // 决定抠图范围的域
[MaterialToggle] PixelSnap ("Pixel snap", Float) = 0 // 在属性面板中以按钮形式显示(在此Shader中没用到)
}
SubShader
{
//Sprite图一般均为透明贴图,需要做以下处理
Tags
{
"Queue"="Transparent"
"IgnoreProjector"="True"
"RenderType"="Transparent"
"PreviewType"="Plane"
"CanUseSpriteAtlas"="True"
}
Pass
{
//Sprite图一般均为透明贴图,需要做以下处理
Cull Off
Lighting Off
ZWrite Off
Fog { Mode Off }
Blend SrcAlpha OneMinusSrcAlpha //Sprite图一般均为透明贴图,需要做以下处理
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
sampler2D _MainTex;
float4 _Color;
half _Range;
struct Vertex
{
float4 vertex : POSITION;
float2 uv_MainTex : TEXCOORD0;
float2 uv2 : TEXCOORD1;
};
struct Fragment
{
float4 vertex : POSITION;
float2 uv_MainTex : TEXCOORD0;
};
Fragment vert(Vertex v)
{
Fragment o;
o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
o.uv_MainTex = v.uv_MainTex;
return o;
}
float4 frag(Fragment IN) : COLOR
{
float4 o = float4(1, 1, 1, 1);
half4 c = tex2D (_MainTex, IN.uv_MainTex);
o.rgb = c.rgb;
//使用当前像素颜色与基色相减,然后与域相比较以决定是否将其显示出来
if(abs(c.r-_Color.r)<_Range && abs(c.g-_Color.g)<_Range && abs(c.b-_Color.b)<_Range)
{
o.a = 0;
}
else
{
o.a = 1;
}
return o;
}
ENDCG
}
}
}
3.将Image Effect Editor移到前面建的Material上,则Material就形成透明的扣掉的材质了。
4. 将制作好的Material托至箭头图片的Material中,就完成抠图啦!
补充:用Sprite Editor抠图
发现宿友可以用Sprite Editor抠图,然后我就又去试了一下,就知道该怎么用了。下面我记录一下
1.点击Assets里面的arrow图片,在Inspector窗口点击Sprite Editor
2.在Sprite Editor中选择Custom Outline(自定义轮廓),先画一个矩形,然后一个点一个点的描边,好了之后点击Apply,就抠图成功了。
3.在Inspector视图中Sprite Mode选择Polygon。这样才是完全扣好图的
结果:直接拖图片就可以使用啦!!!
第二步:将箭头作为2d图片放入场景内
在unity3d场景中要检测到并使用2d图片,需要用到ui
1.新建一个ui–image
2.UI设置图片
如果你用第一个代码抠图:那你Source Image和Material都要设置。 如果你用Sprite
Editor抠图:那直接把图片拖到Source Image中,并且一定要勾选Use Sprite Mesh。
第三步:新建一个cube作为Player玩家物体
箭头指向的物体
第四步:屏幕箭头指向
不太会写代码,都是借鉴网上的,加一点理解,看看我的临床试验吧!!!
!!第一遍尝试:成功(箭头不动)
原文标题与作者:unity中UGUI图片箭头指向鼠标位置( 酒碗大三)
原文链接:https://blog.csdn.net/u012527305/article/details/77689419
箭头原理解释:
找到的这个是箭头指向鼠标,我想把里面的鼠标改成Player,即UGUI图片箭头指向Player。里面做了一些改变让代码更简单,也加了一些注释,为方便理解。
箭头control_arrow.cs代码
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; //用的是UGUI所以要加这个前缀
public class control_try : MonoBehaviour
{
public Image _arrow; //空图片用来放arrow图片
public GameObject Player; //存放指向的玩家
// Start is called before the first frame update
void Start()
{
}
// Update is called once per frame
void Update()
{
WorldToScreenPos();
}
//箭头跟随指向Player的函数
void WorldToScreenPos()
{
//获取目标对象当前的世界坐标系位置,并将其转换为屏幕坐标系的点
Vector2 screenPos = Camera.main.WorldToScreenPoint(transform.position);
//封装输出,Debug是一个密闭的类
Debug.Log(transform.position);
Debug.Log(screenPos);
//Debug.Log("箭头屏幕坐标:"+_arrow.transform.position);
// Debug.Log("鼠标屏幕坐标:" + Input.mousePosition);
//_arrow.transform.LookAt(Input.mousePosition);
_arrow.transform.LookAt(Player.transform.position); //使箭头朝向该坐标点
//转变从视空间到屏幕空间
Vector2 arrowPos = Camera.main.WorldToScreenPoint(_arrow.transform.position);
//Vector2 mousePos = Camera.main.ViewportToScreenPoint(Input.mousePosition);
Vector2 playerPos = Camera.main.WorldToScreenPoint(Player.transform.position);
//计算两物体x、y轴距离
// float xiangJianY = mousePos.y - jianTouPos.y;
// float xiangJianX = mousePos.x - jianTouPos.x;
float xiangJianY = playerPos.y - arrowPos.y;
float xiangJianX = playerPos.x - arrowPos.x;
float arrowRotationZ = 0f; //定义z轴箭头旋转角度为0
//判断箭头指向玩家方向
//顺时针-,逆时针+
if (xiangJianX >= 0) // 方向向右/重叠
{
if (xiangJianX == 0) // x轴位置重叠
{
if (xiangJianY > 0)// 方向向上
{
_arrow.transform.rotation = Quaternion.Euler(0f, 0f,0f);
}
else if (xiangJianY < 0)// 方向向下
{
_arrow.transform.rotation = Quaternion.Euler(0f, 0f,180f);
}
else // y轴位置重叠
{
_arrow.transform.rotation = Quaternion.Euler(0f, 0f,0f);
}
}
else // 方向向右
{
if (xiangJianY > 0)
{
/*Mathf.Atan()和Mathf.Atan2()都返回一个弧度值,表示反三角函数中的arctanx。
Mathf.Atan()返回的值的范围是[-π/2,π/2],
Mathf.Atan2()返回的值的范围是[-π,π]。
Mathf.Abs()返回绝对值。
*/
//1弧度=180°/π,?角度=?弧度*180°/π
//Mathf.Atan2()求出弧度,乘180°/π得出角度。
arrowRotationZ = Mathf.Atan2(Mathf.Abs(xiangJianY), Mathf.Abs(xiangJianX)) * 180f / Mathf.PI; //得到反正切角度值
//Debug.Log("角度值:" + arrowRotationZ);
_arrow.transform.rotation = Quaternion.Euler(0f, 0f, arrowRotationZ - 90f); // 右上角
}
else if (xiangJianY < 0)
{
arrowRotationZ = Mathf.Atan2(Mathf.Abs(xiangJianY), Mathf.Abs(xiangJianX)) * 180f / Mathf.PI;
_arrow.transform.rotation = Quaternion.Euler(0f, 0f, - arrowRotationZ - 90f);// 右下角
}
else
{
_arrow.transform.rotation = Quaternion.Euler(0f, 0f, 0f);
}
}
}
else
{
if (xiangJianY > 0)
{
arrowRotationZ = Mathf.Atan2(Mathf.Abs(xiangJianY), Mathf.Abs(xiangJianX)) * 180f / Mathf.PI;
_arrow.transform.rotation = Quaternion.Euler(0f, 0f, 90f- arrowRotationZ );//左上角
//_arrow.transform.rotation = Quaternion.Euler(0f, 0f, 360f + 180f - arrowRotationZ +90f);
}
else if (xiangJianY < 0)
{
arrowRotationZ = Mathf.Atan2(Mathf.Abs(xiangJianY), Mathf.Abs(xiangJianX)) * 180f / Mathf.PI;
_arrow.transform.rotation = Quaternion.Euler(0f, 0f, 90f + arrowRotationZ );//左下角
//_arrow.transform.rotation = Quaternion.Euler(0f, 0f, 360f + 180f + arrowRotationZ - 90f);
}
else
{
_arrow.transform.rotation = Quaternion.Euler(0f, 0f, - 90f);
//_arrow.transform.rotation = Quaternion.Euler(0f, 0f, 360f + 180f - 90f);
}
}
}
}
鼠标控制玩家control_player.cs代码
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class control_player : MonoBehaviour
{
// Start is called before the first frame update
void Start()
{
}
// Update is called once per frame
void Update()
{
//让player(cube)的位置等于屏幕上鼠标的坐标
this.transform.position = Camera.main.ScreenToWorldPoint(Input.mousePosition + new Vector3(0, 0, 10));
}
}
最终效果:
!!第二遍尝试:
原文标题及作者:Unity之屏幕追踪显示目标位置(ζއ随风去旅行)
原文链接:http://www.manew.com/thread-48125-1-1.html?_dsign=4edc9052.
没有继续写了,隔了好久~~
分割线::::
下面用来教我怎么写博客。不用理会
- 全新的界面设计 ,将会带来全新的写作体验;
- 在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示;
- 增加了 图片拖拽 功能,你可以将本地的图片直接拖拽到编辑区域直接展示;
- 全新的 KaTeX数学公式 语法;
- 增加了支持甘特图的mermaid语法1 功能;
- 增加了 多屏幕编辑 Markdown文章功能;
- 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能,功能按钮位于编辑区域与预览区域中间;
- 增加了 检查列表 功能。
功能快捷键
撤销:Ctrl/Command + Z
重做:Ctrl/Command + Y
加粗:Ctrl/Command + B
斜体:Ctrl/Command + I
标题:Ctrl/Command + Shift + H
无序列表:Ctrl/Command + Shift + U
有序列表:Ctrl/Command + Shift + O
检查列表:Ctrl/Command + Shift + C
插入代码:Ctrl/Command + Shift + K
插入链接:Ctrl/Command + Shift + L
插入图片:Ctrl/Command + Shift + G
查找:Ctrl/Command + F
替换:Ctrl/Command + G
合理的创建标题,有助于目录的生成
直接输入1次#,并按下space后,将生成1级标题。
输入2次#,并按下space后,将生成2级标题。
以此类推,我们支持6级标题。有助于使用TOC
语法后生成一个完美的目录。
如何改变文本的样式
强调文本 强调文本
加粗文本 加粗文本
标记文本
删除文本
引用文本
H2O is是液体。
210 运算结果是 1024.
插入链接与图片
链接: link.
图片:
带尺寸的图片:
居中的图片:
居中并且带尺寸的图片:
当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。
如何插入一段漂亮的代码片
去博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片
.
// An highlighted block
var foo = 'bar';
生成一个适合你的列表
- 项目
- 项目
- 项目
- 项目
- 项目1
- 项目2
- 项目3
- 计划任务
- 完成任务
创建一个表格
一个简单的表格是这么创建的:
项目 | Value |
---|---|
电脑 | $1600 |
手机 | $12 |
导管 | $1 |
设定内容居中、居左、居右
使用:---------:
居中
使用:----------
居左
使用----------:
居右
第一列 | 第二列 | 第三列 |
---|---|---|
第一列文本居中 | 第二列文本居右 | 第三列文本居左 |
SmartyPants
SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如:
TYPE | ASCII | HTML |
---|---|---|
Single backticks | 'Isn't this fun?' | ‘Isn’t this fun?’ |
Quotes | "Isn't this fun?" | “Isn’t this fun?” |
Dashes | -- is en-dash, --- is em-dash | – is en-dash, — is em-dash |
创建一个自定义列表
-
Markdown
- Text-to- HTML conversion tool Authors
- John
- Luke
如何创建一个注脚
一个具有注脚的文本。2
注释也是必不可少的
Markdown将文本转换为 HTML。
KaTeX数学公式
您可以使用渲染LaTeX数学表达式 KaTeX:
Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 是通过欧拉积分
Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞tz−1e−tdt.
你可以找到更多关于的信息 LaTeX 数学表达式here.
新的甘特图功能,丰富你的文章
- 关于 甘特图 语法,参考 这儿,
UML 图表
可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图::
这将产生一个流程图。:
- 关于 Mermaid 语法,参考 这儿,
FLowchart流程图
我们依旧会支持flowchart的流程图:
- 关于 Flowchart流程图 语法,参考 这儿.
导出与导入
导出
如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ,生成一个.md文件或者.html文件进行本地保存。
导入
如果你想加载一篇你写过的.md文件,在上方工具栏可以选择导入功能进行对应扩展名的文件导入,
继续你的创作。
注脚的解释 ↩︎