# Phaser3.rpg

**Repository Path**: mu1866/phaser3.rpg

## Basic Information

- **Project Name**: Phaser3.rpg
- **Description**: 基于Phaser3，从 0 - 1，把“简单”，“粗暴”，“纯粹”，“干出来”四大理念打造个人独立H5移动端RPG游戏引擎插件并向往开放世界为核心。内置客户端与服务端交互用于Demo框架，几十种已封RPG装游戏中常用的功能。代码奔放在外的“裸漏感”，直接“拔插”式集成到你的任何H5项目中，随时随地抒写“你的故事”。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/mu1866/projects
- **GVP Project**: No

## Statistics

- **Stars**: 16
- **Forks**: 5
- **Created**: 2023-05-18
- **Last Updated**: 2025-09-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 游戏, JavaScript

## README

# Hello @phaser3.rpg

## 介绍

基于[Phaser3](https://phaser.io/)，从 0 - 1，把“简单”，“粗暴”，“纯粹”，“干出来”四大理念打造个人独立H5移动端RPG游戏引擎插件并向往开放世界为核心。内置客户端与服务端交互用于Demo框架，几十种已封RPG装游戏中常用的功能。代码奔放在外的“裸漏感”，直接“拔插”式集成到你的任何H5项目中，随时随地抒写“你的故事”。

## Phaser3?

为什么要用Phaser3这个游戏引擎？所有结构API语义化一目了然，就像一台肌肉跑车，所有的代码就像“裸漏在外的肌肉”。

之前自己鼓捣过cocos和白鹭的游戏引擎，真的非常好用，自带编辑器团队协作啥的，可能对于我一个人搞独立游戏来说有上手成本。所以我还是选择了这个Phaser3引擎，一般情况下无需考虑项目环境，直接集成，而且官网示例非常全面。

网上关于Phaser3引擎相关的比较少，也比较碎片，大部分还基于Phaser2，由于Phaser3改动较大，文档直接字典数据库形式，API太碎，所以就打算自己没事搞一搞API之间“融合调剂”，看看能搞出啥“配方”。

## Issues

有任何的建议，请您 **Issues** 或 mail: 317782199@qq.com

## 代码讲解

项目中游戏核心功能已封装，并附代码讲解其“简单”，“粗暴”的实践

项目中用到了一些插件及工具并附带讲解（仅供大家学习交流讨论，一定要支持正版）

项目中素材来自[OpenGameArt](https://opengameart.org/) **CC0**

``` bash
cd @localhost.phaser3
cat README.md
```

-  [代码讲解](https://gitee.com/mu1866/phaser3.rpg/tree/master/@phaser3.rpg/@localhost.phaser3)

## 项目中用到的游戏核心插件框架及工具素材（仅供大家学习交流讨论，一定要支持正版）

-  美术素材资源来自网络，仅供大家学习交流讨论使用，严禁商业用途！
-  [Expressjs](https://www.expressjs.com.cn/)
-  [dust-phaser-plugin](https://www.npmjs.com/package/dust-phaser-plugin)
-  [phaser-plugin-follow](https://www.npmjs.com/package/phaser-plugin-follow)
-  [phaser3-plugin-easyprogressbar](https://www.npmjs.com/package/phaser3-plugin-easyprogressbar)
-  [phaser3-vjoy-plugin](https://www.npmjs.com/package/phaser3-vjoy-plugin)
-  [typed](https://github.com/mattboldt/typed.js)
-  [OpenGameArt](https://opengameart.org/) **CC0**
-  [Spine](http://zh.esotericsoftware.com/)
-  [TexturePacker](https://www.codeandweb.com/texturepacker)
-  [iconfont](hhttps://www.iconfont.cn/)

## 游戏运行视频

-  [【视频一】游戏运行视频传送门](https://www.bilibili.com/video/BV1bo4y1F7b7/?vd_source=4935fce829bc1535d641a4e735b2349f)
-  [【视频二】游戏运行视频传送门](https://www.bilibili.com/video/BV1Cs4y1q7YM/?vd_source=4935fce829bc1535d641a4e735b2349f)
-  [【视频三】游戏运行视频传送门](https://www.bilibili.com/video/BV1YM4y1i7jH/?vd_source=4935fce829bc1535d641a4e735b2349f)

## Build Setup

``` bash
# install Demo
cd @localhost.express
npm run install:phaser.demo

# build Demo
npm run build:phaser.demo

# open web
http://localhost:3001/indexPhaserDemo
```

## “拔插式”

``` bash
# copy your project
cd @localhost.phaser3
copy main.js "your project"
copy utils/* "your project"
copy modules/* "your project"

# check your project phaser@3.55.2
"check your project package.json phaser version!"
npm install phaser@3.55.2
"otherwise error!"

# add spine your index.html
<script type="text/javascript" src="modules/spine/SpinePluginDebug.js"></script>
```

## 架构

### TexturePacker

1. TexturePacker 是一款快速图片打包工具， 把多张帧动画图片打包成一体图片并生成json文件在程序中通过json文件定位加载播放帧动画。TexturePacker 是收费的，倒是不贵。TexturePacker 对美术要求高。（图片来自网络）

<div align=center><img width="600" height="600" src="./@phaser3.rpg/@localhost.express/public/images/phaser/demo/TexturePacker.png"/></div>

### Spine

1. 如果你有条件，建议你使用 Spine 生成骨骼动画，减少运行消耗。TexturePacker 生成的图片和json文件对程序消耗是有一定影响的。Spine 对美术方面比 TexturePacker 要求低一点，很多程序员都在用，如人物切割成胳膊腿身子头放到 Spine 里生成骨骼像木偶一样生成动画。Spine 是收费的，贵，那是真贵啊。Spine 对各种物体的运动方式要求高。（图片来自网络）

<div align=center><img width="600" height="600" src="./@phaser3.rpg/@localhost.express/public/images/phaser/demo/spine.png"/></div>

### Photoshop

1. 这个就不说了。
2. 比较关注的就是 PS 的 法线贴图 功能，此功能在 滤镜-3D-生成法线图。后续计划中会加入 昼夜系统，底层中的元素图片都会进行 法线 处理生成新的法线贴图。（图片来自网络）

<div align=center><img width="600" height="600" src="./@phaser3.rpg/@localhost.express/public/images/phaser/demo/ps.png"/></div>

### 游戏版图

<div align=center><img width="600" height="600" src="./@phaser3.rpg/@localhost.express/public/images/phaser/demo/world.png"/></div>

### 打地基

-  层级
1. 通过**游戏版图**可以看到图中有 View World 两个层级。
2. **View:** **View** 层可以理解为摄像机层，player始终能看到的可视范围，把浏览器页面可视区域用作摄像机层，先把它称为浮层。
3. **World:** **World** 层可以理解为整个游戏世界或整个游戏世界中某个游戏区域player可活动范围层，把 Canvas 用作游戏世界层，先把它称为底层。

-  元素
1. 通过**游戏版图**可以看到图中各自有很多元素，这些元素就在各自的层级中加载出来并通过各自的层级坐标系中摆放。

-  关系
1. 底层 --loading--> 元素 --loading--> 浮层 --loading--> 元素。

-  摄像机跟随
1. RPG游戏中必不可少的功能，摄像机（浮层）会一直跟随player操作的目标，如电影摄像机跟随主角呈现给player可视范围。

-  层级坐标系
1. 各自层级有各自的坐标系，底层的坐标系通过整个Canvas的宽高进行坐标系定位，浮层的坐标系通过整个浏览器页面可视区域的宽高进行坐标系定位。浮层作为可视区域始终呈现，放置的一般都是与player交互的功能。底层作为游戏世界，一般都是你眼中世界的样子。

-  调整摄像机“开拍”
1. 前期布置好之后就开始调整摄像机了，就像摄像机开拍前需要调整下光圈之类的，摄像机（浮层）说白了就是浏览器页面可视范围与游戏世界（Canvas）保持贴合，避免出现可视范围超出游戏世界范围干出边界了。
``` bash
// 获取游戏世界宽高 * 2 - 浏览器可视页面宽高
// setOff 进行坐标微调，保持目标剧中
import UtilsCameraFollowingTarget
UtilsCoordinateConter.coordinatrConter('worldFull').WFW * 2 - options.removeBlackEdge.w;
UtilsCoordinateConter.coordinatrConter('worldFull').WFH * 2 - options.removeBlackEdge.h;
```

-  DOM（可选）
1. Phaser 可以与DOM元素进行交互，有比较难实现的，不太好实现的，想快速实现的都可以与DOM元素交互，一般登入页面，聊天框，这种直接就用input、div标签加CSS往上干。简单快速。

-  适配限制
1. 项目是在web移动端下运行，那么适配限制必不可少。需要做好整体游戏世界（Canvas）的适配大小限制，移动端屏幕大小千奇百怪，浏览器可视页面（View）的适配大小限制。

-  套壳（可选）
1. 这个就看你个人了，如果你想把它应用在 Android、IOS、桌面就套个壳，[cordova](http://zh.esotericsoftware.com/)、[NW.JS](https://nwjs.io/).....

-  “开拍”
1. 地基打好了之后就可以“开拍了”。

### 代码讲解

-  [代码讲解](https://gitee.com/mu1866/phaser3.rpg/tree/master/@phaser3.rpg/@localhost.phaser3)

## 后续计划

- 功能层
- [ ] 增加多人在线
- [ ] 增加魔法攻击
- [ ] 增加攻击锁定
- [x] **增加昼夜系统（白天，黄昏，夜间）**
- [x] **增加武器附魔效果（圆周运动，点光源）**
- [ ] 增加player-head功能区
- 优化层
- [ ] 优化帧动画回调多次渲染
- [ ] 优化开屏
- [ ] 优化聊天队列
- [ ] 优化冗余代码
- 应用层
- [ ] Android
- [ ] IOS
- [ ] PC
- 数据层
- [ ] ...