从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去解决问题

希望能帮助到大家。

相关推荐
yidahis20 小时前
Flutter 运行新建项目也报错?
flutter·trae
zidea1 天前
我和我的 AI Agent(1) 异步优先、结构化输出以及如何处理依赖
人工智能·python·trae
智践行2 天前
Trae开发实战之转盘小程序
前端·trae
沉默王贰2 天前
一名Android开发者使用Cursor 打造了一款记账APP
ai编程·cursor·trae
fundroid4 天前
Trae 如何赋能 Android 开发
trae
coder_pig7 天前
用 Trae 三天开发效率APP-惜命
claude·cursor·trae
IT从业者张某某7 天前
AI编辑器-Trae 玩转AI 编程
人工智能·编辑器·trae
稀土君8 天前
🔥 倒计时4天|你的作品正在等待提交,别错过顶流数码全家桶!
前端·后端·trae
吃葡萄不吐葡糖皮8 天前
使用Trae从0到N实现一个小程序的前端开发-使用感受:像一个“眼神清澈的大学生”
ai编程·trae
Trae首席推荐官9 天前
重磅!Trae已内置Deepseek-V3-0324,编程体验大升级!
trae