2、CanvasGroup组件

用于集中控制UI元素的透明度、交互性和射线投射行为。

CanvasGroup的Alpha属性允许渐变效果#xff0c;I…1、目标

将库存栏放在游戏界面中一般情况下角色居中展示时库存栏在底部当角色位于界面下方时库存栏展示在顶部避免遮挡。

2、CanvasGroup组件

用于集中控制UI元素的透明度、交互性和射线投射行为。

CanvasGroup的Alpha属性允许渐变效果Interactable决定元素是否可交互BlocksRaycasts影响图形射线检测而IgnoreParentGroups选项则控制是否忽略父对象的CanvasGroup设置。

这些特性在创建互动游戏场景时尤为有用。

3、Aspect

元素的尺寸。

它可以根据宽度调整高度也可以根据高度调整宽度从而确保

Controls

Height根据宽度来调整高度确保元素的宽高比保持不变。

Height

Controls

Parent在父容器内缩放元素保持宽高比不变同时确保元素的大小适合父容器。

Envelope

Parent让元素包裹住父容器保持比例同时元素可能会超过父容器的边界。

这个属性用于设置

在UI下创建Canvas命名为MainGameUICanvas。

Canvas是UI组件的容器。

相关属性设置如下

在MainGameUICanvas下创建空物体命名为UICanvasGroup添加两个组件Canvas

Group和Aspect

在UICanvasGroup下创建空物体命名为UIInventoryBar。

对于位置信息按Shift

Scripts下新增UI在此目录下新增UIInventorybar.cs脚本。

1优化Player类

首先我们需要根据角色的位置判断bar到底是处于底部还是顶部所以Player类需要对外提供坐标信息而且是相对屏幕的坐标。

修改Player.cs如下

mainCamera.WorldToViewportPoint(gameObject.transform.position);

此时Player.cs完整代码如下

Awake(){base.Awake();rigidbody2D

GetComponentRigidbody2D();mainCamera

Camera.main;}private

InputResetAnimationTrigger();PlayerMovementInput();PlayerWalkInput();//

Send

inputEventHandler.CallMovementEvent(xInput,

yInput,

isUsingToolDown,isLiftingToolRight,

isLiftingToolLeft,

isLiftingToolDown,isPickingRight,

isPickingLeft,

isPickingDown,isSwingToolRight,

isSwingToolLeft,

FixedUpdate(){PlayerMovement();}private

void

Time.deltaTime);rigidbody2D.MovePosition(rigidbody2D.position

move);}private

ResetAnimationTrigger(){toolEffect

ToolEffect.none;isUsingToolRight

false;isUsingToolUp

Input.GetAxisRaw(Horizontal);yInput

斜着移动if

Direction.down;}else{playerDirection

Direction.up;}}else

PlayerWalkInput(){if(Input.GetKey(KeyCode.LeftShift)

Input.GetKey(KeyCode.RightShift)){isRunning

false;isWalking

Settings.walkingSpeed;}else{isRunning

true;isWalking

mainCamera.WorldToViewportPoint(gameObject.transform.position);}

}2编写UIInventorybar类

_isInventoryBarPositionBottom;}

set

GetComponentRectTransform();}private

void

positionSwitchInventoryBarPosition();}private

void

SwitchInventoryBarPosition(){Vector3

Player.Instance.GetPlayerViewportPosition();if

0.3f

0f);rectTransform.anchoredPosition

new

2.5f);IsInventoryBarPositionBottom

true;}else

1f);rectTransform.anchoredPosition

new

-2.5f);IsInventoryBarPositionBottom

false;}}

将UIInventoryBar脚本添加到UIInventoryBar对象上。

运行程序效果如下