Using nodeJS and createJS for browser single-player RPG [closed]

Question

Closed. This question is opinion-based. It is not currently accepting answers.

---

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

Closed 8 years ago.

Improve this question

I'm creating a single player web RPG in JavaScript.

It will not be too heavy of an events-based game, but I will be loading lots of objects to the screen.

I have two questions:

1st: I've used createJS to load my bitmaps, but noticed severe lag when I loaded several objects to the screen at once and animated them. I'm wondering if there is a better library than createJS to load objects.

2nd: I was planning on using PHP for user profiles, stats, etc... but found writing AJAX calls to the server required several steps...

• first, send javascript variable to php using jquery .get()
• then update database
• then send newly updated variable back by using json_encode, and echoing out the variable.
• Finally, store that updated variable back in a javascript variable

I'm wondering how something like this is handled in NodeJS. I read How to decide when to use Node.js? to figure out the usage of NodeJS, and this sentence in particular, "I believe Node.js is best suited for real-time applications: online games, collaboration tools, chat rooms, or anything where what one user does with the application needs to be seen by other users immediately, without a page refresh." spoke to me... but I'm still not sure if I'll need to use NodeJS instead of PHP.

Thank you

---

EDIT:

Hi, I think I'm doing the tiling and caching incorrectly...

In my Game.php, I call several function to create/draw the objects.

Game.php:

function init() {                               
    canvas = document.getElementById("demoCanvas"); 
    start();        
}

function start() {
    stage = new createjs.Stage("demoCanvas");
    stage.mouseMoveOutside = true;

    //Create Objects
    createWorld();
    createTiles();
    createPlayers();

In my function tick() I have a centerViewTo which centers the player in the viewport relative to the background (mimicking a camera).

The issue with this is, I pass in a single bitmap bgBMP that I was drawing the player relative to. If I do tiling, I'm not sure how I can draw the player relative to the background image.

centerViewTo(stage.canvas, stage, segment, {x:0, y:0, width:bgBMP.image.width, height:bgBMP.image.height});

Moreover, http://www.createjs.com/Docs/EaselJS/classes/DisplayObject.html#method_cache says I should cache each object before adding it to the container? Anyway, I get why you add all objects to the stage and then cache the stage all at once.

So I've tried that here... but it's not rendering anything:

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

I'm currently creating a RPG too with createjs, and I can display 200 characters, with their own animations and life, without lag issues.

Createjs is a really good framework, but you have to understand how it works to avoid performance issues. It's very important to separe layers in differents containers, and to cache them. For example, if the background of your game is composed with a lot of 32x32 tiles (like in RPG maker), you should cache it since it's not supposed to change during the game.

For example :

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

When you cache a container, it will draw all the children in a hidden canvas, and then just draw the cached canvas on your current canvas on stage update. If you don't cache it, just think that every time you call stage.update(), all your children will be drawn one per one on your canvas.

About NodeJS : nodeJS is really cool with the Socket.IO plugin, which use the full power of web sockets. Forget ajax if you need real time for a game : websocket is what you need. Try socket.io http://socket.io/ you will love it ;)

---

EDIT:

You don't use the cache well, I think you need to understand first what exactly does the cache. In my previous example, you can see we add all tiles in a container. So we have mapWidth * mapHeight tiles. Every time you call stage.update(), it will loop each tile bitmap and draw it on canvas. So if you have a 50x20 map, it will draw 1000 bitmaps every stage.update(), that's not good for performances.

If we cache backgroundContainer all tiles will be draw on an internal canvas, and when stage.update() is called it will only draw 1 image this time instead of 1000. You have to cache your world container after you add all the tiles, as in my example.

The power of createjs is that you can encapsulate your display objects as you want, this is how I organize my containers in my game :

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

When my character move on the map, I just need to move the body container (changing X and Y properties)