setCenter / moveCenter with node.js

Jan 12, 2014 at 9:08 AM
Hello,

I've tried to create a small scene with sheetengine via node.js and canvas, it works very well.. but when I try to set or move the camera with setCenter or moveCenter, nothing happens and the scene is redrawn at the same camera position as before.
Any idea what could be wrong ? Thx !
var http = require('http');
var Canvas = require('canvas');
var sheetengine = require('../sheetengine');

sheetengine.drawing.createCanvas = function(w, h) { return new Canvas(w, h); };
var canvasElement = new Canvas(900,500);
sheetengine.scene.init(canvasElement);
drawScene();

http.createServer(function (req, res) {
    var requestor = req.headers["x-forwarded-for"];

    // redraw the scene for every request
    redrawScene(200,200);

    // send the image as the response
    var buf = sheetengine.canvas.toBuffer();

    res.statusCode = 200;
    res.setHeader('Content-Type', 'image/png');
    res.setHeader('Content-Length', buf.length);
    res.setHeader('Pragma','no-cache');
    res.end(buf);

}).listen(60080,"127.0.0.1");


function CreateWorld(x,y,sheet_size,color){
    for (x_axis=0;x_axis<x;x_axis++) {
        for (y_axis=0;y_axis<y;y_axis++) {
            var basesheet = new sheetengine.BaseSheet({x:x_axis*sheet_size,y:y_axis*sheet_size,z:0}, {alphaD:90,betaD:0,gammaD:0}, {w:sheet_size,h:sheet_size});
            basesheet.color = color;
        }
    }
}

function drawScene() {
    CreateWorld(50,50,50,"#5d7e36");
    sheetengine.calc.calculateAllSheets();
    sheetengine.drawing.drawScene(true);
    return;
}

function redrawScene(xcoord,ycoord){
    sheetengine.scene.setCenter({x:xcoord,y:ycoord,z:0});
    sheetengine.calc.calculateAllSheets();
    sheetengine.drawing.drawScene(true);
Coordinator
Jan 12, 2014 at 10:15 AM
Moving the camera won't work if you don't provide a background canvas size in the init method, as described in the "Dynamic vs static main canvas" section here.

So try to provide a background canvas. I have to mention that I've never tried this option though, because moving the camera suggests that it is some sort of an interactive application, so it would be quite resource-consuming if the server-side did the rendering. If you are building interactive games/apps it is better to put all your logic on the client side and implement some sort of communication with the backend to retrieve information on sheets to be loaded, etc.

This server-side feature is used in Crossyards, when the user creates a yard, a picture of the yard is taken on the server-side and stored in the database, so it can provide a fast rendering method for the global map. However, there is no interaction, no dynamics, no movements involved there, just creating a snapshot of a scene drawn with sheetengine, that's it.
Jan 12, 2014 at 6:40 PM
First thanks for quick reply.

I've tried to provide the size of the canvas, now it works perfectly.

Can you describe more what exactly provide the server to the clients in Crossyards ?
In my app I tried first to render everything on the client, but it seems to be a bit slow on tablets/phone devices. So I thought that letting the server to do the dirty job would solve my problem :) I have to say I am not an expert, so I'd appreciate any hint in this direction ;)

Thanks !
Coordinator
Jan 13, 2014 at 6:27 AM
Crossyards consists of 2 main parts. One is the world map where large amount of graphical information is displayed in a single viewport - here static images are created on the server side and image pyramids are compounded from them. The images of these image pyramids are served to the client and the client simply displays these images. No movements or dynamics are involved, just displaying static images located at different positions. The other main part of Crossyards comes from the fact that it is a development platform: it can be extended by third party apps. These apps or games can send requests to the Crossyards server and retrieve yards' data in JSON, that can be used to display it in a browser. So in this latter case a JSON is returned by a server, as sort of static data and the client displays the sheets using this JSON, and also adds dynamics to the whole scene: implements the game logic, provides moving objects, etc.

Server doing the dirty job is an exciting concept, however you have to understand that in this case there are two critical points you have to be aware of:
  • communication needs to be very efficient and optimal probably using websocket technology or something powerful like that,
  • one server will do the job for every client, so if your game is to be played by a 1000 users, your server must be able to render the scenes 1000 times paralelly, for which you will need enormous amount of computational capacity.
There are experiments in the world where the client only displays a video stream rendered by the server real-time, but it is a very special area that requires special skills and experiences :D I myself wouldn't go in that direction.