新手请教大佬们竖屏适配问题

bbbyer · 2024年01月10日 14:52

Creator 版本： 3.8.0
目标平台：h5网页/chrome

项目设计分辨率是750*1334，适配模式选择了适配宽度（Fit Width）

问题描述：
背景图原始宽高为889*2048，添加到Canvas中，节点宽度设置为750，这样高度会超出屏幕很多。因为背景图有内容区域是需要点击选中的，所以我做了区域覆盖(就是点击这个区域会出现选中的框框)，但是如果高度被拉伸，那选中状态节点的定位以及高度都要随着变化，不然就出现错位的问题。
现有的思路是：
设置父节点的高度缩放至设备屏幕分辨率，这样相当于背景和所定位的选中框一同缩放，覆盖是没什么问题，但节点下还有别的内容，想人物精灵等，如果也一同缩放就高度拉伸变形了。

看了很多适配相关文章，也不知道该怎么下手处理

99755349 · 2024年01月11日 02:02

如果你的背景不做滚屏，那只能要求美术把要操作的区域控制在显示范围内了。适配看文章作用不大，多做几次试验就能很好的搞清楚了

1226085293 · 2024年01月11日 02:12

github.com

1226085293/MKFramework/blob/main/assets/@framework/@component/adaptation/mk_adaptation_canvas.ts

import { EDITOR } from "cc/env";
import global_config from "../../../@config/global_config";
import global_event from "../../../@config/global_event";
import * as cc from "cc";

// eslint-disable-next-line @typescript-eslint/naming-convention
const { ccclass, disallowMultiple } = cc._decorator;

/**
 * canvas 适配
 * @noInheritDoc
 */
@ccclass
@disallowMultiple
export default class mk_adaptation_canvas extends cc.Component {
	/* ------------------------------- 生命周期 ------------------------------- */
	protected onLoad(): void {
		// 事件监听
		global_event.on(global_event.key.resize, this.adaptation, this);
	}

This file has been truncated. show original

bbbyer · 2024年01月11日 03:40

确实目前让背景滚动是最好的解决方案，不然只能拉伸高度，但高度的变化会让背景图上的操作区域变化。我刚才尝试把遮盖部分也同步拉伸高度，但始终不能完美适配

bbbyer · 2024年01月11日 03:41

感谢解答。但我这情况不是单纯背景适配，背景上有可操作区域，这一点始终不理解应该怎么做

1226085293 · 2024年01月11日 03:46

我发的是 Canvas 适配，不懂直接用就完事了

用之前把 global_config 和 global_event 的引用代码删除，放在项目里就行，自动适配

bbbyer · 2024年01月11日 03:57

是的，我在代码里试用过了，没有达到预期。可能是我没有描述清楚，有一些子节点通过widget定位在某位置，但重置设计分辨率后这个节点的停靠位置就不符合预期了

bbbyer · 2024年01月11日 03:59

比如子节点原宽高310*170是符合预期并可以覆盖住背景图上某位置，但是设计分辨率的变化就会导致原有的宽高和widget不符合预期

1226085293 · 2024年01月11日 04:04

那是你自己widget设置错误，应该用中心点为原点

bbbyer · 2024年01月11日 04:29

子节点的widget，target设置canvas，比如当高1334时top200位置正确，但当高1864时，top的200就不正确了，不理解您的意思

459673409 · 2024年05月14日 23:53

感谢解答。但我这情况不是单纯背景适配，背景上有可操作区域
–请问以上问题现在有啥好的解决方案么？

dream_chou93 · 2024年05月15日 02:25

在首场景执行这个代码

https://gitee.com/dream93/scl/blob/main/components/CanvasAdapter.ts
试试这个？

776246264 · 2024年05月15日 02:04

那就把要操作的部分单独整出来，适配的是ui，核心区域实际是不变的。

459673409 · 2024年05月15日 02:06

不太明白，背景图因为分辨率不同会拉伸吧？一拉伸的话，如何原先放在背景图中门上的按钮，就不会显示在门上了

776246264 · 2024年05月15日 02:15

两张纸1：1的时候是一样的。 1：1.2的时候是包含的，1：0.8的时候就要缩放。你想想

972579559 · 2024年05月15日 02:19

把可以交互的部分从背景图里抽离出来也做成ui 让你们美术把这部分单独切出来

你要做的应该是类似于主城然后建筑没有从背景图里单独切图但是又想做点击建筑区域显示一个比方说建筑的发光描边贴图做选中效果对吧

dream_chou93 · 2024年05月15日 02:26

如果适配后，背景无法填充，而背景背身与游戏内容有关，一般的方式是用大的背景图

catfish · 2024年05月15日 03:16

背景填充需要在锁定宽度后，适配一个极高的高度，一般现在是2.3：1的比例比较合适（不考虑三星折叠屏的情况下），所以如果你的宽是750，那高应该是1800左右

459673409 · 2024年05月15日 03:43

是要这种效果，那建筑单独切图的话，建筑的图放到sprite节点下面么？但是这个建筑的坐标如何设置呢？不同分辨率，这个建筑节点的位置，会与背景图里面建筑图错位吧？

972579559 · 2024年05月15日 04:27

拿适配前和适配后的拉伸比例还有适配前的坐标应该能算出适配后的坐标了吧
把可交互部分从背景图里切出来单独做成预制体这样可交互区域的大小就不会受适配影响该调大小调大小然后把预制体生成到适配后的坐标上思路应该是这样没错吧