`

关于二次开发 BrowserQuest 中,对于地图修改的部分记录

 
阅读更多
关于二次开发 BrowserQuest 中,对于地图修改的部分记录

在这里要感谢的是网友:神灯,land007

步骤:
1 通过地图编辑器tiled 修改 BrowserQuest-master\tools\maps\tmx 文件夹下的map.tmx

2 通过 地图编辑器 导出 map.json

3 通过命令nodejs脚本把map.json生成系统能够适别的json数据。
   命令工具脚本:map.bat,exportmap.js 和 file.js (注:网友”神灯“提供)

1) map.bat:

@color 3F
@echo.
@echo 操作完成自动退出程序!
@echo.
node exportmap.js map.json direct
@echo.
@echo 操作完成按任意键退出程序!
@echo.
@pause >nul
exit

2) exportmap.js

#!/usr/bin/env node

var util = require('util'),
    Log = require('log'),
    path = require("path"),
    fs = require("fs"),
    file = require("../../shared/js/file"),
    processMap = require('./processmap'),
    log = new Log(Log.DEBUG);

// 此处用了nodejs的process进程处理,读取参数,即     map.bat 中  node exportmap.js map.json direct
// node 为参数0 process.argv[0] exportmap.js 为参数1 map.json 为参数3  依次类推...
var source = process.argv[2],
    mode = process.argv[3],
    destination = process.argv[4];

// source 代表的是map.json

if(!mode){
mode = "direct";
}

if(!source || (mode!="direct" && mode!="root" && mode!="both" && mode!="client" && mode!="server") || (mode!="root" && mode!="direct" && !destination)) {
    util.puts("Usage : ./exportmap.js tiled_json_file [mode] [destination]");
    util.puts("Optional parameters : mode & destination. Values:");
    util.puts(" - \"direct\" (default) → updates current server and map files (WARNING: SHOULD ONLY BE CALLED FROM BrowserQuest/tools/maps !!!);");
    util.puts(" - \"client destination_file\" → will generate destination_file.js and destination_file.json for client side map;");
    util.puts(" - \"server destination_file.json\" → will generate destination_file.json for server side map;");
    util.puts(" - \"both destination_directory\" → will generate world_client.js, world_client.json and world_server.json in directory.");
    process.exit(0);
}

function main() {
    getTiledJSONmap(source, callback_function);
}

function callback_function(json) {
switch(mode){
  case "client":
   processClient(json, destination);
   break;

  case "server":
   processServer(json, destination);
   break;

  case "direct":
   processClient(json, "../../client/maps/world_client");
   processServer(json, "../../server/maps/world_server.json");
   break;
  
  case "both":
   var directory=destination.replace(/\/+$/,'');//strip last path slashes
   processClient(json, directory+"/world_client");
   processServer(json, directory+"/world_server.json");
   break;

        case "root":
            processClient(json, "client/maps/world_client");
            processServer(json, "server/maps/world_server.json");
            break;

  default:
   util.puts("Unrecognized mode, how on earth did you manage that ?");
}
}

function processClient(json, dest){
var jsonMap = JSON.stringify(processMap(json, {mode:"client"})); // Save the processed map object as JSON data
// map in a .json file for ajax loading
fs.writeFile(dest+".json", jsonMap, function(err, file) {
  if(err){
   log.error(JSON.stringify(err));
  }
  else{
   log.info("Finished processing map file: "+ dest + ".json was saved.");
  }
});

// map in a .js file for web worker loading
jsonMap = "var mapData = "+jsonMap;
fs.writeFile(dest+".js", jsonMap, function(err, file) {
  if(err){
   log.error(JSON.stringify(err));
  }
  else{
   log.info("Finished processing map file: "+ dest + ".js was saved.");
  }
});
}

function processServer(json, dest){
var jsonMap = JSON.stringify(processMap(json, {mode:"server"})); // Save the processed map object as JSON data
fs.writeFile(dest, jsonMap, function(err, file) {
  if(err){
   log.error(JSON.stringify(err));
  }
  else{
   log.info("Finished processing map file: "+ dest + " was saved.");
  }
});
}

function getTiledJSONmap(filename, callback) {
    var self = this;
    // 此处调用的file.js中的exists函数
    file.exists(filename, function(exists) {
        if(!exists) { 
            log.error(filename + " doesn't exist.")
            return;
        }
   
        fs.readFile(filename, function(err, file) {
            callback(JSON.parse(file.toString()));
        });
    });
}

main();


3) file.js

var exists, existsSync;
(function () {
    var semver = require('semver');
    var module = (semver.satisfies(process.version, '>=0.7.1') ? require('fs') : require('path'));

    exists = module.exists;
    existsSync = module.existsSync;
})();

if (!(typeof exports === 'undefined')) {
    module.exports.exists = exists;
    module.exports.existsSync = existsSync;
}

// 其中semver为node的一个模块,可以通过 npm install semver 安装模块 (前提是先弄清楚,安装node)


4 修改processmap.js
在官方提供的源码直接运行脚本,并不能完成功能,因为之前看过官方wiki,知道地图这一块有一个
https://github.com/browserquest/BrowserQuest/blob/master/tools/maps/processmap.js
把这个processmap.js 替换源码 BrowserQuest-master\tools\maps 下的processmap.js即可。

最后运行map.bat批处理文件,即可在对应目录生成json数据。。
然后你重启node server/js/main.js   重启服务器tomcat或apache,访问,可以看到,此时的地图为你修改后的地图。地图编辑算是成功了。

  

分享到:
评论

相关推荐

    H5游戏Browserquest端nodejs后台

    【标题】:深入理解H5游戏BrowserQuest的Node.js后台技术 在当今互联网时代,HTML5(简称H5)游戏以其轻便、跨平台的特性受到了...对于想要进入H5游戏开发领域的程序员来说,BrowserQuest无疑是一个宝贵的学习案例。

    BrowserQuest

    BrowserQuest是一款基于...这对于想要涉足Web游戏开发的程序员来说,是一份宝贵的实践资料。同时,这个项目也展示了Web技术在游戏领域的广阔应用前景,不仅降低了玩家的准入门槛,也为开发者提供了更多创新的可能性。

    Mozilla的BrowserQuest的HTML5源代碼 遊戲

    在BrowserQuest中,这些技术用于保存用户进度、游戏状态和地图数据,使得游戏体验更加流畅。 3. **WebSocket**:BrowserQuest采用WebSocket实现玩家之间的实时互动,比如聊天、攻击、移动等操作。WebSocket提供了一...

    BrowserQuest改_客户+服务器V00.2.rar

    这个项目可能是对原始BrowserQuest游戏的修改或扩展,BrowserQuest是一款基于浏览器的多人在线冒险游戏,通过WebSocket技术实现了实时的客户端-服务器通信。 在提供的压缩包文件中,我们可以看到以下几个关键文件:...

    BrowserQuest源代码是一款HTML+PHP开发的多人在线网页游戏.zip

    在BrowserQuest中,可能采用了WebSockets技术来实现实时通信。WebSockets是一种在客户端和服务器之间建立长连接的协议,使得数据能在双向通道中实时传输,非常适合于需要低延迟、高频率交互的在线游戏。通过...

    BrowserQuest.zip

    在"BrowserQuest.zip"这个压缩包中,包含了游戏的所有必要组成部分,包括客户端和服务器端的代码。游戏的客户端部分是用户与游戏进行交互的部分,它由HTML5页面、CSS样式表和JavaScript脚本组成。HTML5提供了Canvas...

    基于dockfile搭建BrowserQuest私服.rar

    dockerfile部署php项目,单纯Php环境下的cnetos,未使用其他容器,搭建BrowserQuest游戏私服

    BrowserQuest源代码.zip

    BrowserQuest是一款基于浏览器的多人在线冒险游戏,其源代码公开,为开发者提供了学习和研究Web游戏开发的宝贵资源。这个游戏使用HTML5、JavaScript和Mozilla的Web技术构建,展现了Web技术在游戏开发领域的潜力。让...

    H5小游戏源码 BrowserQuest源代码.zip

    源码的分享为开发者提供了一次深入理解H5游戏开发的机会。以下将详细阐述BrowserQuest游戏源码中的核心知识点: 1. HTML5基础:BrowserQuest充分利用了HTML5的新特性,如Canvas用于图形渲染,Web Audio API进行声音...

    小游戏源码-BrowserQuest源代码.rar

    7. **数据结构和算法**:源码中可能会包含各种数据结构,如队列(处理玩家动作)、图(表示地图连接)和堆栈(用于历史记录)。同时,算法也是游戏的关键,例如A*寻路算法用于角色自动寻路。 8. **游戏资源管理**:...

    acmeserver:BrowserQuest 服务器模拟器

    BrowserQuest 是一个基于浏览器的多人在线冒险游戏,它允许玩家通过网络与其他玩家互动,共同探索一个像素风格的世界。在这个世界中,你可以与怪物战斗、收集物品,并与其他玩家合作完成任务。"acmeserver" 提供了一...

    在线的HTML5游戏BrowserQuest.zip

    该游戏主要使用 HTML5 进行开发,在游戏中,玩家扮演一个年轻的战士,在危险的世界中展开冒险并寻找宝藏。该游戏使用了大量先进的技术,包括:WebSockets 技术:该技术主要用于在浏览器中实现和服务器端的双向通信。...

    H5微信小游戏源码-BrowserQuest源代码.zip

    描述中的 "H5微信小游戏源码-BrowserQuest源代码.zip" 确认了这是一个关于H5技术的游戏源码,特别提到了BrowserQuest这款游戏。源码通常包括编程语言的代码文件,用于构建和运行游戏。这里的".zip"表明源代码被压缩...

    微信小游戏源码 BrowserQuest源代码(仅用于学习参考)

    微信小游戏源码 BrowserQuest源代码(仅用于学习参考)微信小游戏源码 BrowserQuest源代码(仅用于学习参考)微信小游戏源码 BrowserQuest源代码(仅用于学习参考)微信小游戏源码 BrowserQuest源代码(仅用于学习...

    BrowserQuest:HTML5 WebSocket 游戏

    描述此 BrowserQuest 已被修改为与 SOFTLAYER 一起使用。虚拟服务器运行环境该游戏设置为在以下环境中运行。 OS Ubuntu Linux 14.04 LTS Trusty Tahr - LAMP Install (64 bit)CPU 1コア, メモリ 1G, ディスク 25GB...

    Browserquest6:测试

    文档位于客户端和服务器目录中。 执照 代码在MPL 2.0下获得许可。 内容根据CC-BY-SA 3.0许可。 有关详细信息,请参见LICENSE文件。 学分 由创建: 弗兰克·勒科林特(Franck Lecollinet)- Guillaume Lecollinet-

    HTML5游戏 BrowserQuest

    html5游戏源文件源码下载,游戏源文件源码html5,html5游戏源文件源码,游戏源文件html5源码下载,BrowserQuest 这款游戏基于HTML5的,所以可以在几乎所有的浏览器 - 包括iOS...目前Mozilla已经发布了BrowserQuest源代码。

    html5多人在线rpg游戏源码.zip

    在这个游戏中,角色移动、怪物动画、地图展示等都是通过Canvas API来实现的。 2. **WebGL**:虽然BrowserQuest可能没有直接使用WebGL进行3D图形渲染,但在HTML5游戏中,WebGL是一个强大的工具,可以创建引人入胜的...

    BrowserQuestLua:由 Lua 编写的 BrowserQuest

    修改 config.lua 中的 appRootPath 项的值为 BrowserQuestLua 中 server 文件夹所在的真实路径 修改 client/BrowserQuestLua/src/config.lua 中的 SERVER_ADDR 项为 GBC 服务器的 ip 地址 运行 ps. 因 ios模拟器 ...

Global site tag (gtag.js) - Google Analytics