小游戏开发 | 青训营笔记

146 阅读2分钟

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

重点

  • 游戏发展史
  • 前端游戏开发
  • 游戏引擎
  • PixiJS+web开发
  • Cocos creator编辑器开发

小游戏开发

游戏发展史

广义上的游戏

image.png

  • 1970:街机游戏 家用电影 雅达利游戏
  • 1980:街机黄金时代,早期网络游戏 LCD掌机游戏,FC游戏
  • 1990:街机衰退 掌机降临 3D出现,3D游戏
  • 2000:网络游戏崛起 游戏控制方式变革 魔兽世界
  • 2010:高分辨率 移动端 小游戏,移动端游戏 王者荣耀
  • 2020:次世代游戏

狭义上游戏

通过游戏引擎制作的电子游戏

游戏分类:根据玩法大类分,小类细化

image.png

前端场景下的游戏开发

开发链路和角色

image.png 链路

image.png

为什么要用游戏引擎

image.png

image.png

image.png

游戏引擎

常见游戏引擎

image.png

  • The NVL Maker-文字冒险游戏制作器:No-code形式的开发、只需要写文字脚本加上一定的配置,缺乏迭代和运营
  • RPG Maker:low code搭建关卡类型游戏

WEb游戏引擎

image.png

web游戏引擎 Cocos

  • 平台支持能力好
  • 完善的游戏功能支持
  • 生态较好
  • 3d能力仍在建设
  • 版本迭代过快

web游戏引擎Laya

  • 3d能力成熟
  • 支持JS TS AS
  • 引擎体积小
  • 界面能力不友好
  • 生态差

web游戏引擎Egret

  • 国产
  • 工具链完善
  • 第三方库支持好
  • 企业定制能力强
  • 更新迭代遭瓶颈
  • 生态差

web游戏引擎CreateJS & Phaser

image.png

功能引擎

image.png

游戏引擎的技术架构

以cocos为例

image.png

web游戏引擎渲染原理

image.png

image.png

image.png

游戏开发技能树

image.png

PixiJS + Web开发

image.png

web项目中加载游戏玩法

  • 1.安装和引入:npm安装 或者 通过script标签引入
  • 2.创建pixi应用和舞台

image.png

  • 3.显示一张图片

image.png

image.png 显示sprite

image.png

    1. 让图片动起来

设置sprite位置 大小

image.png

每帧移动一个像素

image.png

其他细节 pixijs.io/examples/#/…

Cocos Creator编辑器开发

介绍

image.png

工作流程图

image.png

详细步骤

image.png

image.png

image.png

image.png

image.png

image.png

游戏开发&发布

游戏发布平台的差异性 image.png 游戏开发重要理念

image.png

总结

讲了游戏的开发 游戏引擎 和使用例子