case4
@@ -1,15 +1,15 @@
|
||||
---
|
||||
title: StudyCase3
|
||||
date: 2025-11-27 16:36:05
|
||||
title: studycase4
|
||||
date: 2025-11-30 12:40:05
|
||||
tags: [studycase, unity]
|
||||
pinned: true
|
||||
head:
|
||||
- - meta
|
||||
- name: description
|
||||
content: vitepress-theme-bluearchive StudyCase3
|
||||
content: vitepress-theme-bluearchive studycase4
|
||||
- - meta
|
||||
- name: keywords
|
||||
content: vitepress theme bluearchive StudyCase3
|
||||
content: vitepress theme bluearchive studycase4
|
||||
---
|
||||
|
||||
# 虚拟摇杆
|
||||
@@ -25,106 +25,81 @@ head:
|
||||
- **Visual Studio 2022**
|
||||
|
||||
## 2.光芒汇聚之所-章节目标
|
||||
- **射线检测拾取物体**
|
||||
- **鼠标点击拾取物体**
|
||||
- **虚拟摇杆和按钮**
|
||||
- **In game Debug**
|
||||
- **打包APK**
|
||||
|
||||
## 3.光流影卷-演示视频
|
||||
<video id="vdMain" controls muted poster="/video/studycase3/演示视频.png" playsinline>
|
||||
<source id="vSource" src="/video/studycase3/演示视频.mp4" type="video/mp4" />
|
||||
<video id="vdMain" controls muted poster="/video/studycase4/演示视频.png" playsinline>
|
||||
<source id="vSource" src="/video/studycase4/演示视频.mp4" type="video/mp4" />
|
||||
</video>
|
||||
|
||||
## 4.初始祭坛-前置准备
|
||||
### 导入[资源](/resources/studycase3/case3.zip)(天空球,描边,道具模型)
|
||||
### 导入[资源](/resources/studycase4/case4.zip)(摇杆图标、Debug工具)
|
||||
|
||||
<img src="/image/studycase4/导入.png" data-fancybox="gallery"/>
|
||||
|
||||
### 导入InputSystem的OnScreen示例
|
||||
|
||||
<img src="/image/studycase4/onscreen.png" data-fancybox="gallery"/>
|
||||
|
||||
## 5.勇者行迹录-章节任务
|
||||
### 创建StudyCase3
|
||||
- 复制场景和脚本改名为StudyCase3
|
||||
- 修改控制器的命名空间
|
||||
### 创建studycase4
|
||||
- 复制场景和脚本改名为studycase4
|
||||
- 修改控制器和道具的命名空间
|
||||
|
||||
### 道具
|
||||
- 把导入的道具模型放到场景中
|
||||
### IngameDebugConsole
|
||||
- 把IngameDebugConsole预制体拖入场景
|
||||
|
||||
<img src="/image/studycase3/把导入的道具模型放到场景中.png" data-fancybox="gallery"/>
|
||||
<img src="/image/studycase4/debug.png" data-fancybox="gallery"/>
|
||||
|
||||
- 新建道具层级
|
||||
- 全选mobile-controls-1下的Texture
|
||||
|
||||
<img src="/image/studycase3/新建Layer.png" data-fancybox="gallery"/>
|
||||
<img src="/image/studycase4/全选mobile-controls-1下的Texture.png" data-fancybox="gallery"/>
|
||||
|
||||
- 在`Assets\Scripts\StudyCase3`下创建道具脚本`Item.cs`
|
||||
```csharp
|
||||
using UnityEngine;
|
||||
- 切换到sprite(2d and ui)
|
||||
|
||||
namespace StudyCase3
|
||||
{
|
||||
public class Item : MonoBehaviour
|
||||
{
|
||||
Outline outline;
|
||||
bool pick;
|
||||
ThirdCharacterController player;
|
||||
private void Awake()
|
||||
{
|
||||
player = FindAnyObjectByType<ThirdCharacterController>();
|
||||
if (outline == null)
|
||||
outline = gameObject.AddComponent<Outline>();
|
||||
else
|
||||
outline = GetComponent<Outline>();
|
||||
outline.enabled = false;
|
||||
outline.OutlineMode = Outline.Mode.OutlineVisible;
|
||||
outline.OutlineColor = new Color(0, 1, 1);
|
||||
outline.OutlineWidth = 10f;
|
||||
gameObject.layer = LayerMask.NameToLayer("Item");
|
||||
}
|
||||
public void Select()
|
||||
{
|
||||
if(!pick)
|
||||
outline.enabled = true;
|
||||
}
|
||||
public void UnSelect()
|
||||
{
|
||||
if (!pick)
|
||||
outline.enabled = false;
|
||||
}
|
||||
public void PickUp(Transform root)
|
||||
{
|
||||
if (pick) return;
|
||||
pick = true;
|
||||
transform.SetParent(root);
|
||||
outline.OutlineWidth = 2f;
|
||||
gameObject.layer = LayerMask.NameToLayer("Default");
|
||||
player.SetItems();
|
||||
}
|
||||
private void OnMouseEnter()
|
||||
{
|
||||
if (player.pickMode == PickMode.Mouse)
|
||||
Select();
|
||||
}
|
||||
private void OnMouseExit()
|
||||
{
|
||||
if (player.pickMode == PickMode.Mouse)
|
||||
UnSelect();
|
||||
}
|
||||
private void OnMouseDown()
|
||||
{
|
||||
if (player.pickMode == PickMode.Mouse)
|
||||
PickUp(player.itemRoot);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
- 道具挂载脚本
|
||||
<img src="/image/studycase4/切换到sprite.png" data-fancybox="gallery"/>
|
||||
|
||||
<img src="/image/studycase3/道具挂载脚本.png" data-fancybox="gallery"/>
|
||||
- 创建一个canvas,再创建一个image,命名为leftBg,sprite使用joystick_circle_pad_a,设置大小位置和锚点
|
||||
|
||||
- 创建Pick输入事件,绑定按键F
|
||||
<img src="/image/studycase4/创建leftBg.png" data-fancybox="gallery"/>
|
||||
|
||||
<img src="/image/studycase3/创建Pick输入事件,绑定F.png" data-fancybox="gallery"/>
|
||||
- 创建一个image,命名为leftStick,透明度0,设置大小位置和锚点,挂载On-Screen-Stick
|
||||
|
||||
- 修改`Assets\Scripts\StudyCase3` 下脚本 `ThirdCharacterController.cs`
|
||||
<img src="/image/studycase4/创建leftStick.png" data-fancybox="gallery"/>
|
||||
|
||||
- 设置 `MovementRange` 为200,设置 `ControlPath` 为LeftStick
|
||||
|
||||
<img src="/image/studycase4/设置leftStick.png" data-fancybox="gallery"/>
|
||||
|
||||
- 复制一个leftBg改名为rightBg,设置大小位置和锚点
|
||||
|
||||
<img src="/image/studycase4/创建rightBg.png" data-fancybox="gallery"/>
|
||||
|
||||
- 复制一个leftStick改名为rightStick,设置`ControlPath` 为RightStick
|
||||
|
||||
<img src="/image/studycase4/创建并设置rightStick.png" data-fancybox="gallery"/>
|
||||
|
||||
- 添加输入事件,Move添加LeftStick,创建Look,添加Detla和RightStick
|
||||
|
||||
<img src="/image/studycase4/添加输入事件.gif" data-fancybox="gallery"/>
|
||||
|
||||
- 设置虚拟相机参数移动速度从300调到100,限制角度0到70
|
||||
|
||||
<img src="/image/studycase4/设置虚拟相机参数.png" data-fancybox="gallery"/>
|
||||
|
||||
- 修改虚拟相机输入
|
||||
|
||||
<img src="/image/studycase4/配置虚拟相机输入.gif" data-fancybox="gallery"/>
|
||||
|
||||
- 修改`Assets\Scripts\studycase4` 下脚本 `ThirdCharacterController.cs`
|
||||
```csharp
|
||||
using UnityEngine;
|
||||
using UnityEngine.InputSystem;
|
||||
using Cinemachine;
|
||||
|
||||
namespace StudyCase3
|
||||
namespace StudyCase4
|
||||
{
|
||||
public enum PickMode
|
||||
{
|
||||
@@ -139,7 +114,7 @@ namespace StudyCase3
|
||||
Animator animator;
|
||||
Transform forward;
|
||||
Transform model;
|
||||
Cinemachine.CinemachineVirtualCamera vCam;
|
||||
CinemachineVirtualCamera vCam;
|
||||
public float moveSpeed = 5f;
|
||||
public float jumpSpeed = 2f;
|
||||
public float turnSpeed = 10f;
|
||||
@@ -153,9 +128,13 @@ namespace StudyCase3
|
||||
public float maxDistance = 5f;
|
||||
public LayerMask layerMask;
|
||||
public float itemsRotateSpeed = 120f;
|
||||
public Transform itemRoot;
|
||||
public float minCameraDistance = 2f;
|
||||
public float maxCameraDistance = 10f;
|
||||
public float cameraZoomSpeed = 0.1f;
|
||||
[HideInInspector] public Transform itemRoot;
|
||||
Item selectItem;
|
||||
LineRenderer lineRenderer;
|
||||
CinemachineFramingTransposer framingTransposer;
|
||||
private void Awake()
|
||||
{
|
||||
Cursor.lockState = cursorLock;
|
||||
@@ -163,21 +142,28 @@ namespace StudyCase3
|
||||
forward = transform.Find("Forward");
|
||||
model = transform.Find("Model");
|
||||
animator = model.GetComponentInChildren<Animator>();
|
||||
vCam = transform.Find("Virtual Camera").GetComponent<Cinemachine.CinemachineVirtualCamera>();
|
||||
vCam = transform.Find("Virtual Camera").GetComponent<CinemachineVirtualCamera>();
|
||||
framingTransposer = vCam.GetCinemachineComponent<CinemachineFramingTransposer>();
|
||||
inputAction = Resources.Load<InputActionAsset>("PlayerInputActions");
|
||||
inputAction.FindAction("Move").started += OnMove;
|
||||
inputAction.FindAction("Move").performed += OnMove;
|
||||
inputAction.FindAction("Move").canceled += OnMove;
|
||||
inputAction.FindAction("Jump").performed += OnJump;
|
||||
inputAction.FindAction("Pick").performed += OnPickUp;
|
||||
inputAction.FindAction("Zoom").started += OnZoom;
|
||||
inputAction.FindAction("Zoom").performed += OnZoom;
|
||||
inputAction.FindAction("Zoom").canceled += OnZoom;
|
||||
inputAction.Enable();
|
||||
itemRoot = transform.Find("ItemRoot");
|
||||
if (lineRenderer == null)
|
||||
{
|
||||
lineRenderer = gameObject.AddComponent<LineRenderer>();
|
||||
lineRenderer.material = new Material(Shader.Find("Universal Render Pipeline/2D/Sprite-Unlit-Default"));
|
||||
lineRenderer.material = Resources.Load<Material>("Line");
|
||||
lineRenderer.useWorldSpace = true;
|
||||
}
|
||||
layerMask = LayerMask.GetMask("Item");
|
||||
//开启多点触控
|
||||
Input.multiTouchEnabled = true;
|
||||
}
|
||||
private void Update()
|
||||
{
|
||||
@@ -198,6 +184,13 @@ namespace StudyCase3
|
||||
moveDir.y = jumpSpeed;
|
||||
}
|
||||
}
|
||||
//增加控制相机距离的方法
|
||||
public void OnZoom(InputAction.CallbackContext context)
|
||||
{
|
||||
float scrollValue = context.ReadValue<float>();
|
||||
float newDistance = framingTransposer.m_CameraDistance + (scrollValue * cameraZoomSpeed * 0.01f);
|
||||
framingTransposer.m_CameraDistance = Mathf.Clamp(newDistance, minCameraDistance, maxCameraDistance);
|
||||
}
|
||||
void Move()
|
||||
{
|
||||
moveDir = new Vector3(moveInput.x, moveDir.y, moveInput.y);
|
||||
@@ -282,8 +275,15 @@ namespace StudyCase3
|
||||
}
|
||||
}
|
||||
```
|
||||
- 玩家挂载脚本,创建ItemRoot节点,设置射线检测层级
|
||||
- 玩家移除case3的脚本,挂载case4脚本
|
||||
- BuildSettings切换到Android平台
|
||||
|
||||
<img src="/image/studycase3/玩家挂载脚本,创建ItemRoot节点,设置射线检测层级.png" data-fancybox="gallery"/>
|
||||
<img src="/image/studycase4/切换到Android平台.png" data-fancybox="gallery"/>
|
||||
|
||||
- 打包apk
|
||||
|
||||
<img src="/image/studycase4/打包apk.png" data-fancybox="gallery"/>
|
||||
|
||||
- 在手机上安装和运行
|
||||
|
||||
## 6.异闻录-FAQ
|
||||
BIN
public/image/studycase4/debug.png
Normal file
|
After Width: | Height: | Size: 912 KiB |
BIN
public/image/studycase4/onscreen.png
Normal file
|
After Width: | Height: | Size: 394 KiB |
BIN
public/image/studycase4/全选mobile-controls-1下的Texture.png
Normal file
|
After Width: | Height: | Size: 696 KiB |
BIN
public/image/studycase4/切换到Android平台.png
Normal file
|
After Width: | Height: | Size: 70 KiB |
BIN
public/image/studycase4/切换到sprite.png
Normal file
|
After Width: | Height: | Size: 682 KiB |
BIN
public/image/studycase4/创建leftBg.png
Normal file
|
After Width: | Height: | Size: 515 KiB |
BIN
public/image/studycase4/创建leftStick.png
Normal file
|
After Width: | Height: | Size: 432 KiB |
BIN
public/image/studycase4/创建rightBg.png
Normal file
|
After Width: | Height: | Size: 538 KiB |
BIN
public/image/studycase4/创建并设置rightStick.png
Normal file
|
After Width: | Height: | Size: 520 KiB |
BIN
public/image/studycase4/导入.png
Normal file
|
After Width: | Height: | Size: 24 KiB |
BIN
public/image/studycase4/打包apk.png
Normal file
|
After Width: | Height: | Size: 360 KiB |
BIN
public/image/studycase4/添加输入事件.gif
Normal file
|
After Width: | Height: | Size: 728 KiB |
BIN
public/image/studycase4/设置leftStick.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
public/image/studycase4/设置虚拟相机参数.png
Normal file
|
After Width: | Height: | Size: 307 KiB |
BIN
public/image/studycase4/配置虚拟相机输入.gif
Normal file
|
After Width: | Height: | Size: 303 KiB |
BIN
public/resources/studycase4/case4.zip
Normal file
BIN
public/video/studycase4/演示视频.mp4
Normal file
BIN
public/video/studycase4/演示视频.png
Normal file
|
After Width: | Height: | Size: 574 KiB |