【第二届字节青训营 - 寒假前端场】「小游戏开发」の学习笔记

「小游戏开发」

Web游戏引擎-CreateJS&Phaser

CreateJS

它是多个库的集合,EASELJS(控制素材展示与组合)、TWEENJS(控制素材缓动动画)SOUNDJS(控制声音)、PRELOADJS(控制加载),通过预加载后的素材展示、动画、声音构成游戏。

Phaser

Phaser 游戏引擎,除了CreateJS为基础的展示、声音、动画、加载系统,还设计了摄像机、物理引擎、内置浏览器、插件系统等高级功能。

功能引擎

大型游戏引擎往往是由小的功能引擎组装成的,一个大型游戏引擎往往包含渲染引擎、物理引擎、U系统、声音系统、动画系统、粒子系统、骨骼系统、网络系统等组合而成。其中最重要的便是渲染引擎和物理引擎。
功能引擎是专注某个方向能力的引擎,其特点是体积小、功能完善。特别是Pixi.js和Three.js这两个渲染引擎,通常被误以为是一个完整的游戏引擎,但它们是专注渲染能力的渲染引擎。

png

Cocos引擎架构:
png

Web游戏引擎的渲染原理

1.创建一个Renderer渲染器,获取它的view(一个canvas对象),添加到Dom Tree中。(或者指定Dom Tree中已经存在的canvas对象作为view)

2.在MainLoop(主循环)中调用Renderer.render()并传入一个DisplayObject作为根节点开发渲染。

3.从场景树的根节点开始,以zlndex为序从小到大进行深度优先遍历,对每个节点进行渲染操作,由后往前把整个场景绘制一次。(CanvasRenderer)

4.WebGL的render方法执行过程

游戏前端开发入门技能树

png

浏览器渲染模式:
保留模式,
快速模式。

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的工作流
png

节点(cc.Node)是承载组件的实体,我们通过将具有各种功能的组件(比如Sprite、Spine、Label)挂载到节点上,来让节点具有各式各样的表现和功能。节点构成节点树,节点树影响真实的渲染层级。

png

小游戏“小”在哪里

游戏发布平台的差异性
png

激发创造

把游戏开发过程当做一个游戏,在规则(自己的技术栈、限定主题、限定资源)的约束下通过创意和技术力挑战一个高质量的游戏吧!


声明:
以上内容大部分来自字节ycaptain老师课堂讲解

posted @   进击の小白们  阅读(164)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
xxx2744天5小时50分25秒
点击右上角即可分享
微信分享提示