【第二届字节青训营 - 寒假前端场】「小游戏开发」の学习笔记
「小游戏开发」
Web游戏引擎-CreateJS&Phaser
CreateJS
它是多个库的集合,EASELJS(控制素材展示与组合)、TWEENJS(控制素材缓动动画)SOUNDJS(控制声音)、PRELOADJS(控制加载),通过预加载后的素材展示、动画、声音构成游戏。
Phaser
Phaser 游戏引擎,除了CreateJS为基础的展示、声音、动画、加载系统,还设计了摄像机、物理引擎、内置浏览器、插件系统等高级功能。
功能引擎
大型游戏引擎往往是由小的功能引擎组装成的,一个大型游戏引擎往往包含渲染引擎、物理引擎、U系统、声音系统、动画系统、粒子系统、骨骼系统、网络系统等组合而成。其中最重要的便是渲染引擎和物理引擎。
功能引擎是专注某个方向能力的引擎,其特点是体积小、功能完善。特别是Pixi.js和Three.js这两个渲染引擎,通常被误以为是一个完整的游戏引擎,但它们是专注渲染能力的渲染引擎。
Cocos引擎架构:
Web游戏引擎的渲染原理
1.创建一个Renderer渲染器,获取它的view(一个canvas对象),添加到Dom Tree中。(或者指定Dom Tree中已经存在的canvas对象作为view)
2.在MainLoop(主循环)中调用Renderer.render()并传入一个DisplayObject作为根节点开发渲染。
3.从场景树的根节点开始,以zlndex为序从小到大进行深度优先遍历,对每个节点进行渲染操作,由后往前把整个场景绘制一次。(CanvasRenderer)
4.WebGL的render方法执行过程
游戏前端开发入门技能树
浏览器渲染模式:
保留模式,
快速模式。
PixiJS+Web开发
PixiJS简介
PixiJS本质上还是一个渲染引擎。不仅仅能做游戏,还能使用这个技术去创建任何交互式内容,比如APP,还能够在它的基础上做自己的游戏引擎。
前置技术栈
- Web前端开发基础
- 用过JSON文件,知道是用来干什么的
- 了解过Canvas的绘图API子
Web项目中加载一个游戏玩法
1.安装和引入
npm安装或者通过script标签引入
<script src="pixi.min.js"></script>
2.创建Pixi应用和舞台(Stage)
3.显示一张图片
Sprite(精灵)学习CSS的时候可能有听过精灵图/雪碧图的概念,但是Pixi或者更多游戏引擎中Sprite的概念是一个用于承载图像的对象,你能够控制它的大小、位置等属性来产生交互、动画。
纹理缓存(指可以被GPU处理的图像):Pixi使用纹理缓存来存储和引用Sprite所需要的纹理。纹理的名称字符串就是图像的地址。使用前当然要先把它转化成纹理存储在纹理缓存中,这时候可以使用PIXI.loader加载进来。
创建了一个Sprite,下一步就是显示它。舞台是用来包裹你所有精灵的主要容器。(重点:你不应该看见任何没有被加入舞台的精灵)要显示图像就得把它添加到舞台中。
4.让图片动起来
前面我们说到了可以设置Sprite的位置和大小。需要用到游戏循环将每帧移动一个像素。(任何游戏循环的代码都会每帧调用一次)
Cocos Creator编辑器开发
Cocos Creator是一个完整的游戏开发解决方案,包含了轻量高效的跨平台游戏引擎,以及能让你更快速开发游戏所需要的各种图形界面工具。
Cocos的工作流
节点(cc.Node)是承载组件的实体,我们通过将具有各种功能的组件(比如Sprite、Spine、Label)挂载到节点上,来让节点具有各式各样的表现和功能。节点构成节点树,节点树影响真实的渲染层级。
小游戏“小”在哪里
游戏发布平台的差异性
激发创造
把游戏开发过程当做一个游戏,在规则(自己的技术栈、限定主题、限定资源)的约束下通过创意和技术力挑战一个高质量的游戏吧!
声明:
以上内容大部分来自字节ycaptain老师课堂讲解
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)