从Trae到Unity:前端的游戏初学

我正在参加Trae「超级体验官」创意实践征文, 本文所使用的 Trae 免费下载链接: www.trae.ai/?utm_source...

前言

起因是自己出于兴趣和未来考虑想学一下游戏,而不仅仅是在前端上继续拓展,因为公司业务的原因,所以即使学到大多数其实是用不到的,再多的东西不用久了也就忘了,但是多一点技能,可以自己或者朋友一起搞点事情

那么如何快速的从0去做一个游戏呢,现在肯定不能像学校或者机构一样,今天a知识点,明天b知识点,整个学完后,开始从0到实战的案例

起步碰到了各种问题:

  1. 我先统一了解了下游戏的设计流程,需要用到哪些方面,例如unity,那得有个编辑器,我在用的unityHub,那么其实会碰到各种各样的问题,例如你什么都不懂的时候去下载了一个游戏源码,是不一定能跑起来的,因为里面有个scene的知识点
  2. 起初我是通过ai一边问一边去完善我的c#,那么有个问题是,编辑器中的操作需要自己搞定,那么是需要自己去学习一些编辑器方面的交互知识
  3. unity可分为2d和3d,3d当然更复杂,并且每走一步都会产生疑问,例如角色是如何产生行走动画的,例如模型自带的anim,序列帧,通过脚本实现gif,各种花样让我更迷茫了
  4. ......

需要去理解Unity的核心概念

Unity是一个跨平台的游戏引擎,支持2D和3D游戏开发。它提供了强大的编辑器、物理引擎、动画系统等工具

  • 相似点

    • 事件驱动:Unity中的事件系统(如OnClick、OnCollision)与前端的DOM事件类似
    • 数据驱动:Unity的Inspector面板可以像前端表单一样绑定和修改数据
  • 不同点

    • 开发环境:Unity使用C#作为脚本语言,而前端主要是JavaScript/TypeScript
    • 运行环境:Unity游戏运行在本地或游戏引擎中,而前端代码运行在浏览器中
    • 思维方式:前端更关注UI和交互,而游戏开发更关注物理、动画和游戏逻辑,会更复杂
  • Scene视图:用于编辑游戏场景

  • Game视图:用于预览游戏运行效果

  • Hierarchy面板:显示场景中的GameObject

  • Inspector面板:显示选中GameObject的属性和组件

  • Project面板:管理项目资源(如脚本、图片、音效)

  • Console面板:查看调试信息

当run之后,也可以在scene中编辑,会同步到game中提供查看效果,但是正在运行的项目,编辑后不会保存

要学会一些基本操作

  • 创建GameObject:在Hierarchy面板右键,选择Create Empty或2D/3D Object
  • 添加Component:选中GameObject,在Inspector面板点击Add Component
  • 制作预制体
  • 生成animation
  • 解构sprites
  • 以及各种物理属性
  • 运行游戏

Cursor

之后做了各种demo,有了一点基础后,通过Cursor尝试生成+辅助编译做了一个拔河小游戏,它会帮你自动创建文件生成脚本,并教会你如何在编辑器中去创建,放置你的prefab,sprites等

结果没两下就过了试用限制,又去找了下怎么破解无限邮箱,倒腾了一下也没成功

Trae

但这种模式很好,Trae还免费,通过上下文理解、描述、workplace的形式去分析,能以对话的形式辅助开发,是比单纯的chatgpt要更有效率,也更准确,这直接解决了我当下的问题

对于没有基础的人来说,可以快速搭建、编译,也可以让它自动帮你加入注释,也可以让它为你讲解为什么

对于有基础的人来说,提高了开发效率

界面:

我来展示一下Trae的界面以及帮我解决了什么问题:

这个界面大家应该很熟悉,跟vscode的是很相似的,保留了大家的习惯,是个很人性化的设计

我当时碰到了一个问题,网上也很难搜索到完整答案:

从搜索结果的标题来看,很难解决我的问题,问题是这样:导入fbx后,引入了anim,但是anim是模型中定义过transform,其中的scale,rotation会直接影响到父级的prefab,甚至再包一层emptyObject也没有用

可以看到右边内容区它帮我回答了如何解决(实际是解决了的)

变更代码:

trae会改变文件内容,但是每一处都不会保存,并进入merge的状态,可以选择接受则保存改动:

一键接受:

可以一键接受,也可以单独处理:

单独处理:

这里就介绍完了,我的目的主要是想通过案例的方式让大家了解trae,所以游戏过多细节就不在这里过多介绍了:

  1. 如何转unity
  2. 碰到过哪些问题
  3. 如何利用Trae去解决问题

希望能帮助到大家。

相关推荐
115465 小时前
Trae 更新后连接远程服务器失败的解决办法
trae
Anyin11 小时前
Spring AI Alibaba - DeepResearch 前端主体 UI 构建
前端·ai编程·trae
十盒半价1 天前
从空对象开始:手把手教你手写 new 函数,彻底理解 JS 原型机制
前端·javascript·trae
十盒半价1 天前
React 面试必问:JSX 中 map 的 key 为什么不能随便写?一文吃透原理与最佳实践
前端·react.js·trae
围巾哥萧尘2 天前
全球AI编程IDE对比分析(欢迎补充)🧣
trae
十盒半价3 天前
React 项目实战:从 0 到 1 构建高效 GitHub 仓库管理应用 —— 基于 React 全家桶的全栈开发指南
前端·react.js·trae
叫我詹躲躲3 天前
Vue3开发技巧:使用jsx快速开发组件(7k长文)
vue.js·trae
东哥说AI3 天前
守一晚上直播没抢到Trae SOLO邀请码,我反手用Builder模式一键开发出老师追着要的诗词抽背神器!
agent·ai编程·trae
围巾哥萧尘3 天前
「案例分享」Trae Solo 2.0 构建一个图片格式转换网页的案例🧣
trae
cpp加油站3 天前
AI编程杀疯了!字节、腾讯、阿里一周三连击,程序员该何去何从
ai编程·trae