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

希望能帮助到大家。

相关推荐
momo8869 小时前
Trae 初体验:零代码也能从 0 到 1 开发应用
trae
闲宇非鱼5 天前
关于AI新玩具Trae的一点使用感受
人工智能·trae
代码小学僧18 天前
解锁手机新玩法:用Trae实现手机当电脑触控板!
前端·node.js·trae
九酒19 天前
从UI稿到代码优化,看Trae AI 编辑器如何帮助开发者提效
前端·trae
后端研发Marion20 天前
【AI编辑器】字节跳动推出AI IDE——Trae,专为中文开发者深度定制
人工智能·ai编程·ai程序员·trae·ai编辑器
Nickyang20 天前
如何用Trae打造一键登录神器?Chrome插件开发实战
前端·javascript·trae
格砸20 天前
Trae使用体验,未来已至?
人工智能·openai·trae
程序员海军20 天前
字节跳动推出AI编程神器Trae,比Cursor更懂中文开发者!
前端·openai·trae
uhakadotcom22 天前
兄弟们炸裂了!字节又又又出了一款*免费*AI辅助编程工具
前端·javascript·trae