小游戏开发学习(2) | 青训营笔记

看天的小猪
187 阅读6分钟

这是我参与「第四届青训营 」笔记创作活动的第26天。

笔记小结：  本节课ycaptain老师从小程序发展历程开始讲起，介绍了相关小程序业务价值以及技术解析。课程的最后，老师对本节课的内容进行总结与展望，并介绍相关拓展内容。现对照课程内容顺序将笔记补充如下。
拓展链接： 【前端专场 学习资料七】第四届字节跳动青训营 - 掘金 (juejin.cn)

05. PixiJS+Web开发

PixiJS简介

image.png

  • PixiJS是一个2D渲染引擎，能自动侦测并使用WebGL或Canvas。
  • PixiJS使用JavaScript或HTML5基础来显示媒体，创建动画或管理交互式图像，从而制作游戏或应用。
  • PixiJS适合制作游戏但并非是游戏引擎，其核心本质是尽可能快速有效地在屏幕上移动物体。
  • PixiJS作为JavaScript的2D渲染器，目标是提供快速轻量且兼容所有设备的2D库。提供无缝Canvas回退、支持主流浏览器，包括桌面和移动设备。

官网乍一看很像一个游戏引擎，但是上面也明确说了:“用最快、最灵活的2DWebGL渲染器创建精美的数字内容”(谷歌机翻)。
因此它本质上还是一个渲染引擎,而且自称做得最好。
它不仅仅能做游戏,还能使用这个技术去创建任何交互式内容,比如APP，还能够在它的基础上做自己的游戏引擎。(AVG.js 和 Phaser.js 的渲染引擎就是Pixi)

  • 前置技术栈
    • Web前端开发基础
    • 用过JSON文件，知道是用来干什么的
    • 了解过Canvas的绘图API

Web项目中加载一个游戏玩法

  1. 安装和引入

    • npm安装或者通过script标签引入<script src="pixi.min.js"></script>

  2. 创建Pixi应用和舞台(Stage) image.png

  3. 显示一张图片
    首先理解一个概念:Sprite(精灵) 学习CSS的时候可能有听过精灵图/雪碧图的概念，但是Pixi或者更多游戏引擎中Sprite的概念是一个用于承载图像的对象，你能够控制它的大小、位置等属性来产生交互、动画。
    创建和控制Sprite是学习Pixi很重要的部分，而创建一个Sprite需要了解图片怎么加载到Pixi中。
    这里就有一个概念: 纹理缓存(指可以被GPU处理的图像)。
    Pixi使用纹理缓存来存储和引用Sprite所需要的纹理。纹理的名称字符串就是图像的地址。
    现在有一个"images/cat.png",我们就可以使用PIXl.utils.TextureCache][ "images/cat.png"]来在纹理缓存找到它。
    使用前当然要先把它转化成纹理存储在纹理缓存中，这时候可以使用PIXlloader加载进来
    image.png 现在已经创建了一个Sprite了,下一步就是显示它。
    我们前面说到过一个舞台的概念，记住，舞台是用来包裹你所有精灵的主要容器。(重点:你不应该看见任何没有被加入舞台的精灵)
    我们要显示图像就得把它添加到舞中。
    image.png

  4. 让图片动起来
    前面我们说到了可以设置Sprite的位置和大小
    那如果我希望每帧移动一个像素呢?这时候就需要用到游戏循环。(任何游戏循环的代码都会每帧调用一次) image.png

  5. 然后加“一点点"细节 image.png pixijs.io/examples/#/…

06.Cocos Creator编辑器开发

Cocos Creator介绍

image.png

Cocos Creator 是一个完整的游戏开发解决方案，包含了 cocos2d-x 引擎的 JavaScript 实现，以及快速开发游戏所需求的各种图形界面东西。Cocos Creator 的编辑器完全为引擎定制打造，包含从规划、开发、预览、调试到发布的整个工作流所需的全功能，该编辑器供给面向规划和开发的两种工作流，供给简略顺畅的分工合作方法。Cocos Creator 现在支持发布游戏到 Web、Android 和 iOS，真正实现一次开发，全渠道工作。Cocos Creator 是以内容创作为中心的游戏开发东西，在 Cocos2d-x 基础上实现了完全脚本化、组件化和数据驱动等特征。

image.png

编辑器开发集成的能力

Cocos的工作流

image.png

  1. 创建项目 image.png
  2. 搭建场景

  • Cocos的工作流——数据驱动和场景为核心、组件式开发为核心 image.png

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

  1. 导入资源+显示资源
    从操作系统中的其他窗口拖拽文件到 Cocos Creator 窗口中的资源管理器面板上，就能够从外部导入资源。该操作会自动复制资源文件到项目资源文件夹下，并完成导入操作。
    然后把图片拖到层级管理器即可以生成一个cc.Sprite。 image.png

  2. 脚本挂载

  • 然后在Cocos Creator中对应的节点把脚本挂载上去。 image.png
  1. 运行调试 image.png

游戏的上线

构建游戏,可以选择多平台，产物即对应生成,比如Web Mobile
产物可以直接部署在对应的平台，比如web产物部署到服务器、小游戏产物部署到开发者平台。 image.png

07. 小游戏"小"在哪里

游戏发布平台的差异性

f6cb5f9b-9e97-4cb0-bed2-b610e81c3291.png

游戏开发的重要理念

image.png 激发创造： 把游戏开发过程当作一个游戏，在规则的约束下通过创意和技术力挑战一个高质量游戏开发。

玩法模块独立，易移植。 数据逻辑分开。 程序实现以简单为好。先分析透彻再进行实现。 游戏世界打碎成最基本元素，便于灵活组合策划的设计，这个理念可以应用于各个玩法系统 回调模块内功能，模块间隔离没有耦合。 （消息，事件界面，键鼠输入）
输入接口----> 处理接口（处理逻辑）----->输出接口（数据维护，消息，界面，事件）
数据管理模块和逻辑模块分开并做到服务器客户端代码共用。这样的结构源码管理中也易于合并，减少冲突，降低耦合，减少工作量，减少错误。利于分布式并行开发。 安全性，底层稳定性，逻辑稳定，逻辑bug的控制及有效减少。合理易维护扩展的玩法开发结构。

avatar
文章
阅读
粉丝