使用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属性)