Phaser3 学习笔记

J.sky
Phaser
2025/3/21

起因是一直在关注「極客死亡計劃」最近写的几篇博客,前几天他终于发布他的游戏大作为战斗献上心脏!,看的心痒痒,又想写游戏了,为什么要说有又?因为以前懵懵的编写过一些小游戏,但是大多都是按着实际的案例照抄,主要是学习游戏的编写,具体自己完整的构思和制作并没有体验过,所以就有了这篇Phaser3的学习笔记。

为什么是Phaser3?

很早以前,我曾使用Java编写过一个弹球小游戏,甚至是复刻了一个简单的俄罗斯方块,后来我又转到了python,自然就会用到pygame,但是pygame的使用并没有想象中那么顺利,曾经还想再pygame的基础上封装一个游戏引擎,但是后来还是放弃了。昨天把,问了Gemini,推荐一些JavaScript的2D游戏引擎,Gemini推荐了Phaser3,我去了官方网站看了下他的API,发现这不就是我当初要封装pygame的引擎吗?有些API看到后竟然有一种似曾相识的感觉,所以我就选择了Phaser3。

Phaser3学习资源

Phaser3 官方网站

官方网站上的学习资料非常的充足,可以满足任何层次的学习。

Phaser3基础概念

这些概念是Gemini总结的:

在开始编写代码之前,了解 Phaser 的一些核心概念非常重要。

  • Phaser 框架概述: Phaser 是一个开源的 HTML5 游戏框架,它提供了丰富的功能来帮助您创建基于浏览器的 2D 游戏。
  • WebGL 和 Canvas 渲染: Phaser 默认使用 WebGL 进行渲染,如果浏览器不支持 WebGL,它会自动回退到 Canvas 渲染。WebGL 利用 GPU 加速,通常能提供更好的性能。
  • 场景(Scene): 场景是游戏的基本构建块。每个场景代表游戏中的一个独立部分,例如主菜单、游戏关卡、结束界面等。您可以在不同的场景之间切换。
  • 游戏对象(Game Objects): 游戏对象是您在游戏中看到和操作的元素,例如图片、精灵、文本、形状等。
  • 精灵(Sprite): 精灵是一种特殊的游戏对象,通常用于表示动画角色或移动的物体。它可以包含纹理和动画。
  • 游戏循环(Game Loop): 游戏循环是游戏的核心,它不断地执行一系列操作来更新游戏的状态和渲染画面。Phaser 的游戏循环包含三个主要的函数:
  • preload(): 在场景启动之前调用,用于加载游戏所需的资源(图片、音频等)。
  • create(): 在 preload() 完成后调用一次,用于创建游戏对象、设置初始状态等。
  • update(): 在游戏循环中每帧都会被调用,用于更新游戏逻辑、处理用户输入、移动游戏对象等。
  • config 游戏配置对象: 在创建 Phaser 游戏实例时,您需要提供一个配置对象来定义游戏的属性,例如宽度、高度、渲染模式、场景等。

这些内容可以指导你如何开始学习 Phaser 3。

后续会继续在这个博文中继续补充记录一些重要的学习笔记。

当然,建议从官方的第一个教程开始学习:

Making your first Phaser 3 game

在游戏开发中,常见的图集(Atlas)类型主要有以下几种:

  1. 纹理图集(Texture Atlas)

    • 将多个独立的图片打包成一张大图
    • 适用于角色、UI、道具等独立精灵
    • 在 Phaser 中使用 this.load.atlas() 加载
  2. 瓦片图集(Tileset Atlas)

    • 用于构建游戏地图的重复性图块集合
    • 通常配合瓦片地图编辑器(如 Tiled)使用
    • 在 Phaser 中使用 this.load.tilemapTiledJSON() 加载
  3. 精灵表(Sprite Sheet)

    • 将动画帧按固定大小排列的图集
    • 每帧大小相同,规则排列
    • 在 Phaser 中使用 this.load.spritesheet() 加载
  4. 字体图集(Font Atlas/Bitmap Font)

    • 包含字体字形的特殊图集
    • 用于高性能文本渲染
    • 在 Phaser 中使用 this.load.bitmapFont() 加载
  5. 粒子图集(Particle Atlas)

    • 专门用于粒子系统的图集
    • 包含粒子效果所需的各种状态图像
    • 可以使用普通的 atlas 加载方式
  6. 九宫格图集(Nine-Slice Atlas)

    • 用于可伸缩UI元素的特殊图集
    • 将图像分为9个区域,支持不同方向的拉伸
    • 在很多UI系统中都有支持

未完待续。

本文为原创文章,遵循: CC BY-NC-SA 4.0版权协议,转载请附上原文出处链接和本声明。