Question

我在JavaScript中创建了一个单一的网络RPG。

基于事件的游戏不会太沉重，但我会将大量对象加载到屏幕上。

我有两个问题：

1st：我已经使用createJS来加载我的位图，但是当我立刻将多个对象加载到屏幕并对其进行动画处理时发现严重延迟。我想知道是否有比createJS更好的库来加载对象。

第二名：我计划将PHP用于用户个人资料，统计信息等...但是发现向服务器编写AJAX调用需要几个步骤......

首先，使用jquery .get()
然后更新数据库
然后使用json_encode发回新更新的变量，并回显变量。
最后，将更新后的变量存储回javascript变量

我想知道在NodeJS中如何处理这样的事情。我读了How to decide when to use Node.js?以找出NodeJS的用法，特别是这句话，＆＃34;我相信Node.js最适合实时应用：在线游戏，协作工具，聊天室或任何东西一个用户对应用程序的处理需要立即被其他用户看到，而不需要刷新页面。＆＃34;跟我说话......但是我还不确定我是否需要使用NodeJS代替PHP。

谢谢

编辑：

嗨，我认为我正在做错拼贴和缓存......

在我的Game.php中，我调用了几个函数来创建/绘制对象。

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说我应该在将每个对象添加到容器之前对其进行缓存？无论如何，我明白为什么你要将所有对象添加到stage然后一次缓存stage。

所以我在这里试过......但它没有渲染任何内容：

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);
       }
    }
}

Answer 1

我目前正在使用createjs创建一个RPG，我可以显示200个字符，带有自己的动画和生命，没有滞后问题。

Createjs是一个非常好的框架，但您必须了解它如何工作以避免性能问题。在不同的容器中分层，并缓存它们非常重要。例如，如果您的游戏背景由大量32x32磁贴组成（如RPG制造商），则应该缓存它，因为它不应该在游戏中发生变化。

例如：

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);

缓存容器时，它会在隐藏的画布中绘制所有子项，然后在舞台更新时在当前画布上绘制缓存的画布。如果你没有缓存它，只要想想每次调用stage.update（）时，你的所有孩子都会在画布上被绘制一个。

关于NodeJS：nodeJS非常酷，它使用Socket.IO插件，它使用网络套接字的全部功能。如果您需要实时游戏，请忘记ajax：websocket就是您所需要的。尝试socket.io http://socket.io/你会喜欢它;）

编辑：

你没有很好地使用缓存，我认为你需要先了解缓存究竟是什么。在我之前的示例中，您可以看到我们在容器中添加所有切片。所以我们有mapWidth * mapHeight个瓷砖。每次调用stage.update()时，它都会循环每个tile位图并在画布上绘制它。因此，如果你有一个50x20的地图，它将每stage.update()绘制1000个位图，这对性能不利。

如果我们缓存backgroundContainer所有图块都将在内部画布上绘制，并且当调用stage.update()时，它将只绘制1个图像而不是1000.您必须缓存您的世界容器< strong>在之后添加所有图块，如我的示例所示。

createjs的强大之处在于您可以根据需要封装显示对象，这就是我在游戏中组织容器的方式：

stage
   screen
      scene
         background -> Here I display a background image (E.g: 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 (E.g: a fog image with 0.2 opacity)
      transition -> Here I make transition when my character go to a new map

当我的角色在地图上移动时，我只需移动body容器（更改X和Y属性）

使用nodeJS和createJS用于浏览器单人RPG

1 个答案: