Live Game Views

Live Game Views allow client applications to insert any image in the JavaScript DOM of the webpage. The most used scenario is showing images rendered by the game engine in the UI. Examples include: showing 3D animated unit portraits, weapons, mini-maps etc. Having the 3D rendered image as part of the DOM has many advantages because it gives complete freedom on what to do with it. You can apply filters, transformations, draw text on it etc.

Live Game Views are implemented via JavaScript ImageData objects. Thay can be later drawn in canvas objects.

Warning

You must include coherent.js in any page you want to use Live Game Views in.

To create a Live Game View, use the Coherent::UI::View::CreateImageData method. It will create an ImageData object in the JS DOM with the specified size and name identifier. You'll also get a native Coherent::UI::ImageData object that will represent the live link between the application and the JS DOM object.

When a 'live' ImageData object is created or updated, the function onEngineImageDataUpdated will be called on all canvas objects in the page that implement it. The function will pass the name of the ImageData and the object itself. Through the name you can perform any operation you want with exactly the Live Views you need and ignore the rest. It's important to listen to updates of the object and perform any additional drawing every time it's updated.

This sample JavaScript code listens for updates in a live ImageData object called "myImageData" and draws green text on it. The callback will execute every time you update the image in native code.

window.onload = function() {
    var c = document.getElementById("myCanvas");
    c.onEngineImageDataUpdated = function (name, image) {
        if (name != "myImageData")
            return;

        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");

        ctx.clearRect(0, 0, c.width, c.height);
        ctx.putImageData(image, 0, 0);
        ctx.fillStyle = "green";
        ctx.strokeStyle = "white";
        ctx.font = "20pt Arial";
        ctx.fillText("Some Text!!", 10, 50);
    }
}

Warning

Always clear the canvas where you draw before re-drawing the content.

To update your Live Game View in native code just call the Coherent::UI::ImageData::Update method with the new content. The change will automatically be made available in the JavaScript object. Live Game Views require 4 channel images with 1 byte per-channel ordered RGBA.

After you are done with a Live View you can destroy it by calling the Coherent::UI::ImageData::Destroy method. This will destroy the native object but the JavaScript counterpart will continue to live with the last received image. All active Live Views in the page are collected in the engine._coherentLiveImageData dictionary and are indexable by their name.

For a sample usage check the "Sample_HUD" project.

Live Game Views are bound to the View they were created in and can't be shared between Views.