关于我:我已经编程了 3 年多,我目前正在寻找一份网页开发/游戏设计方面的工作。

关于主题:我看到很多 Phaser 3 开发者尝试创建动态地图,可以保存和导出,但他们找不到解决方案,所以我决定尝试解决这个问题。

关于使用的工具:SQL (Postgres)、用于后端 API 的 ruby on rails、用于基本安全性的 Phaser3 和 Reg-ex。

关于关卡:本教程是为初学者准备的,所以每个人都可以理解!但请记住,在本教程中,我没有展示保护用户路由或使用和授权方法的方法。

使用示例:LastResort.pw

保存到当前用户的最终结果图

我们的第一步是创建一个 Rails 应用程序并设置一个关系数据库:

我在本教程中使用 ruby on rails,但此方法可以在任何其他 Web 框架上使用。

Rails 部分从这里开始,使用 webpacker 和 Postgres DB 设置新的 rails 应用程序

使用 webpacker 和 Postgres DB 创建一个新的 rails 应用程序

rails new $yourappname --webpack --database=postgresql

[](https://res.cloudinary.com/practicaldev/image/fetch/s--KQk93vvt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur. com/ISU8NHE.png)

在这个数据库中,每个用户都有 base_commands 列,该列将是一个命令数组,我们稍后会触及它。

结构表包含两列,placed 和 amount 都是整数,表示拥有的结构的数量和放置在 tilemap 上的结构的数量。

User_structures 是一个包含用户结构的连接表。

我们将从生成所有模型开始:

结构、用户和用户_结构

rails g model structure amount:integer placed:integer

rails g model user

rails g model user_structure structure:references user:references

内部用户迁移文件

t.string :base_commands, array:true, default: []

然后运行以下命令

rails db:create

rails db:migrate

现在,在我们完成设置后,我们的数据库将开始处理模型

在用户和结构模型中,我们添加has_many :user_structure

在 UserStructure 模型中,我们添加以下行:

belongs_to :structure

belongs_to :user

我们现在的下一步是创建 Get 和 Patch 路由,以便我们可以访问我们的 base_commands 列。

rails g controller game

然后在 routes.rb (在 config 文件夹内)我们添加以下路由

get 'base/:id', to: "game#showbase"

patch 'base/:id', to: "game#updatebase"

在我们的游戏控制器中,我们添加了基本检查,并使用包含 user base_commands 的 JSON 响应。

见代码github

创建完所有 API 端点后,我们终于可以开始在 Phaser javascript 文件中工作了!

我们将从使用基本的 Phaser3 模板开始:

const config = { type: Phaser.WEBGL, width: 375, height: 812, scale: { mode: Phaser.Scale.RESIZE, }, // parent : 'phaser-app', scene: { preload: preload, create: create, update: update, } }

完成我们的基本模板后,我们需要将我们的瓦片集加载到 Phaser3 画布上。

我们将创建预加载函数:

function preload() { this.load.image('tiles', 'url/tileimg.png'); this.load.tilemapTiledJSON('tilemap', 'url/tilemapjson.json');

瓷砖是图像的关键,瓷砖地图是json的关键

现在将转到创建和更新功能:

function create() { const map = this.make.tilemap({ key: 'tilemap' }); const tiles = map.addTilesetImage('16x16s', 'tiles'); const layer = map.createStaticLayer(1, tiles); layer2 = map.createDynamicLayer(2, tiles);

function update() {}

好的 !现在应该让我们的地图在画布上运行

[](https://res.cloudinary.com/practicaldev/image/fetch/s--mXNclH4C--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur. com/yj936sf.png)

我们的下一步是创建我们的 Fetch 调用,我们将创建两个函数,首先是 loadBase,它将为我们提供当前用户绘制命令,

其次,updateBase 会将我们的绘图命令添加到用户数据库中。

您还可以在github中找到改进的功能版本

function loadBase() { fetch('../base/1') // will get first user base .then((response) => { return response.json(); }) .then((commands) => { commands.msg.forEach((command) =>{ // iterate over commands eval(command); }) // execute each draw command }); }

function updateBase(data) { // Default options are marked with * fetch('../base', { method: 'PATCH', // *GET, POST, PUT, DELETE, etc. mode: 'cors', // no-cors, *cors, same-origin cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached credentials: 'same-origin', // include, *same-origin, omit headers: { 'Content-Type': 'application/json' // 'Content-Type': 'application/x-www-form-urlencoded', }, redirect: 'follow', // manual, *follow, error referrerPolicy: 'no-referrer', // no-referrer, *client body: JSON.stringify(data) // body data type must match "Content-Type" header }).then((response) => { return response.json().then((data) => { if(data['response'] == '500') location.reload(); // reload page if failed placing }) // parses JSON response into native JavaScript objects }); }

你可以看到完整的例子游戏

或者在这里 Lastresort.pw