Qwik 中本地图片为什么推荐用 ESM 导入
在 Qwik 项目里，如果我们直接这样写本地图片： 代码本身是可以运行的，但 ESLint 可能会提示 。这个提示不是错误，而是 Qwik 在提醒我们： 本地图片可以通过 ESM 导入的方式进行优化 。 问题来源 Qwik 推荐把本地图片放到 目录下，然后通过 导入，并在路径后面加上 。 例如： 这样导入之后，图片会变成一个可以直接使用的组件。 为什么要这样做 直接写 时，浏览器只会加载这一张原图。图片多大，用户就下载多大。 而使用 Q...
Qwik City 构建后 Godot 游戏 index.html 被删除的根因分析
背景 在 Qwik 博客项目中，我把 Godot Web 导出的游戏资源放在： Qwik 页面通过 iframe 嵌入游戏： 本地开发和本地静态资源检查时，游戏资源是存在的；但服务器执行完整构建后，发现： 消失了，最终导致 iframe 加载失败。 一开始容易误判为服务器部署脚本删文件、Git 没拉到资源、Godot 导出目录不对，或者 public 静态资源没有复制进 dist。但逐步排查后发现，根因不是这些。 现象复现 Qwik 项...
Agent 开发是什么
Agent 开发，简单说就是： 把大模型从“只会聊天的回答器”，变成“能理解任务、调用工具、执行步骤、产出结果的工作流系统”。 它不是单纯写提示词，也不是把 ChatGPT 接进网页就完事。真正的 Agent 开发更像是在做一个“会思考一点、会用工具、会按流程办事的自动化应用”。 OpenAI 的 Agents SDK 文档里把 Agent 描述为：一个配置了 指令、工具，以及可选运行行为 的大语言模型，比如 handoffs、guar...
外阴影和内阴影介绍
在前端页面设计中，阴影是非常常见的视觉效果。它可以让元素看起来更有层次感，也可以用来表达悬浮、按压、凹陷、卡片、按钮等状态。 CSS 中最常用的阴影属性是 。它既可以实现外阴影，也可以实现内阴影。 一、什么是外阴影 外阴影指的是元素外部的阴影效果。 它会出现在元素边框之外，让元素看起来像是从页面中“浮起来”了一样。常见的卡片、弹窗、按钮悬浮效果，基本都会用到外阴影。 例如： 这个阴影表示：元素下方有一层柔和的黑色阴影，让卡片看起来更有立...
Tileset 资源图的标准和规范
一、什么是 Tileset 资源图 Tileset，中文通常叫“图块资源图”或“瓦片图”，是 2D 游戏中非常常见的一种地图资源组织方式。 简单来说，Tileset 就是把很多小图块按照固定尺寸排列在一张图片里。游戏引擎会按照固定的格子大小去切割这张图片，然后把每个小格子当成一个独立的地图块使用。 比如一个 32×32 像素的 Tileset 中，每一个 tile 都是 32×32 像素。地图编辑器或游戏引擎会按照 32×32 的网格，...
前端判断一个网页是否允许被 iframe 内嵌
前端 不能 100% 准确提前判断 一个网页是否允许被 iframe 内嵌，因为决定权主要在目标网站返回的 HTTP 响应头 里，而普通前端 JS 通常读不到跨域页面的响应头。 核心判断看这两个东西： 1. 老一点但仍常见。 表示完全不允许被 iframe 嵌入。 表示只允许同源页面 iframe 嵌入。 以前有这个，但现代浏览器支持很差，基本不建议依赖。 2. 现在更推荐看这个。 表示不允许任何页面嵌入。 表示只允许同源嵌入。 表示只...
用户角色精灵图制作角色的完整流程
在 2D RPG 游戏里，角色通常不是用一张单独图片完成的，而是用一张“角色精灵图”来做。 所谓角色精灵图，通常是一张包含多个动作帧的大图。比如角色向下走有 4 帧，向左走有 4 帧，向右走有 4 帧，向上走有 4 帧。Godot 会根据这些帧不断切换图片，看起来角色就动起来了。 这篇文章主要介绍：拿到一张角色精灵图之后，如何在 Godot 中把它做成一个可以正常移动、播放动画、和地图产生遮挡关系的角色。 一、先理解角色精灵图是什么 角...
Godot 节点系统详细介绍
Godot 里最核心的东西不是“类”，也不是“组件”，而是 节点 Node 。 你可以把 Godot 的节点理解成： 在前端里，一个页面是由很多 DOM 元素组成的； 在 Godot 里，一个游戏场景是由很多 Node 节点组成的。 比如一个玩家角色，可能不是一个单独对象，而是这样的结构： 这里的 是根节点，下面挂着显示图片、播放动画、碰撞检测、摄像机、音效等子节点。 Godot 官方文档也把节点和场景放在一起讲：多个节点组成树状结构后...
第一部分 01：Godot 基础世界观
先建立一个总认知： Godot 做游戏的核心思路是：用一个个 Node 组成 Scene，再把 Scene 放进 SceneTree 运行。代码 Script 负责控制 Node，Resource 负责存数据，Signal 负责对象之间通信。 你可以先把 Godot 想成一个“可视化的前端工程”： | Godot | 前端类比 | 说明 | | | | | | Project | 一个前端项目仓库 | 整个游戏工程 | | Scene...