使用nodeJS和createJS进行浏览器单人RPG
我正在用JavaScript创build一个单人RPG游戏。
基于事件的游戏不会太重，但是我会在屏幕上加载大量的对象。
我有两个问题：
第一：我已经使用createJS来加载我的位图，但是当我一次加载几个对象到屏幕上并激活它们时，我注意到严重滞后。 我想知道是否有比createJS更好的库来加载对象。
第二：我正在计划使用PHP的用户configuration文件，统计等…但发现编写AJAX调用服务器需要几个步骤…
- 首先，使用jQuery的
.get()发送JavaScriptvariables到PHP - 然后更新数据库
- 然后通过使用
json_encode发送新更新的variables，并回显variables。 - 最后，将更新后的variables存储回一个javascriptvariables中
我想知道在NodeJS中如何处理这样的事情。 我读了如何决定何时使用Node.js？ 了解NodeJS的用法，特别是这句话：“我相信Node.js最适合实时应用程序：在线游戏，协作工具，聊天室，或者其他用户在应用程序中需要做的事情被其他用户立即看到，没有页面刷新。“ 对我说话…但我仍然不确定是否需要使用NodeJS而不是PHP。
谢谢
编辑：
嗨，我想我正在做错误的平铺和caching…
在我的Game.php中，我调用了几个函数来创build/绘制对象。
Game.php：
function init() { canvas = document.getElementById("demoCanvas"); start(); } function start() { stage = new createjs.Stage("demoCanvas"); stage.mouseMoveOutside = true; //Create Objects createWorld(); createTiles(); createPlayers();
在我的函数tick（）中，我有一个centerViewTo ，它把玩家放在相对于背景的视口中（模仿相机）。
这个问题是，我传入一个位图bgBMP ，我正在绘制播放器相对于。 如果我做平铺，我不知道我怎么可以相对于背景图像绘制玩家。
centerViewTo(stage.canvas, stage, segment, {x:0, y:0, width:bgBMP.image.width, height:bgBMP.image.height});
此外， http : //www.createjs.com/Docs/EaselJS/classes/DisplayObject.html#method_cache说我应该caching每个对象之前，将其添加到容器？ 无论如何，我明白了为什么要将所有对象添加到stage ，然后一起cachingstage 。
所以我在这里试过，但是它没有渲染任何东西：
CreateObjects.js：
var world; var bgBMP; var tile; var mapWidth = 10; //Map size is 1000... so 10x10 tiles var mapHeight = 10; //World will be a container to hold all objects function createWorld() { world = new createjs.Container(); bgBMP = new createjs.Bitmap("images/bg2.png"); world.cache(0, 0, mapWidth , mapHeight ); world.addChild(bgBMP); stage.addChild(world); } function createTiles() { for (var x = 0; x < mapWidth; x++){ for (var y = 0; y < mapHeight; y++){ var tile = new createjs.Bitmap('images/myTile.png'); tile.x = x * 32; tile.y = y * 32; world.cache(0, 0, mapWidth , mapHeight ); world.addChild(tile); } } }
我目前正在用createjs创build一个RPG，我可以显示200个angular色，并带有自己的animation和生活，没有滞后问题。
Createjs是一个非常好的框架，但是你必须了解它是如何工作的以避免性能问题。 分离不同容器中的图层并将其caching非常重要。 例如，如果你的游戏背景是由许多32×32的方块组成的（比如在RPG制造商中），你应该caching它，因为在游戏过程中它不应该改变。
例如 ：
var backgroundContainer = new createjs.Container(); // mapWidth and mapHeight is the number of X and Y tiles for (var x = 0; x < mapWidth; x++){ for (var y = 0; y < mapHeight; y++){ var tile = new createjs.Bitmap('mytile-'+i+'.png'); tile.x = x * 32; tile.y = y * 32; backgroundContainer.addChild(tile); } } backgroundContainer.cache(0, 0, mapWidth, mapHeight); stage.addChild(backgroundContainer);
当你caching一个容器时，它将把所有的孩子都画在一个隐藏的canvas上，然后在舞台更新的时候，在当前的canvas上绘制caching的canvas。 如果你没有caching它，只要想一想每次调用stage.update（）时，你的所有孩子都会在你的canvas上绘制一个。
关于NodeJS：nodeJS对Socket.IO插件来说非常酷，它使用了web socket的全部function。 如果你需要真正的游戏时间，请忘记ajax：websocket就是你需要的。 尝试socket.io http://socket.io/你会喜欢它;）
编辑：
你不使用caching，我认为你需要先了解caching究竟是什么。 在我之前的例子中，你可以看到我们添加一个容器中的所有瓷砖。 所以我们有mapWidth * mapHeight瓷砖。 每次调用stage.update() ，它都会循环每个tile位图并在canvas上绘制它。 所以如果你有一个50×20的地图，它会在每个stage.update()画出1000个位图，这对性能不是很好。
如果我们cachingbackgroundContainer所有的tile将被绘制在一个内部的canvas上，当stage.update()被调用的时候，这个时候只会绘制一个图像，而不是1000.你必须caching你的世界容器，在我的例子。
createjs的强大之处在于，你可以随心所欲地封装显示对象，这就是我在我的游戏中组织容器的方法：
stage screen scene background -> Here I display a background image (Eg: the sky) body tiles -> All my background tiles (I cache this) events -> Map events (moving NPC, my character, etc.) overlay -> Here I display an overlay image (Eg: a fog image with 0.2 opacity) transition -> Here I make transition when my character go to a new map
当我的angular色在地图上移动时，我只需要移动body容器（更改X和Y属性）